423 lines
14 KiB
TypeScript
423 lines
14 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||
import { Award, CheckCircle, Shield } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="elastic-effect"
|
||
defaultTextAnimation="background-highlight"
|
||
borderRadius="soft"
|
||
contentWidth="mediumLarge"
|
||
sizing="largeSizeMediumTitles"
|
||
background="blurBottom"
|
||
cardStyle="glass-elevated"
|
||
primaryButtonStyle="radial-glow"
|
||
secondaryButtonStyle="solid"
|
||
headingFontWeight="semibold"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleFullscreen
|
||
navItems={[
|
||
{
|
||
name: "Accueil",
|
||
id: "hero",
|
||
},
|
||
{
|
||
name: "Services",
|
||
id: "services",
|
||
},
|
||
{
|
||
name: "Avant / Après",
|
||
id: "before-after",
|
||
},
|
||
{
|
||
name: "Avis",
|
||
id: "reviews",
|
||
},
|
||
{
|
||
name: "L’Atelier",
|
||
id: "about",
|
||
},
|
||
{
|
||
name: "Contact",
|
||
id: "contact",
|
||
},
|
||
]}
|
||
brandName="Les 2 Lutins"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroOverlay
|
||
title="La haute cordonnerie parisienne pour vos plus beaux souliers"
|
||
description="À deux pas de la Bourse, Les 2 Lutins restaurent, réparent et entretiennent vos chaussures avec le savoir-faire rare d’artisans passionnés."
|
||
buttons={[
|
||
{
|
||
text: "Demander un diagnostic",
|
||
href: "#contact",
|
||
},
|
||
{
|
||
text: "Appeler l'atelier",
|
||
href: "tel:+33140390172",
|
||
},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/making-clothes-tailor-sitting-table-working-sewing-machine-sewing-workshop_613910-5281.jpg?_wi=1"
|
||
avatars={[
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/bootmaker-workshop-making-shoes_171337-12279.jpg",
|
||
alt: "Bootmaker in workshop making shoes",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/diligent-cobbler-is-working-shoe-sole-using-special-tool-his-dark-workplace_613910-12940.jpg",
|
||
alt: "Diligent cobbler is working on shoe sole using special tool at his dark workplace.",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/man-studio-creates-leather-ware_1157-33209.jpg",
|
||
alt: "Man in a studio creates leather ware",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/man-studio-creates-leather-ware_1157-33216.jpg",
|
||
alt: "Man in a studio creates leather ware",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/small-business-manager-his-workshop_23-2149094578.jpg",
|
||
alt: "Small business manager in his workshop",
|
||
},
|
||
]}
|
||
avatarText="Plus de 5000 clients satisfaits"
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<AboutMetric
|
||
useInvertedBackground={false}
|
||
title="L’art de sauver vos plus beaux souliers"
|
||
metrics={[
|
||
{
|
||
icon: Award,
|
||
label: "Années d'expertise",
|
||
value: "20+",
|
||
},
|
||
{
|
||
icon: CheckCircle,
|
||
label: "Satisfaction client",
|
||
value: "4.9/5",
|
||
},
|
||
{
|
||
icon: Shield,
|
||
label: "Réparations réussies",
|
||
value: "5000+",
|
||
},
|
||
]}
|
||
metricsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="services" data-section="services">
|
||
<FeatureCardTwentyFour
|
||
animationType="slide-up"
|
||
textboxLayout="split"
|
||
useInvertedBackground={true}
|
||
features={[
|
||
{
|
||
id: "s1",
|
||
title: "Réparation",
|
||
author: "Atelier",
|
||
description: "Talons, coutures, glissoirs, accrocs et ajustements complets pour prolonger la vie de vos chaussures.",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-engraving-art-tools_23-2149186759.jpg?_wi=1",
|
||
},
|
||
{
|
||
id: "s2",
|
||
title: "Ressemelage",
|
||
author: "Atelier",
|
||
description: "Pose de patins, fers, semelles et protections adaptées à votre marche et à la structure du soulier.",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/wooden-feet-shape-arrangement_23-2149007459.jpg",
|
||
},
|
||
{
|
||
id: "s3",
|
||
title: "Restauration",
|
||
author: "Atelier",
|
||
description: "Soin complet du cuir : nettoyage, cirage, recoloration et rénovation profonde pour une seconde naissance.",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-hairstylist-cleaning-chair_23-2148506335.jpg",
|
||
},
|
||
]}
|
||
title="Services d'excellence"
|
||
description="Une approche sur-mesure pour chaque paire, respectant la noblesse des matériaux et l'histoire de vos souliers."
|
||
/>
|
||
</div>
|
||
|
||
<div id="before-after" data-section="before-after">
|
||
<ProductCardThree
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="uniform-all-items-equal"
|
||
useInvertedBackground={false}
|
||
products={[
|
||
{
|
||
id: "ba-1",
|
||
name: "Restauration Bottines",
|
||
price: "Expertise",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/assortment-antiques-market-objects_23-2148950924.jpg",
|
||
},
|
||
{
|
||
id: "ba-2",
|
||
name: "Mocassins Weston",
|
||
price: "Expertise",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/concentrated-shoemaker-workshop-making-shoes_171337-12271.jpg",
|
||
},
|
||
{
|
||
id: "ba-3",
|
||
name: "Richelieus Patinés",
|
||
price: "Expertise",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-leather-shoe_53876-33675.jpg",
|
||
},
|
||
{
|
||
id: "ba-4",
|
||
name: "Bottes Vintage",
|
||
price: "Expertise",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/shoes_1303-3611.jpg",
|
||
},
|
||
{
|
||
id: "ba-5",
|
||
name: "Chaussures Luxe",
|
||
price: "Expertise",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/shoemaker-workshop-making-shoes_171337-12281.jpg",
|
||
},
|
||
{
|
||
id: "ba-6",
|
||
name: "Talons Travaux",
|
||
price: "Expertise",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/men-s-shoes-elegant-clothes-holiday-theme-wedding_78826-2242.jpg",
|
||
},
|
||
]}
|
||
title="Une seconde naissance pour vos cuirs"
|
||
description="Le témoignage visuel d'un savoir-faire qui transforme l'usure en élégance retrouvée."
|
||
/>
|
||
</div>
|
||
|
||
<div id="reviews" data-section="reviews">
|
||
<TestimonialCardFive
|
||
textboxLayout="split"
|
||
useInvertedBackground={true}
|
||
testimonials={[
|
||
{
|
||
id: "1",
|
||
name: "Marc L.",
|
||
date: "12/05/2023",
|
||
title: "Client fidèle",
|
||
quote: "Travail d'orfèvre sur mes Weston.",
|
||
tag: "Top",
|
||
avatarSrc: "http://img.b2bpic.net/free-photo/high-angle-modern-woman-reading-magazine_23-2148415774.jpg",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/friends-having-fun-shopping-together_23-2149273762.jpg",
|
||
},
|
||
{
|
||
id: "2",
|
||
name: "Sophie P.",
|
||
date: "15/06/2023",
|
||
title: "Passionnée",
|
||
quote: "Le meilleur cordonnier de Paris, sans aucun doute.",
|
||
tag: "Excellent",
|
||
avatarSrc: "http://img.b2bpic.net/free-photo/young-man-shopping-menswear-shop_1303-19868.jpg",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-choosing-shoes-shop_1303-19725.jpg",
|
||
},
|
||
{
|
||
id: "3",
|
||
name: "Jean D.",
|
||
date: "20/07/2023",
|
||
title: "Collectionneur",
|
||
quote: "Des conseils honnêtes qui protègent mon investissement.",
|
||
tag: "Expert",
|
||
avatarSrc: "http://img.b2bpic.net/free-photo/crop-couple-using-smartphone-laptop_23-2147826844.jpg",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-showing-her-shoes_23-2148303833.jpg",
|
||
},
|
||
{
|
||
id: "4",
|
||
name: "Claire V.",
|
||
date: "05/08/2023",
|
||
title: "Cliente Luxe",
|
||
quote: "Mes bottes sont revenues comme neuves.",
|
||
tag: "Impeccable",
|
||
avatarSrc: "http://img.b2bpic.net/free-photo/man-choosing-foot-wear-mens-store_1303-30856.jpg",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/groom-s-classy-shoes-lie-soft-armchair_8353-8463.jpg",
|
||
},
|
||
{
|
||
id: "5",
|
||
name: "Thomas G.",
|
||
date: "22/09/2023",
|
||
title: "Client habitué",
|
||
quote: "Un vrai artisan passionné qui explique tout.",
|
||
tag: "Super",
|
||
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-man-shopping-buying-consumer-goods_23-2151669769.jpg",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/creative-tailor-working-workshop-new-cloth_23-2148970719.jpg",
|
||
},
|
||
]}
|
||
title="La confiance des amoureux du cuir"
|
||
description="Ils nous confient leurs plus belles pièces en toute sérénité."
|
||
/>
|
||
</div>
|
||
|
||
<div id="authority" data-section="authority">
|
||
<PricingCardNine
|
||
animationType="slide-up"
|
||
textboxLayout="split"
|
||
useInvertedBackground={false}
|
||
plans={[
|
||
{
|
||
id: "a1",
|
||
title: "Savoir-faire",
|
||
price: "Artisan",
|
||
period: "Expert",
|
||
features: [
|
||
"Gestes précis",
|
||
"Connaissance cuir",
|
||
"Respect montage",
|
||
],
|
||
button: {
|
||
text: "En savoir plus",
|
||
},
|
||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-engraving-art-tools_23-2149186780.jpg",
|
||
imageAlt: "Close up on engraving art tools",
|
||
},
|
||
{
|
||
id: "a2",
|
||
title: "Transparence",
|
||
price: "Honnete",
|
||
period: "Expert",
|
||
features: [
|
||
"Diagnostic juste",
|
||
"Conseils honnêtes",
|
||
"Service durable",
|
||
],
|
||
button: {
|
||
text: "En savoir plus",
|
||
},
|
||
imageSrc: "http://img.b2bpic.net/free-photo/making-clothes-tailor-sitting-table-working-sewing-machine-sewing-workshop_613910-5281.jpg?_wi=2",
|
||
imageAlt: "Close up on engraving art tools",
|
||
},
|
||
{
|
||
id: "a3",
|
||
title: "Accueil",
|
||
price: "Humain",
|
||
period: "Expert",
|
||
features: [
|
||
"Bienveillance",
|
||
"Pédagogie",
|
||
"Passion métier",
|
||
],
|
||
button: {
|
||
text: "En savoir plus",
|
||
},
|
||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-engraving-art-tools_23-2149186759.jpg?_wi=2",
|
||
imageAlt: "Close up on engraving art tools",
|
||
},
|
||
]}
|
||
title="Notre approche de l'artisanat"
|
||
description="Nous évaluons chaque paire selon sa valeur réelle et sentimentale."
|
||
/>
|
||
</div>
|
||
|
||
<div id="faq" data-section="faq">
|
||
<FaqDouble
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
faqs={[
|
||
{
|
||
id: "f1",
|
||
title: "Quelles marques réparez-vous ?",
|
||
content: "Nous travaillons sur toutes les belles maisons : Weston, Berluti, Church’s, Alden, et bien d'autres.",
|
||
},
|
||
{
|
||
id: "f2",
|
||
title: "Proposez-vous des réparations urgentes ?",
|
||
content: "Oui, pour les petits ajustements, certaines réparations peuvent être effectuées rapidement sur place.",
|
||
},
|
||
{
|
||
id: "f3",
|
||
title: "Comment demander un diagnostic ?",
|
||
content: "Vous pouvez passer à l'atelier rue Saint-Marc ou nous contacter via notre formulaire en ligne.",
|
||
},
|
||
{
|
||
id: "f4",
|
||
title: "Est-ce que vous poussez à la consommation ?",
|
||
content: "Absolument pas. Si une réparation n'est pas nécessaire, nous vous le dirons honnêtement.",
|
||
},
|
||
]}
|
||
title="Questions fréquentes"
|
||
description="Quelques réponses pour mieux comprendre notre atelier."
|
||
faqsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactCenter
|
||
useInvertedBackground={false}
|
||
background={{
|
||
variant: "gradient-bars",
|
||
}}
|
||
tag="Contact"
|
||
title="Demander un diagnostic à l'atelier"
|
||
description="14 Rue Saint-Marc, 75002 Paris | 01 40 39 01 72"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterSimple
|
||
columns={[
|
||
{
|
||
title: "Navigation",
|
||
items: [
|
||
{
|
||
label: "Accueil",
|
||
href: "#hero",
|
||
},
|
||
{
|
||
label: "Services",
|
||
href: "#services",
|
||
},
|
||
{
|
||
label: "Atelier",
|
||
href: "#about",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "Informations",
|
||
items: [
|
||
{
|
||
label: "Contact",
|
||
href: "#contact",
|
||
},
|
||
{
|
||
label: "Mentions Légales",
|
||
href: "#",
|
||
},
|
||
{
|
||
label: "Confidentialité",
|
||
href: "#",
|
||
},
|
||
],
|
||
},
|
||
]}
|
||
bottomLeftText="© 2023 Les 2 Lutins. Tous droits réservés."
|
||
bottomRightText="14 Rue Saint-Marc, Paris 2e"
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|