114 lines
6.6 KiB
TypeScript
114 lines
6.6 KiB
TypeScript
'use client';
|
|
|
|
import type { Metadata } from "next";
|
|
import Link from "next/link";
|
|
import { useState } from "react";
|
|
|
|
export default function AboutPage() {
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]">
|
|
{/* Hero Section */}
|
|
<section className="bg-gradient-to-r from-white to-[#faf9f5] py-12 border-b-2 border-[#e5e4dc]">
|
|
<div className="container mx-auto px-4">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
<h1 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] mb-4">
|
|
À propos de Thé Tip Top à Nice
|
|
</h1>
|
|
<p className="text-lg text-[#8a8a7a]">
|
|
Notre passion pour le thé d'exception et nos événements uniques à Nice
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* About Us our story*/}
|
|
<section className="py-20 bg-white/50 backdrop-blur-sm">
|
|
<div className="container mx-auto px-4">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="grid md:grid-cols-2 gap-16 items-center">
|
|
{/* Texte */}
|
|
<div className="order-2 md:order-1 space-y-6">
|
|
<h2 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] leading-tight">
|
|
Notre Histoire
|
|
<span className="block text-3xl md:text-4xl text-[#d4a574] mt-2">
|
|
Thé Tip Top Nice
|
|
</span>
|
|
</h2>
|
|
|
|
<div className="space-y-4 text-lg text-gray-700">
|
|
<p className="leading-relaxed">
|
|
Depuis plus de 15 ans, Thé Tip Top perpétue l'art du thé haut de gamme avec passion et authenticité. Inspirée par l'amour des saveurs authentiques et des traditions séculaires, notre marque s'engage à vous faire découvrir les meilleurs thés du monde dans notre boutique à Nice. Chaque thé de notre collection est soigneusement choisi auprès de producteurs respectueux de l'environnement et du commerce équitable.
|
|
</p>
|
|
<p className="leading-relaxed">
|
|
Nous privilégions les méthodes artisanales et biologiques pour préserver la richesse des arômes naturels de nos thés premium. Aujourd'hui, à l'occasion de l'ouverture de notre 10e boutique à Nice, nous célébrons cette aventure en organisant des événements uniques et des concours afin de partager notre passion du thé </p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Image */}
|
|
<div className="order-1 md:order-2">
|
|
<div className="relative rounded-2xl overflow-hidden shadow-2xl">
|
|
{/* Fallback avec illustration CSS si l'image n'existe pas */}
|
|
<div className="aspect-[4/3] bg-gradient-to-br from-[#1a4d2e] via-[#2d5a3d] to-[#1a4d2e] relative">
|
|
{/* Motif décoratif */}
|
|
<div className="absolute inset-0 opacity-20">
|
|
<div className="absolute inset-0" style={{
|
|
backgroundImage: 'url("data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'0.3\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")',
|
|
}}></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* notre engagement Section */}
|
|
<section className="py-16 bg-white/50 backdrop-blur-sm">
|
|
<div className="container mx-auto px-4">
|
|
<div className="max-w-5xl mx-auto">
|
|
<div className="text-center mb-8">
|
|
<h2 className="text-3xl font-bold text-[#5a5a4e] mb-2">Notre Engagement - Thé Tip Top </h2>
|
|
<p className="text-[#8a8a7a]">Qualité, Durabilité et Respect au Cœur de Chaque Thé</p>
|
|
</div>
|
|
<div className="grid md:grid-cols-3 gap-4">
|
|
<div className="bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 rounded-lg p-6 text-center border border-[#d4a574]/20 hover:shadow-lg transition-shadow">
|
|
<div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-3xl shadow-lg">🍵</div>
|
|
<div className="text-2xl font-bold text-[#5a5a4e] mb-2">Thé bio</div>
|
|
<p className="text-sm text-[#8a8a7a]">
|
|
Tous nos thés sont certifiés biologiques et cultivés dans le respect de l'environnement.
|
|
</p>
|
|
</div>
|
|
<div className="bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 rounded-lg p-6 text-center border border-[#d4a574]/20 hover:shadow-lg transition-shadow">
|
|
<div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-3xl shadow-lg">🌍</div>
|
|
<div className="text-2xl font-bold text-[#5a5a4e] mb-2">Commerce équitable </div>
|
|
<p className="text-sm text-[#8a8a7a]">
|
|
Nous soutenons les producteurs locaux en collaborant avec des partenaires engagés dans des pratiques durables et équitables
|
|
</p>
|
|
</div>
|
|
<div className="bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 rounded-lg p-6 text-center border border-[#d4a574]/20 hover:shadow-lg transition-shadow">
|
|
<div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-3xl shadow-lg">📦</div>
|
|
<div className="text-2xl font-bold text-[#5a5a4e] mb-2">Livraison rapide</div>
|
|
<p className="text-sm text-[#8a8a7a]">
|
|
Expédition sous 24h pour que vous puissiez savourer rapidement vos thés
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/* notre philosophie Section */}
|
|
<section className="py-16 bg-white/50 backdrop-blur-sm">
|
|
<div className="container mx-auto px-4">
|
|
<div className="max-w-5xl mx-auto">
|
|
<div className="text-center mb-8">
|
|
<h2 className="text-2xl italic text-[#5a5a4e] mb-4">
|
|
"Le thé, un art de vivre, une invitation à la découverte."
|
|
</h2>
|
|
<p className="text-[#8a8a7a]">Philosophie de Thé Tip Top</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|