hero-section, start login

app/(marketing)/components/hero-section-client.tsx

@@ -3,20 +3,25 @@
 import { HeroSection } from '@/components/ui/hero-section-2'
 
 interface HeroSectionClientProps {
-  logo: {
+  logo?: {
     url: string
     alt: string
     text?: string
   }
   slogan?: string
   title: React.ReactNode
-  subtitle: string
+  subtitle: string | React.ReactNode
+  punchline?: string | React.ReactNode
   callToAction: {
     text: string
     href: string
   }
+  secondaryCallToAction?: {
+    text: string
+    href: string
+  }
   backgroundImage: string
-  contactInfo: {
+  contactInfo?: {
     website: string
     phone: string
     address: string

app/(marketing)/page.tsx

@@ -17,6 +17,7 @@ import { getContent } from '@/lib/content/loader'
 import type { MetadataContent } from '@/content/schemas/manifesto'
 import { HeroSectionClient } from './components/hero-section-client'
 import { BuildTimeline } from './components/build-timeline'
+import { WhyMe } from '@/components/ui/why-me'
 
 // Generate metadata for SEO
 export async function generateMetadata(): Promise<Metadata> {
@@ -70,13 +71,31 @@ export async function generateMetadata(): Promise<Metadata> {
 }
 
 // Content interfaces
-interface StatementContent {
-  hero: {
-    quote: string
-    attribution: string
-    attributionContext: string
-    subtitle: string
+interface HeroContent {
+  title: {
+    main: string
+    accent: string
   }
+  subtitle: string
+  punchline: {
+    question: string
+    answer: string
+  }
+  callToAction: {
+    primary: {
+      text: string
+      href: string
+    }
+    secondary: {
+      text: string
+      href: string
+    }
+  }
+  backgroundImage: string
+}
+
+interface StatementContent {
+  hero: HeroContent
 }
 
 interface Feature {
@@ -111,35 +130,32 @@ export default async function HomePage() {
   // Load content
   const manifestoContent = await getContent<StatementContent>('nl', 'manifesto')
   const timelineContent = await getContent<TimelineContent>('nl', 'timeline')
+  const heroContent = manifestoContent.hero
 
   return (
     <>
       {/* Hero Section */}
       <HeroSectionClient
-        logo={{
-          url: "/next.svg",
-          alt: "AI Speedrun Logo",
-          text: "AI Speedrun"
-        }}
-        slogan="BUILD IN PUBLIC"
         title={
           <>
-            Software on Demand
-            <br />
-            <span className="text-teal-600">Van €100k naar €200</span>
+            {heroContent.title.main}{' '}
+            <span className="text-teal-600 block mt-2">
+              {heroContent.title.accent}
+            </span>
           </>
         }
-        subtitle="Enterprise software hoeft niet meer €100.000+ per jaar te kosten. AI-powered development verkort dit naar 4 weken en €200 totale kosten. Dit EPD prototype is het levende bewijs."
-        callToAction={{
-          text: "PROBEER HET PROTOTYPE →",
-          href: "/login"
-        }}
-        backgroundImage="https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072&auto=format&fit=crop"
-        contactInfo={{
-          website: "aispeedrun.nl",
-          phone: "Demo Project",
-          address: "Build in Public"
-        }}
+        subtitle={heroContent.subtitle}
+        punchline={
+          <>
+            {heroContent.punchline.question}
+            <br />
+            <br />
+            <strong>{heroContent.punchline.answer}</strong>
+          </>
+        }
+        callToAction={heroContent.callToAction.primary}
+        secondaryCallToAction={heroContent.callToAction.secondary}
+        backgroundImage={heroContent.backgroundImage}
       />
 
       {/* Statement Section - Software on Demand */}
@@ -181,6 +197,9 @@ export default async function HomePage() {
         <BuildTimeline data={timelineContent} />
       </section>
 
+      {/* About Me Section */}
+      <WhyMe />
+
       {/* CTA Section */}
       <section className="py-24 px-4 text-center bg-gradient-to-br from-slate-50 to-white">
         <div className="max-w-3xl mx-auto">

app/globals.css

@@ -211,16 +211,40 @@ body {
   outline-offset: 2px;
 }
 
+/* Floating animation for expertise badges */
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  25% {
+    transform: translateY(-5px) rotate(0.5deg);
+  }
+  50% {
+    transform: translateY(-3px) rotate(-0.5deg);
+  }
+  75% {
+    transform: translateY(-7px) rotate(0.3deg);
+  }
+}
+
+.animate-float {
+  animation: float 5s ease-in-out infinite;
+}
+
 /* Reduced motion support */
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
-    animation-duration: 0.01ms !important;
+    animation-duration: 0.02ms !important;
     animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
+    transition-duration: 0.03ms !important;
     scroll-behavior: auto !important;
   }
+
+  .animate-float {
+    animation: none !important;
+  }
 }
 
 /* AI source highlighting (gebruikt in Intake editor) */