feat: complete HookLab MVP - TikTok Shop coaching platform

Full-stack Next.js 15 application with:
- Landing page with marketing components (Hero, Testimonials, Pricing, FAQ)
- Multi-step candidature form with API route
- Stripe Checkout integration (subscription + webhooks)
- Supabase Auth (login/register) with middleware protection
- Dashboard with progress tracking and module system
- Formations pages with completion tracking
- Profile management with password change
- Database schema with RLS policies
- Resend email integration for transactional emails

Stack: Next.js 15, TypeScript, Tailwind CSS v4, Supabase, Stripe, Resend

https://claude.ai/code/session_01H2aRGDaKgarPvhay2HxN6Y

components/marketing/PersonaCards.tsx

@@ -0,0 +1,100 @@
+import Card from "@/components/ui/Card";
+
+const personas = [
+  {
+    id: "jeune",
+    emoji: "🎓",
+    title: "Etudiant / Jeune actif",
+    subtitle: "18-25 ans",
+    description:
+      "Tu veux generer tes premiers revenus en ligne tout en etudiant ou en debut de carriere. TikTok Shop est le levier parfait.",
+    benefits: [
+      "Flexibilite totale, travaille quand tu veux",
+      "Pas besoin de stock ni d'investissement",
+      "Competences marketing valorisables sur ton CV",
+      "Communaute de jeunes entrepreneurs motives",
+    ],
+  },
+  {
+    id: "parent",
+    emoji: "👨‍👩‍👧",
+    title: "Parent / Reconversion",
+    subtitle: "25-45 ans",
+    description:
+      "Tu cherches un complement de revenus ou une reconversion flexible depuis chez toi. TikTok Shop s'adapte a ton emploi du temps.",
+    benefits: [
+      "2h par jour suffisent pour demarrer",
+      "Travaille depuis chez toi, a ton rythme",
+      "Revenus complementaires des le premier mois",
+      "Accompagnement personnalise et bienveillant",
+    ],
+  },
+];
+
+export default function PersonaCards() {
+  return (
+    <section className="py-20 md:py-32 bg-dark-light/30">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Header */}
+        <div className="text-center max-w-2xl mx-auto mb-16">
+          <span className="inline-block px-3 py-1.5 bg-primary/10 border border-primary/20 rounded-full text-primary text-xs font-medium mb-4">
+            Pour qui ?
+          </span>
+          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-[-0.02em] mb-4">
+            Un programme adapte a{" "}
+            <span className="gradient-text">ton profil</span>
+          </h2>
+          <p className="text-white/60 text-lg">
+            Que tu sois etudiant ou parent, notre methode s&apos;adapte a toi.
+          </p>
+        </div>
+
+        {/* Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
+          {personas.map((p) => (
+            <Card key={p.id} hover className="relative overflow-hidden">
+              {/* Gradient accent top */}
+              <div className="absolute top-0 left-0 right-0 h-1 gradient-bg" />
+
+              <div className="pt-2">
+                {/* Emoji + Title */}
+                <div className="text-4xl mb-4">{p.emoji}</div>
+                <h3 className="text-xl font-bold text-white mb-1">
+                  {p.title}
+                </h3>
+                <p className="text-primary text-sm font-medium mb-3">
+                  {p.subtitle}
+                </p>
+                <p className="text-white/60 text-sm mb-6 leading-relaxed">
+                  {p.description}
+                </p>
+
+                {/* Benefits */}
+                <ul className="space-y-3">
+                  {p.benefits.map((b, i) => (
+                    <li key={i} className="flex items-start gap-3">
+                      <svg
+                        className="w-5 h-5 text-success mt-0.5 shrink-0"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M5 13l4 4L19 7"
+                        />
+                      </svg>
+                      <span className="text-white/70 text-sm">{b}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}