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>
+  )
+}
+

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>
+  )
+}
+

app/(marketing)/components/hero-quote.tsx

@@ -0,0 +1,59 @@
+/**
+ * Hero Quote Component
+ * 
+ * Full-viewport hero section with Jensen Huang quote.
+ * Displays quote, attribution, and subtitle from content.
+ */
+
+import type { HeroContent } from '@/content/schemas/manifesto'
+import { MarketingShader } from './marketing-shader'
+
+interface HeroQuoteProps {
+  content: HeroContent
+}
+
+export function HeroQuote({ content }: HeroQuoteProps) {
+  return (
+    <section 
+      className="relative min-h-screen flex items-center justify-center bg-slate-900"
+      style={{ backgroundColor: '#0F172A' }} // Expliciet donkere achtergrond voor maximum contrast
+      aria-label="Hero quote sectie"
+    >
+      {/* Shader Background - zeer subtiel (opacity 0.02) */}
+      {/* Op mobile: donkere fallback, op desktop: subtiele shader */}
+      <MarketingShader variant="hero" className="z-0" />
+      
+      {/* Content Overlay */}
+      <div className="relative z-10 w-full max-w-4xl px-4 md:px-8 text-center pt-20 md:pt-0">
+        <blockquote 
+          className="text-white font-serif italic mb-4 md:mb-6" 
+          style={{ 
+            fontSize: 'clamp(1.5rem, 5vw, 4rem)', // Mobile: smaller, Desktop: larger
+            lineHeight: 'var(--line-height-tight)',
+            textShadow: '0 2px 8px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3)', // Sterkere shadow voor beter contrast
+            color: '#FFFFFF', // Expliciet wit voor maximum contrast
+          }}
+          cite={content.attribution}
+        >
+          "{content.quote}"
+        </blockquote>
+        
+        <div className="text-white font-sans text-sm md:text-base" style={{ textShadow: '0 1px 3px rgba(0, 0, 0, 0.4)' }}>
+          <cite className="not-italic font-semibold text-base md:text-lg text-white">
+            {content.attribution}
+          </cite>
+          {content.attributionContext && (
+            <span className="text-slate-200 text-sm md:text-base ml-2" aria-hidden="true">
+              {content.attributionContext}
+            </span>
+          )}
+        </div>
+        
+        <p className="text-white mt-4 md:mt-6 text-base md:text-xl font-sans" style={{ textShadow: '0 1px 3px rgba(0, 0, 0, 0.4)' }}>
+          {content.subtitle}
+        </p>
+      </div>
+    </section>
+  )
+}
+

app/(marketing)/components/insight-box.tsx

@@ -0,0 +1,32 @@
+/**
+ * Insight Box Component
+ * 
+ * Visual anchor for key takeaways with yellow left border.
+ * Used to highlight important insights in the manifesto content.
+ */
+
+interface InsightBoxProps {
+  children: React.ReactNode
+  variant?: 'default' | 'highlight'
+}
+
+export function InsightBox({ children, variant = 'default' }: InsightBoxProps) {
+  const borderColor = variant === 'highlight' ? '#D97706' : '#F59E0B'
+  
+  return (
+    <div
+      className="bg-white shadow-sm my-6 md:my-8 p-6 border-t-4 md:border-t-0 md:border-l-4"
+      style={{
+        borderLeftColor: borderColor,
+        borderTopColor: borderColor,
+        borderLeftWidth: '3px',
+        borderTopWidth: '3px',
+      }}
+    >
+      <p className="text-base md:text-lg font-serif text-slate-900 leading-relaxed">
+        {children}
+      </p>
+    </div>
+  )
+}
+

app/(marketing)/components/manifesto-content.tsx

@@ -0,0 +1,95 @@
+/**
+ * Manifesto Content Component
+ * 
+ * Long-form reading experience with manifesto text.
+ * Renders paragraphs with proper typography for optimal reading.
+ */
+
+import type { ManifestoSection } from '@/content/schemas/manifesto'
+import { InsightBox } from './insight-box'
+import { StatementSection } from './statement-section'
+
+interface ManifestoContentProps {
+  sections: ManifestoSection[]
+}
+
+export function ManifestoContent({ sections }: ManifestoContentProps) {
+  // Group consecutive non-statement sections into article blocks
+  const blocks: Array<{ start: number; end: number }> = []
+  let blockStart = 0
+  
+  sections.forEach((section, index) => {
+    if (section.type === 'statement') {
+      if (blockStart < index) {
+        blocks.push({ start: blockStart, end: index - 1 })
+      }
+      blockStart = index + 1
+    }
+  })
+  
+  // Add final block if needed
+  if (blockStart < sections.length) {
+    blocks.push({ start: blockStart, end: sections.length - 1 })
+  }
+  
+  let blockIndex = 0
+  
+  return (
+    <>
+      {sections.map((section, index) => {
+        // Statement sections are full-width
+        if (section.type === 'statement') {
+          return <StatementSection key={section.id} section={section} />
+        }
+        
+        // Check if this is the start of a new article block
+        const currentBlock = blocks[blockIndex]
+        const isBlockStart = currentBlock && index === currentBlock.start
+        
+        if (isBlockStart) {
+          const blockSections = sections.slice(currentBlock.start, currentBlock.end + 1)
+          blockIndex++
+          
+          return (
+            <article
+              key={`block-${currentBlock.start}`}
+              className="w-full md:max-w-[750px] mx-auto px-4 py-6 md:px-16 md:py-16 bg-white"
+            >
+              <div className="prose prose-lg max-w-none">
+                {blockSections.map((blockSection) => {
+                  if (blockSection.type === 'paragraph') {
+                    return (
+                      <p
+                        key={blockSection.id}
+                        className="font-serif text-slate-900 mb-4 md:mb-6"
+                        style={{
+                          fontSize: 'clamp(1.125rem, 2vw, 1.25rem)',
+                          lineHeight: 'var(--line-height-relaxed)',
+                        }}
+                      >
+                        {blockSection.content}
+                      </p>
+                    )
+                  }
+                  
+                  if (blockSection.type === 'insight') {
+                    return (
+                      <InsightBox key={blockSection.id}>
+                        {blockSection.content}
+                      </InsightBox>
+                    )
+                  }
+                  
+                  return null
+                })}
+              </div>
+            </article>
+          )
+        }
+        
+        return null
+      })}
+    </>
+  )
+}
+

app/(marketing)/components/marketing-shader.tsx

@@ -0,0 +1,83 @@
+'use client'
+
+/**
+ * Marketing Shader Component
+ * 
+ * Wrapper around DotScreenShader for marketing pages.
+ * Very subtle opacity (0.02) for hero sections.
+ * Includes mobile fallback and reduced motion support.
+ */
+
+import dynamic from 'next/dynamic'
+import { useEffect, useState } from 'react'
+
+// Lazy load the shader component (heavy, only load when needed)
+const DotScreenShader = dynamic(
+  () => import('@/components/ui/dot-shader-background').then((mod) => ({ default: mod.DotScreenShader })),
+  { 
+    ssr: false,
+    loading: () => null
+  }
+)
+
+interface MarketingShaderProps {
+  variant?: 'hero' | 'section'
+  className?: string
+}
+
+export function MarketingShader({ variant = 'hero', className = '' }: MarketingShaderProps) {
+  const [mounted, setMounted] = useState(false)
+  const [reducedMotion, setReducedMotion] = useState(false)
+  const [isMobile, setIsMobile] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+    
+    // Check for reduced motion preference
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
+    setReducedMotion(mediaQuery.matches)
+    
+    const handleChange = (e: MediaQueryListEvent) => setReducedMotion(e.matches)
+    mediaQuery.addEventListener('change', handleChange)
+    
+    // Check for mobile (simple check)
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768)
+    }
+    checkMobile()
+    window.addEventListener('resize', checkMobile)
+    
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange)
+      window.removeEventListener('resize', checkMobile)
+    }
+  }, [])
+
+  // Fallback voor mobile of reduced motion
+  // Voor hero variant: donkere achtergrond, voor section variant: lichte achtergrond
+  if (!mounted || reducedMotion || isMobile) {
+    const fallbackBg = variant === 'hero' 
+      ? 'bg-slate-900' // Donkere achtergrond voor hero
+      : 'bg-gradient-to-br from-slate-50 to-slate-100' // Lichte achtergrond voor sections
+    
+    return (
+      <div 
+        className={`absolute inset-0 ${fallbackBg} ${className}`}
+        aria-hidden="true"
+      />
+    )
+  }
+
+  // Desktop: shader component met zeer subtiele opacity
+  // Opacity 0.02 is zeer subtiel - bijna onzichtbaar maar aanwezig
+  return (
+    <div 
+      className={`absolute inset-0 overflow-hidden ${className}`} 
+      aria-hidden="true"
+      style={{ opacity: variant === 'hero' ? 0.02 : 0.03 }}
+    >
+      <DotScreenShader />
+    </div>
+  )
+}
+

app/(marketing)/components/minimal-nav.tsx

@@ -0,0 +1,147 @@
+'use client'
+
+/**
+ * Minimal Navigation Component
+ * 
+ * Fixed top navigation with logo and links.
+ * Mobile-friendly with hamburger menu.
+ * Adaptive styling based on scroll position (hero vs content).
+ */
+
+import { useState, useEffect } from 'react'
+import Link from 'next/link'
+import { Menu, X } from 'lucide-react'
+import type { NavigationContent } from '@/content/schemas/manifesto'
+
+interface MinimalNavProps {
+  content: NavigationContent
+}
+
+export function MinimalNav({ content }: MinimalNavProps) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const [isScrolled, setIsScrolled] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      // Check if scrolled past hero section (approximately 100vh)
+      setIsScrolled(window.scrollY > window.innerHeight * 0.8)
+    }
+
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    handleScroll() // Initial check
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+
+  // Close menu when clicking outside or on link
+  useEffect(() => {
+    if (isMenuOpen) {
+      const handleClickOutside = () => setIsMenuOpen(false)
+      document.addEventListener('click', handleClickOutside)
+      return () => document.removeEventListener('click', handleClickOutside)
+    }
+  }, [isMenuOpen])
+
+  // Determine nav styling based on scroll position
+  // On hero: dark nav with light text, on content: light nav with dark text
+  const navClasses = isScrolled
+    ? 'bg-white/95 backdrop-blur-sm shadow-sm'
+    : 'bg-slate-900/80 backdrop-blur-sm md:bg-white/80 md:backdrop-blur-sm'
+
+  const logoClasses = isScrolled
+    ? 'text-slate-900'
+    : 'text-white md:mix-blend-difference md:text-white'
+
+  const linkClasses = isScrolled
+    ? 'text-slate-900 hover:text-slate-700'
+    : 'text-white hover:text-slate-200 md:mix-blend-difference md:text-white md:hover:opacity-80'
+
+  const menuButtonClasses = isScrolled
+    ? 'text-slate-900 focus-visible:outline-slate-900'
+    : 'text-white focus-visible:outline-white'
+
+  return (
+    <nav 
+      className={`fixed top-0 left-0 right-0 z-[60] transition-colors duration-200 ${navClasses}`}
+      role="navigation"
+      aria-label="Hoofdnavigatie"
+    >
+      <div className="max-w-7xl mx-auto px-4 md:px-8 py-4 flex justify-between items-center h-16">
+        {/* Logo */}
+        <Link 
+          href="/"
+          className={`font-black text-xl uppercase font-sans transition-colors hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:rounded ${logoClasses}`}
+          aria-label="AI Speedrun Home"
+          onClick={() => setIsMenuOpen(false)}
+        >
+          {content.logo}
+        </Link>
+
+        {/* Desktop Navigation Links */}
+        <div className="hidden md:flex gap-6 items-center" role="list">
+          {content.links.map((link) => (
+            <Link
+              key={link.href}
+              href={link.href}
+              className={`font-semibold text-base font-sans transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:rounded ${linkClasses}`}
+              role="listitem"
+            >
+              {link.label}
+            </Link>
+          ))}
+        </div>
+
+        {/* Mobile Menu Button */}
+        <button
+          className={`md:hidden p-2 -mr-2 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:rounded ${menuButtonClasses}`}
+          onClick={(e) => {
+            e.stopPropagation()
+            setIsMenuOpen(!isMenuOpen)
+          }}
+          aria-label="Menu"
+          aria-expanded={isMenuOpen}
+          aria-controls="mobile-menu"
+        >
+          {isMenuOpen ? (
+            <X className="w-6 h-6" />
+          ) : (
+            <Menu className="w-6 h-6" />
+          )}
+        </button>
+      </div>
+
+      {/* Mobile Menu */}
+      {isMenuOpen && (
+        <div
+          id="mobile-menu"
+          className={`md:hidden border-t ${
+            isScrolled 
+              ? 'bg-white border-slate-200' 
+              : 'bg-slate-900 border-slate-800'
+          }`}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className="px-4 py-4 space-y-3">
+            {content.links.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={`block font-semibold text-base py-2 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:rounded ${
+                  isScrolled
+                    ? 'text-slate-900 hover:text-slate-700 focus-visible:outline-slate-900'
+                    : 'text-white hover:text-slate-200 focus-visible:outline-white'
+                }`}
+                onClick={() => setIsMenuOpen(false)}
+              >
+                {link.label}
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+    </nav>
+  )
+}
+

app/(marketing)/components/reading-progress.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+/**
+ * Reading Progress Bar Component
+ * 
+ * Fixed top progress indicator that shows scroll progress through the page.
+ * Smooth animation, 2px height, accent blue color.
+ * Respects prefers-reduced-motion for accessibility.
+ */
+
+import { useEffect, useState } from 'react'
+
+export function ReadingProgress() {
+  const [progress, setProgress] = useState(0)
+  const [reducedMotion, setReducedMotion] = useState(false)
+
+  useEffect(() => {
+    // Check for reduced motion preference
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')
+    setReducedMotion(mediaQuery.matches)
+    
+    const handleChange = (e: MediaQueryListEvent) => setReducedMotion(e.matches)
+    mediaQuery.addEventListener('change', handleChange)
+
+    const updateProgress = () => {
+      const windowHeight = window.innerHeight
+      const documentHeight = document.documentElement.scrollHeight
+      const scrollTop = window.scrollY || document.documentElement.scrollTop
+      
+      // Calculate scroll progress percentage
+      const scrollableHeight = documentHeight - windowHeight
+      const currentProgress = scrollableHeight > 0 
+        ? (scrollTop / scrollableHeight) * 100 
+        : 0
+      
+      setProgress(Math.min(100, Math.max(0, currentProgress)))
+    }
+
+    // Initial calculation
+    updateProgress()
+
+    // Update on scroll
+    window.addEventListener('scroll', updateProgress, { passive: true })
+    window.addEventListener('resize', updateProgress, { passive: true })
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange)
+      window.removeEventListener('scroll', updateProgress)
+      window.removeEventListener('resize', updateProgress)
+    }
+  }, [])
+
+  return (
+    <div
+      className="fixed top-[64px] left-0 right-0 z-50 h-0.5 bg-slate-200"
+      role="progressbar"
+      aria-valuenow={Math.round(progress)}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-label="Leesvoortgang"
+    >
+      <div
+        className={`h-full bg-blue-500 ${reducedMotion ? '' : 'transition-all duration-150 ease-out'}`}
+        style={{ width: `${progress}%` }}
+      />
+    </div>
+  )
+}
+

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>
+  )
+}
+

app/(marketing)/components/structured-data.tsx

@@ -0,0 +1,52 @@
+/**
+ * Structured Data Component
+ * 
+ * Adds JSON-LD structured data for Article schema to improve SEO.
+ * Helps search engines understand the content structure.
+ */
+
+import type { ManifestoContent } from '@/content/schemas/manifesto'
+
+interface StructuredDataProps {
+  content: ManifestoContent
+}
+
+export function StructuredData({ content }: StructuredDataProps) {
+  const siteUrl = process.env.NEXT_PUBLIC_APP_URL || 'https://aispeedrun.vercel.app'
+  const publishedDate = '2024-11-15' // Launch date
+  const modifiedDate = new Date().toISOString().split('T')[0]
+  
+  const structuredData = {
+    '@context': 'https://schema.org',
+    '@type': 'Article',
+    headline: content.hero.quote,
+    description: content.hero.subtitle,
+    author: {
+      '@type': 'Person',
+      name: 'Colin van der Heijden',
+      url: 'https://ikbenlit.nl',
+    },
+    publisher: {
+      '@type': 'Organization',
+      name: 'AI Speedrun',
+      url: siteUrl,
+    },
+    datePublished: publishedDate,
+    dateModified: modifiedDate,
+    mainEntityOfPage: {
+      '@type': 'WebPage',
+      '@id': siteUrl,
+    },
+    articleSection: 'Technology',
+    keywords: ['AI', 'Software on Demand', 'EPD', 'Development', 'Build in Public'],
+    inLanguage: 'nl-NL',
+  }
+  
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
+    />
+  )
+}
+