Merge version_2 into main
Merge version_2 into main
This commit was merged in pull request #2.
This commit is contained in:
524
src/app/page.tsx
524
src/app/page.tsx
@@ -2,17 +2,13 @@
|
||||
|
||||
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 { Scissors, Sparkles, User, MapPin } from 'lucide-react';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -29,443 +25,85 @@ 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: "Services", id: "#features" },
|
||||
{ name: "Kontakt", id: "#contact" },
|
||||
]}
|
||||
brandName="Haarzeit"
|
||||
button={{ text: "Termin buchen", href: "#contact" }}
|
||||
/>
|
||||
</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 deinen Besuch in einen Wohlfühlmoment."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
buttons={[{ text: "Jetzt 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="Dein Friseur in Murr"
|
||||
metrics={[
|
||||
{ icon: MapPin, label: "Standort", value: "Hindenburgstr. 70" },
|
||||
{ icon: User, label: "Erfahrung", value: "Meisterbetrieb" },
|
||||
{ icon: Sparkles, label: "Service", value: "Premium-Pflege" }
|
||||
]}
|
||||
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: "Haarschnitt", description: "Präzise Schnitte für jeden Typ." },
|
||||
{ icon: Sparkles, title: "Farbe", description: "Moderne Färbetechniken & Balayage." },
|
||||
{ icon: User, title: "Styling", description: "Perfektes Finish für jeden Anlass." }
|
||||
]}
|
||||
animationType="slide-up"
|
||||
title="Unsere Leistungen"
|
||||
description="Wir nehmen uns Zeit für eine ausführliche Beratung, damit dein Haar deine Persönlichkeit unterstreicht."
|
||||
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="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
tag="Termin"
|
||||
title="Hindenburgstraße 70, Murr"
|
||||
description="Komm vorbei oder schreib uns eine Nachricht. Wir freuen uns darauf, dich in der Hindenburgstraße 70 begrüßen zu dürfen!"
|
||||
buttonText="Anfrage senden"
|
||||
mediaPosition="right"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</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="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: "Adresse",
|
||||
items: [{ label: "Hindenburgstraße 70, 71711 Murr" }]
|
||||
},
|
||||
{
|
||||
title: "Öffnungszeiten",
|
||||
items: [{ label: "Nach Vereinbarung" }]
|
||||
}
|
||||
]}
|
||||
bottomLeftText="© 2025 Haarzeit, der Friseur"
|
||||
bottomRightText="Alle Rechte vorbehalten"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user