From d904d7beae2fc0fa21363348852994c752d9cdf7 Mon Sep 17 00:00:00 2001
From: Alvin <524715@vistacollege.nl>
Date: Wed, 4 Jun 2025 11:22:41 +0200
Subject: [PATCH] Revamp index.html, styles.css, and script.js for Tuning Pro
 website. Update branding to Dutch language, enhance navbar and sections with
 new color schemes, and improve button functionalities. Implement dynamic
 content in modals and refine form handling for better user experience.

---
 css/styles.css | 116 ++++++++++++++++++++++++++--
 index.html     | 205 +++++++++++++++++++++++++++----------------------
 js/script.js   | 120 ++++++++---------------------
 3 files changed, 255 insertions(+), 186 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 3200c97..8a48058 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -323,18 +323,18 @@ body {
 
 /* Navbar Styles */
 .glass-nav {
-    background: rgba(139, 92, 246, 0.1);
+    background: rgba(17, 24, 39, 0.8);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .glass-nav:hover {
-    background: rgba(139, 92, 246, 0.15);
+    background: rgba(17, 24, 39, 0.9);
 }
 
 .navbar-brand img {
-    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.5));
+    filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.5));
 }
 
 .nav-link {
@@ -354,7 +354,7 @@ body {
     left: 0;
     width: 100%;
     height: 2px;
-    background: linear-gradient(to right, #8B5CF6, #EC4899);
+    background: linear-gradient(to right, #ef4444, #f97316);
     transform: scaleX(1);
     transition: transform 0.3s ease;
 }
@@ -366,7 +366,7 @@ body {
     left: 0;
     width: 100%;
     height: 2px;
-    background: linear-gradient(to right, #8B5CF6, #EC4899);
+    background: linear-gradient(to right, #ef4444, #f97316);
     transform: scaleX(0);
     transition: transform 0.3s ease;
     transform-origin: right;
@@ -397,14 +397,82 @@ body {
 }
 
 .navbar.scrolled {
-    background: rgba(139, 92, 246, 0.95);
+    background: rgba(17, 24, 39, 0.95);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+/* Modal Styles */
+.modal-content {
+    background: #1f2937;
+    border: 1px solid #ef4444;
+}
+
+.modal-header {
+    border-bottom: 1px solid #374151;
+}
+
+.modal-footer {
+    border-top: 1px solid #374151;
+}
+
+/* Form Styles */
+.form-control {
+    background-color: #374151;
+    border-color: #4b5563;
+    color: #fff;
+}
+
+.form-control:focus {
+    background-color: #374151;
+    border-color: #ef4444;
+    color: #fff;
+    box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.25);
+}
+
+/* Button Styles */
+.btn-primary {
+    background: linear-gradient(to right, #ef4444, #f97316);
+    border: none;
+}
+
+.btn-primary:hover {
+    background: linear-gradient(to right, #dc2626, #ea580c);
+}
+
+.btn-outline-secondary {
+    border-color: #ef4444;
+    color: #ef4444;
+}
+
+.btn-outline-secondary:hover {
+    background: linear-gradient(to right, #ef4444, #f97316);
+    border-color: transparent;
+    color: #fff;
+}
+
+/* Search Results */
+.search-result-item {
+    transition: all 0.3s ease;
+}
+
+.search-result-item:hover {
+    transform: translateX(5px);
+}
+
+/* Customer Details */
+.interaction-item {
+    transition: all 0.3s ease;
+}
+
+.interaction-item:hover {
+    transform: translateY(-2px);
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 
 /* Mobile menu styles */
 @media (max-width: 991.98px) {
     .navbar-collapse {
-        background: rgba(139, 92, 246, 0.95);
+        background: rgba(17, 24, 39, 0.95);
         backdrop-filter: blur(10px);
         -webkit-backdrop-filter: blur(10px);
         border-radius: 0.5rem;
@@ -424,4 +492,38 @@ body {
     .nav-link::after {
         display: none;
     }
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.fade-in {
+    animation: fadeIn 0.3s ease-out;
+}
+
+/* Scrollbar Styles */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #1f2937;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #ef4444;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #dc2626;
 } 
\ No newline at end of file
diff --git a/index.html b/index.html
index 445f500..779f72e 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="nl">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Website Template</title>
+    <title>Auto Tuning Pro</title>
     <!-- Favicon -->
     <link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
     <!-- Bootstrap CSS -->
@@ -15,52 +15,46 @@
     <!-- Custom JS -->
     <script src="js/tailwind.config.js"></script>
 </head>
-<body class="bg-gradient-to-br from-gray-100 to-blue-50">
+<body class="bg-gradient-to-br from-gray-900 to-gray-800">
     <!-- Navigation -->
     <nav class="navbar navbar-expand-lg navbar-dark fixed-top transition-all duration-300 hover:shadow-lg glass-nav">
         <div class="container">
             <a class="navbar-brand hover:scale-110 transition-transform duration-300 flex items-center" href="#">
                 <img src="assets/favicon.svg" alt="Logo" class="h-8 w-8 mr-2 animate-spin-slow">
-                <span class="bg-gradient-to-r from-purple-400 to-pink-400 text-transparent bg-clip-text font-bold">Your Brand</span>
+                <span class="bg-gradient-to-r from-red-500 to-orange-500 text-transparent bg-clip-text font-bold">TUNING PRO</span>
             </a>
-            <button class="navbar-toggler border-0 focus:ring-2 focus:ring-purple-500 transition-all duration-300" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+            <button class="navbar-toggler border-0 focus:ring-2 focus:ring-red-500 transition-all duration-300" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarNav">
                 <ul class="navbar-nav ms-auto">
                     <li class="nav-item">
-                        <a class="nav-link active hover:text-pink-300 transition-all duration-300 relative group" href="#home">
+                        <a class="nav-link active hover:text-red-400 transition-all duration-300 relative group" href="#home">
                             Home
-                            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 to-pink-400 transition-all duration-300 group-hover:w-full"></span>
+                            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-red-500 to-orange-500 transition-all duration-300 group-hover:w-full"></span>
                         </a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link hover:text-pink-300 transition-all duration-300 relative group" href="#about">
-                            About
-                            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 to-pink-400 transition-all duration-300 group-hover:w-full"></span>
+                        <a class="nav-link hover:text-red-400 transition-all duration-300 relative group" href="#services">
+                            Diensten
+                            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-red-500 to-orange-500 transition-all duration-300 group-hover:w-full"></span>
                         </a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link hover:text-pink-300 transition-all duration-300 relative group" href="#services">
-                            Services
-                            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 to-pink-400 transition-all duration-300 group-hover:w-full"></span>
+                        <a class="nav-link hover:text-red-400 transition-all duration-300 relative group" href="#gallery">
+                            Galerij
+                            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-red-500 to-orange-500 transition-all duration-300 group-hover:w-full"></span>
                         </a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link hover:text-pink-300 transition-all duration-300 relative group" href="#portfolio">
-                            Portfolio
-                            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 to-pink-400 transition-all duration-300 group-hover:w-full"></span>
-                        </a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link hover:text-pink-300 transition-all duration-300 relative group" href="#contact">
+                        <a class="nav-link hover:text-red-400 transition-all duration-300 relative group" href="#contact">
                             Contact
-                            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-purple-400 to-pink-400 transition-all duration-300 group-hover:w-full"></span>
+                            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-red-500 to-orange-500 transition-all duration-300 group-hover:w-full"></span>
                         </a>
                     </li>
                     <li class="nav-item ms-3">
-                        <button class="btn btn-sm btn-primary bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl">
-                            Get Started
+                        <button class="btn btn-sm btn-primary bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-700 hover:to-orange-700 hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl">
+                            Afspraak Maken
                         </button>
                     </li>
                 </ul>
@@ -70,90 +64,100 @@
 
     <!-- Hero Section -->
     <section id="home" class="py-5 min-h-screen flex items-center relative overflow-hidden">
-        <div class="absolute inset-0 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 opacity-20"></div>
+        <div class="absolute inset-0 bg-gradient-to-br from-red-900 via-gray-900 to-orange-900 opacity-20"></div>
         <div class="container relative z-10">
             <div class="row">
                 <div class="col-md-8 mx-auto text-center">
-                    <h1 class="text-5xl font-bold mb-4 animate-float bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">Welcome to Your Website</h1>
-                    <p class="text-gray-700 mb-8 text-xl animate-pulse-slow">A clean, modern template for your next project</p>
+                    <h1 class="text-6xl font-bold mb-4 animate-float bg-gradient-to-r from-red-500 to-orange-500 text-transparent bg-clip-text">ONTKETEN JE AUTO</h1>
+                    <p class="text-gray-300 mb-8 text-xl animate-pulse-slow">Professionele ECU Tuning & Prestatieverbetering</p>
                     <div class="space-x-4">
-                        <button class="btn btn-primary bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 hover:scale-110 transition-transform duration-300 shadow-lg hover:shadow-xl">Get Started</button>
-                        <button class="btn btn-outline-secondary hover:bg-gradient-to-r hover:from-purple-600 hover:to-pink-600 hover:text-white transition-all duration-300">Learn More</button>
+                        <button class="btn btn-primary bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-700 hover:to-orange-700 hover:scale-110 transition-transform duration-300 shadow-lg hover:shadow-xl">
+                            Start Nu
+                        </button>
+                        <button class="btn btn-outline-secondary hover:bg-gradient-to-r hover:from-red-600 hover:to-orange-600 hover:text-white transition-all duration-300">
+                            Bekijk Galerij
+                        </button>
                     </div>
                 </div>
             </div>
         </div>
     </section>
 
-    <!-- About Section -->
-    <section id="about" class="py-5 bg-gradient-to-br from-white to-blue-50 relative">
-        <div class="container">
-            <h2 class="text-4xl font-bold text-center mb-8 hover:scale-105 transition-transform duration-300 bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">About Us</h2>
-            <div class="row">
-                <div class="col-md-6 transform hover:scale-105 transition-all duration-300">
-                    <p class="text-gray-700 text-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-                </div>
-                <div class="col-md-6 transform hover:scale-105 transition-all duration-300">
-                    <p class="text-gray-700 text-lg">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-                </div>
-            </div>
-        </div>
-    </section>
-
     <!-- Services Section -->
-    <section id="services" class="py-5 relative bg-gradient-to-br from-blue-50 to-purple-50">
+    <section id="services" class="py-5 relative bg-gradient-to-br from-gray-900 to-gray-800">
         <div class="container">
-            <h2 class="text-4xl font-bold text-center mb-8 hover:scale-105 transition-transform duration-300 bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">Our Services</h2>
+            <h2 class="text-4xl font-bold text-center mb-12 hover:scale-105 transition-transform duration-300 bg-gradient-to-r from-red-500 to-orange-500 text-transparent bg-clip-text">Onze Diensten</h2>
             <div class="row">
                 <div class="col-md-4 mb-4">
-                    <div class="bg-white rounded-lg shadow-md p-6 transform hover:scale-105 transition-all duration-300 hover:shadow-xl border-t-4 border-purple-500">
+                    <div class="bg-gray-800 rounded-lg shadow-md p-6 transform hover:scale-105 transition-all duration-300 hover:shadow-xl border-t-4 border-red-500">
                         <div class="text-4xl mb-4 animate-bounce-slow">🚀</div>
-                        <h3 class="text-xl font-bold mb-3 text-purple-600">Service 1</h3>
-                        <p class="text-gray-600">Description of your first service goes here.</p>
+                        <h3 class="text-xl font-bold mb-3 text-red-500">ECU Tuning</h3>
+                        <p class="text-gray-400">Ontgrendel het ware potentieel van je motor met onze professionele ECU-herprogrammering.</p>
+                        <ul class="mt-4 text-gray-400 space-y-2">
+                            <li>• Vermogen & Koppel Verhoging</li>
+                            <li>• Brandstofverbruik Optimalisatie</li>
+                            <li>• Gasrespons Verbetering</li>
+                        </ul>
                     </div>
                 </div>
                 <div class="col-md-4 mb-4">
-                    <div class="bg-white rounded-lg shadow-md p-6 transform hover:scale-105 transition-all duration-300 hover:shadow-xl border-t-4 border-pink-500">
-                        <div class="text-4xl mb-4 animate-bounce-slow">💡</div>
-                        <h3 class="text-xl font-bold mb-3 text-pink-600">Service 2</h3>
-                        <p class="text-gray-600">Description of your second service goes here.</p>
-                    </div>
-                </div>
-                <div class="col-md-4 mb-4">
-                    <div class="bg-white rounded-lg shadow-md p-6 transform hover:scale-105 transition-all duration-300 hover:shadow-xl border-t-4 border-indigo-500">
+                    <div class="bg-gray-800 rounded-lg shadow-md p-6 transform hover:scale-105 transition-all duration-300 hover:shadow-xl border-t-4 border-orange-500">
                         <div class="text-4xl mb-4 animate-bounce-slow">⚡</div>
-                        <h3 class="text-xl font-bold mb-3 text-indigo-600">Service 3</h3>
-                        <p class="text-gray-600">Description of your third service goes here.</p>
+                        <h3 class="text-xl font-bold mb-3 text-orange-500">Prestatie Onderdelen</h3>
+                        <p class="text-gray-400">Hoogwaardige tuning onderdelen om de prestaties van je voertuig te verbeteren.</p>
+                        <ul class="mt-4 text-gray-400 space-y-2">
+                            <li>• Uitlaatsystemen</li>
+                            <li>• Luchtfilters</li>
+                            <li>• Vering Upgrades</li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="col-md-4 mb-4">
+                    <div class="bg-gray-800 rounded-lg shadow-md p-6 transform hover:scale-105 transition-all duration-300 hover:shadow-xl border-t-4 border-red-500">
+                        <div class="text-4xl mb-4 animate-bounce-slow">🔧</div>
+                        <h3 class="text-xl font-bold mb-3 text-red-500">Maatwerk Oplossingen</h3>
+                        <p class="text-gray-400">Op maat gemaakte aanpassingen die aansluiten bij jouw specifieke wensen.</p>
+                        <ul class="mt-4 text-gray-400 space-y-2">
+                            <li>• Vermogensmeting</li>
+                            <li>• Custom Mapping</li>
+                            <li>• Prestatie Analyse</li>
+                        </ul>
                     </div>
                 </div>
             </div>
         </div>
     </section>
 
-    <!-- Portfolio Section -->
-    <section id="portfolio" class="py-5 bg-gradient-to-br from-purple-50 to-pink-50 relative">
+    <!-- Gallery Section -->
+    <section id="gallery" class="py-5 relative bg-gradient-to-br from-gray-800 to-gray-900">
         <div class="container">
-            <h2 class="text-4xl font-bold text-center mb-8 hover:scale-105 transition-transform duration-300 bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">Portfolio</h2>
+            <h2 class="text-4xl font-bold text-center mb-12 hover:scale-105 transition-transform duration-300 bg-gradient-to-r from-red-500 to-orange-500 text-transparent bg-clip-text">Ons Werk</h2>
             <div class="row">
                 <div class="col-md-4 mb-4">
-                    <div class="bg-white rounded-lg p-4 transform hover:scale-105 transition-all duration-300 hover:shadow-xl">
-                        <div class="aspect-w-16 aspect-h-9 bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 rounded-lg mb-3 animate-pulse-slow"></div>
-                        <h3 class="text-xl font-bold mb-2 text-purple-600">Project 1</h3>
-                        <p class="text-gray-600">Brief description of your first project.</p>
+                    <div class="bg-gray-800 rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300 hover:shadow-xl">
+                        <div class="aspect-w-16 aspect-h-9 bg-gradient-to-r from-red-500 via-orange-500 to-red-500 rounded-lg mb-3 animate-pulse-slow"></div>
+                        <div class="p-4">
+                            <h3 class="text-xl font-bold mb-2 text-red-500">BMW M3 Stage 2</h3>
+                            <p class="text-gray-400">Complete prestatie upgrade met custom mapping</p>
+                        </div>
                     </div>
                 </div>
                 <div class="col-md-4 mb-4">
-                    <div class="bg-white rounded-lg p-4 transform hover:scale-105 transition-all duration-300 hover:shadow-xl">
-                        <div class="aspect-w-16 aspect-h-9 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500 rounded-lg mb-3 animate-pulse-slow"></div>
-                        <h3 class="text-xl font-bold mb-2 text-indigo-600">Project 2</h3>
-                        <p class="text-gray-600">Brief description of your second project.</p>
+                    <div class="bg-gray-800 rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300 hover:shadow-xl">
+                        <div class="aspect-w-16 aspect-h-9 bg-gradient-to-r from-orange-500 via-red-500 to-orange-500 rounded-lg mb-3 animate-pulse-slow"></div>
+                        <div class="p-4">
+                            <h3 class="text-xl font-bold mb-2 text-orange-500">Audi RS3 Tuning</h3>
+                            <p class="text-gray-400">ECU herprogrammering en uitlaatsysteem upgrade</p>
+                        </div>
                     </div>
                 </div>
                 <div class="col-md-4 mb-4">
-                    <div class="bg-white rounded-lg p-4 transform hover:scale-105 transition-all duration-300 hover:shadow-xl">
-                        <div class="aspect-w-16 aspect-h-9 bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 rounded-lg mb-3 animate-pulse-slow"></div>
-                        <h3 class="text-xl font-bold mb-2 text-pink-600">Project 3</h3>
-                        <p class="text-gray-600">Brief description of your third project.</p>
+                    <div class="bg-gray-800 rounded-lg overflow-hidden transform hover:scale-105 transition-all duration-300 hover:shadow-xl">
+                        <div class="aspect-w-16 aspect-h-9 bg-gradient-to-r from-red-500 via-orange-500 to-red-500 rounded-lg mb-3 animate-pulse-slow"></div>
+                        <div class="p-4">
+                            <h3 class="text-xl font-bold mb-2 text-red-500">Mercedes AMG Pakket</h3>
+                            <p class="text-gray-400">Volledig prestatie verbeteringspakket</p>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -161,25 +165,29 @@
     </section>
 
     <!-- Contact Section -->
-    <section id="contact" class="py-5 relative bg-gradient-to-br from-blue-50 to-indigo-50">
+    <section id="contact" class="py-5 relative bg-gradient-to-br from-gray-900 to-gray-800">
         <div class="container">
-            <h2 class="text-4xl font-bold text-center mb-8 hover:scale-105 transition-transform duration-300 bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">Contact Us</h2>
+            <h2 class="text-4xl font-bold text-center mb-12 hover:scale-105 transition-transform duration-300 bg-gradient-to-r from-red-500 to-orange-500 text-transparent bg-clip-text">Neem Contact Op</h2>
             <div class="row">
                 <div class="col-md-6 mx-auto">
-                    <form class="bg-white rounded-lg shadow-md p-6 transform hover:scale-105 transition-all duration-300 hover:shadow-xl border-t-4 border-purple-500">
+                    <form class="bg-gray-800 rounded-lg shadow-md p-6 transform hover:scale-105 transition-all duration-300 hover:shadow-xl border-t-4 border-red-500">
                         <div class="mb-3">
-                            <label for="name" class="form-label text-purple-600">Name</label>
-                            <input type="text" class="form-control focus:ring-2 focus:ring-purple-500 transition-all duration-300" id="name" placeholder="Your name">
+                            <label for="name" class="form-label text-gray-300">Naam</label>
+                            <input type="text" class="form-control bg-gray-700 border-gray-600 text-white focus:ring-2 focus:ring-red-500 transition-all duration-300" id="name" placeholder="Uw naam">
                         </div>
                         <div class="mb-3">
-                            <label for="email" class="form-label text-purple-600">Email</label>
-                            <input type="email" class="form-control focus:ring-2 focus:ring-purple-500 transition-all duration-300" id="email" placeholder="Your email">
+                            <label for="email" class="form-label text-gray-300">E-mail</label>
+                            <input type="email" class="form-control bg-gray-700 border-gray-600 text-white focus:ring-2 focus:ring-red-500 transition-all duration-300" id="email" placeholder="Uw e-mailadres">
                         </div>
                         <div class="mb-3">
-                            <label for="message" class="form-label text-purple-600">Message</label>
-                            <textarea class="form-control focus:ring-2 focus:ring-purple-500 transition-all duration-300" id="message" rows="4" placeholder="Your message"></textarea>
+                            <label for="car" class="form-label text-gray-300">Voertuig</label>
+                            <input type="text" class="form-control bg-gray-700 border-gray-600 text-white focus:ring-2 focus:ring-red-500 transition-all duration-300" id="car" placeholder="Uw voertuigmodel">
                         </div>
-                        <button type="submit" class="btn btn-primary bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 hover:scale-110 transition-transform duration-300 shadow-lg hover:shadow-xl">Send Message</button>
+                        <div class="mb-3">
+                            <label for="message" class="form-label text-gray-300">Bericht</label>
+                            <textarea class="form-control bg-gray-700 border-gray-600 text-white focus:ring-2 focus:ring-red-500 transition-all duration-300" id="message" rows="4" placeholder="Wat zoekt u?"></textarea>
+                        </div>
+                        <button type="submit" class="btn btn-primary bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-700 hover:to-orange-700 hover:scale-110 transition-transform duration-300 shadow-lg hover:shadow-xl">Verstuur Bericht</button>
                     </form>
                 </div>
             </div>
@@ -187,16 +195,33 @@
     </section>
 
     <!-- Footer -->
-    <footer class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white py-4 relative">
+    <footer class="bg-gradient-to-r from-gray-900 to-gray-800 text-white py-8 relative border-t border-gray-700">
         <div class="container">
             <div class="row">
-                <div class="col-md-6">
-                    <p class="hover:text-pink-300 transition-colors duration-300">&copy; 2024 Your Brand. All rights reserved.</p>
+                <div class="col-md-4">
+                    <h3 class="text-xl font-bold mb-4 bg-gradient-to-r from-red-500 to-orange-500 text-transparent bg-clip-text">TUNING PRO</h3>
+                    <p class="text-gray-400">Professionele auto tuning diensten voor prestatie liefhebbers.</p>
                 </div>
-                <div class="col-md-6 text-end">
-                    <a href="#" class="text-white me-3 hover:text-pink-300 transition-colors duration-300">Privacy Policy</a>
-                    <a href="#" class="text-white me-3 hover:text-pink-300 transition-colors duration-300">Terms of Service</a>
-                    <a href="#" class="text-white hover:text-pink-300 transition-colors duration-300">Contact</a>
+                <div class="col-md-4">
+                    <h4 class="text-lg font-semibold mb-4 text-gray-300">Snelle Links</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#services" class="text-gray-400 hover:text-red-400 transition-colors duration-300">Diensten</a></li>
+                        <li><a href="#gallery" class="text-gray-400 hover:text-red-400 transition-colors duration-300">Galerij</a></li>
+                        <li><a href="#contact" class="text-gray-400 hover:text-red-400 transition-colors duration-300">Contact</a></li>
+                    </ul>
+                </div>
+                <div class="col-md-4">
+                    <h4 class="text-lg font-semibold mb-4 text-gray-300">Contactgegevens</h4>
+                    <ul class="space-y-2 text-gray-400">
+                        <li>📍 Locatie, Stad</li>
+                        <li>📞 +31612345678</li>
+                        <li>✉️ info@tuningpro.nl</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="row mt-8">
+                <div class="col-12 text-center">
+                    <p class="text-gray-500">&copy; 2024 Tuning Pro. Alle rechten voorbehouden.</p>
                 </div>
             </div>
         </div>
diff --git a/js/script.js b/js/script.js
index ca8cd1e..ee7e192 100644
--- a/js/script.js
+++ b/js/script.js
@@ -26,18 +26,18 @@ document.addEventListener('DOMContentLoaded', () => {
             const modal = document.createElement('div');
             modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 fade-in';
             modal.innerHTML = `
-                <div class="bg-white rounded-lg p-8 max-w-md w-full mx-4 transform hover:scale-105 transition-all duration-300">
-                    <h3 class="text-2xl font-bold mb-4 bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">Get Started</h3>
-                    <p class="text-gray-600 mb-6">Choose how you'd like to get started with our services:</p>
+                <div class="bg-gray-800 rounded-lg p-8 max-w-md w-full mx-4 transform hover:scale-105 transition-all duration-300 border border-red-500">
+                    <h3 class="text-2xl font-bold mb-4 bg-gradient-to-r from-red-500 to-orange-500 text-transparent bg-clip-text">Boek Je Tuning</h3>
+                    <p class="text-gray-300 mb-6">Kies je gewenste dienst:</p>
                     <div class="space-y-4">
-                        <button class="w-full btn btn-primary bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 transition-all duration-300">
-                            Start Free Trial
+                        <button class="w-full btn btn-primary bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-700 hover:to-orange-700 transition-all duration-300">
+                            ECU Tuning
                         </button>
-                        <button class="w-full btn btn-outline-secondary hover:bg-gradient-to-r hover:from-purple-600 hover:to-pink-600 hover:text-white transition-all duration-300">
-                            Schedule Demo
+                        <button class="w-full btn btn-outline-secondary hover:bg-gradient-to-r hover:from-red-600 hover:to-orange-600 hover:text-white transition-all duration-300">
+                            Prestatie Onderdelen
                         </button>
-                        <button class="w-full btn btn-outline-secondary hover:bg-gradient-to-r hover:from-purple-600 hover:to-pink-600 hover:text-white transition-all duration-300">
-                            Contact Sales
+                        <button class="w-full btn btn-outline-secondary hover:bg-gradient-to-r hover:from-red-600 hover:to-orange-600 hover:text-white transition-all duration-300">
+                            Maatwerk Pakket
                         </button>
                     </div>
                     <button class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 transition-colors duration-300" onclick="this.closest('.fixed').remove()">
@@ -61,18 +61,12 @@ document.addEventListener('DOMContentLoaded', () => {
             modalButtons.forEach(button => {
                 button.addEventListener('click', () => {
                     const action = button.textContent.trim();
-                    switch(action) {
-                        case 'Start Free Trial':
-                            window.location.href = '#contact';
-                            break;
-                        case 'Schedule Demo':
-                            alert('Demo scheduling feature coming soon!');
-                            break;
-                        case 'Contact Sales':
-                            window.location.href = '#contact';
-                            break;
-                    }
+                    // Scroll to contact form and populate service type
+                    const contactForm = document.querySelector('#contact form');
+                    const messageField = contactForm.querySelector('#message');
+                    messageField.value = `Ik ben geïnteresseerd in: ${action}`;
                     modal.remove();
+                    document.querySelector('#contact').scrollIntoView({ behavior: 'smooth' });
                 });
             });
         });
@@ -84,7 +78,7 @@ document.addEventListener('DOMContentLoaded', () => {
         contactForm.addEventListener('submit', (e) => {
             e.preventDefault();
             // Add your form submission logic here
-            alert('Thank you for your message! This is a demo form.');
+            alert('Bedankt voor je interesse! We nemen zo snel mogelijk contact met je op.');
             contactForm.reset();
         });
     }
@@ -132,11 +126,11 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     // Add hover effects to cards
-    const cards = document.querySelectorAll('.card, .bg-white.rounded-lg');
+    const cards = document.querySelectorAll('.card, .bg-gray-800.rounded-lg');
     cards.forEach(card => {
         card.addEventListener('mouseenter', () => {
             card.style.transform = 'translateY(-5px)';
-            card.style.boxShadow = '0 10px 15px -3px rgba(0,0,0,0.1)';
+            card.style.boxShadow = '0 10px 15px -3px rgba(0,0,0,0.3)';
         });
         card.addEventListener('mouseleave', () => {
             card.style.transform = 'translateY(0)';
@@ -144,72 +138,6 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     });
 
-    // Learn More button functionality
-    const learnMoreBtn = document.querySelector('.btn-outline-secondary');
-    if (learnMoreBtn) {
-        learnMoreBtn.addEventListener('click', () => {
-            // Create and show modal
-            const modal = document.createElement('div');
-            modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 fade-in';
-            modal.innerHTML = `
-                <div class="bg-white rounded-lg p-8 max-w-2xl w-full mx-4 transform hover:scale-105 transition-all duration-300">
-                    <h3 class="text-3xl font-bold mb-6 bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">About Our Services</h3>
-                    <div class="space-y-6">
-                        <div class="flex items-start space-x-4">
-                            <div class="flex-shrink-0 w-12 h-12 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg flex items-center justify-center text-white">
-                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
-                                </svg>
-                            </div>
-                            <div>
-                                <h4 class="text-xl font-semibold mb-2">Lightning Fast Performance</h4>
-                                <p class="text-gray-600">Our platform is optimized for speed and efficiency, ensuring your business operations run smoothly without any delays.</p>
-                            </div>
-                        </div>
-                        <div class="flex items-start space-x-4">
-                            <div class="flex-shrink-0 w-12 h-12 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg flex items-center justify-center text-white">
-                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
-                                </svg>
-                            </div>
-                            <div>
-                                <h4 class="text-xl font-semibold mb-2">Enterprise-Grade Security</h4>
-                                <p class="text-gray-600">Your data is protected with state-of-the-art encryption and security measures, ensuring complete privacy and compliance.</p>
-                            </div>
-                        </div>
-                        <div class="flex items-start space-x-4">
-                            <div class="flex-shrink-0 w-12 h-12 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg flex items-center justify-center text-white">
-                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"></path>
-                                </svg>
-                            </div>
-                            <div>
-                                <h4 class="text-xl font-semibold mb-2">Cloud Integration</h4>
-                                <p class="text-gray-600">Seamlessly connect with your existing cloud infrastructure and scale your operations as needed.</p>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="mt-8 flex justify-end space-x-4">
-                        <button class="btn btn-outline-secondary hover:bg-gradient-to-r hover:from-purple-600 hover:to-pink-600 hover:text-white transition-all duration-300" onclick="this.closest('.fixed').remove()">
-                            Close
-                        </button>
-                        <button class="btn btn-primary bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 transition-all duration-300" onclick="window.location.href='#contact'">
-                            Get Started Now
-                        </button>
-                    </div>
-                </div>
-            `;
-            document.body.appendChild(modal);
-
-            // Add click event to close modal when clicking outside
-            modal.addEventListener('click', (e) => {
-                if (e.target === modal) {
-                    modal.remove();
-                }
-            });
-        });
-    }
-
     // Navbar scroll effect
     const navbar = document.querySelector('.navbar');
     window.addEventListener('scroll', () => {
@@ -219,4 +147,18 @@ document.addEventListener('DOMContentLoaded', () => {
             navbar.classList.remove('scrolled');
         }
     });
+
+    // Gallery image hover effects
+    const galleryItems = document.querySelectorAll('#gallery .col-md-4');
+    galleryItems.forEach(item => {
+        item.addEventListener('mouseenter', () => {
+            const image = item.querySelector('.aspect-w-16');
+            image.style.transform = 'scale(1.05)';
+            image.style.transition = 'transform 0.3s ease-in-out';
+        });
+        item.addEventListener('mouseleave', () => {
+            const image = item.querySelector('.aspect-w-16');
+            image.style.transform = 'scale(1)';
+        });
+    });
 });