feat: replace placeholder homepage with proper Thé Tip Top landing page
Replace Next.js default template page with a complete landing page featuring: - Hero section with main CTA buttons - "How to Play" section explaining the 3-step participation process - Updated prizes showcase section - Enhanced final CTA section with dual action buttons 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
1e6a4a0f6e
commit
f73a84501e
161
app/page.tsx
161
app/page.tsx
|
|
@ -1,7 +1,7 @@
|
||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import Image from "next/image";
|
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
|
||||||
|
import Button from "@/components/Button";
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Thé Tip Top - Jeu Concours",
|
title: "Thé Tip Top - Jeu Concours",
|
||||||
|
|
@ -10,46 +10,80 @@ export const metadata: Metadata = {
|
||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
return (
|
return (
|
||||||
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
<div className="min-h-screen">
|
||||||
<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">
|
{/* Hero Section */}
|
||||||
<Image
|
<section className="bg-gradient-to-br from-green-50 via-white to-primary-50 py-20">
|
||||||
className="dark:invert"
|
<div className="container mx-auto px-4">
|
||||||
src="/next.svg"
|
<div className="max-w-4xl mx-auto text-center">
|
||||||
alt="Next.js logo"
|
<div className="text-6xl mb-6">🍵</div>
|
||||||
width={100}
|
<h1 className="text-5xl md:text-6xl font-bold text-gray-900 mb-6">
|
||||||
height={20}
|
Bienvenue chez <span className="text-primary-600">Thé Tip Top</span>
|
||||||
priority
|
</h1>
|
||||||
/>
|
<p className="text-xl text-gray-700 mb-8 leading-relaxed">
|
||||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
Participez à notre grand jeu-concours à l'occasion de notre 10ème anniversaire !
|
||||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
<br />
|
||||||
Branche Dev
|
<span className="font-semibold text-primary-600">100% de tickets gagnants</span> - Tentez votre chance dès maintenant
|
||||||
</h1>
|
</p>
|
||||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
Looking a starting point or more instructions? Head over to{" "}
|
<Link href="/register">
|
||||||
<a
|
<Button size="lg" className="text-lg px-8 py-4">
|
||||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
Participer au jeu
|
||||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
</Button>
|
||||||
>
|
</Link>
|
||||||
Templates
|
<Link href="/lots">
|
||||||
</a>{" "}
|
<Button variant="outline" size="lg" className="text-lg px-8 py-4">
|
||||||
or the{" "}
|
Découvrir les lots
|
||||||
<a
|
</Button>
|
||||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
</Link>
|
||||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
</div>
|
||||||
>
|
</div>
|
||||||
Learning
|
|
||||||
</a>{" "}
|
|
||||||
center.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</section>
|
||||||
|
|
||||||
|
{/* How to Play Section */}
|
||||||
|
<section className="py-16 bg-white">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
<h2 className="text-4xl font-bold text-center text-gray-900 mb-12">
|
||||||
|
Comment participer ?
|
||||||
|
</h2>
|
||||||
|
<div className="grid md:grid-cols-3 gap-8">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="bg-primary-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<span className="text-3xl">1️⃣</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold mb-2">Inscrivez-vous</h3>
|
||||||
|
<p className="text-gray-600">Créez votre compte gratuitement en quelques secondes</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="bg-primary-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<span className="text-3xl">2️⃣</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold mb-2">Entrez votre code</h3>
|
||||||
|
<p className="text-gray-600">Saisissez le code figurant sur votre ticket de caisse</p>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="bg-primary-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<span className="text-3xl">3️⃣</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold mb-2">Gagnez !</h3>
|
||||||
|
<p className="text-gray-600">Découvrez immédiatement votre lot et récupérez-le en magasin</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
{/* Prizes 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">
|
<section className="py-16 bg-gradient-to-br from-primary-50 to-green-50">
|
||||||
<div className="max-w-5xl mx-auto">
|
<div className="container mx-auto px-4">
|
||||||
<h2 className="text-3xl font-bold text-center text-gray-900 mb-12">
|
<div className="max-w-6xl mx-auto">
|
||||||
Lots à gagner
|
<h2 className="text-4xl font-bold text-center text-gray-900 mb-4">
|
||||||
</h2>
|
Lots à gagner
|
||||||
|
</h2>
|
||||||
|
<p className="text-center text-gray-700 mb-12 text-lg">
|
||||||
|
Tous nos lots sont 100% gagnants - Chaque participation est récompensée !
|
||||||
|
</p>
|
||||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
<Card className="bg-white">
|
<Card className="bg-white">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
|
|
@ -121,22 +155,41 @@ export default function HomePage() {
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* CTA Section */}
|
{/* CTA Section */}
|
||||||
<section className="text-center">
|
<section className="py-16 bg-white">
|
||||||
<Card className="max-w-2xl mx-auto bg-gradient-to-r from-primary-600 to-primary-700 text-white">
|
<div className="container mx-auto px-4">
|
||||||
<CardContent className="py-12">
|
<Card className="max-w-3xl mx-auto bg-gradient-to-r from-primary-600 to-green-600 text-white border-0 shadow-2xl">
|
||||||
<h2 className="text-3xl font-bold mb-4 text-white">
|
<CardContent className="py-12 px-8">
|
||||||
Prêt à tenter votre chance ?
|
<div className="text-center">
|
||||||
</h2>
|
<div className="text-5xl mb-6">🎉</div>
|
||||||
<p className="text-lg mb-8 text-white">
|
<h2 className="text-4xl font-bold mb-4 text-white">
|
||||||
Inscrivez-vous gratuitement et participez au jeu-concours
|
Prêt à tenter votre chance ?
|
||||||
</p>
|
</h2>
|
||||||
<Link href="/register">
|
<p className="text-xl mb-8 text-white opacity-95">
|
||||||
<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">
|
Inscrivez-vous gratuitement et participez au jeu-concours du 10ème anniversaire
|
||||||
Créer mon compte
|
</p>
|
||||||
</button>
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
</Link>
|
<Link href="/register">
|
||||||
</CardContent>
|
<Button
|
||||||
</Card>
|
size="lg"
|
||||||
|
className="bg-white text-primary-600 hover:bg-gray-100 font-bold text-lg px-10 py-4 shadow-lg"
|
||||||
|
>
|
||||||
|
Créer mon compte
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
<Link href="/connexion">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="lg"
|
||||||
|
className="border-2 border-white text-white hover:bg-white hover:text-primary-600 font-bold text-lg px-10 py-4"
|
||||||
|
>
|
||||||
|
J'ai déjà un compte
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user