Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| da8df731af | |||
| 76994d57ef | |||
| 16b2060e24 |
304
src/app/page.tsx
304
src/app/page.tsx
@@ -2,209 +2,135 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import TeamCardFive from '@/components/sections/team/TeamCardFive';
|
||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="none"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="none"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Accueil", id: "hero"},
|
||||
{
|
||||
name: "Produits", id: "products"},
|
||||
{
|
||||
name: "Mon Compte", id: "contact"},
|
||||
]}
|
||||
brandName="LuxeLeather"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Accueil", id: "hero" },
|
||||
{ name: "Produits", id: "products" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="LuxeLeather"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{ variant: "plain" }}
|
||||
title="L'Essence du Cuir"
|
||||
description="Redécouvrez l'élégance intemporelle à travers nos créations artisanales en cuir."
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/fashionable-woman-holding-her-hat-down_23-2148448803.jpg?_wi=1", imageAlt: "Mode Luxe" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/concentrated-shoemaker-workshop-making-shoes_171337-12271.jpg", imageAlt: "Savoir-faire" }
|
||||
]}
|
||||
buttons={[{ text: "Découvrir", href: "#products" }]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
title="L'Essence du Cuir"
|
||||
description="Redécouvrez l'élégance intemporelle à travers nos créations artisanales en cuir."
|
||||
background={{ variant: "plain" }}
|
||||
kpis={[
|
||||
{ value: "15+", label: "Années d'Expérience" },
|
||||
{ value: "500+", label: "Créations Uniques" },
|
||||
{ value: "99%", label: "Clients Satisfaits" }
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="Un Héritage Moderne"
|
||||
description={[
|
||||
"Nous fusionnons tradition artisanale et design contemporain.", "Nos pièces en cuir sont conçues pour durer et raconter une histoire."]}
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
title="Nos Créations"
|
||||
description="Une sélection exclusive de maroquinerie haut de gamme."
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", brand: "LuxeLeather", name: "Sac Iconique", price: "450€", rating: 5, reviewCount: "24 avis", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-chic-woman-posing_23-2149267441.jpg?_wi=1" },
|
||||
{ id: "p2", brand: "LuxeLeather", name: "Balghas Tradition", price: "120€", rating: 4, reviewCount: "18 avis", imageSrc: "http://img.b2bpic.net/free-photo/view-women-s-purse-tiles-with-mediterranean-aesthetics_23-2150916721.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="one-large-left-three-stacked-right"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1", name: "Sac en Cuir Iconique", price: "450€", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-chic-woman-posing_23-2149267441.jpg?_wi=1"},
|
||||
{
|
||||
id: "p2", name: "Balghas Traditionnels", price: "120€", imageSrc: "http://img.b2bpic.net/free-photo/view-women-s-purse-tiles-with-mediterranean-aesthetics_23-2150916721.jpg"},
|
||||
{
|
||||
id: "p3", name: "Petit Sac à Main", price: "290€", imageSrc: "http://img.b2bpic.net/free-photo/businessman-holding-brown-leather-bag-close-up-shot-businessman-suit-holding-his-bag-metro-train_549566-2.jpg"},
|
||||
{
|
||||
id: "p4", name: "Veste en Cuir", price: "890€", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-demonstrating-upper-cloths_1303-24561.jpg"},
|
||||
{
|
||||
id: "p5", name: "Sacoche Luxe", price: "350€", imageSrc: "http://img.b2bpic.net/free-photo/bag-hanging-from-furniture-item-indoors_23-2151073523.jpg"},
|
||||
{
|
||||
id: "p6", name: "Accessoires Cuir", price: "95€", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-covid-party-with-masks_23-2149299867.jpg"},
|
||||
]}
|
||||
title="Nos Créations"
|
||||
description="Sélection exclusive de vêtements, sacs et balghas."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardThree
|
||||
title="Nos Forfaits"
|
||||
description="Choisissez l'option qui correspond à vos besoins."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "std", badge: "Populaire", price: "0€", name: "Standard", features: ["Livraison standard", "Suivi inclus"], buttons: [{ text: "Choisir" }] },
|
||||
{ id: "exp", price: "15€", name: "Express", features: ["Livraison 24h", "Emballage cadeau"], buttons: [{ text: "Choisir" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Cuir Premium", description: "Sélection rigoureuse des meilleures peaux.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-posing-street_1303-29727.jpg?_wi=1"},
|
||||
{
|
||||
title: "Fait à la main", description: "Un savoir-faire ancestral préservé.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-brunette-model-dressed-summer-hipster-jacket-jeans-clothes_158538-1626.jpg"},
|
||||
{
|
||||
title: "Design Durable", description: "Une mode qui traverse le temps.", imageSrc: "http://img.b2bpic.net/free-photo/fashionable-sensual-woman-black-leather-jacket-stylish-sunglasses-posing-rocks_273443-5237.jpg"},
|
||||
]}
|
||||
title="Pourquoi Choisir LuxeLeather"
|
||||
description="L'excellence à chaque étape de création."
|
||||
/>
|
||||
</div>
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardFive
|
||||
title="Notre Équipe"
|
||||
description="Les mains expertes derrière nos créations."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
team={[
|
||||
{ id: "1", name: "Marie L.", role: "Artisane Maroquinière", imageSrc: "http://img.b2bpic.net/free-photo/designer-working-3d-model_23-2149371901.jpg" },
|
||||
{ id: "2", name: "Jean D.", role: "Maître Artisan", imageSrc: "http://img.b2bpic.net/free-photo/front-view-people-chatting-classroom_23-2150331688.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "std", price: "Gratuit", name: "Standard", features: [
|
||||
"3-5 jours ouvrés", "Suivi inclus"],
|
||||
buttons: [
|
||||
{
|
||||
text: "Sélectionner"},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "exp", price: "15€", name: "Express", features: [
|
||||
"24-48h", "Emballage cadeau"],
|
||||
buttons: [
|
||||
{
|
||||
text: "Sélectionner"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Services de Livraison"
|
||||
description="Des options pensées pour votre confort."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
title="Témoignages"
|
||||
description="Ce que nos clients disent de nous."
|
||||
showRating={true}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Amira S.", handle: "@amira_s", testimonial: "Une qualité exceptionnelle, mes balghas sont parfaits.", rating: 5 },
|
||||
{ id: "2", name: "Julien M.", handle: "@julien_m", testimonial: "Le sac est encore plus beau en vrai.", rating: 5 }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Amira S.", date: "12/03", title: "Excellence", quote: "Une qualité exceptionnelle, mes balghas sont parfaits.", tag: "Luxe", avatarSrc: "http://img.b2bpic.net/free-photo/designer-working-3d-model_23-2149371901.jpg", imageSrc: "http://img.b2bpic.net/free-photo/fashionable-woman-holding-her-hat-down_23-2148448803.jpg?_wi=2", imageAlt: "elegant customer portrait studio"},
|
||||
{
|
||||
id: "2", name: "Julien M.", date: "10/02", title: "Ravi", quote: "Le sac est encore plus beau en vrai.", tag: "Style", avatarSrc: "http://img.b2bpic.net/free-photo/front-view-people-chatting-classroom_23-2150331688.jpg", imageSrc: "http://img.b2bpic.net/free-photo/pretty-adult-caucasian-woman-blonde-black-pajamas-sits-light-room-with-place-text-weekend-enjoyment-concept_197531-31166.jpg?_wi=2", imageAlt: "elegant customer portrait studio"},
|
||||
{
|
||||
id: "3", name: "Sarah L.", date: "05/01", title: "Service", quote: "Livraison très rapide et emballage soigné.", tag: "Service", avatarSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-taking-break-after-shopping_23-2148660680.jpg", imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-illustration-fashion-designer_23-2151537690.jpg", imageAlt: "elegant customer portrait studio"},
|
||||
{
|
||||
id: "4", name: "Karim B.", date: "20/12", title: "Confort", quote: "La texture du cuir est incroyable.", tag: "Confort", avatarSrc: "http://img.b2bpic.net/free-photo/adult-friends-shopping-clothes-together_23-2148385700.jpg", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-posing-street_1303-29727.jpg?_wi=2", imageAlt: "elegant customer portrait studio"},
|
||||
{
|
||||
id: "5", name: "Elena R.", date: "15/11", title: "Superbe", quote: "Un incontournable de ma garde-robe.", tag: "Mode", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021812.jpg", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-chic-woman-posing_23-2149267441.jpg?_wi=2", imageAlt: "elegant customer portrait studio"},
|
||||
]}
|
||||
title="Ce que disent nos clients"
|
||||
description="L'expérience du luxe au quotidien."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Contactez-nous"
|
||||
description="Vous avez une question sur une commande ?"
|
||||
useInvertedBackground={false}
|
||||
inputs={[
|
||||
{ name: "nom", type: "text", placeholder: "Votre nom", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Votre email", required: true }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "Comment entretenir le cuir ?", content: "Utilisez un baume spécial cuir une fois par mois."},
|
||||
{
|
||||
id: "2", title: "Les retours sont-ils gratuits ?", content: "Oui, sous 14 jours après réception."},
|
||||
{
|
||||
id: "3", title: "Puis-je suivre ma commande ?", content: "Un lien de suivi est envoyé par email."},
|
||||
]}
|
||||
title="Questions Fréquentes"
|
||||
description="Tout savoir sur nos services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
text="Besoin d'une assistance personnalisée pour votre commande ?"
|
||||
buttons={[{ text: "Contactez-nous", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{ label: "Accueil", href: "#hero" },
|
||||
{ label: "Produits", href: "#products" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "CGU", href: "#" },
|
||||
{ label: "Confidentialité", href: "#" },
|
||||
{ label: "Mentions Légales", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="LuxeLeather"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{ title: "Navigation", items: [{ label: "Accueil", href: "#hero" }, { label: "Produits", href: "#products" }] },
|
||||
{ title: "Légal", items: [{ label: "Mentions Légales", href: "#" }, { label: "CGU", href: "#" }] }
|
||||
]}
|
||||
bottomLeftText="© 2025 LuxeLeather"
|
||||
bottomRightText="Tous droits réservés"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user