|
|
<!DOCTYPE html> |
|
|
<html lang="nl"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Chat Assistant - Slimme gesprekken op elk moment</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, #6e8efb 0%, #a777e3 100%); |
|
|
} |
|
|
.chat-bubble { |
|
|
border-radius: 20px; |
|
|
position: relative; |
|
|
padding: 15px; |
|
|
margin: 10px 0; |
|
|
max-width: 80%; |
|
|
} |
|
|
.user-bubble { |
|
|
background: #e2f3ff; |
|
|
margin-left: auto; |
|
|
border-bottom-right-radius: 5px; |
|
|
} |
|
|
.ai-bubble { |
|
|
background: #f0f0f0; |
|
|
margin-right: auto; |
|
|
border-bottom-left-radius: 5px; |
|
|
} |
|
|
.pulse { |
|
|
animation: pulse 1.5s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
100% { opacity: 1; } |
|
|
} |
|
|
.premium-feature { |
|
|
position: relative; |
|
|
padding-left: 30px; |
|
|
} |
|
|
.premium-feature:before { |
|
|
content: "✓"; |
|
|
color: #10b981; |
|
|
font-weight: bold; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans bg-gray-50"> |
|
|
|
|
|
<header class="gradient-bg text-white py-16"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-6">Chat met AI - Slimmer dan ooit</h1> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto">Ontvang directe antwoorden op al je vragen. Upgrade naar Premium voor live chat!</p> |
|
|
<div class="flex justify-center space-x-4"> |
|
|
<button onclick="scrollToChat()" class="bg-white text-purple-600 hover:bg-gray-100 px-8 py-3 rounded-full font-bold text-lg transition duration-300">Gratis proberen</button> |
|
|
<button onclick="scrollToPricing()" class="bg-transparent border-2 border-white hover:bg-white hover:text-purple-600 px-8 py-3 rounded-full font-bold text-lg transition duration-300">Premium worden</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Waarom onze AI chatten?</h2> |
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="text-center p-6 rounded-lg bg-gray-50 hover:shadow-lg transition duration-300"> |
|
|
<div class="text-purple-500 text-4xl mb-4"><i class="fas fa-brain"></i></div> |
|
|
<h3 class="text-xl font-bold mb-3">Krachtige AI</h3> |
|
|
<p class="text-gray-600">Onze geavanceerde AI begrijpt context en geeft nuttige antwoorden op complexe vragen.</p> |
|
|
</div> |
|
|
<div class="text-center p-6 rounded-lg bg-gray-50 hover:shadow-lg transition duration-300"> |
|
|
<div class="text-purple-500 text-4xl mb-4"><i class="fas fa-clock"></i></div> |
|
|
<h3 class="text-xl font-bold mb-3">Altijd beschikbaar</h3> |
|
|
<p class="text-gray-600">24/7 beschikbaar, geen wachttijden. Premium gebruikers krijgen prioriteit en live antwoorden.</p> |
|
|
</div> |
|
|
<div class="text-center p-6 rounded-lg bg-gray-50 hover:shadow-lg transition duration-300"> |
|
|
<div class="text-purple-500 text-4xl mb-4"><i class="fas fa-shield-alt"></i></div> |
|
|
<h3 class="text-xl font-bold mb-3">Veilig & Privé</h3> |
|
|
<p class="text-gray-600">We beschermen je privacy en slaan geen persoonlijke gesprekken op zonder toestemming.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="chat-demo" class="py-16 bg-gray-100"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-8">Ervaar het verschil</h2> |
|
|
<p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Gratis gebruikers krijgen antwoorden met vertraging. Premium gebruikers genieten van directe, live interactie.</p> |
|
|
|
|
|
<div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden"> |
|
|
<div class="bg-purple-600 text-white p-4 flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 rounded-full bg-green-400 mr-2"></div> |
|
|
<span class="font-bold">AI Chat Assistant</span> |
|
|
</div> |
|
|
<div class="text-sm">Gratis versie - vertraagde antwoorden</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 h-96 overflow-y-auto" id="demo-chat"> |
|
|
<div class="chat-bubble ai-bubble"> |
|
|
Hallo! Ik ben je AI assistent. Stel me gerust een vraag. Als gratis gebruiker krijg je mijn antwoorden met een kleine vertraging. |
|
|
</div> |
|
|
<div class="chat-bubble user-bubble"> |
|
|
Wat is het weer vandaag in Amsterdam? |
|
|
</div> |
|
|
<div class="chat-bubble ai-bubble flex items-center"> |
|
|
<div class="pulse mr-2">...</div> |
|
|
<span>Denkend aan een antwoord</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 border-t border-gray-200 bg-gray-50"> |
|
|
<div class="flex"> |
|
|
<input type="text" placeholder="Typ je bericht..." class="flex-grow px-4 py-2 rounded-l-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500"> |
|
|
<button class="bg-purple-600 text-white px-6 py-2 rounded-r-full hover:bg-purple-700 transition duration-300">Versturen</button> |
|
|
</div> |
|
|
<p class="text-sm text-gray-500 mt-2 text-center">Premium gebruikers krijgen directe antwoorden <a href="#pricing" class="text-purple-600 font-bold">Upgrade nu</a></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="pricing" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-2">Kies je plan</h2> |
|
|
<p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Betaal slechts €5 per maand voor directe, live antwoorden van onze AI.</p> |
|
|
|
|
|
<div class="max-w-4xl mx-auto grid md:grid-cols-2 gap-8"> |
|
|
<div class="border border-gray-200 rounded-xl p-8 hover:shadow-lg transition duration-300"> |
|
|
<h3 class="text-2xl font-bold mb-4">Gratis</h3> |
|
|
<div class="text-4xl font-bold mb-6">€0<span class="text-lg text-gray-500">/maand</span></div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="premium-feature">Basis AI antwoorden</li> |
|
|
<li class="premium-feature">Vertraagde reacties (2-5 minuten)</li> |
|
|
<li class="premium-feature">Max 20 berichten per dag</li> |
|
|
<li class="text-gray-400">Geen live chat</li> |
|
|
<li class="text-gray-400">Geen prioriteit</li> |
|
|
</ul> |
|
|
<button onclick="scrollToChat()" class="w-full bg-gray-200 text-gray-800 py-3 rounded-full font-bold hover:bg-gray-300 transition duration-300">Gratis gebruiken</button> |
|
|
</div> |
|
|
|
|
|
<div class="border-2 border-purple-500 rounded-xl p-8 bg-purple-50 relative hover:shadow-lg transition duration-300"> |
|
|
<div class="absolute top-0 right-0 bg-purple-500 text-white px-4 py-1 text-sm font-bold rounded-bl-xl">POPULAIR</div> |
|
|
<h3 class="text-2xl font-bold mb-4">Premium</h3> |
|
|
<div class="text-4xl font-bold mb-6">€5<span class="text-lg text-gray-500">/maand</span></div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="premium-feature">Directe live antwoorden</li> |
|
|
<li class="premium-feature">Onbeperkt chatten</li> |
|
|
<li class="premium-feature">Prioritaire verwerking</li> |
|
|
<li class="premium-feature">Geen wachttijden</li> |
|
|
<li class="premium-feature">Premium ondersteuning</li> |
|
|
</ul> |
|
|
<button onclick="showPaymentModal()" class="w-full gradient-bg text-white py-3 rounded-full font-bold hover:opacity-90 transition duration-300">Nu upgraden</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="max-w-2xl mx-auto mt-12 bg-yellow-50 border-l-4 border-yellow-400 p-4"> |
|
|
<div class="flex"> |
|
|
<div class="text-yellow-500 mr-3"><i class="fas fa-exclamation-circle"></i></div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-1">14 dagen geld-terug-garantie</h4> |
|
|
<p class="text-sm text-gray-600">Niet tevreden? Wij geven je geld terug binnen 14 dagen na aankoop, geen vragen gesteld.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-100"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Wat onze gebruikers zeggen</h2> |
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold mr-4">JD</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Jan de Vries</h4> |
|
|
<div class="flex text-yellow-400"> |
|
|
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600">"De premium versie is elke cent waard. Directe antwoorden besparen me zoveel tijd in mijn werk!"</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold mr-4">MS</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Marije Smit</h4> |
|
|
<div class="flex text-yellow-400"> |
|
|
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600">"Eerst de gratis versie geprobeerd, maar na een dag al geüpgraded. Het verschil is enorm!"</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-lg shadow-sm"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold mr-4">TK</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Thomas Klaassen</h4> |
|
|
<div class="flex text-yellow-400"> |
|
|
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600">"Perfecte balans tussen kwaliteit en prijs. Betaalbaar premium abonnement met uitstekende service."</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="gradient-bg text-white py-16"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">Klaar om te upgraden naar premium?</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto">Ontvang directe AI antwoorden voor slechts €5 per maand. Geen contract, annuleer wanneer je wilt.</p> |
|
|
<button onclick="showPaymentModal()" class="bg-white text-purple-600 hover:bg-gray-100 px-10 py-4 rounded-full font-bold text-lg transition duration-300 shadow-lg">Nu upgraden voor €5/maand</button> |
|
|
<p class="mt-4 text-purple-100">14 dagen geld-terug-garantie</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div id="payment-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-xl max-w-md w-full mx-4 p-6 relative"> |
|
|
<button onclick="hidePaymentModal()" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
<h3 class="text-2xl font-bold mb-4">Premium Upgrade</h3> |
|
|
<p class="text-gray-600 mb-6">Vul je gegevens in om premium lid te worden voor €5 per maand.</p> |
|
|
|
|
|
<form class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Naam</label> |
|
|
<input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Email</label> |
|
|
<input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 mb-2">Betaalmethode</label> |
|
|
<select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"> |
|
|
<option>Creditcard</option> |
|
|
<option>iDEAL</option> |
|
|
<option>PayPal</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="pt-2"> |
|
|
<button type="button" class="w-full gradient-bg text-white py-3 rounded-lg font-bold hover:opacity-90 transition duration-300"> |
|
|
Nu betalen €5/maand |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
|
|
|
<div class="mt-6 text-center text-sm text-gray-500"> |
|
|
<p>Door te upgraden ga je akkoord met onze <a href="#" class="text-purple-600">Algemene Voorwaarden</a>.</p> |
|
|
<p class="mt-2">Je kunt op elk moment annuleren.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">AI Chat Assistant</h4> |
|
|
<p class="text-gray-400">De slimste AI chat service voor directe antwoorden op al je vragen.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">Links</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Home</a></li> |
|
|
<li><a href="#chat-demo" class="text-gray-400 hover:text-white transition duration-300">Demo</a></li> |
|
|
<li><a href="#pricing" class="text-gray-400 hover:text-white transition duration-300">Prijzen</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">FAQ</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">Legal</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Privacybeleid</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Voorwaarden</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Cookiebeleid</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">Contact</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center text-gray-400"><i class="fas fa-envelope mr-2"></i> support@aichat.nl</li> |
|
|
<li class="flex items-center text-gray-400"><i class="fas fa-phone mr-2"></i> +31 20 123 4567</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> |
|
|
<p>© 2023 AI Chat Assistant. Alle rechten voorbehouden.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
function scrollToChat() { |
|
|
document.getElementById('chat-demo').scrollIntoView({ behavior: 'smooth' }); |
|
|
} |
|
|
|
|
|
function scrollToPricing() { |
|
|
document.getElementById('pricing').scrollIntoView({ behavior: 'smooth' }); |
|
|
} |
|
|
|
|
|
|
|
|
function showPaymentModal() { |
|
|
document.getElementById('payment-modal').classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function hidePaymentModal() { |
|
|
document.getElementById('payment-modal').classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
setTimeout(function() { |
|
|
const demoChat = document.getElementById('demo-chat'); |
|
|
const thinkingElement = demoChat.querySelector('.pulse'); |
|
|
|
|
|
if (thinkingElement) { |
|
|
thinkingElement.parentElement.innerHTML = ` |
|
|
<div class="chat-bubble ai-bubble"> |
|
|
Het weer in Amsterdam vandaag is bewolkt met een maximale temperatuur van 18°C en een minimale temperatuur van 12°C. Er is een kleine kans op een bui. |
|
|
</div> |
|
|
<div class="text-right text-xs text-gray-500 mb-4">Antwoord na 2 minuten</div> |
|
|
<div class="chat-bubble ai-bubble bg-purple-100 border border-purple-200"> |
|
|
<strong>Premium tip:</strong> Upgrade naar premium voor directe weerupdates en uitgebreidere informatie! |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
}, 3000); |
|
|
}); |
|
|
</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/ai-chat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
