Merge version_3 into main #3
179
src/app/page.tsx
179
src/app/page.tsx
@@ -2,14 +2,12 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import { Award, Settings, Sparkles } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
@@ -27,103 +25,92 @@ export default function LandingPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Fabrication", id: "fabrication" },
|
||||
{ name: "Boutique", id: "boutique" },
|
||||
{ name: "Commander", id: "contact" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
]}
|
||||
brandName="Les Nymphes de YAYA"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Fabrication", id: "fabrication" },
|
||||
{ name: "Boutique", id: "boutique" },
|
||||
{ name: "Commander", id: "contact" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
]}
|
||||
brandName="Les Nymphes de YAYA"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Les Nymphes de YAYA"
|
||||
description="Des mouches montées une par une, inspirées des éclosions des gaves et torrents pyrénéens. Plus de 200 pièces en stock, prêtes à partir sur vos rivières."
|
||||
kpis={[
|
||||
{ value: "1.50€", label: "la mouche" },
|
||||
{ value: "200+", label: "en stock" },
|
||||
{ value: "100%", label: "fait main" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[{ text: "Commander mes mouches", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/mountain-landscape-zermatt-switzerland_181624-45175.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Les Nymphes de YAYA"
|
||||
description="Des mouches montées une par une, inspirées des éclosions des gaves et torrents pyrénéens. Plus de 200 pièces en stock, prêtes à partir sur vos rivières."
|
||||
kpis={[
|
||||
{ value: "1.50€", label: "la mouche" },
|
||||
{ value: "200+", label: "en stock" },
|
||||
{ value: "100%", label: "fait main" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[{ text: "Commander mes mouches", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/mountain-landscape-zermatt-switzerland_181624-45175.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="fabrication" data-section="fabrication">
|
||||
<FeatureBorderGlow
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: Sparkles, title: "Matériaux sélectionnés", description: "Perles tungstène, fils UV, poils naturels." },
|
||||
{ icon: Settings, title: "Montage artisanal", description: "Chaque mouche est montée individuellement à la main." },
|
||||
{ icon: Award, title: "Testées sur terrain", description: "Validées sur les gaves et torrents pyrénéens." },
|
||||
]}
|
||||
title="Savoir-faire artisanal"
|
||||
description="Une qualité irréprochable pour vos sessions de pêche."
|
||||
/>
|
||||
</div>
|
||||
<div id="fabrication" data-section="fabrication">
|
||||
<FeatureBorderGlow
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: Sparkles, title: "Matériaux sélectionnés", description: "Perles tungstène, fils UV, poils naturels." },
|
||||
{ icon: Settings, title: "Montage artisanal", description: "Chaque mouche est montée individuellement à la main." },
|
||||
{ icon: Award, title: "Testées sur terrain", description: "Validées sur les gaves et torrents pyrénéens." },
|
||||
]}
|
||||
title="Savoir-faire artisanal"
|
||||
description="Une qualité irréprochable pour vos sessions de pêche."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="boutique" data-section="boutique">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", brand: "Nymphe", name: "Tungstène Verte", price: "1,50 €", rating: 5, reviewCount: "12", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CFbxiqCz7uTDnHki1YbQkDd2aD/uploaded-1776007808595-8qginags.png" },
|
||||
{ id: "p2", brand: "Nymphe", name: "Bicolore Bleu/Vert", price: "1,50 €", rating: 5, reviewCount: "10", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CFbxiqCz7uTDnHki1YbQkDd2aD/uploaded-1776007808595-sj6buz5x.png" },
|
||||
{ id: "p3", brand: "Nymphe", name: "Poil Naturel", price: "1,50 €", rating: 5, reviewCount: "8", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CFbxiqCz7uTDnHki1YbQkDd2aD/uploaded-1776007808595-2ne8med3.png" },
|
||||
]}
|
||||
title="La Boutique"
|
||||
description="Toutes nos mouches sont disponibles à l'unité."
|
||||
/>
|
||||
</div>
|
||||
<div id="boutique" data-section="boutique">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
title="Boutique Interactive"
|
||||
description="Cliquez sur une mouche pour découvrir sa composition précise et l'ajouter à votre sélection."
|
||||
products={[
|
||||
{ id: "p1", name: "Tungstène Verte", price: "1,50 €", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CFbxiqCz7uTDnHki1YbQkDd2aD/uploaded-1776007808595-8qginags.png", initialQuantity: 0 },
|
||||
{ id: "p2", name: "Bicolore Bleu/Vert", price: "1,50 €", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CFbxiqCz7uTDnHki1YbQkDd2aD/uploaded-1776007808595-sj6buz5x.png", initialQuantity: 0 },
|
||||
{ id: "p3", name: "Poil Naturel", price: "1,50 €", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CFbxiqCz7uTDnHki1YbQkDd2aD/uploaded-1776007808595-2ne8med3.png", initialQuantity: 0 },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Questions fréquentes"
|
||||
description="Tout savoir sur nos créations."
|
||||
faqs={[
|
||||
{ id: "f1", title: "Quels sont les délais d'expédition ?", content: "Nous expédions vos commandes sous 48h." },
|
||||
{ id: "f4", title: "Quelles méthodes de paiement ?", content: "Virements et paiement sécurisé disponibles." },
|
||||
]}
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Passer commande"
|
||||
description="Remplissez ce formulaire complet pour valider votre commande de mouches artisanales."
|
||||
inputs={[
|
||||
{ name: "nom", type: "text", placeholder: "Nom complet", required: true },
|
||||
{ name: "adresse", type: "text", placeholder: "Adresse complète (rue, ville, CP)", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email de contact", required: true }
|
||||
]}
|
||||
textarea={{ name: "details", placeholder: "Détails des quantités par modèle choisi", rows: 4, required: true }}
|
||||
useInvertedBackground={true}
|
||||
buttonText="Valider la commande"
|
||||
onSubmit={(data) => console.log("Formulaire soumis:", data)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Passer commande"
|
||||
title="Commande et Paiement"
|
||||
description="Remplissez ce formulaire pour valider votre sélection. Un paiement sécurisé vous sera proposé par mail après confirmation de la disponibilité."
|
||||
onSubmit={(email) => console.log("Commande initie par: ", email)}
|
||||
buttonText="Commander maintenant"
|
||||
termsText="En cliquant sur commander, vous acceptez d'être contacté pour finaliser les détails du paiement."
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{ title: "Navigation", items: [{ label: "Fabrication", href: "#fabrication" }, { label: "Boutique", href: "#boutique" }, { label: "Commander", href: "#contact" }] },
|
||||
{ title: "Infos", items: [{ label: "Livraison", href: "#" }, { label: "Paiement", href: "#" }] },
|
||||
]}
|
||||
bottomLeftText="© 2026 Les Nymphes de YAYA"
|
||||
bottomRightText="Fait main avec ❤️ dans les Hautes-Pyrénées"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{ title: "Navigation", items: [{ label: "Fabrication", href: "#fabrication" }, { label: "Boutique", href: "#boutique" }, { label: "Commander", href: "#contact" }] },
|
||||
{ title: "Infos", items: [{ label: "Livraison", href: "#" }, { label: "Paiement", href: "#" }] },
|
||||
]}
|
||||
bottomLeftText="© 2026 Les Nymphes de YAYA"
|
||||
bottomRightText="Fait main avec ❤️ dans les Hautes-Pyrénées"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user