323 lines
17 KiB
TypeScript
323 lines
17 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
|
||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||
import { Crown, Droplet, Feather, Heart, Palette, Scissors, Sparkles, Star } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="text-shift"
|
||
defaultTextAnimation="entrance-slide"
|
||
borderRadius="soft"
|
||
contentWidth="compact"
|
||
sizing="largeSmallSizeLargeTitles"
|
||
background="floatingGradient"
|
||
cardStyle="gradient-radial"
|
||
primaryButtonStyle="flat"
|
||
secondaryButtonStyle="layered"
|
||
headingFontWeight="semibold"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleCentered
|
||
navItems={[
|
||
{
|
||
name: "Home", id: "#hero"},
|
||
{
|
||
name: "Über Uns", id: "#about"},
|
||
{
|
||
name: "Leistungen", id: "#features"},
|
||
{
|
||
name: "Team", id: "#team"},
|
||
{
|
||
name: "Testimonials", id: "#testimonials"},
|
||
{
|
||
name: "Produkte", id: "#products"},
|
||
{
|
||
name: "Preise", id: "#pricing"},
|
||
{
|
||
name: "FAQ", id: "#faq"},
|
||
{
|
||
name: "Kontakt", id: "#contact"},
|
||
]}
|
||
button={{
|
||
text: "Termin Buchen", href: "#contact"}}
|
||
brandName="Frieseur Elegance"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroCarouselLogo
|
||
logoText="Frieseur Elegance"
|
||
description="Meisterwerke für Ihr Haar. Stil, Schönheit & Wohlbefinden in jedem Schnitt."
|
||
buttons={[
|
||
{
|
||
text: "Termin buchen", href: "#contact"},
|
||
{
|
||
text: "Unsere Leistungen", href: "#features"},
|
||
]}
|
||
slides={[
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/blonde-girl-getting-her-hair-done_23-2148108845.jpg", imageAlt: "Woman getting a fresh haircut"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/beautician-styling-clients-hair_107420-94682.jpg", imageAlt: "Hair coloring process with balayage"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18507.jpg", imageAlt: "Man receiving a professional beard trim"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/wedding-bride-s-hair-tied-up_8353-6092.jpg", imageAlt: "Elegant bridal updo with flowers"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205897.jpg", imageAlt: "Child getting a fun haircut"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-hair-done-beauty-salon_23-2149167394.jpg", imageAlt: "Hair treatment being applied to client"},
|
||
]}
|
||
autoplayDelay={4000}
|
||
showDimOverlay={true}
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<MediaAbout
|
||
useInvertedBackground={false}
|
||
title="Ihre Schönheit, Unsere Leidenschaft"
|
||
description="Wir bei Frieseur Elegance glauben, dass ein perfekter Haarschnitt mehr ist als nur Haare schneiden – es ist eine Kunstform, die Ihre Persönlichkeit unterstreicht. Unser erfahrenes Team ist darauf spezialisiert, individuelle Looks zu kreieren, die Sie strahlen lassen. Vertrauen Sie auf unsere Expertise und lassen Sie sich verwöhnen."
|
||
imageSrc="http://img.b2bpic.net/free-photo/customer-standing-front-mirror-barbershop_23-2148181953.jpg"
|
||
imageAlt="Modern elegant hair salon interior with styling stations and mirrors."
|
||
/>
|
||
</div>
|
||
|
||
<div id="features" data-section="features">
|
||
<FeatureHoverPattern
|
||
animationType="scale-rotate"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
features={[
|
||
{
|
||
icon: Scissors,
|
||
title: "Präzisions-Haarschnitte", description: "Moderne und klassische Schnitte für Damen, Herren und Kinder, perfekt auf Ihren Stil abgestimmt."},
|
||
{
|
||
icon: Palette,
|
||
title: "Individuelle Farbkreationen", description: "Von Balayage über Strähnen bis zur Vollcoloration – wir finden Ihren perfekten Farbton."},
|
||
{
|
||
icon: Sparkles,
|
||
title: "Exquisite Stylings", description: "Ob für den Alltag, besondere Anlässe oder Hochzeiten – wir kreieren Ihr Wunsch-Styling."},
|
||
{
|
||
icon: Droplet,
|
||
title: "Intensive Haarpflege", description: "Revitalisierende Treatments, Masken und Kopfhautmassagen für gesundes, glänzendes Haar."},
|
||
{
|
||
icon: Heart,
|
||
title: "Hochzeitsfrisuren", description: "Ihr großer Tag verdient eine perfekte Frisur. Wir beraten und stylen Sie für Ihren unvergesslichen Auftritt."},
|
||
{
|
||
icon: Feather,
|
||
title: "Professionelle Bartpflege", description: "Von präzisen Trims bis zur vollständigen Bartrasur – Ihr Bart in besten Händen."},
|
||
]}
|
||
title="Unsere Exklusiven Services"
|
||
description="Entdecken Sie unser vielfältiges Angebot, das speziell auf Ihre Bedürfnisse zugeschnitten ist."
|
||
/>
|
||
</div>
|
||
|
||
<div id="team" data-section="team">
|
||
<TeamCardTwo
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="three-columns-all-equal-width"
|
||
useInvertedBackground={false}
|
||
members={[
|
||
{
|
||
id: "1", name: "Anna Schmidt", role: "Creative Director", description: "Mit über 15 Jahren Erfahrung ist Anna eine Meisterin ihres Fachs und spezialisiert auf innovative Farbtechniken.", imageSrc: "http://img.b2bpic.net/free-photo/unpleased-young-beautiful-female-barber-uniform-holding-hair-clipper-with-comb-isolated-green-background_141793-119384.jpg", imageAlt: "Portrait of Anna Schmidt, Creative Director"},
|
||
{
|
||
id: "2", name: "Max Müller", role: "Master Barber & Stylist", description: "Max ist unser Experte für Herrenhaarschnitte und Bartpflege, bekannt für seine präzisen und stilvollen Ergebnisse.", imageSrc: "http://img.b2bpic.net/free-photo/latino-hair-salon-owner-preparing-clients_23-2150286080.jpg", imageAlt: "Portrait of Max Müller, Master Barber & Stylist"},
|
||
{
|
||
id: "3", name: "Sophie Weber", role: "Senior Stylistin", description: "Sophie liebt es, individuelle Stylings für besondere Anlässe zu kreieren und unsere Kunden zum Strahlen zu bringen.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-teacher_23-2148635327.jpg", imageAlt: "Portrait of Sophie Weber, Senior Stylistin"},
|
||
]}
|
||
title="Unser Kreativ-Team"
|
||
description="Lernen Sie die talentierten Hände kennen, die Ihre Haarträume wahr werden lassen."
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardSixteen
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
animationType="slide-up"
|
||
testimonials={[
|
||
{
|
||
id: "1", name: "Sarah Johnson", role: "Kundin", company: "Stammkundin seit 3 Jahren", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-pretty-female-with-pink-silk-dress-sitting-outdoor-cafe_181624-30906.jpg", imageAlt: "Sarah Johnson, happy customer"},
|
||
{
|
||
id: "2", name: "Michael Chen", role: "Kunde", company: "Besuch seit 1 Jahr", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-hipster-model-man-stylish-summer-clothes-posing_158538-15012.jpg", imageAlt: "Michael Chen, satisfied customer"},
|
||
{
|
||
id: "3", name: "Emily Rodriguez", role: "Kundin", company: "Erster Besuch – begeistert", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-stylish-laughing-model-colorful-casual-summer-clothes-with-natural-makeup-gray_158538-11769.jpg", imageAlt: "Emily Rodriguez, happy customer"},
|
||
{
|
||
id: "4", name: "David Kim", role: "Kunde", company: "Regelmäßiger Bartpflege-Kunde", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexual-blond-female-with-curly-hair-grey-background_613910-15089.jpg", imageAlt: "David Kim, satisfied customer"},
|
||
{
|
||
id: "5", name: "Laura Müller", role: "Kundin", company: "Hochzeitsfrisur-Kundin", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/best-friends-smiling-each-other_23-2148238236.jpg", imageAlt: "Laura Müller, happy customer"},
|
||
]}
|
||
kpiItems={[
|
||
{
|
||
value: "98%", label: "Zufriedene Kunden"},
|
||
{
|
||
value: "15+", label: "Jahre Erfahrung"},
|
||
{
|
||
value: "1000+", label: "Happy Hair Days"},
|
||
]}
|
||
title="Was Unsere Kunden Sagen"
|
||
description="Ihre Zufriedenheit ist unser größtes Kompliment. Lesen Sie, was unsere geschätzten Kunden über ihre Erfahrungen bei Frieseur Elegance berichten."
|
||
/>
|
||
</div>
|
||
|
||
<div id="products" data-section="products">
|
||
<ProductCardOne
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="three-columns-all-equal-width"
|
||
useInvertedBackground={false}
|
||
products={[
|
||
{
|
||
id: "1", name: "Volumen Shampoo", price: "€ 24.99", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-plastic-bottles-pink-background_23-2149449755.jpg", imageAlt: "Volumizing Shampoo Bottle"},
|
||
{
|
||
id: "2", name: "Feuchtigkeits-Conditioner", price: "€ 26.50", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230919.jpg", imageAlt: "Moisturizing Conditioner Bottle"},
|
||
{
|
||
id: "3", name: "Hitzeschutz-Spray", price: "€ 22.00", imageSrc: "http://img.b2bpic.net/free-photo/person-preparing-their-drag-outfit_23-2149490836.jpg", imageAlt: "Heat Protection Hair Spray"},
|
||
{
|
||
id: "4", name: "Glanz-Haarserum", price: "€ 29.99", imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-using-dry-shampoo-home_23-2150706331.jpg", imageAlt: "Shine Hair Serum Bottle"},
|
||
{
|
||
id: "5", name: "Repair Haarmaske", price: "€ 35.00", imageSrc: "http://img.b2bpic.net/free-photo/woman-with-dyed-hair_23-2148547444.jpg", imageAlt: "Repairing Hair Mask Jar"},
|
||
{
|
||
id: "6", name: "Formgebendes Mousse", price: "€ 19.75", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-using-dry-shampoo-home_23-2150651871.jpg", imageAlt: "Styling Hair Mousse Bottle"},
|
||
]}
|
||
title="Premium Haarpflege für Zuhause"
|
||
description="Verlängern Sie die Salonqualität mit unseren ausgewählten Pflegeprodukten, die speziell auf Ihr Haar abgestimmt sind."
|
||
/>
|
||
</div>
|
||
|
||
<div id="pricing" data-section="pricing">
|
||
<PricingCardFive
|
||
animationType="scale-rotate"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
plans={[
|
||
{
|
||
id: "basic-cut", tag: "Basis", price: "Ab € 45", period: "pro Schnitt", description: "Professioneller Haarschnitt inkl. Waschen & Föhnen.", button: {
|
||
text: "Termin vereinbaren", href: "#contact"},
|
||
featuresTitle: "Inklusive:", features: [
|
||
"Beratung", "Haarwäsche mit Premiumprodukten", "Haarschnitt nach Wunsch", "Föhnen & leichtes Styling"],
|
||
},
|
||
{
|
||
id: "color-style", tag: "Beliebt", tagIcon: Star,
|
||
price: "Ab € 95", period: "pro Service", description: "Umfassende Farb- und Styling-Behandlung.", button: {
|
||
text: "Jetzt buchen", href: "#contact"},
|
||
featuresTitle: "Inklusive:", features: [
|
||
"Typberatung", "Individuelle Farbkreation (Balayage, Strähnen, Vollfarbe)", "Intensive Pflegekur", "Professionelles Styling"],
|
||
},
|
||
{
|
||
id: "premium-package", tag: "Exklusiv", tagIcon: Crown,
|
||
price: "Ab € 150", period: "pro Paket", description: "Das Rundum-Sorglos-Paket für ein luxuriöses Haargefühl.", button: {
|
||
text: "Details anfragen", href: "#contact"},
|
||
featuresTitle: "Inklusive:", features: [
|
||
"Ausführliche Stilberatung", "Haarschnitt & Farbbehandlung", "Individuelle Tiefenpflege", "Kopfhautmassage & Styling", "Goodie-Bag mit Reisegrößen"],
|
||
},
|
||
]}
|
||
title="Unsere Preisliste"
|
||
description="Transparente Preise für erstklassige Haarpflege und -styling. Wählen Sie das Paket, das am besten zu Ihnen passt."
|
||
/>
|
||
</div>
|
||
|
||
<div id="faq" data-section="faq">
|
||
<FaqSplitMedia
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
faqs={[
|
||
{
|
||
id: "1", title: "Wie kann ich einen Termin buchen?", content: "Sie können ganz bequem online über unsere Website einen Termin buchen oder uns telefonisch erreichen."},
|
||
{
|
||
id: "2", title: "Welche Zahlungsmethoden werden akzeptiert?", content: "Wir akzeptieren Barzahlung, EC-Karte und alle gängigen Kreditkarten (Visa, MasterCard)."},
|
||
{
|
||
id: "3", title: "Kann ich meinen Termin verschieben oder stornieren?", content: "Terminänderungen oder Stornierungen sind bis 24 Stunden vor dem Termin kostenfrei möglich. Bitte kontaktieren Sie uns dafür telefonisch."},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/make-up-artist-work-her-beauty-visage-studio-salon-woman-applying-by-professional-make-up-master-beauty-club-concept_627829-9054.jpg"
|
||
imageAlt="Hairdresser explaining hair color options to a client during a consultation."
|
||
mediaAnimation="slide-up"
|
||
title="Häufig Gestellte Fragen"
|
||
description="Finden Sie schnelle Antworten auf Ihre Anliegen rund um Termine, Behandlungen und unseren Salon."
|
||
faqsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactCTA
|
||
useInvertedBackground={true}
|
||
background={{
|
||
variant: "radial-gradient"}}
|
||
tag="Bereit für eine Veränderung?"
|
||
title="Buchen Sie Jetzt Ihren Termin"
|
||
description="Wir freuen uns darauf, Sie in unserem Salon begrüßen zu dürfen und Ihre Haarträume zu verwirklichen. Kontaktieren Sie uns noch heute!"
|
||
buttons={[
|
||
{
|
||
text: "Online Termin buchen", href: "#"},
|
||
{
|
||
text: "Rufen Sie uns an", href: "tel:+49123456789"},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterSimple
|
||
columns={[
|
||
{
|
||
title: "Frieseur Elegance", items: [
|
||
{
|
||
label: "Über Uns", href: "#about"},
|
||
{
|
||
label: "Unser Team", href: "#team"},
|
||
{
|
||
label: "Karriere", href: "#"},
|
||
],
|
||
},
|
||
{
|
||
title: "Leistungen", items: [
|
||
{
|
||
label: "Haarschnitte", href: "#features"},
|
||
{
|
||
label: "Colorationen", href: "#features"},
|
||
{
|
||
label: "Stylings", href: "#features"},
|
||
{
|
||
label: "Pflege & Treatments", href: "#features"},
|
||
],
|
||
},
|
||
{
|
||
title: "Kontakt", items: [
|
||
{
|
||
label: "Termin vereinbaren", href: "#contact"},
|
||
{
|
||
label: "Anfahrt", href: "#"},
|
||
{
|
||
label: "FAQ", href: "#faq"},
|
||
],
|
||
},
|
||
]}
|
||
bottomLeftText="© 2024 Frieseur Elegance. Alle Rechte vorbehalten."
|
||
bottomRightText="Datenschutz | Impressum"
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|