Initial commit

src/components/krow/KrowIdentityCard.jsx

@@ -0,0 +1,82 @@
+import { Camera, Fingerprint, Sparkles } from 'lucide-react';
+
+// A living identity card that reflects — rather than describes — the resume-less
+// KROW Identity. It fills in as the worker adds a face, skills, languages, etc.
+export default function KrowIdentityCard({ form }) {
+  const parts = [
+    { key: 'face', filled: !!form.selfie_url },
+    { key: 'name', filled: !!form.full_name.trim() },
+    { key: 'about', filled: !!form.career_goals.trim() },
+    { key: 'skills', filled: (form.skills || []).length > 0 },
+    { key: 'languages', filled: (form.languages || []).length > 0 },
+    { key: 'availability', filled: (form.availability || []).length > 0 },
+    { key: 'certifications', filled: (form.certifications || []).length > 0 },
+  ];
+  const done = parts.filter(p => p.filled).length;
+  const pct = Math.round((done / parts.length) * 100);
+
+  return (
+    <div className="rounded-2xl bg-[#0A39DF] p-5 sm:p-6 text-white overflow-hidden relative">
+      <div className="absolute -top-10 -right-10 w-40 h-40 rounded-full bg-[#F9E547]/10" />
+      <div className="relative flex items-center gap-4">
+        <div className="shrink-0">
+          {form.selfie_url ? (
+            <img src={form.selfie_url} alt="You" className="w-20 h-20 rounded-2xl object-cover ring-4 ring-white/25" />
+          ) : (
+            <div className="w-20 h-20 rounded-2xl border-2 border-dashed border-white/40 flex flex-col items-center justify-center text-white/70">
+              <Camera className="w-6 h-6" />
+              <span className="text-[9px] mt-0.5">your face</span>
+            </div>
+          )}
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="inline-flex items-center gap-1.5 text-[10px] font-medium tracking-wide bg-white/15 px-2 py-0.5 rounded-full">
+            <Fingerprint className="w-3 h-3" /> KROW Identity
+          </div>
+          <h1 className="text-[22px] sm:text-[26px] font-bold leading-tight mt-1.5 truncate">
+            {form.full_name.trim() || 'Your name'}
+          </h1>
+          <p className="text-[12px] opacity-80 mt-0.5 line-clamp-2">
+            {form.career_goals.trim() || 'What you do and what you\u2019re good at will appear here.'}
+          </p>
+        </div>
+      </div>
+
+      <div className="relative mt-4 space-y-2.5">
+        <SlotRow label="Skills" items={form.skills} />
+        <SlotRow label="Languages" items={form.languages} />
+        <SlotRow label="Availability" items={form.availability} />
+        <SlotRow label="Certifications" items={form.certifications} />
+      </div>
+
+      <div className="relative mt-4">
+        <div className="flex items-center justify-between text-[11px] mb-1.5">
+          <span className="inline-flex items-center gap-1 opacity-90"><Sparkles className="w-3 h-3 text-[#F9E547]" /> Your identity is {pct}% alive</span>
+          <span className="opacity-70">{done}/{parts.length}</span>
+        </div>
+        <div className="h-1.5 w-full rounded-full bg-white/15 overflow-hidden">
+          <div className="h-full bg-[#F9E547] transition-all duration-500" style={{ width: `${pct}%` }} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SlotRow({ label, items }) {
+  const filled = (items || []).length > 0;
+  return (
+    <div className="flex items-center gap-2 text-[11px]">
+      <span className="w-20 shrink-0 opacity-60">{label}</span>
+      {filled ? (
+        <div className="flex flex-wrap gap-1.5">
+          {items.slice(0, 4).map((it, i) => (
+            <span key={i} className="px-2 py-0.5 rounded-full bg-white/15 text-white/90">{it}</span>
+          ))}
+          {items.length > 4 && <span className="px-1.5 opacity-70">+{items.length - 4}</span>}
+        </div>
+      ) : (
+        <span className="px-2 py-0.5 rounded-full border border-dashed border-white/30 text-white/50">add {label.toLowerCase()}</span>
+      )}
+    </div>
+  );
+}