286 lines
18 KiB
TypeScript
286 lines
18 KiB
TypeScript
"use client"
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||
import { Sparkles, Award, Shield, Star } from "lucide-react";
|
||
|
||
export default function SalonPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="hover-bubble"
|
||
defaultTextAnimation="reveal-blur"
|
||
borderRadius="rounded"
|
||
contentWidth="smallMedium"
|
||
sizing="medium"
|
||
background="grid"
|
||
cardStyle="outline"
|
||
primaryButtonStyle="double-inset"
|
||
secondaryButtonStyle="solid"
|
||
headingFontWeight="semibold"
|
||
>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarLayoutFloatingInline
|
||
brandName="Salon DI"
|
||
navItems={[
|
||
{ name: "Über uns", id: "about" },
|
||
{ name: "Leistungen", id: "services" },
|
||
{ name: "Galerie", id: "gallery" },
|
||
{ name: "Kontakt", id: "contact" }
|
||
]}
|
||
button={{ text: "Termin vereinbaren", href: "#contact" }}
|
||
animateOnLoad={true}
|
||
className="bg-transparent"
|
||
navItemClassName="text-foreground hover:text-primary-cta transition-colors"
|
||
buttonClassName="bg-primary-cta hover:bg-opacity-90 text-primary-cta-text"
|
||
buttonTextClassName="font-semibold"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroSplitDualMedia
|
||
title="Salon DI – Professionelles Haarstyling in Düren"
|
||
description="Moderne Schnitte, Farbe und Styling mit persönlicher Beratung. Erleben Sie Premium-Haarservices in unserem eleganten Salon im Herzen von Düren."
|
||
tag="Professionelle Schönheit"
|
||
tagIcon={Sparkles}
|
||
tagAnimation="slide-up"
|
||
background={{ variant: "plain" }}
|
||
buttons={[
|
||
{ text: "Termin vereinbaren", href: "#contact" },
|
||
{ text: "Jetzt anrufen: 02421 495856", href: "tel:024214958556" }
|
||
]}
|
||
buttonAnimation="blur-reveal"
|
||
mediaItems={[
|
||
{ imageSrc: "http://img.b2bpic.net/free-photo/winter-sports-equipment-complex_482257-76748.jpg", imageAlt: "Elegantes Salon DI Interior mit modernem Design" },
|
||
{ imageSrc: "http://img.b2bpic.net/free-photo/brunette-girl-getting-her-hair-done_23-2148108875.jpg", imageAlt: "Professionelle Haargestaltung bei Salon DI" }
|
||
]}
|
||
mediaAnimation="blur-reveal"
|
||
rating={5}
|
||
ratingText="Bewertet von 200+ zufriedenen Kundinnen"
|
||
ariaLabel="Salon DI Hero Section"
|
||
className="py-20 lg:py-28"
|
||
titleClassName="text-foreground text-5xl lg:text-6xl font-bold tracking-tight"
|
||
descriptionClassName="text-foreground text-lg lg:text-xl opacity-85 leading-relaxed"
|
||
tagClassName="text-primary-cta font-semibold text-sm"
|
||
buttonContainerClassName="flex gap-4 flex-wrap"
|
||
buttonClassName="px-8 py-3 rounded-lg font-semibold transition-all"
|
||
ratingClassName="flex items-center gap-2"
|
||
ratingTextClassName="text-foreground text-sm font-medium"
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<MetricSplitMediaAbout
|
||
title="Über Salon DI – Ihre Schönheit ist unsere Leidenschaft"
|
||
description="Seit Jahren vertrauen Frauen in Düren und Umgebung auf die professionelle Expertise unseres Teams. Wir kombinieren internationale Trendfrisuren mit persönlicher Beratung, um jeden Kundin das perfekte Styling zu geben. Qualität, Professionalität und persönliche Aufmerksamkeit sind die Grundlagen unserer Arbeit."
|
||
metrics={[
|
||
{ value: "15+", title: "Jahre Erfahrung" },
|
||
{ value: "500+", title: "Glückliche Kundinnen" },
|
||
{ value: "100%", title: "Kundenzufriedenheit" }
|
||
]}
|
||
useInvertedBackground={false}
|
||
tag="Über uns"
|
||
tagIcon={Award}
|
||
tagAnimation="slide-up"
|
||
imageSrc="http://img.b2bpic.net/free-photo/winter-sports-equipment-complex_482257-76748.jpg"
|
||
imageAlt="Salon DI Team und Umgebung"
|
||
mediaAnimation="blur-reveal"
|
||
metricsAnimation="slide-up"
|
||
ariaLabel="About Salon DI"
|
||
className="py-20 lg:py-28"
|
||
titleClassName="text-foreground text-4xl lg:text-5xl font-bold"
|
||
descriptionClassName="text-foreground text-lg leading-relaxed opacity-90 max-w-2xl"
|
||
tagClassName="text-primary-cta font-semibold text-sm"
|
||
metricValueClassName="text-primary-cta text-3xl font-bold"
|
||
metricTitleClassName="text-foreground text-sm font-medium"
|
||
/>
|
||
</div>
|
||
|
||
<div id="services" data-section="services">
|
||
<FeatureCardSeven
|
||
title="Unsere Premium-Leistungen"
|
||
description="Wir bieten ein umfassendes Spektrum an professionellen Haarservices für jeden Geschmack und jede Textur."
|
||
tag="Leistungen"
|
||
tagIcon={Sparkles}
|
||
tagAnimation="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
animationType="slide-up"
|
||
features={[
|
||
{ id: 1, title: "Damenhaarschnitt", description: "Moderne und klassische Schnitte, perfekt zugeschnitten für Ihre Gesichtsform und Ihren persönlichen Stil.", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-girl-salon-hairdresser_23-2147769872.jpg", imageAlt: "Professioneller Damenhaarschnitt" },
|
||
{ id: 2, title: "Herrenhaarschnitt", description: "Präzise Schnitte mit modernem Finish für jeden Haartyp und Stil-Wunsch.", imageSrc: "http://img.b2bpic.net/free-photo/professional-girl-hairdresser-makes-client-haircut-girl-is-sitting-mask-beauty-salon_343596-4449.jpg", imageAlt: "Professioneller Herrenhaarschnitt" },
|
||
{ id: 3, title: "Coloration", description: "Professionelle Haarfärbung mit Farbberatung. Wir nutzen hochwertige Produkte für brillante Farben.", imageSrc: "http://img.b2bpic.net/free-photo/blonde-female-friends-dressed-white_273609-6106.jpg", imageAlt: "Professionelle Haarcoloration" },
|
||
{ id: 4, title: "Strähnen & Highlights", description: "Sorgfältig ausgewählte Strähnen und Highlights für Dimension und Bewegung in Ihrem Haar.", imageSrc: "http://img.b2bpic.net/free-photo/blonde-sisters-little-chat_329181-10653.jpg", imageAlt: "Professionelle Haarsträhnen" },
|
||
{ id: 5, title: "Styling & Frisur", description: "Kreatives Styling für jeden Anlass – vom alltäglichen Look bis zum glamourösen Event-Styling.", imageSrc: "http://img.b2bpic.net/free-photo/winter-sports-equipment-complex_482257-76748.jpg", imageAlt: "Professionelles Haarstyling" },
|
||
{ id: 6, title: "Pflegebehandlungen", description: "Intensive Haarpflege und Kuren für glänzendes, gesundes Haar. Wir verwenden nur Premium-Produkte.", imageSrc: "http://img.b2bpic.net/free-photo/brunette-girl-getting-her-hair-done_23-2148108875.jpg", imageAlt: "Professionelle Haarpflege" }
|
||
]}
|
||
ariaLabel="Services Section"
|
||
className="py-20 lg:py-28"
|
||
textBoxTitleClassName="text-foreground text-4xl lg:text-5xl font-bold"
|
||
textBoxDescriptionClassName="text-foreground text-lg opacity-85 leading-relaxed max-w-2xl"
|
||
textBoxTagClassName="text-primary-cta font-semibold text-sm"
|
||
cardClassName="group rounded-lg border border-accent bg-card p-6 hover:shadow-lg transition-all"
|
||
cardTitleClassName="text-foreground text-xl font-bold mt-4"
|
||
cardDescriptionClassName="text-foreground text-sm opacity-80 mt-2 leading-relaxed"
|
||
imageClassName="w-full h-48 object-cover rounded-md"
|
||
/>
|
||
</div>
|
||
|
||
<div id="gallery" data-section="gallery">
|
||
<ProductCardTwo
|
||
title="Galerie – Vorher & Nachher"
|
||
description="Sehen Sie die Transformation unserer Kundinnen. Jedes Projekt ist ein Beweis unserer Handwerk und Leidenschaft."
|
||
tag="Galerie"
|
||
tagIcon={Sparkles}
|
||
tagAnimation="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
animationType="blur-reveal"
|
||
gridVariant="bento-grid"
|
||
products={[
|
||
{ id: "gallery-1", brand: "Transformation", name: "Helle Blondierung mit Layer-Schnitt", price: "€180", rating: 5, reviewCount: "42", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-girl-salon-hairdresser_23-2147769872.jpg", imageAlt: "Blonde Transformation mit modernem Schnitt" },
|
||
{ id: "gallery-2", brand: "Transformation", name: "Bob-Schnitt mit Highlights", price: "€150", rating: 5, reviewCount: "38", imageSrc: "http://img.b2bpic.net/free-photo/professional-girl-hairdresser-makes-client-haircut-girl-is-sitting-mask-beauty-salon_343596-4449.jpg", imageAlt: "Eleganter Bob mit Highlights" },
|
||
{ id: "gallery-3", brand: "Transformation", name: "Tiefenpflege-Treatment", price: "€90", rating: 5, reviewCount: "35", imageSrc: "http://img.b2bpic.net/free-photo/blonde-female-friends-dressed-white_273609-6106.jpg", imageAlt: "Glänzendes Haar nach Tiefenpflege" },
|
||
{ id: "gallery-4", brand: "Transformation", name: "Balayage Haarcoloration", price: "€170", rating: 5, reviewCount: "41", imageSrc: "http://img.b2bpic.net/free-photo/blonde-sisters-little-chat_329181-10653.jpg", imageAlt: "Wunderschöne Balayage Färbung" }
|
||
]}
|
||
ariaLabel="Gallery Section"
|
||
className="py-20 lg:py-28"
|
||
textBoxTitleClassName="text-foreground text-4xl lg:text-5xl font-bold"
|
||
textBoxDescriptionClassName="text-foreground text-lg opacity-85 leading-relaxed max-w-2xl"
|
||
textBoxTagClassName="text-primary-cta font-semibold text-sm"
|
||
cardClassName="group rounded-lg bg-card border border-accent overflow-hidden hover:shadow-lg transition-all"
|
||
cardBrandClassName="text-primary-cta text-xs font-semibold uppercase tracking-wide mt-4"
|
||
cardNameClassName="text-foreground text-lg font-bold mt-2"
|
||
cardPriceClassName="text-primary-cta text-lg font-bold mt-2"
|
||
imageClassName="w-full h-48 object-cover rounded-md"
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardTwelve
|
||
testimonials={[
|
||
{ id: "testimonial-1", name: "Anna M.", imageSrc: "http://img.b2bpic.net/free-photo/cool-business-woman-greeting-sign_1149-1795.jpg", imageAlt: "Anna M. Testimonial" },
|
||
{ id: "testimonial-2", name: "Sandra K.", imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-4107.jpg", imageAlt: "Sandra K. Testimonial" },
|
||
{ id: "testimonial-3", name: "Julia W.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-teenage-girl-sitting-cafe_1262-3048.jpg", imageAlt: "Julia W. Testimonial" },
|
||
{ id: "testimonial-4", name: "Maria L.", imageSrc: "http://img.b2bpic.net/free-photo/confident-cheerful-businesswoman_1262-21021.jpg", imageAlt: "Maria L. Testimonial" },
|
||
{ id: "testimonial-5", name: "Petra H.", imageSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg", imageAlt: "Petra H. Testimonial" },
|
||
{ id: "testimonial-6", name: "Simone B.", imageSrc: "http://img.b2bpic.net/free-photo/front-close-view-young-female-dark-jacket-smiling-pink-background_179666-30965.jpg", imageAlt: "Simone B. Testimonial" }
|
||
]}
|
||
cardTitle="Das sagen unsere Kundinnen"
|
||
cardTag="Google Bewertungen & Empfehlungen"
|
||
cardTagIcon={Star}
|
||
cardAnimation="blur-reveal"
|
||
useInvertedBackground={true}
|
||
ariaLabel="Testimonials Section"
|
||
className="py-20 lg:py-28"
|
||
cardClassName="rounded-lg bg-card border border-accent p-8"
|
||
cardTitleClassName="text-foreground text-4xl lg:text-5xl font-bold"
|
||
cardTagClassName="text-primary-cta font-semibold text-sm uppercase tracking-wide mt-4"
|
||
avatarClassName="w-12 h-12 rounded-full object-cover border-2 border-accent"
|
||
/>
|
||
</div>
|
||
|
||
<div id="socialProof" data-section="socialProof">
|
||
<SocialProofOne
|
||
names={["Google Reviews", "Instagram", "Facebook", "Trustpilot", "5-Sterne bewerteter Salon", "Zertifiziertes Salon-Netzwerk", "Anerkannter Fachbetrieb"]}
|
||
logos={["http://img.b2bpic.net/free-vector/collection-flat-design-go-logo_52683-63684.jpg", "http://img.b2bpic.net/free-vector/gradient-social-media-logos_23-2148073196.jpg", "http://img.b2bpic.net/free-vector/social-media-logo-collection_23-2148135374.jpg", "http://img.b2bpic.net/free-vector/dark-background-with-stars-christmas_1057-2644.jpg", "http://img.b2bpic.net/free-vector/flat-design-patented-label-collection_23-2149676290.jpg", "http://img.b2bpic.net/free-vector/natural-organic-branding-corporate-identity_25819-622.jpg", "http://img.b2bpic.net/free-vector/luxury-logo-design-template_23-2150880417.jpg"]}
|
||
title="Trusted by Customers"
|
||
description="Salon DI wird von Tausenden zufriedenen Kundinnen empfohlen. Besuchen Sie unsere Bewertungen auf Google und lesen Sie, warum wir die erste Wahl für Haarschönheit in Düren sind."
|
||
tag="Vertrauen"
|
||
tagIcon={Shield}
|
||
tagAnimation="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
showCard={true}
|
||
speed={40}
|
||
ariaLabel="Social Proof Section"
|
||
className="py-16 lg:py-24"
|
||
textBoxTitleClassName="sr-only"
|
||
textBoxDescriptionClassName="text-foreground text-center text-lg opacity-80 mb-12 max-w-2xl mx-auto"
|
||
textBoxTagClassName="text-primary-cta font-semibold text-sm uppercase tracking-wide"
|
||
logoItemClassName="flex items-center justify-center"
|
||
logoCardClassName="rounded-lg bg-card border border-accent p-6 flex items-center justify-center"
|
||
logoImageClassName="h-8 w-auto object-contain"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactSplit
|
||
tag="Kontakt"
|
||
title="Nehmen Sie Kontakt auf – Termin vereinbaren"
|
||
description="Buchen Sie jetzt Ihren Termin für ein persönliches Beratungsgespräch. Unser Team freut sich auf Sie!"
|
||
tagIcon={Sparkles}
|
||
tagAnimation="slide-up"
|
||
background={{ variant: "plain" }}
|
||
useInvertedBackground={true}
|
||
inputPlaceholder="Ihre E-Mail Adresse"
|
||
buttonText="Termin anfragen"
|
||
termsText="Mit dem Absenden stimmen Sie unserer Datenschutzerklärung zu."
|
||
mediaPosition="right"
|
||
imageSrc="http://img.b2bpic.net/free-photo/winter-sports-equipment-complex_482257-76748.jpg"
|
||
imageAlt="Salon DI Kontakt"
|
||
mediaAnimation="blur-reveal"
|
||
ariaLabel="Contact Section"
|
||
className="py-20 lg:py-28"
|
||
containerClassName="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"
|
||
titleClassName="text-foreground text-4xl lg:text-5xl font-bold"
|
||
descriptionClassName="text-foreground text-lg opacity-85 leading-relaxed mt-6"
|
||
tagClassName="text-primary-cta font-semibold text-sm uppercase tracking-wide"
|
||
inputClassName="w-full px-4 py-3 rounded-lg border border-accent bg-accent text-foreground focus:outline-none focus:ring-2 focus:ring-primary-cta"
|
||
buttonClassName="px-6 py-3 rounded-lg bg-primary-cta text-primary-cta-text font-semibold hover:opacity-90 transition-all"
|
||
termsClassName="text-foreground text-xs opacity-70 mt-4"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterBaseReveal
|
||
columns={[
|
||
{
|
||
title: "Salon DI", items: [
|
||
{ label: "Über uns", href: "#about" },
|
||
{ label: "Leistungen", href: "#services" },
|
||
{ label: "Galerie", href: "#gallery" },
|
||
{ label: "Team", href: "#testimonials" }
|
||
]
|
||
},
|
||
{
|
||
title: "Kontakt", items: [
|
||
{ label: "Van-der-Giese-Straße 19, 52351 Düren", href: "https://maps.google.com/?q=Van-der-Giese-Straße+19,+52351+Düren" },
|
||
{ label: "Tel: 02421 495856", href: "tel:024214958556" },
|
||
{ label: "info@salon-di.de", href: "mailto:info@salon-di.de" }
|
||
]
|
||
},
|
||
{
|
||
title: "Öffnungszeiten", items: [
|
||
{ label: "Mo – Fr: 09:00 – 18:00 Uhr", href: "#" },
|
||
{ label: "Sa: 09:00 – 16:00 Uhr", href: "#" },
|
||
{ label: "So: Geschlossen", href: "#" }
|
||
]
|
||
},
|
||
{
|
||
title: "Folgen Sie uns", items: [
|
||
{ label: "Instagram", href: "https://instagram.com" },
|
||
{ label: "Facebook", href: "https://facebook.com" },
|
||
{ label: "Google Reviews", href: "https://google.com" }
|
||
]
|
||
}
|
||
]}
|
||
copyrightText="© 2024 Salon DI. Alle Rechte vorbehalten."
|
||
ariaLabel="Footer"
|
||
className="border-t border-accent py-16 lg:py-20"
|
||
columnsClassName="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12"
|
||
columnTitleClassName="text-foreground font-bold text-lg mb-6"
|
||
columnItemClassName="text-foreground opacity-75 hover:opacity-100 transition-opacity text-sm"
|
||
copyrightTextClassName="text-foreground opacity-60 text-sm text-center"
|
||
/>
|
||
</div>
|
||
</ThemeProvider>
|
||
);
|
||
} |