Merge version_2 into main
Merge version_2 into main
This commit was merged in pull request #1.
This commit is contained in:
126
src/app/about/page.tsx
Normal file
126
src/app/about/page.tsx
Normal file
@@ -0,0 +1,126 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="large"
|
||||
background="circleGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Accueil", id: "/"},
|
||||
{
|
||||
name: "À Propos", id: "/about"},
|
||||
{
|
||||
name: "Services", id: "/#services"},
|
||||
{
|
||||
name: "Galerie", id: "/#gallery"},
|
||||
{
|
||||
name: "Témoignages", id: "/#testimonials"},
|
||||
{
|
||||
name: "FAQ", id: "/#faq"},
|
||||
{
|
||||
name: "Contact", id: "/#contact"},
|
||||
]}
|
||||
brandName="Salle Évasion"
|
||||
button={{
|
||||
text: "Demander un devis", href: "/#contact"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="story" data-section="story">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={true}
|
||||
title="Notre Histoire et Vision"
|
||||
description={[
|
||||
"Depuis notre création, la Salle Évasion s'est engagée à fournir un espace exceptionnel pour célébrer les moments les plus précieux de la vie. Nous croyons que chaque événement est unique et mérite une attention particulière.", "Notre mission est de créer des expériences mémorables en offrant un cadre élégant, des équipements modernes et un service personnalisé. Nous nous efforçons de dépasser les attentes de nos clients à chaque fois, en transformant leurs visions en réalité scintillante.", "Que ce soit pour un mariage grandiose, un anniversaire intime, un séminaire professionnel ou toute autre célébration, notre équipe dévouée est là pour vous accompagner. Nous nous occupons de tous les détails pour que vous puissiez vous concentrer sur ce qui compte vraiment : profiter de l'instant présent avec vos proches."
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="why-choose-us" data-section="why-choose-us">
|
||||
<FeatureCardNineteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Pourquoi Choisir la Salle Évasion ?"
|
||||
description="Découvrez les avantages qui font de notre salle le lieu idéal pour votre prochain événement."
|
||||
features={[
|
||||
{
|
||||
tag: "Espaces", title: "Espaces Flexibles", subtitle: "Capacité Adaptable", description: "Nos salles sont conçues pour être entièrement modulables, s'adaptant parfaitement à la taille et au style de votre événement, des petites réunions aux grandes réceptions.", imageSrc: "http://img.b2bpic.net/free-photo/room-interior-design_23-2148899436.jpg", imageAlt: "Salle modulable"},
|
||||
{
|
||||
tag: "Localisation", title: "Emplacement Idéal", subtitle: "Accès Facile", description: "Située au cœur de la ville avec un accès facile aux transports et un grand parking, la Salle Évasion est facilement accessible pour tous vos invités.", imageSrc: "http://img.b2bpic.net/free-photo/city-from-viewpoint_1127-1605.jpg", imageAlt: "Ville et commodité"},
|
||||
{
|
||||
tag: "Service", title: "Service Client Dévoué", subtitle: "Accompagnement Personnalisé", description: "Notre équipe expérimentée et amicale est à votre disposition pour vous accompagner à chaque étape, garantissant une organisation sans stress et un événement réussi.", imageSrc: "http://img.b2bpic.net/free-photo/service-hands-handshake-connection-business-concept_53876-26792.jpg", imageAlt: "Client service"},
|
||||
{
|
||||
tag: "Ambiance", title: "Ambiance Chaleureuse", subtitle: "Cadre Familial", description: "Profitez d'une atmosphère accueillante et conviviale, parfaite pour créer des souvenirs heureux avec votre famille et vos amis.", imageSrc: "http://img.b2bpic.net/free-photo/best-friends-getting-something-from-food-truck_23-2148914602.jpg", imageAlt: "Ambiance conviviale"},
|
||||
{
|
||||
tag: "Qualité/Prix", title: "Tarifs Compétitifs", subtitle: "Excellent Rapport Qualité-Prix", description: "Nous offrons des forfaits clairs et des prix compétitifs sans compromettre la qualité, pour que votre événement soit magnifique et respecte votre budget.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-euro-currency-banknotes_23-2149021486.jpg", imageAlt: "Tarifs compétitifs"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Découvrir", items: [
|
||||
{
|
||||
label: "Accueil", href: "/"},
|
||||
{
|
||||
label: "À Propos", href: "/about"},
|
||||
{
|
||||
label: "Services", href: "/#services"},
|
||||
{
|
||||
label: "Galerie", href: "/#gallery"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Assistance", items: [
|
||||
{
|
||||
label: "FAQ", href: "/#faq"},
|
||||
{
|
||||
label: "Contact", href: "/#contact"},
|
||||
{
|
||||
label: "Politique de Confidentialité", href: "#"},
|
||||
{
|
||||
label: "Conditions Générales", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Nous Suivre", items: [
|
||||
{
|
||||
label: "Facebook", href: "#"},
|
||||
{
|
||||
label: "Instagram", href: "#"},
|
||||
{
|
||||
label: "LinkedIn", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Salle Évasion"
|
||||
copyrightText="© 2024 Salle Évasion. Tous droits réservés."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
175
src/app/booking/page.tsx
Normal file
175
src/app/booking/page.tsx
Normal file
@@ -0,0 +1,175 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import React, { useState, FormEvent } from "react";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import { CheckCircle } from 'lucide-react'; // For success message icon
|
||||
|
||||
export default function BookingPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
name: "", phone: "", email: "", eventType: "", // Assuming single selection for simplicity, though propsSchema allows multiSelect
|
||||
desiredDate: "", numGuests: "", message: ""});
|
||||
const [formSubmitted, setFormSubmitted] = useState(false);
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
|
||||
const validateForm = () => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
if (!formData.name) newErrors.name = "Le nom est requis.";
|
||||
if (!formData.phone) newErrors.phone = "Le numéro de téléphone est requis.";
|
||||
if (!formData.email) newErrors.email = "L'adresse email est requise.";
|
||||
else if (!/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(formData.email)) newErrors.email = "Format d'email invalide.";
|
||||
if (!formData.eventType) newErrors.eventType = "Le type d'événement est requis.";
|
||||
if (!formData.desiredDate) newErrors.desiredDate = "La date souhaitée est requise.";
|
||||
if (!formData.numGuests) newErrors.numGuests = "Le nombre d'invités est requis.";
|
||||
else if (isNaN(Number(formData.numGuests)) || Number(formData.numGuests) <= 0) newErrors.numGuests = "Doit être un nombre valide.";
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleChange = (name: string, value: string) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
// Clear error for the field being edited
|
||||
setErrors((prev) => {
|
||||
const newErrors = { ...prev };
|
||||
delete newErrors[name];
|
||||
return newErrors;
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = (data: Record<string, string>) => {
|
||||
// Merge custom form data into event data for validation
|
||||
const fullData = { ...formData, ...data };
|
||||
setFormData(fullData as typeof formData); // Ensure formData is updated for validation
|
||||
|
||||
if (validateForm()) {
|
||||
console.log("Formulaire de devis soumis:", fullData);
|
||||
// Simulate API call
|
||||
setTimeout(() => {
|
||||
setFormSubmitted(true);
|
||||
// Optionally clear form data after submission
|
||||
// setFormData({ name: "", phone: "", email: "", eventType: "", desiredDate: "", numGuests: "", message: "" });
|
||||
}, 1000);
|
||||
}
|
||||
};
|
||||
|
||||
const navItems = [
|
||||
{ name: "Accueil", id: "/" },
|
||||
{ name: "À Propos", id: "/#about" },
|
||||
{ name: "Services", id: "/#services" },
|
||||
{ name: "Galerie", id: "/#gallery" },
|
||||
{ name: "Témoignages", id: "/#testimonials" },
|
||||
{ name: "FAQ", id: "/#faq" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
{ name: "Réserver", id: "/booking" }
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Découvrir", items: [
|
||||
{ label: "Accueil", href: "/" },
|
||||
{ label: "À Propos", href: "/#about" },
|
||||
{ label: "Services", href: "/#services" },
|
||||
{ label: "Galerie", href: "/#gallery" },
|
||||
{ label: "Réserver", href: "/booking" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Assistance", items: [
|
||||
{ label: "FAQ", href: "/#faq" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
{ label: "Politique de Confidentialité", href: "#" },
|
||||
{ label: "Conditions Générales", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Nous Suivre", items: [
|
||||
{ label: "Facebook", href: "#" },
|
||||
{ label: "Instagram", href: "#" },
|
||||
{ label: "LinkedIn", href: "#" }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="large"
|
||||
background="circleGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={navItems}
|
||||
brandName="Salle Évasion"
|
||||
button={{
|
||||
text: "Demander un devis", href: "/booking"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex min-h-screen flex-col items-center justify-between pt-32 pb-16">
|
||||
{formSubmitted ? (
|
||||
<div className="max-w-md mx-auto text-center p-8 bg-card rounded-lg shadow-lg">
|
||||
<CheckCircle className="h-16 w-16 text-primary-cta mx-auto mb-4" />
|
||||
<h2 className="text-2xl font-bold mb-2">Devis Envoyé avec Succès !</h2>
|
||||
<p className="text-foreground/80">Merci pour votre demande. Nous vous contacterons très prochainement pour discuter de votre événement.</p>
|
||||
<button
|
||||
onClick={() => setFormSubmitted(false)}
|
||||
className="mt-6 px-6 py-2 bg-primary-cta text-primary-cta-foreground rounded-md hover:bg-primary-cta/90 transition-colors"
|
||||
>
|
||||
Nouvelle demande
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<ContactSplitForm
|
||||
title="Demandez Votre Devis Personnalisé"
|
||||
description="Remplissez le formulaire ci-dessous pour nous faire part des détails de votre événement. Notre équipe vous recontactera rapidement avec une proposition sur mesure."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Votre nom complet", required: true, className: errors.name ? "border-red-500" : "" },
|
||||
{ name: "phone", type: "tel", placeholder: "Votre numéro de téléphone", required: true, className: errors.phone ? "border-red-500" : "" },
|
||||
{ name: "email", type: "email", placeholder: "Votre adresse email", required: true, className: errors.email ? "border-red-500" : "" },
|
||||
{ name: "desiredDate", type: "date", placeholder: "Date souhaitée de l'événement", required: true, className: errors.desiredDate ? "border-red-500" : "" },
|
||||
{ name: "numGuests", type: "number", placeholder: "Nombre d'invités", required: true, className: errors.numGuests ? "border-red-500" : "" }
|
||||
]}
|
||||
multiSelect={{
|
||||
name: "eventType", label: "Type d'événement", options: ["Mariage", "Anniversaire", "Séminaire", "Conférence", "Autre"]
|
||||
}}
|
||||
textarea={{
|
||||
name: "message", placeholder: "Votre message et détails spécifiques (thème, besoins spéciaux, etc.)", rows: 5,
|
||||
required: false
|
||||
}}
|
||||
buttonText="Recevoir mon devis"
|
||||
onSubmit={handleSubmit}
|
||||
useInvertedBackground={true}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/planner-woman-holding-wedding-checklist-documents_23-2148784110.jpg"
|
||||
imageAlt="Organisateur d'événements préparant un devis"
|
||||
mediaAnimation="slide-up"
|
||||
className="w-full max-w-6xl mx-auto"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={footerColumns}
|
||||
logoText="Salle Évasion"
|
||||
copyrightText="© 2024 Salle Évasion. Tous droits réservés."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
110
src/app/contact/page.tsx
Normal file
110
src/app/contact/page.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="large"
|
||||
background="circleGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Accueil", id: "/"},
|
||||
{
|
||||
name: "À Propos", id: "/#about"},
|
||||
{
|
||||
name: "Services", id: "/#services"},
|
||||
{
|
||||
name: "Galerie", id: "/#gallery"},
|
||||
{
|
||||
name: "Témoignages", id: "/#testimonials"},
|
||||
{
|
||||
name: "FAQ", id: "/#faq"},
|
||||
{
|
||||
name: "Contact", id: "/contact"},
|
||||
]}
|
||||
brandName="Salle Évasion"
|
||||
button={{
|
||||
text: "Demander un devis", href: "/contact"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-info" data-section="contact-info">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "radial-gradient"}}
|
||||
tag="Contactez-nous"
|
||||
title="Informations de Contact"
|
||||
description="Téléphone: +216 99 301 482\nLocalisation: Manouba, Tunisia"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/world-map-global-business-background_53876-135508.jpg"
|
||||
imageAlt="Localisation de la Salle Évasion sur la carte"
|
||||
mediaAnimation="slide-up"
|
||||
inputPlaceholder="Entrez votre email"
|
||||
buttonText="Envoyer votre message"
|
||||
termsText="En cliquant sur Envoyer, vous confirmez que vous acceptez nos Conditions Générales."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Découvrir", items: [
|
||||
{
|
||||
label: "Accueil", href: "/"},
|
||||
{
|
||||
label: "À Propos", href: "/#about"},
|
||||
{
|
||||
label: "Services", href: "/#services"},
|
||||
{
|
||||
label: "Galerie", href: "/#gallery"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Assistance", items: [
|
||||
{
|
||||
label: "FAQ", href: "/#faq"},
|
||||
{
|
||||
label: "Contact", href: "/contact"},
|
||||
{
|
||||
label: "Politique de Confidentialité", href: "#"},
|
||||
{
|
||||
label: "Conditions Générales", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Nous Suivre", items: [
|
||||
{
|
||||
label: "Facebook", href: "#"},
|
||||
{
|
||||
label: "Instagram", href: "#"},
|
||||
{
|
||||
label: "LinkedIn", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Salle Évasion"
|
||||
copyrightText="© 2024 Salle Évasion. Tous droits réservés."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
255
src/app/gallery/page.tsx
Normal file
255
src/app/gallery/page.tsx
Normal file
@@ -0,0 +1,255 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Image from "next/image";
|
||||
import clsx from "clsx";
|
||||
|
||||
import CardStack from '@/components/cardStack/CardStack';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
|
||||
import { X, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
|
||||
const galleryImagesData = [
|
||||
{ id: '1', src: "http://img.b2bpic.net/free-photo/bachelorette-flower-arrnagement_23-2149340496.jpg", alt: "Mariage élégant avec fleurs", category: "Mariages" },
|
||||
{ id: '2', src: "http://img.b2bpic.net/free-photo/navratri-highly-detailed-interior-decoration_23-2151193720.jpg", alt: "Décoration de fiançailles", category: "Fiançailles" },
|
||||
{ id: '3', src: "http://img.b2bpic.net/free-photo/group-young-people-celebrating-new-year-friends-drinks-champagne_1157-44311.jpg", alt: "Fête d'anniversaire joyeuse", category: "Anniversaires" },
|
||||
{ id: '4', src: "http://img.b2bpic.net/free-photo/best-friends-getting-something-from-food-truck_23-2148914602.jpg", alt: "Réception extérieure animée", category: "Réceptions" },
|
||||
{ id: '5', src: "http://img.b2bpic.net/free-photo/room-interior-design_23-2148899436.jpg", alt: "Intérieur moderne et spacieux", category: "Intérieur" },
|
||||
{ id: '6', src: "http://img.b2bpic.net/free-photo/young-adult-having-fun-white-party_23-2149575121.jpg", alt: "Réception en extérieur", category: "Extérieur" },
|
||||
{ id: '7', src: "http://img.b2bpic.net/free-photo/catering-restaurant-service_624325-930.jpg", alt: "Table de mariage", category: "Mariages" },
|
||||
{ id: '8', src: "http://img.b2bpic.net/free-photo/white-daisies-purple-hydrangeas-glass-transparent-tall-green-bottles-decorative-bouquets-vases_1304-3993.jpg", alt: "Fleurs de fiançailles", category: "Fiançailles" },
|
||||
{ id: '9', src: "http://img.b2bpic.net/free-photo/young-man-playing-acoustic-guitar-with-friends-party_1157-44247.jpg", alt: "Musique d'anniversaire", category: "Anniversaires" },
|
||||
{ id: '10', src: "http://img.b2bpic.net/free-photo/business-classroom-daytime-with-many-black-chairs-ready-students_146671-16246.jpg", alt: "Salle de conférence", category: "Réceptions" },
|
||||
{ id: '11', src: "http://img.b2bpic.net/free-photo/classic-style-interior-design_23-2148899440.jpg", alt: "Détail intérieur", category: "Intérieur" },
|
||||
{ id: '12', src: "http://img.b2bpic.net/free-photo/couple-walking-with-umbrella-rain_23-2149162002.jpg", alt: "Couple extérieur", category: "Extérieur" },
|
||||
{ id: '13', src: "http://img.b2bpic.net/free-photo/woman-having-date-with-her-boyfriend-valentine-s-day_23-2149162010.jpg", alt: "Mariage intime", category: "Mariages" },
|
||||
{ id: '14', src: "http://img.b2bpic.net/free-photo/happy-young-people-holding-sparklers-celebrating_1157-44238.jpg", alt: "Ambiance anniversaire", category: "Anniversaires" },
|
||||
{ id: '15', src: "http://img.b2bpic.net/free-photo/modern-style-interior-design_23-2148899433.jpg", alt: "Espace intérieur", category: "Intérieur" },
|
||||
{ id: '16', src: "http://img.b2bpic.net/free-photo/flower-vase-modern-interior_23-2151928932.jpg", alt: "Décoration florale", category: "Fiançailles" },
|
||||
{ id: '17', src: "http://img.b2bpic.net/free-photo/beautiful-wedding-composition-with-roses_23-2149340504.jpg", alt: "Composition florale de mariage", category: "Mariages" },
|
||||
{ id: '18', src: "http://img.b2bpic.net/free-photo/empty-table-restaurant_23-2149479383.jpg", alt: "Réception vide", category: "Réceptions" },
|
||||
{ id: '19', src: "http://img.b2bpic.net/free-photo/stylish-wedding-table-decoration-with-flowers-candies_23-2149340499.jpg", alt: "Table de mariage stylée", category: "Mariages" },
|
||||
{ id: '20', src: "http://img.b2bpic.net/free-photo/luxurious-room-with-large-round-glass-table-with-fresh-flowers_1145-66.jpg", alt: "Intérieur luxueux", category: "Intérieur" },
|
||||
{ id: '21', src: "http://img.b2bpic.net/free-photo/young-attractive-couple-outdoors_1157-44246.jpg", alt: "Couple en extérieur", category: "Extérieur" },
|
||||
{ id: '22', src: "http://img.b2bpic.net/free-photo/young-man-party_1157-44235.jpg", alt: "Fête entre amis", category: "Anniversaires" }
|
||||
];
|
||||
|
||||
const categories = ["Tous", "Mariages", "Fiançailles", "Anniversaires", "Réceptions", "Extérieur", "Intérieur"];
|
||||
|
||||
export default function GalleryPage() {
|
||||
const [activeCategory, setActiveCategory] = useState("Tous");
|
||||
const [filteredImages, setFilteredImages] = useState(galleryImagesData);
|
||||
const [lightboxOpen, setLightboxOpen] = useState(false);
|
||||
const [selectedImageIndex, setSelectedImageIndex] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (activeCategory === "Tous") {
|
||||
setFilteredImages(galleryImagesData);
|
||||
} else {
|
||||
setFilteredImages(galleryImagesData.filter((img) => img.category === activeCategory));
|
||||
}
|
||||
}, [activeCategory]);
|
||||
|
||||
const openLightbox = (index: number) => {
|
||||
setSelectedImageIndex(index);
|
||||
setLightboxOpen(true);
|
||||
};
|
||||
|
||||
const closeLightbox = () => {
|
||||
setLightboxOpen(false);
|
||||
};
|
||||
|
||||
const showNextImage = () => {
|
||||
setSelectedImageIndex((prevIndex) => (prevIndex + 1) % filteredImages.length);
|
||||
};
|
||||
|
||||
const showPrevImage = () => {
|
||||
setSelectedImageIndex((prevIndex) => (prevIndex - 1 + filteredImages.length) % filteredImages.length);
|
||||
};
|
||||
|
||||
const currentLightboxImage = filteredImages[selectedImageIndex];
|
||||
|
||||
// Shared navigation for Navbar and Footer to ensure consistency
|
||||
const navItems = [
|
||||
{ name: "Accueil", href: "/" },
|
||||
{ name: "À Propos", href: "/#about" },
|
||||
{ name: "Services", href: "/#services" },
|
||||
{ name: "Galerie", href: "/gallery" },
|
||||
{ name: "Témoignages", href: "/#testimonials" },
|
||||
{ name: "FAQ", href: "/#faq" },
|
||||
{ name: "Contact", href: "/#contact" }
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Découvrir", items: [
|
||||
{ label: "Accueil", href: "/" },
|
||||
{ label: "À Propos", href: "/#about" },
|
||||
{ label: "Services", href: "/#services" },
|
||||
{ label: "Galerie", href: "/gallery" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Assistance", items: [
|
||||
{ label: "FAQ", href: "/#faq" },
|
||||
{ label: "Contact", href: "/#contact" },
|
||||
{ label: "Politique de Confidentialité", href: "#" },
|
||||
{ label: "Conditions Générales", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Nous Suivre", items: [
|
||||
{ label: "Facebook", href: "#" },
|
||||
{ label: "Instagram", href: "#" },
|
||||
{ label: "LinkedIn", href: "#" }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="large"
|
||||
background="circleGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={navItems}
|
||||
brandName="Salle Évasion"
|
||||
button={{
|
||||
text: "Demander un devis", href: "/#contact"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto py-20 px-4">
|
||||
<h1 className="text-5xl font-extrabold text-center mb-10">Notre Galerie</h1>
|
||||
<p className="text-lg text-center max-w-2xl mx-auto mb-12 text-foreground-secondary">Explorez nos plus belles réalisations, classées par catégorie. Laissez-vous inspirer pour votre prochain événement à la Salle Évasion.</p>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-4 mb-12">
|
||||
{categories.map((category) => (
|
||||
<button
|
||||
key={category}
|
||||
onClick={() => setActiveCategory(category)}
|
||||
className={clsx(
|
||||
"px-6 py-2 rounded-full text-sm font-medium transition-all duration-300", activeCategory === category
|
||||
? "bg-primary-cta text-white shadow-lg"
|
||||
: "bg-card text-foreground-secondary hover:bg-card-hover hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
{category}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<CardStack
|
||||
title=""
|
||||
description=""
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
uniformGridCustomHeightClasses="min-h-72 lg:min-h-96"
|
||||
className="w-full"
|
||||
containerClassName="py-0 px-0"
|
||||
gridClassName="gap-4"
|
||||
>
|
||||
{filteredImages.map((image, index) => (
|
||||
<div
|
||||
key={image.id}
|
||||
onClick={() => openLightbox(index)}
|
||||
className="relative group cursor-pointer overflow-hidden rounded-lg shadow-lg aspect-square"
|
||||
>
|
||||
<Image
|
||||
src={image.src}
|
||||
alt={image.alt}
|
||||
fill
|
||||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
||||
className="object-cover transition-transform duration-500 group-hover:scale-105"
|
||||
priority={index < 6}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
|
||||
<span className="text-white text-sm font-semibold">{image.category}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</CardStack>
|
||||
</div>
|
||||
|
||||
{lightboxOpen && currentLightboxImage && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 backdrop-blur-md">
|
||||
<button
|
||||
onClick={closeLightbox}
|
||||
className="absolute top-4 right-4 p-2 rounded-full bg-white/20 text-white hover:bg-white/30 transition-colors"
|
||||
aria-label="Fermer la galerie"
|
||||
>
|
||||
<X size={24} />
|
||||
</button>
|
||||
<button
|
||||
onClick={showPrevImage}
|
||||
className="absolute left-4 p-3 rounded-full bg-white/20 text-white hover:bg-white/30 transition-colors hidden md:block"
|
||||
aria-label="Image précédente"
|
||||
>
|
||||
<ChevronLeft size={32} />
|
||||
</button>
|
||||
<div className="relative w-full h-full max-w-4xl max-h-4xl flex items-center justify-center">
|
||||
<Image
|
||||
src={currentLightboxImage.src}
|
||||
alt={currentLightboxImage.alt}
|
||||
width={1000}
|
||||
height={700}
|
||||
className="object-contain max-h-[90vh] max-w-[90vw] animate-in fade-in duration-300"
|
||||
/>
|
||||
<div className="absolute bottom-4 left-1/2 -translate-x-1/2 text-white text-center text-sm">
|
||||
<p className="font-semibold">{currentLightboxImage.alt}</p>
|
||||
<p className="opacity-80">{currentLightboxImage.category}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={showNextImage}
|
||||
className="absolute right-4 p-3 rounded-full bg-white/20 text-white hover:bg-white/30 transition-colors hidden md:block"
|
||||
aria-label="Image suivante"
|
||||
>
|
||||
<ChevronRight size={32} />
|
||||
</button>
|
||||
<div className="md:hidden absolute bottom-4 w-full flex justify-between px-4">
|
||||
<button
|
||||
onClick={showPrevImage}
|
||||
className="p-3 rounded-full bg-white/20 text-white hover:bg-white/30 transition-colors"
|
||||
aria-label="Image précédente"
|
||||
>
|
||||
<ChevronLeft size={24} />
|
||||
</button>
|
||||
<button
|
||||
onClick={showNextImage}
|
||||
className="p-3 rounded-full bg-white/20 text-white hover:bg-white/30 transition-colors"
|
||||
aria-label="Image suivante"
|
||||
>
|
||||
<ChevronRight size={24} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={footerColumns}
|
||||
logoText="Salle Évasion"
|
||||
copyrightText="© 2024 Salle Évasion. Tous droits réservés."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -10,27 +10,19 @@ import { getVisualEditScript } from "@/utils/visual-edit-script";
|
||||
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Salle des fêtes Évasion | Location de salle événementielle',
|
||||
description: 'Organisez vos mariages, anniversaires, séminaires et événements spéciaux à la Salle des fêtes Évasion. Un cadre élégant et des services sur mesure pour des moments inoubliables.',
|
||||
keywords: ["salle des fêtes, location salle, événementiel, mariage, anniversaire, séminaire, salle de réception, Evasion, organisation événement"],
|
||||
title: 'Salle des fêtes Manouba, Salle de mariage Manouba, Location salle événement Tunisie',
|
||||
description: 'Salle Évasion, votre destination de rêve pour mariages, événements, et réceptions à Manouba, Tunisie. Offrant un cadre élégant, des services personnalisés et des équipements modernes pour des célébrations inoubliables.',
|
||||
keywords: ["Salle des fêtes Manouba", "Salle de mariage Manouba", "Location salle événement Tunisie", "Salle réception Manouba", "Salle des fêtes Tunisie", "Mariage Manouba", "Événement Manouba", "Réception Tunisie", "Salles des fêtes"],
|
||||
openGraph: {
|
||||
"title": "Salle des fêtes Évasion | Location de salle événementielle",
|
||||
"description": "Organisez vos mariages, anniversaires, séminaires et événements spéciaux à la Salle des fêtes Évasion. Un cadre élégant et des services sur mesure pour des moments inoubliables.",
|
||||
"url": "https://www.salle-evasion.com",
|
||||
"siteName": "Salle Évasion",
|
||||
"images": [
|
||||
"title": "Salle des fêtes Manouba, Salle de mariage Manouba, Location salle événement Tunisie", "description": "Salle Évasion, votre destination de rêve pour mariages, événements, et réceptions à Manouba, Tunisie. Offrant un cadre élégant, des services personnalisés et des équipements modernes pour des célébrations inoubliables.", "url": "https://www.salle-evasion.com", "siteName": "Salle Évasion", "images": [
|
||||
{
|
||||
"url": "http://img.b2bpic.net/free-photo/bachelorette-flower-arrnagement_23-2149340496.jpg",
|
||||
"alt": "Vue élégante de la salle de réception"
|
||||
"url": "http://img.b2bpic.net/free-photo/bachelorette-flower-arrnagement_23-2149340496.jpg", "alt": "Vue élégante de la salle de réception"
|
||||
}
|
||||
],
|
||||
"type": "website"
|
||||
},
|
||||
twitter: {
|
||||
"card": "summary_large_image",
|
||||
"title": "Salle des fêtes Évasion | Location de salle événementielle",
|
||||
"description": "Organisez vos mariages, anniversaires, séminaires et événements spéciaux à la Salle des fêtes Évasion. Un cadre élégant et des services sur mesure pour des moments inoubliables.",
|
||||
"images": [
|
||||
"card": "summary_large_image", "title": "Salle des fêtes Manouba, Salle de mariage Manouba, Location salle événement Tunisie", "description": "Salle Évasion, votre destination de rêve pour mariages, événements, et réceptions à Manouba, Tunisie. Offrant un cadre élégant, des services personnalisés et des équipements modernes pour des célébrations inoubliables.", "images": [
|
||||
"http://img.b2bpic.net/free-photo/bachelorette-flower-arrnagement_23-2149340496.jpg"
|
||||
]
|
||||
},
|
||||
@@ -41,8 +33,7 @@ export const metadata: Metadata = {
|
||||
};
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter",
|
||||
subsets: ["latin"]
|
||||
variable: "--font-inter", subsets: ["latin"]
|
||||
});
|
||||
|
||||
export default function RootLayout({
|
||||
|
||||
285
src/app/page.tsx
285
src/app/page.tsx
@@ -32,80 +32,49 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Accueil",
|
||||
id: "#hero",
|
||||
},
|
||||
name: "Accueil", id: "/"},
|
||||
{
|
||||
name: "À Propos",
|
||||
id: "#about",
|
||||
},
|
||||
name: "À Propos", id: "/#about"},
|
||||
{
|
||||
name: "Services",
|
||||
id: "#services",
|
||||
},
|
||||
name: "Services", id: "/#services"},
|
||||
{
|
||||
name: "Galerie",
|
||||
id: "#gallery",
|
||||
},
|
||||
name: "Galerie", id: "/#gallery"},
|
||||
{
|
||||
name: "Témoignages",
|
||||
id: "#testimonials",
|
||||
},
|
||||
name: "Témoignages", id: "/#testimonials"},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "#faq",
|
||||
},
|
||||
name: "FAQ", id: "/#faq"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
name: "Contact", id: "/contact"},
|
||||
]}
|
||||
brandName="Salle Évasion"
|
||||
button={{
|
||||
text: "Demander un devis",
|
||||
href: "#contact",
|
||||
}}
|
||||
text: "Demander un devis", href: "/contact"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
variant: "radial-gradient"}}
|
||||
title="Salle des fêtes Évasion: Vos Événements, Notre Scène."
|
||||
description="Créez des souvenirs inoubliables dans un cadre élégant et modulable. Idéal pour mariages, anniversaires, séminaires et célébrations de toutes sortes."
|
||||
buttons={[
|
||||
{
|
||||
text: "Découvrir nos salles",
|
||||
href: "#gallery",
|
||||
},
|
||||
text: "Découvrir nos salles", href: "/#gallery"},
|
||||
{
|
||||
text: "Demander un devis",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Demander un devis", href: "/contact"},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bachelorette-flower-arrnagement_23-2149340496.jpg",
|
||||
imageAlt: "Mariage élégant dans une salle de réception",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bachelorette-flower-arrnagement_23-2149340496.jpg", imageAlt: "Mariage élégant dans une salle de réception"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/navratri-highly-detailed-interior-decoration_23-2151193720.jpg",
|
||||
imageAlt: "Fête d'anniversaire animée",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/navratri-highly-detailed-interior-decoration_23-2151193720.jpg", imageAlt: "Fête d'anniversaire animée"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-classroom-daytime-with-many-black-chairs-ready-students_146671-16246.jpg",
|
||||
imageAlt: "Séminaire professionnel",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-classroom-daytime-with-many-black-chairs-ready-students_146671-16246.jpg", imageAlt: "Séminaire professionnel"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/best-friends-getting-something-from-food-truck_23-2148914602.jpg",
|
||||
imageAlt: "Réception cocktail chic",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/best-friends-getting-something-from-food-truck_23-2148914602.jpg", imageAlt: "Réception cocktail chic"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/room-interior-design_23-2148899436.jpg",
|
||||
imageAlt: "Salle vide prête pour un événement",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/room-interior-design_23-2148899436.jpg", imageAlt: "Salle vide prête pour un événement"},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
@@ -116,14 +85,10 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
title="Découvrez la Salle Évasion"
|
||||
description={[
|
||||
"Située au cœur d'un environnement paisible, la Salle Évasion offre un espace moderne et raffiné pour tous vos événements. Conçue pour s'adapter à vos besoins, notre salle est l'endroit idéal pour transformer vos rêves en réalité.",
|
||||
"Avec une capacité flexible et des équipements de pointe, nous nous engageons à offrir une expérience sans faille, de la planification à la réalisation. Laissez-nous prendre en charge les détails pour que vous puissiez profiter pleinement de votre moment.",
|
||||
]}
|
||||
"Située au cœur d'un environnement paisible, la Salle Évasion offre un espace moderne et raffiné pour tous vos événements. Conçue pour s'adapter à vos besoins, notre salle est l'endroit idéal pour transformer vos rêves en réalité.", "Avec une capacité flexible et des équipements de pointe, nous nous engageons à offrir une expérience sans faille, de la planification à la réalisation. Laissez-nous prendre en charge les détails pour que vous puissiez profiter pleinement de votre moment."]}
|
||||
buttons={[
|
||||
{
|
||||
text: "En savoir plus",
|
||||
href: "#services",
|
||||
},
|
||||
text: "En savoir plus", href: "/#services"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -135,35 +100,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Service Traiteur Gastronomique",
|
||||
tags: [
|
||||
"Cuisine Raffinée",
|
||||
"Menus Personnalisés",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/catering-restaurant-service_624325-930.jpg",
|
||||
imageAlt: "Service traiteur gastronomique",
|
||||
},
|
||||
id: "f1", title: "Service Traiteur Gastronomique", tags: [
|
||||
"Cuisine Raffinée", "Menus Personnalisés"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/catering-restaurant-service_624325-930.jpg", imageAlt: "Service traiteur gastronomique"},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Décoration et Ambiance Sur Mesure",
|
||||
tags: [
|
||||
"Design Créatif",
|
||||
"Stylisme Floral",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/white-daisies-purple-hydrangeas-glass-transparent-tall-green-bottles-decorative-bouquets-vases_1304-3993.jpg",
|
||||
imageAlt: "Décoration événementielle florale",
|
||||
},
|
||||
id: "f2", title: "Décoration et Ambiance Sur Mesure", tags: [
|
||||
"Design Créatif", "Stylisme Floral"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/white-daisies-purple-hydrangeas-glass-transparent-tall-green-bottles-decorative-bouquets-vases_1304-3993.jpg", imageAlt: "Décoration événementielle florale"},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Équipement Son et Lumière de Pointe",
|
||||
tags: [
|
||||
"Technologie",
|
||||
"Ambiance Sonore",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/spectrum-flashes-coloured-light_23-2151792505.jpg",
|
||||
imageAlt: "Équipement son et lumière",
|
||||
},
|
||||
id: "f3", title: "Équipement Son et Lumière de Pointe", tags: [
|
||||
"Technologie", "Ambiance Sonore"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/spectrum-flashes-coloured-light_23-2151792505.jpg", imageAlt: "Équipement son et lumière"},
|
||||
]}
|
||||
title="Nos Services Exclusifs"
|
||||
description="Nous vous accompagnons à chaque étape pour garantir le succès de votre événement."
|
||||
@@ -178,53 +125,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Forfait Mariage Classique",
|
||||
price: "À partir de 2000€",
|
||||
variant: "Cérémonie, Dîner, Soirée",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-having-date-with-her-boyfriend-valentine-s-day_23-2149162010.jpg",
|
||||
imageAlt: "Mariage romantique",
|
||||
},
|
||||
id: "p1", name: "Forfait Mariage Classique", price: "À partir de 2000€", variant: "Cérémonie, Dîner, Soirée", imageSrc: "http://img.b2bpic.net/free-photo/woman-having-date-with-her-boyfriend-valentine-s-day_23-2149162010.jpg", imageAlt: "Mariage romantique"},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Forfait Anniversaire Premium",
|
||||
price: "À partir de 1200€",
|
||||
variant: "Décoration, DJ, Traiteur Léger",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/group-young-people-celebrating-new-year-friends-drinks-champagne_1157-44311.jpg",
|
||||
imageAlt: "Fête d'anniversaire joyeuse",
|
||||
},
|
||||
id: "p2", name: "Forfait Anniversaire Premium", price: "À partir de 1200€", variant: "Décoration, DJ, Traiteur Léger", imageSrc: "http://img.b2bpic.net/free-photo/group-young-people-celebrating-new-year-friends-drinks-champagne_1157-44311.jpg", imageAlt: "Fête d'anniversaire joyeuse"},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Forfait Séminaire Complet",
|
||||
price: "Sur devis",
|
||||
variant: "Salle, Matériel, Pause Café",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/group-graphic-designers-interacting-with-each-other_1170-777.jpg",
|
||||
imageAlt: "Séminaire professionnel",
|
||||
},
|
||||
id: "p3", name: "Forfait Séminaire Complet", price: "Sur devis", variant: "Salle, Matériel, Pause Café", imageSrc: "http://img.b2bpic.net/free-photo/group-graphic-designers-interacting-with-each-other_1170-777.jpg", imageAlt: "Séminaire professionnel"},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Salle Principale",
|
||||
price: "Jusqu'à 200 personnes",
|
||||
variant: "Espace modulable, Scène",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/inside-museum_1084-54.jpg",
|
||||
imageAlt: "Grande salle de réception",
|
||||
},
|
||||
id: "p4", name: "Salle Principale", price: "Jusqu'à 200 personnes", variant: "Espace modulable, Scène", imageSrc: "http://img.b2bpic.net/free-photo/inside-museum_1084-54.jpg", imageAlt: "Grande salle de réception"},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Salon VIP",
|
||||
price: "Jusqu'à 30 personnes",
|
||||
variant: "Intimité, Confort, Prestige",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/flower-vase-modern-interior_23-2151928932.jpg",
|
||||
imageAlt: "Salon VIP exclusif",
|
||||
},
|
||||
id: "p5", name: "Salon VIP", price: "Jusqu'à 30 personnes", variant: "Intimité, Confort, Prestige", imageSrc: "http://img.b2bpic.net/free-photo/flower-vase-modern-interior_23-2151928932.jpg", imageAlt: "Salon VIP exclusif"},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Terrasse Panoramique",
|
||||
price: "Sur devis",
|
||||
variant: "Vue imprenable, Plein air",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-adult-having-fun-white-party_23-2149575121.jpg",
|
||||
imageAlt: "Terrasse panoramique",
|
||||
},
|
||||
id: "p6", name: "Terrasse Panoramique", price: "Sur devis", variant: "Vue imprenable, Plein air", imageSrc: "http://img.b2bpic.net/free-photo/young-adult-having-fun-white-party_23-2149575121.jpg", imageAlt: "Terrasse panoramique"},
|
||||
]}
|
||||
title="Choisissez Votre Espace ou Forfait"
|
||||
description="Des forfaits personnalisés pour répondre à toutes vos attentes et tous les budgets."
|
||||
@@ -238,50 +149,20 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sophie Martin",
|
||||
handle: "@sophie.m",
|
||||
testimonial: "La Salle Évasion a rendu notre mariage absolument parfait. Le service était impeccable et le lieu magnifique. Un grand merci à toute l'équipe !",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/serious-businesswoman-with-her-arms-crossed_329181-13505.jpg",
|
||||
imageAlt: "Photo de Sophie Martin",
|
||||
},
|
||||
id: "t1", name: "Sophie Martin", handle: "@sophie.m", testimonial: "La Salle Évasion a rendu notre mariage absolument parfait. Le service était impeccable et le lieu magnifique. Un grand merci à toute l'équipe !", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/serious-businesswoman-with-her-arms-crossed_329181-13505.jpg", imageAlt: "Photo de Sophie Martin"},
|
||||
{
|
||||
id: "t2",
|
||||
name: "David Dubois",
|
||||
handle: "@david.d",
|
||||
testimonial: "Pour notre séminaire annuel, la Salle Évasion a été un choix judicieux. Tout était parfaitement organisé, du matériel technique au service traiteur.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/virtual-experience_1098-14112.jpg",
|
||||
imageAlt: "Photo de David Dubois",
|
||||
},
|
||||
id: "t2", name: "David Dubois", handle: "@david.d", testimonial: "Pour notre séminaire annuel, la Salle Évasion a été un choix judicieux. Tout était parfaitement organisé, du matériel technique au service traiteur.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/virtual-experience_1098-14112.jpg", imageAlt: "Photo de David Dubois"},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Julie et Marc",
|
||||
handle: "@julie.marc",
|
||||
testimonial: "Nous avons célébré l'anniversaire de nos 50 ans de mariage ici, et ce fut une soirée magique. L'ambiance était incroyable et le personnel aux petits soins.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/newlyweds-smile-keep-glasses-with-champagne_8353-9329.jpg",
|
||||
imageAlt: "Photo de Julie et Marc",
|
||||
},
|
||||
id: "t3", name: "Julie et Marc", handle: "@julie.marc", testimonial: "Nous avons célébré l'anniversaire de nos 50 ans de mariage ici, et ce fut une soirée magique. L'ambiance était incroyable et le personnel aux petits soins.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/newlyweds-smile-keep-glasses-with-champagne_8353-9329.jpg", imageAlt: "Photo de Julie et Marc"},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Équipe Innovatech",
|
||||
handle: "@innovatech",
|
||||
testimonial: "Nos événements d'entreprise sont toujours un succès à la Salle Évasion. Leur flexibilité et leur professionnalisme sont inégalés.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/image-lovely-happy-african-american-lady-clenches-fists-from-joy-smiles-broadly-enjoys-success-feels-content-energized_273609-32512.jpg",
|
||||
imageAlt: "Photo de l'équipe Innovatech",
|
||||
},
|
||||
id: "t4", name: "Équipe Innovatech", handle: "@innovatech", testimonial: "Nos événements d'entreprise sont toujours un succès à la Salle Évasion. Leur flexibilité et leur professionnalisme sont inégalés.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/image-lovely-happy-african-american-lady-clenches-fists-from-joy-smiles-broadly-enjoys-success-feels-content-energized_273609-32512.jpg", imageAlt: "Photo de l'équipe Innovatech"},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Caroline Leclerc",
|
||||
handle: "@caro.leclerc",
|
||||
testimonial: "J'ai organisé la baby shower de ma sœur et tout était si beau ! La décoration était parfaite et le personnel adorable. Je recommande vivement !",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cool-young-man-angry_1149-1842.jpg",
|
||||
imageAlt: "Photo de Caroline Leclerc",
|
||||
},
|
||||
id: "t5", name: "Caroline Leclerc", handle: "@caro.leclerc", testimonial: "J'ai organisé la baby shower de ma sœur et tout était si beau ! La décoration était parfaite et le personnel adorable. Je recommande vivement !", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cool-young-man-angry_1149-1842.jpg", imageAlt: "Photo de Caroline Leclerc"},
|
||||
]}
|
||||
showRating={true}
|
||||
title="Ce que disent nos clients"
|
||||
@@ -294,14 +175,7 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"Saveurs d'Élite",
|
||||
"Harmonie Sonore",
|
||||
"Fleurs & Créations",
|
||||
"Lux Limousines",
|
||||
"Capture Photo & Vidéo",
|
||||
"Concept Événement",
|
||||
"Traiteur Gourmand",
|
||||
]}
|
||||
"Saveurs d'Élite", "Harmonie Sonore", "Fleurs & Créations", "Lux Limousines", "Capture Photo & Vidéo", "Concept Événement", "Traiteur Gourmand"]}
|
||||
title="Nos Partenaires de Confiance"
|
||||
description="Nous collaborons avec les meilleurs pour des événements exceptionnels."
|
||||
/>
|
||||
@@ -313,20 +187,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Quelle est la capacité maximale de la salle ?",
|
||||
content: "Notre salle principale peut accueillir jusqu'à 200 personnes assises pour un repas et 300 personnes pour un cocktail debout. Nous avons également des salons plus petits pour des événements intimes.",
|
||||
},
|
||||
id: "q1", title: "Quelle est la capacité maximale de la salle ?", content: "Notre salle principale peut accueillir jusqu'à 200 personnes assises pour un repas et 300 personnes pour un cocktail debout. Nous avons également des salons plus petits pour des événements intimes."},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Proposez-vous un service traiteur ?",
|
||||
content: "Oui, nous proposons un service traiteur interne avec des menus variés et personnalisables pour s'adapter à vos préférences et à votre budget. Nous pouvons également travailler avec votre traiteur si vous le souhaitez.",
|
||||
},
|
||||
id: "q2", title: "Proposez-vous un service traiteur ?", content: "Oui, nous proposons un service traiteur interne avec des menus variés et personnalisables pour s'adapter à vos préférences et à votre budget. Nous pouvons également travailler avec votre traiteur si vous le souhaitez."},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Est-il possible de visiter la salle avant de réserver ?",
|
||||
content: "Absolument ! Nous vous invitons à prendre rendez-vous pour une visite guidée de nos installations. Notre équipe sera ravie de vous présenter les différents espaces et de répondre à toutes vos questions.",
|
||||
},
|
||||
id: "q3", title: "Est-il possible de visiter la salle avant de réserver ?", content: "Absolument ! Nous vous invitons à prendre rendez-vous pour une visite guidée de nos installations. Notre équipe sera ravie de vous présenter les différents espaces et de répondre à toutes vos questions."},
|
||||
]}
|
||||
title="Questions Fréquentes"
|
||||
description="Trouvez rapidement les réponses à vos interrogations."
|
||||
@@ -338,8 +203,7 @@ export default function LandingPage() {
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
variant: "radial-gradient"}}
|
||||
tag="Contactez-nous"
|
||||
title="Réservez Votre Date"
|
||||
description="Contactez-nous dès aujourd'hui pour discuter de votre prochain événement et obtenir un devis personnalisé."
|
||||
@@ -356,62 +220,37 @@ export default function LandingPage() {
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Découvrir",
|
||||
items: [
|
||||
title: "Découvrir", items: [
|
||||
{
|
||||
label: "Accueil",
|
||||
href: "#hero",
|
||||
},
|
||||
label: "Accueil", href: "/"},
|
||||
{
|
||||
label: "À Propos",
|
||||
href: "#about",
|
||||
},
|
||||
label: "À Propos", href: "/#about"},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
label: "Services", href: "/#services"},
|
||||
{
|
||||
label: "Galerie",
|
||||
href: "#gallery",
|
||||
},
|
||||
label: "Galerie", href: "/#gallery"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Assistance",
|
||||
items: [
|
||||
title: "Assistance", items: [
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
label: "FAQ", href: "/#faq"},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
label: "Contact", href: "/contact"},
|
||||
{
|
||||
label: "Politique de Confidentialité",
|
||||
href: "#",
|
||||
},
|
||||
label: "Politique de Confidentialité", href: "#"},
|
||||
{
|
||||
label: "Conditions Générales",
|
||||
href: "#",
|
||||
},
|
||||
label: "Conditions Générales", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Nous Suivre",
|
||||
items: [
|
||||
title: "Nous Suivre", items: [
|
||||
{
|
||||
label: "Facebook",
|
||||
href: "#",
|
||||
},
|
||||
label: "Facebook", href: "#"},
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
label: "Instagram", href: "#"},
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "#",
|
||||
},
|
||||
label: "LinkedIn", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
163
src/app/services/page.tsx
Normal file
163
src/app/services/page.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
|
||||
export default function ServicesPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="large"
|
||||
background="circleGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Accueil", href: "/"},
|
||||
{
|
||||
name: "À Propos", id: "#about"},
|
||||
{
|
||||
name: "Services", href: "/services"},
|
||||
{
|
||||
name: "Galerie", id: "#gallery"},
|
||||
{
|
||||
name: "Témoignages", id: "#testimonials"},
|
||||
{
|
||||
name: "FAQ", id: "#faq"},
|
||||
{
|
||||
name: "Contact", id: "#contact"},
|
||||
]}
|
||||
brandName="Salle Évasion"
|
||||
button={{
|
||||
text: "Demander un devis", href: "/#contact"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FeatureCardTwentyThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "wedding-feature-1", title: "Cérémonies Élégantes", tags: ["Luxe", "Personnalisé", "Chic"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/wedding-setup_23-2149575129.jpg", imageAlt: "Décoration de mariage élégante avec des fleurs"},
|
||||
]}
|
||||
title="Mariages Inoubliables"
|
||||
description="Créez votre journée de rêve avec nos forfaits mariage élégants. Des lieux somptueux aux décors personnalisés, chaque détail est pensé pour une célébration sans pareil."
|
||||
className="my-12"
|
||||
/>
|
||||
|
||||
<FeatureCardTwentyThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "engagement-feature-1", title: "Décors Personnalisés", tags: ["Romantique", "Intime", "Sur Mesure"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-wedding-composition-on-white-table_23-2149574246.jpg", imageAlt: "Décoration romantique pour fiançailles"},
|
||||
]}
|
||||
title="Fiançailles Magiques"
|
||||
description="Célébrez votre amour avec une ambiance romantique et des décorations sur mesure. Nous transformons votre vision en une réalité enchantée pour ce moment unique."
|
||||
className="my-12"
|
||||
/>
|
||||
|
||||
<FeatureCardTwentyThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "birthday-feature-1", title: "Ambiance Festive", tags: ["Famille", "Amusement", "Thème"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/navratri-highly-detailed-interior-decoration_23-2151193720.jpg", imageAlt: "Salle décorée pour une fête d'anniversaire"},
|
||||
]}
|
||||
title="Anniversaires Mémorables"
|
||||
description="Des fêtes joyeuses pour tous les âges. Nos espaces sont parfaits pour des célébrations familiales, avec des options de divertissement pour les enfants et les adultes."
|
||||
className="my-12"
|
||||
/>
|
||||
|
||||
<FeatureCardTwentyThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "corporate-feature-1", title: "Réunions Productives", tags: ["Affaires", "Technologie", "Réseautage"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/conference-room-with-chairs-round-table-ready-seminar_146671-16167.jpg", imageAlt: "Salle de conférence prête pour une réunion"},
|
||||
]}
|
||||
title="Événements Corporate Professionnels"
|
||||
description="Organisez vos réunions, conférences ou galas d'entreprise dans un cadre professionnel et équipé. Solutions techniques et services adaptés à vos exigences."
|
||||
className="my-12"
|
||||
/>
|
||||
|
||||
<FeatureCardTwentyThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "private-feature-1", title: "Expériences Sur Mesure", tags: ["Intimité", "Exclusif", "Personnalisé"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/restaurant-table-decorated-with-flowers_23-2149091871.jpg", imageAlt: "Table de restaurant élégamment dressée pour un événement privé"},
|
||||
]}
|
||||
title="Événements Privés Exclusifs"
|
||||
description="Qu'il s'agisse d'un dîner privé, d'une soirée spéciale ou d'une célébration intime, nous créons une expérience entièrement personnalisée, à votre image."
|
||||
className="my-12"
|
||||
/>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Découvrir", items: [
|
||||
{
|
||||
label: "Accueil", href: "/"},
|
||||
{
|
||||
label: "À Propos", href: "/#about"},
|
||||
{
|
||||
label: "Services", href: "/services"},
|
||||
{
|
||||
label: "Galerie", href: "/#gallery"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Assistance", items: [
|
||||
{
|
||||
label: "FAQ", href: "/#faq"},
|
||||
{
|
||||
label: "Contact", href: "/#contact"},
|
||||
{
|
||||
label: "Politique de Confidentialité", href: "#"},
|
||||
{
|
||||
label: "Conditions Générales", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Nous Suivre", items: [
|
||||
{
|
||||
label: "Facebook", href: "#"},
|
||||
{
|
||||
label: "Instagram", href: "#"},
|
||||
{
|
||||
label: "LinkedIn", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Salle Évasion"
|
||||
copyrightText="© 2024 Salle Évasion. Tous droits réservés."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f7f6f7;
|
||||
--card: #ffffff;
|
||||
--foreground: #0c1325;
|
||||
--primary-cta: #0798ff;
|
||||
--primary-cta-text: #f7f6f7;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta-text: #0c1325;
|
||||
--accent: #93c7ff;
|
||||
--background-accent: #a8cde8;
|
||||
--background: #F9F9F9;
|
||||
--card: #FFFFFF;
|
||||
--foreground: #1C1C1C;
|
||||
--primary-cta: #184E3D;
|
||||
--primary-cta-text: #FFFFFF;
|
||||
--secondary-cta: #F9F9F9;
|
||||
--secondary-cta-text: #1C1C1C;
|
||||
--accent: #D4AF37;
|
||||
--background-accent: #EAEAEA;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user