Initial commit

src/components/krow/CareerTrajectory.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { ArrowRight } from 'lucide-react';
+
+function Stage({ label, value, sub, accent, to }) {
+  const body = (
+    <div className="text-center sm:text-left">
+      <div className="text-[11px] font-medium uppercase tracking-wider text-[#94A3B8]">{label}</div>
+      <div className={`text-[20px] sm:text-[26px] font-semibold mt-1 tracking-tight ${accent ? 'text-[#0A39DF]' : 'text-[#0F172A]'}`}>
+        {value}
+      </div>
+      {sub && <div className="text-[13px] text-[#64748B] mt-0.5">{sub}</div>}
+    </div>
+  );
+  return to ? (
+    <Link to={to} className="hover:opacity-80 transition-opacity">{body}</Link>
+  ) : body;
+}
+
+export default function CareerTrajectory({ profile, nextPath, nextReady, futureRole, futureIncome }) {
+  const current = profile?.current_position || profile?.desired_position || 'Starting Out';
+  const next = nextPath?.target_role || nextPath?.name || 'Next Role';
+  return (
+    <section className="text-center pt-4 pb-12 sm:pt-8 sm:pb-20">
+      <span className="text-[12px] font-medium tracking-wide text-[#0A39DF] uppercase">Your Career</span>
+      <h1 className="text-[32px] sm:text-[44px] font-bold tracking-tight text-[#0F172A] mt-4 leading-[1.05]">
+        Everything revolves around your future.
+      </h1>
+      <p className="text-[15px] text-[#64748B] mt-4 max-w-sm mx-auto">
+        Not a university. A Career Acceleration Engine.
+      </p>
+
+      <div className="mt-12 sm:mt-16 flex flex-col sm:flex-row items-center justify-center gap-5 sm:gap-10">
+        <Stage label="Current" value={current} />
+        <ArrowRight className="w-4 h-4 text-[#CBD5E1] rotate-90 sm:rotate-0" />
+        <Stage label="Next Role" value={next} sub={`${nextReady}% ready`} accent to={nextPath ? '/university' : null} />
+        <ArrowRight className="w-4 h-4 text-[#CBD5E1] rotate-90 sm:rotate-0" />
+        <Stage label="Future" value={futureRole} sub={futureIncome || ' '} />
+      </div>
+    </section>
+  );
+}