This commit is contained in:
soufiane 2025-11-17 23:43:46 +01:00
commit 3ff0f8ccac

View File

@ -9,93 +9,37 @@ export const metadata: Metadata = {
export default function HomePage() {
return (
<div className="py-12">
{/* Hero Section */}
<section className="relative overflow-hidden bg-gradient-to-br from-primary-50 via-white to-green-50 -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8 py-20 mb-16">
<div className="max-w-4xl mx-auto">
<div className="text-center">
<div className="inline-block mb-4">
<span className="bg-primary-100 text-primary-700 px-4 py-2 rounded-full text-sm font-semibold">
Grand Jeu-Concours 2025
</span>
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">
Gagnez des lots{' '}
<span className="text-primary-600">exceptionnels</span>
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
<Image
className="dark:invert"
src="/next.svg"
alt="Next.js logo"
width={100}
height={20}
priority
/>
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
Branche Dev
</h1>
<p className="text-lg md:text-xl text-gray-600 mb-8 leading-relaxed">
Participez à notre jeu-concours et tentez de remporter des infuseurs à thé,
des coffrets découverte, des thés signature et bien plus encore !
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
Looking a starting point or more instructions? Head over to{" "}
<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="font-medium text-zinc-950 dark:text-zinc-50"
>
Templates
</a>{" "}
or the{" "}
<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="font-medium text-zinc-950 dark:text-zinc-50"
>
Learning
</a>{" "}
center.
</p>
<div className="flex gap-4 justify-center flex-wrap">
<Link href="/jeux">
<button className="px-8 py-4 bg-white text-black font-semibold rounded-lg hover:bg-gray-50 transition-all transform hover:scale-105 text-lg shadow-lg border-2 border-black">
🎮 Jouer maintenant
</button>
</Link>
</div>
<div className="mt-8 flex items-center justify-center gap-6 text-sm text-gray-600 flex-wrap">
<div className="flex items-center gap-2">
<svg className="w-5 h-5 text-primary-600" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
</svg>
<span>100% gagnant</span>
</div>
<div className="flex items-center gap-2">
<svg className="w-5 h-5 text-primary-600" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
</svg>
<span>Inscription gratuite</span>
</div>
<div className="flex items-center gap-2">
<svg className="w-5 h-5 text-primary-600" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
</svg>
<span>Résultat immédiat</span>
</div>
</div>
</div>
</div>
</section>
{/* Features Section */}
<section className="mb-16">
<h2 className="text-3xl font-bold text-center text-gray-900 mb-12">
Comment ça marche ?
</h2>
<div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<Card hover className="text-center">
<CardContent className="pt-8">
<div className="text-5xl mb-4">🛒</div>
<h3 className="text-xl font-semibold mb-2">1. Achetez</h3>
<p className="text-gray-600">
Effectuez un achat chez Thé Tip Top et recevez votre ticket de
caisse avec un code unique
</p>
</CardContent>
</Card>
<Card hover className="text-center">
<CardContent className="pt-8">
<div className="text-5xl mb-4">🎮</div>
<h3 className="text-xl font-semibold mb-2">2. Jouez</h3>
<p className="text-gray-600">
Entrez le code de votre ticket sur notre site pour découvrir
instantanément votre gain
</p>
</CardContent>
</Card>
<Card hover className="text-center">
<CardContent className="pt-8">
<div className="text-5xl mb-4">🎁</div>
<h3 className="text-xl font-semibold mb-2">3. Gagnez</h3>
<p className="text-gray-600">
Récupérez votre lot en magasin ou profitez de votre réduction
immédiate
</p>
</CardContent>
</Card>
</div>
</section>