Update src/app/contact/page.tsx

This commit is contained in:
2026-03-09 14:22:09 +00:00
parent eb90c94bcf
commit da05727e25

View File

@@ -1,49 +1,43 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from "next/link";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Mail, Package, Quote } from "lucide-react";
import { MapPin, Phone, Clock, DollarSign } from "lucide-react";
export default function ContactPage() {
const navItems = [
{ name: "Accueil", id: "home" },
{ name: "Le Restaurant", id: "about" },
{ name: "Menu", id: "menu" },
{ name: "Galerie", id: "gallery" },
{ name: "Contact", id: "contact" },
{ name: "Accueil", id: "/" },
{ name: "Le Restaurant", id: "/le-restaurant" },
{ name: "Réservation", id: "/reservation" },
{ name: "Contact", id: "/contact" },
{ name: "Menu", id: "/#menu" },
{ name: "Galerie", id: "/#gallery" }
];
const footerColumns = [
{
title: "Navigation",
items: [
title: "Navigation", items: [
{ label: "Accueil", href: "/" },
{ label: "À Propos", href: "/" },
{ label: "Menu", href: "/" },
{ label: "Galerie", href: "/" },
],
{ label: "À Propos", href: "/le-restaurant" },
{ label: "Réservation", href: "/reservation" },
{ label: "Contact", href: "/contact" }
]
},
{
title: "Contact",
items: [
title: "Contact", items: [
{ label: "23 Rue de l'Eminee, 63000 Clermont-Ferrand", href: "#" },
{ label: "04 73 44 22 22", href: "tel:+33473442222" },
{ label: "Réserver une Table", href: "/contact" },
],
{ label: "Réserver une Table", href: "/reservation" }
]
},
{
title: "Horaires",
items: [
title: "Horaires", items: [
{ label: "Mardi-Dimanche : 12h00-14h30", href: "#" },
{ label: "19h00-22h30", href: "#" },
{ label: "Fermé le lundi", href: "#" },
],
},
{ label: "Fermé le lundi", href: "#" }
]
}
];
return (
@@ -53,7 +47,7 @@ export default function ContactPage() {
borderRadius="soft"
contentWidth="compact"
sizing="largeSmallSizeMediumTitles"
background="aurora"
background="circleGradient"
cardStyle="glass-depth"
primaryButtonStyle="gradient"
secondaryButtonStyle="layered"
@@ -63,142 +57,104 @@ export default function ContactPage() {
<NavbarStyleCentered
navItems={navItems}
button={{
text: "Réserver une table",
href: "/contact",
text: "Réserver une table", onClick: () => window.location.href = "/reservation"
}}
brandName="Caffè Mazzo"
/>
</div>
<div id="location-hours" data-section="location-hours">
<MetricCardFourteen
title="Caffè Mazzo : Au cœur de Clermont-Ferrand, votre adresse gastronomique incontournable"
tag="Infos Pratiques"
tagAnimation="slide-up"
metrics={[
{
id: "1",
value: "23 Rue de l'Eminee",
description:
"Clermont-Ferrand, 63000 - Localisation idéale entre tradition et modernité",
},
{
id: "2",
value: "04 73 44 22 22",
description:
"Joignez-nous pour réserver votre table ou poser vos questions",
},
{
id: "3",
value: "30-40 €",
description:
"Prix moyen par personne pour une expérience gastronomique authentique",
},
{
id: "4",
value: "Fermé le lundi",
description: "Mardi-dimanche : 12h00-14h30 et 19h00-22h30",
},
]}
metricsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div className="min-h-screen py-20 px-4">
<div className="max-w-4xl mx-auto">
<div className="text-center mb-16">
<h1 className="text-4xl md:text-5xl font-bold mb-4">Nous Contacter</h1>
<p className="text-lg text-foreground/80">Trouvez Caffè Mazzo et venez nous rencontrer</p>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
title="Avis de Nos Clients"
description="Découvrez ce que nos visiteurs pensent de Caffè Mazzo"
tag="Témoignages"
testimonials={[
{
id: "1",
name: "Marie Rousseau",
role: "Chef d'entreprise",
testimonial:
"Une soirée magique en amoureux. Les plats sont savoureux, l'ambiance chaleureuse et le service impeccable. Je reviens dès que possible !",
imageSrc:
"http://img.b2bpic.net/free-photo/cheerful-good-looking-young-tanned-woman-lean-terrace-gazing-happily_197531-22852.jpg?_wi=3",
imageAlt: "Marie Rousseau",
},
{
id: "2",
name: "Thomas Bernard",
role: "Food Blogger",
testimonial:
"Le risotto de foie gras est absolument divin. Authentic Italian cuisine with a French touch. Un incontournable de Clermont-Ferrand !",
imageSrc:
"http://img.b2bpic.net/free-photo/emotional-young-male-with-blue-shirt-standing-gate-with-slight-smile-his-face_181624-33508.jpg?_wi=3",
imageAlt: "Thomas Bernard",
},
{
id: "3",
name: "Sophie Dupont",
role: "Architecte",
testimonial:
"Parfait pour un repas en famille. Les enfants ont adoré les pâtes, les adultes ont apprécié la finesse des saveurs. Restaurant à recommander !",
imageSrc:
"http://img.b2bpic.net/free-photo/young-lady-propping-chin-hand_176474-94561.jpg?_wi=3",
imageAlt: "Sophie Dupont",
},
{
id: "4",
name: "Luc Moreau",
role: "Consultant",
testimonial:
"L'atmosphère est élégante sans être prétentieuse. La qualité des ingrédients se sent dans chaque assiette. Bravo à l'équipe !",
imageSrc:
"http://img.b2bpic.net/free-photo/portrait-cheerful-guy-classic-black-shirt-with-arms-crossed_146671-13946.jpg?_wi=3",
imageAlt: "Luc Moreau",
},
{
id: "5",
name: "Isabelle Lacroix",
role: "Éducatrice",
testimonial:
"Nous avons célébré notre anniversaire ici. Marco et Sofia ont rendu cette soirée inoubliable avec leur accueil chaleureux.",
imageSrc:
"http://img.b2bpic.net/free-photo/portrait-woman_1098-12705.jpg?_wi=3",
imageAlt: "Isabelle Lacroix",
},
{
id: "6",
name: "Julien Petit",
role: "Musicien",
testimonial:
"Un havre de paix gastronomique. Chaque détail est pensé avec soin, du design de la table à la présentation des plats.",
imageSrc:
"http://img.b2bpic.net/free-photo/handsome-young-male-walking-street_158595-4695.jpg?_wi=3",
imageAlt: "Julien Petit",
},
]}
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
{/* Address */}
<div className="bg-card rounded-lg p-8 shadow-lg">
<div className="flex items-start gap-4 mb-6">
<MapPin className="w-8 h-8 text-primary-cta flex-shrink-0 mt-1" />
<div>
<h2 className="text-2xl font-semibold mb-2">Adresse</h2>
<p className="text-foreground/80 font-medium">23 Rue de l'Eminee</p>
<p className="text-foreground/80">63000 Clermont-Ferrand, France</p>
</div>
</div>
</div>
<div id="reservation-cta" data-section="reservation-cta">
<ContactCTA
tag="Prêt à Déguster ?"
tagIcon={Mail}
title="Réservez Votre Table Dès Maintenant"
description="Vivez une expérience gastronomique inoubliable au cœur de Clermont-Ferrand. Notre équipe vous accueille chaleureusement du mardi au dimanche."
buttons={[
{
text: "Réserver une Table",
href: "/contact",
},
{
text: "Voir le Menu Complet",
href: "/",
},
]}
background={{
variant: "plain",
}}
useInvertedBackground={false}
/>
{/* Phone */}
<div className="bg-card rounded-lg p-8 shadow-lg">
<div className="flex items-start gap-4 mb-6">
<Phone className="w-8 h-8 text-primary-cta flex-shrink-0 mt-1" />
<div>
<h2 className="text-2xl font-semibold mb-2">Téléphone</h2>
<a href="tel:+33473442222" className="text-foreground/80 hover:text-primary-cta transition-colors font-medium">
04 73 44 22 22
</a>
<p className="text-sm text-foreground/60 mt-1">Appelez-nous pour réserver ou pour toute question</p>
</div>
</div>
</div>
{/* Opening Hours */}
<div className="bg-card rounded-lg p-8 shadow-lg">
<div className="flex items-start gap-4 mb-6">
<Clock className="w-8 h-8 text-primary-cta flex-shrink-0 mt-1" />
<div>
<h2 className="text-2xl font-semibold mb-2">Horaires</h2>
<div className="text-foreground/80 space-y-1">
<p><span className="font-medium">Mardi - Dimanche :</span></p>
<p>Midi : 12h00 - 14h30</p>
<p>Soir : 19h00 - 22h30</p>
<p className="text-red-500 font-medium mt-2">Fermé le lundi</p>
</div>
</div>
</div>
</div>
{/* Average Price */}
<div className="bg-card rounded-lg p-8 shadow-lg">
<div className="flex items-start gap-4 mb-6">
<DollarSign className="w-8 h-8 text-primary-cta flex-shrink-0 mt-1" />
<div>
<h2 className="text-2xl font-semibold mb-2">Budget Moyen</h2>
<p className="text-foreground/80 font-medium">30 - 40 € par personne</p>
<p className="text-sm text-foreground/60 mt-1">Repas complet avec boissons non incluses</p>
</div>
</div>
</div>
</div>
{/* Google Maps Integration */}
<div className="mb-12">
<h2 className="text-2xl font-semibold mb-6">Localisation</h2>
<div className="w-full h-96 rounded-lg overflow-hidden shadow-lg">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2815.1234567890123!2d3.087775!3d45.771959!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47f71a1b1b1b1b1b%3A0x1b1b1b1b1b1b1b1b!2s23%20Rue%20de%20l'Eminee%2C%2063000%20Clermont-Ferrand!5e0!3m2!1sfr!2sfr!4v1234567890"
width="100%"
height="100%"
style={{ border: 0 }}
allowFullScreen={true}
loading="lazy"
referrerPolicy="no-referrer-when-downgrade"
title="Localisation Caffè Mazzo"
/>
</div>
</div>
{/* CTA to Reservation */}
<div className="bg-gradient-to-r from-primary-cta to-primary-cta/80 rounded-lg p-8 text-center">
<h2 className="text-2xl font-semibold mb-4 text-background">Prêt à nous visiter ?</h2>
<p className="text-background/90 mb-6">Réservez votre table et vivez une expérience culinaire inoubliable</p>
<button
onClick={() => window.location.href = "/reservation"}
className="bg-background hover:bg-background/90 text-primary-cta font-semibold py-3 px-8 rounded-lg transition-colors duration-200"
>
Réserver une Table
</button>
</div>
</div>
</div>
<div id="footer" data-section="footer">
@@ -210,4 +166,4 @@ export default function ContactPage() {
</div>
</ThemeProvider>
);
}
}