Merge version_1 into main #2
308
src/app/page.tsx
308
src/app/page.tsx
@@ -32,28 +32,14 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Preise",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Kontakt",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Preise", id: "pricing" },
|
||||
{ name: "Kontakt", id: "contact" },
|
||||
]}
|
||||
brandName="Salon Sidar"
|
||||
button={{
|
||||
text: "Termin buchen",
|
||||
href: "#contact",
|
||||
}}
|
||||
text: "Termin buchen", href: "#contact"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -62,75 +48,24 @@ export default function LandingPage() {
|
||||
title="Präzision. Stil. Persönlichkeit."
|
||||
description="Premium-Haarschnitte, moderne Fades und perfektes Barber-Handwerk — in luxuriöser Atmosphäre mitten in der Stadt."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Maximilian M.",
|
||||
handle: "@max_m",
|
||||
testimonial: "Einfach der beste Barber in Stuttgart. Handwerkliche Perfektion.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-handsome-man-holding-her-girlfriend-s-hand_23-2147891265.jpg",
|
||||
},
|
||||
{
|
||||
name: "Lukas K.",
|
||||
handle: "@lukas_k",
|
||||
testimonial: "Ambiente ist 1A. Man fühlt sich sofort wohl.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-barber-shop-concept_23-2148506342.jpg",
|
||||
},
|
||||
{
|
||||
name: "David S.",
|
||||
handle: "@dave_s",
|
||||
testimonial: "Mein Sohn war sehr aufgeregt, aber Khaled war super geduldig.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230931.jpg",
|
||||
},
|
||||
{
|
||||
name: "Tobias B.",
|
||||
handle: "@tobi_b",
|
||||
testimonial: "Der Fade ist auf absolutem Top-Niveau.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-senior-man-laughing_23-2151203948.jpg",
|
||||
},
|
||||
{
|
||||
name: "Julian R.",
|
||||
handle: "@julian_r",
|
||||
testimonial: "Preis-Leistung für diesen Luxus-Service unschlagbar.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-getting-his-hair-cut-barber-shop4_23-2149186458.jpg",
|
||||
},
|
||||
{ name: "Maximilian M.", handle: "@max_m", testimonial: "Einfach der beste Barber in Stuttgart. Handwerkliche Perfektion.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-handsome-man-holding-her-girlfriend-s-hand_23-2147891265.jpg" },
|
||||
{ name: "Lukas K.", handle: "@lukas_k", testimonial: "Ambiente ist 1A. Man fühlt sich sofort wohl.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/front-view-barber-shop-concept_23-2148506342.jpg" },
|
||||
{ name: "David S.", handle: "@dave_s", testimonial: "Mein Sohn war sehr aufgeregt, aber Khaled war super geduldig.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230931.jpg" },
|
||||
{ name: "Tobias B.", handle: "@tobi_b", testimonial: "Der Fade ist auf absolutem Top-Niveau.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/side-view-senior-man-laughing_23-2151203948.jpg" },
|
||||
{ name: "Julian R.", handle: "@julian_r", testimonial: "Preis-Leistung für diesen Luxus-Service unschlagbar.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-getting-his-hair-cut-barber-shop4_23-2149186458.jpg" },
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Termin buchen",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "Preise ansehen",
|
||||
href: "#pricing",
|
||||
},
|
||||
{ text: "Termin buchen", href: "#contact" },
|
||||
{ text: "Preise ansehen", href: "#pricing" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7242.jpg?_wi=1"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7242.jpg"
|
||||
imageAlt="barber shop interior premium style"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7242.jpg",
|
||||
alt: "satisfied male client haircut smile",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/world-theatre-day-celebration_23-2151185628.jpg",
|
||||
alt: "young man haircut professional style",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-stylish-maledressed-suit-grey-background_613910-1592.jpg",
|
||||
alt: "man looking clean shave grooming",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-man-with-tattoo-his-face-with-crossed-arms-dressed-white-shirt-grey-background_613910-8120.jpg",
|
||||
alt: "confident man stylish hair fade",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-handsome-man-holding-her-girlfriend-s-hand_23-2147891265.jpg",
|
||||
alt: "satisfied male customer groomingsession",
|
||||
},
|
||||
{ src: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7242.jpg", alt: "satisfied male client haircut smile" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/world-theatre-day-celebration_23-2151185628.jpg", alt: "young man haircut professional style" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-stylish-maledressed-suit-grey-background_613910-1592.jpg", alt: "man looking clean shave grooming" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-man-with-tattoo-his-face-with-crossed-arms-dressed-white-shirt-grey-background_613910-8120.jpg", alt: "confident man stylish hair fade" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/smiling-handsome-man-holding-her-girlfriend-s-hand_23-2147891265.jpg", alt: "satisfied male customer groomingsession" },
|
||||
]}
|
||||
avatarText="Mehr als 500+ zufriedene Kunden"
|
||||
/>
|
||||
@@ -141,7 +76,7 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
title="Mehr als nur ein Haarschnitt"
|
||||
description="Bei Salon Sidar geht es nicht nur um Haare. Es geht darum, sich selbstbewusst, gepflegt und wohlzufühlen. Wir verbinden meisterhafte Präzision mit einer entspannten Luxus-Atmosphäre."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/world-theatre-day-celebration_23-2151185628.jpg?_wi=1"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/world-theatre-day-celebration_23-2151185628.jpg"
|
||||
imageAlt="luxurious hair salon interior design"
|
||||
/>
|
||||
</div>
|
||||
@@ -152,46 +87,11 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Herrenhaarschnitt",
|
||||
description: "Präzise Schnitte individuell auf deinen Stil abgestimmt.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Scissors,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-washbasin_107420-94763.jpg",
|
||||
imageAlt: "Close-up of washbasin",
|
||||
},
|
||||
{
|
||||
title: "Fade & Taper",
|
||||
description: "Saubere Übergänge auf höchstem Niveau.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Zap,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7242.jpg?_wi=2",
|
||||
imageAlt: "Close-up of washbasin",
|
||||
},
|
||||
{
|
||||
title: "Bartpflege",
|
||||
description: "Konturen, Form & Pflege für einen perfekten Look.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Scissors,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/world-theatre-day-celebration_23-2151185628.jpg?_wi=2",
|
||||
imageAlt: "Close-up of washbasin",
|
||||
},
|
||||
{
|
||||
title: "Komplettpaket",
|
||||
description: "Haare, Bart, Augenbrauen & Styling.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Award,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-maledressed-suit-grey-background_613910-1592.jpg?_wi=1",
|
||||
imageAlt: "Close-up of washbasin",
|
||||
},
|
||||
{
|
||||
title: "Kinderhaarschnitt",
|
||||
description: "Geduldiger und freundlicher Service für die Kleinen.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Smile,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-with-tattoo-his-face-with-crossed-arms-dressed-white-shirt-grey-background_613910-8120.jpg?_wi=1",
|
||||
imageAlt: "Close-up of washbasin",
|
||||
},
|
||||
{ title: "Herrenhaarschnitt", description: "Präzise Schnitte individuell auf deinen Stil abgestimmt.", bentoComponent: "reveal-icon", icon: Scissors },
|
||||
{ title: "Fade & Taper", description: "Saubere Übergänge auf höchstem Niveau.", bentoComponent: "reveal-icon", icon: Zap },
|
||||
{ title: "Bartpflege", description: "Konturen, Form & Pflege für einen perfekten Look.", bentoComponent: "reveal-icon", icon: Scissors },
|
||||
{ title: "Komplettpaket", description: "Haare, Bart, Augenbrauen & Styling.", bentoComponent: "reveal-icon", icon: Award },
|
||||
{ title: "Kinderhaarschnitt", description: "Geduldiger und freundlicher Service für die Kleinen.", bentoComponent: "reveal-icon", icon: Smile },
|
||||
]}
|
||||
title="Unsere Services"
|
||||
description="Von präzisen Fades bis hin zu ritueller Bartpflege."
|
||||
@@ -202,36 +102,13 @@ export default function LandingPage() {
|
||||
<ProductCardOne
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "g1",
|
||||
name: "Salon Interior",
|
||||
price: "Gepflegt",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/composition-shaving-objects_23-2148122054.jpg",
|
||||
imageAlt: "luxurious hair salon interior design",
|
||||
},
|
||||
{
|
||||
id: "g2",
|
||||
name: "Barber Chair",
|
||||
price: "Luxuriös",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-barber-sitting-his-shop_23-2149186516.jpg",
|
||||
imageAlt: "barber shop interior premium style",
|
||||
},
|
||||
{
|
||||
id: "g3",
|
||||
name: "Kaffee-Service",
|
||||
price: "Entspannt",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-maledressed-suit-grey-background_613910-1592.jpg?_wi=2",
|
||||
imageAlt: "men fade haircut extreme detail",
|
||||
},
|
||||
{
|
||||
id: "g4",
|
||||
name: "Detail Shots",
|
||||
price: "Präzise",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-with-tattoo-his-face-with-crossed-arms-dressed-white-shirt-grey-background_613910-8120.jpg?_wi=2",
|
||||
imageAlt: "professional barber portrait confident",
|
||||
},
|
||||
{ id: "g1", name: "Salon Interior", price: "Gepflegt", imageSrc: "http://img.b2bpic.net/free-photo/composition-shaving-objects_23-2148122054.jpg", imageAlt: "luxurious hair salon interior design" },
|
||||
{ id: "g2", name: "Barber Chair", price: "Luxuriös", imageSrc: "http://img.b2bpic.net/free-photo/male-barber-sitting-his-shop_23-2149186516.jpg", imageAlt: "barber shop interior premium style" },
|
||||
{ id: "g3", name: "Kaffee-Service", price: "Entspannt", imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-maledressed-suit-grey-background_613910-1592.jpg", imageAlt: "men fade haircut extreme detail" },
|
||||
{ id: "g4", name: "Detail Shots", price: "Präzise", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-with-tattoo-his-face-with-crossed-arms-dressed-white-shirt-grey-background_613910-8120.jpg", imageAlt: "professional barber portrait confident" },
|
||||
]}
|
||||
title="Luxus-Ambiente"
|
||||
description="Ein Ort zum Abschalten. Modern, stilvoll und bis ins Detail gepflegt."
|
||||
@@ -245,51 +122,11 @@ export default function LandingPage() {
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Maximilian M.",
|
||||
role: "Stuttgart",
|
||||
company: "Stammkunde",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon-styling-beard-with-trimmer_613910-5073.jpg",
|
||||
imageAlt: "satisfied male client haircut smile",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Lukas K.",
|
||||
role: "Stuttgart",
|
||||
company: "Neukunde",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-two-male-barbers-looking-camera_23-2147839857.jpg",
|
||||
imageAlt: "young man haircut professional style",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "David S.",
|
||||
role: "Stuttgart",
|
||||
company: "Familienvater",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-woman-drinking-coffee_23-2148020563.jpg",
|
||||
imageAlt: "man looking clean shave grooming",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Tobias B.",
|
||||
role: "Stuttgart",
|
||||
company: "Stammkunde",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-transgender-wearing-cool-jacket_23-2149105399.jpg",
|
||||
imageAlt: "confident man stylish hair fade",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Julian R.",
|
||||
role: "Stuttgart",
|
||||
company: "Stammkunde",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-boy-learning-how-shave_23-2149450891.jpg",
|
||||
imageAlt: "satisfied male customer groomingsession",
|
||||
},
|
||||
{ id: "1", name: "Maximilian M.", role: "Stuttgart", company: "Stammkunde", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon-styling-beard-with-trimmer_613910-5073.jpg", imageAlt: "satisfied male client haircut smile" },
|
||||
{ id: "2", name: "Lukas K.", role: "Stuttgart", company: "Neukunde", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-two-male-barbers-looking-camera_23-2147839857.jpg", imageAlt: "young man haircut professional style" },
|
||||
{ id: "3", name: "David S.", role: "Stuttgart", company: "Familienvater", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/modern-woman-drinking-coffee_23-2148020563.jpg", imageAlt: "man looking clean shave grooming" },
|
||||
{ id: "4", name: "Tobias B.", role: "Stuttgart", company: "Stammkunde", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-transgender-wearing-cool-jacket_23-2149105399.jpg", imageAlt: "confident man stylish hair fade" },
|
||||
{ id: "5", name: "Julian R.", role: "Stuttgart", company: "Stammkunde", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-boy-learning-how-shave_23-2149450891.jpg", imageAlt: "satisfied male customer groomingsession" },
|
||||
]}
|
||||
title="Kunden lieben Salon Sidar"
|
||||
description="Was unsere Kunden über ihren Besuch bei uns sagen."
|
||||
@@ -303,12 +140,7 @@ export default function LandingPage() {
|
||||
tag="Unser Inhaber"
|
||||
membersAnimation="slide-up"
|
||||
members={[
|
||||
{
|
||||
id: "khaled",
|
||||
name: "Khaled - Inhaber & Meister",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pleased-slavic-middle-aged-male-barber-uniform-holding-barber-tools-isolated-purple-wall_141793-91610.jpg",
|
||||
imageAlt: "professional barber portrait confident",
|
||||
},
|
||||
{ id: "khaled", name: "Khaled - Inhaber & Meister", imageSrc: "http://img.b2bpic.net/free-photo/pleased-slavic-middle-aged-male-barber-uniform-holding-barber-tools-isolated-purple-wall_141793-91610.jpg", imageAlt: "professional barber portrait confident" },
|
||||
]}
|
||||
memberVariant="card"
|
||||
/>
|
||||
@@ -320,58 +152,11 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "p1",
|
||||
badge: "Basic",
|
||||
price: "25€",
|
||||
subtitle: "Herrenhaarschnitt",
|
||||
features: [
|
||||
"Präziser Schnitt",
|
||||
"Individuelle Beratung",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
badge: "Pop",
|
||||
price: "28€",
|
||||
subtitle: "Fade / Taper",
|
||||
features: [
|
||||
"Saubere Übergänge",
|
||||
"Top-Niveau",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
badge: "Best",
|
||||
price: "35€",
|
||||
subtitle: "Haare & Bart",
|
||||
features: [
|
||||
"Komplette Pflege",
|
||||
"Konturen-Check",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
badge: "Eco",
|
||||
price: "18€",
|
||||
subtitle: "Kinderhaarschnitt",
|
||||
features: [
|
||||
"Geduldiger Service",
|
||||
"Freundlich",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
badge: "Pro",
|
||||
price: "45€",
|
||||
subtitle: "Komplettpaket",
|
||||
features: [
|
||||
"Haare",
|
||||
"Bart",
|
||||
"Augenbrauen",
|
||||
"Styling",
|
||||
],
|
||||
},
|
||||
{ id: "p1", badge: "Basic", price: "25€", subtitle: "Herrenhaarschnitt", features: ["Präziser Schnitt", "Individuelle Beratung"] },
|
||||
{ id: "p2", badge: "Pop", price: "28€", subtitle: "Fade / Taper", features: ["Saubere Übergänge", "Top-Niveau"] },
|
||||
{ id: "p3", badge: "Best", price: "35€", subtitle: "Haare & Bart", features: ["Komplette Pflege", "Konturen-Check"] },
|
||||
{ id: "p4", badge: "Eco", price: "18€", subtitle: "Kinderhaarschnitt", features: ["Geduldiger Service", "Freundlich"] },
|
||||
{ id: "p5", badge: "Pro", price: "45€", subtitle: "Komplettpaket", features: ["Haare", "Bart", "Augenbrauen", "Styling"] },
|
||||
]}
|
||||
title="Unsere Preise"
|
||||
description="Faire Preise für echte Premium-Qualität."
|
||||
@@ -381,18 +166,11 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Termin sichern"
|
||||
title="Zeit für deinen perfekten Look"
|
||||
description="Buche jetzt deinen Termin bei Salon Sidar und erlebe modernes Barber-Handwerk auf höchstem Niveau."
|
||||
buttons={[
|
||||
{
|
||||
text: "Jetzt Termin sichern",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Jetzt Termin sichern", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -405,4 +183,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user