259 lines
10 KiB
TypeScript
259 lines
10 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Link from "next/link";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
|
|
import Button from "@/components/Button";
|
|
import { ROUTES } from "@/utils/constants";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Nos Gains - Thé Tip Top",
|
|
description: "Découvrez nos gains d'exception d'une valeur pouvant atteindre 100€",
|
|
};
|
|
|
|
export default function LotsPage() {
|
|
return (
|
|
<div className="py-12">
|
|
{/* Hero Section */}
|
|
<section className="text-center mb-16">
|
|
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
|
|
Nos gains d'exception
|
|
</h1>
|
|
<p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
|
|
Des récompenses d'une valeur pouvant atteindre 100€ vous attendent !
|
|
Explorez notre sélection de thés premium et d'accessoires exclusifs.
|
|
</p>
|
|
</section>
|
|
|
|
{/* Prizes Grid */}
|
|
<section className="mb-16">
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
|
{/* Infuseur */}
|
|
<Card className="hover:shadow-xl transition-shadow">
|
|
<CardHeader>
|
|
<div className="text-5xl text-center mb-3">🍵</div>
|
|
<CardTitle className="text-center text-xl">Infuseur de thé</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="text-center">
|
|
<p className="text-gray-600 leading-relaxed">
|
|
Un infuseur en acier inoxydable de qualité supérieure pour révéler
|
|
tous les arômes de vos thés.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Thé détox */}
|
|
<Card className="hover:shadow-xl transition-shadow">
|
|
<CardHeader>
|
|
<div className="text-5xl text-center mb-3">🌿</div>
|
|
<CardTitle className="text-center text-xl">Boite de 100g d'un thé détox</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="text-center">
|
|
<p className="text-gray-600 leading-relaxed">
|
|
Un mélange exclusif de plantes biologiques pour purifier votre
|
|
organisme en douceur.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Coffret 39€ */}
|
|
<Card className="hover:shadow-xl transition-shadow">
|
|
<CardHeader>
|
|
<div className="text-5xl text-center mb-3">🎁</div>
|
|
<CardTitle className="text-center text-xl">Coffret Découverte de 39€</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="text-center">
|
|
<p className="text-gray-600 leading-relaxed">
|
|
Une sélection de 6 thés d'exception du monde entier dans un élégant
|
|
coffret cadeau.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Thé signature */}
|
|
<Card className="hover:shadow-xl transition-shadow">
|
|
<CardHeader>
|
|
<div className="text-5xl text-center mb-3">☕</div>
|
|
<CardTitle className="text-center text-xl">Thé signature</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="text-center">
|
|
<p className="text-gray-600 leading-relaxed">
|
|
Un mélange de thé exclusif, soigneusement élaboré par nos maîtres artisans,
|
|
offrant des arômes uniques et une expérience authentique à chaque tasse.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Coffret 69€ */}
|
|
<Card className="hover:shadow-xl transition-shadow">
|
|
<CardHeader>
|
|
<div className="text-5xl text-center mb-3">🏆</div>
|
|
<CardTitle className="text-center text-xl">Coffret Découverte de 69€</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="text-center">
|
|
<p className="text-gray-600 leading-relaxed">
|
|
Un coffret premium contenant une sélection de nos meilleurs thés
|
|
d'exception avec accessoires assortis.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* CTA Card */}
|
|
<Card className="bg-gradient-to-br from-primary-600 to-primary-700 text-white hover:shadow-xl transition-shadow flex items-center justify-center">
|
|
<CardContent className="text-center py-8">
|
|
<div className="text-5xl mb-4">🎮</div>
|
|
<h3 className="text-2xl font-bold mb-4">Participer maintenant</h3>
|
|
<Link href={ROUTES.GAME}>
|
|
<Button
|
|
variant="outline"
|
|
className="bg-white text-primary-600 hover:bg-primary-50 border-white"
|
|
>
|
|
Jouer
|
|
</Button>
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Comment participer 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-4">
|
|
Comment participer ?
|
|
</h2>
|
|
<p className="text-center text-gray-600 mb-12 max-w-2xl mx-auto">
|
|
Trois étapes simples pour tenter votre chance et repartir avec nos gains d'exception.
|
|
</p>
|
|
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
{/* Étape 1 */}
|
|
<Card className="bg-white text-center hover:shadow-lg transition-shadow">
|
|
<CardContent className="pt-8">
|
|
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary-600 text-white text-3xl font-bold mb-4">
|
|
1
|
|
</div>
|
|
<h3 className="text-xl font-bold mb-3 text-gray-900">
|
|
Créez votre compte
|
|
</h3>
|
|
<p className="text-gray-600">
|
|
Ouvrez gratuitement votre espace et rejoignez notre communauté de passionnés.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Étape 2 */}
|
|
<Card className="bg-white text-center hover:shadow-lg transition-shadow">
|
|
<CardContent className="pt-8">
|
|
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary-600 text-white text-3xl font-bold mb-4">
|
|
2
|
|
</div>
|
|
<h3 className="text-xl font-bold mb-3 text-gray-900">
|
|
Participez
|
|
</h3>
|
|
<p className="text-gray-600">
|
|
Prenez part au jeu-concours et validez votre participation chaque jour.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Étape 3 */}
|
|
<Card className="bg-white text-center hover:shadow-lg transition-shadow">
|
|
<CardContent className="pt-8">
|
|
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary-600 text-white text-3xl font-bold mb-4">
|
|
3
|
|
</div>
|
|
<h3 className="text-xl font-bold mb-3 text-gray-900">
|
|
Remportez des gains
|
|
</h3>
|
|
<p className="text-gray-600">
|
|
Gagnez des récompenses d'exception et découvrez l'univers premium de Thé Tip Top.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Stats & Features Section */}
|
|
<section className="mb-16">
|
|
<div className="max-w-5xl mx-auto">
|
|
{/* Main Stat */}
|
|
<div className="text-center mb-12">
|
|
<div className="text-6xl mb-4">🎉</div>
|
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-3">
|
|
Déjà plus de 1000 gains remis !
|
|
</h2>
|
|
<p className="text-lg text-gray-600">
|
|
Rejoignez les milliers de participants qui ont déjà découvert nos thés d'exception.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Features Grid */}
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
{/* Feature 1 */}
|
|
<Card className="text-center hover:shadow-lg transition-shadow">
|
|
<CardContent className="pt-8">
|
|
<div className="text-5xl mb-4">🏆</div>
|
|
<h3 className="text-xl font-bold mb-2 text-gray-900">
|
|
Gagnant à tous les coups
|
|
</h3>
|
|
<p className="text-gray-600 text-sm">
|
|
Chaque participant repart avec une récompense.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Feature 2 */}
|
|
<Card className="text-center hover:shadow-lg transition-shadow">
|
|
<CardContent className="pt-8">
|
|
<div className="text-5xl mb-4">🌱</div>
|
|
<h3 className="text-xl font-bold mb-2 text-gray-900">
|
|
Thés bio certifiés
|
|
</h3>
|
|
<p className="text-gray-600 text-sm">
|
|
Une qualité contrôlée et garantie.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Feature 3 */}
|
|
<Card className="text-center hover:shadow-lg transition-shadow">
|
|
<CardContent className="pt-8">
|
|
<div className="text-5xl mb-4">✅</div>
|
|
<h3 className="text-xl font-bold mb-2 text-gray-900">
|
|
Satisfait ou remboursé
|
|
</h3>
|
|
<p className="text-gray-600 text-sm">
|
|
Une expérience 100% sereine.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Final CTA */}
|
|
<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">
|
|
Prêt à tenter votre chance ?
|
|
</h2>
|
|
<p className="text-lg mb-8 text-primary-50">
|
|
Inscrivez-vous gratuitement et participez au jeu-concours dès maintenant
|
|
</p>
|
|
<Link href={ROUTES.REGISTER}>
|
|
<Button
|
|
size="lg"
|
|
variant="outline"
|
|
className="bg-white text-primary-600 hover:bg-primary-50 border-white px-10"
|
|
>
|
|
Créer mon compte
|
|
</Button>
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|