Update src/pages/HomePage.tsx
This commit is contained in:
@@ -12,305 +12,150 @@ import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroTiltedCards
|
||||
tag="Dein Friseur in Neuwulmstorf"
|
||||
title="Dein perfekter Look in Neuwulmstorf"
|
||||
description="Professionelle Haarschnitte, Färbung und Styling von erfahrenen Experten. Buche deinen Termin jetzt online."
|
||||
primaryButton={{
|
||||
text: "Termin buchen",
|
||||
href: "#contact",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Unsere Leistungen",
|
||||
href: "#services",
|
||||
}}
|
||||
items={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairstyle-supplies_1157-7704.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-getting-ready-giving-haircut-her-client_23-2148353413.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-beautiful-bride-getting-ready_23-2149640900.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-with-razor-blade_23-2151102194.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-accessories-barber-shop_23-2148256980.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Dein Friseur in Neuwulmstorf"
|
||||
title="Dein perfekter Look in Neuwulmstorf"
|
||||
description="Professionelle Haarschnitte, Färbung und Styling von erfahrenen Experten. Buche deinen Termin jetzt online."
|
||||
primaryButton={{ text: "Termin buchen", href: "#contact" }}
|
||||
secondaryButton={{ text: "Unsere Leistungen", href: "#services" }}
|
||||
items={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/hairstyle-supplies_1157-7704.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-getting-ready-giving-haircut-her-client_23-2148353413.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/high-angle-beautiful-bride-getting-ready_23-2149640900.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/still-life-with-razor-blade_23-2151102194.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-accessories-barber-shop_23-2148256980.jpg" }
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<SectionErrorBoundary name="services">
|
||||
<div id="services" data-section="services">
|
||||
<SectionErrorBoundary name="services">
|
||||
<FeaturesBento
|
||||
tag="Unsere Leistungen"
|
||||
title="Alles für dein Haar"
|
||||
description="Von präzisen Haarschnitten bis hin zu kreativen Farben und intensiven Pflegebehandlungen."
|
||||
features={[
|
||||
{
|
||||
title: "Haarschnitte & Styling",
|
||||
description: "Klassische und moderne Schnitte, die perfekt zu deinem Typ passen.",
|
||||
bentoComponent: "info-card-marquee",
|
||||
infoCards: [
|
||||
{
|
||||
icon: Scissors,
|
||||
label: "Damen",
|
||||
value: "Style",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
label: "Herren",
|
||||
value: "Schnitt",
|
||||
},
|
||||
{
|
||||
icon: Star,
|
||||
label: "Styling",
|
||||
value: "Finish",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-using-dry-shampoo-home_23-2150706331.jpg",
|
||||
imageAlt: "hair care product collection",
|
||||
},
|
||||
{
|
||||
title: "Farbe & Nuancierung",
|
||||
description: "Individuelle Färbetechniken wie Balayage, Highlights und klassische Coloration.",
|
||||
bentoComponent: "media-stack",
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairstyle-supplies_1157-7704.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-hair-care-product_23-2151918426.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/unpleased-looking-down-young-beautiful-female-barber-uniform-combing-hair-isolated-blue-background_141793-119376.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-getting-ready-giving-haircut-her-client_23-2148353413.jpg?_wi=2",
|
||||
imageAlt: "hair care product collection",
|
||||
},
|
||||
{
|
||||
title: "Haarpflege & Spa",
|
||||
description: "Intensive Kuren und Verwöhnprogramme für gesundes und glänzendes Haar.",
|
||||
bentoComponent: "checklist-timeline",
|
||||
heading: "Dein Ablauf",
|
||||
subheading: "Schritt für Schritt",
|
||||
checklistItems: [
|
||||
{
|
||||
label: "Analyse",
|
||||
detail: "Deine Haarbedürfnisse",
|
||||
},
|
||||
{
|
||||
label: "Behandlung",
|
||||
detail: "Pflege & Verwöhnung",
|
||||
},
|
||||
{
|
||||
label: "Finish",
|
||||
detail: "Strahlen & Styling",
|
||||
},
|
||||
],
|
||||
completedLabel: "Fertig",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-beautiful-bride-getting-ready_23-2149640900.jpg?_wi=2",
|
||||
imageAlt: "hair care product collection",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Unsere Leistungen"
|
||||
title="Alles für dein Haar"
|
||||
description="Von präzisen Haarschnitten bis hin zu kreativen Farben und intensiven Pflegebehandlungen."
|
||||
features={[
|
||||
{
|
||||
title: "Haarschnitte & Styling", description: "Klassische und moderne Schnitte, die perfekt zu deinem Typ passen.", bentoComponent: "info-card-marquee", infoCards: [
|
||||
{ icon: "Scissors", label: "Damen", value: "Style" },
|
||||
{ icon: "Zap", label: "Herren", value: "Schnitt" },
|
||||
{ icon: "Star", label: "Styling", value: "Finish" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Farbe & Nuancierung", description: "Individuelle Färbetechniken wie Balayage, Highlights und klassische Coloration.", bentoComponent: "media-stack", mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/hairstyle-supplies_1157-7704.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/woman-with-hair-care-product_23-2151918426.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/unpleased-looking-down-young-beautiful-female-barber-uniform-combing-hair-isolated-blue-background_141793-119376.jpg" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Haarpflege & Spa", description: "Intensive Kuren und Verwöhnprogramme für gesundes und glänzendes Haar.", bentoComponent: "checklist-timeline", heading: "Dein Ablauf", subheading: "Schritt für Schritt", checklistItems: [
|
||||
{ label: "Analyse", detail: "Deine Haarbedürfnisse" },
|
||||
{ label: "Behandlung", detail: "Pflege & Verwöhnung" },
|
||||
{ label: "Finish", detail: "Strahlen & Styling" }
|
||||
],
|
||||
completedLabel: "Fertig"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<SectionErrorBoundary name="products">
|
||||
<div id="products" data-section="products">
|
||||
<SectionErrorBoundary name="products">
|
||||
<FeaturesImageBento
|
||||
tag="Pflege & Style"
|
||||
title="Unsere Salon-Produkte"
|
||||
description="Pflege dein Haar auch zu Hause mit unseren professionellen Produkten."
|
||||
items={[
|
||||
{
|
||||
title: "Haarspray",
|
||||
description: "Langanhaltender Halt",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/spa-still-life-with-beauty-products_23-2148201455.jpg",
|
||||
},
|
||||
{
|
||||
title: "Styling Serum",
|
||||
description: "Für glänzende Akzente",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bottle-oils-marble-background_23-2148317668.jpg",
|
||||
},
|
||||
{
|
||||
title: "Shampoo",
|
||||
description: "Tiefenreinigung & Pflege",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-bath-concept-accessories_23-2148419373.jpg",
|
||||
},
|
||||
{
|
||||
title: "Haarmaske",
|
||||
description: "Intensives Repair",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/body-care-product-plain-background_23-2148241872.jpg",
|
||||
},
|
||||
{
|
||||
title: "Haaröl",
|
||||
description: "Natürliche Feuchtigkeit",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/brunette-smiling-hair-dresser_23-2148108873.jpg",
|
||||
},
|
||||
{
|
||||
title: "Styling Clay",
|
||||
description: "Struktur & Grip",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-using-shaving-cream-contour-male-customer-s-beard_23-2148985739.jpg",
|
||||
},
|
||||
{
|
||||
title: "Bürste",
|
||||
description: "Schonendes Entwirren",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/copy-space-framed-by-hair-equipment_23-2148352836.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Pflege & Style"
|
||||
title="Unsere Salon-Produkte"
|
||||
description="Pflege dein Haar auch zu Hause mit unseren professionellen Produkten."
|
||||
items={[
|
||||
{ title: "Haarspray", description: "Langanhaltender Halt", imageSrc: "http://img.b2bpic.net/free-photo/spa-still-life-with-beauty-products_23-2148201455.jpg" },
|
||||
{ title: "Styling Serum", description: "Für glänzende Akzente", imageSrc: "http://img.b2bpic.net/free-photo/bottle-oils-marble-background_23-2148317668.jpg" },
|
||||
{ title: "Shampoo", description: "Tiefenreinigung & Pflege", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-bath-concept-accessories_23-2148419373.jpg" },
|
||||
{ title: "Haarmaske", description: "Intensives Repair", imageSrc: "http://img.b2bpic.net/free-photo/body-care-product-plain-background_23-2148241872.jpg" },
|
||||
{ title: "Haaröl", description: "Natürliche Feuchtigkeit", imageSrc: "http://img.b2bpic.net/free-photo/brunette-smiling-hair-dresser_23-2148108873.jpg" },
|
||||
{ title: "Styling Clay", description: "Struktur & Grip", imageSrc: "http://img.b2bpic.net/free-photo/barber-using-shaving-cream-contour-male-customer-s-beard_23-2148985739.jpg" },
|
||||
{ title: "Bürste", description: "Schonendes Entwirren", imageSrc: "http://img.b2bpic.net/free-photo/copy-space-framed-by-hair-equipment_23-2148352836.jpg" }
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<SectionErrorBoundary name="team">
|
||||
<div id="team" data-section="team">
|
||||
<SectionErrorBoundary name="team">
|
||||
<TeamProfileCards
|
||||
tag="Unser Team"
|
||||
title="Erfahrene Experten"
|
||||
description="Lerne unsere kreativen Köpfe kennen, die für deine neue Frisur brennen."
|
||||
items={[
|
||||
{
|
||||
title: "Lisa",
|
||||
description: "Farbspezialistin & Balayage Expertin.",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/professional-barber-man-apron-with-serious-confident-expression_141793-37223.jpg",
|
||||
buttonText: "Buchen",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-hairdressershowing-how-use-hair-straighntener_259150-60106.jpg",
|
||||
},
|
||||
{
|
||||
title: "Marc",
|
||||
description: "Meister des modernen Herren-Haarschnitts.",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/attractive-young-blond-bearded-male-dressed-leather-jacket-sits-table-cafe_613910-16383.jpg",
|
||||
buttonText: "Buchen",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-getting-groomed_23-2149220567.jpg",
|
||||
},
|
||||
{
|
||||
title: "Sandra",
|
||||
description: "Styling & Hochsteck-Expertin.",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/surprised-young-beautiful-female-barber-uniform-holding-barber-tools-isolated-pink-background_141793-119285.jpg",
|
||||
buttonText: "Buchen",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-hair-stylist_23-2148915791.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Unser Team"
|
||||
title="Erfahrene Experten"
|
||||
description="Lerne unsere kreativen Köpfe kennen, die für deine neue Frisur brennen."
|
||||
items={[
|
||||
{ title: "Lisa", description: "Farbspezialistin & Balayage Expertin.", avatarSrc: "http://img.b2bpic.net/free-photo/professional-barber-man-apron-with-serious-confident-expression_141793-37223.jpg", buttonText: "Buchen", imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-hairdressershowing-how-use-hair-straighntener_259150-60106.jpg" },
|
||||
{ title: "Marc", description: "Meister des modernen Herren-Haarschnitts.", avatarSrc: "http://img.b2bpic.net/free-photo/attractive-young-blond-bearded-male-dressed-leather-jacket-sits-table-cafe_613910-16383.jpg", buttonText: "Buchen", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-getting-groomed_23-2149220567.jpg" },
|
||||
{ title: "Sandra", description: "Styling & Hochsteck-Expertin.", avatarSrc: "http://img.b2bpic.net/free-photo/surprised-young-beautiful-female-barber-uniform-holding-barber-tools-isolated-pink-background_141793-119285.jpg", buttonText: "Buchen", imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-hair-stylist_23-2148915791.jpg" }
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialQuoteCards
|
||||
tag="Kundenstimmen"
|
||||
title="Glückliche Kunden"
|
||||
description="Das sagen unsere Besucher über den Haartreff."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Anna",
|
||||
role: "Stammkundin",
|
||||
quote: "Toller Service und super Beratung!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-black-costume-lady-with-halloween-makeup_1157-41132.jpg",
|
||||
},
|
||||
{
|
||||
name: "Tim",
|
||||
role: "Neukunde",
|
||||
quote: "Perfekter Haarschnitt, bin begeistert.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-goodlooking-attractive-stylish-bearded-man-brown_285396-4616.jpg",
|
||||
},
|
||||
{
|
||||
name: "Julia",
|
||||
role: "Braut",
|
||||
quote: "Die Hochzeitsfrisur war traumhaft.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-photo-tape-red-background-high-quality-photo_114579-60934.jpg",
|
||||
},
|
||||
{
|
||||
name: "Markus",
|
||||
role: "Stammkunde",
|
||||
quote: "Immer freundlich und professionell.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blonde-young-woman-holding-her-boyfriend-s-hand-looking-camera_23-2148151722.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sophie",
|
||||
role: "Stammkundin",
|
||||
quote: "Bester Friseur in Neuwulmstorf!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-face-massaging-with-gua-sha-medium-shot_23-2149349087.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Kundenstimmen"
|
||||
title="Glückliche Kunden"
|
||||
description="Das sagen unsere Besucher über den Haartreff."
|
||||
testimonials={[
|
||||
{ name: "Anna", role: "Stammkundin", quote: "Toller Service und super Beratung!", imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-black-costume-lady-with-halloween-makeup_1157-41132.jpg" },
|
||||
{ name: "Tim", role: "Neukunde", quote: "Perfekter Haarschnitt, bin begeistert.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-goodlooking-attractive-stylish-bearded-man-brown_285396-4616.jpg" },
|
||||
{ name: "Julia", role: "Braut", quote: "Die Hochzeitsfrisur war traumhaft.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-photo-tape-red-background-high-quality-photo_114579-60934.jpg" },
|
||||
{ name: "Markus", role: "Stammkunde", quote: "Immer freundlich und professionell.", imageSrc: "http://img.b2bpic.net/free-photo/blonde-young-woman-holding-her-boyfriend-s-hand-looking-camera_23-2148151722.jpg" },
|
||||
{ name: "Sophie", role: "Stammkundin", quote: "Bester Friseur in Neuwulmstorf!", imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-face-massaging-with-gua-sha-medium-shot_23-2149349087.jpg" }
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsSimpleCards
|
||||
tag="Zahlen"
|
||||
title="Haartreff auf einen Blick"
|
||||
description="Unsere Arbeit in Neuwulmstorf."
|
||||
metrics={[
|
||||
{
|
||||
value: "15+",
|
||||
description: "Jahre Erfahrung",
|
||||
},
|
||||
{
|
||||
value: "5000+",
|
||||
description: "Glückliche Kunden",
|
||||
},
|
||||
{
|
||||
value: "4.9/5",
|
||||
description: "Bewertung",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Zahlen"
|
||||
title="Haartreff auf einen Blick"
|
||||
description="Unsere Arbeit in Neuwulmstorf."
|
||||
metrics={[
|
||||
{ value: "15+", description: "Jahre Erfahrung" },
|
||||
{ value: "5000+", description: "Glückliche Kunden" },
|
||||
{ value: "4.9/5", description: "Bewertung" }
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqSimple
|
||||
tag="Häufige Fragen"
|
||||
title="Alles Wissenswerte"
|
||||
description="Hier findest du Antworten auf die häufigsten Fragen rund um deinen Besuch bei uns."
|
||||
items={[
|
||||
{
|
||||
question: "Wie buche ich einen Termin?",
|
||||
answer: "Ganz einfach über unseren Online-Button.",
|
||||
},
|
||||
{
|
||||
question: "Wo finde ich euch?",
|
||||
answer: "Mitten in Neuwulmstorf, leicht erreichbar.",
|
||||
},
|
||||
{
|
||||
question: "Was kostet ein Schnitt?",
|
||||
answer: "Preise richten sich nach Aufwand und Länge.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Häufige Fragen"
|
||||
title="Alles Wissenswerte"
|
||||
description="Hier findest du Antworten auf deine Fragen."
|
||||
items={[
|
||||
{ question: "Wie buche ich einen Termin?", answer: "Ganz einfach über unseren Online-Button." },
|
||||
{ question: "Wo finde ich euch?", answer: "Mitten in Neuwulmstorf, leicht erreichbar." },
|
||||
{ question: "Was kostet ein Schnitt?", answer: "Preise richten sich nach Aufwand und Länge." }
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Kontakt"
|
||||
text="Bist du bereit für deinen neuen Look? Buche jetzt!"
|
||||
primaryButton={{
|
||||
text: "Jetzt Termin vereinbaren",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Rückruf anfordern",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
tag="Kontakt"
|
||||
text="Bist du bereit für deinen neuen Look? Buche jetzt!"
|
||||
primaryButton={{ text: "Jetzt Termin vereinbaren", href: "#" }}
|
||||
secondaryButton={{ text: "Rückruf anfordern", href: "#" }}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user