Update src/app/page.tsx
This commit is contained in:
344
src/app/page.tsx
344
src/app/page.tsx
@@ -26,236 +26,134 @@ export default function LandingPage() {
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Über Uns",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Leistungen",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Kontakt",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Le Salon"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Über Uns", id: "about" },
|
||||
{ name: "Leistungen", id: "services" },
|
||||
{ name: "Kontakt", id: "contact" },
|
||||
]}
|
||||
brandName="Le Salon"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Ihr Friseur für perfektes Styling in Bad Soden"
|
||||
description="Erleben Sie exklusive Haarkunst in einer entspannten Atmosphäre. Unser Team sorgt mit langjähriger Erfahrung für Ihren perfekten Look."
|
||||
tag="Seit über 10 Jahren für Sie da"
|
||||
buttons={[
|
||||
{
|
||||
text: "Termin buchen",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "Jetzt anrufen",
|
||||
href: "tel:+496196123456",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/interior-latino-hair-salon_23-2150555185.jpg",
|
||||
imageAlt: "Moderne Salonansicht",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-hair-salon_23-2150668424.jpg?_wi=1",
|
||||
imageAlt: "Balayage Haarstyling",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-drying-hair-young-girl_23-2147769807.jpg?_wi=1",
|
||||
imageAlt: "Damenhaarschnitt",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-having-consultation-with-hairdresser_23-2147769876.jpg?_wi=1",
|
||||
imageAlt: "Hochsteckfrisur",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-combing-beard-man_23-2147778903.jpg?_wi=1",
|
||||
imageAlt: "Styling Prozess",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="4,8 / 5 Sterne auf Google Bewertungen"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Ihr Friseur für perfektes Styling in Bad Soden"
|
||||
description="Erleben Sie exklusive Haarkunst in einer entspannten Atmosphäre. Unser Team sorgt mit langjähriger Erfahrung für Ihren perfekten Look."
|
||||
tag="Seit über 10 Jahren für Sie da"
|
||||
buttons={[
|
||||
{ text: "Termin buchen", href: "#contact" },
|
||||
{ text: "Jetzt anrufen", href: "tel:+496196123456" },
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/interior-latino-hair-salon_23-2150555185.jpg", imageAlt: "Moderne Salonansicht"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-hair-salon_23-2150668424.jpg", imageAlt: "Balayage Haarstyling"},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
ratingText="4,8 / 5 Sterne auf Google Bewertungen"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Le Salon Hair & Beauty – Tradition trifft Moderne"
|
||||
buttons={[
|
||||
{
|
||||
text: "Unser Team kennenlernen",
|
||||
href: "#team",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Le Salon Hair & Beauty – Tradition trifft Moderne"
|
||||
buttons={[{ text: "Unser Team kennenlernen", href: "#team" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Haarschnitte & Styling",
|
||||
description: "Individuelle Schnitte für jeden Typ, inklusive Beratung und professionellem Föhnen.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-drying-hair-young-girl_23-2147769807.jpg?_wi=2",
|
||||
titleIconSrc: "Scissors",
|
||||
buttonText: "Mehr erfahren",
|
||||
},
|
||||
{
|
||||
title: "Farbe & Balayage",
|
||||
description: "Moderne Färbetechniken wie Balayage für natürlich wirkende, glänzende Farbergebnisse.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-hair-salon_23-2150668424.jpg?_wi=2",
|
||||
titleIconSrc: "Palette",
|
||||
buttonText: "Mehr erfahren",
|
||||
},
|
||||
{
|
||||
title: "Event & Styling",
|
||||
description: "Elegante Hochsteckfrisuren und Styling für besondere Anlässe, Hochzeiten oder Events.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-having-consultation-with-hairdresser_23-2147769876.jpg?_wi=2",
|
||||
titleIconSrc: "Sparkles",
|
||||
buttonText: "Mehr erfahren",
|
||||
},
|
||||
]}
|
||||
title="Unsere Dienstleistungen"
|
||||
description="Hochwertige Beratung und individuelle Schnitte für Damen, Herren und Kinder."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Haarschnitte & Styling", description: "Individuelle Schnitte für jeden Typ, inklusive Beratung und professionellem Föhnen.", imageSrc: "http://img.b2bpic.net/free-photo/woman-drying-hair-young-girl_23-2147769807.jpg", titleIconSrc: "Scissors", buttonText: "Mehr erfahren"},
|
||||
{
|
||||
title: "Farbe & Balayage", description: "Moderne Färbetechniken wie Balayage für natürlich wirkende, glänzende Farbergebnisse.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-hair-salon_23-2150668424.jpg", titleIconSrc: "Palette", buttonText: "Mehr erfahren"},
|
||||
{
|
||||
title: "Event & Styling", description: "Elegante Hochsteckfrisuren und Styling für besondere Anlässe, Hochzeiten oder Events.", imageSrc: "http://img.b2bpic.net/free-photo/woman-having-consultation-with-hairdresser_23-2147769876.jpg", titleIconSrc: "Sparkles", buttonText: "Mehr erfahren"},
|
||||
]}
|
||||
title="Unsere Dienstleistungen"
|
||||
description="Hochwertige Beratung und individuelle Schnitte für Damen, Herren und Kinder."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
team={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Müller",
|
||||
role: "Senior Stylistin",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-combing-beard-man_23-2147778903.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Markus Schmidt",
|
||||
role: "Inhaber & Stylist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-doing-client-s-make-up_23-2149190635.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Elena Weber",
|
||||
role: "Hair & Beauty Expertin",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-posing-with-photo-tape-red-background_114579-60942.jpg",
|
||||
},
|
||||
]}
|
||||
title="Unser Expertenteam"
|
||||
description="Lernen Sie die Hände kennen, die für Ihren perfekten Look sorgen."
|
||||
/>
|
||||
</div>
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
team={[
|
||||
{
|
||||
id: "1", name: "Sarah Müller", role: "Senior Stylistin", imageSrc: "http://img.b2bpic.net/free-photo/woman-combing-beard-man_23-2147778903.jpg"},
|
||||
{
|
||||
id: "2", name: "Markus Schmidt", role: "Inhaber & Stylist", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-doing-client-s-make-up_23-2149190635.jpg"},
|
||||
{
|
||||
id: "3", name: "Elena Weber", role: "Hair & Beauty Expertin", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-posing-with-photo-tape-red-background_114579-60942.jpg"},
|
||||
]}
|
||||
title="Unser Expertenteam"
|
||||
description="Lernen Sie die Hände kennen, die für Ihren perfekten Look sorgen."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={true}
|
||||
testimonial="Seit 10 Jahren besuche ich Le Salon und bin immer wieder begeistert von der professionellen Beratung und dem perfekten Styling."
|
||||
rating={5}
|
||||
author="Julia K."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/preparation-celebrating-beauty-salon-happy-attractive-model-smiling-stylist_197531-3665.jpg",
|
||||
alt: "Kundin",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/merry-young-adult-enjoying-christmas-conversation-video-call-room-decorated-festivity-celebration-talking-woman-preparing-drink-wine-kitchen-with-joyful-ornaments_482257-28400.jpg",
|
||||
alt: "Kundin",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/preparation-celebrating-beauty-salon-happy-attractive-model-smiling-stylist_197531-3665.jpg",
|
||||
alt: "Kundin",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/front-view-bride-getting-hair-done_23-2149860769.jpg",
|
||||
alt: "Kundin",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beauty-vlogger-adjusting-camera_23-2148916349.jpg",
|
||||
alt: "Kundin",
|
||||
},
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={true}
|
||||
testimonial="Seit 10 Jahren besuche ich Le Salon und bin immer wieder begeistert von der professionellen Beratung und dem perfekten Styling."
|
||||
rating={5}
|
||||
author="Julia K."
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/preparation-celebrating-beauty-salon-happy-attractive-model-smiling-stylist_197531-3665.jpg", alt: "Kundin" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/merry-young-adult-enjoying-christmas-conversation-video-call-room-decorated-festivity-celebration-talking-woman-preparing-drink-wine-kitchen-with-joyful-ornaments_482257-28400.jpg", alt: "Kundin" },
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Kontakt"
|
||||
title="Jetzt Termin vereinbaren"
|
||||
description="Besuchen Sie uns in der Königsteiner Str. 60, Bad Soden oder rufen Sie uns an."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/minimalist-office-interior-design_23-2151826280.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
buttonText="Anrufen"
|
||||
onSubmit={(email) => console.log(email)}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Kontakt"
|
||||
title="Jetzt Termin vereinbaren"
|
||||
description="Besuchen Sie uns in der Königsteiner Str. 60, Bad Soden oder rufen Sie uns an."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/minimalist-office-interior-design_23-2151826280.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
buttonText="Anrufen"
|
||||
onSubmit={(email) => console.log(email)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Le Salon",
|
||||
items: [
|
||||
{
|
||||
label: "Königsteiner Str. 60",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "65812 Bad Soden",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Kontakt",
|
||||
items: [
|
||||
{
|
||||
label: "Tel: 06196 123456",
|
||||
href: "tel:+496196123456",
|
||||
},
|
||||
{
|
||||
label: "info@lesalon.de",
|
||||
href: "mailto:info@lesalon.de",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 Le Salon Bad Soden"
|
||||
bottomRightText="Impressum | Datenschutz"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Le Salon", items: [
|
||||
{ label: "Königsteiner Str. 60", href: "#" },
|
||||
{ label: "65812 Bad Soden", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Kontakt", items: [
|
||||
{ label: "Tel: 06196 123456", href: "tel:+496196123456" },
|
||||
{ label: "info@lesalon.de", href: "mailto:info@lesalon.de" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 Le Salon Bad Soden"
|
||||
bottomRightText="Impressum | Datenschutz"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user