|
|
<!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"> |
|
|
|
|
|
<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="scribo.html" class="text-gray-700 hover:text-primary-600 px-3 py-2 rounded-md text-sm font-medium">Scribo</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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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 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"> |
|
|
© 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> |
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
if(document.querySelector('.mobile-menu-button')) { |
|
|
document.querySelector('.mobile-menu-button').addEventListener('click', function() { |
|
|
document.querySelector('.mobile-menu').classList.toggle('hidden'); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
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> |
