|
|
<!DOCTYPE html> |
|
|
<html lang="nl"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Schoonheidssalon [Naam] - Ontdek Onze Luxe Behandelingen</title> |
|
|
<meta name="description" content="Profiteer nu van exclusieve aanbiedingen bij [Salon Naam]. Boek vandaag nog uw afspraak en ervaar professionele schoonheidsbehandelingen in [Plaatsnaam]."> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, rgba(255,105,180,0.9) 0%, rgba(199,21,133,0.9) 100%); |
|
|
} |
|
|
.pulse-animation { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
.floating { |
|
|
animation: floating 3s ease-in-out infinite; |
|
|
} |
|
|
@keyframes floating { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-10px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans antialiased text-gray-800"> |
|
|
|
|
|
<header class="bg-white shadow-md sticky top-0 z-50"> |
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-spa text-pink-500 text-3xl mr-2"></i> |
|
|
<span class="text-2xl font-bold text-pink-600">Schoonheidssalon [Naam]</span> |
|
|
</div> |
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#diensten" class="text-pink-600 hover:text-pink-800 font-medium">Diensten</a> |
|
|
<a href="#overons" class="text-gray-600 hover:text-pink-600 font-medium">Over Ons</a> |
|
|
<a href="#reviews" class="text-gray-600 hover:text-pink-600 font-medium">Reviews</a> |
|
|
<a href="#contact" class="text-gray-600 hover:text-pink-600 font-medium">Contact</a> |
|
|
</nav> |
|
|
<div class="md:hidden"> |
|
|
<button id="menu-btn" class="text-pink-600 focus:outline-none"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="mobile-menu" class="hidden md:hidden bg-white py-4 px-4 shadow-lg"> |
|
|
<a href="#diensten" class="block py-2 text-pink-600">Diensten</a> |
|
|
<a href="#overons" class="block py-2 text-gray-600">Over Ons</a> |
|
|
<a href="#reviews" class="block py-2 text-gray-600">Reviews</a> |
|
|
<a href="#contact" class="block py-2 text-gray-600">Contact</a> |
|
|
<a href="#afspraak" class="block mt-4 py-2 bg-pink-600 text-white text-center rounded-full font-bold">Afspraak Maken</a> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="hero-gradient text-white py-20 md:py-32"> |
|
|
<div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-12 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Ontdek uw natuurlijke schoonheid bij [Salon Naam]</h1> |
|
|
<p class="text-xl mb-8">Professionele schoonheidsbehandelingen op maat in het hart van [Plaatsnaam]. Onze experts helpen u om uw beste zelf naar voren te brengen.</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<a href="#afspraak" class="bg-white text-pink-600 hover:bg-gray-100 font-bold py-4 px-8 rounded-full text-center pulse-animation"> |
|
|
<i class="fas fa-calendar-check mr-2"></i> Boek Nu Online |
|
|
</a> |
|
|
<a href="tel:+31123456789" class="border-2 border-white hover:bg-white hover:text-pink-600 font-bold py-4 px-8 rounded-full text-center"> |
|
|
<i class="fas fa-phone-alt mr-2"></i> Bel Ons Direct |
|
|
</a> |
|
|
</div> |
|
|
<div class="mt-8 flex items-center"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img src="https://randomuser.me/api/portraits/women/1.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="Klant"> |
|
|
<img src="https://randomuser.me/api/portraits/women/2.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="Klant"> |
|
|
<img src="https://randomuser.me/api/portraits/women/3.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="Klant"> |
|
|
</div> |
|
|
<p class="ml-4 text-sm">Meer dan <span class="font-bold">500+</span> tevreden klanten in [Plaatsnaam]</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<div class="relative floating"> |
|
|
<img src="https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Schoonheidsbehandeling" class="rounded-lg shadow-2xl w-full max-w-md"> |
|
|
<div class="absolute -bottom-6 -right-6 bg-white text-pink-600 py-3 px-6 rounded-full shadow-lg"> |
|
|
<div class="flex items-center"> |
|
|
<div class="text-3xl font-bold">50%</div> |
|
|
<div class="ml-2 text-xs">KORTING<br>EERSTE BEZOEK</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-gray-50 py-8"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-wrap justify-center items-center"> |
|
|
<div class="px-6 py-4 flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-500 text-2xl mr-3"></i> |
|
|
<span>Gecertificeerde professionals</span> |
|
|
</div> |
|
|
<div class="px-6 py-4 flex items-center"> |
|
|
<i class="fas fa-star text-yellow-400 text-2xl mr-3"></i> |
|
|
<span>5/5 op Google Reviews</span> |
|
|
</div> |
|
|
<div class="px-6 py-4 flex items-center"> |
|
|
<i class="fas fa-leaf text-green-400 text-2xl mr-3"></i> |
|
|
<span>Natuurlijke producten</span> |
|
|
</div> |
|
|
<div class="px-6 py-4 flex items-center"> |
|
|
<i class="fas fa-shield-alt text-blue-400 text-2xl mr-3"></i> |
|
|
<span>Hygieneprotocol</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="diensten" class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Onze Luxe Behandelingen</h2> |
|
|
<p class="text-xl text-gray-600 max-w-2xl mx-auto">Ontdek onze uitgebreide selectie van professionele schoonheidsbehandelingen, speciaal ontworpen om uw natuurlijke schoonheid te versterken.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300"> |
|
|
<img src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Gezichtsbehandeling" class="w-full h-56 object-cover"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">Luxe Gezichtsbehandeling</h3> |
|
|
<p class="text-gray-600 mb-4">Een complete behandeling met reiniging, peeling, massage en masker voor een stralende huid.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-pink-600 font-bold text-lg">€59</span> |
|
|
<a href="#afspraak" class="text-pink-600 hover:text-pink-800 font-medium">Boek nu <i class="fas fa-arrow-right ml-1"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300"> |
|
|
<img src="https://images.unsplash.com/photo-1596703262835-4dc4a2e0705b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Nagelstyling" class="w-full h-56 object-cover"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">Premium Nagelstyling</h3> |
|
|
<p class="text-gray-600 mb-4">Gel polish, acrylnagels of een klassieke manicure - wij maken uw handen perfect.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-pink-600 font-bold text-lg">€35-€75</span> |
|
|
<a href="#afspraak" class="text-pink-600 hover:text-pink-800 font-medium">Boek nu <i class="fas fa-arrow-right ml-1"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300"> |
|
|
<img src="https://images.unsplash.com/photo-1556228453-efd6c1ff04f6?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Massage" class="w-full h-56 object-cover"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">Ontspannende Massage</h3> |
|
|
<p class="text-gray-600 mb-4">Laat spanning los met onze therapeutische massages, beschikbaar in verschillende stijlen.</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-pink-600 font-bold text-lg">€65-€120</span> |
|
|
<a href="#afspraak" class="text-pink-600 hover:text-pink-800 font-medium">Boek nu <i class="fas fa-arrow-right ml-1"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<a href="#afspraak" class="inline-block bg-pink-600 hover:bg-pink-700 text-white font-bold py-4 px-8 rounded-full"> |
|
|
<i class="fas fa-list-ul mr-2"></i> Bekijk Alle Diensten |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gradient-to-r from-pink-500 to-purple-600 text-white"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl font-bold mb-6">Speciale Welkomstaanbieding!</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto">Nieuwe klanten ontvangen <span class="font-bold">50% korting</span> op hun eerste behandeling. Beperkte tijd beschikbaar!</p> |
|
|
<div class="bg-white text-pink-600 inline-block py-2 px-6 rounded-full mb-8"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-clock mr-2"></i> |
|
|
<span id="countdown" class="font-bold">Aanbieding eindigt over: 02:59:59</span> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<a href="#afspraak" class="inline-block bg-white text-pink-600 hover:bg-gray-100 font-bold py-4 px-8 rounded-full mr-4"> |
|
|
<i class="fas fa-gift mr-2"></i> Claim Uw Korting |
|
|
</a> |
|
|
<a href="#" class="inline-block border-2 border-white hover:bg-white hover:text-pink-600 font-bold py-4 px-8 rounded-full"> |
|
|
<i class="fas fa-info-circle mr-2"></i> Meer Info |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="overons" class="py-20 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-12 md:mb-0 md:pr-12"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-6">Over Schoonheidssalon [Naam]</h2> |
|
|
<p class="text-gray-600 mb-4">Al meer dan 10 jaar zijn wij de vertrouwde schoonheidssalon in [Plaatsnaam]. Onze passie is om iedere klant te helpen zich mooi en zelfverzekerd te voelen.</p> |
|
|
<p class="text-gray-600 mb-6">Ons team van gecertificeerde professionals blijft zich continu bijscholen om u de nieuwste en beste behandelingen te kunnen aanbieden.</p> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-pink-500 mr-3"></i> |
|
|
<span>Persoonlijke aandacht voor elke klant</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-pink-500 mr-3"></i> |
|
|
<span>Alleen hoogwaardige producten</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-pink-500 mr-3"></i> |
|
|
<span>Hygienisch en veilig</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-pink-500 mr-3"></i> |
|
|
<span>Ontspannen sfeer</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#afspraak" class="inline-block bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-6 rounded-full"> |
|
|
<i class="fas fa-calendar-alt mr-2"></i> Maak Een Afspraak |
|
|
</a> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1580618672591-eb160b6fbbee?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Salon interieur" class="rounded-lg shadow-lg w-full"> |
|
|
<div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-lg shadow-lg hidden md:block"> |
|
|
<div class="flex items-center"> |
|
|
<div class="text-pink-500 text-4xl font-bold mr-3">10+</div> |
|
|
<div class="text-gray-700">Jaar ervaring<br>in [Plaatsnaam]</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="reviews" class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">Wat Onze Klanten Zeggen</h2> |
|
|
<p class="text-xl text-gray-600 max-w-2xl mx-auto">We zijn trots op onze uitstekende reputatie en de vele positieve reacties van onze tevreden klanten.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-lg"> |
|
|
<div class="flex mb-4"> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-6">"Ik kom hier al jaren voor mijn gelnagels en ben altijd super tevreden. Professioneel team en altijd perfect resultaat!"</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Sanne" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Sanne</h4> |
|
|
<p class="text-gray-500 text-sm">[Plaatsnaam]</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-lg"> |
|
|
<div class="flex mb-4"> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-6">"De gezichtsbehandeling was heerlijk ontspannend en mijn huid ziet er stralend uit. Absoluut een aanrader!"</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Lisa" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Lisa</h4> |
|
|
<p class="text-gray-500 text-sm">[Plaatsnaam]</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-lg"> |
|
|
<div class="flex mb-4"> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-6">"Als cadeau een massage gekregen en het was fantastisch! Nu kom ik regelmatig terug voor ontspanning."</p> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Eva" class="w-12 h-12 rounded-full mr-4"> |
|
|
<div> |
|
|
<h4 class="font-bold">Eva</h4> |
|
|
<p class="text-gray-500 text-sm">[Plaatsnaam]</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<a href="#" class="inline-flex items-center text-pink-600 hover:text-pink-800 font-medium"> |
|
|
<i class="fab fa-google mr-2"></i> Bekijk Alle 127 Reviews op Google |
|
|
<i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-pink-50"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-6">Klaar Om Uw Schoonheidsreis Te Beginnen?</h2> |
|
|
<p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">Boek vandaag nog uw afspraak en ervaar het verschil van professionele schoonheidszorg.</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<a href="#afspraak" class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-4 px-8 rounded-full inline-flex items-center justify-center"> |
|
|
<i class="fas fa-calendar-alt mr-2"></i> Online Boeken |
|
|
</a> |
|
|
<a href="tel:+31123456789" class="border-2 border-pink-600 text-pink-600 hover:bg-pink-600 hover:text-white font-bold py-4 px-8 rounded-full inline-flex items-center justify-center"> |
|
|
<i class="fas fa-phone-alt mr-2"></i> Bel Ons: 012-3456789 |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row"> |
|
|
<div class="md:w-1/2 mb-12 md:mb-0 md:pr-12"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-6">Onze Locatie</h2> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
<i class="fas fa-map-marker-alt text-pink-500 mr-2"></i> Voorbeeldstraat 123<br> |
|
|
<span class="ml-6">1234 AB [Plaatsnaam]</span> |
|
|
</p> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
<i class="fas fa-phone-alt text-pink-500 mr-2"></i> 012-3456789 |
|
|
</p> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
<i class="fas fa-envelope text-pink-500 mr-2"></i> [email protected] |
|
|
</p> |
|
|
<p class="text-gray-600 mb-8"> |
|
|
<i class="fas fa-clock text-pink-500 mr-2"></i> Ma-Vr: 09:00 - 18:00<br> |
|
|
<span class="ml-6">Za: 09:00 - 17:00</span><br> |
|
|
<span class="ml-6">Zo: Gesloten</span> |
|
|
</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="bg-blue-600 text-white p-3 rounded-full hover:bg-blue-700"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-pink-500 text-white p-3 rounded-full hover:bg-pink-600"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-blue-400 text-white p-3 rounded-full hover:bg-blue-500"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2"> |
|
|
<div class="bg-gray-200 h-96 rounded-lg overflow-hidden"> |
|
|
|
|
|
<div class="flex items-center justify-center h-full bg-gray-100"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-map-marked-alt text-4xl text-gray-400 mb-4"></i> |
|
|
<p class="text-gray-600">Kaart van onze locatie</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="afspraak" class="py-20 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="md:flex"> |
|
|
<div class="md:w-1/2 bg-pink-600 text-white p-8 md:p-12"> |
|
|
<h2 class="text-3xl font-bold mb-6">Maak Een Afspraak</h2> |
|
|
<p class="mb-6">Vul het formulier in en wij nemen zo snel mogelijk contact met u op om uw afspraak te bevestigen.</p> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-xl mr-3"></i> |
|
|
<span>Directe bevestiging</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-xl mr-3"></i> |
|
|
<span>Geen verborgen kosten</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-xl mr-3"></i> |
|
|
<span>Flexibele annulering</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 p-8 md:p-12"> |
|
|
<form id="booking-form" class="space-y-6"> |
|
|
<div> |
|
|
<label for="name" class="block text-gray-700 font-medium mb-2">Uw Naam*</label> |
|
|
<input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent" required> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-gray-700 font-medium mb-2">E-mailadres*</label> |
|
|
<input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent" required> |
|
|
</div> |
|
|
<div> |
|
|
<label for="phone" class="block text-gray-700 font-medium mb-2">Telefoonnummer*</label> |
|
|
<input type="tel" id="phone" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent" required> |
|
|
</div> |
|
|
<div> |
|
|
<label for="service" class="block text-gray-700 font-medium mb-2">Behandeling*</label> |
|
|
<select id="service" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent" required> |
|
|
<option value="">Selecteer een behandeling</option> |
|
|
<option value="gezichtsbehandeling">Gezichtsbehandeling</option> |
|
|
<option value="nagelstyling">Nagelstyling</option> |
|
|
<option value="massage">Massage</option> |
|
|
<option value="wimperextensions">Wimperextensions</option> |
|
|
<option value="waxen">Waxen</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label for="date" class="block text-gray-700 font-medium mb-2">Gewenste datum*</label> |
|
|
<input type="date" id="date" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent" required> |
|
|
</div> |
|
|
<div> |
|
|
<button type="submit" class="w-full bg-pink-600 hover:bg-pink-700 text-white font-bold py-4 px-6 rounded-lg"> |
|
|
Verstuur Aanvraag |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-pink-600 text-white"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl font-bold mb-6">Blijf Op De Hoogte</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto">Meld u aan voor onze nieuwsbrief en ontvang exclusieve aanbiedingen en beauty tips.</p> |
|
|
<form class="max-w-md mx-auto flex"> |
|
|
<input type="email" placeholder="Uw e-mailadres" class="flex-grow px-4 py-3 rounded-l-lg focus:outline-none text-gray-800"> |
|
|
<button type="submit" class="bg-pink-800 hover:bg-pink-900 px-6 py-3 rounded-r-lg font-bold"> |
|
|
Aanmelden |
|
|
</button> |
|
|
</form> |
|
|
<p class="mt-4 text-sm opacity-80">Wij delen uw gegevens nooit met derden. U kunt zich altijd uitschrijven.</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4">Schoonheidssalon [Naam]</h3> |
|
|
<p class="text-gray-400">Uw vertrouwde schoonheidssalon in [Plaatsnaam] voor alle beautybehandelingen.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Snelle Links</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#diensten" class="text-gray-400 hover:text-white">Diensten</a></li> |
|
|
<li><a href="#overons" class="text-gray-400 hover:text-white">Over Ons</a></li> |
|
|
<li><a href="#reviews" class="text-gray-400 hover:text-white">Reviews</a></li> |
|
|
<li><a href="#contact" class="text-gray-400 hover:text-white">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Contact</h4> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-map-marker-alt mt-1 mr-3 text-pink-500"></i> |
|
|
<span>Voorbeeldstraat 123<br>1234 AB [Plaatsnaam]</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-phone-alt mr-3 text-pink-500"></i> |
|
|
<span>012-3456789</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-envelope mr-3 text-pink-500"></i> |
|
|
<span>[email protected]</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Openingstijden</h4> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li>Maandag - Vrijdag: 09:00 - 18:00</li> |
|
|
<li>Zaterdag: 09:00 - 17:00</li> |
|
|
<li>Zondag: Gesloten</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-400 mb-4 md:mb-0">© 2023 Schoonheidssalon [Naam]. Alle rechten voorbehouden.</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-pinterest-p"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div class="fixed bottom-6 right-6 z-50"> |
|
|
<a href="#afspraak" class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-4 px-4 rounded-full shadow-lg flex items-center justify-center pulse-animation" style="width: 60px; height: 60px;"> |
|
|
<i class="fas fa-calendar-alt text-xl"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('menu-btn').addEventListener('click', function() { |
|
|
document.getElementById('mobile-menu').classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
function updateCountdown() { |
|
|
const now = new Date(); |
|
|
const endOfDay = new Date(); |
|
|
endOfDay.setHours(23, 59, 59, 999); |
|
|
|
|
|
const diff = endOfDay - now; |
|
|
|
|
|
const hours = Math.floor(diff / (1000 * 60 * 60)); |
|
|
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); |
|
|
const seconds = Math.floor((diff % (1000 * 60)) / 1000); |
|
|
|
|
|
document.getElementById('countdown').textContent = `Aanbieding eindigt over: ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; |
|
|
} |
|
|
|
|
|
setInterval(updateCountdown, 1000); |
|
|
updateCountdown(); |
|
|
|
|
|
|
|
|
document.getElementById('booking-form').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
alert('Bedankt voor uw aanvraag! Wij nemen zo snel mogelijk contact met u op om uw afspraak te bevestigen.'); |
|
|
this.reset(); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
if (targetId === '#') return; |
|
|
|
|
|
const targetElement = document.querySelector(targetId); |
|
|
if (targetElement) { |
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 100, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
if (!document.getElementById('mobile-menu').classList.contains('hidden')) { |
|
|
document.getElementById('mobile-menu').classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jitware/salon" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
