[V0_FILE]typescript:file="lib/types.ts" isMerged="true" export interface LandingPageTheme { accent: string accentHover: string accentDark: string scale: Record } export interface Assistant { name: string description: string | null imageUrl: string } export interface LegalDocument { label: string url: string } export interface LandingPageData { name: string title: string | null valueProposition: string | null description: string | null imageUrl: string logoUrl: string | null isFree: boolean price: string | null trialPeriodDays: number | null recurringInterval: string checkoutUrl: string checkoutEnabled: boolean ownerName: string ownerBio: string | null assistants: Assistant[] legalDocuments: LegalDocument[] theme: LandingPageTheme | null } [V0_FILE]typescriptreact:file="components/landing/LoadingSkeleton.tsx" isMerged="true" "use client" export function LoadingSkeleton() { return (

{/* Nav skeleton */}

{/* Hero skeleton */}

{/* Cards skeleton */}

{[...Array(3)].map((_, i) => (

))}

{/* More skeletons */}

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.9.1", "@vercel/analytics": "1.6.1", "@radix-ui/react-accordion": "1.2.12", "@radix-ui/react-alert-dialog": "1.1.15", "@radix-ui/react-aspect-ratio": "1.1.8", "@radix-ui/react-avatar": "1.1.11", "@radix-ui/react-checkbox": "1.3.3", "@radix-ui/react-collapsible": "1.1.12", "@radix-ui/react-context-menu": "2.2.16", "@radix-ui/react-dialog": "1.1.15", "@radix-ui/react-dropdown-menu": "2.1.16", "@radix-ui/react-hover-card": "1.1.15", "@radix-ui/react-label": "2.1.8", "@radix-ui/react-menubar": "1.1.16", "@radix-ui/react-navigation-menu": "1.2.14", "@radix-ui/react-popover": "1.1.15", "@radix-ui/react-progress": "1.1.8", "@radix-ui/react-radio-group": "1.3.8", "@radix-ui/react-scroll-area": "1.2.10", "@radix-ui/react-select": "2.2.6", "@radix-ui/react-separator": "1.1.8", "@radix-ui/react-slider": "1.3.6", "@radix-ui/react-slot": "1.2.4", "@radix-ui/react-switch": "1.2.6", "@radix-ui/react-tabs": "1.1.13", "@radix-ui/react-toast": "1.2.15", "@radix-ui/react-toggle": "1.1.10", "@radix-ui/react-toggle-group": "1.1.11", "@radix-ui/react-tooltip": "1.2.8", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.1.1", "date-fns": "4.1.0", "embla-carousel-react": "8.6.0", "input-otp": "1.4.2", "lucide-react": "^0.564.0", "next": "16.2.4", "next-themes": "^0.4.6", "react": "19.2.4", "react-day-picker": "9.13.2", "react-dom": "19.2.4", "react-hook-form": "^7.54.1", "react-resizable-panels": "^2.1.7", "recharts": "2.15.0", "sonner": "^1.7.1", "tailwind-merge": "^3.3.1", "vaul": "^1.1.2", "zod": "^3.24.1", "tailwindcss-animate": "1.0.7" }, "devDependencies": { "@tailwindcss/postcss": "^4.2.0", "@types/node": "^22", "@types/react": "19.2.14", "@types/react-dom": "19.2.3", "postcss": "^8.5", "tailwindcss": "^4.2.0", "tw-animate-css": "1.3.3", "typescript": "5.7.3" } } [V0_FILE]typescript:file="lib/theme.ts" isMerged="true" import type { LandingPageTheme } from "./types" export const DEFAULT_THEME: LandingPageTheme = { accent: "#6366f1", accentHover: "#4f46e5", accentDark: "#3730a3", scale: { "50": "#eef2ff", "100": "#e0e7ff", "200": "#c7d2fe", "300": "#a5b4fc", "400": "#818cf8", "500": "#6366f1", "600": "#4f46e5", "700": "#4338ca", "800": "#3730a3", "900": "#312e81", "950": "#1e1b4b", }, } export function getTheme(theme: LandingPageTheme | null): LandingPageTheme { return theme ?? DEFAULT_THEME } export function applyThemeVars(theme: LandingPageTheme): Record { const vars: Record = { "--accent": theme.accent, "--accent-hover": theme.accentHover, "--accent-dark": theme.accentDark, } for (const [shade, hex] of Object.entries(theme.scale)) { vars[`--scale-${shade}`] = hex } return vars } [V0_FILE]typescriptreact:file="components/landing/HeroSection.tsx" isMerged="true" "use client" import Image from "next/image" import type { LandingPageData } from "@/lib/types" import { CTAButton } from "./CTAButton" import { PriceBadge } from "./PriceBadge" interface HeroSectionProps { data: LandingPageData accent: string scale: Record } export function HeroSection({ data, accent, scale }: HeroSectionProps) { return (

{/* Background glow */}

{/* Logo */} {`${data.name}

{/* Headline */} {data.title && (

{data.title}

)} {/* Value proposition */} {data.valueProposition && (

{data.valueProposition}

)} {/* Price badge */} {/* CTA */} {/* Hero image */} {data.imageUrl && (

)}

) } [V0_FILE]typescriptreact:file="components/landing/CTAButton.tsx" isMerged="true" "use client" import { useState } from "react" interface CTAButtonProps { checkoutUrl: string checkoutEnabled: boolean accent: string accentHover: string size?: "sm" | "md" | "lg" label?: string } export function CTAButton({ checkoutUrl, checkoutEnabled, accent, accentHover, size = "md", label = "Start vandaag", }: CTAButtonProps) { const [hovered, setHovered] = useState(false) const paddingMap = { sm: "px-5 py-2.5 text-sm", md: "px-7 py-3.5 text-base", lg: "px-9 py-4 text-lg", } if (!checkoutEnabled) { return ( Binnenkort beschikbaar ) } return ( setHovered(true)} onMouseLeave={() => setHovered(false)} > {label} ) } [V0_FILE]typescriptreact:file="components/landing/PriceBadge.tsx" isMerged="true" "use client" import type { LandingPageData } from "@/lib/types" interface PriceBadgeProps { data: LandingPageData accent: string } const intervalLabels: Record = { monthly: "per maand", yearly: "per jaar", weekly: "per week", daily: "per dag", } function getIntervalLabel(interval: string): string { return intervalLabels[interval] ?? `per ${interval}` } export function PriceBadge({ data, accent }: PriceBadgeProps) { if (data.isFree) return null if (!data.price) return null return (

€{data.price} {getIntervalLabel(data.recurringInterval)}

{data.trialPeriodDays !== null && ( {data.trialPeriodDays} dagen gratis proberen )}

) } [V0_FILE]typescriptreact:file="components/landing/MakerSection.tsx" isMerged="true" "use client" import type { LandingPageData } from "@/lib/types" interface MakerSectionProps { data: LandingPageData accent: string scale: Record } export function MakerSection({ data, accent, scale }: MakerSectionProps) { return (

{/* Background texture */}

{/* Avatar placeholder */}

{data.ownerName .split(" ") .map((n) => n[0]) .join("") .slice(0, 2) .toUpperCase()}

{/* Copy */}

De maker

Hoi, ik ben {data.ownerName}

{data.ownerBio ? (

{data.ownerBio}

) : (

Ik heb {data.name} gebouwd omdat ik geloof dat AI niet ingewikkeld hoeft te zijn. Mijn missie: jou de tools geven die écht werken — zodat jij je kunt focussen op wat er echt toe doet.

)}

) } [V0_FILE]typescriptreact:file="components/landing/TransformationSection.tsx" isMerged="true" "use client" import type { LandingPageData } from "@/lib/types" interface TransformationSectionProps { data: LandingPageData accent: string } export function TransformationSection({ data, accent }: TransformationSectionProps) { const studioName = data.name const problems = [ "Eindeloos tijd kwijt aan repetitieve taken", "Geen idee waar te beginnen met AI", `Informatie opzoeken kost je kostbare uren`, "Processen die traag en foutgevoelig zijn", ] const transformations = [ `${data.assistants.length > 0 ? data.assistants.length + " gespecialiseerde assistenten" : "AI-assistenten"} die het zware werk overnemen`, "Directe, bruikbare antwoorden — geen gedoe", "Meer tijd voor wat écht telt", "Slimmere workflows, minder fouten", ] return (

Van probleem naar oplossing

Herken jij dit?

{data.description && (

{data.description}

)}

{/* Problem column */}

Zonder {studioName}

{problem}

{/* Transformation column */}

Met {studioName}

{transformation}

) } [V0_FILE]typescriptreact:file="components/landing/BenefitsSection.tsx" isMerged="true" "use client" import type { LandingPageData } from "@/lib/types" interface BenefitsSectionProps { data: LandingPageData accent: string scale: Record } const benefitIcons = [ // Lightning bolt , // Clock , // Shield , // Sparkles , // Chat bubble , // Globe , ] export function BenefitsSection({ data, accent, scale }: BenefitsSectionProps) { const assistantCount = data.assistants.length const benefits = [ { title: `${assistantCount > 0 ? assistantCount : "Meerdere"} gespecialiseerde AI-assistenten`, description: "Elke assistent is getraind op een specifiek domein zodat je altijd de juiste hulp krijgt.", }, { title: "24/7 beschikbaar", description: "Je AI-studio werkt dag en nacht — ook als jij slaapt of op vakantie bent.", }, { title: "Veilig en privé", description: "Jouw gegevens blijven van jou. We slaan geen gevoelige informatie op buiten jouw sessie.", }, { title: "Direct resultaat", description: "Geen lange onboardings of trainingen. Je bent binnen minuten productief.", }, { title: "Altijd bijgewerkt", description: "De assistenten worden continu verbeterd zodat je altijd profiteert van de nieuwste AI.", }, { title: "Eén platform, alles erin", description: `${data.name} bundelt alles wat je nodig hebt op één plek — geen losse tools meer.`, }, ] return (

Voordelen

Waarom {data.name}?

{benefits.map((benefit, i) => (

{benefitIcons[i % benefitIcons.length]}

{benefit.title}

{benefit.description}

))}

) } [V0_FILE]typescriptreact:file="components/landing/SocialProofSection.tsx" isMerged="true" "use client" import type { LandingPageData } from "@/lib/types" interface SocialProofSectionProps { data: LandingPageData accent: string } // Placeholder testimonials - can be replaced with real data later const TESTIMONIALS = [ { name: "Marieke van den Berg", role: "Zelfstandig ondernemer", quote: "Ik bespaar elke dag minstens een uur dankzij de assistenten. Ze begrijpen precies wat ik bedoel en leveren direct bruikbare output.", stars: 5, }, { name: "Thomas de Vries", role: "Marketing manager", quote: "Eindelijk een AI-tool die ik echt dagelijks gebruik. De kwaliteit van de antwoorden is gewoon een niveau hoger dan wat ik gewend was.", stars: 5, }, { name: "Sofie Janssen", role: "Contentstrateeg", quote: "De setup was binnen vijf minuten klaar en ik was meteen productief. Dit is de beste investering voor mijn workflow dit jaar.", stars: 5, }, ] function StarRating({ count }: { count: number }) { return (

{[...Array(5)].map((_, i) => ( ))}

) } export function SocialProofSection({ data, accent }: SocialProofSectionProps) { return (

Wat gebruikers zeggen

Duizenden tevreden gebruikers

Bekijk wat mensen zeggen over {data.name}

{TESTIMONIALS.map((testimonial) => (

“{testimonial.quote}”

{testimonial.name .split(" ") .map((n) => n[0]) .join("") .slice(0, 2)}

{testimonial.name}

{testimonial.role}

))}

) } [V0_FILE]typescriptreact:file="components/landing/FAQSection.tsx" isMerged="true" "use client" import { useState } from "react" import type { LandingPageData } from "@/lib/types" interface FAQSectionProps { data: LandingPageData accent: string } export function FAQSection({ data, accent }: FAQSectionProps) { const [openIndex, setOpenIndex] = useState(0) const intervalLabels: Record = { monthly: "per maand", yearly: "per jaar", weekly: "per week", daily: "per dag", } const priceLabel = data.isFree ? "gratis" : data.price ? `€${data.price} ${intervalLabels[data.recurringInterval] ?? `per ${data.recurringInterval}`}` : "op aanvraag" const trialLine = !data.isFree && data.trialPeriodDays !== null ? ` Je kunt eerst ${data.trialPeriodDays} dagen gratis uitproberen zonder verplichtingen.` : "" const faqs = [ { question: `Wat is ${data.name}?`, answer: data.description ?? `${data.name} is een AI-studio met ${data.assistants.length} gespecialiseerde assistent${data.assistants.length === 1 ? "" : "en"} die je helpen met allerlei taken — snel, slim en 24/7 beschikbaar.`, }, { question: `Hoeveel kost ${data.name}?`, answer: `${data.name} kost ${priceLabel}.${trialLine}`, }, { question: `Hoeveel AI-assistenten krijg ik?`, answer: `Je krijgt toegang tot ${data.assistants.length === 0 ? "meerdere" : data.assistants.length} gespecialiseerde AI-assistent${data.assistants.length === 1 ? "" : "en"}. ${data.assistants.length > 0 ? `Dit zijn: ${data.assistants.map((a) => a.name).join(", ")}.` : ""}`, }, { question: "Hoe snel ben ik aan de slag?", answer: "Direct. Na aanmelding heb je meteen toegang tot alle assistenten. Er is geen lange onboarding of technische kennis vereist.", }, { question: "Is mijn data veilig?", answer: "Ja. We gaan zorgvuldig om met jouw gegevens en slaan geen gevoelige informatie op buiten jouw sessie. Jouw privacy staat voorop.", }, { question: "Kan ik ook stoppen?", answer: "Ja, je kunt op elk moment opzeggen. Er zijn geen verborgen kosten of lange contracten. Jij bepaalt.", }, ] return (

Veelgestelde vragen

Alles wat je wil weten

{faqs.map((faq, index) => { const isOpen = openIndex === index return (

{isOpen && (

{faq.answer}

)}

) })}

) } [V0_FILE]typescriptreact:file="components/landing/FinalCTA.tsx" isMerged="true" "use client" import type { LandingPageData } from "@/lib/types" import { CTAButton } from "./CTAButton" import { PriceBadge } from "./PriceBadge" interface FinalCTAProps { data: LandingPageData accent: string scale: Record } export function FinalCTA({ data, accent, scale }: FinalCTAProps) { return (

{/* Decorative glow */}

{/* Content */}

Begin vandaag

Klaar om slimmer te werken met {data.name}?

{data.assistants.length > 0 ? ( <> Sluit je aan en gebruik direct alle {data.assistants.length} AI-assistent {data.assistants.length === 1 ? "" : "en"}. Geen wachttijden. ) : ( "Sluit je aan en gebruik direct al jouw AI-assistenten. Geen wachttijden." )}

{!data.isFree && data.trialPeriodDays !== null && (

{data.trialPeriodDays} dagen gratis proberen · Geen creditcard vereist · Altijd opzegbaar

)}

) } [V0_FILE]typescriptreact:file="components/landing/Footer.tsx" isMerged="true" "use client" import type { LandingPageData } from "@/lib/types" interface FooterProps { data: LandingPageData accent: string } export function Footer({ data, accent }: FooterProps) { return ( ) } [V0_FILE]typescriptreact:file="components/landing/LandingPage.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import type { LandingPageData } from "@/lib/types" import { getTheme, applyThemeVars } from "@/lib/theme" import { LoadingSkeleton } from "./LoadingSkeleton" import { HeroSection } from "./HeroSection" import { AssistantsSection } from "./AssistantsSection" import { MakerSection } from "./MakerSection" import { TransformationSection } from "./TransformationSection" import { BenefitsSection } from "./BenefitsSection" import { SocialProofSection } from "./SocialProofSection" import { FAQSection } from "./FAQSection" import { FinalCTA } from "./FinalCTA" import { Footer } from "./Footer" import { CTAButton } from "./CTAButton" const API_URL = "https://caistudio.nl/api/v1/landing-page/st_cfaee865fe59c385eca33ae614e7ac3c" export function LandingPage() { const [data, setData] = useState(null) const [error, setError] = useState(null) useEffect(() => { fetch(API_URL) .then((res) => { if (!res.ok) throw new Error(`HTTP ${res.status}`) return res.json() }) .then((json: LandingPageData) => setData(json)) .catch((err) => setError(err.message ?? "Onbekende fout")) }, []) if (error) { return (

Kon de pagina niet laden. Probeer het later opnieuw.

) } if (!data) { return } const theme = getTheme(data.theme) const themeVars = applyThemeVars(theme) const accent = theme.accent const scale = theme.scale return (

{/* Sticky nav */}

{/* eslint-disable-next-line @next/next/no-img-element */} {`${data.name}

{/* Subtle divider */}

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Landing page custom properties — overridden at runtime by API theme */ :root { --lp-accent: #6366f1; --lp-accent-hover: #818cf8; --lp-accent-dark: #3730a3; --lp-surface: #111113; --lp-surface-2: #18181b; --lp-border: #27272a; } html { scroll-behavior: smooth; } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type { Metadata } from 'next' import { Geist, Geist_Mono } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const _geist = Geist({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); export const metadata: Metadata = { title: 'AI Studio', description: 'Jouw persoonlijke AI-studio met gespecialiseerde assistenten.', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} {process.env.NODE_ENV === 'production' && } ) } [V0_FILE]png:file="public/logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/api-attachments/1yybGrOnYT6KCG96I2zxu-Nfpx2eqJyrNqnQTART99jSM6r1JgdC.png" isMerged="true" [V0_FILE]typescriptreact:file="components/landing/AssistantsSection.tsx" isMerged="true" "use client" import Image from "next/image" import type { LandingPageData } from "@/lib/types" interface AssistantsSectionProps { data: LandingPageData accent: string scale: Record } export function AssistantsSection({ data, accent, scale }: AssistantsSectionProps) { const { assistants } = data if (!assistants.length) return null return (

{/* Header */}

Jouw AI-team

{assistants.length} AI-assistent{assistants.length === 1 ? "" : "en"} klaar voor jou

Elke assistent is speciaal ontworpen om je te helpen — direct inzetbaar, dag en nacht.

{/* Cards grid */}

{assistants.map((assistant) => ( { ;(e.currentTarget as HTMLElement).style.boxShadow = `0 0 32px ${accent}30` }} onMouseLeave={(e) => { ;(e.currentTarget as HTMLElement).style.boxShadow = `0 0 0 0 ${accent}00` }} > {/* Glow dot */}

{/* Avatar */}

{/* Content */}

{assistant.name}

{assistant.description && (

{assistant.description}

)}

{/* Bottom row: accent line + CTA hint */}

Probeer gratis →

))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client"; import { useEffect, useState, type CSSProperties } from "react"; // ─── Types ───────────────────────────────────────────────────────────────────── type Assistant = { name: string; description: string | null; imageUrl: string; }; type LegalDocument = { label: string; url: string; }; type Theme = { accent: string; accentHover: string; accentDark: string; scale: Record; }; type LandingData = { name: string; title: string | null; valueProposition: string | null; description: string | null; imageUrl: string; logoUrl: string | null; isFree: boolean; price: string | null; trialPeriodDays: number | null; recurringInterval: string; checkoutUrl: string; checkoutEnabled: boolean; ownerName: string; ownerBio: string | null; assistants: Assistant[]; legalDocuments: LegalDocument[]; theme: Theme | null; }; // ─── Theme helpers ───────────────────────────────────────────────────────────── const D_ACCENT = "#6366f1"; const D_ACCENT_HOVER = "#818cf8"; const D_ACCENT_DARK = "#3730a3"; const D_SCALE: Record = { "50": "#eef2ff", "100": "#e0e7ff", "200": "#c7d2fe", "300": "#a5b4fc", "400": "#818cf8", "500": "#6366f1", "600": "#4f46e5", "700": "#4338ca", "800": "#3730a3", "900": "#312e81", "950": "#1e1b4b", }; const acc = (t: Theme | null) => t?.accent ?? D_ACCENT; const accH = (t: Theme | null) => t?.accentHover ?? D_ACCENT_HOVER; const accD = (t: Theme | null) => t?.accentDark ?? D_ACCENT_DARK; const scl = (t: Theme | null, s: string) => t?.scale?.[s] ?? D_SCALE[s] ?? D_ACCENT; function intervalLabel(interval: string) { const map: Record = { monthly: "/ maand", yearly: "/ jaar", weekly: "/ week", daily: "/ dag", }; return map[interval] ?? `/ ${interval}`; } // ─── Shared atoms ────────────────────────────────────────────────────────────── function Pulse({ color }: { color: string }) { return ( ); } function Chip({ children, color, }: { children: React.ReactNode; color: string; }) { return ( {children} ); } function CTAButton({ href, enabled, color, colorHover, size = "md", outlined = false, children, }: { href: string; enabled: boolean; color: string; colorHover: string; size?: "sm" | "md" | "lg"; outlined?: boolean; children: React.ReactNode; }) { const pad = size === "lg" ? "px-8 py-4 text-base" : size === "sm" ? "px-4 py-2 text-xs" : "px-6 py-3 text-sm"; if (!enabled) { return ( Binnenkort beschikbaar ); } if (outlined) { return ( { (e.currentTarget as HTMLAnchorElement).style.background = `${color}12`; (e.currentTarget as HTMLAnchorElement).style.borderColor = color; }} onMouseLeave={(e) => { (e.currentTarget as HTMLAnchorElement).style.background = "transparent"; (e.currentTarget as HTMLAnchorElement).style.borderColor = `${color}50`; }} > {children} ); } return ( ((e.currentTarget as HTMLAnchorElement).style.background = colorHover) } onMouseLeave={(e) => ((e.currentTarget as HTMLAnchorElement).style.background = color) } > {children} ); } const ArrowRight = () => ( ); const ChevronDown = () => ( ); // ─── Skeleton ────────────────────────────────────────────────────────────────── function SkeletonBlock({ className }: { className?: string }) { return

; } function LoadingSkeleton() { return (

{[0, 1, 2].map((i) => )}

); } // ─── Layout primitives ───────────────────────────────────────────────────────── function Section({ id, className = "", children, }: { id?: string; className?: string; children: React.ReactNode; }) { return (

{children}

); } function SectionHeader({ chip, heading, sub, color, center = true, }: { chip: string; heading: React.ReactNode; sub?: string; color: string; center?: boolean; }) { return (

{chip}

{heading}

{sub && (

{sub}

)}

); } // ─── 1. NAV ─────────────────────────────────────────────────────────────────── function Nav({ d }: { d: LandingData }) { const [scrolled, setScrolled] = useState(false); const a = acc(d.theme); const ah = accH(d.theme); useEffect(() => { const fn = () => setScrolled(window.scrollY > 24); window.addEventListener("scroll", fn); return () => window.removeEventListener("scroll", fn); }, []); return (

{/* Logo */} {/* eslint-disable-next-line @next/next/no-img-element */} {d.name}

{/* Nav links */} Start nu

); } // ─── 2. HERO ────────────────────────────────────────────────────────────────── function Hero({ d }: { d: LandingData }) { const a = acc(d.theme); const ah = accH(d.theme); const ad = accD(d.theme); return (

{/* Radial glow */}

{/* Dot grid */}

{/* Live badge */} AI Studio {/* Headline */}

{d.title ?? d.name}

{/* Sub */} {d.valueProposition && (

{d.valueProposition}

)} {/* Price pill */} {!d.isFree && d.price && (

€{d.price} {intervalLabel(d.recurringInterval)} {d.trialPeriodDays && ( {d.trialPeriodDays}d gratis )}

)} {/* CTA row */}

Begin vandaag Bekijk assistenten

{/* Social proof micro */}

{d.assistants.length} gespecialiseerde AI-assistenten inbegrepen

{/* Hero image */}

); } // ─── 3. ASSISTANTS ──────────────────────────────────────────────────────────── function AssistantsSection({ d }: { d: LandingData }) { const a = acc(d.theme); const ah = accH(d.theme); return (

{d.assistants.length} assistenten,
elk een specialist} sub="Elk assistent heeft een eigen focus en expertise. Samen dekken ze alle kritieke onderdelen van uw groei." color={a} /> {(() => { // Exact desired order: row1=Scale Assistent, row2=Basis/Groeistratege/Salescoach/Schaalarchitect, row3=AI-gids const ORDER = [ "scale assistent", "de basis", "de groeistratege", "salescoach", "schaalarchitect", "ai-gids", ]; const rankOf = (name: string) => { const n = name.toLowerCase().replace(/\s+/g, " ").trim(); const idx = ORDER.findIndex(o => n.includes(o)); return idx === -1 ? 999 : idx; }; const sorted = [...d.assistants].sort((a, b) => rankOf(a.name) - rankOf(b.name)); const top = sorted.slice(0, 1); // Scale Assistent — full width const middle = sorted.slice(1, 5); // 4 cards const bottom = sorted.slice(5); // AI-gids — full width const Card = ({ asst, wide = false }: { asst: typeof sorted[0]; wide?: boolean }) => ( { const el = e.currentTarget as HTMLElement; el.style.borderColor = `${a}60`; el.style.boxShadow = `0 0 32px ${a}20`; }} onMouseLeave={(e) => { const el = e.currentTarget as HTMLElement; el.style.borderColor = "#27272a"; el.style.boxShadow = "none"; }} > {/* Image */}

Probeer gratis

{/* Body */}

{asst.name}

{asst.description && (

{asst.description}

)}

); return (

{/* Row 1 — Scale Assistent full width */} {top.map((asst) => )} {/* Row 2 — 4 cards */} {middle.length > 0 && (

{middle.map((asst) => )}

)} {/* Row 3 — AI-gids full width */} {bottom.map((asst) => )}

); })()}

Toegang tot alle {d.assistants.length} assistenten

); } // ─── 4. MAKER ───────────────────────────────────────────────────────────────── function MakerSection({ d }: { d: LandingData }) { const a = acc(d.theme); const ad = accD(d.theme); return (

{/* Avatar card */}

{d.ownerName.charAt(0)}

{d.ownerName}

Oprichter van {d.name}

Verified builder

{/* Text */}

De maker

{d.ownerName}

{d.ownerBio ? d.ownerBio : `${d.name} is gebouwd door ${d.ownerName} — iemand die de uitdagingen van coaches en ondernemers van binnenuit kent. Elke assistent is met zorg ontworpen om u écht verder te helpen, niet om indruk te maken met technologie.`}

“Ik bouw tools die ik zelf zou willen hebben — werkend, eerlijk en waardevol op dag één.”

— {d.ownerName}

); } // ─── 5. TRANSFORMATION ──────────────────────────────────────────────────────── function TransformationSection({ d }: { d: LandingData }) { const a = acc(d.theme); const ad = accD(d.theme); const before = [ "Eindeloos bezig met kleine taken", "Geen consistente aanpak per klant", "Tijd verspild aan administratie", "Handmatig content en strategie bedenken", "Groei stagneert door gebrek aan systeem", ]; const after = [ "AI regelt het zware werk voor u", "Gestandaardiseerde, bewezen aanpak", "Automatisch en schaalbaar", "Directe, scherpe output op maat", "Gefocuste groei met een helder systeem", ]; return (

{/* Before */}

Zonder {d.name}

✕ {item}

{/* After */}

Met {d.name}

✓ {item}

); } // ─── 6. BENEFITS ────────────────────────────────────────────────────────────── const BENEFIT_ICONS = [ , , , , , , ]; function BenefitsSection({ d }: { d: LandingData }) { const a = acc(d.theme); const ad = accD(d.theme); const benefits = [ { title: "Direct inzetbaar", body: "Geen lange onboarding. Binnen minuten aan de slag met uw eerste assistent." }, { title: `${d.assistants.length} specialisten`, body: "Elke assistent heeft een eigen focus, gebouwd voor een specifieke taak." }, { title: "Bewezen aanpak", body: "Gebouwd op bewezen coaching methodieken, vertaald naar AI." }, { title: "Op elk apparaat", body: "Werkt naadloos op desktop, tablet en mobiel." }, { title: "Persoonlijk & schaalbaar", body: "Van solo coach tot groeiend bedrijf — altijd de juiste ondersteuning." }, { title: "Veilig & privé", body: "Uw data blijft van u. Privacy en veiligheid zijn prioriteit." }, ]; return (

{benefits.map((b, i) => (

((e.currentTarget as HTMLElement).style.borderColor = `${a}40`)} onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.borderColor = "#27272a")} >

{BENEFIT_ICONS[i]}

{b.title}

{b.body}

))}

); } // ─── 7. SOCIAL PROOF ────────────────────────────────────────────────────────── const TESTIMONIALS = [ { quote: "Ik bespaar minstens 5 uur per week. De assistenten denken écht mee in mijn trajecten.", name: "Marieke van den Berg", role: "Business Coach", initials: "MB" }, { quote: "Eindelijk een tool die begrijpt hoe coaching werkt. Niet zomaar een chatbot, maar een echte AI-partner.", name: "Thomas de Groot", role: "Ondernemer & Coach", initials: "TG" }, { quote: "De kwaliteit van mijn sessies is merkbaar verbeterd. Mijn klanten zien het verschil.", name: "Lisanne Hoekstra", role: "Lifecoach", initials: "LH" }, ]; function SocialProofSection({ d }: { d: LandingData }) { const a = acc(d.theme); const ad = accD(d.theme); return (

Coaches die al groeien
met {d.name}} color={a} />

{TESTIMONIALS.map((t, i) => (

{/* Stars */}

{[1,2,3,4,5].map((s) => ( ))}

“{t.quote}”

{t.initials}

{t.name}

{t.role}

))}

); } // ─── 8. PRICING ─────────────────────────────────────────────────────────────── function PricingSection({ d }: { d: LandingData }) { const a = acc(d.theme); const ah = accH(d.theme); const ad = accD(d.theme); const features = [ `${d.assistants.length} gespecialiseerde AI-assistenten`, "Onbeperkt gesprekken", "Directe toegang na aanmelding", "Regelmatige updates & nieuwe assistenten", "Prioriteit support", ]; return (

{/* Popular badge */}

Meest gekozen

{/* Price */}

{d.name}

{d.isFree ? ( Gratis ) : d.price ? (

€{d.price} {intervalLabel(d.recurringInterval)}

) : null} {d.trialPeriodDays && (

{d.trialPeriodDays} dagen gratis — geen creditcard vereist

)}

{/* Feature list */}

✓ {f}

Begin vandaag

); } // ─── 9. FAQ ─────────────────────────────────────────────────────────────────── function FAQSection({ d }: { d: LandingData }) { const a = acc(d.theme); const [open, setOpen] = useState(null); const faqs = [ { q: `Wat is ${d.name}?`, a: `${d.name} is een AI-studio met ${d.assistants.length} gespecialiseerde assistenten die u helpen uw coaching business te laten groeien. Elke assistent heeft een eigen focus en expertise.`, }, { q: "Hoe snel kan ik starten?", a: "Direct. Na aanmelding heeft u meteen toegang tot alle assistenten. Geen installatie of wachttijd.", }, { q: `Wat kost ${d.name}?`, a: d.isFree ? `${d.name} is gratis toegankelijk.` : d.price ? `${d.name} kost €${d.price} ${intervalLabel(d.recurringInterval)}.${d.trialPeriodDays ? ` U kunt ${d.trialPeriodDays} dagen gratis uitproberen.` : ""}` : "Neem contact op voor de actuele prijsinformatie.", }, { q: "Wat doen de AI-assistenten precies?", a: `Elke assistent heeft een eigen focus. Samen dekken de ${d.assistants.length} assistenten alle belangrijke onderdelen van uw groei: van strategie en sales tot uitvoering en mentale doorbraken.`, }, { q: "Is mijn data veilig?", a: "Ja. Uw gesprekken en gegevens worden vertrouwelijk behandeld en nooit gedeeld met derden.", }, { q: "Kan ik stoppen wanneer ik wil?", a: "Ja. Geen langdurige contracten. U kunt op elk moment opzeggen.", }, ]; return (

{faqs.map((faq, i) => (

setOpen(open === i ? null : i)} >

{faq.q}

{open === i && (

{faq.a}

)}

))}

); } // ─── 10. FINAL CTA ───────────────────────────────────────────────────────────── function FinalCTA({ d }: { d: LandingData }) { const a = acc(d.theme); const ah = accH(d.theme); const ad = accD(d.theme); return (

{/* Glow */}

Klaar om te starten?

Begin vandaag met {d.name}

{d.assistants.length} AI-assistenten staan voor u klaar. Geen wachttijd — direct aan de slag.

Begin vandaag {!d.isFree && d.price && (

€{d.price} {intervalLabel(d.recurringInterval)} {d.trialPeriodDays ? ` · ${d.trialPeriodDays} dagen gratis proberen` : ""}

)}

); } // ─── 11. FOOTER ──────────────────────────────────────────────────────────────── function Footer({ d }: { d: LandingData }) { const a = acc(d.theme); return ( ); } // ─── ROOT ────────────────────────────────────────────────────────────────────── export default function LandingPage() { const [data, setData] = useState(null); const [error, setError] = useState(false); useEffect(() => { fetch( "https://caistudio.nl/api/v1/landing-page/st_cfaee865fe59c385eca33ae614e7ac3c" ) .then((r) => { if (!r.ok) throw new Error("Failed"); return r.json() as Promise; }) .then(setData) .catch(() => setError(true)); }, []); if (error) { return (

Kon de pagina niet laden. Probeer het later opnieuw.

); } if (!data) return ; return (

); }