Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| c40765e9a2 | |||
| 851ed4df48 | |||
| 146c294223 | |||
| 669b0564cf | |||
| 1cd624ddbc | |||
| 35230aad41 | |||
| 0a64003368 | |||
| c5d99f9a9f | |||
| f9fa538bfe |
549
src/app/page.tsx
549
src/app/page.tsx
@@ -2,17 +2,14 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
||||
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import { Scissors, Sparkles, User, MapPin, Phone, Star } from 'lucide-react';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -29,443 +26,111 @@ export default function LandingPage() {
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "#features",
|
||||
},
|
||||
{
|
||||
name: "Prices",
|
||||
id: "#pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="Haarzeit"
|
||||
button={{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "#hero" },
|
||||
{ name: "Über uns", id: "#about" },
|
||||
{ name: "Leistungen", id: "#features" },
|
||||
{ name: "Bewertungen", id: "#testimonials" },
|
||||
{ name: "Kontakt", id: "#contact" },
|
||||
]}
|
||||
brandName="Haarzeit"
|
||||
button={{ text: "07144 8165700", href: "tel:071448165700" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Dein Haar in unseren Händen"
|
||||
description="Erlebe exzellente Frisierkunst im Herzen der Stadt. Bei Haarzeit verbinden wir handwerkliche Präzision mit einer persönlichen Wohlfühlatmosphäre."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Julia M.",
|
||||
handle: "@juliam",
|
||||
testimonial: "Bester Salon in der Stadt! Super Beratung und tolles Ergebnis.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/photo-two-black-ceramical-hair-sinks-standing-beaty-salon_651396-960.jpg?_wi=1",
|
||||
imageAlt: "elegant hair salon interior",
|
||||
},
|
||||
{
|
||||
name: "Markus K.",
|
||||
handle: "@mk",
|
||||
testimonial: "Sehr professionell, ich komme immer gerne wieder.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-optical-fiber-detail_23-2149182536.jpg",
|
||||
imageAlt: "elegant hair salon interior",
|
||||
},
|
||||
{
|
||||
name: "Laura S.",
|
||||
handle: "@lauras",
|
||||
testimonial: "Wundervoller Service, ich fühle mich wie neu.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-shaving-client-s-beard_23-2148353434.jpg",
|
||||
imageAlt: "elegant hair salon interior",
|
||||
},
|
||||
{
|
||||
name: "Tim P.",
|
||||
handle: "@timp",
|
||||
testimonial: "Schnell, präzise und sehr freundlich.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313063.jpg?_wi=1",
|
||||
imageAlt: "elegant hair salon interior",
|
||||
},
|
||||
{
|
||||
name: "Sarah W.",
|
||||
handle: "@sw",
|
||||
testimonial: "Meine erste Wahl für Farbe!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-owner-hairdresser-salon_329181-1953.jpg?_wi=1",
|
||||
imageAlt: "elegant hair salon interior",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Jetzt Termin vereinbaren",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/photo-two-black-ceramical-hair-sinks-standing-beaty-salon_651396-960.jpg?_wi=2"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/hairdresser-customer-talking-hair-salon_329181-1940.jpg",
|
||||
alt: "Kunde 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg",
|
||||
alt: "Kunde 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/family-car-salon-woman-buying-thecar-seat-little-african-girl-with-mther_1157-45043.jpg",
|
||||
alt: "Kunde 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/female-hairdresser-styling-clients-hair_107420-94690.jpg",
|
||||
alt: "Kunde 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-businesswoman-black-suit-putting-her-head-looks-tired_114579-15835.jpg",
|
||||
alt: "Kunde 5",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Meisterhandwerk",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Premium-Produkte",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Wohlfühlmoment",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Modernes Design",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Individuelle Beratung",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
title="Haarzeit, der Friseur"
|
||||
description="Exzellente Frisierkunst im Herzen von Murr. Wir verwandeln Ihren Besuch in einen Wohlfühlmoment."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
buttons={[{ text: "Jetzt Termin anfragen", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/hairdresser-customer-talking-hair-salon_329181-1940.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="Über Haarzeit"
|
||||
description={[
|
||||
"Unsere Mission ist es, Deine natürliche Schönheit hervorzuheben.",
|
||||
"Wir nutzen ausschließlich hochwertige Pflegeprodukte und nehmen uns Zeit für jeden Kunden.",
|
||||
"Dein Besuch bei uns soll eine Auszeit vom Alltag sein.",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
title="Besuchen Sie uns in Murr"
|
||||
metrics={[
|
||||
{ icon: MapPin, label: "Adresse", value: "Hindenburgstr. 70" },
|
||||
{ icon: Phone, label: "Telefon", value: "07144 8165700" },
|
||||
{ icon: User, label: "Service", value: "Meisterhaft & Individuell" }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Haarschnitt",
|
||||
subtitle: "Damen & Herren",
|
||||
category: "Styling",
|
||||
value: "Klassisch bis modern",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Farbtechnik",
|
||||
subtitle: "Balayage & Highlights",
|
||||
category: "Farbe",
|
||||
value: "Schonend & individuell",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Pflegekur",
|
||||
subtitle: "Intensivpflege",
|
||||
category: "Gesundheit",
|
||||
value: "Für gesundes Haar",
|
||||
},
|
||||
]}
|
||||
title="Unsere Services"
|
||||
description="Von modernen Schnitten bis hin zu schonenden Färbetechniken bieten wir alles für Dein Haar."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
features={[
|
||||
{ icon: Scissors, title: "Präzisionsschnitt", description: "Maßgeschneiderte Haarschnitte für jeden Haartyp und Stil." },
|
||||
{ icon: Sparkles, title: "Coloration", description: "Moderne Färbetechniken, Highlights und sanfte Balayage-Farben." },
|
||||
{ icon: User, title: "Styling", description: "Vom natürlichen Alltags-Look bis hin zu eleganten Event-Stylings." }
|
||||
]}
|
||||
animationType="slide-up"
|
||||
title="Unsere Expertise"
|
||||
description="Bei Haarzeit steht Ihre Zufriedenheit an erster Stelle. Wir nehmen uns die Zeit für eine individuelle Beratung in entspannter Atmosphäre."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Shampoo Feuchtigkeit",
|
||||
price: "24,90€",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313063.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Conditioner Glanz",
|
||||
price: "26,90€",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-cream-colored-bottle-plastic-shampoo-can-with-black-cap-isolated-pink-yellow-background-cosmetics-beauty-hair_140725-18102.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Hitzeschutz Spray",
|
||||
price: "19,90€",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-toilet-bag-still-life_23-2149879584.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Haaröl Argan",
|
||||
price: "29,90€",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-product-container-with-art-nouveau-inspired-sun-relief-background_23-2151420666.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Styling Wax",
|
||||
price: "18,90€",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-tube-product-with-gift-box-balloons-black-background_187299-46830.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Locken-Creme",
|
||||
price: "22,90€",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/product-branding-packaging_23-2150965841.jpg",
|
||||
},
|
||||
]}
|
||||
title="Salon-Produkte"
|
||||
description="Pflege Dein Haar auch zu Hause mit unseren exklusiven Produkten."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
title="Was unsere Kunden sagen"
|
||||
tag="Bewertungen"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
description="Kundenstimmen über unseren Salon"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", title: "Toller Service!", quote: "Super nettes Team und ich bin jedes Mal begeistert von meinem Haarschnitt.", name: "Claudia S.", role: "Stammkundin"
|
||||
},
|
||||
{
|
||||
id: "2", title: "Fachlich Top", quote: "Hier wird sich für die Beratung wirklich Zeit genommen. Sehr zu empfehlen!", name: "Michael B.", role: "Kunde"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "basis",
|
||||
badge: "Basics",
|
||||
price: "ab 45€",
|
||||
subtitle: "Schnitt & Styling",
|
||||
buttons: [
|
||||
{
|
||||
text: "Buchen",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Waschen",
|
||||
"Schnitt",
|
||||
"Finish",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "farbe",
|
||||
badge: "Farbe",
|
||||
price: "ab 89€",
|
||||
subtitle: "Haarschnitt & Farbe",
|
||||
buttons: [
|
||||
{
|
||||
text: "Buchen",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Farbe",
|
||||
"Schnitt",
|
||||
"Pflege",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "premium",
|
||||
badge: "Premium",
|
||||
price: "ab 149€",
|
||||
subtitle: "Komplettpaket",
|
||||
buttons: [
|
||||
{
|
||||
text: "Buchen",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Balayage",
|
||||
"Schnitt",
|
||||
"Intensivkur",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Unsere Preise"
|
||||
description="Transparente Preisgestaltung für erstklassige Qualität."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
tag="Termin vereinbaren"
|
||||
title="Haarzeit in Murr"
|
||||
description="Wir freuen uns auf Ihren Anruf oder Besuch in der Hindenburgstraße 70. Kontaktieren Sie uns direkt für eine Terminvereinbarung."
|
||||
buttonText="Jetzt anrufen"
|
||||
onSubmit={() => window.location.href = 'tel:071448165700'}
|
||||
mediaPosition="right"
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
mediaAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "15+",
|
||||
title: "Jahre Erfahrung",
|
||||
items: [
|
||||
"Profis",
|
||||
"Handwerk",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "5000+",
|
||||
title: "Glückliche Kunden",
|
||||
items: [
|
||||
"Stammkunden",
|
||||
"Vertrauen",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "100%",
|
||||
title: "Zufriedenheit",
|
||||
items: [
|
||||
"Qualität",
|
||||
"Service",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Haarzeit in Zahlen"
|
||||
description="Erfahrung, die man sieht."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah",
|
||||
role: "Kundin",
|
||||
testimonial: "Immer ein tolles Erlebnis, sehr herzlich.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-owner-hairdresser-salon_329181-1953.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Thomas",
|
||||
role: "Stammkunde",
|
||||
testimonial: "Der beste Schnitt seit langem.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-businesswoman-standing-white_114579-77666.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Elena",
|
||||
role: "Kundin",
|
||||
testimonial: "Super Farbe und sehr entspannt.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-attractive-young-man-showing-thumbup-praising-good-work-standing-light-blue-backgrou_1258-161401.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Max",
|
||||
role: "Kunde",
|
||||
testimonial: "Schnell, sauber, kompetent.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-bride-getting-ready_23-2149722037.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Katja",
|
||||
role: "Kundin",
|
||||
testimonial: "Wunderschönes Ambiente, toller Service.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149229812.jpg",
|
||||
},
|
||||
]}
|
||||
title="Das sagen unsere Kunden"
|
||||
description="Deine Zufriedenheit ist unsere beste Werbung."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Wie buche ich einen Termin?",
|
||||
content: "Online über unser Kontaktformular oder telefonisch.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Bietet ihr Beratungsgespräche an?",
|
||||
content: "Ja, wir beraten dich individuell vor jedem Schnitt.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Ist Kartenzahlung möglich?",
|
||||
content: "Ja, wir akzeptieren alle gängigen Karten.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-business-owners-preparing-their-store_23-2149300882.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Häufige Fragen"
|
||||
description="Hier findest du Antworten auf deine Fragen."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Buche deinen Termin"
|
||||
description="Lass uns zusammen deinen Look kreieren."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Dein Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "E-Mail",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Was hast du geplant?",
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/china-stairs-stone-tiles-old-water_1417-577.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Haarzeit"
|
||||
copyrightText="© 2025 Haarzeit der Friseur"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Kontakt",
|
||||
items: [
|
||||
{ label: "Hindenburgstraße 70" },
|
||||
{ label: "71711 Murr" },
|
||||
{ label: "Tel: 07144 8165700" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Öffnungszeiten",
|
||||
items: [{ label: "Nach Vereinbarung" }]
|
||||
}
|
||||
]}
|
||||
bottomLeftText="© 2025 Haarzeit, der Friseur"
|
||||
bottomRightText="Ihr Salon in Murr"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user