soufiane
6a772eead6
Remove trailing whitespace for code consistency. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
234 lines
9.2 KiB
TypeScript
234 lines
9.2 KiB
TypeScript
import type { Metadata } from "next";
|
||
import Link from "next/link";
|
||
import Image from "next/image";
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
|
||
import Button from "@/components/Button";
|
||
import { ROUTES } from "@/utils/constants";
|
||
|
||
export const metadata: Metadata = {
|
||
title: "À propos - Thé Tip Top",
|
||
description: "Découvrez l'histoire et les engagements de notre maison de thé niçoise",
|
||
};
|
||
|
||
export default function AboutPage() {
|
||
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">
|
||
À propos de Thé Tip Top Nice
|
||
</h1>
|
||
<p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto mb-8">
|
||
Depuis Nice, nous célébrons les thés d'exception et les moments à partager.
|
||
Découvrez notre histoire et ce qui guide notre maison au quotidien.
|
||
</p>
|
||
<Link href="#histoire">
|
||
<Button size="lg" className="px-8">
|
||
Explorer notre univers
|
||
</Button>
|
||
</Link>
|
||
</section>
|
||
|
||
{/* Histoire Section */}
|
||
<section id="histoire" className="mb-16">
|
||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||
<div>
|
||
<h2 className="text-3xl font-bold text-gray-900 mb-6">
|
||
Notre histoire
|
||
</h2>
|
||
<p className="text-lg text-gray-700 mb-4 font-semibold">
|
||
Quinze ans de passion infusée.
|
||
</p>
|
||
<p className="text-gray-600 leading-relaxed mb-4">
|
||
Née d'une envie simple — faire (re)découvrir le vrai goût du thé — notre maison
|
||
sélectionne des feuilles remarquables auprès de producteurs engagés. Au fil des années,
|
||
nous avons grandi sans rien céder à nos exigences : traçabilité, fraîcheur, respect des savoir-faire.
|
||
</p>
|
||
<p className="text-gray-600 leading-relaxed">
|
||
Aujourd'hui, notre boutique niçoise est le point de rencontre entre curieux et connaisseurs :
|
||
dégustations, conseils personnalisés et une carte qui évolue au rythme des récoltes.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Image Placeholder */}
|
||
<div className="relative">
|
||
<div className="bg-gradient-to-br from-primary-100 to-green-100 rounded-2xl overflow-hidden aspect-square flex items-center justify-center">
|
||
<div className="text-center p-8">
|
||
<div className="mb-4 flex justify-center">
|
||
<Image
|
||
src="/logos/logo.svg"
|
||
alt="Logo Thé Tip Top"
|
||
width={200}
|
||
height={200}
|
||
className="object-contain"
|
||
/>
|
||
</div>
|
||
<p className="text-gray-600 font-medium">Notre boutique à Nice</p>
|
||
<p className="text-sm text-gray-500 mt-2">Image à venir</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Engagements Section */}
|
||
<section className="mb-16">
|
||
<h2 className="text-3xl font-bold text-center text-gray-900 mb-12">
|
||
Nos engagements
|
||
</h2>
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
{/* Engagement 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-3 text-gray-900">
|
||
Agriculture responsable
|
||
</h3>
|
||
<p className="text-gray-600 text-sm">
|
||
Des jardins certifiés et des pratiques respectueuses de la biodiversité,
|
||
pour des thés propres et expressifs.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Engagement 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-3 text-gray-900">
|
||
Filière équitable
|
||
</h3>
|
||
<p className="text-gray-600 text-sm">
|
||
Des partenariats durables et rémunérateurs pour les fermes qui nous
|
||
confient leurs récoltes.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Engagement 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-3 text-gray-900">
|
||
Fraîcheur & préparation
|
||
</h3>
|
||
<p className="text-gray-600 text-sm">
|
||
Conditionnement soigné et rotations courtes pour préserver les arômes.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Engagement 4 */}
|
||
<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-3 text-gray-900">
|
||
Conseil & transmission
|
||
</h3>
|
||
<p className="text-gray-600 text-sm">
|
||
Ateliers, initiations et fiches pratiques : nous aimons partager nos
|
||
méthodes d'infusion.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</section>
|
||
|
||
{/* CTA Section */}
|
||
<section className="mb-16">
|
||
<Card className="max-w-4xl mx-auto bg-gradient-to-r from-primary-600 to-primary-700 text-white">
|
||
<CardContent className="py-12 text-center">
|
||
<h2 className="text-3xl font-bold mb-4 text-white">
|
||
Participez à notre grand jeu autour du thé !
|
||
</h2>
|
||
<p className="text-lg mb-8 text-white">
|
||
À gagner : sélections premium, accessoires de dégustation et surprises maison.
|
||
Chaque achat vous donne une chance supplémentaire.
|
||
</p>
|
||
<Link href={ROUTES.GAME}>
|
||
<Button variant="outline" size="lg" className="bg-white text-primary-600 hover:bg-primary-50 border-white">
|
||
Découvrir le jeu
|
||
</Button>
|
||
</Link>
|
||
</CardContent>
|
||
</Card>
|
||
</section>
|
||
|
||
{/* Quote Section */}
|
||
<section className="mb-16">
|
||
<div className="max-w-3xl mx-auto text-center">
|
||
<blockquote className="text-2xl md:text-3xl font-light text-gray-700 italic mb-4">
|
||
« Un thé bien infusé, c'est une minute pour soi et un souvenir à partager. »
|
||
</blockquote>
|
||
<p className="text-gray-600 font-medium">— L'équipe Thé Tip Top</p>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Info Section */}
|
||
<section className="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">
|
||
<div className="grid md:grid-cols-3 gap-8 text-center">
|
||
{/* Localisation */}
|
||
<Card>
|
||
<CardHeader>
|
||
<div className="text-4xl mb-2">📍</div>
|
||
<CardTitle className="text-xl">Où nous trouver</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="text-gray-600">
|
||
18 Avenue Thiers<br />
|
||
06000 Nice, France
|
||
</p>
|
||
<p className="text-sm text-gray-500 mt-2">
|
||
Au cœur de Nice, proches des transports.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Horaires */}
|
||
<Card>
|
||
<CardHeader>
|
||
<div className="text-4xl mb-2">🕐</div>
|
||
<CardTitle className="text-xl">Horaires</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="text-gray-600">
|
||
Du mardi au samedi<br />
|
||
10h – 19h
|
||
</p>
|
||
<p className="text-sm text-gray-500 mt-2">
|
||
Fermé dimanche et lundi
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Contact */}
|
||
<Card>
|
||
<CardHeader>
|
||
<div className="text-4xl mb-2">✉️</div>
|
||
<CardTitle className="text-xl">Contact</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="text-gray-600 mb-2">
|
||
<a href="mailto:contact@thetiptop.fr" className="hover:text-primary-600 transition-colors">
|
||
contact@thetiptop.fr
|
||
</a>
|
||
</p>
|
||
<p className="text-gray-600 mb-2">
|
||
<a href="tel:+33123456789" className="hover:text-primary-600 transition-colors">
|
||
01 23 45 67 89
|
||
</a>
|
||
</p>
|
||
<p className="text-sm text-gray-500 mt-2">
|
||
Conseils personnalisés par e-mail ou en boutique.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
);
|
||
}
|
||
|