{% extends 'base.html.twig' %}

{% block title %}BookNest{% endblock %}

{% block body %}
	<div class="flex flex-col items-center justify-center min-h-screen bg-gray-50 px-4">
		<!-- Titre principal -->
		<h1 class="text-4xl font-extrabold text-[#263B46] text-center">Bienvenue sur BookNest 📚</h1>

		<!-- Sous-titre -->
		<p class="mt-4 text-lg text-gray-600 text-center">
			Découvrez, notez et partagez vos livres préférés avec la communauté !
		</p>

		<!-- Bouton CTA -->
		<a href="" class="mt-6 px-6 py-3 dark:bg-[#263B46] text-white rounded-xl shadow-md hover:bg-red-800 transition">
			Explorer les livres
		</a>

		<!-- Section de mise en avant -->
		<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl">
			<!-- Carte 1 -->
			<div class="bg-white p-6 rounded-lg shadow-lg text-center">
				<h2 class="text-xl font-semibold text-gray-800">📖 Catalogue</h2>
				<p class="mt-2 text-gray-600">Parcourez des milliers de livres classés par genres et auteurs.</p>
			</div>

			<!-- Carte 2 -->
			<div class="bg-white p-6 rounded-lg shadow-lg text-center">
				<h2 class="text-xl font-semibold text-gray-800">⭐ Avis & Notes</h2>
				<p class="mt-2 text-gray-600">Lisez et partagez des avis sur vos lectures préférées.</p>
			</div>

			<!-- Carte 3 -->
			<div class="bg-white p-6 rounded-lg shadow-lg text-center">
				<h2 class="text-xl font-semibold text-gray-800">👥 Communauté</h2>
				<p class="mt-2 text-gray-600">Échangez avec d'autres passionnés de lecture.</p>
			</div>
		</div>
	</div>
{% endblock %}