Merge version_1 into main #2
217
src/app/page.tsx
217
src/app/page.tsx
@@ -33,93 +33,55 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
name: "Services", id: "services"},
|
||||
{
|
||||
name: "À Propos",
|
||||
id: "about",
|
||||
},
|
||||
name: "À Propos", id: "about"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="Salon Élégance"
|
||||
button={{
|
||||
text: "Rendez-vous",
|
||||
href: "#contact",
|
||||
}}
|
||||
text: "Rendez-vous", href: "#contact"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
title="Révélez votre plus belle chevelure"
|
||||
description="Salon de coiffure professionnel offrant une expérience unique et personnalisée pour sublimer votre beauté naturelle."
|
||||
buttons={[
|
||||
{
|
||||
text: "Prendre rendez-vous",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Prendre rendez-vous", href: "#contact"},
|
||||
{
|
||||
text: "Appeler maintenant",
|
||||
href: "tel:0123456789",
|
||||
},
|
||||
text: "Appeler maintenant", href: "tel:0123456789"},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nb29bx&_wi=1"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nb29bx"
|
||||
avatars={[
|
||||
{
|
||||
src: "asset://hero-avatar-1",
|
||||
alt: "Coiffeuse expert 1",
|
||||
},
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hero-avatar-1", alt: "Coiffeuse expert 1"},
|
||||
{
|
||||
src: "asset://hero-avatar-2",
|
||||
alt: "Coiffeuse expert 2",
|
||||
},
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hero-avatar-2", alt: "Coiffeuse expert 2"},
|
||||
{
|
||||
src: "asset://hero-avatar-3",
|
||||
alt: "Coiffeuse expert 3",
|
||||
},
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hero-avatar-3", alt: "Coiffeuse expert 3"},
|
||||
{
|
||||
src: "asset://hero-avatar-4",
|
||||
alt: "Coiffeuse expert 4",
|
||||
},
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hero-avatar-4", alt: "Coiffeuse expert 4"},
|
||||
{
|
||||
src: "asset://hero-avatar-5",
|
||||
alt: "Coiffeuse expert 5",
|
||||
},
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hero-avatar-5", alt: "Coiffeuse expert 5"},
|
||||
]}
|
||||
avatarText="Rejoignez plus de 500 clientes ravies"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "image",
|
||||
src: "asset://marque-1",
|
||||
alt: "Certification Qualité",
|
||||
},
|
||||
type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=marque-1", alt: "Certification Qualité"},
|
||||
{
|
||||
type: "image",
|
||||
src: "asset://marque-2",
|
||||
alt: "Produits Bio",
|
||||
},
|
||||
type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=marque-2", alt: "Produits Bio"},
|
||||
{
|
||||
type: "image",
|
||||
src: "asset://marque-3",
|
||||
alt: "Salon Éco-responsable",
|
||||
},
|
||||
type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=marque-3", alt: "Salon Éco-responsable"},
|
||||
{
|
||||
type: "image",
|
||||
src: "asset://marque-4",
|
||||
alt: "Expertise Coloration",
|
||||
},
|
||||
type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=marque-4", alt: "Expertise Coloration"},
|
||||
{
|
||||
type: "image",
|
||||
src: "asset://marque-5",
|
||||
alt: "Reconnu Professionnel",
|
||||
},
|
||||
type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=marque-5", alt: "Reconnu Professionnel"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -129,14 +91,7 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
names={[
|
||||
"Sarah M.",
|
||||
"Julie D.",
|
||||
"Marie L.",
|
||||
"Camille R.",
|
||||
"Sophie P.",
|
||||
"Léa B.",
|
||||
"Chloé V.",
|
||||
]}
|
||||
"Sarah M.", "Julie D.", "Marie L.", "Camille R.", "Sophie P.", "Léa B.", "Chloé V."]}
|
||||
title="⭐ 5.0 – Plus de 50 clientes satisfaites"
|
||||
description="Découvrez pourquoi nos clientes nous font confiance pour leur transformation capillaire."
|
||||
/>
|
||||
@@ -150,23 +105,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "s1",
|
||||
name: "Coupe femme / homme",
|
||||
price: "à partir de 45€",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9qvijm&_wi=1",
|
||||
},
|
||||
id: "s1", name: "Coupe femme / homme", price: "à partir de 45€", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9qvijm"},
|
||||
{
|
||||
id: "s2",
|
||||
name: "Coloration",
|
||||
price: "à partir de 60€",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=myd6dj&_wi=1",
|
||||
},
|
||||
id: "s2", name: "Coloration", price: "à partir de 60€", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=myd6dj"},
|
||||
{
|
||||
id: "s3",
|
||||
name: "Mise en plis",
|
||||
price: "à partir de 30€",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6xtpo1",
|
||||
},
|
||||
id: "s3", name: "Mise en plis", price: "à partir de 30€", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6xtpo1"},
|
||||
]}
|
||||
title="Nos Services"
|
||||
description="Une gamme complète de soins professionnels pour vos cheveux."
|
||||
@@ -177,39 +120,28 @@ export default function LandingPage() {
|
||||
<FeatureCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{
|
||||
title: "Style moderne",
|
||||
description: "Coupes tendances et sur mesure.",
|
||||
media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dcbxr2",
|
||||
title: "Style moderne", description: "Coupes tendances et sur mesure.", media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dcbxr2", imageAlt: "cheveux avant après transformation"
|
||||
},
|
||||
items: [],
|
||||
reverse: false,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nb29bx&_wi=2",
|
||||
imageAlt: "cheveux avant après transformation",
|
||||
},
|
||||
{
|
||||
title: "Coloration lumineuse",
|
||||
description: "Des reflets éclatants et naturels.",
|
||||
media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cavp5n",
|
||||
title: "Coloration lumineuse", description: "Des reflets éclatants et naturels.", media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9qvijm", imageAlt: "cheveux avant après transformation"
|
||||
},
|
||||
items: [],
|
||||
reverse: true,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9qvijm&_wi=2",
|
||||
imageAlt: "cheveux avant après transformation",
|
||||
},
|
||||
{
|
||||
title: "Soins revitalisants",
|
||||
description: "Redonnez vie à vos pointes.",
|
||||
media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=vhm07p",
|
||||
title: "Soins revitalisants", description: "Redonnez vie à vos pointes.", media: {
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=myd6dj", imageAlt: "cheveux avant après transformation"
|
||||
},
|
||||
items: [],
|
||||
reverse: false,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=myd6dj&_wi=2",
|
||||
imageAlt: "cheveux avant après transformation",
|
||||
},
|
||||
]}
|
||||
title="Des résultats qui parlent d’eux-mêmes"
|
||||
@@ -223,19 +155,13 @@ export default function LandingPage() {
|
||||
title="L'Expérience Élégance"
|
||||
metrics={[
|
||||
{
|
||||
label: "Service personnalisé",
|
||||
value: "100%",
|
||||
icon: CheckCircle,
|
||||
label: "Service personnalisé", value: "100%", icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
label: "Atmosphère zen",
|
||||
value: "Unique",
|
||||
icon: Sparkles,
|
||||
label: "Atmosphère zen", value: "Unique", icon: Sparkles,
|
||||
},
|
||||
{
|
||||
label: "Professionnalisme",
|
||||
value: "Expert",
|
||||
icon: Award,
|
||||
label: "Professionnalisme", value: "Expert", icon: Award,
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
@@ -249,38 +175,19 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "p1",
|
||||
badge: "Basique",
|
||||
price: "45€",
|
||||
subtitle: "La base du style",
|
||||
features: [
|
||||
"Consultation",
|
||||
"Coupe",
|
||||
"Soin rapide",
|
||||
],
|
||||
id: "p1", badge: "Basique", price: "45€", subtitle: "La base du style", features: [
|
||||
"Consultation", "Coupe", "Soin rapide"],
|
||||
buttons: [
|
||||
{
|
||||
text: "Réserver",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Réserver", href: "#contact"},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
badge: "Premium",
|
||||
price: "85€",
|
||||
subtitle: "Expérience complète",
|
||||
features: [
|
||||
"Consultation",
|
||||
"Coloration",
|
||||
"Soin complet",
|
||||
"Mise en plis",
|
||||
],
|
||||
id: "p2", badge: "Premium", price: "85€", subtitle: "Expérience complète", features: [
|
||||
"Consultation", "Coloration", "Soin complet", "Mise en plis"],
|
||||
buttons: [
|
||||
{
|
||||
text: "Réserver",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Réserver", href: "#contact"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
@@ -294,20 +201,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Faut-il un rendez-vous ?",
|
||||
content: "Nous privilégions les rendez-vous mais acceptons les visites selon disponibilité.",
|
||||
},
|
||||
id: "f1", title: "Faut-il un rendez-vous ?", content: "Nous privilégions les rendez-vous mais acceptons les visites selon disponibilité."},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Quels produits utilisez-vous ?",
|
||||
content: "Nous utilisons uniquement des produits professionnels naturels.",
|
||||
},
|
||||
id: "f2", title: "Quels produits utilisez-vous ?", content: "Nous utilisons uniquement des produits professionnels naturels."},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Proposez-vous des forfaits ?",
|
||||
content: "Oui, demandez nos forfaits mariage ou balayage lors de votre visite.",
|
||||
},
|
||||
id: "f3", title: "Proposez-vous des forfaits ?", content: "Oui, demandez nos forfaits mariage ou balayage lors de votre visite."},
|
||||
]}
|
||||
sideTitle="Questions fréquentes"
|
||||
sideDescription="Besoin d'informations ?"
|
||||
@@ -319,18 +217,13 @@ export default function LandingPage() {
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
variant: "sparkles-gradient"}}
|
||||
text="Prenez rendez-vous dès aujourd’hui au 01 23 45 67 89 ou visitez-nous au 12 Avenue des Coiffeurs."
|
||||
buttons={[
|
||||
{
|
||||
text: "Appeler maintenant",
|
||||
href: "tel:0123456789",
|
||||
},
|
||||
text: "Appeler maintenant", href: "tel:0123456789"},
|
||||
{
|
||||
text: "Réserver en ligne",
|
||||
href: "https://book-online.com",
|
||||
},
|
||||
text: "Réserver en ligne", href: "https://book-online.com"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -340,29 +233,19 @@ export default function LandingPage() {
|
||||
logoText="Salon Élégance"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
title: "Navigation", items: [
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
label: "Services", href: "#services"},
|
||||
{
|
||||
label: "À Propos",
|
||||
href: "#about",
|
||||
},
|
||||
label: "À Propos", href: "#about"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
items: [
|
||||
title: "Contact", items: [
|
||||
{
|
||||
label: "01 23 45 67 89",
|
||||
href: "tel:0123456789",
|
||||
},
|
||||
label: "01 23 45 67 89", href: "tel:0123456789"},
|
||||
{
|
||||
label: "12 Avenue des Coiffeurs",
|
||||
href: "#",
|
||||
},
|
||||
label: "12 Avenue des Coiffeurs", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user