the-tip-top-frontend/components/AboutContest.tsx
soufiane 3d8d598792 feat: update prize displays and improve layout consistency
- Update prize titles to include prices (39€, 69€) on lots page
- Replace emoji icons with actual product images on homepage
- Add Grand Prize (1 an de thé) to homepage prize grid
- Standardize image padding and alignment across all prize cards
- Ensure all prize cards have equal heights for better visual alignment
- Update AboutContest component to use real image (acceuil.png)
- Add official Pinterest link to footer

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-23 23:56:19 +01:00

89 lines
4.1 KiB
TypeScript

'use client';
import Image from 'next/image';
import Link from 'next/link';
import Button from './Button';
interface AboutContestProps {
title?: string;
description?: string;
imageUrl?: string;
}
export default function AboutContest({
title = "Jeu Concours Thé Tip Top - Boutique de Thé Premium à Nice",
description,
imageUrl = "/images/tea-collection.jpg",
}: AboutContestProps) {
const defaultDescription = `
Bienvenue dans notre grand jeu-concours Thé Tip Top organisé à l'occasion de l'ouverture de notre 10ème boutique de thé premium à Nice.
Nous vous offrons la chance de gagner des produits exceptionnels : thés bio, accessoires exclusifs et bien plus encore.
Participez facilement en quelques clics et tentez votre chance parmi nos lots prestigieux.
Avec 100% de tickets gagnants, chaque participation vous offre la garantie de repartir avec un cadeau !
`;
return (
<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">
Jeu Concours Thé Tip Top
<span className="block text-3xl md:text-4xl text-[#d4a574] mt-2">
Boutique Premium à Nice
</span>
</h2>
<div className="space-y-4 text-lg text-gray-700">
<p className="leading-relaxed">
Bienvenue dans notre grand jeu-concours <span className="font-semibold text-[#5a5a4e]">Thé Tip Top</span> organisé à l'occasion de l'ouverture de notre <span className="font-semibold text-[#d4a574]">10ème boutique</span> de thé premium à Nice.
</p>
<p className="leading-relaxed">
Nous vous offrons la chance de gagner des produits exceptionnels : thés bio, accessoires exclusifs et bien plus encore.
</p>
<p className="leading-relaxed">
Participez facilement en quelques clics et tentez votre chance parmi nos lots prestigieux.
</p>
<div className="bg-gradient-to-r from-[#d4a574]/10 to-[#c4956a]/10 border-l-4 border-[#d4a574] p-4 rounded-r-lg">
<p className="font-semibold text-[#5a5a4e] text-xl">
100% de tickets gagnants ! Chaque participation vous offre la garantie de repartir avec un cadeau.
</p>
</div>
</div>
<div className="flex flex-col sm:flex-row gap-4 pt-4">
<Link href="/register">
<button className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] hover:from-[#e5b685] hover:to-[#d4a574] text-white font-bold text-lg px-8 py-4 rounded-lg transition-all duration-300 hover:shadow-[0_0_25px_rgba(212,165,116,0.7)] hover:scale-105 shadow-lg flex items-center justify-center gap-2">
En savoir plus
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
</button>
</Link>
</div>
</div>
{/* Image */}
<div className="order-1 md:order-2">
<div className="relative rounded-2xl overflow-hidden shadow-2xl">
<div className="aspect-square relative">
<Image
src="/images/lots/acceuil.png"
alt="Jeu Concours Thé Tip Top - Boutique Premium à Nice"
width={800}
height={800}
className="w-full h-full object-cover"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
}