Make it nicer

index.html

@@ -57,33 +57,40 @@
     <!-- Hero Section with Vanta.js background -->
     <div id="hero" class="relative h-screen flex items-center justify-center overflow-hidden">
         <div class="absolute inset-0 z-0" id="vanta-bg"></div>
-        <div class="absolute inset-0 z-1 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
+        <div class="absolute inset-0 z-1 bg-gradient-to-b from-black/40 to-black/60"></div>
         <div class="relative z-10 text-center px-4 py-16 sm:px-6 lg:px-8">
-            <h1 class="text-5xl md:text-7xl font-bold text-white mb-6 animate-fadeInUp">
-                <span class="bg-gradient-to-r from-primary-400 to-primary-600 bg-clip-text text-transparent">Zakelijke Vooruitgang</span>
-                <br>Met Praktische AI
-</h1>
-            <p class="text-xl md:text-2xl text-white mb-8 max-w-3xl mx-auto animate-fadeInUp animate-delay-100">
-                87% van onze klanten ziet resultaat in de eerste maand. Laten we samen aan de slag gaan.
-</p>
+            <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-6 animate-fadeInUp">
+                <span class="bg-gradient-to-r from-primary-400 via-primary-500 to-primary-600 bg-clip-text text-transparent">Transformeer Je Bedrijf</span>
+                <br class="hidden md:block">Met Krachtige AI <span class="inline-block">Oplossingen</span>
+            </h1>
+            <p class="text-lg md:text-xl lg:text-2xl text-primary-100 mb-8 max-w-3xl mx-auto animate-fadeInUp animate-delay-100 leading-relaxed">
+                Maak kennis met onze <span class="font-semibold text-white">op maat gemaakte AI-systemen</span> die uw bedrijfsprocessen automatiseren, optimaliseren en revolutioneren.
+            </p>
             <div class="flex flex-col sm:flex-row justify-center gap-4 animate-fadeInUp animate-delay-200">
-                <a href="#contact" class="bg-primary-600 hover:bg-primary-700 text-white font-bold py-4 px-8 rounded-full transition duration-300 transform hover:scale-105 shadow-lg shadow-primary-600/30">
-                    <span class="flex items-center justify-center">
-                        <i data-feather="calendar" class="mr-2"></i>
-                        Plan Een Gesprek
-</span>
+                <a href="#contact" class="bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 text-white font-bold py-3 px-8 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg shadow-primary-600/30 hover:shadow-primary-700/40">
+                    <span class="flex items-center justify-center gap-2">
+                        <i data-feather="calendar" class="w-5 h-5"></i>
+                        Gratis Consultatie
+                    </span>
+                </a>
+                <a href="#diensten" class="bg-white/10 hover:bg-white/20 text-white font-bold py-3 px-8 rounded-lg border border-white/20 transition-all duration-300 transform hover:scale-105">
+                    <span class="flex items-center justify-center gap-2">
+                        <i data-feather="eye" class="w-5 h-5"></i>
+                        Onze Diensten
+                    </span>
                 </a>
             </div>
         </div>
         <div class="absolute bottom-10 left-0 right-0 text-center">
-            <a href="#diensten" class="text-white animate-pulse inline-block">
+            <a href="#diensten" class="text-white/80 hover:text-white transition-all duration-300 inline-block">
                 <div class="flex flex-col items-center">
-                    <span class="text-sm mb-1">See How It Works</span>
-                    <i data-feather="chevron-down" class="w-8 h-8"></i>
+                    <span class="text-xs tracking-wider mb-1">ONTDEK MEER</span>
+                    <div class="animate-bounce">
+                        <i data-feather="chevron-down" class="w-6 h-6"></i>
+                    </div>
                 </div>
             </a>
         </div>
-        <div class="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-gray-50 to-transparent z-20"></div>
     </div>
 <!-- Navigation -->
     <nav class="fixed top-0 left-0 right-0 bg-white/90 backdrop-blur-md shadow-sm z-50">
@@ -125,37 +132,39 @@
             </div>
         </div>
     </div>
-
     <!-- Services Section -->
-    <section id="diensten" class="py-20 bg-gray-50">
+    <section id="diensten" class="py-24 bg-gradient-to-b from-white to-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 AI Diensten</h2>
-                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
-                    Wij bieden complete AI-oplossingen die perfect aansluiten bij uw bedrijfsbehoeften.
+            <div class="text-center mb-20">
+                <span class="inline-block bg-primary-50 text-primary-600 font-medium px-4 py-1 rounded-full mb-4">Onze Expertise</span>
+                <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-4">AI-Oplossingen <span class="text-primary-600">Op Maat</span></h2>
+                <p class="text-lg text-gray-600 max-w-3xl mx-auto leading-relaxed">
+                    Wij ontwikkelen intelligente systemen die uw bedrijfsprocessen transformeren, met bewezen resultaten.
                 </p>
             </div>
             
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-10">
                 <!-- Service 1 -->
-                <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-500 hover:shadow-xl hover:-translate-y-2">
-                    <div class="p-6">
-                        <div class="flex items-center mb-4">
-                            <div class="bg-primary-100 p-3 rounded-full mr-4">
+                <div class="group relative bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-2 border border-gray-100">
+                    <div class="absolute inset-0 bg-gradient-to-br from-white to-primary-50 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
+                    <div class="relative p-8">
+                        <div class="flex items-center mb-6">
+                            <div class="bg-gradient-to-r from-primary-100 to-primary-200 p-4 rounded-full mr-5 shadow-inner">
                                 <i data-feather="message-square" class="text-primary-600 w-6 h-6"></i>
                             </div>
                             <h3 class="text-xl font-bold text-gray-900">Chatbots & Virtuele Assistenten</h3>
                         </div>
-                        <p class="text-gray-600">
-                            Intelligente chatbots die 24/7 klantenservice bieden, vragen beantwoorden en processen automatiseren.
+                        <p class="text-gray-600 mb-6 leading-relaxed">
+                            Geavanceerde conversatie-AI die natuurlijke interacties mogelijk maakt, 24/7 beschikbaar en continu lerend van elke klantinteractie.
                         </p>
+                        <a href="#contact" class="inline-flex items-center text-primary-600 font-semibold hover:text-primary-700 transition-colors duration-300 group/link">
+                            <span>Ontdek de mogelijkheden</span>
+                            <i data-feather="arrow-right" class="ml-2 w-5 h-5 transition-transform duration-300 group-hover/link:translate-x-1"></i>
+                        </a>
                     </div>
-                    <div class="px-6 pb-4">
-                        <a href="#contact" class="text-primary-600 font-medium hover:text-primary-700">Meer informatie →</a>
-                    </div>
+                    <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-primary-400 to-primary-600 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                 </div>
-                
-                <!-- Service 2 -->
+<!-- Service 2 -->
                 <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-500 hover:shadow-xl hover:-translate-y-2">
                     <div class="p-6">
                         <div class="flex items-center mb-4">
@@ -247,56 +256,74 @@
             </div>
         </div>
     </section>
-
     <!-- About Us Section -->
-    <section id="over-ons" class="py-20 bg-gradient-to-b from-gray-50 to-white">
+    <section id="over-ons" class="py-24 bg-gradient-to-b from-gray-50 to-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-16 items-center">
-                <div>
-                    <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Waarom Dutch AI?</h2>
+                <div class="lg:pr-12">
+                    <span class="inline-block bg-primary-50 text-primary-600 font-medium px-4 py-1 rounded-full mb-4">Over Ons</span>
+                    <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-8">Waarom <span class="text-primary-600">Purplicious</span> AI Wizards?</h2>
+                    
                     <div class="space-y-8">
-                        <div>
-                            <h3 class="text-xl font-bold text-gray-900 mb-3">Jouw Voordeel</h3>
-                            <p class="text-lg text-gray-600">
-                                AI verantwoord en begrijpelijk toepassen.
-                            </p>
+                        <div class="flex items-start">
+                            <div class="bg-primary-100 p-3 rounded-full mr-5 flex-shrink-0">
+                                <i data-feather="award" class="text-primary-600 w-5 h-5"></i>
+                            </div>
+                            <div>
+                                <h3 class="text-xl font-bold text-gray-900 mb-2">Jouw Strategisch Voordeel</h3>
+                                <p class="text-gray-600 leading-relaxed">
+                                    Wij vertalen complexe AI-technologie naar tastbare bedrijfsresultaten die direct bijdragen aan uw kernprestaties.
+                                </p>
+                            </div>
                         </div>
-                        <div>
-                            <h3 class="text-xl font-bold text-gray-900 mb-3">Onze Kracht</h3>
-                            <p class="text-lg text-gray-600">
-                                10-30 jaar specialistische ervaring.
-                            </p>
+                        
+                        <div class="flex items-start">
+                            <div class="bg-primary-100 p-3 rounded-full mr-5 flex-shrink-0">
+                                <i data-feather="users" class="text-primary-600 w-5 h-5"></i>
+                            </div>
+                            <div>
+                                <h3 class="text-xl font-bold text-gray-900 mb-2">Onze Unieke Kracht</h3>
+                                <p class="text-gray-600 leading-relaxed">
+                                    Een multidisciplinair team van AI-experts met 10-30 jaar ervaring in zowel techniek als bedrijfskundige toepassingen.
+                                </p>
+                            </div>
                         </div>
-                        <div>
-                            <h3 class="text-xl font-bold text-gray-900 mb-3">Volledige Begeleiding</h3>
-                            <p class="text-lg text-gray-600">
-                                Van strategie tot livegang (kennis, bouw, implementatie).
-                            </p>
+                        
+                        <div class="flex items-start">
+                            <div class="bg-primary-100 p-3 rounded-full mr-5 flex-shrink-0">
+                                <i data-feather="compass" class="text-primary-600 w-5 h-5"></i>
+                            </div>
+                            <div>
+                                <h3 class="text-xl font-bold text-gray-900 mb-2">End-to-End Begeleiding</h3>
+                                <p class="text-gray-600 leading-relaxed">
+                                    Van strategische verkenning tot implementatie en optimalisatie - wij begeleiden u door het hele AI-transformatieproces.
+                                </p>
+                            </div>
                         </div>
                     </div>
-</div>
                 </div>
+                
                 <div class="relative">
-                    <div class="bg-primary-600 rounded-xl aspect-video overflow-hidden shadow-xl">
-                        <img src="http://static.photos/technology/1200x630/42" alt="AI team aan het werk" class="w-full h-full object-cover opacity-90">
+                    <div class="relative rounded-2xl overflow-hidden shadow-2xl aspect-video">
+                        <img src="http://static.photos/technology/1200x630/42" alt="AI team aan het werk" class="w-full h-full object-cover">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black/30 via-black/10 to-transparent"></div>
                     </div>
-                    <div class="absolute -bottom-6 -right-6 bg-white p-6 rounded-xl shadow-lg w-2/3">
+                    <div class="absolute -bottom-6 -right-6 bg-white p-8 rounded-2xl shadow-xl w-2/3 border border-gray-100">
                         <div class="flex items-center">
-                            <div class="bg-primary-100 p-3 rounded-full mr-4">
+                            <div class="bg-gradient-to-r from-primary-100 to-primary-200 p-4 rounded-full mr-5 shadow-inner">
                                 <i data-feather="shield" class="text-primary-600 w-6 h-6"></i>
                             </div>
                             <div>
-                                <h4 class="font-bold text-gray-900">Zekerheid</h4>
-                                <p class="text-sm text-gray-600">Gepaste oplossingen voor uw bedrijf</p>
+                                <h4 class="font-bold text-gray-900 text-lg mb-1">Resultaatgericht</h4>
+                                <p class="text-gray-600 text-sm">Gemiddeld 87% klanttevredenheid in eerste maand</p>
                             </div>
                         </div>
                     </div>
-</div>
+                </div>
             </div>
         </div>
     </section>
-
-    <!-- Case Studies Section -->
+<!-- Case Studies Section -->
     <section id="cases" 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">
@@ -525,14 +552,16 @@
             </div>
         </div>
     </section>
-
-    <!-- Footer -->
-    <footer class="bg-gray-900 text-white pt-16 pb-8">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <!-- Enhanced Footer -->
+    <footer class="bg-gray-900 text-white pt-20 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-2 lg:grid-cols-4 gap-12">
                 <div>
-                    <h3 class="text-xl font-bold mb-6">Purplicious AI</h3>
-                    <p class="text-gray-400 mb-6">
+                    <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">
@@ -591,24 +620,24 @@
                     </ul>
                 </div>
             </div>
-            
-            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+            <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 Purplicious AI. Alle rechten voorbehouden.
+                    &copy; 2023 <span class="text-primary-400">Purplicious AI Wizards</span>. Alle rechten voorbehouden.
                 </p>
-                <div class="flex space-x-6">
-                    <a href="#" class="text-gray-500 hover:text-gray-300 text-sm transition duration-300">Privacybeleid</a>
-                    <a href="#" class="text-gray-500 hover:text-gray-300 text-sm transition duration-300">Algemene Voorwaarden</a>
-                    <a href="#" class="text-gray-500 hover:text-gray-300 text-sm transition duration-300">Cookiebeleid</a>
+                <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>
+                    <a href="#" class="text-gray-500 hover:text-gray-300 text-sm transition duration-300 hover:underline">Cookiebeleid</a>
+                    <a href="#" class="text-gray-500 hover:text-gray-300 text-sm transition duration-300 hover:underline">Sitemap</a>
                 </div>
             </div>
-        </div>
+</div>
     </footer>
-    <style>
+        <style>
         @keyframes fadeInUp {
             from {
                 opacity: 0;
-                transform: translateY(20px);
+                transform: translateY(30px);
             }
             to {
                 opacity: 1;
@@ -616,75 +645,129 @@
             }
         }
         .animate-fadeInUp {
-            animation: fadeInUp 0.8s ease-out forwards;
+            animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
         }
         .animate-delay-100 {
-            animation-delay: 0.1s;
+            animation-delay: 0.15s;
         }
         .animate-delay-200 {
-            animation-delay: 0.2s;
+            animation-delay: 0.3s;
+        }
+        .animate-delay-300 {
+            animation-delay: 0.45s;
+        }
+        
+        /* Smooth scroll behavior */
+        html {
+            scroll-behavior: smooth;
+        }
+        
+        /* Custom gradients */
+        .gradient-text {
+            background-clip: text;
+            -webkit-background-clip: text;
+            color: transparent;
         }
     </style>
+        <script>
+        // Enhanced Vanta.js background with dynamic parameters
+        if(document.getElementById('vanta-bg')) {
+            VANTA.GLOBE({
+                el: "#vanta-bg",
+                mouseControls: true,
+                touchControls: true,
+                gyroControls: false,
+                minHeight: 200.00,
+                minWidth: 200.00,
+                scale: 1.30,
+                scaleMobile: 1.10,
+                color: 0x8b5cf6,
+                color2: 0x6d28d9,
+                backgroundColor: 0x0f172a,
+                size: 1.50,
+                speed: 1.0
+            });
+        }
+        // Enhanced mobile menu toggle with animations
+        if(document.querySelector('.mobile-menu-button')) {
+            document.querySelector('.mobile-menu-button').addEventListener('click', function() {
+                const menu = document.querySelector('.mobile-menu');
+                menu.classList.remove('hidden');
+                anime({
+                    targets: menu,
+                    opacity: [0, 1],
+                    duration: 300,
+                    easing: 'easeInOutQuad'
+                });
+            });
 
-    <script>
-        // Initialize Vanta.js background with more engaging settings
-        VANTA.GLOBE({
-            el: "#vanta-bg",
-            mouseControls: true,
-            touchControls: true,
-            gyroControls: false,
-            minHeight: 200.00,
-            minWidth: 200.00,
-            scale: 1.20,
-            scaleMobile: 1.20,
-            color: 0x8b5cf6,
-            backgroundColor: 0x111827,
-            size: 1.30,
-            speed: 0.8
-        });
-// Mobile menu toggle
-        document.querySelector('.mobile-menu-button').addEventListener('click', function() {
-            document.querySelector('.mobile-menu').classList.remove('hidden');
-        });
-
-        document.querySelector('.mobile-menu-close').addEventListener('click', function() {
-            document.querySelector('.mobile-menu').classList.add('hidden');
-        });
+            document.querySelector('.mobile-menu-close').addEventListener('click', function() {
+                const menu = document.querySelector('.mobile-menu');
+                anime({
+                    targets: menu,
+                    opacity: [1, 0],
+                    duration: 200,
+                    easing: 'easeInQuad',
+                    complete: function() {
+                        menu.classList.add('hidden');
+                    }
+                });
+            });
+        }
 
-        // FAQ toggle functionality
-        document.querySelectorAll('.faq-toggle').forEach(button => {
-            button.addEventListener('click', () => {
-                const content = button.nextElementSibling;
-                const icon = button.querySelector('i');
-                
-                // Toggle content
-                content.classList.toggle('hidden');
-                
-                // Rotate icon
-                if (content.classList.contains('hidden')) {
-                    icon.style.transform = 'rotate(0deg)';
-                } else {
-                    icon.style.transform = 'rotate(180deg)';
-                }
+        // Enhanced FAQ toggle with animations
+        if(document.querySelectorAll('.faq-toggle').length > 0) {
+            document.querySelectorAll('.faq-toggle').forEach(button => {
+                button.addEventListener('click', () => {
+                    const content = button.nextElementSibling;
+                    const icon = button.querySelector('i');
+                    
+                    if(content.classList.contains('hidden')) {
+                        content.classList.remove('hidden');
+                        anime({
+                            targets: content,
+                            opacity: [0, 1],
+                            height: ['0px', 'auto'],
+                            duration: 300,
+                            easing: 'easeOutQuad'
+                        });
+                        icon.style.transform = 'rotate(180deg)';
+                    } else {
+                        anime({
+                            targets: content,
+                            opacity: [1, 0],
+                            height: ['auto', '0px'],
+                            duration: 250,
+                            easing: 'easeInQuad',
+                            complete: function() {
+                                content.classList.add('hidden');
+                            }
+                        });
+                        icon.style.transform = 'rotate(0deg)';
+                    }
+                });
             });
+        }
+
+        // Initialize feather icons with size options
+        feather.replace({
+            width: 24,
+            height: 24,
+            'stroke-width': 1.5
         });
 
-        // Smooth scrolling for anchor links
-        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-            anchor.addEventListener('click', function (e) {
-                e.preventDefault();
+        // Add scroll animations
+        window.addEventListener('scroll', function() {
+            const elements = document.querySelectorAll('.scroll-animate');
+            elements.forEach(el => {
+                const elementPosition = el.getBoundingClientRect().top;
+                const screenPosition = window.innerHeight / 1.2;
                 
-                document.querySelector(this.getAttribute('href')).scrollIntoView({
-                    behavior: 'smooth'
-                });
-                
-                // Close mobile menu if open
-                document.querySelector('.mobile-menu').classList.add('hidden');
+                if(elementPosition < screenPosition) {
+                    el.classList.add('animate-fadeInUp');
+                }
             });
         });
-
-        // Initialize feather icons
-        feather.replace();
     </script>
 </body>
 </html>