feat(faq): redesign FAQ page with modern UI
- New hero section with dark green gradient and decorative elements - Glassmorphism search bar integrated in hero - Sticky category filters with icons and "Tout" button - Redesigned FAQ cards with category icons and animations - Improved CTA section with blur effects - Better visual hierarchy and user experience 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
6f1b04364b
commit
967cc95476
|
|
@ -7,6 +7,7 @@ interface FAQ {
|
|||
category: string;
|
||||
question: string;
|
||||
answer: string;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
const faqData: FAQ[] = [
|
||||
|
|
@ -14,63 +15,73 @@ const faqData: FAQ[] = [
|
|||
category: "Participation",
|
||||
question: "Comment participer au jeu-concours ?",
|
||||
answer: "Pour participer, vous devez effectuer un achat de minimum 49€ dans une boutique Thé Tip Top participante, récupérer votre ticket de caisse avec le code unique, créer un compte sur notre site www.thetiptop.fr, vous connecter et saisir votre code pour découvrir instantanément votre gain.",
|
||||
icon: "M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z",
|
||||
},
|
||||
{
|
||||
category: "Codes",
|
||||
question: "Où trouver mon code de participation ?",
|
||||
answer: "Votre code de participation se trouve sur votre ticket de caisse après chaque achat de minimum 49€ en magasin Thé Tip Top. Il est clairement indiqué et composé de 10 caractères alphanumériques.",
|
||||
icon: "M7 20l4-16m2 16l4-16M6 9h14M4 15h14",
|
||||
},
|
||||
{
|
||||
category: "Codes",
|
||||
question: "Mon code ne fonctionne pas, que faire ?",
|
||||
answer: "Vérifiez d'abord que vous avez bien saisi le code sans erreur (attention aux caractères similaires comme 0/O ou 1/I). Assurez-vous que le code n'a pas déjà été utilisé. Si le problème persiste, contactez notre service client via la page Contact avec une photo de votre ticket.",
|
||||
icon: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z",
|
||||
},
|
||||
{
|
||||
category: "Compte",
|
||||
question: "Puis-je créer un compte avec mes réseaux sociaux ?",
|
||||
answer: "Oui, vous pouvez créer un compte et vous connecter rapidement en utilisant votre compte Google ou Facebook. Cela permet une inscription plus rapide et sécurisée.",
|
||||
icon: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z",
|
||||
},
|
||||
{
|
||||
category: "Délais",
|
||||
question: "Jusqu'à quand puis-je saisir mon code ?",
|
||||
answer: "Vous pouvez saisir votre code pendant toute la durée du jeu-concours, soit du 1er janvier 2025 au 31 janvier 2025 à 23h59. Après cette date, les codes ne seront plus acceptés.",
|
||||
icon: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z",
|
||||
},
|
||||
{
|
||||
category: "Retrait",
|
||||
question: "Comment récupérer mon lot ?",
|
||||
answer: "Pour les petits lots (infuseurs, boîtes de thé), vous pouvez les récupérer directement en magasin en présentant votre confirmation de gain. Pour les coffrets, vous avez le choix entre le retrait en boutique ou la livraison à domicile offerte. Pour le grand prix, une livraison mensuelle sera organisée à l'adresse de votre choix.",
|
||||
icon: "M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4",
|
||||
},
|
||||
{
|
||||
category: "Retrait",
|
||||
question: "Dans quelles boutiques puis-je récupérer mon lot ?",
|
||||
answer: "Vous pouvez récupérer votre lot dans n'importe quelle boutique Thé Tip Top en France métropolitaine. Présentez simplement votre confirmation de gain (email ou capture d'écran) et une pièce d'identité.",
|
||||
icon: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z M15 11a3 3 0 11-6 0 3 3 0 016 0z",
|
||||
},
|
||||
{
|
||||
category: "Tirage final",
|
||||
question: "Comment fonctionne le tirage final pour le grand prix ?",
|
||||
answer: "À l'issue de la période de participation, un tirage au sort sera organisé le 15 février 2025 sous contrôle d'huissier de justice (Maître Dupont, Office Notarial de Paris) pour désigner le grand gagnant du prix principal : 1 an de thé offert d'une valeur de 360€. Tous les participants ayant validé au moins un code sont automatiquement inscrits au tirage.",
|
||||
icon: "M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z",
|
||||
},
|
||||
{
|
||||
category: "Données",
|
||||
question: "Mes données personnelles sont-elles protégées ?",
|
||||
answer: "Absolument. Nous prenons la protection de vos données très au sérieux conformément au RGPD. Toutes les informations sont cryptées et stockées de manière sécurisée. Vous disposez d'un droit d'accès, de rectification et d'effacement de vos données. Consultez notre Politique de Confidentialité pour plus de détails.",
|
||||
icon: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z",
|
||||
},
|
||||
{
|
||||
category: "Technique",
|
||||
question: "Le site ne fonctionne pas, que faire ?",
|
||||
answer: "Essayez de vider le cache de votre navigateur et de rafraîchir la page (Ctrl+F5 ou Cmd+Shift+R). Assurez-vous d'utiliser un navigateur récent (Chrome, Firefox, Safari, Edge). Vérifiez que JavaScript et les cookies sont activés. Si le problème persiste, contactez notre support technique à support@thetiptop.com.",
|
||||
icon: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z",
|
||||
},
|
||||
];
|
||||
|
||||
const categories = [
|
||||
{ name: "Participation", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
|
||||
{ name: "Codes", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
|
||||
{ name: "Compte", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
|
||||
{ name: "Délais", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
|
||||
{ name: "Retrait", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
|
||||
{ name: "Tirage final", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
|
||||
{ name: "Données", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
|
||||
{ name: "Technique", color: "bg-gradient-to-r from-[#d4a574]/20 to-[#c4956a]/20 text-[#c4956a]" },
|
||||
{ name: "Participation", icon: "M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" },
|
||||
{ name: "Codes", icon: "M7 20l4-16m2 16l4-16M6 9h14M4 15h14" },
|
||||
{ name: "Compte", icon: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" },
|
||||
{ name: "Délais", icon: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" },
|
||||
{ name: "Retrait", icon: "M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" },
|
||||
{ name: "Tirage final", icon: "M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" },
|
||||
{ name: "Données", icon: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" },
|
||||
{ name: "Technique", icon: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" },
|
||||
];
|
||||
|
||||
export default function FAQContent() {
|
||||
|
|
@ -90,32 +101,34 @@ export default function FAQContent() {
|
|||
return matchesSearch && matchesCategory;
|
||||
});
|
||||
|
||||
const getCategoryColor = (category: string) => {
|
||||
const cat = categories.find(c => c.name === category);
|
||||
return cat?.color || "bg-gray-100 text-gray-700";
|
||||
const getCategoryIcon = (categoryName: string) => {
|
||||
const cat = categories.find(c => c.name === categoryName);
|
||||
return cat?.icon || "";
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]">
|
||||
<div className="min-h-screen bg-[#f8f7f4]">
|
||||
{/* 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-primary-600 mb-4">
|
||||
<section className="relative bg-gradient-to-br from-[#2d4a3e] to-[#1a2e25] py-16 md:py-24 overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div className="absolute top-10 left-10 w-32 h-32 border border-white/20 rounded-full"></div>
|
||||
<div className="absolute bottom-10 right-10 w-48 h-48 border border-white/20 rounded-full"></div>
|
||||
<div className="absolute top-1/2 left-1/4 w-24 h-24 border border-white/20 rounded-full"></div>
|
||||
</div>
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<div className="max-w-3xl mx-auto text-center">
|
||||
<span className="inline-block px-4 py-1 bg-[#d4a574]/20 text-[#d4a574] rounded-full text-sm font-medium mb-4">
|
||||
Centre d'aide
|
||||
</span>
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">
|
||||
Questions fréquentes
|
||||
</h1>
|
||||
<p className="text-lg text-[#8a8a7a]">
|
||||
<p className="text-lg md:text-xl text-white/70 mb-8">
|
||||
Trouvez rapidement les réponses à vos questions sur notre jeu-concours Thé Tip Top.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Search Bar */}
|
||||
<section className="py-8">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="relative">
|
||||
{/* Search Bar */}
|
||||
<div className="relative max-w-xl mx-auto">
|
||||
<label htmlFor="faq-search" className="sr-only">Rechercher une question</label>
|
||||
<input
|
||||
id="faq-search"
|
||||
|
|
@ -123,10 +136,10 @@ export default function FAQContent() {
|
|||
placeholder="Rechercher une question..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full px-4 py-3 pl-12 border-2 border-[#e5e4dc] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-[#d4a574] bg-white shadow-sm"
|
||||
className="w-full px-6 py-4 pl-14 bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-[#d4a574] focus:border-transparent transition-all"
|
||||
/>
|
||||
<svg
|
||||
className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-[#8a8a7a]"
|
||||
className="absolute left-5 top-1/2 transform -translate-y-1/2 w-5 h-5 text-white/50"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
@ -145,22 +158,38 @@ export default function FAQContent() {
|
|||
</section>
|
||||
|
||||
{/* Category Filters */}
|
||||
<section className="pb-8">
|
||||
<section className="py-8 bg-white border-b border-gray-100 sticky top-0 z-20 shadow-sm">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<div className="flex flex-wrap justify-center gap-2 md:gap-3">
|
||||
<button
|
||||
onClick={() => setSelectedCategory(null)}
|
||||
className={`px-4 py-2 rounded-xl text-sm font-medium transition-all flex items-center gap-2 ${
|
||||
selectedCategory === null
|
||||
? 'bg-[#2d4a3e] text-white shadow-lg'
|
||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" />
|
||||
</svg>
|
||||
Tout
|
||||
</button>
|
||||
{categories.map((category) => (
|
||||
<button
|
||||
key={category.name}
|
||||
onClick={() => setSelectedCategory(
|
||||
selectedCategory === category.name ? null : category.name
|
||||
)}
|
||||
className={`px-4 py-2 rounded-full text-sm font-semibold transition-all ${
|
||||
className={`px-4 py-2 rounded-xl text-sm font-medium transition-all flex items-center gap-2 ${
|
||||
selectedCategory === category.name
|
||||
? 'bg-gradient-to-r from-[#d4a574] to-[#c4956a] text-white shadow-lg ring-2 ring-offset-2 ring-[#d4a574]'
|
||||
: category.color + ' hover:shadow-md border border-[#d4a574]/30'
|
||||
? 'bg-[#2d4a3e] text-white shadow-lg'
|
||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={category.icon} />
|
||||
</svg>
|
||||
{category.name}
|
||||
</button>
|
||||
))}
|
||||
|
|
@ -170,44 +199,62 @@ export default function FAQContent() {
|
|||
</section>
|
||||
|
||||
{/* FAQ Questions */}
|
||||
<section className="pb-16">
|
||||
<section className="py-12 md:py-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto space-y-3">
|
||||
<div className="max-w-3xl mx-auto space-y-4">
|
||||
{filteredFAQs.length === 0 ? (
|
||||
<div className="bg-white rounded-xl shadow-md p-8 text-center text-[#8a8a7a] border border-[#e5e4dc]">
|
||||
Aucune question ne correspond à votre recherche.
|
||||
<div className="bg-white rounded-2xl shadow-sm p-12 text-center">
|
||||
<div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">Aucun résultat</h3>
|
||||
<p className="text-gray-500">Aucune question ne correspond à votre recherche.</p>
|
||||
</div>
|
||||
) : (
|
||||
filteredFAQs.map((faq, index) => (
|
||||
<div key={index} className="bg-white rounded-xl shadow-md overflow-hidden border border-[#e5e4dc]">
|
||||
<div
|
||||
key={index}
|
||||
className={`bg-white rounded-2xl shadow-sm overflow-hidden transition-all duration-300 ${
|
||||
openQuestion === index ? 'ring-2 ring-[#2d4a3e] shadow-md' : 'hover:shadow-md'
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
onClick={() => toggleQuestion(index)}
|
||||
className="w-full flex items-start justify-between p-6 text-left hover:bg-gradient-to-r hover:from-[#d4a574]/5 hover:to-[#c4956a]/5 transition-colors"
|
||||
className="w-full flex items-center gap-4 p-6 text-left transition-colors"
|
||||
aria-expanded={openQuestion === index}
|
||||
>
|
||||
<div className="flex-1 pr-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className={`text-xs font-bold px-2 py-1 rounded ${getCategoryColor(faq.category)}`}>
|
||||
{faq.category}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-[#5a5a4e]">{faq.question}</h3>
|
||||
<div className={`w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0 transition-colors ${
|
||||
openQuestion === index ? 'bg-[#2d4a3e] text-white' : 'bg-[#2d4a3e]/10 text-[#2d4a3e]'
|
||||
}`}>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={getCategoryIcon(faq.category)} />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<span className="text-xs font-semibold text-[#d4a574] uppercase tracking-wide">
|
||||
{faq.category}
|
||||
</span>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mt-1">{faq.question}</h3>
|
||||
</div>
|
||||
<div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 transition-all ${
|
||||
openQuestion === index ? 'bg-[#2d4a3e] text-white rotate-180' : 'bg-gray-100 text-gray-400'
|
||||
}`}>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
<svg
|
||||
className={`w-6 h-6 text-[#8a8a7a] flex-shrink-0 transition-transform ${
|
||||
openQuestion === index ? 'rotate-180' : ''
|
||||
}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
{openQuestion === index && (
|
||||
<div className="px-6 pb-6 text-[#5a5a4e] leading-relaxed">
|
||||
{faq.answer}
|
||||
<div className={`overflow-hidden transition-all duration-300 ${
|
||||
openQuestion === index ? 'max-h-96' : 'max-h-0'
|
||||
}`}>
|
||||
<div className="px-6 pb-6 pl-[88px]">
|
||||
<p className="text-gray-600 leading-relaxed">
|
||||
{faq.answer}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
|
|
@ -216,29 +263,45 @@ export default function FAQContent() {
|
|||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="pb-16">
|
||||
<section className="py-16 md:py-20">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="bg-gradient-to-r from-[#d4a574] to-[#c4956a] rounded-2xl shadow-2xl p-12 text-center text-white border-2 border-[#e5e4dc]">
|
||||
<h2 className="text-2xl md:text-3xl font-bold mb-4">
|
||||
Vous ne trouvez pas votre réponse ?
|
||||
</h2>
|
||||
<p className="text-white/90 mb-6 max-w-2xl mx-auto">
|
||||
Notre équipe est là pour vous aider ! Contactez-nous et nous vous répondrons dans les plus brefs délais.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a
|
||||
href="mailto:support@thetiptop.com"
|
||||
className="inline-flex items-center justify-center gap-2 bg-white text-gray-900 hover:bg-[#f5f5f0] font-bold px-8 py-3 rounded-lg transition-all shadow-lg hover:scale-105 duration-300"
|
||||
>
|
||||
<span aria-hidden="true">✉️</span> support@thetiptop.com
|
||||
</a>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="inline-flex items-center justify-center bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white font-bold px-8 py-3 rounded-lg transition-all border-2 border-white/30 hover:border-white/50"
|
||||
>
|
||||
Formulaire de contact
|
||||
</Link>
|
||||
<div className="relative bg-gradient-to-br from-[#2d4a3e] to-[#1a2e25] rounded-3xl p-8 md:p-12 overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-[#d4a574]/10 rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-0 left-0 w-48 h-48 bg-[#d4a574]/10 rounded-full blur-3xl"></div>
|
||||
|
||||
<div className="relative z-10 text-center">
|
||||
<div className="w-16 h-16 bg-[#d4a574]/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||||
<svg className="w-8 h-8 text-[#d4a574]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-white mb-4">
|
||||
Vous ne trouvez pas votre réponse ?
|
||||
</h2>
|
||||
<p className="text-white/70 mb-8 max-w-xl mx-auto">
|
||||
Notre équipe est là pour vous aider ! Contactez-nous et nous vous répondrons dans les plus brefs délais.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a
|
||||
href="mailto:support@thetiptop.com"
|
||||
className="inline-flex items-center justify-center gap-3 bg-white text-[#2d4a3e] hover:bg-gray-100 font-semibold px-8 py-4 rounded-xl transition-all shadow-lg hover:shadow-xl"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
support@thetiptop.com
|
||||
</a>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="inline-flex items-center justify-center gap-3 bg-white/10 hover:bg-white/20 backdrop-blur-sm text-white font-semibold px-8 py-4 rounded-xl transition-all border border-white/20 hover:border-white/40"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
||||
</svg>
|
||||
Formulaire de contact
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user