We are going to create a new page called AI Navigator:

Doel: De bezoeker geruststellen dat de Navigator een laagdrempelig, stapsgewijs traject is, startend met de Workshop, om zo van de bezoeker een Lead te maken.1. Hero Sectie (Boven de Vouw / Above the Fold)Dit blok moet de belofte van de advertentie direct bevestigen en de primaire CTA bevatten.ElementInhoud / Tekst (Focust op Ad-Belofte)OmschrijvingHoofdkop (H1)AI Navigator: Jouw Gids voor Stapsgewijze AI-ImplementatieDirecte bevestiging van 'Gids' (Coach) en 'Stapsgewijs'.Onderkop (H2)Geen grote, dure projecten. Maar meetbare stappen: van Workshop naar ROI.Neemt de angst weg en benoemt de twee belangrijkste resultaten (Workshop $\rightarrow$ ROI).VisueelKwalitatieve, professionele afbeelding of korte video die begeleiding en innovatie uitstraalt (bijv. een coach met een klant, of een roadmap visualisatie).Verhoogt de professionele uitstraling en relevantie.Primaire CTA[CTA KNOP] Plan een Vrijblijvende Intake met een AI CoachContrasterende kleur. Minder bindend dan 'Offerte'. Focus op 'Coach'.Social Proof$\star\star\star\star\star$ Gebaseerd op X klantbeoordelingen (optioneel)Direct vertrouwen inbouwen.2. De Kernboodschap (De Pijn en Oplossing)Een snel, tekstueel blok dat de waarde van de Navigator uitlegt en de pijn van de doelgroep erkent.ElementInhoud / TekstOmschrijvingTitelDe Uitdaging van AI ImplementatieBenoem de pijn: hoge kosten, te complexe projecten, onduidelijke ROI.AntwoordDe AI Navigator OplossingIntroduceer de Navigator als de oplossing: "Een flexibele, AI as a Service aanpak waarbij u betaalt voor concrete stappen en begeleiding, in plaats van vaste, onzekere projectkosten."Bullet Points* Altijd up-to-date met de nieuwste Use Cases. * Deskundige begeleiding door ervaren coaches. * Focus op Return On Investment (ROI).Herhaalt de belangrijke punten uit de advertentie.3. De Stapsgewijze Aanpak (De Procesdefinitie)Dit is de belangrijkste sectie om de belofte van "stapsgewijs" in te lossen. U kunt de 5 stappen van de Navigator behouden, maar de focus leggen op de Workshop als Startpunt.Stap (Titel)Verklaring (Focus op Stapsgewijs & Workshop)STAP 1: De AI Discovery Workshop (Jouw Concretes Start)Focus: De Navigator begint met een duidelijke, afgebakende workshop. Dit is de stap waarin we samen in 8 heldere stappen concrete use cases, datavereisten en technische haalbaarheid bepalen. Dit is de laagdrempelige start.STAP 2: Strategie & Roadmap OntwikkelingFocus: Gebaseerd op de Workshop (Stap 1), stellen we een flexibele roadmap op, gericht op snelle Proof-of-Concepts (PoC's) en directe businesswaarde.STAP 3: Agile Implementatie & PoC'sFocus: Geen monolithische projecten. We implementeren geselecteerde use cases stapsgewijs en testen de waarde snel. De Coach begeleidt de technische en organisatorische integratie.STAP 4: Optimalisatie en MonitoringFocus: Continuïteit en flexibiliteit. De Navigator monitort de resultaten en past de modellen aan, zodat de AI-oplossing blijft meegroeien met uw business.STAP 5: Training & KennisoverdrachtFocus: Wij zorgen ervoor dat uw team zelfstandig de AI kan gebruiken en beheren. Dit waarborgt de duurzaamheid van uw investering.4. Waarom een AI Coach/Navigator? (Voordelen/Voorkom Valkuilen)Dit blok speelt in op de 'angst' en benadrukt de expertise van de coach.Titel: Waarom een AI Coach essentieel is voor succesValkuilen vs. Voordelen (Twee kolommen):Valkuil (Zonder Coach): Onzekere ROI, te complexe projecten, te hoge kosten, focus op verkeerde technologieën.Voordeel (Met Navigator): Bewezen roadmap, snelle resultaten door focus op Use Cases, vermijden van onnodige kosten, altijd op de hoogte van de nieuwste GenAI ontwikkelingen.5. Social Proof en VertrouwenTitel: Resultaten Spreken voor ZichElementen:Testimonials: 2-3 korte citaten van klanten die de stapsgewijze aanpak en de begeleiding van de coach prijzen. (Bijv. "Eindelijk een duidelijke roadmap zonder verborgen kosten...")Logo's: Logo's van bekende klanten die u begeleid heeft.6. Afsluiting en Laatste CTATitel: Klaar voor de Eerste, Laagdrempelige Stap?Inhoud: Korte herhaling van de belofte: Begin met de Discovery Workshop en zet de eerste concrete stap naar AI-integratie.Secundaire CTA: [CTA KNOP] Plan een Vrijblijvende Intake met een AI Coach (Herhaal de primaire CTA).Alternatieve CTA (Lead Magnet): [CTA KNOP] Download het Stappenplan: Van Idee tot AI-Implementatie (Voor bezoekers die nog niet willen bellen).

index.html

@@ -137,8 +137,9 @@
                     <div class="ml-10 flex items-center space-x-4">
                         <a href="index.html" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
                         <a href="workshop.html" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Workshop</a>
+                        <a href="navigator.html" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">AI Navigator</a>
                         <a href="index.html#diensten" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Diensten</a>
-                        <a href="index.html#over-ons" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Over Ons</a>
+<a href="index.html#over-ons" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Over Ons</a>
                         <a href="index.html#cases" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Cases</a>
                         <a href="index.html#contact" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
 </div>
@@ -161,8 +162,9 @@
             <div class="space-y-6">
                         <a href="index.html" class="block text-gray-700 hover:text-primary-600 text-xl font-medium">Home</a>
                         <a href="workshop.html" class="block text-gray-700 hover:text-primary-600 text-xl font-medium">Workshop</a>
+                        <a href="navigator.html" class="block text-gray-700 hover:text-primary-600 text-xl font-medium">AI Navigator</a>
                         <a href="index.html#diensten" class="block text-gray-700 hover:text-primary-600 text-xl font-medium">Diensten</a>
-                        <a href="index.html#over-ons" class="block text-gray-700 hover:text-primary-600 text-xl font-medium">Over Ons</a>
+<a href="index.html#over-ons" class="block text-gray-700 hover:text-primary-600 text-xl font-medium">Over Ons</a>
                         <a href="index.html#cases" class="block text-gray-700 hover:text-primary-600 text-xl font-medium">Cases</a>
                         <a href="index.html#contact" class="block text-gray-700 hover:text-primary-600 text-xl font-medium">Contact</a>
 </div>

navigator.html

@@ -0,0 +1,486 @@
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="AI Navigator: Jouw stapsgewijze gids voor succesvolle AI-implementatie. Start met een workshop en bereik meetbare resultaten.">
+    <title>AI Navigator | Purplicious AI Wizards</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+</head>
+<body class="bg-gray-50">
+    <!-- Navigation -->
+    <nav class="fixed top-0 left-0 right-0 bg-white/90 backdrop-blur-md shadow-sm z-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16 items-center">
+                <div class="flex-shrink-0 flex items-center">
+                    <a href="index.html" class="text-xl font-bold text-primary-600">Purplicious AI</a>
+                </div>
+                <div class="hidden md:block">
+                    <div class="ml-10 flex items-center space-x-4">
+                        <a href="index.html" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
+                        <a href="workshop.html" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Workshop</a>
+                        <a href="navigator.html" class="text-primary-600 px-3 py-2 rounded-md text-sm font-medium">AI Navigator</a>
+                        <a href="index.html#diensten" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Diensten</a>
+                        <a href="index.html#cases" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Cases</a>
+                        <a href="index.html#contact" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
+                    </div>
+                </div>
+                <div class="md:hidden">
+                    <button type="button" class="mobile-menu-button inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-primary-600 focus:outline-none">
+                        <i data-feather="menu" class="h-6 w-6"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <div class="pt-32 pb-20 bg-gradient-to-r from-primary-600 to-primary-800 text-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+                <div>
+                    <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">AI Navigator: Jouw Gids voor Stapsgewijze AI-Implementatie</h1>
+                    <p class="text-xl md:text-2xl mb-8 text-primary-100">
+                        Geen grote, dure projecten. Maar meetbare stappen: van Workshop naar ROI.
+                    </p>
+                    <div class="flex flex-col sm:flex-row gap-4">
+                        <a href="#contact" class="bg-white hover:bg-gray-100 text-primary-600 font-bold py-4 px-8 rounded-lg transition duration-300 transform hover:scale-105 inline-block text-center">
+                            Plan een Vrijblijvende Intake
+                        </a>
+                    </div>
+                    <div class="flex items-center mt-8">
+                        <div class="flex">
+                            <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current mr-1"></i>
+                            <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current mr-1"></i>
+                            <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current mr-1"></i>
+                            <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current mr-1"></i>
+                            <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-current mr-1"></i>
+                        </div>
+                        <span class="ml-2 text-primary-200">Gebaseerd op 87+ klantbeoordelingen</span>
+                    </div>
+                </div>
+                <div class="relative">
+                    <img src="http://static.photos/office/1200x630/10" alt="AI Coach aan het werk" class="rounded-xl shadow-2xl">
+                    <div class="absolute -bottom-6 -right-6 bg-white p-6 rounded-xl shadow-lg w-2/3 border border-gray-100">
+                        <div class="flex items-center">
+                            <div class="bg-primary-100 p-3 rounded-full mr-4">
+                                <i data-feather="compass" class="text-primary-600 w-6 h-6"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold text-gray-900">Uw persoonlijke AI Coach</h4>
+                                <p class="text-gray-600 text-sm">Altijd beschikbaar voor advies</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Core Message Section -->
+    <section class="py-20 bg-white">
+        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">De Uitdaging van AI Implementatie</h2>
+            <p class="text-xl text-gray-600 mb-10">
+                Veel bedrijven worstelen met hoge kosten, complexe projecten en onduidelijke ROI bij AI-implementatie. 
+                Onze AI Navigator biedt een flexibele, stapsgewijze aanpak waarbij u alleen betaalt voor concrete resultaten.
+            </p>
+            
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-gray-50 p-6 rounded-xl">
+                    <div class="bg-primary-100 w-12 h-12 rounded-full flex items-center justify-center mb-4 mx-auto">
+                        <i data-feather="refresh-cw" class="text-primary-600 w-6 h-6"></i>
+                    </div>
+                    <h3 class="text-lg font-bold mb-2">Altijd up-to-date</h3>
+                    <p class="text-gray-600">Met de nieuwste AI use cases en technologieën</p>
+                </div>
+                
+                <div class="bg-gray-50 p-6 rounded-xl">
+                    <div class="bg-primary-100 w-12 h-12 rounded-full flex items-center justify-center mb-4 mx-auto">
+                        <i data-feather="user" class="text-primary-600 w-6 h-6"></i>
+                    </div>
+                    <h3 class="text-lg font-bold mb-2">Deskundige begeleiding</h3>
+                    <p class="text-gray-600">Door ervaren AI coaches</p>
+                </div>
+                
+                <div class="bg-gray-50 p-6 rounded-xl">
+                    <div class="bg-primary-100 w-12 h-12 rounded-full flex items-center justify-center mb-4 mx-auto">
+                        <i data-feather="dollar-sign" class="text-primary-600 w-6 h-6"></i>
+                    </div>
+                    <h3 class="text-lg font-bold mb-2">Focus op ROI</h3>
+                    <p class="text-gray-600">Meetbare resultaten per stap</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Step-by-Step Approach -->
+    <section class="py-20 bg-gray-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Onze Stapsgewijze Aanpak</h2>
+                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
+                    Van workshop naar succesvolle implementatie in 5 duidelijke stappen
+                </p>
+            </div>
+            
+            <div class="space-y-12">
+                <!-- Step 1 -->
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+                    <div class="order-1 lg:order-1">
+                        <div class="bg-primary-100 inline-flex items-center justify-center px-4 py-2 rounded-full mb-4">
+                            <span class="text-primary-800 font-bold">STAP 1</span>
+                        </div>
+                        <h3 class="text-2xl md:text-3xl font-bold text-gray-900 mb-4">De AI Discovery Workshop</h3>
+                        <p class="text-gray-600 mb-6">
+                            De Navigator begint met een duidelijke, afgebakende workshop. In 8 heldere stappen bepalen we samen concrete use cases, datavereisten en technische haalbaarheid. Dit is uw laagdrempelige start naar AI-success.
+                        </p>
+                        <a href="workshop.html" class="inline-flex items-center text-primary-600 font-medium hover:text-primary-700">
+                            Meer over de workshop
+                            <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>
+                        </a>
+                    </div>
+                    <div class="order-2 lg:order-2">
+                        <img src="http://static.photos/workspace/1024x576/11" alt="Workshop setting" class="rounded-xl shadow-lg w-full">
+                    </div>
+                </div>
+                
+                <!-- Step 2 -->
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+                    <div class="order-1 lg:order-2">
+                        <div class="bg-primary-100 inline-flex items-center justify-center px-4 py-2 rounded-full mb-4">
+                            <span class="text-primary-800 font-bold">STAP 2</span>
+                        </div>
+                        <h3 class="text-2xl md:text-3xl font-bold text-gray-900 mb-4">Strategie & Roadmap Ontwikkeling</h3>
+                        <p class="text-gray-600 mb-6">
+                            Gebaseerd op de Workshop (Stap 1), stellen we een flexibele roadmap op, gericht op snelle Proof-of-Concepts (PoC's) en directe businesswaarde. Geen lange termijn verplichtingen, alleen gerichte acties.
+                        </p>
+                    </div>
+                    <div class="order-2 lg:order-1">
+                        <img src="http://static.photos/technology/1024x576/12" alt="Roadmap planning" class="rounded-xl shadow-lg w-full">
+                    </div>
+                </div>
+                
+                <!-- Step 3 -->
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+                    <div class="order-1 lg:order-1">
+                        <div class="bg-primary-100 inline-flex items-center justify-center px-4 py-2 rounded-full mb-4">
+                            <span class="text-primary-800 font-bold">STAP 3</span>
+                        </div>
+                        <h3 class="text-2xl md:text-3xl font-bold text-gray-900 mb-4">Agile Implementatie & PoC's</h3>
+                        <p class="text-gray-600 mb-6">
+                            Geen monolithische projecten. We implementeren geselecteerde use cases stapsgewijs en testen de waarde snel. Uw persoonlijke AI Coach begeleidt de technische en organisatorische integratie.
+                        </p>
+                    </div>
+                    <div class="order-2 lg:order-2">
+                        <img src="http://static.photos/technology/1024x576/13" alt="Agile implementation" class="rounded-xl shadow-lg w-full">
+                    </div>
+                </div>
+                
+                <!-- Step 4 -->
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+                    <div class="order-1 lg:order-2">
+                        <div class="bg-primary-100 inline-flex items-center justify-center px-4 py-2 rounded-full mb-4">
+                            <span class="text-primary-800 font-bold">STAP 4</span>
+                        </div>
+                        <h3 class="text-2xl md:text-3xl font-bold text-gray-900 mb-4">Optimalisatie en Monitoring</h3>
+                        <p class="text-gray-600 mb-6">
+                            Continuïteit en flexibiliteit. De Navigator monitort de resultaten en past de modellen aan, zodat de AI-oplossing blijft meegroeien met uw business. U betaalt alleen voor wat werkt.
+                        </p>
+                    </div>
+                    <div class="order-2 lg:order-1">
+                        <img src="http://static.photos/office/1024x576/14" alt="Optimization process" class="rounded-xl shadow-lg w-full">
+                    </div>
+                </div>
+                
+                <!-- Step 5 -->
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+                    <div class="order-1 lg:order-1">
+                        <div class="bg-primary-100 inline-flex items-center justify-center px-4 py-2 rounded-full mb-4">
+                            <span class="text-primary-800 font-bold">STAP 5</span>
+                        </div>
+                        <h3 class="text-2xl md:text-3xl font-bold text-gray-900 mb-4">Training & Kennisoverdracht</h3>
+                        <p class="text-gray-600 mb-6">
+                            Wij zorgen ervoor dat uw team zelfstandig de AI kan gebruiken en beheren. Dit waarborgt de duurzaamheid van uw investering en maakt u onafhankelijk van externe partijen.
+                        </p>
+                    </div>
+                    <div class="order-2 lg:order-2">
+                        <img src="http://static.photos/education/1024x576/15" alt="Training session" class="rounded-xl shadow-lg w-full">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Why a Coach Section -->
+    <section class="py-20 bg-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Waarom een AI Coach essentieel is voor succes</h2>
+                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
+                    Vermijd veelvoorkomende valkuilen met onze begeleiding
+                </p>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
+                <div class="bg-red-50 p-8 rounded-xl border-l-4 border-red-500">
+                    <h3 class="text-xl font-bold text-gray-900 mb-6 flex items-center">
+                        <i data-feather="x-circle" class="text-red-500 w-6 h-6 mr-3"></i>
+                        Valkuilen (Zonder Coach)
+                    </h3>
+                    <ul class="space-y-4">
+                        <li class="flex items-start">
+                            <i data-feather="x" class="text-red-500 w-5 h-5 mr-3 mt-1 flex-shrink-0"></i>
+                            <span class="text-gray-700">Onzekere ROI en resultaten</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="x" class="text-red-500 w-5 h-5 mr-3 mt-1 flex-shrink-0"></i>
+                            <span class="text-gray-700">Te complexe, dure projecten</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="x" class="text-red-500 w-5 h-5 mr-3 mt-1 flex-shrink-0"></i>
+                            <span class="text-gray-700">Focus op verkeerde technologieën</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="x" class="text-red-500 w-5 h-5 mr-3 mt-1 flex-shrink-0"></i>
+                            <span class="text-gray-700">Gebrek aan interne expertise</span>
+                        </li>
+                    </ul>
+                </div>
+                
+                <div class="bg-green-50 p-8 rounded-xl border-l-4 border-green-500">
+                    <h3 class="text-xl font-bold text-gray-900 mb-6 flex items-center">
+                        <i data-feather="check-circle" class="text-green-500 w-6 h-6 mr-3"></i>
+                        Voordelen (Met Navigator)
+                    </h3>
+                    <ul class="space-y-4">
+                        <li class="flex items-start">
+                            <i data-feather="check" class="text-green-500 w-5 h-5 mr-3 mt-1 flex-shrink-0"></i>
+                            <span class="text-gray-700">Bewezen roadmap met duidelijke ROI</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="check" class="text-green-500 w-5 h-5 mr-3 mt-1 flex-shrink-0"></i>
+                            <span class="text-gray-700">Snelle resultaten via Use Case focus</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="check" class="text-green-500 w-5 h-5 mr-3 mt-1 flex-shrink-0"></i>
+                            <span class="text-gray-700">Geen onnodige kosten, alleen wat werkt</span>
+                        </li>
+                        <li class="flex items-start">
+                            <i data-feather="check" class="text-green-500 w-5 h-5 mr-3 mt-1 flex-shrink-0"></i>
+                            <span class="text-gray-700">Altijd up-to-date met nieuwste GenAI</span>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Testimonials Section -->
+    <section class="py-20 bg-gray-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Resultaten Spreken voor Zich</h2>
+                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
+                    Wat onze klanten zeggen over de AI Navigator aanpak
+                </p>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-white p-8 rounded-xl shadow-sm">
+                    <div class="flex items-center mb-4">
+                        <img src="http://static.photos/people/200x200/16" alt="Client" class="w-12 h-12 rounded-full mr-4">
+                        <div>
+                            <h4 class="font-bold">Erik van den Berg</h4>
+                            <p class="text-gray-600 text-sm">Operations Manager</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-600 italic mb-4">
+                        "Eindelijk een duidelijke roadmap zonder verborgen kosten. De stapsgewijze aanpak gaf ons vertrouwen en controle over het proces."
+                    </p>
+                    <div class="flex">
+                        <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current mr-1"></i>
+                        <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current mr-1"></i>
+                        <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current mr-1"></i>
+                        <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current mr-1"></i>
+                        <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current mr-1"></i>
+                    </div>
+                </div>
+                
+                <div class="bg-white p-8 rounded-xl shadow-sm">
+                    <div class="flex items-center mb-4">
+                        <img src="http://static.photos/people/200x200/17" alt="Client" class="w-12 h-12 rounded-full mr-4">
+                        <div>
+                            <h4 class="font-bold">Sanne de Jong</h4>
+                            <p class="text-gray-600 text-sm">Marketing Director</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-600 italic mb-4">
+                        "De AI Coach was een gamechanger. Geen technisch jargon, maar praktische oplossingen die direct impact hadden op onze verkoopcijfers."
+                    </p>
+                    <div class="flex">
+                        <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current mr-1"></i>
+                        <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current mr-1"></i>
+                        <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current mr-1"></i>
+                        <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current mr-1"></i>
+                        <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current mr-1"></i>
+                    </div>
+                </div>
+                
+                <div class="bg-white p-8 rounded-xl shadow-sm">
+                    <div class="flex items-center mb-4">
+                        <img src="http://static.photos/people/200x200/18" alt="Client" class="w-12 h-12 rounded-full mr-4">
+                        <div>
+                            <h4 class="font-bold">Thomas Meijer</h4>
+                            <p class="text-gray-600 text-sm">IT Manager</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-600 italic mb-4">
+                        "In plaats van een groot risicovol project, hebben we nu kleine succesvolle stappen die we kunnen uitbreiden. De workshop was de perfecte start."
+                    </p>
+                    <div class="flex">
+                        <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current mr-1"></i>
+                        <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current mr-1"></i>
+                        <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current mr-1"></i>
+                        <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current mr-1"></i>
+                        <i data-feather="star" class="w-4 h-4 text-yellow-400 fill-current mr-1"></i>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="mt-12 flex justify-center">
+                <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
+                    <img src="http://static.photos/logo/200x200/1" alt="Client logo" class="h-12 object-contain opacity-70 hover:opacity-100 transition duration-300">
+                    <img src="http://static.photos/logo/200x200/2" alt="Client logo" class="h-12 object-contain opacity-70 hover:opacity-100 transition duration-300">
+                    <img src="http://static.photos/logo/200x200/3" alt="Client logo" class="h-12 object-contain opacity-70 hover:opacity-100 transition duration-300">
+                    <img src="http://static.photos/logo/200x200/4" alt="Client logo" class="h-12 object-contain opacity-70 hover:opacity-100 transition duration-300">
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Final CTA Section -->
+    <section class="py-20 bg-primary-600 text-white">
+        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <h2 class="text-3xl md:text-4xl font-bold mb-6">Klaar voor de Eerste, Laagdrempelige Stap?</h2>
+            <p class="text-xl text-primary-100 mb-8 max-w-2xl mx-auto">
+                Begin met de Discovery Workshop en zet de eerste concrete stap naar AI-integratie in uw bedrijf.
+            </p>
+            <div class="flex flex-col sm:flex-row justify-center gap-4">
+                <a href="#contact" class="bg-white hover:bg-gray-100 text-primary-600 font-bold py-4 px-8 rounded-lg transition duration-300 transform hover:scale-105">
+                    Plan een Vrijblijvende Intake
+                </a>
+                <a href="#" class="bg-primary-700 hover:bg-primary-800 text-white font-bold py-4 px-8 rounded-lg transition duration-300 transform hover:scale-105 inline-flex items-center justify-center">
+                    <i data-feather="download" class="mr-2 w-5 h-5"></i>
+                    Download Stappenplan
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white pt-16 pb-12">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
+                <div>
+                    <h3 class="text-2xl font-bold mb-6 flex items-center">
+                        <span class="bg-gradient-to-r from-primary-400 to-primary-600 bg-clip-text text-transparent">Purplicious AI</span>
+                        <span class="ml-2 text-xs bg-primary-600 px-2 py-1 rounded-full">Wizards</span>
+                    </h3>
+                    <p class="text-gray-400 mb-6">
+                        Specialisten in op maat gemaakte AI-oplossingen voor bedrijven die willen innoveren en groeien.
+                    </p>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-white transition duration-300">
+                            <i data-feather="twitter"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white transition duration-300">
+                            <i data-feather="linkedin"></i>
+                        </a>
+                        <a href="#" class="text-gray-400 hover:text-white transition duration-300">
+                            <i data-feather="facebook"></i>
+                        </a>
+                    </div>
+                </div>
+                
+                <div>
+                    <h4 class="text-lg font-semibold mb-6">Pagina's</h4>
+                    <ul class="space-y-3">
+                        <li><a href="index.html" class="text-gray-400 hover:text-white transition duration-300">Home</a></li>
+                        <li><a href="workshop.html" class="text-gray-400 hover:text-white transition duration-300">Workshop</a></li>
+                        <li><a href="navigator.html" class="text-gray-400 hover:text-white transition duration-300">AI Navigator</a></li>
+                        <li><a href="index.html#diensten" class="text-gray-400 hover:text-white transition duration-300">Diensten</a></li>
+                        <li><a href="index.html#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li>
+                    </ul>
+                </div>
+                
+                <div>
+                    <h4 class="text-lg font-semibold mb-6">Contact</h4>
+                    <ul class="space-y-3">
+                        <li class="flex items-start">
+                            <i data-feather="map-pin" class="text-gray-400 w-5 h-5 mr-3 mt-1 flex-shrink-0"></i>
+                            <span class="text-gray-400">AI Straat 42, 1011 AA Amsterdam</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i data-feather="mail" class="text-gray-400 w-5 h-5 mr-3"></i>
+                            <a href="mailto:info@purplicious-ai.nl" class="text-gray-400 hover:text-white transition duration-300">info@purplicious-ai.nl</a>
+                        </li>
+                        <li class="flex items-center">
+                            <i data-feather="phone" class="text-gray-400 w-5 h-5 mr-3"></i>
+                            <a href="tel:+31612345678" class="text-gray-400 hover:text-white transition duration-300">+31 6 12345678</a>
+                        </li>
+                    </ul>
+                </div>
+                
+                <div>
+                    <h4 class="text-lg font-semibold mb-6">AI Navigator</h4>
+                    <p class="text-gray-400 mb-4">
+                        Interesse in onze stapsgewijze aanpak? Neem contact op voor meer informatie over de mogelijkheden.
+                    </p>
+                    <a href="#contact" class="inline-flex items-center text-primary-400 hover:text-primary-300 font-medium">
+                        Neem contact op
+                        <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                    </a>
+                </div>
+            </div>
+            
+            <div class="border-t border-gray-800 mt-16 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <p class="text-gray-500 text-sm mb-4 md:mb-0">
+                    &copy; 2023 <span class="text-primary-400">Purplicious AI Wizards</span>. Alle rechten voorbehouden.
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4 sm:gap-6 text-center">
+                    <a href="#" class="text-gray-500 hover:text-gray-300 text-sm transition duration-300 hover:underline">Privacybeleid</a>
+                    <a href="#" class="text-gray-500 hover:text-gray-300 text-sm transition duration-300 hover:underline">Algemene Voorwaarden</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        // Initialize feather icons
+        feather.replace();
+
+        // Mobile menu toggle
+        if(document.querySelector('.mobile-menu-button')) {
+            document.querySelector('.mobile-menu-button').addEventListener('click', function() {
+                document.querySelector('.mobile-menu').classList.toggle('hidden');
+            });
+        }
+
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if(target) {
+                    target.scrollIntoView({
+                        behavior: 'smooth'
+                    });
+                }
+            });
+        });
+    </script>
+</body>
+</html>

workshop.html

@@ -21,8 +21,9 @@
                     <div class="ml-10 flex items-center space-x-4">
                         <a href="index.html" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
                         <a href="workshop.html" class="text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Workshop</a>
+                        <a href="navigator.html" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">AI Navigator</a>
                         <a href="index.html#diensten" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Diensten</a>
-                        <a href="index.html#cases" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Cases</a>
+<a href="index.html#cases" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Cases</a>
                         <a href="index.html#contact" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
                     </div>
                 </div>
@@ -341,9 +342,10 @@
                     <h4 class="text-lg font-semibold mb-6">Pagina's</h4>
                     <ul class="space-y-3">
                         <li><a href="index.html" class="text-gray-400 hover:text-white transition duration-300">Home</a></li>
-                        <li><a href="workshop.html" class="text-gray-400 hover:text-white transition duration-300">Workshop</a></li>
-                        <li><a href="index.html#diensten" class="text-gray-400 hover:text-white transition duration-300">Diensten</a></li>
-                        <li><a href="index.html#cases" class="text-gray-400 hover:text-white transition duration-300">Cases</a></li>
+                    <li><a href="workshop.html" class="text-gray-400 hover:text-white transition duration-300">Workshop</a></li>
+                    <li><a href="navigator.html" class="text-gray-400 hover:text-white transition duration-300">AI Navigator</a></li>
+                    <li><a href="index.html#diensten" class="text-gray-400 hover:text-white transition duration-300">Diensten</a></li>
+<li><a href="index.html#cases" class="text-gray-400 hover:text-white transition duration-300">Cases</a></li>
                         <li><a href="index.html#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li>
                     </ul>
                 </div>