RLS policies implementeren, Demo auth flow

app/(marketing)/components/experiment-cta.tsx

@@ -0,0 +1,56 @@
+/**
+ * Experiment CTA Component
+ * 
+ * Call-to-action section at the end of the manifesto.
+ * Subtle buttons, no aggressive colors or fake urgency.
+ * Follows design specs: large typography, centered, minimal styling.
+ */
+
+import Link from 'next/link'
+import type { CTAContent } from '@/content/schemas/manifesto'
+
+interface ExperimentCTAProps {
+  content: CTAContent
+}
+
+export function ExperimentCTA({ content }: ExperimentCTAProps) {
+  return (
+    <section className="py-12 md:py-16 px-4 text-center bg-white" aria-labelledby="cta-heading">
+      <div className="max-w-4xl mx-auto">
+        <h2 
+          id="cta-heading"
+          className="text-5xl md:text-7xl font-black mb-3 md:mb-6 text-slate-900 font-sans"
+        >
+          {content.heading}
+        </h2>
+        
+        {content.subheading && (
+          <p className="text-xl md:text-2xl text-slate-600 mb-6 md:mb-8 font-serif max-w-2xl mx-auto">
+            {content.subheading}
+          </p>
+        )}
+        
+        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center" role="group" aria-label="Actie knoppen">
+          {/* Primary Button - Subtle dark background */}
+          <Link
+            href={content.primaryButton.href}
+            className="px-8 py-4 bg-slate-900 text-white font-semibold text-base font-sans rounded-md hover:bg-slate-800 transition-colors focus-visible:outline-2 focus-visible:outline-slate-900 focus-visible:outline-offset-2 min-w-[200px] text-center"
+            aria-label={content.primaryButton.text}
+          >
+            {content.primaryButton.text}
+          </Link>
+          
+          {/* Secondary Button - Subtle outline */}
+          <Link
+            href={content.secondaryButton.href}
+            className="px-8 py-4 bg-white text-slate-900 font-semibold text-base font-sans border-2 border-slate-900 rounded-md hover:bg-slate-50 transition-colors focus-visible:outline-2 focus-visible:outline-slate-900 focus-visible:outline-offset-2 min-w-[200px] text-center"
+            aria-label={content.secondaryButton.text}
+          >
+            {content.secondaryButton.text}
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}
+