Merge version_1 into main #2
@@ -78,19 +78,13 @@ export default function GalleryPage() {
|
||||
useInvertedBackground={false}
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Professionelle Haarschnitte",
|
||||
description: "Sieh unsere Expertise bei klassischen und modernen Haarschnitten für alle Haartypen.",
|
||||
},
|
||||
title: "Professionelle Haarschnitte", description: "Sieh unsere Expertise bei klassischen und modernen Haarschnitten für alle Haartypen."},
|
||||
{
|
||||
title: "Bart & Styling",
|
||||
description: "Beeindruckende Bart-Designs und Premium Styling Arbeiten unserer Master-Barber.",
|
||||
},
|
||||
title: "Bart & Styling", description: "Beeindruckende Bart-Designs und Premium Styling Arbeiten unserer Master-Barber."},
|
||||
{
|
||||
title: "Kundenarbeiten",
|
||||
description: "Echte Transformationen und zufriedene Kunden aus ganz Deutschland.",
|
||||
},
|
||||
title: "Kundenarbeiten", description: "Echte Transformationen und zufriedene Kunden aus ganz Deutschland."},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/mid-section-view-hairdresser-s-hand-with-electric-trimmer_23-2147839811.jpg?_wi=2"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/mid-section-view-hairdresser-s-hand-with-electric-trimmer_23-2147839811.jpg"
|
||||
imageAlt="Barbershop Galerie"
|
||||
imagePosition="right"
|
||||
mediaAnimation="slide-up"
|
||||
@@ -105,18 +99,9 @@ export default function GalleryPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Handwerkskammer Deutschland",
|
||||
"Friseur Innung",
|
||||
"Berufsgenossenschaft",
|
||||
"Barbershop Union",
|
||||
"Deutsche Handwerkszentralstelle",
|
||||
"Meister Vereinigung",
|
||||
"Qualitäts-Siegel",
|
||||
"Premium Barber Club",
|
||||
]}
|
||||
"Handwerkskammer Deutschland", "Friseur Innung", "Berufsgenossenschaft", "Barbershop Union", "Deutsche Handwerkszentralstelle", "Meister Vereinigung", "Qualitäts-Siegel", "Premium Barber Club"]}
|
||||
speed={40}
|
||||
showCard={true}
|
||||
animationType="none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -128,13 +113,9 @@ export default function GalleryPage() {
|
||||
description="Buche deinen Termin und erlebt die meisterhafte Barberkunst persönlich. Deine Transformation wartet auf dich!"
|
||||
buttons={[
|
||||
{
|
||||
text: "Termin buchen",
|
||||
href: "/#contact",
|
||||
},
|
||||
text: "Termin buchen", href: "/#contact"},
|
||||
{
|
||||
text: "Mehr erfahren",
|
||||
href: "/services",
|
||||
},
|
||||
text: "Mehr erfahren", href: "/services"},
|
||||
]}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
|
||||
187
src/app/page.tsx
187
src/app/page.tsx
@@ -65,17 +65,11 @@ export default function HomePage() {
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mid-section-view-hairdresser-s-hand-with-electric-trimmer_23-2147839811.jpg?_wi=1",
|
||||
imageAlt: "Barbershop Interior",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mid-section-view-hairdresser-s-hand-with-electric-trimmer_23-2147839811.jpg", imageAlt: "Barbershop Interior"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-cut-hair-her-client-hair-salon_1157-27201.jpg",
|
||||
imageAlt: "Professionelle Haarschnitte",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-cut-hair-her-client-hair-salon_1157-27201.jpg", imageAlt: "Professionelle Haarschnitte"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-with-scissors-comb-barbershop-close-up-photo_613910-18538.jpg",
|
||||
imageAlt: "Barber beim Arbeiten",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-with-scissors-comb-barbershop-close-up-photo_613910-18538.jpg", imageAlt: "Barber beim Arbeiten"},
|
||||
]}
|
||||
autoplayDelay={5000}
|
||||
showDimOverlay={true}
|
||||
@@ -92,22 +86,16 @@ export default function HomePage() {
|
||||
useInvertedBackground={false}
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Höchste Qualitätsstandards",
|
||||
description: "Wir verwenden nur Premium-Produkte und legen großen Wert auf hygienische Standards in jedem Arbeitsschritt.",
|
||||
icon: CheckCircle,
|
||||
title: "Höchste Qualitätsstandards", description: "Wir verwenden nur Premium-Produkte und legen großen Wert auf hygienische Standards in jedem Arbeitsschritt.", icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
title: "Erfahrene Meister-Barber",
|
||||
description: "Unser Team bringt jahrelange Erfahrung und Zertifikationen in traditioneller und moderner Barberkunst mit.",
|
||||
icon: Award,
|
||||
title: "Erfahrene Meister-Barber", description: "Unser Team bringt jahrelange Erfahrung und Zertifikationen in traditioneller und moderner Barberkunst mit.", icon: Award,
|
||||
},
|
||||
{
|
||||
title: "Kundenservice im Fokus",
|
||||
description: "Jeder Kunde ist uns wichtig. Wir nehmen uns Zeit für Beratung und schaffen eine entspannte Atmosphäre.",
|
||||
icon: Users,
|
||||
title: "Kundenservice im Fokus", description: "Jeder Kunde ist uns wichtig. Wir nehmen uns Zeit für Beratung und schaffen eine entspannte Atmosphäre.", icon: Users,
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/sideways-costumer-beauty-salon_23-2148242856.jpg?_wi=1"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/sideways-costumer-beauty-salon_23-2148242856.jpg"
|
||||
imageAlt="Barbershop Team"
|
||||
imagePosition="right"
|
||||
mediaAnimation="slide-up"
|
||||
@@ -124,34 +112,22 @@ export default function HomePage() {
|
||||
features={[
|
||||
{
|
||||
icon: Scissors,
|
||||
title: "Herrenhaarschnitt",
|
||||
description: "Professioneller Haarschnitt mit modernen Techniken und klassischem Handwerk. Alle Haartypen werden individuell beraten.",
|
||||
},
|
||||
title: "Herrenhaarschnitt", description: "Professioneller Haarschnitt mit modernen Techniken und klassischem Handwerk. Alle Haartypen werden individuell beraten."},
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: "Bart Styling & Pflege",
|
||||
description: "Bart trimmen, formen und pflegen – vom klassischen zum modernen Look. Mit hochwertigen Bartölen und Produkten.",
|
||||
},
|
||||
title: "Bart Styling & Pflege", description: "Bart trimmen, formen und pflegen – vom klassischen zum modernen Look. Mit hochwertigen Bartölen und Produkten."},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Nassrasur mit Messer",
|
||||
description: "Traditionelle Nassrasur für eine gründliche Rasur mit höchstem Komfort. Ein Premium-Erlebnis für echte Männer.",
|
||||
},
|
||||
title: "Nassrasur mit Messer", description: "Traditionelle Nassrasur für eine gründliche Rasur mit höchstem Komfort. Ein Premium-Erlebnis für echte Männer."},
|
||||
{
|
||||
icon: Wand2,
|
||||
title: "Haarstyling",
|
||||
description: "Professionelles Styling für Events und Alltag. Mit Premium-Produkten und fachkundiger Beratung.",
|
||||
},
|
||||
title: "Haarstyling", description: "Professionelles Styling für Events und Alltag. Mit Premium-Produkten und fachkundiger Beratung."},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Kinderhaarschnitt",
|
||||
description: "Kinderfreundliche Haarschnitte in entspannter Atmosphäre. Wir arbeiten geduldig mit den Kleinen.",
|
||||
},
|
||||
title: "Kinderhaarschnitt", description: "Kinderfreundliche Haarschnitte in entspannter Atmosphäre. Wir arbeiten geduldig mit den Kleinen."},
|
||||
{
|
||||
icon: Droplets,
|
||||
title: "Gesichtsbehandlung",
|
||||
description: "Entspannende Gesichtsbehandlung für Männer mit hochwertigen Produkten und Fachkompetenz.",
|
||||
},
|
||||
title: "Gesichtsbehandlung", description: "Entspannende Gesichtsbehandlung für Männer mit hochwertigen Produkten und Fachkompetenz."},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
/>
|
||||
@@ -166,61 +142,25 @@ export default function HomePage() {
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "haircut",
|
||||
tag: "Herrenhaarschnitt",
|
||||
tagIcon: Scissors,
|
||||
price: "€25",
|
||||
period: "",
|
||||
description: "Professioneller Haarschnitt mit Beratung und Styling",
|
||||
button: {
|
||||
text: "Buchen",
|
||||
href: "booking",
|
||||
},
|
||||
featuresTitle: "Enthalten:",
|
||||
features: [
|
||||
"Professionelle Beratung",
|
||||
"Haarschnitt nach Wunsch",
|
||||
"Finishing und Styling",
|
||||
"Qualitätsgarantie",
|
||||
],
|
||||
id: "haircut", tag: "Herrenhaarschnitt", tagIcon: Scissors,
|
||||
price: "€25", period: "", description: "Professioneller Haarschnitt mit Beratung und Styling", button: {
|
||||
text: "Buchen", href: "booking"},
|
||||
featuresTitle: "Enthalten:", features: [
|
||||
"Professionelle Beratung", "Haarschnitt nach Wunsch", "Finishing und Styling", "Qualitätsgarantie"],
|
||||
},
|
||||
{
|
||||
id: "beard",
|
||||
tag: "Bart & Rasur",
|
||||
tagIcon: Sparkles,
|
||||
price: "€20",
|
||||
period: "",
|
||||
description: "Bart trimmen, formen oder Nassrasur mit Messer",
|
||||
button: {
|
||||
text: "Buchen",
|
||||
href: "booking",
|
||||
},
|
||||
featuresTitle: "Enthalten:",
|
||||
features: [
|
||||
"Professionelle Analyse",
|
||||
"Bart trimmen oder Rasur",
|
||||
"Premium Produkte",
|
||||
"Pflegetipps inklusive",
|
||||
],
|
||||
id: "beard", tag: "Bart & Rasur", tagIcon: Sparkles,
|
||||
price: "€20", period: "", description: "Bart trimmen, formen oder Nassrasur mit Messer", button: {
|
||||
text: "Buchen", href: "booking"},
|
||||
featuresTitle: "Enthalten:", features: [
|
||||
"Professionelle Analyse", "Bart trimmen oder Rasur", "Premium Produkte", "Pflegetipps inklusive"],
|
||||
},
|
||||
{
|
||||
id: "combo",
|
||||
tag: "Komplettpaket",
|
||||
tagIcon: Zap,
|
||||
price: "€40",
|
||||
period: "",
|
||||
description: "Haarschnitt + Bart + Nassrasur – Das komplette Paket",
|
||||
button: {
|
||||
text: "Buchen",
|
||||
href: "booking",
|
||||
},
|
||||
featuresTitle: "Enthalten:",
|
||||
features: [
|
||||
"Vollständige Beratung",
|
||||
"Premium Haarschnitt",
|
||||
"Bart Styling & Rasur",
|
||||
"Gesichtsbehandlung",
|
||||
],
|
||||
id: "combo", tag: "Komplettpaket", tagIcon: Zap,
|
||||
price: "€40", period: "", description: "Haarschnitt + Bart + Nassrasur – Das komplette Paket", button: {
|
||||
text: "Buchen", href: "booking"},
|
||||
featuresTitle: "Enthalten:", features: [
|
||||
"Vollständige Beratung", "Premium Haarschnitt", "Bart Styling & Rasur", "Gesichtsbehandlung"],
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
@@ -237,59 +177,23 @@ export default function HomePage() {
|
||||
showRating={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Marcus Schmidt",
|
||||
handle: "@marcus_s",
|
||||
testimonial: "Bester Barbershop in der Stadt! Der Barber versteht sein Handwerk wirklich. Immer sauber, professionell und freundlich.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1689.jpg",
|
||||
imageAlt: "Marcus Schmidt",
|
||||
},
|
||||
id: "1", name: "Marcus Schmidt", handle: "@marcus_s", testimonial: "Bester Barbershop in der Stadt! Der Barber versteht sein Handwerk wirklich. Immer sauber, professionell und freundlich.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1689.jpg", imageAlt: "Marcus Schmidt"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Thomas Weber",
|
||||
handle: "@th_weber",
|
||||
testimonial: "Die Nassrasur mit Messer ist ein absolutes Highlight. Premium Service zu fairen Preisen. Ich komme gerne wieder!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/european-man-smiling-cheerful-expression-closeup-portrait_53876-129391.jpg",
|
||||
imageAlt: "Thomas Weber",
|
||||
},
|
||||
id: "2", name: "Thomas Weber", handle: "@th_weber", testimonial: "Die Nassrasur mit Messer ist ein absolutes Highlight. Premium Service zu fairen Preisen. Ich komme gerne wieder!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/european-man-smiling-cheerful-expression-closeup-portrait_53876-129391.jpg", imageAlt: "Thomas Weber"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Daniel Müller",
|
||||
handle: "@daniel_m",
|
||||
testimonial: "Großartig! Die Barber sind wirklich Profis. Mein Bart sieht perfekt aus. Empfehle den Shop jedem meiner Freunde.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-confident-young-sportsman-doing-exercises-hands-holding-his-hand_8353-6431.jpg",
|
||||
imageAlt: "Daniel Müller",
|
||||
},
|
||||
id: "3", name: "Daniel Müller", handle: "@daniel_m", testimonial: "Großartig! Die Barber sind wirklich Profis. Mein Bart sieht perfekt aus. Empfehle den Shop jedem meiner Freunde.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-confident-young-sportsman-doing-exercises-hands-holding-his-hand_8353-6431.jpg", imageAlt: "Daniel Müller"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Klaus Hoffmann",
|
||||
handle: "@klaus_h",
|
||||
testimonial: "Traditionelle Handarbeit mit modernem Flair. Der Service ist exzellent und die Atmosphäre angenehm. Top Barbershop!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-holding-his-arms-crossed-christmas_23-2148737963.jpg",
|
||||
imageAlt: "Klaus Hoffmann",
|
||||
},
|
||||
id: "4", name: "Klaus Hoffmann", handle: "@klaus_h", testimonial: "Traditionelle Handarbeit mit modernem Flair. Der Service ist exzellent und die Atmosphäre angenehm. Top Barbershop!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-holding-his-arms-crossed-christmas_23-2148737963.jpg", imageAlt: "Klaus Hoffmann"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Stefan Wagner",
|
||||
handle: "@stefan_w",
|
||||
testimonial: "Endlich einen Barbershop gefunden, der Qualität ernst nimmt. Sehr kompetent, sauber und inspirierend. Danke!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/trendy-young-man-shirt-with-jacket-his-shoulder_613910-10662.jpg",
|
||||
imageAlt: "Stefan Wagner",
|
||||
},
|
||||
id: "5", name: "Stefan Wagner", handle: "@stefan_w", testimonial: "Endlich einen Barbershop gefunden, der Qualität ernst nimmt. Sehr kompetent, sauber und inspirierend. Danke!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/trendy-young-man-shirt-with-jacket-his-shoulder_613910-10662.jpg", imageAlt: "Stefan Wagner"},
|
||||
{
|
||||
id: "6",
|
||||
name: "Robert Klein",
|
||||
handle: "@robert_k",
|
||||
testimonial: "Der beste Haarschnitt, den ich je bekommen habe. Die Barber verstehen wirklich ihr Handwerk. Absolute Empfehlung!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-man-taking-photo-camera-street_1262-20449.jpg",
|
||||
imageAlt: "Robert Klein",
|
||||
},
|
||||
id: "6", name: "Robert Klein", handle: "@robert_k", testimonial: "Der beste Haarschnitt, den ich je bekommen habe. Die Barber verstehen wirklich ihr Handwerk. Absolute Empfehlung!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-man-taking-photo-camera-street_1262-20449.jpg", imageAlt: "Robert Klein"},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
/>
|
||||
@@ -303,18 +207,9 @@ export default function HomePage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Handwerkskammer Deutschland",
|
||||
"Friseur Innung",
|
||||
"Berufsgenossenschaft",
|
||||
"Barbershop Union",
|
||||
"Deutsche Handwerkszentralstelle",
|
||||
"Meister Vereinigung",
|
||||
"Qualitäts-Siegel",
|
||||
"Premium Barber Club",
|
||||
]}
|
||||
"Handwerkskammer Deutschland", "Friseur Innung", "Berufsgenossenschaft", "Barbershop Union", "Deutsche Handwerkszentralstelle", "Meister Vereinigung", "Qualitäts-Siegel", "Premium Barber Club"]}
|
||||
speed={40}
|
||||
showCard={true}
|
||||
animationType="none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,51 +1,33 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import useSvgTextLogo from "./useSvgTextLogo";
|
||||
import { cls } from "@/lib/utils";
|
||||
import React from "react";
|
||||
|
||||
interface SvgTextLogoProps {
|
||||
logoText: string;
|
||||
adjustHeightFactor?: number;
|
||||
verticalAlign?: "top" | "center";
|
||||
text: string;
|
||||
className?: string;
|
||||
textClassName?: string;
|
||||
fillColor?: string;
|
||||
}
|
||||
|
||||
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
|
||||
logoText,
|
||||
adjustHeightFactor,
|
||||
verticalAlign = "top",
|
||||
className = "",
|
||||
}) {
|
||||
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
|
||||
|
||||
export function SvgTextLogo({
|
||||
text,
|
||||
className = "", textClassName = "", fillColor = "currentColor"}: SvgTextLogoProps) {
|
||||
return (
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox={viewBox}
|
||||
className={cls("w-full", className)}
|
||||
style={{ aspectRatio: aspectRatio }}
|
||||
preserveAspectRatio="none"
|
||||
role="img"
|
||||
aria-label={`${logoText} logo`}
|
||||
viewBox={`0 0 ${text.length * 60} 100`}
|
||||
className={`w-full h-auto ${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<text
|
||||
ref={textRef}
|
||||
x="0"
|
||||
y={verticalAlign === "center" ? "50%" : "0"}
|
||||
className="font-bold fill-current"
|
||||
style={{
|
||||
fontSize: "20px",
|
||||
letterSpacing: "-0.02em",
|
||||
dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
|
||||
}}
|
||||
x="50%"
|
||||
y="50%"
|
||||
dominantBaseline="middle"
|
||||
textAnchor="middle"
|
||||
className={`text-6xl font-bold ${textClassName}`}
|
||||
fill={fillColor}
|
||||
>
|
||||
{logoText}
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
}
|
||||
|
||||
export default SvgTextLogo;
|
||||
|
||||
Reference in New Issue
Block a user