RLS policies implementeren, Demo auth flow

app/(marketing)/page.tsx

@@ -3,20 +3,117 @@
  * 
  * Main landing page for the AI Speedrun manifesto website.
  * This page will display the long-form manifesto content.
+ * 
+ * Performance optimizations:
+ * - Lazy load components below the fold (ComparisonTable, ExperimentCTA)
+ * - Critical content (Hero, ManifestoContent) loads immediately
  */
 
-export default function ManifestoPage() {
-  return (
-    <main>
-      <div className="max-w-4xl mx-auto px-4 py-8">
-        <h1 className="text-4xl font-bold text-slate-900 mb-4">
-          Manifesto Page
-        </h1>
-        <p className="text-lg text-slate-600">
-          Marketing route group is working. Content will be loaded here.
-        </p>
+import type { Metadata } from 'next'
+import dynamic from 'next/dynamic'
+import { getContent } from '@/lib/content/loader'
+import type { ManifestoContent, MetadataContent } from '@/content/schemas/manifesto'
+import { HeroQuote } from './components/hero-quote'
+import { ManifestoContent as ManifestoContentComponent } from './components/manifesto-content'
+import { StructuredData } from './components/structured-data'
+
+// Generate metadata for SEO
+export async function generateMetadata(): Promise<Metadata> {
+  const metadataContent = await getContent<MetadataContent>('nl', 'metadata')
+  const meta = metadataContent.manifesto
+  
+  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || 'https://aispeedrun.vercel.app'
+  const ogImageUrl = `${siteUrl}${meta.ogImage}`
+  
+  return {
+    title: meta.title,
+    description: meta.description,
+    keywords: meta.keywords,
+    authors: [{ name: 'Colin van der Heijden' }],
+    openGraph: {
+      type: 'article',
+      title: meta.ogTitle,
+      description: meta.ogDescription,
+      images: [
+        {
+          url: ogImageUrl,
+          width: 1200,
+          height: 630,
+          alt: meta.ogTitle,
+        },
+      ],
+      siteName: 'AI Speedrun',
+      locale: 'nl_NL',
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: meta.ogTitle,
+      description: meta.ogDescription,
+      images: [ogImageUrl],
+    },
+    alternates: {
+      canonical: siteUrl,
+    },
+    robots: {
+      index: true,
+      follow: true,
+      googleBot: {
+        index: true,
+        follow: true,
+        'max-video-preview': -1,
+        'max-image-preview': 'large',
+        'max-snippet': -1,
+      },
+    },
+  }
+}
+
+// Lazy load components below the fold for better initial load performance
+const ComparisonTable = dynamic(
+  () => import('./components/comparison-table').then((mod) => ({ default: mod.ComparisonTable })),
+  { 
+    ssr: true, // Still SSR for SEO, but code-split
+    loading: () => (
+      <div className="w-full md:max-w-[750px] mx-auto px-4 md:px-16 my-12 md:my-16">
+        <div className="h-64 bg-slate-50 animate-pulse rounded-lg" />
       </div>
-    </main>
+    )
+  }
+)
+
+const ExperimentCTA = dynamic(
+  () => import('./components/experiment-cta').then((mod) => ({ default: mod.ExperimentCTA })),
+  { 
+    ssr: true, // Still SSR for SEO, but code-split
+    loading: () => (
+      <section className="py-24 px-4 text-center bg-white">
+        <div className="max-w-4xl mx-auto">
+          <div className="h-16 bg-slate-100 animate-pulse rounded-lg mb-8" />
+          <div className="flex gap-4 justify-center">
+            <div className="h-12 w-48 bg-slate-200 animate-pulse rounded-md" />
+            <div className="h-12 w-48 bg-slate-200 animate-pulse rounded-md" />
+          </div>
+        </div>
+      </section>
+    )
+  }
+)
+
+export default async function ManifestoPage() {
+  const content = await getContent<ManifestoContent>('nl', 'manifesto')
+  
+  return (
+    <>
+      {/* Structured data for SEO */}
+      <StructuredData content={content} />
+      
+      <HeroQuote content={content.hero} />
+      <ManifestoContentComponent sections={content.sections} />
+      <div className="w-full md:max-w-[750px] mx-auto px-4 md:px-16">
+        <ComparisonTable content={content.comparison} />
+      </div>
+      <ExperimentCTA content={content.cta} />
+    </>
   )
 }