Initial commit

src/components/krow/talent/LearnToday.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { BookOpen } from 'lucide-react';
+
+export default function LearnToday({ courses = [] }) {
+  const recs = courses.filter((c) => c.status !== 'archived').slice(0, 4);
+  return (
+    <section className="rounded-2xl bg-white border border-[#E5E7EB] p-6 sm:p-8">
+      <h2 className="text-[18px] font-bold text-[#0F172A]">Learn</h2>
+      <p className="text-[13px] text-[#6B7280] mb-5">Micro-learning. 5-minute lessons. Learning increases value immediately.</p>
+      {recs.length === 0 ? (
+        <p className="text-[13px] text-[#6B7280]">No recommendations yet.</p>
+      ) : (
+        <div className="space-y-2">
+          {recs.map((c) => (
+            <Link key={c.id} to={`/university/${c.id}`} className="flex items-center justify-between gap-3 p-3 rounded-xl hover:bg-[#F9FAFB] border border-transparent hover:border-[#E5E7EB] transition-colors">
+              <div className="flex items-center gap-3">
+                <div className="w-9 h-9 rounded-lg bg-[#EFF6FF] text-[#0A39DF] flex items-center justify-center"><BookOpen className="w-4 h-4" /></div>
+                <div>
+                  <div className="text-[14px] font-medium text-[#0F172A]">{c.title}</div>
+                  <div className="text-[11px] text-[#6B7280]">{c.estimated_minutes} min · {c.category}</div>
+                </div>
+              </div>
+              <span className="text-[12px] font-bold text-[#0A39DF] whitespace-nowrap">+{Math.max(1, Math.round((c.xp || 100) / 20))} Score</span>
+            </Link>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}