Merge version_2 into main #2
416
src/app/page.tsx
416
src/app/page.tsx
@@ -2,331 +2,125 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
||||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TeamCardFive from '@/components/sections/team/TeamCardFive';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import { Coffee, Heart, Star } from "lucide-react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||||
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
|
||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||
import { Coffee, Heart, Star, MapPin, Mail, Phone, Clock } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="compact"
|
||||
sizing="large"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Accueil",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "À Propos",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Menu",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Avis",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="La Caserne"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="Café T&M"
|
||||
navItems={[
|
||||
{ name: "Accueil", id: "hero" },
|
||||
{ name: "À Propos", id: "about" },
|
||||
{ name: "Menu", id: "products" },
|
||||
{ name: "Équipe", id: "team" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
button={{ text: "Réserver", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
logoText="La Caserne"
|
||||
description="Votre bistro et café chaleureux au cœur de Shawinigan. Savourez nos bagels artisanaux cuits au four à bois."
|
||||
buttons={[
|
||||
{
|
||||
text: "Voir le menu",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
text: "Réserver",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/serious-young-redhead-curly-lady-sitting-cafe_171337-16952.jpg?_wi=1"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
title="L'élégance du café, le confort d'un foyer"
|
||||
description="Bienvenue chez Café T&M. Un espace moderne où la passion du café rencontre l'art de vivre."
|
||||
background={{ variant: "gradient-bars" }}
|
||||
buttons={[{ text: "Découvrir notre menu", href: "#products" }]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dzo2LJW3JtUTiXBkbxGTgqJxc6/uploaded-1779295599246-2ij37o81.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Un café unique à Sainte-Flore"
|
||||
description="Installé dans un décor champêtre, La Caserne offre une expérience culinaire artisanale unique. Du pain frais à nos lattes renommés, chaque détail est pensé pour votre bien-être."
|
||||
metrics={[
|
||||
{
|
||||
value: "4.8",
|
||||
title: "Note Google",
|
||||
},
|
||||
{
|
||||
value: "37",
|
||||
title: "Avis Clients",
|
||||
},
|
||||
{
|
||||
value: "100%",
|
||||
title: "Artisanal",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/restaurant-with-leather-sofa-paintings-wall_140725-9715.jpg?_wi=1"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
tag="Notre Vision"
|
||||
title="Plus qu'un simple café"
|
||||
description="Café T&M est né de l'envie de créer un lieu de rencontre authentique. Nous sélectionnons nos grains avec soin pour garantir une qualité supérieure à chaque tasse."
|
||||
subdescription="Notre engagement : durabilité, qualité artisanale et accueil chaleureux au quotidien."
|
||||
icon={Coffee}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dzo2LJW3JtUTiXBkbxGTgqJxc6/uploaded-1779295599246-rpm7pfrp.png"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Bagel Jambon Fromage",
|
||||
price: "12 $",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/composition-delicious-picnic-goodies-blanket_23-2148921070.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Matcha Latte",
|
||||
price: "6 $",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/unrecognizable-asian-woman-holding-cup-cappuccino-cafe_1098-20163.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Bagel Herbes",
|
||||
price: "5 $",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-cut-croissant-cutting-board-with-kumquats-quince-jam-jar-with-whisk-black-background_141793-130492.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Bagel Végé Paté",
|
||||
price: "9 $",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-croissant-with-greens-ham-vegetables-pub_7502-9265.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Bagel Confiture",
|
||||
price: "4 $",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cup-coffee-with-bun_1252-891.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Planchounette",
|
||||
price: "15 $",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-yarpaag-dolmasi-grape-leaf-dolma-white-plate_114579-2034.jpg",
|
||||
},
|
||||
]}
|
||||
title="Nos spécialités"
|
||||
description="Découvrez nos incontournables, préparés avec amour."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
title="Notre Carte"
|
||||
description="Découvrez nos créations gourmandes du moment."
|
||||
gridVariant="bento-grid"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", name: "Café Signature", price: "4.50$", variant: "Intense", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dzo2LJW3JtUTiXBkbxGTgqJxc6/uploaded-1779295599246-9wrj09sw.png" },
|
||||
{ id: "2", name: "Pâtisserie Artisanale", price: "5.00$", variant: "Beurré", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dzo2LJW3JtUTiXBkbxGTgqJxc6/uploaded-1779295599246-n50whjyy.png" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
icon: Coffee,
|
||||
title: "Lattes servis",
|
||||
value: "10K+",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
icon: Star,
|
||||
title: "Clients satisfaits",
|
||||
value: "3K+",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
icon: Heart,
|
||||
title: "Années de passion",
|
||||
value: "2+",
|
||||
},
|
||||
]}
|
||||
title="L'expérience La Caserne"
|
||||
description="Des chiffres qui reflètent notre passion pour le café et la convivialité."
|
||||
/>
|
||||
</div>
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTwo
|
||||
title="Nos Maîtres Baristas"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="blur-reveal"
|
||||
members={[
|
||||
{ id: "m1", name: "Thomas", role: "Fondateur & Barista", description: "Passionné par la torréfaction depuis 10 ans." },
|
||||
{ id: "m2", name: "Manon", role: "Cheffe Pâtissière", description: "L'âme créative derrière nos douceurs." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
team={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Étienne Vincent",
|
||||
role: "Propriétaire",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-talking-phone_23-2149356834.jpg",
|
||||
imageAlt: "Medium shot woman talking on phone",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Marie-Pier",
|
||||
role: "Barista",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/serious-young-redhead-curly-lady-sitting-cafe_171337-16952.jpg?_wi=2",
|
||||
imageAlt: "Medium shot woman talking on phone",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Jean-Luc",
|
||||
role: "Boulanger",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/restaurant-with-leather-sofa-paintings-wall_140725-9715.jpg?_wi=2",
|
||||
imageAlt: "Medium shot woman talking on phone",
|
||||
},
|
||||
]}
|
||||
title="L'équipe"
|
||||
description="Derrière chaque latte, une équipe passionnée à votre service."
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
sideTitle="Questions Fréquentes"
|
||||
sideDescription="Tout ce que vous devez savoir sur Café T&M."
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{ id: "q1", title: "Quels sont vos horaires ?", content: "Ouvert du mardi au dimanche, de 8h à 18h." },
|
||||
{ id: "q2", title: "Proposez-vous du lait végétal ?", content: "Oui, nous avons une gamme complète d'alternatives végétales." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "test-1",
|
||||
name: "Christian Maurais",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-enjoying-coffee-cup_23-2148756305.jpg",
|
||||
},
|
||||
{
|
||||
id: "test-2",
|
||||
name: "Alex",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-paying-bill-restaurant-using-nfc-technology_23-2150039413.jpg",
|
||||
},
|
||||
{
|
||||
id: "test-3",
|
||||
name: "Josianne Malenfant",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-business-meeting-with-coffee_23-2148366527.jpg",
|
||||
},
|
||||
{
|
||||
id: "test-4",
|
||||
name: "Sophie Martin",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-using-nfc-technology-pay-restaurant_23-2150039449.jpg",
|
||||
},
|
||||
{
|
||||
id: "test-5",
|
||||
name: "Marc-André B.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-drinking-coffee-spacious-cafeteria_23-2150424007.jpg",
|
||||
},
|
||||
]}
|
||||
cardTitle="Ce que vous en dites"
|
||||
cardTag="Avis clients"
|
||||
cardAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Contactez-nous"
|
||||
description="Envie de nous rejoindre ou de privatiser notre espace ?"
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Votre nom" },
|
||||
{ name: "email", type: "email", placeholder: "Votre email" }
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Votre message" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Quelles sont vos heures d'ouverture?",
|
||||
content: "Nous sommes ouverts tous les jours jusqu'à 16 h.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Proposez-vous des produits locaux?",
|
||||
content: "Oui, nous mettons de l'avant une belle sélection de produits locaux.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Peut-on manger sur place?",
|
||||
content: "Absolument, notre bistro est conçu pour vous accueillir chaleureusement.",
|
||||
},
|
||||
]}
|
||||
title="Questions fréquentes"
|
||||
description="En savoir plus sur La Caserne."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Contact"
|
||||
title="Venez nous visiter"
|
||||
description="Situés au 3251 Chem. de Sainte-Flore, Shawinigan. Passez nous voir pour un bagel chaud!"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/beverage-baked-apples-near-napkin-leaves_23-2147885822.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="La Caserne"
|
||||
columns={[
|
||||
{
|
||||
title: "Menu",
|
||||
items: [
|
||||
{
|
||||
label: "Bagels",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "Lattes",
|
||||
href: "#products",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Info",
|
||||
items: [
|
||||
{
|
||||
label: "À propos",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2025 La Caserne | Shawinigan, QC"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Café T&M"
|
||||
socialLinks={[{ icon: Star, href: "#", ariaLabel: "Instagram" }]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user