Add src/app/contact/page.tsx
This commit is contained in:
262
src/app/contact/page.tsx
Normal file
262
src/app/contact/page.tsx
Normal file
@@ -0,0 +1,262 @@
|
||||
"use client"
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import { MapPin, Phone, Clock } from 'lucide-react';
|
||||
|
||||
export default function ContactPage() {
|
||||
const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
// Form submission logic would go here
|
||||
console.log('Form submitted');
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="aurora"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="Chez Ennio"
|
||||
navItems={[
|
||||
{ name: "Accueil", id: "hero" },
|
||||
{ name: "À propos", id: "/about" },
|
||||
{ name: "Plats", id: "dishes" },
|
||||
{ name: "Avis", id: "reviews" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Contactez-Nous"
|
||||
description="Vous avez des questions ? Vous souhaitez réserver une table ou passer une commande ? Notre équipe est à votre écoute et prête à vous accueillir chez Ennio."
|
||||
tag="Nous Sommes Là Pour Vous"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/middle-age-friends-night-having-dinner_23-2149190934.jpg?_wi=1"
|
||||
imageAlt="Restaurant Chez Ennio contact"
|
||||
showDimOverlay={true}
|
||||
showBlur={true}
|
||||
buttons={[
|
||||
{ text: "Nous Appeler", href: "tel:+33130552607" },
|
||||
{ text: "Voir sur Google Maps", href: "https://maps.google.com/?q=40+Rue+Maurice+Jouet+78340+Les+Clayes-sous-Bois" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<FeatureCardMedia
|
||||
title="Informations de Contact"
|
||||
description="Tous les détails pour nous trouver et nous joindre facilement."
|
||||
tag="Localisation & Coordonnées"
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "Notre Adresse", description: "40 Rue Maurice Jouet\n78340 Les Clayes-sous-Bois, France\n\nSitué au cœur de Les Clayes-sous-Bois, notre restaurant est facilement accessible en voiture et dispose de places de parking à proximité.", tag: "Localisation", imageSrc: "http://img.b2bpic.net/free-photo/happy-man-talking-his-girlfriend-lunch-time-restaurant_637285-1937.jpg"
|
||||
},
|
||||
{
|
||||
id: "2", title: "Numéro de Téléphone", description: "Téléphone : 01 30 55 26 07\n\nN'hésitez pas à nous appeler pour effectuer une réservation, demander des informations sur nos menus ou pour toute question concernant nos services.", tag: "Contact Direct", imageSrc: "http://img.b2bpic.net/free-photo/middle-age-friends-night-having-dinner_23-2149190934.jpg?_wi=2"
|
||||
},
|
||||
{
|
||||
id: "3", title: "Horaires d'Ouverture", description: "Lundi - Dimanche\nDéjeuner : 12:00 - 14:30\nDîner : 19:00 - 23:00\n\nFermé exceptionnellement certains jours fériés. Nous vous conseillons de nous appeler pour confirmer avant votre visite.", tag: "Horaires", imageSrc: "http://img.b2bpic.net/free-photo/cheese-plate-with-bread-sticks-crackers_140725-3052.jpg?_wi=2"
|
||||
}
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="dishes" data-section="dishes">
|
||||
<FeatureCardMedia
|
||||
title="Nos Services"
|
||||
description="Plusieurs options pour profiter de nos délicieuses spécialités italiennes."
|
||||
tag="Modes de Service"
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "Dîner Sur Place", description: "Venez déguster vos plats préférés dans notre ambiance chaleureuse. Notre équipe vous accueille et vous conseille pour une expérience gastronomique inoubliable. Réservation recommandée.", tag: "Restaurant", imageSrc: "http://img.b2bpic.net/free-photo/middle-age-friends-night-having-dinner_23-2149190934.jpg?_wi=1"
|
||||
},
|
||||
{
|
||||
id: "2", title: "Commande à Emporter", description: "Profitez de la qualité de nos plats chez vous. Passez votre commande par téléphone (01 30 55 26 07), sélectionnez votre heure de retrait, et emportez vos plats chauds et frais.", tag: "À Emporter", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-pizza-with-cheese-cutlery_23-2148765336.jpg"
|
||||
},
|
||||
{
|
||||
id: "3", title: "Événements Privés", description: "Vous souhaitez célébrer un événement chez Ennio ? Notre équipe peut organiser des repas privés pour anniversaires, réunions professionnelles ou événements spéciaux. Contactez-nous pour discuter de vos besoins.", tag: "Événements", imageSrc: "http://img.b2bpic.net/free-photo/cheese-plate-with-bread-sticks-crackers_140725-3052.jpg?_wi=1"
|
||||
}
|
||||
]}
|
||||
animationType="opacity"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="form" data-section="form">
|
||||
<div className="w-full py-20 px-10 flex justify-center">
|
||||
<div className="w-content-width max-w-2xl">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-4">Formulaire de Contact</h2>
|
||||
<p className="text-lg text-foreground/70">Remplissez le formulaire ci-dessous et nous vous répondrons dans les plus brefs délais.</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleFormSubmit} className="space-y-6 bg-card rounded-2xl p-8 border border-background-accent/20">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium mb-2">Nom Complet *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
required
|
||||
placeholder="Votre nom"
|
||||
className="w-full px-4 py-3 rounded-lg border border-background-accent/30 bg-background focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium mb-2">Email *</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
required
|
||||
placeholder="votre.email@exemple.com"
|
||||
className="w-full px-4 py-3 rounded-lg border border-background-accent/30 bg-background focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-medium mb-2">Numéro de Téléphone</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
placeholder="01 30 55 26 07"
|
||||
className="w-full px-4 py-3 rounded-lg border border-background-accent/30 bg-background focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="subject" className="block text-sm font-medium mb-2">Sujet *</label>
|
||||
<select
|
||||
id="subject"
|
||||
name="subject"
|
||||
required
|
||||
className="w-full px-4 py-3 rounded-lg border border-background-accent/30 bg-background focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||||
>
|
||||
<option value="">Sélectionnez un sujet</option>
|
||||
<option value="reservation">Réservation</option>
|
||||
<option value="commande">Commande à emporter</option>
|
||||
<option value="evenement">Événement privé</option>
|
||||
<option value="feedback">Retour / Feedback</option>
|
||||
<option value="autre">Autre</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-sm font-medium mb-2">Message *</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
required
|
||||
placeholder="Votre message..."
|
||||
rows={5}
|
||||
className="w-full px-4 py-3 rounded-lg border border-background-accent/30 bg-background focus:outline-none focus:ring-2 focus:ring-primary-cta resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-primary-cta hover:bg-primary-cta/90 text-white font-semibold py-3 rounded-lg transition duration-200"
|
||||
>
|
||||
Envoyer le Message
|
||||
</button>
|
||||
|
||||
<p className="text-sm text-foreground/60 text-center">* Champs obligatoires</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="map" data-section="map">
|
||||
<div className="w-full py-12 px-10 flex justify-center">
|
||||
<div className="w-content-width w-full">
|
||||
<div className="rounded-2xl overflow-hidden shadow-lg h-96 md:h-96">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2606.6484573841737!2d1.915847!3d48.765823!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e65f2b8f8f8f8f%3A0x8f8f8f8f8f8f8f8f!2s40%20Rue%20Maurice%20Jouet%2C%2078340%20Les%20Clayes-sous-Bois!5e0!3m2!1sfr!2sfr!4v"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen={true}
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
title="Localisation Chez Ennio"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Questions ?"
|
||||
title="Nous Serions Ravis de Vous Accueillir"
|
||||
description="N'attendez plus pour réserver votre table ou passer votre première commande. Découvrez pourquoi Chez Ennio est la destination culinaire préférée de Les Clayes-sous-Bois."
|
||||
buttons={[
|
||||
{ text: "Téléphoner", href: "tel:+33130552607" },
|
||||
{ text: "Retour à l'Accueil", href: "/" }
|
||||
]}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Chez Ennio"
|
||||
columns={[
|
||||
{
|
||||
title: "Restaurant", items: [
|
||||
{ label: "Accueil", href: "/" },
|
||||
{ label: "À propos", href: "/about" },
|
||||
{ label: "Plats", href: "/#dishes" },
|
||||
{ label: "Services", href: "/#services" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Nous Contacter", items: [
|
||||
{ label: "40 Rue Maurice Jouet, 78340 Les Clayes-sous-Bois", href: "https://maps.google.com/?q=40+Rue+Maurice+Jouet+78340+Les+Clayes-sous-Bois" },
|
||||
{ label: "Téléphone : 01 30 55 26 07", href: "tel:+33130552607" },
|
||||
{ label: "Horaires : 12:00-14:30 & 19:00-23:00", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Suivez-Nous", items: [
|
||||
{ label: "Facebook", href: "https://facebook.com" },
|
||||
{ label: "Instagram", href: "https://instagram.com" },
|
||||
{ label: "Google Avis", href: "https://google.com/maps" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "Réserver une Table", href: "/contact" },
|
||||
{ label: "Commander à Emporter", href: "/contact" },
|
||||
{ label: "Voir le Menu", href: "/#dishes" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2025 Chez Ennio | Cuisine Italienne Authentique | Tous droits réservés"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user