|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>HOP!PY - Trouvez votre prochaine aventure</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"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
'hop-primary': '#004CF2', |
|
|
'hop-secondary': '#FBA536', |
|
|
'hop-accent': '#FF5362', |
|
|
'hop-purple': '#6319C3', |
|
|
'hop-bg': '#FFECE5', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Poppins:wght@400;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: #FFECE5; |
|
|
} |
|
|
|
|
|
.comic-font { |
|
|
font-family: 'Comic Neue', cursive; |
|
|
} |
|
|
|
|
|
.bounce { |
|
|
animation: bounce 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes bounce { |
|
|
0%, 20%, 50%, 80%, 100% {transform: translateY(0);} |
|
|
40% {transform: translateY(-20px);} |
|
|
60% {transform: translateY(-10px);} |
|
|
} |
|
|
|
|
|
.app-screen { |
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); |
|
|
border-radius: 30px; |
|
|
transform: perspective(1000px) rotateY(-10deg); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.app-screen:hover { |
|
|
transform: perspective(1000px) rotateY(0deg); |
|
|
} |
|
|
|
|
|
.feature-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.feature-card:hover { |
|
|
transform: translateY(-10px); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-hop-bg"> |
|
|
|
|
|
<header class="bg-white shadow-sm"> |
|
|
<div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://via.placeholder.com/50x50" alt="HOP!PY Logo" class="h-12 mr-3"> |
|
|
<span class="text-2xl font-bold text-hop-primary comic-font">HOP!PY</span> |
|
|
</div> |
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#how-it-works" class="text-gray-700 hover:text-hop-accent font-medium">Comment ça marche</a> |
|
|
<a href="#features" class="text-gray-700 hover:text-hop-accent font-medium">Pourquoi HOP!PY?</a> |
|
|
<a href="#download" class="text-gray-700 hover:text-hop-accent font-medium">Télécharger</a> |
|
|
</nav> |
|
|
<button class="md:hidden text-gray-700"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="py-16 md:py-24 px-4"> |
|
|
<div class="container mx-auto 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-6xl font-bold text-hop-primary mb-4 comic-font"> |
|
|
HOP!PY |
|
|
</h1> |
|
|
<h2 class="text-2xl md:text-3xl font-semibold text-gray-800 mb-6"> |
|
|
Trouvez votre prochaine aventure parfaite |
|
|
</h2> |
|
|
<p class="text-gray-600 mb-8 text-lg"> |
|
|
L'application qui vous aide à découvrir les meilleures activités éducatives et amusantes pour vos enfants à Genève. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<button class="bg-hop-accent hover:bg-opacity-90 text-white font-bold py-4 px-8 rounded-full text-lg shadow-lg transform transition hover:scale-105"> |
|
|
Télécharger maintenant |
|
|
</button> |
|
|
<button class="border-2 border-hop-primary text-hop-primary hover:bg-hop-primary hover:text-white font-bold py-4 px-8 rounded-full text-lg transform transition hover:scale-105"> |
|
|
En savoir plus |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<div class="relative"> |
|
|
<img src="https://via.placeholder.com/300x600" alt="App Preview" class="app-screen h-96 md:h-auto"> |
|
|
<div class="absolute -bottom-6 -left-6 bg-hop-secondary rounded-full w-24 h-24 flex items-center justify-center shadow-xl"> |
|
|
<i class="fas fa-child text-white text-4xl bounce"></i> |
|
|
</div> |
|
|
<div class="absolute -top-6 -right-6 bg-hop-purple rounded-full w-20 h-20 flex items-center justify-center shadow-xl"> |
|
|
<i class="fas fa-star text-white text-3xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="how-it-works" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center text-hop-primary mb-16 comic-font"> |
|
|
Comment ça marche? |
|
|
</h2> |
|
|
<div class="flex flex-col md:flex-row justify-center space-y-12 md:space-y-0 md:space-x-8"> |
|
|
|
|
|
<div class="flex-1 flex flex-col items-center px-4"> |
|
|
<div class="bg-hop-primary text-white rounded-full w-16 h-16 flex items-center justify-center text-2xl font-bold mb-6"> |
|
|
1 |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3 text-center">Filtrez par âge et type</h3> |
|
|
<p class="text-gray-600 text-center"> |
|
|
Sélectionnez l'âge de votre enfant et le type d'activité que vous recherchez (intérieur, extérieur, éducatif, etc.) |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col items-center px-4"> |
|
|
<div class="bg-hop-secondary text-white rounded-full w-16 h-16 flex items-center justify-center text-2xl font-bold mb-6"> |
|
|
2 |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3 text-center">Obtenez des idées</h3> |
|
|
<p class="text-gray-600 text-center"> |
|
|
Recevez une sélection personnalisée d'activités adaptées à vos critères dans votre région |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col items-center px-4"> |
|
|
<div class="bg-hop-accent text-white rounded-full w-16 h-16 flex items-center justify-center text-2xl font-bold mb-6"> |
|
|
3 |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3 text-center">Partez à l'aventure</h3> |
|
|
<p class="text-gray-600 text-center"> |
|
|
Planifiez et profitez d'activités amusantes avec vos enfants en toute simplicité |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-hop-bg"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center text-hop-primary mb-16 comic-font"> |
|
|
Découvrez HOP!PY |
|
|
</h2> |
|
|
<div class="flex flex-col lg:flex-row items-center"> |
|
|
<div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12"> |
|
|
<h3 class="text-2xl font-bold text-gray-800 mb-4">Une interface simple et intuitive</h3> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
Naviguez facilement parmi des centaines d'activités triées sur le volet pour vos enfants. Visualisez les lieux, les horaires et les avis en un clin d'œil. |
|
|
</p> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-hop-secondary mt-1 mr-3"></i> |
|
|
<span class="text-gray-700">Recherche rapide par localisation</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-hop-secondary mt-1 mr-3"></i> |
|
|
<span class="text-gray-700">Filtres personnalisables</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-hop-secondary mt-1 mr-3"></i> |
|
|
<span class="text-gray-700">Sauvegarde de vos favoris</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="lg:w-1/2 flex justify-center"> |
|
|
<img src="https://via.placeholder.com/300x600" alt="App Interface" class="app-screen h-96"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="features" class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center text-hop-primary mb-16 comic-font"> |
|
|
Pourquoi choisir HOP!PY? |
|
|
</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
|
|
|
<div class="bg-hop-bg p-6 rounded-xl feature-card"> |
|
|
<div class="bg-hop-primary text-white rounded-full w-14 h-14 flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-map-marker-alt text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Toutes les activités locales</h3> |
|
|
<p class="text-gray-600"> |
|
|
Accédez à une base de données complète des meilleures activités pour enfants à Genève et ses environs. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-hop-bg p-6 rounded-xl feature-card"> |
|
|
<div class="bg-hop-secondary text-white rounded-full w-14 h-14 flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-child text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Adapté à l'âge de votre enfant</h3> |
|
|
<p class="text-gray-600"> |
|
|
Des recommandations personnalisées en fonction de l'âge et du développement de votre enfant. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-hop-bg p-6 rounded-xl feature-card"> |
|
|
<div class="bg-hop-accent text-white rounded-full w-14 h-14 flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-home text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Intérieur & extérieur</h3> |
|
|
<p class="text-gray-600"> |
|
|
Trouvez des activités adaptées à toutes les saisons et à toutes les météos. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-hop-bg p-6 rounded-xl feature-card"> |
|
|
<div class="bg-hop-purple text-white rounded-full w-14 h-14 flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-filter text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-3">Filtres faciles</h3> |
|
|
<p class="text-gray-600"> |
|
|
Trouvez exactement ce que vous cherchez grâce à notre système de filtrage intuitif. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-hop-bg"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center text-hop-primary mb-16 comic-font"> |
|
|
Ce que disent les parents |
|
|
</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-hop-primary text-white rounded-full w-12 h-12 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-user text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Sophie M.</h4> |
|
|
<div class="flex text-hop-secondary"> |
|
|
<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"> |
|
|
"HOP!PY a sauvé nos weekends! Plus besoin de chercher pendant des heures quoi faire avec les enfants. Tout est là, bien organisé et adapté à leur âge." |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-hop-secondary text-white rounded-full w-12 h-12 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-user text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Thomas L.</h4> |
|
|
<div class="flex text-hop-secondary"> |
|
|
<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"> |
|
|
"En tant que nouveau parent à Genève, cette application m'a permis de découvrir des endroits que je ne connaissais pas. Les enfants adorent nos nouvelles aventures!" |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-hop-accent text-white rounded-full w-12 h-12 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-user text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold text-gray-800">Camille R.</h4> |
|
|
<div class="flex text-hop-secondary"> |
|
|
<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"> |
|
|
"J'apprécie particulièrement les activités éducatives suggérées. Mon fils de 5 ans apprend tout en s'amusant. Une vraie mine d'or pour les parents occupés!" |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="download" class="py-20 bg-gradient-to-r from-hop-primary to-hop-purple text-white"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6 comic-font"> |
|
|
Prêt pour l'aventure? |
|
|
</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto"> |
|
|
Téléchargez HOP!PY maintenant et découvrez des centaines d'activités amusantes pour vos enfants à Genève. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6"> |
|
|
<button class="bg-white text-hop-primary hover:bg-opacity-90 font-bold py-4 px-8 rounded-full text-lg shadow-lg transform transition hover:scale-105 flex items-center justify-center"> |
|
|
<i class="fab fa-apple text-2xl mr-3"></i> |
|
|
<span>App Store</span> |
|
|
</button> |
|
|
<button class="bg-white text-hop-primary hover:bg-opacity-90 font-bold py-4 px-8 rounded-full text-lg shadow-lg transform transition hover:scale-105 flex items-center justify-center"> |
|
|
<i class="fab fa-google-play text-2xl mr-3"></i> |
|
|
<span>Google Play</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row justify-between"> |
|
|
<div class="mb-8 md:mb-0"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img src="https://via.placeholder.com/50x50" alt="HOP!PY Logo" class="h-10 mr-3"> |
|
|
<span class="text-2xl font-bold text-white comic-font">HOP!PY</span> |
|
|
</div> |
|
|
<p class="text-gray-400 max-w-xs"> |
|
|
L'application qui transforme votre temps en famille en aventures inoubliables. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Navigation</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Accueil</a></li> |
|
|
<li><a href="#how-it-works" class="text-gray-400 hover:text-white">Comment ça marche</a></li> |
|
|
<li><a href="#features" class="text-gray-400 hover:text-white">Fonctionnalités</a></li> |
|
|
<li><a href="#download" class="text-gray-400 hover:text-white">Télécharger</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Légal</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Conditions d'utilisation</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Politique de confidentialité</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Mentions légales</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Contact</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-envelope text-gray-400 mr-2"></i> |
|
|
<span class="text-gray-400">[email protected]</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-map-marker-alt text-gray-400 mr-2"></i> |
|
|
<span class="text-gray-400">Genève, Suisse</span> |
|
|
</li> |
|
|
</ul> |
|
|
<div class="flex space-x-4 mt-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-xl"> |
|
|
<i class="fab fa-facebook"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-xl"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white text-xl"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> |
|
|
<p>© 2023 HOP!PY. Tous droits réservés.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelector('button.md\\:hidden').addEventListener('click', function() { |
|
|
|
|
|
alert("Menu mobile s'ouvrirait ici dans une implémentation complète"); |
|
|
}); |
|
|
|
|
|
|
|
|
const appScreen = document.querySelector('.app-screen'); |
|
|
if(appScreen) { |
|
|
appScreen.addEventListener('mouseenter', function() { |
|
|
this.style.transform = 'perspective(1000px) rotateY(0deg)'; |
|
|
}); |
|
|
|
|
|
appScreen.addEventListener('mouseleave', function() { |
|
|
this.style.transform = 'perspective(1000px) rotateY(-10deg)'; |
|
|
}); |
|
|
} |
|
|
</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=vi-c/hoppy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
