161 lines
7.8 KiB
TypeScript
161 lines
7.8 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
|
||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||
import TeamCardFive from '@/components/sections/team/TeamCardFive';
|
||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||
import TextAbout from '@/components/sections/about/TextAbout';
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="icon-arrow"
|
||
defaultTextAnimation="reveal-blur"
|
||
borderRadius="soft"
|
||
contentWidth="small"
|
||
sizing="mediumLarge"
|
||
background="grid"
|
||
cardStyle="glass-elevated"
|
||
primaryButtonStyle="double-inset"
|
||
secondaryButtonStyle="radial-glow"
|
||
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="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"},
|
||
]}
|
||
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="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?_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", 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"},
|
||
{
|
||
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" },
|
||
]}
|
||
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="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>
|
||
);
|
||
}
|