Merge version_2 into main #2
390
src/app/page.tsx
390
src/app/page.tsx
@@ -2,301 +2,133 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import { Clock, MapPin, Palette, Phone, Scissors, Sparkles } from "lucide-react";
|
||||
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
||||
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
||||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||||
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import { Zap, ShieldCheck, Gauge, Trophy } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="largeSmall"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="outline"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="noise"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="medium"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Accueil",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "À propos",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Avis",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="D.S Coiffure"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Modèle", id: "hero" },
|
||||
{ name: "Performance", id: "metrics" },
|
||||
{ name: "Design", id: "features" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="PORSCHE"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="D.S Coiffure"
|
||||
description="Votre salon de coiffure expert au cœur de Flers. Sublimons votre style avec passion et savoir-faire."
|
||||
buttons={[
|
||||
{
|
||||
text: "Prendre rendez-vous",
|
||||
href: "tel:0233650844",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/perfume-bottles-woman-s-dressing-table_53876-94360.jpg?_wi=1"
|
||||
imageAlt="Salon D.S Coiffure intérieur"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
title="GT3 RS. Pure Performance."
|
||||
description="L'expression ultime de la compétition automobile. Une ingénierie sans compromis."
|
||||
background={{ variant: "gradient-bars" }}
|
||||
mediaItems={[
|
||||
{ imageSrc: "https://img.b2bpic.net/free-photo/luxury-sport-car-parked-city-street_114579-5078.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Scissors,
|
||||
title: "Coupes Personnalisées",
|
||||
description: "Des coupes adaptées à votre morphologie et votre style.",
|
||||
},
|
||||
{
|
||||
icon: Palette,
|
||||
title: "Coloration Expert",
|
||||
description: "Techniques de coloration pour un rendu naturel ou éclatant.",
|
||||
},
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: "Soins Capillaires",
|
||||
description: "Soins profonds pour revitaliser et protéger vos cheveux.",
|
||||
},
|
||||
]}
|
||||
title="Nos Services"
|
||||
description="Des prestations sur-mesure pour sublimer vos cheveux avec des produits de qualité."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardThree
|
||||
title="Design Aérodynamique"
|
||||
description="Chaque courbe est façonnée par le vent, chaque détail optimisé pour l'appui maximal."
|
||||
gridVariant="bento-grid"
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ title: "Aileron Fixe", description: "Appui constant à haute vitesse.", imageSrc: "https://img.b2bpic.net/free-photo/car-details-interior-exterior_23-2148416631.jpg" },
|
||||
{ title: "Entrées d'air", description: "Refroidissement optimisé moteur.", imageSrc: "https://img.b2bpic.net/free-photo/car-headlight_23-2148416629.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Une Passion, Votre Style"
|
||||
metrics={[
|
||||
{
|
||||
icon: MapPin,
|
||||
label: "Localisation",
|
||||
value: "12 Rue de Domfront",
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
label: "Horaires",
|
||||
value: "Samedi dès 8h",
|
||||
},
|
||||
{
|
||||
icon: Phone,
|
||||
label: "Contact",
|
||||
value: "02 33 65 08 44",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
title="Héritage Compétition"
|
||||
description="La GT3 RS n'est pas seulement une voiture, c'est une machine conçue pour les circuits."
|
||||
metrics={[{ value: "525 ch", title: "Puissance" }, { value: "3.2s", title: "0 à 100 km/h" }]}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="https://img.b2bpic.net/free-photo/luxury-car-speed-motion-blur_114579-5078.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "4.5/5",
|
||||
title: "Note Google",
|
||||
description: "Basée sur 27 avis clients.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/baking-time-with-best-grandmother_329181-17830.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "100%",
|
||||
title: "Satisfaction",
|
||||
description: "La priorité de notre équipe.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pov-entrepreneurs-online-meeting_482257-79771.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "Local",
|
||||
title: "Flers",
|
||||
description: "Ancré dans votre quotidien.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-hispanic-girl-textured-wall_1187-5169.jpg",
|
||||
},
|
||||
]}
|
||||
title="Nos Chiffres"
|
||||
description="La satisfaction client est au cœur de notre salon."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
title="Performance Pure"
|
||||
description="Les chiffres ne mentent pas. Vivez la précision Porsche."
|
||||
animationType="depth-3d"
|
||||
metrics={[
|
||||
{ id: "1", value: "8500", title: "RPM Max", items: ["Moteur atmosphérique"] },
|
||||
{ id: "2", value: "1450kg", title: "Poids léger", items: ["Structure optimisée"] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah L.",
|
||||
date: "1 mois",
|
||||
title: "Super salon",
|
||||
quote: "Toujours très satisfaite du résultat.",
|
||||
tag: "Client",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/perfume-bottles-woman-s-dressing-table_53876-94360.jpg?_wi=2",
|
||||
imageAlt: "happy client smiling portrait",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Marc T.",
|
||||
date: "3 mois",
|
||||
title: "Pro et accueillant",
|
||||
quote: "Excellent accueil et coupe parfaite.",
|
||||
tag: "Client",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/closeup-handsome-middleaged-man-showing-okay-signs-looking-amazed-recommending-something-cool_1258-129538.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/vintage-monochrome-straight-razor-concept_225004-1515.jpg",
|
||||
imageAlt: "happy client smiling portrait",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Julie D.",
|
||||
date: "6 mois",
|
||||
title: "Expertise",
|
||||
quote: "Je recommande vivement ce salon.",
|
||||
tag: "Client",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-young-smiling-redhaired-woman-sitting-windowsill_231208-14235.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/hairpainting-cosmetology-accessories-set-vector_529539-213.jpg",
|
||||
imageAlt: "happy client smiling portrait",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Sophie M.",
|
||||
date: "1 an",
|
||||
title: "Top",
|
||||
quote: "Le meilleur salon de Flers.",
|
||||
tag: "Client",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/stylish-woman-wearing-yellow-bandana_273609-13345.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-hair-salon_23-2150668420.jpg",
|
||||
imageAlt: "happy client smiling portrait",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Thomas G.",
|
||||
date: "2 ans",
|
||||
title: "Habitué",
|
||||
quote: "Toujours au top depuis des années.",
|
||||
tag: "Client",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/man-taking-good-care-his-face-home_23-2148883814.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/glamorous-model-make-up-studio_23-2148328753.jpg",
|
||||
imageAlt: "happy client smiling portrait",
|
||||
},
|
||||
]}
|
||||
title="Ce que nos clients disent"
|
||||
description="La fidélité de notre clientèle témoigne de notre exigence."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
title="L'expérience GT3 RS"
|
||||
description="Ce que les pilotes disent de l'expérience Porsche."
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", title: "Inégalable", quote: "La meilleure voiture de piste que j'ai jamais conduite.", name: "Pilote Pro", role: "Champion GT" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Prenez-vous sans rendez-vous ?",
|
||||
content: "Nous privilégions les rendez-vous pour mieux vous servir.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Quels sont vos horaires ?",
|
||||
content: "Nous ouvrons le samedi à partir de 08:00.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Où êtes-vous situé ?",
|
||||
content: "Nous sommes au 12 Rue de Domfront, 61100 Flers.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Questions Fréquentes"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
title="En savoir plus"
|
||||
description="Questions fréquentes sur l'ingénierie et la commande."
|
||||
faqs={[{ id: "1", title: "Disponibilité", content: "Contactez votre centre Porsche local." }]}
|
||||
faqsAnimation="blur-reveal"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
text="Besoin d'un rendez-vous ou d'une information ? Appelez-nous au 02 33 65 08 44."
|
||||
buttons={[
|
||||
{
|
||||
text: "Appeler maintenant",
|
||||
href: "tel:0233650844",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Réservation"
|
||||
title="Expérimentez la Performance"
|
||||
description="Prenez le volant de votre rêve."
|
||||
buttons={[{ text: "Contactez un expert", href: "#" }]}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="D.S Coiffure"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{
|
||||
label: "Accueil",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#features",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
items: [
|
||||
{
|
||||
label: "02 33 65 08 44",
|
||||
href: "tel:0233650844",
|
||||
},
|
||||
{
|
||||
label: "12 Rue de Domfront, 61100 Flers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
logoText="PORSCHE"
|
||||
imageSrc="https://img.b2bpic.net/free-photo/dark-luxury-background-car-interior_23-2148328753.jpg"
|
||||
columns={[{ title: "Explorez", items: [{ label: "GT3 RS", href: "#hero" }] }]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f5f5f5;
|
||||
--card: #ffffff;
|
||||
--foreground: #1c1c1c;
|
||||
--primary-cta: #1c1c1c;
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #e63946;
|
||||
--primary-cta-text: #f5f5f5;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta: #333333;
|
||||
--secondary-cta-text: #1c1c1c;
|
||||
--accent: #159c49;
|
||||
--background-accent: #a8e8ba;
|
||||
--accent: #e63946;
|
||||
--background-accent: #2a2a2a;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user