Update src/app/page.tsx
This commit is contained in:
372
src/app/page.tsx
372
src/app/page.tsx
@@ -29,262 +29,140 @@ export default function LandingPage() {
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Accueil",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Comment ça marche",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Avis",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="StyleAI"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Accueil", id: "hero" },
|
||||
{ name: "Comment ça marche", id: "features" },
|
||||
{ name: "Avis", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="StyleAI"
|
||||
button={{ text: "Contact", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
logoText="StyleAI Critique"
|
||||
description="Obtenez une analyse instantanée de votre tenue par notre IA styliste. Recevez des conseils personnalisés pour chaque occasion."
|
||||
buttons={[
|
||||
{
|
||||
text: "Commencer",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "En savoir plus",
|
||||
href: "#features",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/side-view-rich-woman-sitting-couch_23-2149722602.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{ variant: "plain" }}
|
||||
logoText="StyleAI Critique"
|
||||
description="Obtenez une analyse instantanée de votre tenue par notre IA styliste. Recevez des conseils personnalisés pour chaque occasion."
|
||||
buttons={[{ text: "Commencer", href: "#contact" }, { text: "En savoir plus", href: "#features" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/side-view-rich-woman-sitting-couch_23-2149722602.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Une expertise de mode à portée de main"
|
||||
metrics={[
|
||||
{
|
||||
label: "Tenues analysées",
|
||||
value: "10k+",
|
||||
icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
label: "Précision IA",
|
||||
value: "98%",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
label: "Conseils donnés",
|
||||
value: "50k+",
|
||||
icon: Zap,
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Une expertise de mode à portée de main"
|
||||
metrics={[
|
||||
{ label: "Tenues analysées", value: "10k+", icon: CheckCircle },
|
||||
{ label: "Précision IA", value: "98%", icon: Award },
|
||||
{ label: "Conseils donnés", value: "50k+", icon: Zap }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSixteen
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"Erreurs de style classiques",
|
||||
"Manque de confiance avant un rdv",
|
||||
"Tenues inadaptées au contexte",
|
||||
],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Conseils instantanés",
|
||||
"Analyse contextuelle précise",
|
||||
"Amélioration concrète du style",
|
||||
],
|
||||
}}
|
||||
title="Pourquoi nous choisir ?"
|
||||
description="Notre IA transforme votre garde-robe en un terrain de jeu professionnel."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSixteen
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{ items: ["Erreurs de style classiques", "Manque de confiance avant un rdv", "Tenues inadaptées au contexte"] }}
|
||||
positiveCard={{ items: ["Conseils instantanés", "Analyse contextuelle précise", "Amélioration concrète du style"] }}
|
||||
title="Pourquoi nous choisir ?"
|
||||
description="Notre IA transforme votre garde-robe en un terrain de jeu professionnel."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Analyse Rapide",
|
||||
price: "Gratuit",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-pregnant-woman-work_23-2149292814.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Rendez-vous Pro",
|
||||
price: "19€",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elegant-woman-pink-jacket-spend-time-cafe_1157-31477.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Pack Mariage",
|
||||
price: "49€",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/online-shopping-concept_23-2151896857.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Garde-robe complète",
|
||||
price: "99€",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/online-shopping-concept_23-2151896865.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Consulting Premium",
|
||||
price: "149€",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149229745.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Abonnement Annuel",
|
||||
price: "299€",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-hands-holding-smartphone_23-2149636262.jpg",
|
||||
},
|
||||
]}
|
||||
title="Nos services"
|
||||
description="Des forfaits conçus pour révéler votre potentiel stylistique."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", name: "Analyse Rapide", price: "Gratuit", imageSrc: "http://img.b2bpic.net/free-photo/young-pregnant-woman-work_23-2149292814.jpg" },
|
||||
{ id: "2", name: "Rendez-vous Pro", price: "19€", imageSrc: "http://img.b2bpic.net/free-photo/elegant-woman-pink-jacket-spend-time-cafe_1157-31477.jpg" },
|
||||
{ id: "3", name: "Pack Mariage", price: "49€", imageSrc: "http://img.b2bpic.net/free-photo/online-shopping-concept_23-2151896857.jpg" },
|
||||
{ id: "4", name: "Garde-robe complète", price: "99€", imageSrc: "http://img.b2bpic.net/free-photo/online-shopping-concept_23-2151896865.jpg" },
|
||||
{ id: "5", name: "Consulting Premium", price: "149€", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149229745.jpg" },
|
||||
{ id: "6", name: "Abonnement Annuel", price: "299€", imageSrc: "http://img.b2bpic.net/free-photo/top-view-hands-holding-smartphone_23-2149636262.jpg" }
|
||||
]}
|
||||
title="Nos services"
|
||||
description="Des forfaits conçus pour révéler votre potentiel stylistique."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
textboxLayout="split"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "2x",
|
||||
description: "Plus de compliments",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "15 min",
|
||||
description: "Gain de temps par matin",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "100%",
|
||||
description: "Confiance renforcée",
|
||||
},
|
||||
]}
|
||||
title="Impact mesurable"
|
||||
description="Voyez comment notre IA améliore votre quotidien."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
textboxLayout="split"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
animationType="depth-3d"
|
||||
metrics={[
|
||||
{ id: "m1", value: "2x", description: "Plus de compliments" },
|
||||
{ id: "m2", value: "15 min", description: "Gain de temps par matin" },
|
||||
{ id: "m3", value: "100%", description: "Confiance renforcée" }
|
||||
]}
|
||||
title="Impact mesurable"
|
||||
description="Voyez comment notre IA améliore votre quotidien."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="L'analyse a été bluffante. Grâce à StyleAI, j'ai décroché mon job après avoir ajusté ma tenue d'entretien."
|
||||
rating={5}
|
||||
author="Sophie Martin"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-4106.jpg",
|
||||
alt: "Sophie",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/studio-portrait-bearded-male-dressed-blue-shirt-white-jacket-bow-tie-grey-background_613910-177.jpg",
|
||||
alt: "Marc",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiley-woman-with-penny-board_23-2148950658.jpg",
|
||||
alt: "Julie",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/front-view-woman-with-albinism-posing-studio_23-2150535704.jpg",
|
||||
alt: "Thomas",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/lovable-confident-blond-woman-with-long-hairstyle-posing-street-modern-cafe-fashionable-look_273443-1294.jpg",
|
||||
alt: "Sarah",
|
||||
},
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="L'analyse a été bluffante. Grâce à StyleAI, j'ai décroché mon job après avoir ajusté ma tenue d'entretien."
|
||||
rating={5}
|
||||
author="Sophie Martin"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-4106.jpg", alt: "Sophie" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/studio-portrait-bearded-male-dressed-blue-shirt-white-jacket-bow-tie-grey-background_613910-177.jpg", alt: "Marc" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/smiley-woman-with-penny-board_23-2148950658.jpg", alt: "Julie" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/front-view-woman-with-albinism-posing-studio_23-2150535704.jpg", alt: "Thomas" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/lovable-confident-blond-woman-with-long-hairstyle-posing-street-modern-cafe-fashionable-look_273443-1294.jpg", alt: "Sarah" }
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Comment ça marche ?",
|
||||
content: "Photographiez votre tenue et notre IA l'analyse instantanément.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Est-ce gratuit ?",
|
||||
content: "La première analyse est offerte pour vous tester.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Quels contextes ?",
|
||||
content: "Nous couvrons entretiens, rendez-vous, soirées et quotidien.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Questions fréquentes"
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Comment ça marche ?", content: "Photographiez votre tenue et notre IA l'analyse instantanément." },
|
||||
{ id: "q2", title: "Est-ce gratuit ?", content: "La première analyse est offerte pour vous tester." },
|
||||
{ id: "q3", title: "Quels contextes ?", content: "Nous couvrons entretiens, rendez-vous, soirées et quotidien." }
|
||||
]}
|
||||
sideTitle="Questions fréquentes"
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Contact"
|
||||
title="Prêt à transformer votre look ?"
|
||||
description="Entrez votre email pour recevoir votre première analyse gratuite."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2150543691.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Contact"
|
||||
title="Prêt à transformer votre look ?"
|
||||
description="Entrez votre email pour recevoir votre première analyse gratuite."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2150543691.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="StyleAI"
|
||||
leftLink={{
|
||||
text: "Conditions d'utilisation",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Politique de confidentialité",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="StyleAI"
|
||||
leftLink={{ text: "Conditions d'utilisation", href: "#" }}
|
||||
rightLink={{ text: "Politique de confidentialité", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user