Files

colinislit 690e7b7c43 Content loader utility, Content directory structuur

2025-11-15 22:06:48 +01:00

31 KiB

Raw Blame History

🎨 Design & Specs — Manifesto Website

Projectnaam: AI Speedrun - Manifesto Website
Versie: v1.0
Datum: 15-11-2024
Auteur: Colin van der Heijden (AI Speedrun / ikbenlit.nl)
Laatste Update: 15-11-2024

1. Doel en context

🎯 Doel: Een thought leadership website bouwen die het "Software on Demand" manifesto presenteert als long-form reading experience. Geen standaard landing page, maar een Medium-achtige artikel-ervaring die autoriteit uitstraalt en LinkedIn-viraliteit genereert.

📘 Toelichting: Deze website dient als homepage voor het AI Speedrun project en positioneert Colin als:

Visionary: Die de fundamentele shift in software-industrie ziet
Practitioner: Die het ook daadwerkelijk bouwt (build in public)
Insider: Met domain expertise (15 jaar GGZ, 10 jaar development)

Het design respecteert het manifesto door:

Intelligent, analytische toon (geen angry rant)
Data-driven argumentatie (McKinsey references, concrete cijfers)
Long-form reading experience (750px max-width, serif fonts)
Thought leadership positioning (Jensen Huang quote als foundation)

Referenties:

Manifesto content: /docs/manifesto.md
UX Stylesheet: /docs/specs/ux-stylesheet.md
Bouwplan: /docs/specs/bouwplan-ai-speedrun-marketing-first-v1.1.md

2. Uitgangspunten

2.1 Technische Stack

🎯 Doel: Next.js 15 App Router met focus op performance en SEO.

Frontend:

Framework: Next.js 15 (App Router) - Marketing routes in /(marketing) group
Styling: Tailwind CSS v3.4 + Custom CSS voor typography
Typography:
- Serif: Crimson Text (Google Fonts) voor long-form content
- Sans-serif: Inter (Google Fonts) voor UI, nav, metadata
- Mono: JetBrains Mono voor tech details, numbers
Components: Custom React components (geen shadcn/ui voor manifesto page)
Icons: Lucide React (minimaal gebruik)
Animations: CSS transitions + Intersection Observer (geen heavy libraries)
Content Management: JSON files in content/[locale]/ directory
- Server-side content loading via dynamic imports
- TypeScript types voor type-safety
- Centrale content updates zonder code wijzigingen

Visual Effects:

Shader Background: Dot-shader component (opacity 0.02) voor hero section
Progress Indicator: Custom scroll-based progress bar
Fade-in Animations: Intersection Observer voor scroll reveals

SEO & Performance:

Metadata: Next.js Metadata API voor OG tags
Fonts: Preload critical fonts (Crimson Text, Inter)
Images: Geen images (alleen typography)
Code Splitting: Dynamic imports voor heavy components
Lazy Loading: Shader component alleen wanneer hero in viewport

Hosting:

Platform: Vercel (EU region Amsterdam)
CDN: Automatic via Vercel Edge Network
Analytics: Vercel Analytics (optioneel, privacy-first)

2.2 Projectkaders

🎯 Doel: Realistische constraints voor Week 1 MVP.

Tijd: 30 uur development (Week 1, Day 1-7)
Budget: €0 (alleen hosting via Vercel free tier)
Team: 1 developer (Colin) + AI tools
Scope: Manifesto homepage + minimal nav (andere routes later)
Launch: LinkedIn post "Building in public starts NOW"

2.3 Design Principes

🎯 Doel: Vastleggen van design filosofie en UX keuzes.

Core Design Philosophy:

"Less is More" voor Marketing Content
- Geen hero images/videos (focus op typography)
- Geen CTA buttons boven de fold (lezen eerst)
- Geen pop-ups of exit intent (respect voor lezer)
- Geen social share buttons inline (niet afleiden)
"Long-form Reading Experience"
- 750px max-width voor optimale leeslengte
- Serif font voor lange tekst (Crimson Text)
- 1.8 line-height voor ademruimte
- Progress bar voor context (niet afleidend)
"Thought Leadership Positioning"
- Jensen Huang quote als hero (autoriteit)
- Data-driven argumentatie (McKinsey, concrete cijfers)
- Intelligent toon (geen emotionele taal)
- Professional maar niet corporate
"Eigenwijze UX Keuzes"
- Geen hamburger menu op desktop (simplicity)
- Geen sticky elements (behalve nav/progress)
- Geen parallax (performance)
- Geen confetti/celebraties (serious tone)

Accessibility First:

WCAG AA Compliance:
- Tekst contrast ≥ 4.5:1 (test alle kleuren)
- Focus states altijd zichtbaar (2px ring)
- Keyboard navigation volledig werkend
- Screen reader friendly (semantische HTML)
Reduced Motion:
- Alle animaties respecteren prefers-reduced-motion
- Fallback: instant transitions
- Geen auto-scroll of auto-play
Font Accessibility:
- Optionele sans-serif toggle voor dyslexie (toekomst)
- Relatieve font sizes (rem, clamp)
- Minimum font size: 16px voor body

Performance Targets:

Lighthouse Scores:
- Performance: > 90
- Accessibility: > 95
- Best Practices: > 90
- SEO: > 95
Load Times:
- First Contentful Paint: < 1.5s
- Time to Interactive: < 3s
- Largest Contentful Paint: < 2.5s

3. Epics & Stories Overzicht

🎯 Doel: De website bouw opdelen in logische epics met stories voor Week 1.

Epic Structuur:

Epic ID	Titel	Doel	Status	Stories	Week
WEEK 1 - MANIFESTO WEBSITE
E1.M0	Content Management Setup	JSON content structuur + loader	⏳ To Do	3	1
E1.M1	Route Setup & Layout	Next.js routes + marketing layout	⏳ To Do	3	1
E1.M2	Hero Quote Section	Jensen Huang quote hero met shader	⏳ To Do	2	1
E1.M3	Manifesto Content	Long-form reading experience	⏳ To Do	4	1
E1.M4	Visual Components	Insight boxes, comparison table, statements	⏳ To Do	3	1
E1.M5	Navigation & CTA	Minimal nav + experiment CTA	⏳ To Do	2	1
E1.M6	Performance & Polish	Optimization + accessibility	⏳ To Do	3	1

4. Epics & Stories (Uitwerking)

Epic 1.M0 — Content Management Setup

Epic Doel: JSON-gebaseerde content structuur opzetten voor centrale content management.

Story ID	Beschrijving	Acceptatiecriteria	Status	Story Points
E1.M0.S1	Content directory structuur	`content/nl/` folder met JSON files	⏳ To Do	1
E1.M0.S2	Content loader utility	`lib/content/loader.ts` met getContent functie	⏳ To Do	2
E1.M0.S3	TypeScript types	`content/schemas/manifesto.ts` met interfaces	⏳ To Do	2

Technical Notes:

// lib/content/loader.ts
export async function getContent<T>(
  locale: string = 'nl',
  file: string
): Promise<T> {
  try {
    const content = await import(`@/content/${locale}/${file}.json`)
    return content.default as T
  } catch (error) {
    console.error(`Failed to load content: ${locale}/${file}.json`, error)
    throw new Error(`Content not found: ${locale}/${file}.json`)
  }
}

Content Files te Creëren:

content/nl/manifesto.json - Manifesto homepage content
content/nl/navigation.json - Navigation labels
content/nl/metadata.json - SEO metadata
content/nl/common.json - Shared strings

TypeScript Schema:

content/schemas/manifesto.ts - Type definitions voor ManifestoContent

Epic 1.M1 — Route Setup & Layout

Epic Doel: Next.js route structuur en marketing layout zonder sidebar.

Story ID	Beschrijving	Acceptatiecriteria	Status	Story Points
E1.M1.S1	Marketing route group	`/(marketing)/page.tsx` aangemaakt, werkt	⏳ To Do	2
E1.M1.S2	Marketing layout	Layout zonder sidebar, full-width	⏳ To Do	2
E1.M1.S3	Typography setup	Fonts preload, CSS variables	⏳ To Do	1

Technical Notes:

// app/(marketing)/layout.tsx
export default function MarketingLayout({ children }) {
  return (
    <div className="min-h-screen bg-white">
      <MinimalNav />
      {children}
    </div>
  )
}

Route Structure:

app/
├── (marketing)/
│   ├── layout.tsx          // Marketing layout (geen sidebar)
│   ├── page.tsx             // Manifesto homepage
│   └── components/          // Marketing-specifieke components
└── (app)/                   // EPD app routes (later)

Epic 1.M2 — Hero Quote Section

Epic Doel: Full-viewport hero met Jensen Huang quote en subtiele shader achtergrond.

Story ID	Beschrijving	Acceptatiecriteria	Status	Story Points
E1.M2.S1	Hero quote component	Quote + attribution renderen	⏳ To Do	3
E1.M2.S2	Shader background	Dot-shader met opacity 0.02	⏳ To Do	2

Design Specs:

Hero Section:

Full viewport height (min-h-screen)
Donkere achtergrond (#0F172A)
Quote: groot (clamp(2.5rem, 6vw, 4rem)), serif, italic
Attribution: kleiner, lichter, sans-serif
Subtiele scroll indicator onderaan

Shader Integration:

Dot-shader component als achtergrond
Opacity: 0.02 (zeer subtiel)
Mobile fallback: gradient (bg-gradient-to-br from-slate-50 to-slate-100)
Lazy load alleen wanneer hero in viewport

Component Structure:

// app/(marketing)/components/hero-quote.tsx
export function HeroQuote() {
  return (
    <section className="relative min-h-screen flex items-center justify-center">
      <MarketingShader variant="hero" />
      <div className="relative z-10 max-w-4xl px-4">
        <blockquote className="text-white">
          {/* Jensen Huang quote */}
        </blockquote>
        <p className="text-slate-300 mt-4">
          Nu, in 2025, zien we het gebeuren...
        </p>
      </div>
      <ScrollIndicator />
    </section>
  )
}

Epic 1.M3 — Manifesto Content

Epic Doel: Long-form reading experience met manifesto tekst.

Story ID	Beschrijving	Acceptatiecriteria	Status	Story Points
E1.M3.S1	Reading progress bar	Fixed top progress indicator	⏳ To Do	2
E1.M3.S2	Manifesto content component	Paragraaf structuur + typography	⏳ To Do	3
E1.M3.S3	Content parsing	Manifesto.md → React component	⏳ To Do	2
E1.M3.S4	Responsive typography	Mobile + desktop optimalisatie	⏳ To Do	2

Design Specs:

Content Container:

Max-width: 750px (centered)
Padding: 2rem (mobile), 4rem (desktop)
Background: white (#FFFFFF)

Typography:

Font: Crimson Text (serif)
Size: 1.25rem (20px)
Line-height: 1.8
Color: #0F172A (primary text)

Progress Bar:

Fixed top (onder nav)
Height: 2px
Color: #3B82F6 (accent blue)
Width: percentage based on scroll
Smooth animation

Component Structure:

// app/(marketing)/components/manifesto-content.tsx
export function ManifestoContent() {
  const manifesto = getManifestoContent() // From manifesto.md
  
  return (
    <article className="max-w-[750px] mx-auto px-4 py-8">
      <ReadingProgress />
      <div className="prose prose-lg">
        {manifesto.paragraphs.map((para, i) => (
          <p key={i} className="text-[1.25rem] leading-[1.8] mb-8">
            {para}
          </p>
        ))}
      </div>
    </article>
  )
}

Epic 1.M4 — Visual Components

Epic Doel: Visuele ankers (insight boxes, comparison table, statement sections).

Story ID	Beschrijving	Acceptatiecriteria	Status	Story Points
E1.M4.S1	Insight boxes	Gele border boxes voor key takeaways	⏳ To Do	2
E1.M4.S2	Comparison table	Traditional vs AI Speedrun	⏳ To Do	3
E1.M4.S3	Statement sections	Donkere achtergrond voor impact	⏳ To Do	2

Design Specs:

Insight Boxes:

Gele border links: 3px, #F59E0B
Witte achtergrond
Padding: 1.5rem
Margin: 3rem 0
Subtiele shadow

Comparison Table:

Twee kolommen: "Traditioneel" vs "AI Speedrun"
Subtiele borders (#E2E8F0)
Alternating row backgrounds
Mobile: stacked cards

Statement Sections:

Donkere achtergrond (#0F172A)
Witte tekst
Grote typography (clamp(2rem, 5vw, 4rem))
Full-width
Padding: 6rem 2rem

Component Examples:

// Insight Box
<div className="border-l-4 border-yellow-500 bg-white p-6 my-12 shadow-sm">
  <p className="text-lg">
    McKinsey noemt het "Software on Demand" - adaptieve diensten die via natuurlijke taal ontstaan.
  </p>
</div>

// Statement Section
<section className="bg-slate-900 text-white py-24 px-4">
  <div className="max-w-4xl mx-auto text-center">
    <h2 className="text-4xl md:text-6xl font-bold">
      Dit is geen toekomstmuziek.
    </h2>
  </div>
</section>

Epic Doel: Minimal navigation en experiment CTA.

Story ID	Beschrijving	Acceptatiecriteria	Status	Story Points
E1.M5.S1	Minimal navigation	Fixed top nav met logo + links	⏳ To Do	2
E1.M5.S2	Experiment CTA	"Volg het experiment" section	⏳ To Do	2

Design Specs:

Minimal Navigation:

Fixed top
Transparent met backdrop blur
Logo links: "AI SPEEDRUN" (Inter 900, uppercase)
Links rechts: Build Log | Demo (Inter 600)
Mix-blend-mode: difference (wit op donker, zwart op licht)
Geen hamburger menu (alleen desktop links)

Experiment CTA:

Aan einde van manifesto
Grote typography: "Tijd voor een experiment"
Subtiele buttons (geen schreeuwerige kleuren)
"Volg de voortgang" + "Bekijk Demo"
Geen countdown timers of fake urgency

Component Structure:

// Minimal Nav
<nav className="fixed top-0 left-0 right-0 z-50 backdrop-blur-sm bg-white/80">
  <div className="max-w-7xl mx-auto px-4 py-4 flex justify-between">
    <a href="/" className="font-black text-xl">AI SPEEDRUN</a>
    <div className="flex gap-6">
      <a href="/build-log">Build Log</a>
      <a href="/demo">Demo</a>
    </div>
  </div>
</nav>

// Experiment CTA
<section className="py-24 px-4 text-center">
  <h2 className="text-5xl md:text-7xl font-black mb-8">
    Tijd voor een experiment.
  </h2>
  <div className="flex gap-4 justify-center">
    <Button variant="primary">Volg de voortgang</Button>
    <Button variant="secondary">Bekijk Demo</Button>
  </div>
</section>

Epic 1.M6 — Performance & Polish

Epic Doel: Optimization, accessibility, en final polish.

Story ID	Beschrijving	Acceptatiecriteria	Status	Story Points
E1.M6.S1	Performance optimization	Lighthouse > 90, lazy loading	⏳ To Do	3
E1.M6.S2	Accessibility audit	WCAG AA compliance, keyboard nav	⏳ To Do	2
E1.M6.S3	SEO & metadata	OG tags, structured data	⏳ To Do	2

Performance Checklist:

Fonts preload (Crimson Text, Inter)
Shader component lazy load
Code splitting (dynamic imports)
Image optimization (geen images, maar check)
Bundle size < 100KB (gzipped)

Accessibility Checklist:

Contrast check alle tekst (≥ 4.5:1)
Focus states zichtbaar
Keyboard navigation werkend
Screen reader test
Reduced motion support

SEO Checklist:

Metadata API geconfigureerd
OG tags voor LinkedIn sharing
Structured data (Article schema)
Sitemap.xml
robots.txt

5. Design System & Components

5.1 Typography Scale

/* Manifesto Typography */
--font-serif: 'Crimson Text', serif;
--font-sans: 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', monospace;

/* Scale */
--text-hero: clamp(2.5rem, 6vw, 4rem);      /* Quote */
--text-h1: clamp(2rem, 5vw, 3rem);          /* Section headings */
--text-h2: clamp(1.5rem, 4vw, 2.5rem);     /* Subsections */
--text-body: 1.25rem;                       /* Content */
--text-small: 0.875rem;                      /* Metadata */
--line-height-tight: 1.2;                    /* Headings */
--line-height-relaxed: 1.8;                 /* Body */

5.2 Color Palette

Match UX Stylesheet:

Background: #FFFFFF (content), #0F172A (hero/statements)
Text: #0F172A (primary), #475569 (secondary)
Accent: #3B82F6 (blue), #F59E0B (yellow for insights)
Borders: #E2E8F0

5.3 Component Library

Core Components:

MinimalNav - Fixed top navigation
HeroQuote - Full-viewport hero section
MarketingShader - Shader background wrapper
ReadingProgress - Scroll progress indicator
ManifestoContent - Long-form content container
InsightBox - Gele border box voor takeaways
ComparisonTable - Traditional vs AI Speedrun
StatementSection - Donkere achtergrond statements
ExperimentCTA - Call to action section

Component Props:

// InsightBox
interface InsightBoxProps {
  children: React.ReactNode
  variant?: 'default' | 'highlight'
}

// ComparisonTable
interface ComparisonTableProps {
  items: Array<{
    label: string
    traditional: string
    aiSpeedrun: string
  }>
}

// StatementSection
interface StatementSectionProps {
  children: React.ReactNode
  variant?: 'dark' | 'light'
}

6. Content Management & Structuur

🎯 Doel: Centrale content management via JSON files voor eenvoudige updates en toekomstige internationalisatie.

📘 Toelichting: Alle teksten worden opgeslagen in JSON files onder content/[locale]/ zodat content editors (niet-developers) eenvoudig teksten kunnen aanpassen zonder code te wijzigen.

6.1 Content Directory Structuur

content/
├── nl/                          # Nederlandse content
│   ├── manifesto.json          # Manifesto homepage content
│   ├── navigation.json         # Navigation labels
│   ├── metadata.json           # SEO metadata
│   └── common.json             # Shared strings (buttons, labels)
├── en/                          # English (toekomst)
│   └── ...
└── schemas/                     # TypeScript types voor content
    └── manifesto.ts

6.2 Content Loading Strategy

Server-side Content Loading:

// lib/content/loader.ts
export async function getContent<T>(
  locale: string = 'nl',
  file: string
): Promise<T> {
  const content = await import(`@/content/${locale}/${file}.json`)
  return content.default
}

Component Usage:

// app/(marketing)/page.tsx
import { getContent } from '@/lib/content/loader'
import type { ManifestoContent } from '@/content/schemas/manifesto'

export default async function ManifestoPage() {
  const content = await getContent<ManifestoContent>('nl', 'manifesto')
  
  return (
    <>
      <HeroQuote content={content.hero} />
      <ManifestoContent content={content.sections} />
    </>
  )
}

6.3 Manifesto Content JSON Schema

File: content/nl/manifesto.json

{
  "hero": {
    "quote": "Software is eating the world, but AI is going to eat software",
    "attribution": "Jensen Huang, CEO van Nvidia",
    "attributionContext": "zei dit tijdens zijn keynote op GTC in maart 2024",
    "subtitle": "Nu, in 2025, zien we het gebeuren. En bijna niemand heeft het door."
  },
  "sections": [
    {
      "id": "opening",
      "type": "paragraph",
      "content": "Het traditionele SaaS-model is simpel: één gebruiker = één licentie..."
    },
    {
      "id": "problem",
      "type": "paragraph",
      "content": "Maar er gebeurt iets fundamenteels. AI maakt het mogelijk om software te genereren..."
    },
    {
      "id": "mckinsey-insight",
      "type": "insight",
      "content": "McKinsey noemt het \"Software on Demand\" - adaptieve diensten die via natuurlijke taal ontstaan."
    },
    {
      "id": "solution",
      "type": "paragraph",
      "content": "Waar traditionele implementaties 6-12 maanden duren, bouw je met AI een werkende applicatie in 4 weken..."
    },
    {
      "id": "proof-numbers",
      "type": "insight",
      "content": "Van €100k per jaar naar €50 per maand. Geen armies van consultants. Geen jarenlange developmenttrajecten."
    },
    {
      "id": "impact-vendors",
      "type": "statement",
      "variant": "dark",
      "heading": "Voor software vendors is dit existentieel",
      "content": "Hun hele businessmodel - recurring revenue op basis van seats - verdampt als klanten hun eigen oplossingen kunnen bouwen."
    },
    {
      "id": "experiment",
      "type": "paragraph",
      "content": "Tijd voor een experiment. Ik ga live bouwen hoe ver je komt met moderne AI-tools..."
    }
  ],
  "comparison": {
    "heading": "Traditioneel vs AI Speedrun",
    "items": [
      {
        "label": "Tijd",
        "traditional": "6-12 maanden",
        "aiSpeedrun": "4 weken"
      },
      {
        "label": "Kosten",
        "traditional": "€100k+ per jaar",
        "aiSpeedrun": "€50 per maand"
      },
      {
        "label": "Setup",
        "traditional": "€50k consultants",
        "aiSpeedrun": "€200 build cost"
      },
      {
        "label": "Aanpassingen",
        "traditional": "18 maanden",
        "aiSpeedrun": "Dagen"
      },
      {
        "label": "Code ownership",
        "traditional": "Vendor lock-in",
        "aiSpeedrun": "Jouw code"
      }
    ]
  },
  "cta": {
    "heading": "Tijd voor een experiment",
    "subheading": "Bouw hem gewoon zelf. In 4 weken.",
    "primaryButton": {
      "text": "Volg de voortgang",
      "href": "/build-log"
    },
    "secondaryButton": {
      "text": "Bekijk Demo",
      "href": "/demo"
    }
  }
}

6.4 TypeScript Types voor Content

File: content/schemas/manifesto.ts

export interface HeroContent {
  quote: string
  attribution: string
  attributionContext?: string
  subtitle: string
}

export type SectionType = 'paragraph' | 'insight' | 'statement'

export interface ParagraphSection {
  id: string
  type: 'paragraph'
  content: string
}

export interface InsightSection {
  id: string
  type: 'insight'
  content: string
}

export interface StatementSection {
  id: string
  type: 'statement'
  variant?: 'dark' | 'light'
  heading: string
  content: string
}

export type ManifestoSection = 
  | ParagraphSection 
  | InsightSection 
  | StatementSection

export interface ComparisonItem {
  label: string
  traditional: string
  aiSpeedrun: string
}

export interface ComparisonContent {
  heading: string
  items: ComparisonItem[]
}

export interface CTAButton {
  text: string
  href: string
}

export interface CTAContent {
  heading: string
  subheading?: string
  primaryButton: CTAButton
  secondaryButton: CTAButton
}

export interface ManifestoContent {
  hero: HeroContent
  sections: ManifestoSection[]
  comparison: ComparisonContent
  cta: CTAContent
}

File: content/nl/navigation.json

{
  "logo": "AI SPEEDRUN",
  "links": [
    {
      "label": "Build Log",
      "href": "/build-log"
    },
    {
      "label": "Demo",
      "href": "/demo"
    }
  ]
}

6.6 Metadata Content JSON

File: content/nl/metadata.json

{
  "manifesto": {
    "title": "Software on Demand - AI Speedrun Manifesto",
    "description": "Jensen Huang: 'AI is going to eat software'. Een experiment: bouw een EPD in 4 weken voor €200.",
    "ogTitle": "Software on Demand - AI Speedrun",
    "ogDescription": "Van €100k en 12 maanden naar €200 en 4 weken. Het nieuwe development.",
    "ogImage": "/og-manifesto.png",
    "keywords": ["AI", "Software on Demand", "EPD", "Development", "Build in Public"]
  }
}

6.7 Common Content JSON

File: content/nl/common.json

{
  "buttons": {
    "readMore": "Lees verder",
    "scrollDown": "Scroll naar beneden",
    "followProgress": "Volg de voortgang",
    "viewDemo": "Bekijk Demo",
    "contact": "Contact"
  },
  "labels": {
    "readingTime": "minuten lezen",
    "lastUpdated": "Laatst bijgewerkt",
    "share": "Deel"
  }
}

6.8 Content Update Workflow

Voor Content Editors:

Open content/nl/manifesto.json
Pas teksten aan (geen code kennis nodig)
Commit + push naar GitHub
Vercel rebuild automatisch
Content live binnen 1-2 minuten

Voor Developers:

TypeScript types zorgen voor type-safety
Content loader valideert JSON structuur
Fallback naar default content bij errors
Hot reload tijdens development

6.9 Component Updates voor Content Loading

Updated Component Props:

// HeroQuote component
interface HeroQuoteProps {
  content: HeroContent
}

export function HeroQuote({ content }: HeroQuoteProps) {
  return (
    <section>
      <blockquote>{content.quote}</blockquote>
      <cite>{content.attribution}</cite>
      <p>{content.subtitle}</p>
    </section>
  )
}

// ManifestoContent component
interface ManifestoContentProps {
  sections: ManifestoSection[]
}

export function ManifestoContent({ sections }: ManifestoContentProps) {
  return (
    <article>
      {sections.map((section) => {
        switch (section.type) {
          case 'paragraph':
            return <p key={section.id}>{section.content}</p>
          case 'insight':
            return <InsightBox key={section.id}>{section.content}</InsightBox>
          case 'statement':
            return (
              <StatementSection 
                key={section.id} 
                variant={section.variant}
                heading={section.heading}
              >
                {section.content}
              </StatementSection>
            )
        }
      })}
    </article>
  )
}

// ComparisonTable component
interface ComparisonTableProps {
  content: ComparisonContent
}

export function ComparisonTable({ content }: ComparisonTableProps) {
  return (
    <section>
      <h2>{content.heading}</h2>
      <table>
        {content.items.map((item) => (
          <tr key={item.label}>
            <td>{item.label}</td>
            <td>{item.traditional}</td>
            <td>{item.aiSpeedrun}</td>
          </tr>
        ))}
      </table>
    </section>
  )
}

6.10 Internationalisatie (Toekomst)

Locale Detection:

// lib/content/locale.ts
export function getLocale(request: Request): string {
  // Check Accept-Language header
  // Fallback naar 'nl'
  return 'nl' // MVP: alleen Nederlands
}

// Future: meerdere locales
// content/en/manifesto.json
// content/de/manifesto.json

Locale Switching (Future):

// app/(marketing)/[locale]/page.tsx
export default async function ManifestoPage({ 
  params 
}: { 
  params: { locale: string } 
}) {
  const content = await getContent<ManifestoContent>(
    params.locale, 
    'manifesto'
  )
  // ...
}

7. Responsive Design

7.1 Breakpoints

sm: 640px   /* Mobile landscape */
md: 768px   /* Tablet */
lg: 1024px  /* Desktop */
xl: 1280px  /* Large desktop */

7.2 Mobile Adaptations

Hero Section:

Kortere quote (kleinere typography)
Geen shader (gradient fallback)
Scroll indicator blijft

Content:

Full-width (geen 750px max)
Kleinere font size (1.125rem)
Minder padding (1rem)

Insight Boxes:

Border-top i.p.v. border-left
Volledige breedte

Comparison Table:

Stacked cards i.p.v. tabel
Elke rij wordt een card

Navigation:

Hamburger menu (alleen mobile)
Collapsed links

8. Performance & Optimization

8.1 Code Splitting

// Lazy load heavy components
const DotShader = dynamic(() => import('./dot-shader'), { 
  ssr: false,
  loading: () => <GradientFallback />
})

const ComparisonTable = dynamic(() => import('./comparison-table'))

8.2 Font Optimization

// app/layout.tsx
import { Crimson_Text, Inter, JetBrains_Mono } from 'next/font/google'

const crimsonText = Crimson_Text({
  subsets: ['latin'],
  weight: ['400', '600'],
  display: 'swap',
  preload: true
})

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  preload: true
})

8.3 SEO Metadata

// app/(marketing)/page.tsx
export const metadata = {
  title: "Software on Demand - AI Speedrun Manifesto",
  description: "Jensen Huang: 'AI is going to eat software'. Een experiment: bouw een EPD in 4 weken voor €200.",
  openGraph: {
    type: 'article',
    title: "Software on Demand - AI Speedrun",
    description: "Van €100k en 12 maanden naar €200 en 4 weken. Het nieuwe development.",
    images: ['/og-manifesto.png'], // Quote card image
  },
  twitter: {
    card: 'summary_large_image',
  }
}

9. Testing & Quality

9.1 Test Checklist

Visual Testing:

Hero quote render correct
Shader background subtiel (opacity 0.02)
Typography leesbaar (serif voor content)
Insight boxes hebben gele border
Comparison table responsive
Statement sections donkere achtergrond

Functional Testing:

Navigation links werken
Progress bar update op scroll
Smooth scroll naar anchors
CTA buttons linken correct
Mobile menu werkt (indien aanwezig)

Performance Testing:

Lighthouse Performance > 90
First Contentful Paint < 1.5s
Time to Interactive < 3s
Bundle size < 100KB gzipped

Accessibility Testing:

WCAG AA contrast compliance
Keyboard navigation volledig
Screen reader friendly
Focus states zichtbaar
Reduced motion support

10. Risico's & Mitigatie

Risico	Kans	Impact	Mitigatie	Owner
Shader performance	Medium	Medium	Lazy load, mobile fallback	Developer
Typography loading	Laag	Hoog	Font preload, fallback fonts	Developer
Long-form engagement	Medium	Medium	Progress bar, scannable sections	UX
Mobile readability	Laag	Hoog	Responsive typography, testing	Developer
SEO niet geoptimaliseerd	Medium	Medium	Metadata API, OG tags	Developer
Accessibility issues	Laag	Hoog	WCAG audit, testing	Developer

11. Referenties

Mission Control Documents:

Manifesto: /docs/manifesto.md - Content bron
UX Stylesheet: /docs/specs/ux-stylesheet.md - Kleuren & tokens
Bouwplan: /docs/specs/bouwplan-ai-speedrun-marketing-first-v1.1.md - Project context
Design Review: /docs/design/dot-shader-design-review.md - Shader component

External Resources:

Next.js Docs: https://nextjs.org/docs
Tailwind CSS: https://tailwindcss.com/docs
Google Fonts: https://fonts.google.com
WCAG Guidelines: https://www.w3.org/WAI/WCAG21/quickref/

12. Glossary & Abbreviations

Term	Betekenis
Long-form	Lange tekst content (artikel-achtig)
Serif font	Font met schreefjes (Crimson Text)
Sans-serif	Font zonder schreefjes (Inter)
Hero section	Full-viewport opening sectie
Progress bar	Scroll-based progress indicator
Insight box	Visuele anker voor key takeaways
Statement section	Donkere achtergrond voor impact
OG tags	Open Graph tags voor social sharing
WCAG	Web Content Accessibility Guidelines
FCP	First Contentful Paint
TTI	Time to Interactive
LCP	Largest Contentful Paint

Versiehistorie:

Versie	Datum	Auteur	Wijziging
v1.0	15-11-2024	Colin	Initiële versie - Design & specs voor manifesto website

31 KiB Raw Blame History

🎨 Design & Specs — Manifesto Website

1. Doel en context

2. Uitgangspunten

2.1 Technische Stack

2.2 Projectkaders

2.3 Design Principes

3. Epics & Stories Overzicht

4. Epics & Stories (Uitwerking)

Epic 1.M0 — Content Management Setup

Epic 1.M1 — Route Setup & Layout

Epic 1.M2 — Hero Quote Section

Epic 1.M3 — Manifesto Content

Epic 1.M4 — Visual Components

Epic 1.M5 — Navigation & CTA

Epic 1.M6 — Performance & Polish

5. Design System & Components

5.1 Typography Scale

5.2 Color Palette

5.3 Component Library

6. Content Management & Structuur

6.1 Content Directory Structuur

6.2 Content Loading Strategy

6.3 Manifesto Content JSON Schema

6.4 TypeScript Types voor Content

6.5 Navigation Content JSON

6.6 Metadata Content JSON

6.7 Common Content JSON

6.8 Content Update Workflow

6.9 Component Updates voor Content Loading

6.10 Internationalisatie (Toekomst)

7. Responsive Design

7.1 Breakpoints

7.2 Mobile Adaptations

8. Performance & Optimization

8.1 Code Splitting

8.2 Font Optimization

8.3 SEO Metadata

9. Testing & Quality

9.1 Test Checklist

10. Risico's & Mitigatie

11. Referenties

12. Glossary & Abbreviations

31 KiB

Raw Blame History