{{ template "headersMenu.html" . }}


<style type="text/tailwindcss">
@layer utilities {
.pricing-toggle:checked + label {
	@apply bg-blue-600 border-blue-600;
}
.pricing-toggle:checked + label:after {
	@apply translate-x-full;
}
}
</style>

<main class="container pt-36">
<section>
	<div class="container mx-auto px-6">
		<h1 class="text-5xl font-bold text-center mb-6">{{ "Tarification Simple et Transparente" | t }}</h1>
		<p class="text-xl text-center text-gray-600 mb-12 max-w-3xl mx-auto">{{ "Une licence mensuelle par utilisateur avec accès à tous les modèles et des assistants illimités." | t }}</p>
		
		<div class="flex justify-center items-center mb-12">
			<span class="mr-3 text-lg font-medium">{{ "Mensuel" | t }}</span>
			<div class="relative inline-block w-16 mr-3 align-middle select-none transition duration-200 ease-in">
			<input type="checkbox" name="toggle" id="toggle" class="pricing-toggle absolute block w-6 h-6 rounded-full bg-white dark:bg-black border-4 border-gray-300 appearance-none cursor-pointer focus:outline-none"/>
			<label for="toggle" class="toggle-label block overflow-hidden h-8 rounded-full bg-gray-300 cursor-pointer"></label>
			</div>
			<span class="text-lg font-medium">{{ "Annuel" | t }} <span class="text-green-500 font-semibold">({{ "2 mois gratuits" | t }})</span></span>
		</div>

		<div class="grid md:grid-cols-3 gap-[30px]">
			<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:-translate-y-2">
			<div class="p-8">
				<h2 class="text-2xl font-bold mb-4">{{ "Essentiel" | t }}</h2>
				<p class="text-4xl font-bold text-blue-600 mb-2">5000 XAF</p>
				<p class="text-gray-500 mb-6">{{ "par utilisateur / mois" | t }}</p>
				<ul class="space-y-3 mb-8">
				<li class="flex items-center"><svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>{{ "Accès à tous les modèles d'IA" | t }}</li>
				<li class="flex items-center"><svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>{{ "Assistants personnalisés illimités" | t }}</li>
				<li class="flex items-center"><svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>{{ "500 requêtes mensuelles" | t }}</li>
				<li class="flex items-center"><svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>{{ "Support par email" | t }}</li>
				</ul>
			</div>
			<div class="p-4">
				<a href="https://agenda.pm/assistant?plan=essentiel" class="block w-full text-center bg-black text-white dark:bg-white dark:text-black font-bold py-3 px-4 rounded-lg hover:bg-blue-700 transition">{{ "Commencer" | t }}</a>
			</div>
			</div>
			
			<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:-translate-y-2">
				<div class="p-8">
					<h2 class="text-2xl font-bold mb-4">{{ "Pro" | t }}</h2>
					<p class="text-4xl font-bold text-blue-600 mb-2">10000 XAF</p>
					<p class="text-gray-500 mb-6">{{ "par utilisateur / mois" | t }}</p>
					<ul class="space-y-3 mb-8">
					<li class="flex items-center"><svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>{{ "Accès à tous les modèles d'IA" | t }}</li>
					<li class="flex items-center"><svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>{{ "Assistants personnalisés illimités" | t }}</li>
					<li class="flex items-center"><svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>{{ "2000 requêtes mensuelles" | t }}</li>
					<li class="flex items-center"><svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>{{ "Support prioritaire" | t }}</li>
					</ul>
				</div>
				<div class="p-4">
					<a href="https://agenda.pm/assistant?plan=pro" class="block w-full text-center bg-black text-white dark:bg-white dark:text-black font-bold py-3 px-4 rounded-lg hover:bg-blue-700 transition">{{ "S'inscrire" | t }}</a>
				</div>
			</div>
			
			<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:-translate-y-2">
			<div class="p-8">
				<h2 class="text-2xl font-bold mb-4">Élite</h2>
				<p class="text-4xl font-bold text-blue-600 mb-2">20000 XAF</p>
				<p class="text-gray-500 mb-6">{{ "Par utilisateur / mois" | t }}</p>
				<ul class="space-y-3 mb-8">
				<li class="flex items-center"><svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>{{ "Accès à tous les modèles d'IA" | t }}</li>
				<li class="flex items-center"><svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>{{ "Assistants personnalisés illimités" | t }}</li>
				<li class="flex items-center"><svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>{{ "Gestion d'équipes d'assistants" | t }}</li>
				<li class="flex items-center"><svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>{{ "Support VIP" | t }}</li>
				</ul>
			</div>
			<div class="p-4">
				<a href="https://agenda.pm/assistant?plan=elite" class="block w-full text-center bg-black text-white dark:bg-white dark:text-black font-bold py-3 px-4 rounded-lg hover:bg-blue-700 transition">{{ "Découvrir Élite" | t }}</a>
			</div>
			</div>
		</div>
	</div>
</section>

<section class="py-20">
	<div class="container mx-auto px-6">
	<div class="max-w-3xl mx-auto text-center">
		<h2 class="text-3xl font-bold mb-6">{{ "Solution Entreprise" | t }}</h2>
		<p class="text-xl text-gray-600 mb-8">{{ "Besoin d'une solution sur mesure pour votre grande entreprise ? Nous offrons des plans personnalisés avec un accès complet à notre API, des fonctionnalités avancées, une sécurité renforcée et un support dédié." | t }}</p>
		<a href="https://agenda.pm/assistant" class="inline-block bg-black text-white dark:bg-white dark:text-black font-bold py-3 px-6 rounded-lg hover:bg-blue-700 transition">{{ "Demander un Rendez-vous" | t }}</a>
	</div>
	</div>
</section>
</main>


<script>
const toggle = document.getElementById('toggle');
const monthlyPrices = ['5000 XAF', '10000 XAF', '20000 XAF'];
const yearlyPrices = ['50000 XAF', '100000 XAF', '200000 XAF'];
const priceElements = document.querySelectorAll('.text-4xl.font-bold.text-blue-600');
const periodElements = document.querySelectorAll('.text-gray-500.mb-6');

toggle.addEventListener('change', function() {
	priceElements.forEach((el, index) => {
	if (this.checked) {
		el.textContent = yearlyPrices[index];
		periodElements[index].textContent = '{{ "par utilisateur / an" | t }}';
	} else {
		el.textContent = monthlyPrices[index];
		periodElements[index].textContent = '{{ "par utilisateur / mois" | t }}';
	}
	});
});

// Défilement fluide pour les liens d'ancrage
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
	anchor.addEventListener('click', function (e) {
	e.preventDefault();
	document.querySelector(this.getAttribute('href')).scrollIntoView({
		behavior: 'smooth'
	});
	});
});
</script>


{{ template "footer.html" . }}