Update src/app/page.tsx
This commit is contained in:
334
src/app/page.tsx
334
src/app/page.tsx
@@ -32,160 +32,63 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Accueil",
|
||||
id: "#hero",
|
||||
},
|
||||
{
|
||||
name: "Offres",
|
||||
id: "#offres",
|
||||
},
|
||||
{
|
||||
name: "Exemples",
|
||||
id: "#exemples",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
{ name: "Accueil", id: "#hero" },
|
||||
{ name: "Offres", id: "#offres" },
|
||||
{ name: "Exemples", id: "#exemples" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="VELA"
|
||||
button={{
|
||||
text: "Audit gratuit",
|
||||
href: "#contact",
|
||||
}}
|
||||
button={{ text: "Audit gratuit", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Transformez votre salon en référence premium locale."
|
||||
description="VELA accompagne les salons de coiffure modernes avec des sites haut de gamme, une réservation intelligente et une image digitale qui attire les bons clients — en pilote automatique."
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pink-orchids-vase-windowsill-with-white-chairs_181624-10971.jpg",
|
||||
imageAlt: "luxury hair salon interior",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/empty-therapist-office-with-modern-furniture-decorations_482257-108008.jpg",
|
||||
imageAlt: "Empty therapist office with modern furniture and decorations",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/world-theatre-day-celebration_23-2151185639.jpg",
|
||||
imageAlt: "World theatre day celebration",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-end-professional-cabinet-used-psychotherapy-meetings_482257-117710.jpg",
|
||||
imageAlt: "High end professional cabinet used for psychotherapy meetings",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/interior-latino-hair-salon_23-2150555185.jpg",
|
||||
imageAlt: "Interior of latino hair salon",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/pink-orchids-vase-windowsill-with-white-chairs_181624-10971.jpg", imageAlt: "luxury hair salon interior" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/empty-therapist-office-with-modern-furniture-decorations_482257-108008.jpg", imageAlt: "Empty therapist office with modern furniture and decorations" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/world-theatre-day-celebration_23-2151185639.jpg", imageAlt: "World theatre day celebration" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/high-end-professional-cabinet-used-psychotherapy-meetings_482257-117710.jpg", imageAlt: "High end professional cabinet used for psychotherapy meetings" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/interior-latino-hair-salon_23-2150555185.jpg", imageAlt: "Interior of latino hair salon" }
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/skies-snowboard-lounge-area_482257-76730.jpg",
|
||||
imageAlt: "luxury hair salon interior",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/anime-style-beauty-salon-with-cosmetology-equipment_23-2151500998.jpg",
|
||||
imageAlt: "Anime style beauty salon with cosmetology equipment",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-leather-barber-shop-chair_23-2148242807.jpg",
|
||||
imageAlt: "Side view of leather barber shop chair",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/lodge-wintertime-with-ski-gear_482257-76632.jpg",
|
||||
imageAlt: "Lodge in wintertime with ski gear",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barbershop-washbasin-with-professional-chairs_23-2148298338.jpg",
|
||||
imageAlt: "Barbershop washbasin with professional chairs",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/skies-snowboard-lounge-area_482257-76730.jpg", imageAlt: "luxury hair salon interior" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/anime-style-beauty-salon-with-cosmetology-equipment_23-2151500998.jpg", imageAlt: "Anime style beauty salon with cosmetology equipment" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/side-view-leather-barber-shop-chair_23-2148242807.jpg", imageAlt: "Side view of leather barber shop chair" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/lodge-wintertime-with-ski-gear_482257-76632.jpg", imageAlt: "Lodge in wintertime with ski gear" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/barbershop-washbasin-with-professional-chairs_23-2148298338.jpg", imageAlt: "Barbershop washbasin with professional chairs" }
|
||||
]}
|
||||
tag="Agence digitale pour salons de coiffure"
|
||||
buttons={[
|
||||
{
|
||||
text: "Demander un audit gratuit",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "Voir les offres",
|
||||
href: "#offres",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Demander un audit gratuit", href: "#contact" }, { text: "Voir les offres", href: "#offres" }]}
|
||||
tagIcon={Sparkles}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/empty-therapist-office-with-modern-furniture-decorations_482257-108008.jpg",
|
||||
alt: "Client 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/world-theatre-day-celebration_23-2151185639.jpg",
|
||||
alt: "Client 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/high-end-professional-cabinet-used-psychotherapy-meetings_482257-117710.jpg",
|
||||
alt: "Client 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/interior-latino-hair-salon_23-2150555185.jpg",
|
||||
alt: "Client 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/anime-style-beauty-salon-with-cosmetology-equipment_23-2151500998.jpg",
|
||||
alt: "Client 5",
|
||||
},
|
||||
{ src: "http://img.b2bpic.net/free-photo/empty-therapist-office-with-modern-furniture-decorations_482257-108008.jpg", alt: "Client 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/world-theatre-day-celebration_23-2151185639.jpg", alt: "Client 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/high-end-professional-cabinet-used-psychotherapy-meetings_482257-117710.jpg", alt: "Client 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/interior-latino-hair-salon_23-2150555185.jpg", alt: "Client 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/anime-style-beauty-salon-with-cosmetology-equipment_23-2151500998.jpg", alt: "Client 5" }
|
||||
]}
|
||||
avatarText="Rejoignez 50+ salons partenaires"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "SEO Local",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Réservation 24/7",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Design Premium",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Croissance",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Image de Marque",
|
||||
},
|
||||
{ type: "text", text: "SEO Local" },
|
||||
{ type: "text", text: "Réservation 24/7" },
|
||||
{ type: "text", text: "Design Premium" },
|
||||
{ type: "text", text: "Croissance" },
|
||||
{ type: "text", text: "Image de Marque" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="problemes" data-section="problemes">
|
||||
<FeatureCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"Trop d'appels pendant vos prestations",
|
||||
"Des réservations qui vous échappent",
|
||||
"Une image digitale dépassée",
|
||||
],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Peu de visibilité sur Google",
|
||||
"Dépendance à Instagram",
|
||||
"Délais de réponse trop longs",
|
||||
],
|
||||
}}
|
||||
negativeCard={{ items: ["Trop d'appels pendant vos prestations", "Des réservations qui vous échappent", "Une image digitale dépassée"] }}
|
||||
positiveCard={{ items: ["Peu de visibilité sur Google", "Dépendance à Instagram", "Délais de réponse trop longs"] }}
|
||||
title="Votre image digitale influence la qualité de votre clientèle."
|
||||
description="Un site vieillissant ou une mauvaise visibilité vous coûtent des opportunités chaque jour."
|
||||
/>
|
||||
@@ -196,21 +99,9 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
title="D'un salon local à une référence digitale premium"
|
||||
metrics={[
|
||||
{
|
||||
icon: Check,
|
||||
label: "Avant",
|
||||
value: "Image vieillissante",
|
||||
},
|
||||
{
|
||||
icon: Star,
|
||||
label: "Après",
|
||||
value: "Référence locale",
|
||||
},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
label: "Impact",
|
||||
value: "Planning optimisé",
|
||||
},
|
||||
{ icon: Check, label: "Avant", value: "Image vieillissante" },
|
||||
{ icon: Star, label: "Après", value: "Référence locale" },
|
||||
{ icon: TrendingUp, label: "Impact", value: "Planning optimisé" }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -222,39 +113,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "p1",
|
||||
badge: "Base",
|
||||
price: "590€",
|
||||
subtitle: "Présence Moderne",
|
||||
features: [
|
||||
"Site premium sur-mesure",
|
||||
"SEO local",
|
||||
"Maintenance incluse",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
badge: "Recommandé",
|
||||
price: "1 490€",
|
||||
subtitle: "Réservation Auto",
|
||||
features: [
|
||||
"Tout du pack Base",
|
||||
"Booking 24/7",
|
||||
"Confirmation SMS",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
badge: "Premium",
|
||||
price: "3 490€",
|
||||
subtitle: "Salon Premium Digital",
|
||||
features: [
|
||||
"Branding complet",
|
||||
"Campagnes pub",
|
||||
"Suivi VIP 4h",
|
||||
],
|
||||
},
|
||||
{ id: "p1", badge: "Base", price: "590€", subtitle: "Présence Moderne", features: ["Site premium sur-mesure", "SEO local", "Maintenance incluse"] },
|
||||
{ id: "p2", badge: "Recommandé", price: "1 490€", subtitle: "Réservation Auto", features: ["Tout du pack Base", "Booking 24/7", "Confirmation SMS"] },
|
||||
{ id: "p3", badge: "Premium", price: "3 490€", subtitle: "Salon Premium Digital", features: ["Branding complet", "Campagnes pub", "Suivi VIP 4h"] }
|
||||
]}
|
||||
title="Une offre pensée pour chaque étape de votre croissance."
|
||||
description="Choisissez l'offre adaptée à votre situation actuelle."
|
||||
@@ -267,26 +128,10 @@ export default function LandingPage() {
|
||||
title="Le secteur en chiffres"
|
||||
tag="Pourquoi agir maintenant"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "76%",
|
||||
description: "consommateurs consultent le site web avant de visiter.",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "40%",
|
||||
description: "appels téléphoniques restent sans réponse.",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "3×",
|
||||
description: "plus de réservations avec prise de RDV en ligne.",
|
||||
},
|
||||
{
|
||||
id: "m4",
|
||||
value: "68%",
|
||||
description: "clients choisissent via la présence en ligne.",
|
||||
},
|
||||
{ id: "m1", value: "76%", description: "consommateurs consultent le site web avant de visiter." },
|
||||
{ id: "m2", value: "40%", description: "appels téléphoniques restent sans réponse." },
|
||||
{ id: "m3", value: "3×", description: "plus de réservations avec prise de RDV en ligne." },
|
||||
{ id: "m4", value: "68%", description: "clients choisissent via la présence en ligne." }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -299,24 +144,9 @@ export default function LandingPage() {
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "c1",
|
||||
name: "Maison Élora",
|
||||
price: "Premium",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-woman-customer-towels_23-2147737015.jpg",
|
||||
},
|
||||
{
|
||||
id: "c2",
|
||||
name: "Noir Studio",
|
||||
price: "Branding",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-stylish-white-suit-sits-white-cube-gallery_8353-10744.jpg",
|
||||
},
|
||||
{
|
||||
id: "c3",
|
||||
name: "Atelier Coiffure",
|
||||
price: "Vitrine",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cozy-composition-with-mirror-decorative-details-bright-room-interior_169016-28687.jpg",
|
||||
},
|
||||
{ id: "c1", name: "Maison Élora", price: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/barber-woman-customer-towels_23-2147737015.jpg" },
|
||||
{ id: "c2", name: "Noir Studio", price: "Branding", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-stylish-white-suit-sits-white-cube-gallery_8353-10744.jpg" },
|
||||
{ id: "c3", name: "Atelier Coiffure", price: "Vitrine", imageSrc: "http://img.b2bpic.net/free-photo/cozy-composition-with-mirror-decorative-details-bright-room-interior_169016-28687.jpg" }
|
||||
]}
|
||||
title="Réalisations"
|
||||
description="Exemples de qualité pour nos clients salons."
|
||||
@@ -328,18 +158,8 @@ export default function LandingPage() {
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"Audit gratuit",
|
||||
"Stratégie",
|
||||
],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Mise en ligne",
|
||||
"Optimisation continue",
|
||||
],
|
||||
}}
|
||||
negativeCard={{ items: ["Audit gratuit", "Stratégie"] }}
|
||||
positiveCard={{ items: ["Mise en ligne", "Optimisation continue"] }}
|
||||
title="Un processus simple"
|
||||
description="Structure claire, livraison rapide."
|
||||
/>
|
||||
@@ -350,21 +170,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Temps de mise en ligne ?",
|
||||
content: "10 à 21 jours.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Engagement ?",
|
||||
content: "Aucun, abonnement libre.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Gestion outils ?",
|
||||
content: "Nous gérons tout.",
|
||||
},
|
||||
{ id: "q1", title: "Temps de mise en ligne ?", content: "10 à 21 jours." },
|
||||
{ id: "q2", title: "Engagement ?", content: "Aucun, abonnement libre." },
|
||||
{ id: "q3", title: "Gestion outils ?", content: "Nous gérons tout." }
|
||||
]}
|
||||
title="Questions fréquentes"
|
||||
description="Tout ce que vous devez savoir."
|
||||
@@ -375,60 +183,26 @@ export default function LandingPage() {
|
||||
<div id="cta-final" data-section="cta-final">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "rotated-rays-static-grid",
|
||||
}}
|
||||
background={{ variant: "rotated-rays-static-grid" }}
|
||||
text="Demandez votre audit gratuit de 30 min."
|
||||
buttons={[
|
||||
{
|
||||
text: "Démarrer mon audit",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Démarrer mon audit", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
text="Contactez-nous pour transformer votre salon."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact par email",
|
||||
href: "mailto:contact@vela-agency.fr",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Contact par email", href: "mailto:contact@vela-agency.fr" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{
|
||||
label: "Accueil",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
label: "Offres",
|
||||
href: "#offres",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Légal",
|
||||
items: [
|
||||
{
|
||||
label: "Mentions légales",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Navigation", items: [{ label: "Accueil", href: "#hero" }, { label: "Offres", href: "#offres" }] },
|
||||
{ title: "Légal", items: [{ label: "Mentions légales", href: "#" }] }
|
||||
]}
|
||||
logoText="VELA Agency"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user