Загрузка...
Лендинг для планировщика свиданий с квиз-модалом. Герой, выгоды, цены, FAQ, CTA. Адаптивный, Tailwind CSS. Для конверсии.
<html lang="fr" class="scroll-smooth"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signé Ju - Planificateur de Rendez-vous Romantiques</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
sage: '#7D9379',
sage_dark: '#5C6F59',
softpink: '#E8B4B8',
softpink_light: '#F5DCDD',
cream: '#FDFBF7',
gold: '#C9A962',
gold_hover: '#B09048',
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
serif: ['Playfair Display', 'serif'],
}
}
}
}
</script>
<style>
/* Custom Utilities */
.glass-nav {
background: rgba(253, 251, 247, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.fade-enter {
opacity: 0;
transform: translateY(10px);
}
.fade-enter-active {
opacity: 1;
transform: translateY(0);
transition: opacity 0.4s ease, transform 0.4s ease;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: #FDFBF7;
}
::-webkit-scrollbar-thumb {
background: #E8B4B8;
border-radius: 3px;
}
/* Quiz Transitions */
.quiz-step {
display: none;
}
.quiz-step.active {
display: block;
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.checkbox-custom:checked + div {
border-color: #C9A962;
background-color: #FDFBF7;
color: #C9A962;
}
.checkbox-custom:checked + div iconify-icon {
color: #C9A962;
}
</style>
<link id="all-fonts-link-font-geist" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap"><link id="all-fonts-link-font-roboto" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"><link id="all-fonts-link-font-montserrat" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"><link id="all-fonts-link-font-poppins" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"><link id="all-fonts-link-font-playfair" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap"><link id="all-fonts-link-font-instrument-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&display=swap"><link id="all-fonts-link-font-merriweather" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap"><link id="all-fonts-link-font-bricolage" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&display=swap"><link id="all-fonts-link-font-jakarta" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap"><link id="all-fonts-link-font-manrope" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap"><link id="all-fonts-link-font-space-grotesk" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"><link id="all-fonts-link-font-work-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&display=swap"><link id="all-fonts-link-font-pt-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap"><link id="all-fonts-link-font-geist-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap"><link id="all-fonts-link-font-space-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"><link id="all-fonts-link-font-quicksand" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"><link id="all-fonts-link-font-nunito" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap"><link id="all-fonts-link-font-newsreader" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400..800&display=swap"><link id="all-fonts-link-font-google-sans-flex" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;600;700&display=swap"><link id="all-fonts-link-font-oswald" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap"><link id="all-fonts-link-font-dm-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap"><link id="all-fonts-link-font-cormorant" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist">.font-geist { font-family: 'Geist', sans-serif !important; }</style><style id="all-fonts-style-font-roboto">.font-roboto { font-family: 'Roboto', sans-serif !important; }</style><style id="all-fonts-style-font-montserrat">.font-montserrat { font-family: 'Montserrat', sans-serif !important; }</style><style id="all-fonts-style-font-poppins">.font-poppins { font-family: 'Poppins', sans-serif !important; }</style><style id="all-fonts-style-font-playfair">.font-playfair { font-family: 'Playfair Display', serif !important; }</style><style id="all-fonts-style-font-instrument-serif">.font-instrument-serif { font-family: 'Instrument Serif', serif !important; }</style><style id="all-fonts-style-font-merriweather">.font-merriweather { font-family: 'Merriweather', serif !important; }</style><style id="all-fonts-style-font-bricolage">.font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }</style><style id="all-fonts-style-font-jakarta">.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif !important; }</style><style id="all-fonts-style-font-manrope">.font-manrope { font-family: 'Manrope', sans-serif !important; }</style><style id="all-fonts-style-font-space-grotesk">.font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }</style><style id="all-fonts-style-font-work-sans">.font-work-sans { font-family: 'Work Sans', sans-serif !important; }</style><style id="all-fonts-style-font-pt-serif">.font-pt-serif { font-family: 'PT Serif', serif !important; }</style><style id="all-fonts-style-font-geist-mono">.font-geist-mono { font-family: 'Geist Mono', monospace !important; }</style><style id="all-fonts-style-font-space-mono">.font-space-mono { font-family: 'Space Mono', monospace !important; }</style><style id="all-fonts-style-font-quicksand">.font-quicksand { font-family: 'Quicksand', sans-serif !important; }</style><style id="all-fonts-style-font-nunito">.font-nunito { font-family: 'Nunito', sans-serif !important; }</style><style id="all-fonts-style-font-newsreader">.font-newsreader { font-family: 'Newsreader', serif !important; }</style><style id="all-fonts-style-font-google-sans-flex">.font-google-sans-flex { font-family: 'Google Sans Flex', sans-serif !important; }</style><style id="all-fonts-style-font-oswald">.font-oswald { font-family: 'Oswald', sans-serif !important; }</style><style id="all-fonts-style-font-dm-sans">.font-dm-sans { font-family: 'DM Sans', sans-serif !important; }</style><style id="all-fonts-style-font-cormorant">.font-cormorant { font-family: 'Cormorant Garamond', serif !important; }</style></head>
<body class="bg-cream text-slate-800 font-sans antialiased selection:bg-softpink selection:text-white">
<!-- Navigation -->
<nav class="fixed w-full z-40 top-0 glass-nav border-b border-sage/10">
<div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
<a href="#" class="text-sage hover:opacity-80 transition-opacity text-2xl font-medium tracking-tighter font-serif">
Signé Ju
</a>
<!-- Desktop Menu -->
<div class="hidden md:flex items-center space-x-8">
<a href="/#how-it-works" class="hover:text-sage transition-colors text-sm font-medium text-slate-600">Comment ça marche</a>
<a href="/#pricing" class="hover:text-sage transition-colors text-sm font-medium text-slate-600">Tarifs</a>
<a href="#footer" class="hover:text-sage transition-colors text-sm font-medium text-slate-600">Contact</a>
<button onclick="openQuiz()" class="bg-sage text-white px-5 py-2 rounded-lg text-sm font-medium hover:bg-sage_dark transition-all shadow-sm hover:shadow-md">
Mon profil amoureux
</button>
</div>
<!-- Mobile Menu Button -->
<button onclick="toggleMobileMenu()" class="md:hidden text-sage">
<iconify-icon icon="solar:hamburger-menu-linear" width="24" height="24"></iconify-icon>
</button>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden absolute top-16 left-0 w-full bg-cream border-b border-sage/10 p-6 flex-col space-y-4 shadow-lg">
<a href="#how-it-works" class="text-base font-medium text-slate-700">Comment ça marche</a>
<a href="#pricing" class="text-base font-medium text-slate-700">Tarifs</a>
<a href="#footer" class="text-base font-medium text-slate-700">Contact</a>
<button onclick="openQuiz()" class="w-full bg-sage text-white py-3 rounded-lg text-sm font-medium">Découvrir mon profil amoureux</button>
</div>
</nav>
<!-- Hero Section -->
<section class="md:pt-48 md:pb-32 overflow-hidden pt-32 pr-6 pb-20 pl-6 relative">
<!-- Abstract Background Shapes -->
<div class="absolute top-0 right-0 w-96 h-96 bg-softpink/20 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 -z-10"></div>
<div class="absolute bottom-0 left-0 w-96 h-96 bg-sage/10 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2 -z-10"></div>
<div class="text-center max-w-4xl mr-auto ml-auto">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white border border-sage/20 shadow-sm mb-8 animate-fade-in-up">
<iconify-icon icon="solar:heart-angle-linear" class="text-softpink" width="16"></iconify-icon>
<span class="uppercase text-xs font-medium text-slate-500 tracking-wider">Pour soutenir l'amour</span>
</div>
<h1 class="font-serif text-5xl md:text-7xl text-slate-900 tracking-tight leading-[1.1] mb-6 font-medium">
Organisez un rendez-vous <span class="text-sage italic">romantique</span> sans y penser
</h1>
<p class="md:text-xl leading-relaxed text-lg font-light text-slate-600 max-w-2xl mr-auto mb-10 ml-auto" style="">Dites-nous ce que vous cherchez, et nous réfléchissons le rendez-vous idéal pour vous reconnecter.</p>
<div class="flex flex-col md:flex-row items-center justify-center gap-4">
<button onclick="openQuiz()" class="w-full md:w-auto bg-gold hover:bg-gold_hover text-white px-8 py-4 rounded-lg text-base font-medium transition-all shadow-md hover:shadow-lg flex items-center justify-center gap-2 group">
Créer mon rendez-vous personnalisé
<iconify-icon icon="solar:arrow-right-linear" class="group-hover:translate-x-1 transition-transform"></iconify-icon>
</button>
<button onclick="openQuiz()" class="w-full md:w-auto border border-sage text-sage hover:bg-sage/5 px-8 py-4 rounded-lg text-base font-medium transition-all flex items-center justify-center gap-2">
<iconify-icon icon="solar:magic-stick-3-linear"></iconify-icon>
Découvrir mon profil amoureux
</button>
</div>
</div>
</section>
<!-- Problem Section -->
<section class="py-20 px-6 bg-white">
<div class="max-w-6xl mx-auto">
<h2 class="font-serif text-3xl md:text-4xl text-center text-slate-900 mb-16 tracking-tight font-medium">Pourquoi est-ce si difficile ?</h2>
<div class="grid md:grid-cols-3 gap-8">
<!-- Card 1 -->
<div class="p-8 rounded-xl bg-cream border border-sage/10 hover:-translate-y-1 transition-transform duration-300">
<div class="w-12 h-12 rounded-lg bg-softpink/20 flex items-center justify-center text-softpink mb-6">
<iconify-icon icon="solar:lightbulb-bolt-linear" width="24" height="24"></iconify-icon>
</div>
<h3 class="font-serif text-xl font-medium mb-3 text-slate-800">Manque d'inspiration</h3>
<p class="text-slate-600 text-sm leading-relaxed">On finit toujours par faire les mêmes choses, les mêmes restaurants, la même routine.</p>
</div>
<!-- Card 2 -->
<div class="p-8 rounded-xl bg-cream border border-sage/10 hover:-translate-y-1 transition-transform duration-300">
<div class="w-12 h-12 rounded-lg bg-sage/20 flex items-center justify-center text-sage mb-6">
<iconify-icon icon="solar:clock-circle-linear" width="24" height="24"></iconify-icon>
</div>
<h3 class="font-serif text-xl font-medium mb-3 text-slate-800">Le manque de temps</h3>
<p class="text-slate-600 text-sm leading-relaxed">Planifier demande trop d'énergie après une longue semaine de travail.</p>
</div>
<!-- Card 3 -->
<div class="p-8 rounded-xl bg-cream border border-sage/10 hover:-translate-y-1 transition-transform duration-300">
<div class="w-12 h-12 rounded-lg bg-gold/20 flex items-center justify-center text-gold mb-6">
<iconify-icon icon="solar:question-circle-linear" width="24" height="24"></iconify-icon>
</div>
<h3 class="font-serif text-xl font-medium mb-3 text-slate-800">L'incertitude</h3>
<p class="text-slate-600 text-sm leading-relaxed">Va-t-il aimer ? Est-ce le bon endroit ? La pression de réussir le moment gâche le plaisir.</p>
</div>
</div>
</div>
</section>
<!-- Solution Section -->
<section id="how-it-works" class="py-20 px-6 bg-cream border-t border-sage/5">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-16">
<span class="text-sage uppercase block text-sm font-medium tracking-widest mb-2" style="">notre solution</span>
<h2 class="font-serif text-3xl md:text-4xl text-slate-900 tracking-tight font-medium">Signé Ju fait le travail à votre place</h2>
</div>
<div class="grid md:grid-cols-4 gap-6 relative">
<!-- Connector Line (Desktop) -->
<div class="hidden md:block absolute top-12 left-0 w-full h-0.5 border-t border-dashed border-sage/30 -z-0"></div>
<!-- Step 1 -->
<div class="relative bg-white p-6 rounded-xl shadow-sm border border-sage/10 z-10 text-center">
<div class="w-10 h-10 mx-auto bg-sage text-white rounded-full flex items-center justify-center font-serif text-lg mb-4">1</div>
<h4 class="font-medium text-lg mb-2 text-slate-800">Vous répondez</h4>
<p class="text-sm text-slate-500">5 minutes pour cerner vos envies du moment.</p>
</div>
<!-- Step 2 -->
<div class="relative bg-white p-6 rounded-xl shadow-sm border border-sage/10 z-10 text-center">
<div class="w-10 h-10 mx-auto bg-sage text-white rounded-full flex items-center justify-center font-serif text-lg mb-4">2</div>
<h4 class="font-medium text-lg mb-2 text-slate-800">Notre algorithme analyse</h4>
<p class="text-sm text-slate-500">Nous croisons vos goûts avec nos pépites locales.</p>
</div>
<!-- Step 3 -->
<div class="relative bg-white p-6 rounded-xl shadow-sm border border-sage/10 z-10 text-center">
<div class="w-10 h-10 mx-auto bg-sage text-white rounded-full flex items-center justify-center font-serif text-lg mb-4">3</div>
<h4 class="font-medium text-lg mb-2 text-slate-800">Vous recevez l'idée</h4>
<p class="text-sm text-slate-500">Une proposition sur mesure directement par email.</p>
</div>
<!-- Step 4 -->
<div class="relative bg-white p-6 rounded-xl shadow-sm border border-sage/10 z-10 text-center">
<div class="w-10 h-10 mx-auto bg-sage text-white rounded-full flex items-center justify-center font-serif text-lg mb-4">4</div>
<h4 class="font-medium text-lg mb-2 text-slate-800">Profitez simplement</h4>
<p class="text-sm text-slate-500">Aucune charge mentale, juste le plaisir d'être ensemble.</p>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" class="py-24 px-6 bg-white">
<div class="max-w-6xl mx-auto">
<h2 class="font-serif text-3xl md:text-4xl text-center text-slate-900 mb-16 tracking-tight font-medium">Des formules pour chaque histoire</h2>
<div class="grid md:grid-cols-3 gap-8 items-start">
<!-- Basic -->
<div class="p-8 rounded-2xl border border-slate-100 bg-white hover:shadow-lg transition-all">
<h3 class="font-serif text-2xl text-slate-800 mb-2">L'Essentielle</h3>
<div class="text-4xl font-serif text-sage mb-6">Gratuit</div>
<ul class="space-y-4 mb-8 text-sm text-slate-600">
<li class="flex items-center gap-3"><iconify-icon icon="solar:check-circle-linear" class="text-sage flex-shrink-0"></iconify-icon> 1 idée de rendez-vous générique</li>
<li class="flex items-center gap-3"><iconify-icon icon="solar:check-circle-linear" class="text-sage flex-shrink-0"></iconify-icon> Newsletter mensuelle</li>
<li class="flex items-center gap-3 opacity-50"><iconify-icon icon="solar:close-circle-linear" class="flex-shrink-0"></iconify-icon> Pas de personnalisation</li>
</ul>
<button class="w-full py-3 rounded-lg border border-slate-200 text-slate-600 font-medium hover:border-sage hover:text-sage transition-colors">Découvrir</button>
</div>
<!-- Recommended -->
<div class="p-8 rounded-2xl border-2 border-sage/20 bg-cream relative shadow-xl transform md:-translate-y-4">
<div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-sage text-white px-4 py-1 rounded-full text-xs font-medium tracking-wide">LE PLUS POPULAIRE</div>
<h3 class="font-serif text-2xl text-slate-800 mb-2">L'Authentique</h3>
<div class="text-4xl font-serif text-sage mb-6">19€</div>
<ul class="space-y-4 mb-8 text-sm text-slate-600">
<li class="flex items-center gap-3"><iconify-icon icon="solar:check-circle-linear" class="text-sage flex-shrink-0"></iconify-icon> 3 idées sur mesure</li>
<li class="flex items-center gap-3"><iconify-icon icon="solar:check-circle-linear" class="text-sage flex-shrink-0"></iconify-icon> Lieux précis près de chez vous</li>
<li class="flex items-center gap-3"><iconify-icon icon="solar:check-circle-linear" class="text-sage flex-shrink-0"></iconify-icon> Adapté à votre budget</li>
</ul>
<button class="w-full py-3 rounded-lg bg-gold text-white font-medium hover:bg-gold_hover transition-colors shadow-md">Choisir cette formule</button>
</div>
<!-- Premium -->
<div class="p-8 rounded-2xl border border-slate-100 bg-white hover:shadow-lg transition-all">
<h3 class="font-serif text-2xl text-slate-800 mb-2">L'Exceptionnelle</h3>
<div class="text-4xl font-serif text-sage mb-6">49€</div>
<ul class="text-sm text-slate-600 mb-8 space-y-4">
<li class="flex items-center gap-3"><iconify-icon icon="solar:check-circle-linear" class="text-sage flex-shrink-0"></iconify-icon> 5 idées premium</li>
<li class="flex items-center gap-3"><iconify-icon icon="solar:check-circle-linear" class="text-sage flex-shrink-0"></iconify-icon> Service de réservation en option</li>
<li class="flex items-center gap-3"><iconify-icon icon="solar:check-circle-linear" class="text-sage flex-shrink-0"></iconify-icon> Support concierge WhatsApp</li>
</ul>
<button class="w-full py-3 rounded-lg border border-slate-200 text-slate-600 font-medium hover:border-gold hover:text-gold transition-colors">Choisir l'exception</button>
</div>
</div>
</div>
</section>
<!-- For Whom Section -->
<section class="py-20 px-6 bg-cream border-t border-sage/5">
<div class="max-w-6xl mx-auto">
<h2 class="md:text-4xl text-3xl font-medium text-slate-900 tracking-tight font-serif text-center mb-12">Pourquoi choisir Signé Ju ?</h2>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-6">
<div class="bg-white p-6 rounded-lg text-center shadow-sm border border-transparent hover:border-sage/20 transition-all">
<div class="text-softpink mb-3 flex justify-center"><iconify-icon icon="solar:gift-linear" width="32"></iconify-icon></div>
<h4 class="font-medium text-slate-800 text-sm md:text-base">Surprendre sans rechercher</h4>
</div>
<div class="bg-white p-6 rounded-lg text-center shadow-sm border border-transparent hover:border-sage/20 transition-all">
<div class="text-sage mb-3 flex justify-center"><iconify-icon icon="solar:refresh-circle-linear" width="32"></iconify-icon></div>
<h4 class="font-medium text-slate-800 text-sm md:text-base">Renouveler la romance</h4>
</div>
<div class="bg-white p-6 rounded-lg text-center shadow-sm border border-transparent hover:border-sage/20 transition-all">
<div class="text-gold mb-3 flex justify-center"><iconify-icon icon="solar:star-linear" width="32"></iconify-icon></div>
<h4 class="font-medium text-slate-800 text-sm md:text-base">Occasion spéciale</h4>
</div>
<div class="bg-white p-6 rounded-lg text-center shadow-sm border border-transparent hover:border-sage/20 transition-all">
<div class="text-slate-400 mb-3 flex justify-center"><iconify-icon icon="solar:confounded-square-linear" width="32"></iconify-icon></div>
<h4 class="font-medium text-slate-800 text-sm md:text-base">Manque d'inspiration</h4>
</div>
<div class="bg-white p-6 rounded-lg text-center shadow-sm border border-transparent hover:border-sage/20 transition-all">
<div class="text-softpink mb-3 flex justify-center"><iconify-icon icon="solar:armchair-2-linear" width="32"></iconify-icon></div>
<h4 class="md:text-base text-sm font-medium text-slate-800">Profiter plutôt que planifier</h4>
</div>
<div class="bg-white p-6 rounded-lg text-center shadow-sm border border-transparent hover:border-sage/20 transition-all">
<div class="text-sage mb-3 flex justify-center"><iconify-icon icon="solar:heart-linear" width="32"></iconify-icon></div>
<h4 class="font-medium text-slate-800 text-sm md:text-base">Authenticité, pas générique</h4>
</div>
</div>
</div>
</section>
<!-- Reassurance -->
<section class="py-16 px-6 bg-white border-y border-sage/10">
<div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-8 text-center md:text-left">
<div>
<h3 class="font-serif text-2xl text-slate-900 mb-2">Pourquoi nous faire confiance ?</h3>
<p class="text-slate-500 text-sm">L'expertise au service de votre cœur.</p>
</div>
<div class="flex flex-wrap justify-center gap-8 md:gap-12">
<div class="flex items-center gap-2">
<iconify-icon icon="solar:users-group-rounded-linear" class="text-gold text-2xl"></iconify-icon>
<span class="text-sm font-medium text-slate-700">10k+ Rendez-vous</span>
</div>
<div class="flex items-center gap-2">
<iconify-icon icon="solar:shield-check-linear" class="text-gold text-2xl"></iconify-icon>
<span class="text-sm font-medium text-slate-700">Données protégées</span>
</div>
<div class="flex items-center gap-2">
<iconify-icon icon="solar:smile-circle-linear" class="text-gold text-2xl"></iconify-icon>
<span class="text-sm font-medium text-slate-700">Satisfaction garantie</span>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section class="py-20 px-6 bg-cream">
<div class="max-w-3xl mx-auto">
<h2 class="font-serif text-3xl md:text-4xl text-center text-slate-900 mb-12 tracking-tight font-medium">Questions fréquentes</h2>
<div class="space-y-4">
<!-- Item 1 -->
<div class="bg-white rounded-lg border border-sage/10 overflow-hidden">
<button class="w-full flex items-center justify-between p-6 text-left" onclick="toggleAccordion('faq1')">
<span class="font-medium text-slate-800">Quels sont les délais de réponse ?</span>
<iconify-icon icon="solar:alt-arrow-down-linear" class="text-slate-400 transition-transform" id="icon-faq1"></iconify-icon>
</button>
<div id="faq1" class="hidden px-6 pb-6 text-sm text-slate-600">
Pour l'offre Authentique, vous recevez vos idées sous 48h. Pour l'offre Exceptionnelle, comptez 72h pour la recherche approfondie et les vérifications de disponibilité.
</div>
</div>
<!-- Item 2 -->
<div class="bg-white rounded-lg border border-sage/10 overflow-hidden">
<button class="w-full flex items-center justify-between p-6 text-left" onclick="toggleAccordion('faq2')">
<span class="font-medium text-slate-800">Puis-je modifier mes préférences ?</span>
<iconify-icon icon="solar:alt-arrow-down-linear" class="text-slate-400 transition-transform" id="icon-faq2"></iconify-icon>
</button>
<div id="faq2" class="hidden px-6 pb-6 text-sm text-slate-600">
Absolument. Avant la validation finale de votre dossier, un lien vous permet d'ajuster vos critères si vos envies changent.
</div>
</div>
<!-- Item 3 -->
<div class="bg-white rounded-lg border border-sage/10 overflow-hidden">
<button class="w-full flex items-center justify-between p-6 text-left" onclick="toggleAccordion('faq3')">
<span class="font-medium text-slate-800">Si je n'aime pas les propositions ?</span>
<iconify-icon icon="solar:alt-arrow-down-linear" class="text-slate-400 transition-transform" id="icon-faq3"></iconify-icon>
</button>
<div id="faq3" class="hidden px-6 pb-6 text-sm text-slate-600">
Votre satisfaction est primordiale. Nous proposons une révision gratuite de votre dossier si les premières idées ne vous conviennent pas totalement.
</div>
</div>
</div>
</div>
</section>
<!-- Final CTA -->
<section class="py-24 px-6 bg-sage/5 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-white/50"></div>
<div class="max-w-4xl mx-auto text-center relative z-10">
<h2 class="font-serif text-3xl md:text-5xl text-slate-900 mb-8 tracking-tight font-medium">Prêt à organiser votre prochain rendez-vous romantique ?</h2>
<div class="flex flex-col md:flex-row items-center justify-center gap-4">
<button onclick="openQuiz()" class="w-full md:w-auto bg-gold hover:bg-gold_hover text-white px-8 py-4 rounded-lg text-base font-medium transition-all shadow-md">
Créer mon rendez-vous personnalisé
</button>
<button onclick="openQuiz()" class="w-full md:w-auto border border-sage text-sage hover:bg-white px-8 py-4 rounded-lg text-base font-medium transition-all">
Découvrir mon profil amoureux
</button>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer" class="bg-slate-900 text-cream py-16 px-6">
<div class="max-w-6xl mx-auto grid md:grid-cols-4 gap-12">
<div class="col-span-1 md:col-span-1">
<a href="#" class="font-serif text-2xl text-cream tracking-tighter mb-4 block">Signé Ju</a>
<p class="text-slate-400 text-sm leading-relaxed">Redécouvrez le plaisir de la rencontre amoureuse, sans le stress de l'organisation.</p>
</div>
<div class="">
<h4 class="font-medium mb-6 text-white">Liens rapides</h4>
<ul class="space-y-3 text-sm text-slate-400">
<li class=""><a href="/#how-it-works" class="hover:text-gold transition-colors">Comment ça marche</a></li>
<li class=""><a href="/#pricing" class="hover:text-gold transition-colors">Nos tarifs</a></li>
<li class=""><a href="#" class="hover:text-gold transition-colors">À propos</a></li>
</ul>
</div>
<div class="">
<h4 class="font-medium mb-6 text-white">Légal</h4>
<ul class="space-y-3 text-sm text-slate-400">
<li class=""><a href="#" class="hover:text-gold transition-colors">Mentions légales</a></li>
<li><a href="#" class="hover:text-gold transition-colors">Politique de confidentialité</a></li>
<li><a href="#" class="hover:text-gold transition-colors">CGV</a></li>
</ul>
</div>
<div>
<h4 class="font-medium mb-6 text-white">Contact</h4>
<a href="mailto:contact@signeju.fr" class="text-sm text-gold hover:text-white transition-colors flex items-center gap-2">
<iconify-icon icon="solar:letter-linear"></iconify-icon>
contact@signeju.fr
</a>
<div class="flex gap-4 mt-6">
<a href="#" class="text-slate-400 hover:text-white"><iconify-icon icon="solar:instagram-linear" width="24"></iconify-icon></a>
<a href="#" class="text-slate-400 hover:text-white"><iconify-icon icon="solar:facebook-linear" width="24"></iconify-icon></a>
</div>
</div>
</div>
<div class="max-w-6xl mx-auto mt-16 pt-8 border-t border-slate-800 text-center text-xs text-slate-600">
© 2023 Signé Ju. Tous droits réservés. Design by Figma Make Prompt.
</div>
</footer>
<!-- Quiz Modal -->
<div id="quiz-modal" class="fixed inset-0 z-50 hidden">
<div class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm" onclick="closeQuiz()"></div>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-lg bg-white rounded-2xl shadow-2xl overflow-hidden max-h-[90vh] overflow-y-auto">
<!-- Quiz Header -->
<div class="bg-cream p-6 border-b border-sage/10 flex justify-between items-center sticky top-0 z-10">
<div>
<h3 class="font-serif text-xl font-medium text-slate-800">Profil Amoureux</h3>
<div class="w-full bg-slate-200 h-1 mt-2 rounded-full w-32">
<div id="progress-bar" class="bg-gold h-1 rounded-full transition-all duration-300" style="width: 14%"></div>
</div>
</div>
<button onclick="closeQuiz()" class="text-slate-400 hover:text-slate-800 transition-colors">
<iconify-icon icon="solar:close-circle-linear" width="24" height="24"></iconify-icon>
</button>
</div>
<div class="p-8">
<!-- Step 1 -->
<div class="quiz-step active" data-step="1">
<h4 class="text-lg font-medium text-slate-900 mb-6">Comment définiriez-vous votre rendez-vous idéal ?</h4>
<div class="space-y-3">
<label class="cursor-pointer block group">
<input type="radio" name="q1" class="hidden checkbox-custom" onclick="nextStep()">
<div class="p-4 rounded-lg border border-slate-200 group-hover:border-sage transition-all flex items-center gap-3">
<iconify-icon icon="solar:wine-glass-linear" class="text-slate-400"></iconify-icon>
<span class="text-sm text-slate-700">Dîner aux chandelles classique</span>
</div>
</label>
<label class="cursor-pointer block group">
<input type="radio" name="q1" class="hidden checkbox-custom" onclick="nextStep()">
<div class="p-4 rounded-lg border border-slate-200 group-hover:border-sage transition-all flex items-center gap-3">
<iconify-icon icon="solar:map-arrow-up-linear" class="text-slate-400"></iconify-icon>
<span class="text-sm text-slate-700">Aventure en pleine nature</span>
</div>
</label>
<label class="cursor-pointer block group">
<input type="radio" name="q1" class="hidden checkbox-custom" onclick="nextStep()">
<div class="p-4 rounded-lg border border-slate-200 group-hover:border-sage transition-all flex items-center gap-3">
<iconify-icon icon="solar:palette-linear" class="text-slate-400"></iconify-icon>
<span class="text-sm text-slate-700">Activité créative et ludique</span>
</div>
</label>
<label class="cursor-pointer block group">
<input type="radio" name="q1" class="hidden checkbox-custom" onclick="nextStep()">
<div class="p-4 rounded-lg border border-slate-200 group-hover:border-sage transition-all flex items-center gap-3">
<iconify-icon icon="solar:sofa-linear" class="text-slate-400"></iconify-icon>
<span class="text-sm text-slate-700">Détente absolue à la maison</span>
</div>
</label>
</div>
</div>
<!-- Step 2 -->
<div class="quiz-step" data-step="2">
<h4 class="text-lg font-medium text-slate-900 mb-6">Budget idéal pour la soirée ?</h4>
<div class="space-y-3">
<label class="cursor-pointer block group">
<input type="radio" name="q2" class="hidden checkbox-custom" onclick="nextStep()">
<div class="p-4 rounded-lg border border-slate-200 group-hover:border-sage transition-all text-sm text-slate-700">Moins de 50€</div>
</label>
<label class="cursor-pointer block group">
<input type="radio" name="q2" class="hidden checkbox-custom" onclick="nextStep()">
<div class="p-4 rounded-lg border border-slate-200 group-hover:border-sage transition-all text-sm text-slate-700">Entre 50€ et 100€</div>
</label>
<label class="cursor-pointer block group">
<input type="radio" name="q2" class="hidden checkbox-custom" onclick="nextStep()">
<div class="p-4 rounded-lg border border-slate-200 group-hover:border-sage transition-all text-sm text-slate-700">Entre 100€ et 200€</div>
</label>
<label class="cursor-pointer block group">
<input type="radio" name="q2" class="hidden checkbox-custom" onclick="nextStep()">
<div class="p-4 rounded-lg border border-slate-200 group-hover:border-sage transition-all text-sm text-slate-700">Peu importe, tant que c'est magique</div>
</label>
</div>
</div>
<!-- Step 3 -->
<div class="quiz-step" data-step="3">
<h4 class="text-lg font-medium text-slate-900 mb-6">Plutôt ville ou nature ?</h4>
<div class="grid grid-cols-3 gap-3">
<label class="cursor-pointer group text-center">
<input type="radio" name="q3" class="hidden checkbox-custom" onclick="nextStep()">
<div class="p-4 rounded-lg border border-slate-200 group-hover:border-sage transition-all flex flex-col items-center justify-center gap-2 h-32">
<iconify-icon icon="solar:city-linear" class="text-2xl text-slate-400"></iconify-icon>
<span class="text-sm text-slate-700">Ville</span>
</div>
</label>
<label class="cursor-pointer group text-center">
<input type="radio" name="q3" class="hidden checkbox-custom" onclick="nextStep()">
<div class="p-4 rounded-lg border border-slate-200 group-hover:border-sage transition-all flex flex-col items-center justify-center gap-2 h-32">
<iconify-icon icon="solar:mountains-linear" class="text-2xl text-slate-400"></iconify-icon>
<span class="text-sm text-slate-700">Nature</span>
</div>
</label>
<label class="cursor-pointer group text-center">
<input type="radio" name="q3" class="hidden checkbox-custom" onclick="nextStep()">
<div class="p-4 rounded-lg border border-slate-200 group-hover:border-sage transition-all flex flex-col items-center justify-center gap-2 h-32">
<iconify-icon icon="solar:leaf-linear" class="text-2xl text-slate-400"></iconify-icon>
<span class="text-sm text-slate-700">Mélange</span>
</div>
</label>
</div>
</div>
<!-- Step 4 -->
<div class="quiz-step" data-step="4">
<h4 class="text-lg font-medium text-slate-900 mb-6">Type d'activité préférée ?</h4>
<div class="space-y-3">
<label class="cursor-pointer block group">
<input type="radio" name="q4" class="hidden checkbox-custom" onclick="nextStep()">
<div class="p-4 rounded-lg border border-slate-200 group-hover:border-sage transition-all text-sm text-slate-700">Gastronomie & Dégustation</div>
</label>
<label class="cursor-pointer block group">
<input type="radio" name="q4" class="hidden checkbox-custom" onclick="nextStep()">
<div class="p-4 rounded-lg border border-slate-200 group-hover:border-sage transition-all text-sm text-slate-700">Culture & Arts</div>
</label>
<label class="cursor-pointer block group">
<input type="radio" name="q4" class="hidden checkbox-custom" onclick="nextStep()">
<div class="p-4 rounded-lg border border-slate-200 group-hover:border-sage transition-all text-sm text-slate-700">Sport & Sensations</div>
</label>
<label class="cursor-pointer block group">
<input type="radio" name="q4" class="hidden checkbox-custom" onclick="nextStep()">
<div class="p-4 rounded-lg border border-slate-200 group-hover:border-sage transition-all text-sm text-slate-700">Détente & Bien-être</div>
</label>
</div>
</div>
<!-- Step 5 -->
<div class="quiz-step" data-step="5">
<h4 class="text-lg font-medium text-slate-900 mb-6">Votre approche du romantisme ?</h4>
<div class="space-y-3">
<label class="cursor-pointer block group">
<input type="radio" name="q5" class="hidden checkbox-custom" onclick="nextStep()">
<div class="p-4 rounded-lg border border-slate-200 group-hover:border-sage transition-all text-sm text-slate-700">Très romantique, grand jeu</div>
</label>
<label class="cursor-pointer block group">
<input type="radio" name="q5" class="hidden checkbox-custom" onclick="nextStep()">
<div class="p-4 rounded-lg border border-slate-200 group-hover:border-sage transition-all text-sm text-slate-700">Discret et intimiste</div>
</label>
<label class="cursor-pointer block group">
<input type="radio" name="q5" class="hidden checkbox-custom" onclick="nextStep()">
<div class="p-4 rounded-lg border border-slate-200 group-hover:border-sage transition-all text-sm text-slate-700">Pragmatique et simple</div>
</label>
<label class="cursor-pointer block group">
<input type="radio" name="q5" class="hidden checkbox-custom" onclick="nextStep()">
<div class="p-4 rounded-lg border border-slate-200 group-hover:border-sage transition-all text-sm text-slate-700">C'est un peu surfait...</div>
</label>
</div>
</div>
<!-- Step 6 -->
<div class="quiz-step" data-step="6">
<h4 class="text-lg font-medium text-slate-900 mb-6">Depuis quand êtes-vous ensemble ?</h4>
<div class="space-y-3">
<label class="cursor-pointer block group">
<input type="radio" name="q6" class="hidden checkbox-custom" onclick="nextStep()">
<div class="p-4 rounded-lg border border-slate-200 group-hover:border-sage transition-all text-sm text-slate-700">Moins d'un an (La passion)</div>
</label>
<label class="cursor-pointer block group">
<input type="radio" name="q6" class="hidden checkbox-custom" onclick="nextStep()">
<div class="p-4 rounded-lg border border-slate-200 group-hover:border-sage transition-all text-sm text-slate-700">1 à 5 ans (La construction)</div>
</label>
<label class="cursor-pointer block group">
<input type="radio" name="q6" class="hidden checkbox-custom" onclick="nextStep()">
<div class="p-4 rounded-lg border border-slate-200 group-hover:border-sage transition-all text-sm text-slate-700">5 à 10 ans (La stabilité)</div>
</label>
<label class="cursor-pointer block group">
<input type="radio" name="q6" class="hidden checkbox-custom" onclick="nextStep()">
<div class="p-4 rounded-lg border border-slate-200 group-hover:border-sage transition-all text-sm text-slate-700">Plus de 10 ans (L'éternité)</div>
</label>
</div>
</div>
<!-- Step 7 -->
<div class="quiz-step" data-step="7">
<h4 class="text-lg font-medium text-slate-900 mb-6">Est-ce pour une occasion spéciale ?</h4>
<select id="occasion-select" class="w-full p-4 mb-6 border border-slate-200 rounded-lg text-sm text-slate-700 focus:outline-none focus:border-sage bg-white">
<option value="" disabled="" selected="">Choisir une occasion...</option>
<option value="anniversaire_rencontre">Anniversaire de rencontre</option>
<option value="anniversaire">Anniversaire</option>
<option value="saint_valentin">Saint-Valentin</option>
<option value="demande">Demande en mariage</option>
<option value="juste_comme_ca">Juste un moment à deux</option>
<option value="aucune">Aucune en particulier</option>
</select>
<button onclick="nextStep()" class="w-full bg-sage text-white py-3 rounded-lg font-medium hover:bg-sage_dark transition-colors">Voir mes résultats</button>
</div>
<!-- Results -->
<div class="quiz-step text-center" data-step="result">
<div class="w-16 h-16 bg-softpink/20 rounded-full flex items-center justify-center mx-auto mb-6 text-softpink animate-bounce">
<iconify-icon icon="solar:heart-bold" width="32"></iconify-icon>
</div>
<h4 class="font-serif text-2xl font-medium text-slate-900 mb-2">L'Explorateur Romantique</h4>
<p class="text-sm text-slate-600 mb-8 leading-relaxed">
Vous aimez sortir des sentiers battus tout en gardant une touche d'élégance. Votre rendez-vous idéal mélange découverte et intimité.
</p>
<div class="bg-cream p-6 rounded-xl border border-sage/10 mb-6 text-left">
<label class="block text-xs font-bold text-slate-500 uppercase tracking-wide mb-2">Recevoir mes 3 idées sur mesure</label>
<div class="flex gap-2">
<input type="email" placeholder="votre@email.com" class="flex-1 p-3 rounded-lg border border-slate-200 text-sm focus:outline-none focus:border-sage">
<button class="bg-gold text-white px-4 rounded-lg hover:bg-gold_hover transition-colors">
<iconify-icon icon="solar:plain-linear" width="20"></iconify-icon>
</button>
</div>
<p class="text-[10px] text-slate-400 mt-2">Nous ne spammons jamais. Promis.</p>
</div>
<button onclick="closeQuiz()" class="text-sm text-slate-500 hover:text-sage underline decoration-1 underline-offset-4">Fermer</button>
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script>
// Mobile Menu
function toggleMobileMenu() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
menu.classList.toggle('flex');
}
// Accordion
function toggleAccordion(id) {
const content = document.getElementById(id);
const icon = document.getElementById('icon-' + id);
if (content.classList.contains('hidden')) {
content.classList.remove('hidden');
icon.style.transform = 'rotate(180deg)';
} else {
content.classList.add('hidden');
icon.style.transform = 'rotate(0deg)';
}
}
// Quiz Logic
let currentStep = 1;
const totalSteps = 7;
function openQuiz() {
document.getElementById('quiz-modal').classList.remove('hidden');
document.body.style.overflow = 'hidden';
resetQuiz();
}
function closeQuiz() {
document.getElementById('quiz-modal').classList.add('hidden');
document.body.style.overflow = 'auto';
}
function resetQuiz() {
currentStep = 1;
showStep(1);
updateProgress(1);
// Uncheck all inputs
document.querySelectorAll('input[type="radio"]').forEach(el => el.checked = false);
document.getElementById('occasion-select').selectedIndex = 0;
}
function nextStep() {
if (currentStep < totalSteps) {
currentStep++;
showStep(currentStep);
updateProgress(currentStep);
} else {
showStep('result');
updateProgress(totalSteps + 1); // Full bar
}
}
function showStep(stepId) {
document.querySelectorAll('.quiz-step').forEach(el => {
el.classList.remove('active');
});
if (stepId === 'result') {
document.querySelector(`.quiz-step[data-step="result"]`).classList.add('active');
} else {
document.querySelector(`.quiz-step[data-step="${stepId}"]`).classList.add('active');
}
}
function updateProgress(step) {
const percentage = (step / (totalSteps + 1)) * 100;
document.getElementById('progress-bar').style.width = percentage + '%';
}
</script>
</body></html>