199 lines
8.7 KiB
TypeScript
199 lines
8.7 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Link from "next/link";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Thé Tip Top - Jeu Concours",
|
|
description: "Participez au jeu-concours Thé Tip Top et gagnez des lots exceptionnels !",
|
|
};
|
|
|
|
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>
|
|
</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>
|
|
<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>
|
|
|
|
{/* Prizes Section */}
|
|
<section className="mb-16 bg-gradient-to-r from-primary-50 to-green-50 py-12 -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
|
|
<div className="max-w-5xl mx-auto">
|
|
<h2 className="text-3xl font-bold text-center text-gray-900 mb-12">
|
|
Lots à gagner
|
|
</h2>
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<Card className="bg-white">
|
|
<CardHeader>
|
|
<div className="text-4xl text-center mb-2">🌿</div>
|
|
<CardTitle className="text-center">Infuseur à thé</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="text-center text-gray-600">
|
|
Un infuseur élégant pour préparer votre thé préféré
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-white">
|
|
<CardHeader>
|
|
<div className="text-4xl text-center mb-2">🍵</div>
|
|
<CardTitle className="text-center">Thé signature 100g</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="text-center text-gray-600">
|
|
Notre thé signature exclusif en sachet de 100g
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-white">
|
|
<CardHeader>
|
|
<div className="text-4xl text-center mb-2">☕</div>
|
|
<CardTitle className="text-center">Thé gratuit</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="text-center text-gray-600">
|
|
Une boisson offerte lors de votre prochaine visite
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-white">
|
|
<CardHeader>
|
|
<div className="text-4xl text-center mb-2">🎁</div>
|
|
<CardTitle className="text-center">
|
|
Coffret découverte
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="text-center text-gray-600">
|
|
Un coffret découverte d'une valeur de 39€
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-white">
|
|
<CardHeader>
|
|
<div className="text-4xl text-center mb-2">🏆</div>
|
|
<CardTitle className="text-center">
|
|
Coffret prestige
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="text-center text-gray-600">
|
|
Notre coffret prestige d'une valeur de 69€
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-white border-2 border-yellow-400">
|
|
<CardHeader>
|
|
<div className="text-4xl text-center mb-2">✨</div>
|
|
<CardTitle className="text-center text-yellow-600">
|
|
100% gagnant !
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="text-center text-gray-600">
|
|
Chaque ticket est gagnant, tentez votre chance dès maintenant
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="text-center">
|
|
<Card className="max-w-2xl mx-auto bg-gradient-to-r from-primary-600 to-primary-700 text-white">
|
|
<CardContent className="py-12">
|
|
<h2 className="text-3xl font-bold mb-4 text-white">
|
|
Prêt à tenter votre chance ?
|
|
</h2>
|
|
<p className="text-lg mb-8 text-white">
|
|
Inscrivez-vous gratuitement et participez au jeu-concours
|
|
</p>
|
|
<Link href="/register">
|
|
<button className="px-10 py-4 bg-white text-primary-600 font-bold rounded-lg hover:bg-primary-50 transition-colors text-lg shadow-lg border-2 border-white">
|
|
Créer mon compte
|
|
</button>
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|