D.A.I.S. AI Agency Website

Een productieklare, geoptimaliseerde one-pager voor D.A.I.S. AI automatisering agency, gebouwd met Next.js 14 App Router, TypeScript, TailwindCSS en shadcn/ui.

🚀 Features

• Conversie-geoptimaliseerd: Strategische plaatsing van CTAs en vertrouwenselementen
• SEO-ready: Complete metadata, OpenGraph, JSON-LD schemas, sitemap
• Performance: Core Web Vitals geoptimaliseerd (LCP < 2.5s)
• Toegankelijk: AA/AAA contrast, keyboard navigatie, screen readers
• Responsive: Perfect op alle devices
• Analytics: Plausible.io integratie (opt-in)

📁 Project Structuur

/app
├── (components)/          # Herbruikbare componenten
├── (sections)/           # Pagina secties
├── api/lead/            # Lead capture API
├── opengraph-image/     # Dynamic OG image
└── globals.css

/data
└── site.json            # Alle content & configuratie

/public
├── logo.svg
├── hero-visual.svg
├── robots.txt
└── manifest.json

⚙️ Content Beheer

Alle content staat gecentraliseerd in /data/site.json:

• Brand info: Logo, kleuren, tagline
• Hero sectie: Headlines, bullets, proof points
• Testimonials: Quotes en metrics
• Case studies: Problemen, oplossingen, resultaten
• FAQ: Vragen en antwoorden
• SEO: Titles, descriptions, keywords

🎨 Design System

• Kleuren: Zwart (#000000), Wit (#FFFFFF), Royal Blue (#2B65EC)
• Typography: System UI fonts voor optimale performance
• Spacing: 8px grid systeem
• Contrast: AA/AAA compliant

📊 Lead Capture

Leads worden opgevangen via /app/api/lead/route.ts en doorgestuurd naar een webhook:

LEAD_WEBHOOK_URL=https://your-webhook-url.com

🔧 Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

📈 Performance

• LCP: < 2.5s (hero image preload, Next/Image optimalisatie)
• INP: < 200ms (minimale JavaScript)
• CLS: < 0.1 (vaste afmetingen, geen layout shifts)

🔍 SEO Features

• Dynamic OpenGraph images
• JSON-LD schemas (Organization, Website, FAQ, Service)
• Semantische HTML structuur
• Internal linking met smooth scroll
• Sitemap en robots.txt

🎯 Conversie Elementen

• Hero CTA: Boven de vouw
• Sticky CTA: Altijd zichtbaar
• Social proof: Testimonials met metrics
• Trust signals: SSL badges, garanties
• Urgency: Limited time promo
• Mobile CTA: Floating button

🔧 Environment Variables

# Optional: Plausible Analytics
NEXT_PUBLIC_PLAUSIBLE_DOMAIN=your-domain.com

# Required: Lead webhook (Make.com/n8n)
LEAD_WEBHOOK_URL=https://your-webhook-url.com

📱 Responsive Breakpoints

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

🚀 Deploy

Dit project is geoptimaliseerd voor Bolt Hosting en static export.

npm run build

✅ Checklist

• Alle 7 secties geïmplementeerd
• Lead capture modal met form validatie
• JSON-LD schemas voor Rich Results
• Core Web Vitals optimalisatie
• Toegankelijkheid (keyboard, screen readers)
• SEO metadata compleet
• Mobile-first responsive design
• Performance optimalisatie

🔄 Updates

Voor content updates: bewerk /data/site.json en rebuild de site. Geen code wijzigingen nodig.