alvin/challenge-11
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/challenge-11.git synced 2026-03-06 02:56:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Remove index.html, styles.css, favicon.svg, script.js, and tailwind.config.js files to streamline the project and eliminate unused resources.

Browse Source
This commit is contained in:
Alvin
2025-06-10 09:16:11 +02:00
parent c07fdac03c
commit ef07016a14
12 changed files with 244 additions and 1579 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
Vragenlijst_antwoorden\Vragenlijst_antwoorden.md Normal file
View File

@@ -0,0 +1,34 @@
**Vragenlijst Challenge 11**
1. **Wat is het hoofddoel van uw website?**\
(Informatie verschaffen, producten verkopen, contact genereren, enz.)\
Ik wil beter kunnen communiceren met mijn klanten. De website zelf is best goed, maar ik mis veel informatie omdat ik mijn klantencontacten nergens kan vastleggen. Wat ik wil is een module binnen de website waarin ik elk contact dat ik met de klant heb kan vastleggen.
1. **Wie is uw belangrijkste doelgroep?**\
(Leeftijd, beroep, interesses, technische vaardigheden, enz.)\
Mijn klanten zijn over het algemeen mannen tussen 18 en 29 jaar die van auto’s houden en graag wat getuned willen hebben. Snelle, stoere jongens types.
1. **Wat vindt u momenteel goed aan uw bestaande website, en wat stoort u?**\
Houden wat er is, alleen aanvullen met een CRM.
-----
4. **Hoe zou u de gewenste uitstraling van de website omschrijven?**\
(Bijv. modern, zakelijk, creatief, vriendelijk, minimalistisch.)\
Stoer en snel!!, Gericht op jonge mannen.
4. **Zijn er voorbeelden van websites die u aanspreken?**\
(Wat spreekt u daarin aan: kleuren, lay-out, structuur?)\
De huidige website is qua layout prima.
4. **Welke kleuren, lettertypes en logo’s wilt u gebruiken om uw merkidentiteit te behouden?**\
Behoud ook in de nieuwe module de huidige stijl en kleuren.
-----
7. **Welke functies moet de nieuwe website bevatten?**\
(Bijv. contactformulier, blog, webshop, agenda, zoekfunctie.)\
Ik moet kunnen inloggen. Daarna een klant kunnen zoeken en kiezen. Daarna de gespreksgeschiedenis kunnen inzien van die klant met mij. Vervolgens een nieuw item als gesprekscontact kunnen toevoegen en evt. de oude wijzigen.
7. **Wilt u de website zelf kunnen aanpassen of beheren?**\
(Zo ja: heeft u ervaring met een bepaald CMS, zoals WordPress?)\
Zoals hierboven beschreven. Het moet zelf gecodeerd zijn. Geen wordpress.
-----
9. **Zijn er prestatie-eisen waaraan de site moet voldoen?**\
(Bijv. laadtijd, uptime, mobiele prestaties.)\
Uiteraard zo snel als mogelijk.
9. **Heeft u voorkeur voor een bepaalde hostingprovider of heeft u al een bestaande hostingomgeving?**\
Er is een bestaande provider. Vraag je docent voor de inloggegevens.

15
assets/favicon.svg
View File

@@ -1,15 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="256" cy="256" r="240" fill="url(#gradient)"/>
<path d="M384 320H128C128 320 96 304 96 272C96 240 128 224 128 224H384C384 224 416 240 416 272C416 304 384 320 384 320Z" fill="white"/>
<circle cx="160" cy="320" r="32" fill="#1F2937"/>
<circle cx="352" cy="320" r="32" fill="#1F2937"/>
<path d="M256 160L288 224H224L256 160Z" fill="white"/>
<circle cx="256" cy="192" r="16" fill="#EF4444"/>
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#EF4444"/>
<stop offset="1" stop-color="#F97316"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 824 B

590
css/styles.css
View File

@@ -1,590 +0,0 @@
/* Fallback styles in case CDN links fail */
:root {
--primary-color: #8b5cf6;
--secondary-color: #ec4899;
--dark-bg: #4c1d95;
--light-bg: #f8f9fa;
--text-dark: #1f2937;
--text-light: #6b7280;
--white: #ffffff;
--shadow: 0 2px 4px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
--gradient-primary: linear-gradient(135deg, #8b5cf6, #ec4899);
--gradient-secondary: linear-gradient(135deg, #6366f1, #8b5cf6);
}
/* Reset and base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.5;
background: linear-gradient(135deg, var(--light-bg), #e0e7ff);
color: var(--text-dark);
scroll-behavior: smooth;
}
/* Container fallback */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
/* Navbar fallback */
.navbar {
background: rgba(17, 24, 39, 0.8);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.navbar.scrolled {
background: rgba(17, 24, 39, 0.95);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.navbar-brand {
font-size: 1.5rem;
font-weight: bold;
}
.nav-link {
color: #fff !important;
font-weight: 500;
padding: 0.5rem 1rem !important;
transition: all 0.3s ease;
}
.nav-link:hover {
color: #ef4444 !important;
}
.nav-link.active {
color: #ef4444 !important;
}
.btn-primary {
background: linear-gradient(to right, #dc2626, #ea580c);
border: none;
color: white;
padding: 0.5rem 1.5rem;
border-radius: 0.375rem;
font-weight: 500;
transition: all 0.3s ease;
}
.btn-primary:hover {
background: linear-gradient(to right, #b91c1c, #c2410c);
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.btn-outline-secondary {
border: 2px solid #4b5563;
color: #9ca3af;
padding: 0.5rem 1.5rem;
border-radius: 0.375rem;
font-weight: 500;
transition: all 0.3s ease;
}
.btn-outline-secondary:hover {
border-color: #ef4444;
color: white;
transform: translateY(-2px);
}
.form-control {
background-color: #374151;
border: 1px solid #4b5563;
color: white;
padding: 0.75rem 1rem;
border-radius: 0.375rem;
transition: all 0.3s ease;
}
.form-control:focus {
background-color: #374151;
border-color: #ef4444;
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
color: white;
}
.form-label {
color: #d1d5db;
font-weight: 500;
margin-bottom: 0.5rem;
}
.glass-nav {
background: rgba(17, 24, 39, 0.8);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.glass-nav:hover {
background: rgba(17, 24, 39, 0.95);
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
@keyframes pulse-slow {
0% {
opacity: 1;
}
50% {
opacity: 0.7;
}
100% {
opacity: 1;
}
}
.animate-pulse-slow {
animation: pulse-slow 3s ease-in-out infinite;
}
@keyframes spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.animate-spin-slow {
animation: spin-slow 20s linear infinite;
}
@keyframes bounce-slow {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.animate-bounce-slow {
animation: bounce-slow 3s ease-in-out infinite;
}
.fade-in {
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
.navbar-collapse {
background: rgba(17, 24, 39, 0.95);
backdrop-filter: blur(10px);
padding: 1rem;
border-radius: 0.5rem;
margin-top: 0.5rem;
}
.nav-link {
padding: 0.75rem 1rem !important;
}
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #1f2937;
}
::-webkit-scrollbar-thumb {
background: #ef4444;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #dc2626;
}
/* Grid fallback */
.row {
display: flex;
flex-wrap: wrap;
margin: -15px;
}
.col-md-8 {
flex: 0 0 66.666667%;
max-width: 66.666667%;
padding: 15px;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
/* Utility classes fallback */
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.mt-4 {
margin-top: 1rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.text-3xl {
font-size: 1.875rem;
}
.font-bold {
font-weight: 700;
}
.text-gray-600 {
color: var(--text-light);
}
.bg-white {
background-color: var(--white);
}
.rounded-lg {
border-radius: 0.5rem;
}
.shadow-md {
box-shadow: var(--shadow);
}
.p-6 {
padding: 1.5rem;
}
/* Custom styles */
.navbar {
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.btn-primary {
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
/* Form styles */
.form-control {
transition: all 0.3s ease;
border: 2px solid transparent;
}
.form-control:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.25);
transform: translateY(-1px);
}
/* Card hover effects */
.card {
transition: all 0.3s ease;
background: linear-gradient(135deg, #ffffff, #f9fafb);
}
.card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
background: linear-gradient(135deg, #ffffff, #f3f4f6);
}
/* Custom animations */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.fade-in {
animation: fadeIn 0.5s ease-in;
}
/* Gradient backgrounds */
.gradient-bg {
background: var(--gradient-primary);
background-size: 200% 200%;
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Section backgrounds */
.section-gradient-1 {
background: linear-gradient(135deg, #ffffff, #e0e7ff);
}
.section-gradient-2 {
background: linear-gradient(135deg, #f3e8ff, #fdf2f8);
}
.section-gradient-3 {
background: linear-gradient(135deg, #e0e7ff, #ede9fe);
}
/* Text gradients */
.text-gradient {
background: var(--gradient-primary);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Border gradients */
.border-gradient {
border: 2px solid transparent;
background: linear-gradient(white, white) padding-box,
var(--gradient-primary) border-box;
}
/* Responsive fallback */
@media (max-width: 768px) {
.navbar-nav {
flex-direction: column;
display: none;
}
.navbar-nav.show {
display: flex;
}
.col-md-8 {
flex: 0 0 100%;
max-width: 100%;
}
}
/* Navbar Styles */
.glass-nav {
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(17, 24, 39, 0.9);
}
.navbar-brand img {
filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.5));
}
.nav-link {
position: relative;
padding: 0.5rem 1rem;
margin: 0 0.25rem;
}
.nav-link.active {
color: #fff !important;
}
.nav-link.active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, #ef4444, #f97316);
transform: scaleX(1);
transition: transform 0.3s ease;
}
.nav-link:not(.active)::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, #ef4444, #f97316);
transform: scaleX(0);
transition: transform 0.3s ease;
transform-origin: right;
}
.nav-link:hover::after {
transform: scaleX(1);
transform-origin: left;
}
/* Slow spin animation for logo */
@keyframes spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.animate-spin-slow {
animation: spin-slow 20s linear infinite;
}
/* Navbar scroll effect */
.navbar {
transition: all 0.3s ease;
}
.navbar.scrolled {
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;
}
/* 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(17, 24, 39, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 0.5rem;
padding: 1rem;
margin-top: 0.5rem;
}
.nav-link {
padding: 0.75rem 1rem;
border-radius: 0.375rem;
}
.nav-link:hover {
background: rgba(255, 255, 255, 0.1);
}
.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;
}

613
index.html
View File

@@ -1,613 +0,0 @@
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto Tuning Pro</title>
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Custom CSS -->
<link rel="stylesheet" href="css/styles.css">
<!-- Custom JS -->
<script src="js/tailwind.config.js"></script>
</head>
<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-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-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-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-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-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-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-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-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-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>
</div>
</div>
</nav>
<!-- 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-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-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-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>
<!-- Services Section -->
<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-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-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">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-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-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>
<!-- 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-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-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-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-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>
</div>
</section>
<!-- Contact Section -->
<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-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 id="contactForm" action="https://formspree.io/f/xvgrgzoo" method="POST" 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-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" name="name" required>
</div>
<div class="mb-3">
<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" name="email" required>
</div>
<div class="mb-3">
<label for="phone" class="form-label text-gray-300">Telefoon</label>
<input type="tel" class="form-control bg-gray-700 border-gray-600 text-white focus:ring-2 focus:ring-red-500 transition-all duration-300" id="phone" name="phone" required>
</div>
<div class="mb-3">
<label for="car" class="form-label text-gray-300">Voertuig</label>
<div class="relative">
<input type="text" id="carSearch" class="form-control bg-gray-700 border-gray-600 text-white focus:ring-2 focus:ring-red-500 transition-all duration-300 mb-2" placeholder="Zoek je voertuigmodel...">
<select class="form-control bg-gray-700 border-gray-600 text-white focus:ring-2 focus:ring-red-500 transition-all duration-300" id="car" name="car" required>
<option value="" disabled selected>Selecteer uw voertuigmodel</option>
<optgroup label="BMW">
<option value="BMW M2">BMW M2</option>
<option value="BMW M3">BMW M3</option>
<option value="BMW M4">BMW M4</option>
<option value="BMW M5">BMW M5</option>
<option value="BMW M8">BMW M8</option>
<option value="BMW 1 Serie M">BMW 1 Serie M</option>
<option value="BMW 2 Serie M">BMW 2 Serie M</option>
<option value="BMW 3 Serie M">BMW 3 Serie M</option>
<option value="BMW 4 Serie M">BMW 4 Serie M</option>
<option value="BMW 5 Serie M">BMW 5 Serie M</option>
<option value="BMW X3 M">BMW X3 M</option>
<option value="BMW X4 M">BMW X4 M</option>
<option value="BMW X5 M">BMW X5 M</option>
<option value="BMW X6 M">BMW X6 M</option>
<option value="BMW 118i">BMW 118i</option>
<option value="BMW 120i">BMW 120i</option>
<option value="BMW 125i">BMW 125i</option>
<option value="BMW 320i">BMW 320i</option>
<option value="BMW 330i">BMW 330i</option>
<option value="BMW 420i">BMW 420i</option>
<option value="BMW 430i">BMW 430i</option>
</optgroup>
<optgroup label="Audi">
<option value="Audi RS3">Audi RS3</option>
<option value="Audi RS4">Audi RS4</option>
<option value="Audi RS5">Audi RS5</option>
<option value="Audi RS6">Audi RS6</option>
<option value="Audi RS7">Audi RS7</option>
<option value="Audi RS Q3">Audi RS Q3</option>
<option value="Audi RS Q8">Audi RS Q8</option>
<option value="Audi S3">Audi S3</option>
<option value="Audi S4">Audi S4</option>
<option value="Audi S5">Audi S5</option>
<option value="Audi S6">Audi S6</option>
<option value="Audi S7">Audi S7</option>
<option value="Audi S8">Audi S8</option>
<option value="Audi SQ5">Audi SQ5</option>
<option value="Audi SQ7">Audi SQ7</option>
<option value="Audi SQ8">Audi SQ8</option>
<option value="Audi A3">Audi A3</option>
<option value="Audi A4">Audi A4</option>
<option value="Audi A5">Audi A5</option>
<option value="Audi A6">Audi A6</option>
<option value="Audi Q3">Audi Q3</option>
<option value="Audi Q5">Audi Q5</option>
</optgroup>
<optgroup label="Mercedes-AMG">
<option value="Mercedes-AMG A35">Mercedes-AMG A35</option>
<option value="Mercedes-AMG A45">Mercedes-AMG A45</option>
<option value="Mercedes-AMG CLA35">Mercedes-AMG CLA35</option>
<option value="Mercedes-AMG CLA45">Mercedes-AMG CLA45</option>
<option value="Mercedes-AMG C43">Mercedes-AMG C43</option>
<option value="Mercedes-AMG C63">Mercedes-AMG C63</option>
<option value="Mercedes-AMG E53">Mercedes-AMG E53</option>
<option value="Mercedes-AMG E63">Mercedes-AMG E63</option>
<option value="Mercedes-AMG G63">Mercedes-AMG G63</option>
<option value="Mercedes-AMG GT">Mercedes-AMG GT</option>
<option value="Mercedes-AMG GT63">Mercedes-AMG GT63</option>
<option value="Mercedes-AMG GLE63">Mercedes-AMG GLE63</option>
<option value="Mercedes-AMG GLS63">Mercedes-AMG GLS63</option>
</optgroup>
<optgroup label="Volkswagen">
<option value="Volkswagen Golf R">Volkswagen Golf R</option>
<option value="Volkswagen Golf GTI">Volkswagen Golf GTI</option>
<option value="Volkswagen Golf GTD">Volkswagen Golf GTD</option>
<option value="Volkswagen Polo GTI">Volkswagen Polo GTI</option>
<option value="Volkswagen Arteon R">Volkswagen Arteon R</option>
<option value="Volkswagen Tiguan R">Volkswagen Tiguan R</option>
<option value="Volkswagen T-Roc R">Volkswagen T-Roc R</option>
<option value="Volkswagen T-Cross">Volkswagen T-Cross</option>
<option value="Volkswagen Passat R-Line">Volkswagen Passat R-Line</option>
<option value="Volkswagen Golf">Volkswagen Golf</option>
<option value="Volkswagen Polo">Volkswagen Polo</option>
<option value="Volkswagen T-Roc">Volkswagen T-Roc</option>
<option value="Volkswagen Tiguan">Volkswagen Tiguan</option>
<option value="Volkswagen Phaeton">Volkswagen Phaeton</option>
<option value="Volkswagen Passat">Volkswagen Passat</option>
<option value="Volkswagen Arteon">Volkswagen Arteon</option>
<option value="Volkswagen ID.3">Volkswagen ID.3</option>
<option value="Volkswagen ID.4">Volkswagen ID.4</option>
<option value="Volkswagen ID.5">Volkswagen ID.5</option>
<option value="Volkswagen ID.Buzz">Volkswagen ID.Buzz</option>
<option value="Volkswagen Touareg">Volkswagen Touareg</option>
<option value="Volkswagen Taos">Volkswagen Taos</option>
<option value="Volkswagen Atlas">Volkswagen Atlas</option>
<option value="Volkswagen Jetta">Volkswagen Jetta</option>
<option value="Volkswagen Scirocco">Volkswagen Scirocco</option>
<option value="Volkswagen Beetle">Volkswagen Beetle</option>
<option value="Volkswagen Up!">Volkswagen Up!</option>
<option value="Volkswagen Sharan">Volkswagen Sharan</option>
<option value="Volkswagen Touran">Volkswagen Touran</option>
<option value="Volkswagen Caddy">Volkswagen Caddy</option>
<option value="Volkswagen Transporter">Volkswagen Transporter</option>
<option value="Volkswagen Amarok">Volkswagen Amarok</option>
</optgroup>
<optgroup label="Porsche">
<option value="Porsche 911">Porsche 911</option>
<option value="Porsche 911 GT3">Porsche 911 GT3</option>
<option value="Porsche 911 Turbo">Porsche 911 Turbo</option>
<option value="Porsche 718 Cayman">Porsche 718 Cayman</option>
<option value="Porsche 718 Boxster">Porsche 718 Boxster</option>
<option value="Porsche Taycan">Porsche Taycan</option>
<option value="Porsche Panamera">Porsche Panamera</option>
<option value="Porsche Macan">Porsche Macan</option>
<option value="Porsche Cayenne">Porsche Cayenne</option>
</optgroup>
<optgroup label="Audi Sport">
<option value="Audi Sport Quattro">Audi Sport Quattro</option>
<option value="Audi Sport RS e-tron GT">Audi Sport RS e-tron GT</option>
<option value="Audi Sport R8">Audi Sport R8</option>
<option value="Audi Sport TT RS">Audi Sport TT RS</option>
</optgroup>
<optgroup label="Alfa Romeo">
<option value="Alfa Romeo Giulia Quadrifoglio">Alfa Romeo Giulia Quadrifoglio</option>
<option value="Alfa Romeo Stelvio Quadrifoglio">Alfa Romeo Stelvio Quadrifoglio</option>
<option value="Alfa Romeo 4C">Alfa Romeo 4C</option>
<option value="Alfa Romeo Giulia">Alfa Romeo Giulia</option>
<option value="Alfa Romeo Stelvio">Alfa Romeo Stelvio</option>
<option value="Alfa Romeo Tonale">Alfa Romeo Tonale</option>
</optgroup>
<optgroup label="Jaguar">
<option value="Jaguar F-Type">Jaguar F-Type</option>
<option value="Jaguar F-Pace SVR">Jaguar F-Pace SVR</option>
<option value="Jaguar XE SV Project 8">Jaguar XE SV Project 8</option>
<option value="Jaguar XE">Jaguar XE</option>
<option value="Jaguar XF">Jaguar XF</option>
<option value="Jaguar E-Pace">Jaguar E-Pace</option>
</optgroup>
<optgroup label="Land Rover">
<option value="Land Rover Range Rover Sport SVR">Land Rover Range Rover Sport SVR</option>
<option value="Land Rover Defender V8">Land Rover Defender V8</option>
<option value="Land Rover Discovery SVX">Land Rover Discovery SVX</option>
<option value="Land Rover Discovery Sport">Land Rover Discovery Sport</option>
<option value="Land Rover Evoque">Land Rover Evoque</option>
</optgroup>
<optgroup label="Maserati">
<option value="Maserati MC20">Maserati MC20</option>
<option value="Maserati Levante Trofeo">Maserati Levante Trofeo</option>
<option value="Maserati Ghibli Trofeo">Maserati Ghibli Trofeo</option>
<option value="Maserati Ghibli">Maserati Ghibli</option>
<option value="Maserati Levante">Maserati Levante</option>
</optgroup>
<optgroup label="Bentley">
<option value="Bentley Continental GT">Bentley Continental GT</option>
<option value="Bentley Flying Spur">Bentley Flying Spur</option>
<option value="Bentley Bentayga">Bentley Bentayga</option>
</optgroup>
<optgroup label="Aston Martin">
<option value="Aston Martin Vantage">Aston Martin Vantage</option>
<option value="Aston Martin DB11">Aston Martin DB11</option>
<option value="Aston Martin DBS">Aston Martin DBS</option>
</optgroup>
<optgroup label="Ferrari">
<option value="Ferrari F8 Tributo">Ferrari F8 Tributo</option>
<option value="Ferrari SF90 Stradale">Ferrari SF90 Stradale</option>
<option value="Ferrari 296 GTB">Ferrari 296 GTB</option>
</optgroup>
<optgroup label="Lamborghini">
<option value="Lamborghini Huracán">Lamborghini Huracán</option>
<option value="Lamborghini Aventador">Lamborghini Aventador</option>
<option value="Lamborghini Urus">Lamborghini Urus</option>
</optgroup>
<optgroup label="McLaren">
<option value="McLaren 720S">McLaren 720S</option>
<option value="McLaren 765LT">McLaren 765LT</option>
<option value="McLaren Artura">McLaren Artura</option>
</optgroup>
<optgroup label="Toyota">
<option value="Toyota GR Yaris">Toyota GR Yaris</option>
<option value="Toyota GR Corolla">Toyota GR Corolla</option>
<option value="Toyota GR86">Toyota GR86</option>
<option value="Toyota Supra">Toyota Supra</option>
<option value="Toyota Yaris">Toyota Yaris</option>
<option value="Toyota Corolla">Toyota Corolla</option>
</optgroup>
<optgroup label="Honda">
<option value="Honda Civic Type R">Honda Civic Type R</option>
<option value="Honda Civic">Honda Civic</option>
<option value="Honda Jazz">Honda Jazz</option>
<option value="Honda HR-V">Honda HR-V</option>
</optgroup>
<optgroup label="Ford">
<option value="Ford Focus ST">Ford Focus ST</option>
<option value="Ford Focus RS">Ford Focus RS</option>
<option value="Ford Fiesta ST">Ford Fiesta ST</option>
<option value="Ford Mustang">Ford Mustang</option>
<option value="Ford Focus">Ford Focus</option>
<option value="Ford Fiesta">Ford Fiesta</option>
</optgroup>
<optgroup label="Renault">
<option value="Renault Megane RS">Renault Megane RS</option>
<option value="Renault Clio RS">Renault Clio RS</option>
<option value="Renault Megane">Renault Megane</option>
<option value="Renault Clio">Renault Clio</option>
<option value="Renault Captur">Renault Captur</option>
</optgroup>
<optgroup label="Peugeot">
<option value="Peugeot 308 GTI">Peugeot 308 GTI</option>
<option value="Peugeot 208 GTI">Peugeot 208 GTI</option>
<option value="Peugeot 308">Peugeot 308</option>
<option value="Peugeot 208">Peugeot 208</option>
<option value="Peugeot 3008">Peugeot 3008</option>
</optgroup>
<optgroup label="Opel">
<option value="Opel Astra GSi">Opel Astra GSi</option>
<option value="Opel Corsa OPC">Opel Corsa OPC</option>
<option value="Opel Astra">Opel Astra</option>
<option value="Opel Corsa">Opel Corsa</option>
<option value="Opel Mokka">Opel Mokka</option>
<option value="Opel Adam">Opel Adam</option>
<option value="Opel Agila">Opel Agila</option>
<option value="Opel Karl">Opel Karl</option>
<option value="Opel Meriva">Opel Meriva</option>
<option value="Opel Zafira">Opel Zafira</option>
<option value="Opel Combo">Opel Combo</option>
<option value="Opel Insignia">Opel Insignia</option>
<option value="Opel Crossland">Opel Crossland</option>
<option value="Opel Grandland">Opel Grandland</option>
<option value="Opel Ampera">Opel Ampera</option>
<option value="Opel Vectra">Opel Vectra</option>
<option value="Opel Signum">Opel Signum</option>
<option value="Opel Omega">Opel Omega</option>
<option value="Opel Kadett">Opel Kadett</option>
<option value="Opel Rekord">Opel Rekord</option>
<option value="Opel Senator">Opel Senator</option>
<option value="Opel Ascona">Opel Ascona</option>
<option value="Opel Tigra">Opel Tigra</option>
<option value="Opel Calibra">Opel Calibra</option>
<option value="Opel Monterey">Opel Monterey</option>
<option value="Opel Frontera">Opel Frontera</option>
<option value="Opel Antara">Opel Antara</option>
<option value="Opel Vivaro">Opel Vivaro</option>
<option value="Opel Movano">Opel Movano</option>
<option value="Opel Zafira Tourer">Opel Zafira Tourer</option>
<option value="Opel Combo Life">Opel Combo Life</option>
<option value="Opel Combo Tour">Opel Combo Tour</option>
<option value="Opel Agila Twinport">Opel Agila Twinport</option>
<option value="Opel Corsa-e">Opel Corsa-e</option>
<option value="Opel Ampera-e">Opel Ampera-e</option>
</optgroup>
<optgroup label="Seat">
<option value="Seat Leon Cupra">Seat Leon Cupra</option>
<option value="Seat Ibiza Cupra">Seat Ibiza Cupra</option>
<option value="Seat Leon">Seat Leon</option>
<option value="Seat Ibiza">Seat Ibiza</option>
<option value="Seat Arona">Seat Arona</option>
</optgroup>
<optgroup label="Skoda">
<option value="Skoda Octavia RS">Skoda Octavia RS</option>
<option value="Skoda Kodiaq RS">Skoda Kodiaq RS</option>
<option value="Skoda Octavia">Skoda Octavia</option>
<option value="Skoda Kodiaq">Skoda Kodiaq</option>
<option value="Skoda Karoq">Skoda Karoq</option>
<option value="Skoda Fabia">Skoda Fabia</option>
<option value="Skoda Citigo">Skoda Citigo</option>
<option value="Skoda Rapid">Skoda Rapid</option>
<option value="Skoda Roomster">Skoda Roomster</option>
<option value="Skoda Superb">Skoda Superb</option>
<option value="Skoda Kamiq">Skoda Kamiq</option>
<option value="Skoda Scala">Skoda Scala</option>
<option value="Skoda Yeti">Skoda Yeti</option>
</optgroup>
<optgroup label="Mazda">
<option value="Mazda MX-5">Mazda MX-5</option>
<option value="Mazda MX-30">Mazda MX-30</option>
<option value="Mazda 3">Mazda 3</option>
<option value="Mazda 6">Mazda 6</option>
<option value="Mazda CX-3">Mazda CX-3</option>
<option value="Mazda CX-5">Mazda CX-5</option>
<option value="Mazda CX-30">Mazda CX-30</option>
<option value="Mazda CX-60">Mazda CX-60</option>
</optgroup>
<optgroup label="Suzuki">
<option value="Suzuki Swift Sport">Suzuki Swift Sport</option>
<option value="Suzuki Swift">Suzuki Swift</option>
<option value="Suzuki Jimny">Suzuki Jimny</option>
<option value="Suzuki Vitara">Suzuki Vitara</option>
<option value="Suzuki S-Cross">Suzuki S-Cross</option>
<option value="Suzuki Across">Suzuki Across</option>
</optgroup>
<optgroup label="Mitsubishi">
<option value="Mitsubishi Lancer Evolution">Mitsubishi Lancer Evolution</option>
<option value="Mitsubishi Eclipse Cross">Mitsubishi Eclipse Cross</option>
<option value="Mitsubishi ASX">Mitsubishi ASX</option>
<option value="Mitsubishi Outlander">Mitsubishi Outlander</option>
<option value="Mitsubishi Space Star">Mitsubishi Space Star</option>
</optgroup>
<optgroup label="Subaru">
<option value="Subaru WRX STI">Subaru WRX STI</option>
<option value="Subaru WRX">Subaru WRX</option>
<option value="Subaru BRZ">Subaru BRZ</option>
<option value="Subaru Impreza">Subaru Impreza</option>
<option value="Subaru Legacy">Subaru Legacy</option>
<option value="Subaru Outback">Subaru Outback</option>
<option value="Subaru Forester">Subaru Forester</option>
<option value="Subaru XV">Subaru XV</option>
</optgroup>
<optgroup label="Lexus">
<option value="Lexus LC">Lexus LC</option>
<option value="Lexus RC F">Lexus RC F</option>
<option value="Lexus IS">Lexus IS</option>
<option value="Lexus ES">Lexus ES</option>
<option value="Lexus GS">Lexus GS</option>
<option value="Lexus LS">Lexus LS</option>
<option value="Lexus NX">Lexus NX</option>
<option value="Lexus RX">Lexus RX</option>
<option value="Lexus UX">Lexus UX</option>
</optgroup>
<optgroup label="Infiniti">
<option value="Infiniti Q50">Infiniti Q50</option>
<option value="Infiniti Q60">Infiniti Q60</option>
<option value="Infiniti Q70">Infiniti Q70</option>
<option value="Infiniti QX50">Infiniti QX50</option>
<option value="Infiniti QX60">Infiniti QX60</option>
<option value="Infiniti QX80">Infiniti QX80</option>
</optgroup>
<optgroup label="Genesis">
<option value="Genesis G70">Genesis G70</option>
<option value="Genesis G80">Genesis G80</option>
<option value="Genesis G90">Genesis G90</option>
<option value="Genesis GV70">Genesis GV70</option>
<option value="Genesis GV80">Genesis GV80</option>
</optgroup>
<optgroup label="Kia">
<option value="Kia Stinger">Kia Stinger</option>
<option value="Kia Ceed">Kia Ceed</option>
<option value="Kia ProCeed">Kia ProCeed</option>
<option value="Kia Rio">Kia Rio</option>
<option value="Kia Picanto">Kia Picanto</option>
<option value="Kia Sportage">Kia Sportage</option>
<option value="Kia Sorento">Kia Sorento</option>
<option value="Kia EV6">Kia EV6</option>
<option value="Kia Niro">Kia Niro</option>
</optgroup>
<optgroup label="Hyundai">
<option value="Hyundai i20 N">Hyundai i20 N</option>
<option value="Hyundai i30 N">Hyundai i30 N</option>
<option value="Hyundai Kona N">Hyundai Kona N</option>
<option value="Hyundai i20">Hyundai i20</option>
<option value="Hyundai i30">Hyundai i30</option>
<option value="Hyundai Kona">Hyundai Kona</option>
<option value="Hyundai Tucson">Hyundai Tucson</option>
<option value="Hyundai Santa Fe">Hyundai Santa Fe</option>
<option value="Hyundai IONIQ 5">Hyundai IONIQ 5</option>
<option value="Hyundai IONIQ 6">Hyundai IONIQ 6</option>
</optgroup>
<optgroup label="Dacia">
<option value="Dacia Sandero">Dacia Sandero</option>
<option value="Dacia Logan">Dacia Logan</option>
<option value="Dacia Duster">Dacia Duster</option>
<option value="Dacia Spring">Dacia Spring</option>
<option value="Dacia Jogger">Dacia Jogger</option>
</optgroup>
<optgroup label="Lancia">
<option value="Lancia Delta HF">Lancia Delta HF</option>
<option value="Lancia Ypsilon">Lancia Ypsilon</option>
</optgroup>
<optgroup label="Abarth">
<option value="Abarth 595">Abarth 595</option>
<option value="Abarth 695">Abarth 695</option>
<option value="Abarth 124 Spider">Abarth 124 Spider</option>
</optgroup>
<optgroup label="Andere">
<option value="Ander model">Ander model</option>
</optgroup>
</select>
</div>
</div>
<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" name="message" rows="4" required></textarea>
</div>
<button type="submit" class="btn btn-primary w-full bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-700 hover:to-orange-700 transition-all duration-300">
Verstuur Bericht
</button>
</form>
<div id="contactSuccess" class="hidden mt-4 p-4 rounded bg-green-700 text-white text-center font-semibold shadow-lg">Bedankt voor je interesse! We nemen zo snel mogelijk contact met je op.</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<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-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-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>
</footer>
<!-- Bootstrap JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom JavaScript -->
<script src="js/script.js"></script>
</body>
</html>

68
ingevulde behoefte analyse\ingevulde behoefte analyse.md Normal file
View File

@@ -0,0 +1,68 @@
![](Aspose.Words.168ad1cb-cb76-4af9-aba4-eba552ecdde2.001.png)
**Sjabloon**
**Behoefteanalyse**
Project :
Opdrachtgever :
Auteur :
Datum :
Versie : 2.0
# **Inhoud**
[**1** **Opdracht 2****](#_toc392408117)**
[**2** **Aanleiding 2****](#_toc392408118)
[**3** **Knelpunten 2****](#_toc392408119)
[**4** **Eisen/Wensen 2****](#_toc392408120)
[4.1 Must haves 2](#_toc392408121)
[4.2 Should haves 2](#_toc392408122)
[4.3 Could haves 2](#_toc392408123)
[4.4 Won’t haves 2](#_toc392408124)
[**5** **Uit te voeren werkzaamheden 2****](#_toc392408125)
1. # <a name="_toc392408117"></a>**Opdracht**
Website maken voor een bedrijf om een uitleg te geven over waar het bedrijf voor staat en wat het doel is.
1. # <a name="_toc392408118"></a>**Aanleiding**
Beschrijf hier redenen die aanleiding waren voor het geven van de opdracht voor het opstellen van deze behoefteanalyse.
1. # <a name="_toc392408119"></a>**Knelpunten**
Beschrijf hier de problemen die nu bestaan in de huidige manier van werken.
1. # <a name="_toc392408120"></a>**Eisen/Wensen**
Geef hier een overzicht van de eisen en wensen. Gebruik hiervoor de MoSCoW-onderverdeling.
1. # <a name="_toc387987252"></a><a name="_toc392408121"></a>Must haves
Informatie over verschillende autos met de mogelijkheden die er zijn om de auto te tunen.
1. # <a name="_toc387987253"></a><a name="_toc392408122"></a>Should haves
Drop down menu, zoek balk, filters.
1. # <a name="_toc387987254"></a><a name="_toc392408123"></a>Could haves
Eisen die alleen aan bod zullen komen als er tijd genoeg is.
1. # <a name="_toc387987255"></a><a name="_toc392408124"></a>Won’t haves
Eisen die in dit project niet aan bod komen, maar in de toekomst bij een vervolgproject interessant kunnen zijn.
1. # <a name="_toc392408125"></a>**Uit te voeren werkzaamheden**
Indien gevraagd wordt om bepaalde werkzaamheden uit te voeren, worden deze hier vermeld.
© Stichting Praktijkleren 2015
Sjabloon Behoefteanalyse Pagina 1 van 2

344
js/script.js
View File

@@ -1,344 +0,0 @@
// Add fade-in animation to all sections
document.addEventListener('DOMContentLoaded', () => {
const pageSections = document.querySelectorAll('section');
pageSections.forEach(section => section.classList.add('fade-in'));
// Car search functionality
const carSearch = document.getElementById('carSearch');
const carSelect = document.getElementById('car');
if (carSearch && carSelect) {
// Set initial dropdown style
carSelect.size = 10;
carSelect.style.position = 'absolute';
carSelect.style.width = '100%';
carSelect.style.zIndex = '1000';
carSelect.style.backgroundColor = '#374151';
carSelect.style.border = '1px solid #4B5563';
carSelect.style.borderRadius = '0.375rem';
carSelect.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1)';
carSelect.style.maxHeight = '300px';
carSelect.style.overflowY = 'auto';
// Function to close dropdown
const closeDropdown = () => {
carSelect.size = 1;
carSelect.style.position = 'static';
carSelect.style.width = 'auto';
carSelect.style.zIndex = 'auto';
carSelect.style.backgroundColor = '';
carSelect.style.border = '';
carSelect.style.borderRadius = '';
carSelect.style.boxShadow = '';
carSelect.style.maxHeight = '';
carSelect.style.overflowY = '';
};
carSearch.addEventListener('input', (e) => {
const searchTerm = e.target.value.toLowerCase().trim();
const options = carSelect.querySelectorAll('option');
const optgroups = carSelect.querySelectorAll('optgroup');
// First hide all options and optgroups
options.forEach(option => {
if (option.value !== '') { // Don't hide the placeholder
option.style.display = 'none';
}
});
optgroups.forEach(group => {
group.style.display = 'none';
});
// If search is empty, show all options
if (searchTerm === '') {
options.forEach(option => {
option.style.display = '';
});
optgroups.forEach(group => {
group.style.display = '';
});
return;
}
// Show matching options and their parent optgroups
let hasMatches = false;
options.forEach(option => {
if (option.value !== '') {
const optionText = option.text.toLowerCase();
if (optionText.includes(searchTerm)) {
option.style.display = '';
hasMatches = true;
// Show the parent optgroup
const parentGroup = option.closest('optgroup');
if (parentGroup) {
parentGroup.style.display = '';
}
}
}
});
// If no matches found, show the "Ander model" option
if (!hasMatches) {
const otherModelOption = carSelect.querySelector('option[value="Ander model"]');
if (otherModelOption) {
otherModelOption.style.display = '';
const parentGroup = otherModelOption.closest('optgroup');
if (parentGroup) {
parentGroup.style.display = '';
}
}
}
});
// Handle option selection
carSelect.addEventListener('change', () => {
carSearch.value = '';
const options = carSelect.querySelectorAll('option');
const optgroups = carSelect.querySelectorAll('optgroup');
options.forEach(option => {
option.style.display = '';
});
optgroups.forEach(group => {
group.style.display = '';
});
closeDropdown();
});
// Handle double-click on options
carSelect.addEventListener('dblclick', (e) => {
if (e.target.tagName === 'OPTION' && e.target.value !== '') {
carSelect.value = e.target.value;
carSearch.value = e.target.text;
closeDropdown();
}
});
// Close the dropdown when clicking outside
document.addEventListener('click', (e) => {
if (!carSearch.contains(e.target) && !carSelect.contains(e.target)) {
closeDropdown();
}
});
}
// Smooth scrolling for navigation 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' });
});
});
// Get Started button functionality
const getStartedButtons = document.querySelectorAll('.btn-primary:not([type="submit"])');
getStartedButtons.forEach(button => {
button.addEventListener('click', (e) => {
// 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-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 relative">
<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-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-primary bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-700 hover:to-orange-700 transition-all duration-300">
Prestatie Onderdelen
</button>
<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">
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()">
<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="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
`;
document.body.appendChild(modal);
// DEBUG: Log modal HTML
console.log('Modal created. innerHTML:', modal.innerHTML);
// Add click event to close modal when clicking outside
modal.addEventListener('click', (e) => {
if (e.target === modal) {
modal.remove();
}
});
// Add click events to modal buttons
const modalButtons = modal.querySelectorAll('.space-y-4 > button');
// DEBUG: Log number of modal buttons found
console.log('Modal buttons found:', modalButtons.length);
modalButtons.forEach(modalBtn => {
modalBtn.addEventListener('click', () => {
const action = modalBtn.textContent.trim();
console.log('Modal button clicked:', action); // DEBUG
// Scroll to contact form and populate service type
const contactForm = document.querySelector('#contact form, #contactForm');
const messageField = contactForm.querySelector('#message');
messageField.value = `Ik ben geïnteresseerd in: ${action}`;
modal.remove();
document.querySelector('#contact').scrollIntoView({ behavior: 'smooth' });
});
});
});
});
// Form submission handling
const contactForm = document.querySelector('#contactForm');
if (contactForm) {
const carSelect = contactForm.querySelector('#car');
carSelect.addEventListener('change', (e) => {
if (e.target.value === 'Ander model') {
const customInput = document.createElement('input');
customInput.type = 'text';
customInput.className = 'form-control bg-gray-700 border-gray-600 text-white focus:ring-2 focus:ring-red-500 transition-all duration-300 mt-2';
customInput.placeholder = 'Voer uw voertuigmodel in';
customInput.id = 'customCar';
customInput.name = 'customCar';
const existingCustomInput = contactForm.querySelector('#customCar');
if (!existingCustomInput) {
carSelect.parentNode.appendChild(customInput);
}
} else {
const existingCustomInput = contactForm.querySelector('#customCar');
if (existingCustomInput) {
existingCustomInput.remove();
}
}
});
contactForm.addEventListener('submit', async (e) => {
e.preventDefault();
const submitButton = contactForm.querySelector('button[type="submit"]');
const originalButtonText = submitButton.textContent;
submitButton.disabled = true;
submitButton.textContent = 'Verzenden...';
// Hide previous success message if visible
const successMsg = document.getElementById('contactSuccess');
if (successMsg) successMsg.classList.add('hidden');
try {
const formData = new FormData(contactForm);
const carModel = carSelect.value === 'Ander model'
? contactForm.querySelector('#customCar')?.value || 'Niet gespecificeerd'
: carSelect.value;
formData.set('car', carModel);
const response = await fetch(contactForm.action, {
method: 'POST',
body: formData,
headers: {
'Accept': 'application/json'
}
});
if (response.ok) {
// Show custom confirmation message
if (successMsg) successMsg.classList.remove('hidden');
contactForm.reset();
const existingCustomInput = contactForm.querySelector('#customCar');
if (existingCustomInput) {
existingCustomInput.remove();
}
} else {
throw new Error('Er is iets misgegaan bij het verzenden van het formulier.');
}
} catch (error) {
alert('Er is een fout opgetreden. Probeer het later opnieuw of neem telefonisch contact op.');
console.error('Form submission error:', error);
} finally {
submitButton.disabled = false;
submitButton.textContent = originalButtonText;
}
});
}
// Active navigation highlighting
const navLinks = document.querySelectorAll('.nav-link');
const sections = document.querySelectorAll('section');
function setActiveLink() {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (window.scrollY >= (sectionTop - sectionHeight / 3)) {
current = section.getAttribute('id');
}
});
navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href').substring(1) === current) {
link.classList.add('active');
}
});
}
window.addEventListener('scroll', setActiveLink);
setActiveLink(); // Initial call
// Mobile menu toggle
const navbarToggler = document.querySelector('.navbar-toggler');
const navbarCollapse = document.querySelector('.navbar-collapse');
if (navbarToggler && navbarCollapse) {
navbarToggler.addEventListener('click', () => {
navbarCollapse.classList.toggle('show');
});
// Close mobile menu when clicking outside
document.addEventListener('click', (e) => {
if (!navbarToggler.contains(e.target) && !navbarCollapse.contains(e.target)) {
navbarCollapse.classList.remove('show');
}
});
}
// Add hover effects to cards
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.3)';
});
card.addEventListener('mouseleave', () => {
card.style.transform = 'translateY(0)';
card.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
});
});
// Navbar scroll effect
const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
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)';
});
});
});

17
js/tailwind.config.js
View File

@@ -1,17 +0,0 @@
tailwind.config = {
theme: {
extend: {
animation: {
'float': 'float 3s ease-in-out infinite',
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'bounce-slow': 'bounce 3s infinite',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' },
}
}
}
}
}

34
models/Contact.js Normal file
View File

@@ -0,0 +1,34 @@
const mongoose = require('mongoose');
const contactSchema = new mongoose.Schema({
customer: {
type: mongoose.Schema.Types.ObjectId,
ref: 'Customer',
required: true
},
user: {
type: mongoose.Schema.Types.ObjectId,
ref: 'User',
required: true
},
type: {
type: String,
enum: ['phone', 'email', 'in-person', 'other'],
required: true
},
notes: {
type: String,
required: true
},
followUp: {
required: Boolean,
date: Date,
notes: String
},
createdAt: {
type: Date,
default: Date.now
}
});
module.exports = mongoose.model('Contact', contactSchema);

32
models/Customer.js Normal file
View File

@@ -0,0 +1,32 @@
const mongoose = require('mongoose');
const customerSchema = new mongoose.Schema({
name: {
type: String,
required: true
},
email: {
type: String,
required: true,
unique: true
},
phone: {
type: String
},
carDetails: {
make: String,
model: String,
year: Number,
modifications: [String]
},
createdAt: {
type: Date,
default: Date.now
},
updatedAt: {
type: Date,
default: Date.now
}
});
module.exports = mongoose.model('Customer', customerSchema);

24
models/User.js Normal file
View File

@@ -0,0 +1,24 @@
const mongoose = require('mongoose');
const userSchema = new mongoose.Schema({
username: {
type: String,
required: true,
unique: true
},
password: {
type: String,
required: true
},
role: {
type: String,
enum: ['admin', 'staff'],
default: 'staff'
},
createdAt: {
type: Date,
default: Date.now
}
});
module.exports = mongoose.model('User', userSchema);

24
package.json Normal file
View File

@@ -0,0 +1,24 @@
{
"name": "car-tuning-crm",
"version": "1.0.0",
"description": "CRM system for car tuning business",
"main": "server.js",
"scripts": {
"start": "node server.js",
"dev": "nodemon server.js",
"client": "cd client && npm start",
"dev:full": "concurrently \"npm run dev\" \"npm run client\""
},
"dependencies": {
"express": "^4.18.2",
"mongoose": "^7.5.0",
"bcryptjs": "^2.4.3",
"jsonwebtoken": "^9.0.1",
"cors": "^2.8.5",
"dotenv": "^16.3.1"
},
"devDependencies": {
"nodemon": "^3.0.1",
"concurrently": "^8.2.1"
}
}

28
server.js Normal file
View File

@@ -0,0 +1,28 @@
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const dotenv = require('dotenv');
dotenv.config();
const app = express();
// Middleware
app.use(cors());
app.use(express.json());
// MongoDB Connection
mongoose.connect(process.env.MONGODB_URI || 'mongodb://localhost:27017/car-tuning-crm', {
useNewUrlParser: true,
useUnifiedTopology: true
})
.then(() => console.log('MongoDB connected'))
.catch(err => console.log('MongoDB connection error:', err));
// Routes
app.use('/api/auth', require('./routes/auth'));
app.use('/api/customers', require('./routes/customers'));
app.use('/api/contacts', require('./routes/contacts'));
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));