RLS policies implementeren, Demo auth flow

app/(marketing)/components/statement-section.tsx

@@ -0,0 +1,51 @@
+/**
+ * Statement Section Component
+ * 
+ * Full-width section with dark background for impactful statements.
+ * Used to highlight key messages in the manifesto.
+ */
+
+import type { StatementSection as StatementSectionType } from '@/content/schemas/manifesto'
+
+interface StatementSectionProps {
+  section: StatementSectionType
+}
+
+export function StatementSection({ section }: StatementSectionProps) {
+  const isDark = section.variant === 'dark' || !section.variant
+  
+  return (
+    <section
+      className={`w-full ${
+        isDark ? 'bg-slate-900' : 'bg-slate-50'
+      }`}
+      style={{
+        padding: '4rem 2rem',
+      }}
+      aria-labelledby={`statement-${section.id}`}
+    >
+      <div className="max-w-4xl mx-auto text-center">
+        <h2
+          id={`statement-${section.id}`}
+          className={`font-bold mb-4 md:mb-6 font-serif ${
+            isDark ? 'text-white' : 'text-slate-900'
+          }`}
+          style={{
+            fontSize: 'clamp(2rem, 5vw, 4rem)',
+            lineHeight: 'var(--line-height-tight)',
+          }}
+        >
+          {section.heading}
+        </h2>
+        <p
+          className={`text-lg md:text-xl font-serif leading-relaxed ${
+            isDark ? 'text-slate-300' : 'text-slate-700'
+          }`}
+        >
+          {section.content}
+        </p>
+      </div>
+    </section>
+  )
+}
+