Spaces:
Running
Running
| <html lang="nl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Meer Klanten Aantrekken als Nagelstylist | Online Marketing Tips</title> | |
| <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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 50%, #f48fb1 100%); | |
| } | |
| .nail-polish { | |
| position: absolute; | |
| width: 120px; | |
| height: 120px; | |
| border-radius: 50%; | |
| opacity: 0.15; | |
| z-index: 0; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .social-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .social-icon:hover { | |
| transform: scale(1.2); | |
| } | |
| .highlight-box { | |
| background: linear-gradient(135deg, #fff9f9 0%, #fff0f5 100%); | |
| border-left: 4px solid #f472b6; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-pink-50"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-6 py-12 relative overflow-hidden"> | |
| <div class="nail-polish bg-pink-300 top-10 left-10"></div> | |
| <div class="nail-polish bg-purple-300 bottom-10 right-10"></div> | |
| <div class="relative z-10"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Meer Klanten Aantrekken als Nagelstylist</h1> | |
| <p class="text-xl md:text-2xl opacity-90">Ontdek hoe je met online marketing je nagelstudio kunt laten groeien</p> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-md sticky top-0 z-50"> | |
| <div class="container mx-auto px-6 py-3"> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-2xl font-bold text-pink-600">NailPro</a> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#belang" class="text-gray-700 hover:text-pink-600">Belang</a> | |
| <a href="#strategieen" class="text-gray-700 hover:text-pink-600">Strategieën</a> | |
| <a href="#platforms" class="text-gray-700 hover:text-pink-600">Platforms</a> | |
| <a href="#website" class="text-gray-700 hover:text-pink-600">Website</a> | |
| <a href="#tips" class="text-gray-700 hover:text-pink-600">Tips</a> | |
| </div> | |
| <button class="md:hidden text-gray-700"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-6 py-12"> | |
| <!-- Belang Section --> | |
| <section id="belang" class="mb-16 highlight-box p-8 rounded-lg"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-6">Waarom online aanwezigheid essentieel is</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div> | |
| <p class="text-gray-700 mb-4">Volgens recent onderzoek vindt 85% van de consumenten lokale bedrijven online voordat ze een aankoop doen. Voor nagelstylisten betekent dit:</p> | |
| <ul class="space-y-3 text-gray-700"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-pink-500 mt-1 mr-3"></i> | |
| <span>Potentiële klanten kunnen je 24/7 ontdekken</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-pink-500 mt-1 mr-3"></i> | |
| <span>Je bereikt een veel groter publiek dan alleen via mond-tot-mondreclame</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-pink-500 mt-1 mr-3"></i> | |
| <span>Je kunt je specialisaties en unieke stijl beter tonen</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <h3 class="text-xl font-bold text-pink-600 mb-3">Feiten over nagelstylisten online:</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-medium">Instagram gebruik onder nagelstylisten</span> | |
| <span class="font-bold text-pink-600">92%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-pink-600 h-2.5 rounded-full" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-medium">Klanten die online boeken</span> | |
| <span class="font-bold text-pink-600">68%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-pink-600 h-2.5 rounded-full" style="width: 68%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-medium">Beslissing gebaseerd op online portfolio</span> | |
| <span class="font-bold text-pink-600">79%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-pink-600 h-2.5 rounded-full" style="width: 79%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Strategieën Section --> | |
| <section id="strategieen" class="mb-16"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Bewezen Strategieën uit de Praktijk</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Card 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 card-hover"> | |
| <div class="h-48 bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-camera-retro text-6xl text-purple-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-3">Professionele Fotografie</h3> | |
| <p class="text-gray-600 mb-4">Investeer in hoogwaardige foto's van je werk. Gebruik consistente achtergronden en goede belichting.</p> | |
| <div class="bg-purple-50 p-4 rounded-lg"> | |
| <h4 class="font-semibold text-purple-800 mb-2">Succesfactor:</h4> | |
| <p class="text-sm text-purple-700">Nagelstylisten met professionele foto's krijgen 3x meer aanvragen.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 card-hover"> | |
| <div class="h-48 bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-calendar-check text-6xl text-blue-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-3">Online Boeksysteem</h3> | |
| <p class="text-gray-600 mb-4">Implementeer een eenvoudig online boekingssysteem dat 24/7 beschikbaar is.</p> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <h4 class="font-semibold text-blue-800 mb-2">Voordeel:</h4> | |
| <p class="text-sm text-blue-700">Vermindert telefoontjes en verhoogt conversie met 40%.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Card 3 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden transition duration-300 card-hover"> | |
| <div class="h-48 bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-gift text-6xl text-green-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-3">Referral Programma</h3> | |
| <p class="text-gray-600 mb-4">Moedig bestaande klanten aan om vriendinnen te introduceren met een beloningssysteem.</p> | |
| <div class="bg-green-50 p-4 rounded-lg"> | |
| <h4 class="font-semibold text-green-800 mb-2">Resultaat:</h4> | |
| <p class="text-sm text-green-700">Verantwoordelijk voor 35% van nieuwe klanten bij top salons.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Platforms Section --> | |
| <section id="platforms" class="mb-16 bg-white rounded-xl shadow-md p-8"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Optimale Platform Keuzes</h2> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <div class="lg:w-1/2"> | |
| <h3 class="text-2xl font-bold text-pink-600 mb-6">Top 3 Platforms voor Nagelstylisten</h3> | |
| <div class="space-y-6"> | |
| <!-- Instagram --> | |
| <div class="flex items-start"> | |
| <div class="bg-pink-100 text-pink-600 p-3 rounded-lg mr-4"> | |
| <i class="fab fa-instagram text-2xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg text-gray-800 mb-2">Instagram</h4> | |
| <p class="text-gray-600 mb-2">Ideaal voor visuele showcase van je werk. Gebruik Reels voor tutorials en achter-de-schermen content.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-pink-100 text-pink-800 px-2 py-1 rounded-full text-xs">#nageldesign</span> | |
| <span class="bg-pink-100 text-pink-800 px-2 py-1 rounded-full text-xs">#nagelkunst</span> | |
| <span class="bg-pink-100 text-pink-800 px-2 py-1 rounded-full text-xs">#[jouwstad]nagels</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Facebook --> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 text-blue-600 p-3 rounded-lg mr-4"> | |
| <i class="fab fa-facebook text-2xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg text-gray-800 mb-2">Facebook</h4> | |
| <p class="text-gray-600 mb-2">Perfect voor lokale promotie, evenementen en het bereiken van een ouder publiek.</p> | |
| <div class="text-sm text-blue-600 font-medium"> | |
| <i class="fas fa-check-circle mr-1"></i> Ideaal voor Google zoekresultaten | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pinterest --> | |
| <div class="flex items-start"> | |
| <div class="bg-red-100 text-red-600 p-3 rounded-lg mr-4"> | |
| <i class="fab fa-pinterest text-2xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg text-gray-800 mb-2">Pinterest</h4> | |
| <p class="text-gray-600">Krachtig voor inspiratieborden en het aantrekken van klanten die specifieke designs zoeken.</p> | |
| <div class="text-xs text-gray-500 mt-2"> | |
| <i class="fas fa-info-circle mr-1"></i> Pins hebben een lange levensduur | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-200"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4">Platform Vergelijking</h3> | |
| <table class="w-full text-sm"> | |
| <thead> | |
| <tr class="border-b border-gray-200"> | |
| <th class="text-left py-2">Platform</th> | |
| <th class="text-left py-2">Bereik</th> | |
| <th class="text-left py-2">Inzet</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b border-gray-100"> | |
| <td class="py-3 font-medium">Instagram</td> | |
| <td class="py-3">Hoog (visueel)</td> | |
| <td class="py-3">Dagelijks</td> | |
| </tr> | |
| <tr class="border-b border-gray-100"> | |
| <td class="py-3 font-medium">Facebook</td> | |
| <td class="py-3">Middelmatig</td> | |
| <td class="py-3">2-3x/week</td> | |
| </tr> | |
| <tr class="border-b border-gray-100"> | |
| <td class="py-3 font-medium">Pinterest</td> | |
| <td class="py-3">Langzaam groeiend</td> | |
| <td class="py-3">1x/week</td> | |
| </tr> | |
| <tr> | |
| <td class="py-3 font-medium">TikTok</td> | |
| <td class="py-3">Zeer hoog (jong)</td> | |
| <td class="py-3">3-5x/week</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <h4 class="font-bold mt-6 mb-3 text-gray-800">Aanbevolen Post Frequentie</h4> | |
| <div class="bg-white p-4 rounded-lg shadow-inner"> | |
| <div class="mb-2"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Instagram</span> | |
| <span class="font-medium">3-5x per week</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-pink-600 h-2 rounded-full" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-2"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Facebook</span> | |
| <span class="font-medium">2-3x per week</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 60%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>TikTok</span> | |
| <span class="font-medium">4-7x per week</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-black h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Website Section --> | |
| <section id="website" class="mb-16"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Je Website: Het Digitale Visitekaartje</h2> | |
| <div class="bg-gradient-to-r from-pink-50 to-purple-50 rounded-xl p-8 shadow-lg"> | |
| <div class="flex flex-col lg:flex-row gap-8 items-center"> | |
| <div class="lg:w-1/2"> | |
| <div class="space-y-6"> | |
| <div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Essentiële Elementen</h3> | |
| <ul class="space-y-3 text-gray-700"> | |
| <li class="flex items-start"> | |
| <div class="bg-pink-600 text-white rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mr-3 mt-1"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <div> | |
| <p><strong>Portfolio galerij</strong> met hoogwaardige foto's georganiseerd per stijl (gel, acryl, nail art)</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-pink-600 text-white rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mr-3 mt-1"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <div> | |
| <p><strong>Online boekingssysteem</strong> dat 24/7 beschikbaar is (bijv. via Treatwell of een eigen systeem)</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-pink-600 text-white rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mr-3 mt-1"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <div> | |
| <p><strong>Duidelijke prijslijst</strong> met alle services om teleurstellingen te voorkomen</p> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-pink-600 text-white rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 mr-3 mt-1"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| <div> | |
| <p><strong>Contactgegevens</strong> met Google Maps integratie voor eenvoudige routeplanning</p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg border-l-4 border-pink-400"> | |
| <h4 class="font-bold text-pink-600 mb-2">SEO Tip voor Nagelstylisten:</h4> | |
| <p class="text-gray-700 text-sm">Optimaliseer je website voor zoektermen zoals "nagelstylist [jouw stad]" en "nagels laten doen [jouw stad]". Voeg locatiepagina's toe voor verschillende wijken die je bedient.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-white p-4 rounded-lg shadow-xl border border-gray-200 transform rotate-1"> | |
| <div class="bg-gray-200 h-8 rounded-t-lg flex items-center px-3"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-center mb-4"> | |
| <h3 class="font-bold text-xl text-pink-600">Nail Studio Perfect</h3> | |
| <p class="text-gray-500 text-sm">Professionele nagelverzorging in [Jouw Stad]</p> | |
| </div> | |
| <div class="grid grid-cols-3 gap-2 mb-4"> | |
| <div class="bg-pink-100 rounded h-24 flex items-center justify-center"> | |
| <i class="fas fa-home text-pink-400 text-2xl"></i> | |
| </div> | |
| <div class="bg-pink-100 rounded h-24 flex items-center justify-center"> | |
| <i class="fas fa-images text-pink-400 text-2xl"></i> | |
| </div> | |
| <div class="bg-pink-100 rounded h-24 flex items-center justify-center"> | |
| <i class="fas fa-euro-sign text-pink-400 text-2xl"></i> | |
| </div> | |
| <div class="bg-pink-100 rounded h-24 flex items-center justify-center"> | |
| <i class="fas fa-calendar-alt text-pink-400 text-2xl"></i> | |
| </div> | |
| <div class="bg-pink-100 rounded h-24 flex items-center justify-center"> | |
| <i class="fas fa-map-marker-alt text-pink-400 text-2xl"></i> | |
| </div> | |
| <div class="bg-pink-100 rounded h-24 flex items-center justify-center"> | |
| <i class="fas fa-phone text-pink-400 text-2xl"></i> | |
| </div> | |
| </div> | |
| <div class="flex justify-between border-t pt-3 text-sm"> | |
| <a href="#" class="text-pink-600 font-medium">Home</a> | |
| <a href="#" class="text-pink-600 font-medium">Portfolio</a> | |
| <a href="#" class="text-pink-600 font-medium">Prijzen</a> | |
| <a href="#" class="text-pink-600 font-medium">Contact</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tips Section --> | |
| <section id="tips" class="mb-16"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Praktische Tips voor Direct Resultaat</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Tip 1 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-pink-500"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-pink-100 text-pink-600 p-3 rounded-full mr-4"> | |
| <i class="fas fa-hashtag text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg text-gray-800">Hashtag Strategie</h3> | |
| <p class="text-gray-600">Gebruik een mix van:</p> | |
| <ul class="mt-2 ml-4 space-y-1 text-gray-600"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-circle text-xs text-pink-500 mr-2"></i> | |
| <span>Populaire hashtags (#nagels #nageldesign)</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-circle text-xs text-pink-500 mr-2"></i> | |
| <span>Lokale hashtags (#nagelsamsterdam)</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-circle text-xs text-pink-500 mr-2"></i> | |
| <span>Niche hashtags (#acrylnagels #handpaintednails)</span> | |
| </li> | |
| </ul> | |
| <div class="mt-3 text-sm bg-pink-50 p-2 rounded"> | |
| <i class="fas fa-lightbulb text-pink-500 mr-1"></i> | |
| <span>Beperk tot 5-8 hashtags per post voor optimaal bereik</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tip 2 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-purple-500"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-purple-100 text-purple-600 p-3 rounded-full mr-4"> | |
| <i class="fas fa-user-friends text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg text-gray-800">Klantbetrokkenheid</h3> | |
| <p class="text-gray-600 mb-2">Verhoog interactie door:</p> | |
| <div class="grid grid-cols-2 gap-2 text-sm"> | |
| <span class="bg-purple-50 text-purple-800 px-2 py-1 rounded">Polls in Stories</span> | |
| <span class="bg-purple-50 text-purple-800 px-2 py-1 rounded">Q&A sessies</span> | |
| <span class="bg-purple-50 text-purple-800 px-2 py-1 rounded">Design votes</span> | |
| <span class="bg-purple-50 text-purple-800 px-2 py-1 rounded">Behind-the-scenes</span> | |
| </div> | |
| <div class="mt-3 text-xs text-purple-700"> | |
| <i class="fas fa-chart-line mr-1"></i> | |
| <span>Accounts met hoge betrokkenheid krijgen 2.5x meer zichtbaarheid</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tip 3 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-blue-100 text-blue-600 p-3 rounded-full mr-4"> | |
| <i class="fas fa-gift text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg text-gray-800">Promoties & Kortingen</h3> | |
| <p class="text-gray-600">Effectieve aanbiedingen:</p> | |
| <ul class="mt-2 ml-4 space-y-1 text-gray-600"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-circle text-xs text-blue-500 mr-2"></i> | |
| <span>Introductiekorting voor nieuwe klanten (10-15%)</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-circle text-xs text-blue-500 mr-2"></i> | |
| <span>Verjaardagsaanbieding (gratis nail art)</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-circle text-xs text-blue-500 mr-2"></i> | |
| <span>Referral korting (voor beide partijen)</span> | |
| </li> | |
| </ul> | |
| <div class="mt-2 text-sm text-blue-700"> | |
| <i class="fas fa-exclamation-triangle mr-1"></i> | |
| <span>Beperk aanbiedingen in tijd voor urgentie</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tip 4 --> | |
| <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-green-500"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-green-100 text-green-600 p-3 rounded-full mr-4"> | |
| <i class="fas fa-calendar-alt text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-lg text-gray-800">Content Planning</h3> | |
| <p class="text-gray-600 mb-2">Ideale content mix:</p> | |
| <div class="flex mb-2"> | |
| <div class="w-1/4 bg-green-500 text-white text-center py-1 text-xs">60%</div> | |
| <div class="w-3/4 bg-green-100 text-green-800 px-2 py-1 text-xs">Werk resultaten</div> | |
| </div> | |
| <div class="flex mb-2"> | |
| <div class="w-1/6 bg-green-500 text-white text-center py-1 text-xs">20%</div> | |
| <div class="w-5/6 bg-green-100 text-green-800 px-2 py-1 text-xs">Educatieve content</div> | |
| </div> | |
| <div class="flex"> | |
| <div class="w-1/6 bg-green-500 text-white text-center py-1 text-xs">20%</div> | |
| <div class="w-5/6 bg-green-100 text-green-800 px-2 py-1 text-xs">Persoonlijk/promotie</div> | |
| </div> | |
| <div class="mt-2 text-xs text-green-700"> | |
| <i class="fas fa-clock mr-1"></i> | |
| <span>Beste posttijden: 9-11u en 19-21u</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="gradient-bg text-white rounded-xl p-8 shadow-xl mb-16"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h2 class="text-3xl font-bold mb-4">Start vandaag met het optimaliseren van je online aanwezigheid!</h2> | |
| <p class="text-xl mb-8 opacity-90">Download onze complete checklist met 25 actiepunten speciaal voor nagelstylisten.</p> | |
| <form class="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto"> | |
| <input type="email" placeholder="Je e-mailadres" class="flex-grow px-4 py-3 rounded-full text-gray-800 focus:outline-none focus:ring-2 focus:ring-pink-300"> | |
| <button type="submit" class="bg-white text-pink-600 font-bold px-6 py-3 rounded-full hover:bg-gray-100 transition duration-300"> | |
| Download Checklist | |
| </button> | |
| </form> | |
| <p class="text-sm mt-4 opacity-80">Ruim 2.300 nagelstylisten gingen je voor!</p> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white pt-12 pb-6"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 text-pink-400">NailPro</h3> | |
| <p class="text-gray-400 mb-4">Expertise in online marketing voor nagelstylisten en beauty professionals.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="social-icon text-gray-400 hover:text-pink-400"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="social-icon text-gray-400 hover:text-pink-400"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="social-icon text-gray-400 hover:text-pink-400"><i class="fab fa-pinterest"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Resources</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-pink-400 transition">Blog</a></li> | |
| <li><a href="#" class="hover:text-pink-400 transition">Case Studies</a></li> | |
| <li><a href="#" class="hover:text-pink-400 transition">Webinars</a></li> | |
| <li><a href="#" class="hover:text-pink-400 transition">Tools</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Services</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-pink-400 transition">Website Ontwerp</a></li> | |
| <li><a href="#" class="hover:text-pink-400 transition">Social Media Beheer</a></li> | |
| <li><a href="#" class="hover:text-pink-400 transition">SEO Optimalisatie</a></li> | |
| <li><a href="#" class="hover:text-pink-400 transition">Fotografie</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Contact</h4> | |
| <address class="not-italic text-gray-400 space-y-2"> | |
| <p><i class="fas fa-map-marker-alt mr-2 text-pink-400"></i> Beauty Lane 123, Amsterdam</p> | |
| <p><i class="fas fa-phone mr-2 text-pink-400"></i> 020-1234567</p> | |
| <p><i class="fas fa-envelope mr-2 text-pink-400"></i> [email protected]</p> | |
| </address> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 pt-6 text-center text-gray-400"> | |
| <p>© 2023 NailPro. Alle rechten voorbehouden. <a href="#" class="hover:text-pink-400">Privacybeleid</a> | <a href="#" class="hover:text-pink-400">Algemene voorwaarden</a></p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.querySelector('button.md\\:hidden').addEventListener('click', function() { | |
| const nav = document.querySelector('.hidden.md\\:flex'); | |
| if (nav.classList.contains('hidden')) { | |
| nav.classList.remove('hidden'); | |
| nav.classList.add('flex', 'flex-col', 'absolute', 'top-16', 'left-0', 'right-0', 'bg-white', 'p-4', 'shadow-md', 'space-y-4'); | |
| } else { | |
| nav.classList.add('hidden'); | |
| nav.classList.remove('flex', 'flex-col', 'absolute', 'top-16', 'left-0', 'right-0', 'bg-white', 'p-4', 'shadow-md', 'space-y-4'); | |
| } | |
| }); | |
| // Smooth scrolling | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.querySelector('.hidden.md\\:flex'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| mobileMenu.classList.remove('flex', 'flex-col', 'absolute', 'top-16', 'left-0', 'right-0', 'bg-white', 'p-4', 'shadow-md', 'space-y-4'); | |
| } | |
| }); | |
| }); | |
| // Form submission | |
| document.querySelectorAll('form').forEach(form => { | |
| form.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const email = this.querySelector('input[type="email"]').value; | |
| if (email) { | |
| alert(`Bedankt! De checklist is verzonden naar ${email}`); | |
| this.querySelector('input[type="email"]').value = ''; | |
| } | |
| }); | |
| }); | |
| </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/nagelstyliste" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |