RLS policies implementeren, Demo auth flow

app/(marketing)/components/comparison-table.tsx

@@ -0,0 +1,104 @@
+/**
+ * Comparison Table Component
+ * 
+ * Visual comparison between Traditional and AI Speedrun approaches.
+ * Responsive: table on desktop, stacked cards on mobile.
+ */
+
+import type { ComparisonContent } from '@/content/schemas/manifesto'
+
+interface ComparisonTableProps {
+  content: ComparisonContent
+}
+
+export function ComparisonTable({ content }: ComparisonTableProps) {
+  return (
+    <section className="my-8 md:my-12" aria-labelledby="comparison-heading">
+      <h2 
+        id="comparison-heading"
+        className="text-2xl md:text-3xl font-bold text-slate-900 mb-4 md:mb-6 text-center font-sans"
+      >
+        {content.heading}
+      </h2>
+      
+      {/* Desktop: Table view */}
+      <div 
+        className="hidden md:block overflow-hidden rounded-lg border"
+        style={{ borderColor: '#E2E8F0' }}
+      >
+        <table className="w-full" role="table" aria-labelledby="comparison-heading">
+          <thead>
+            <tr 
+              className="bg-slate-50 border-b"
+              style={{ borderColor: '#E2E8F0' }}
+            >
+              <th scope="col" className="px-6 py-4 text-left font-semibold text-slate-900 font-sans">
+                Aspect
+              </th>
+              <th scope="col" className="px-6 py-4 text-left font-semibold text-slate-900 font-sans">
+                Traditioneel
+              </th>
+              <th scope="col" className="px-6 py-4 text-left font-semibold text-slate-900 font-sans">
+                AI Speedrun
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {content.items.map((item, index) => (
+              <tr
+                key={item.label}
+                className={`border-b ${
+                  index % 2 === 0 ? 'bg-white' : 'bg-slate-50'
+                }`}
+                style={{ borderColor: '#E2E8F0' }}
+              >
+                <th scope="row" className="px-6 py-4 font-medium text-slate-900 font-sans">
+                  {item.label}
+                </th>
+                <td className="px-6 py-4 text-slate-700 font-serif">
+                  {item.traditional}
+                </td>
+                <td className="px-6 py-4 text-slate-900 font-semibold font-serif">
+                  {item.aiSpeedrun}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Mobile: Stacked cards */}
+      <div className="md:hidden space-y-4" role="list" aria-label="Vergelijking items">
+        {content.items.map((item) => (
+          <div
+            key={item.label}
+            className="bg-white border rounded-lg p-4 shadow-sm"
+            style={{ borderColor: '#E2E8F0' }}
+            role="listitem"
+          >
+            <h3 className="font-semibold text-slate-900 mb-3 font-sans">
+              {item.label}
+            </h3>
+            <dl className="space-y-2">
+              <div className="flex justify-between items-start">
+                <dt className="text-sm text-slate-600 font-sans">Traditioneel:</dt>
+                <dd className="text-sm text-slate-700 font-serif text-right ml-4">
+                  {item.traditional}
+                </dd>
+              </div>
+              <div className="flex justify-between items-start">
+                <dt className="text-sm font-semibold text-slate-900 font-sans">
+                  AI Speedrun:
+                </dt>
+                <dd className="text-sm font-semibold text-slate-900 font-serif text-right ml-4">
+                  {item.aiSpeedrun}
+                </dd>
+              </div>
+            </dl>
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}
+