Merge version_1 into main #2
@@ -19,9 +19,7 @@ export default function ServicesPage() {
|
||||
];
|
||||
|
||||
const navButton = {
|
||||
text: "Anfrage senden",
|
||||
href: "/kontakt",
|
||||
};
|
||||
text: "Anfrage senden", href: "/kontakt"};
|
||||
|
||||
const handleNavClick = (id: string) => {
|
||||
if (id.startsWith("/")) {
|
||||
@@ -62,63 +60,39 @@ export default function ServicesPage() {
|
||||
tag="Dach aus einer Hand"
|
||||
features={[
|
||||
{
|
||||
title: "Steildach",
|
||||
description: "Tonziegel, Schiefer, Dachziegel und Faserzement. Handwerklich perfekt verarbeitet mit modernen Dämmsystemen und Dachfenstern.",
|
||||
icon: Home,
|
||||
title: "Steildach", description: "Tonziegel, Schiefer, Dachziegel und Faserzement. Handwerklich perfekt verarbeitet mit modernen Dämmsystemen und Dachfenstern.", icon: Home,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/long-shot-man-working-roof_23-2148748777.jpg?_wi=3",
|
||||
imageAlt: "Steildacheindeckung mit Schiefer",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/long-shot-man-working-roof_23-2148748777.jpg", imageAlt: "Steildacheindeckung mit Schiefer"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/long-shot-man-working-roof_23-2148748777.jpg?_wi=4",
|
||||
imageAlt: "Traditionelle Dachziegel Installation",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/long-shot-man-working-roof_23-2148748777.jpg", imageAlt: "Traditionelle Dachziegel Installation"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Flachdach",
|
||||
description: "Bitumenische Bahnen, Kunststofffolien und Gründächer. Moderne Lösungen mit hochwertigen Dämmsystemen und Lichtkuppeln.",
|
||||
icon: Square,
|
||||
title: "Flachdach", description: "Bitumenische Bahnen, Kunststofffolien und Gründächer. Moderne Lösungen mit hochwertigen Dämmsystemen und Lichtkuppeln.", icon: Square,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/feet-escalator-urban-motion-topdown-view_169016-68492.jpg?_wi=3",
|
||||
imageAlt: "Modernes Flachdach System",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/feet-escalator-urban-motion-topdown-view_169016-68492.jpg", imageAlt: "Modernes Flachdach System"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/feet-escalator-urban-motion-topdown-view_169016-68492.jpg?_wi=4",
|
||||
imageAlt: "Flachdach Membrane Installation",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/feet-escalator-urban-motion-topdown-view_169016-68492.jpg", imageAlt: "Flachdach Membrane Installation"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Fassadenbau",
|
||||
description: "Naturschiefer und Kunstschiefer Fassaden. Hochwertiger Fassadenbau mit modernen Materialien und klassischen Techniken.",
|
||||
icon: Building2,
|
||||
title: "Fassadenbau", description: "Naturschiefer und Kunstschiefer Fassaden. Hochwertiger Fassadenbau mit modernen Materialien und klassischen Techniken.", icon: Building2,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/facade-modern-urban-building_122409-5.jpg?_wi=3",
|
||||
imageAlt: "Premium Schieferfassade",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/facade-modern-urban-building_122409-5.jpg", imageAlt: "Premium Schieferfassade"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/facade-modern-urban-building_122409-5.jpg?_wi=4",
|
||||
imageAlt: "Moderne Fassadenlösung",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/facade-modern-urban-building_122409-5.jpg", imageAlt: "Moderne Fassadenlösung"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Zimmerei",
|
||||
description: "Konstruktive Lösungen für Dachstühle, Gauben und Dachaufbauten. Traditionelles Handwerk mit modernen Materialen.",
|
||||
icon: Hammer,
|
||||
title: "Zimmerei", description: "Konstruktive Lösungen für Dachstühle, Gauben und Dachaufbauten. Traditionelles Handwerk mit modernen Materialen.", icon: Hammer,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-schematics_23-2148269844.jpg?_wi=6",
|
||||
imageAlt: "Zimmererarbeiten im Detail",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-schematics_23-2148269844.jpg", imageAlt: "Zimmererarbeiten im Detail"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-schematics_23-2148269844.jpg?_wi=7",
|
||||
imageAlt: "Professionelle Zimmerei Installation",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-schematics_23-2148269844.jpg", imageAlt: "Professionelle Zimmerei Installation"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
@@ -134,26 +108,15 @@ export default function ServicesPage() {
|
||||
tag="Unsere Stärken"
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "30+",
|
||||
description: "Jahre Erfahrung im Premium-Handwerk. Generationen von Expertise und bewährter Qualität in Siegen, Köln und Kerpen.",
|
||||
},
|
||||
id: "1", value: "30+", description: "Jahre Erfahrung im Premium-Handwerk. Generationen von Expertise und bewährter Qualität in Siegen, Köln und Kerpen."},
|
||||
{
|
||||
id: "2",
|
||||
value: "100%",
|
||||
description: "Kundenzufriedenheit durch persönliche Beratung, hochwertige Materialien und professionelle Ausführung in jedem Projekt.",
|
||||
},
|
||||
id: "2", value: "100%", description: "Kundenzufriedenheit durch persönliche Beratung, hochwertige Materialien und professionelle Ausführung in jedem Projekt."},
|
||||
{
|
||||
id: "3",
|
||||
value: "3",
|
||||
description: "Standorte für schnelle und zuverlässige Betreuung. Siegen, Köln und Kerpen – nah bei Ihnen vor Ort.",
|
||||
},
|
||||
id: "3", value: "3", description: "Standorte für schnelle und zuverlässige Betreuung. Siegen, Köln und Kerpen – nah bei Ihnen vor Ort."},
|
||||
{
|
||||
id: "4",
|
||||
value: "∞",
|
||||
description: "Qualitätsgarantie. Jedes Projekt ist eine Investition in die Zukunft – wir stehen dafür ein.",
|
||||
},
|
||||
id: "4", value: "∞", description: "Qualitätsgarantie. Jedes Projekt ist eine Investition in die Zukunft – wir stehen dafür ein."},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
@@ -165,63 +128,39 @@ export default function ServicesPage() {
|
||||
tag="Qualitätszertifizierung"
|
||||
features={[
|
||||
{
|
||||
title: "Zertifizierte Meister",
|
||||
description: "Erfahrene Dachdecker und Fachleute mit anerkannten Zertifizierungen und kontinuierlicher Weiterbildung.",
|
||||
icon: Award,
|
||||
title: "Zertifizierte Meister", description: "Erfahrene Dachdecker und Fachleute mit anerkannten Zertifizierungen und kontinuierlicher Weiterbildung.", icon: Award,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bank-worker-offering-loan-agreement-focus-document-close-up_1163-4278.jpg?_wi=5",
|
||||
imageAlt: "Qualitätszertifikat",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bank-worker-offering-loan-agreement-focus-document-close-up_1163-4278.jpg", imageAlt: "Qualitätszertifikat"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bank-worker-offering-loan-agreement-focus-document-close-up_1163-4278.jpg?_wi=6",
|
||||
imageAlt: "Handwerkszertifizierung",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bank-worker-offering-loan-agreement-focus-document-close-up_1163-4278.jpg", imageAlt: "Handwerkszertifizierung"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Materialqualität",
|
||||
description: "Nur beste Materialien von vertrauenswürdigen Herstellern. Jedes Material wird geprüft und zertifiziert.",
|
||||
icon: CheckCircle,
|
||||
title: "Materialqualität", description: "Nur beste Materialien von vertrauenswürdigen Herstellern. Jedes Material wird geprüft und zertifiziert.", icon: CheckCircle,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-construction-worker-standing-rooftops-high-silos-storage-tanks-working-tablet-computer_342744-441.jpg?_wi=3",
|
||||
imageAlt: "Materialprüfung vor Verarbeitung",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-construction-worker-standing-rooftops-high-silos-storage-tanks-working-tablet-computer_342744-441.jpg", imageAlt: "Materialprüfung vor Verarbeitung"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-construction-worker-standing-rooftops-high-silos-storage-tanks-working-tablet-computer_342744-441.jpg?_wi=4",
|
||||
imageAlt: "Qualitätskontrolle Detail",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-construction-worker-standing-rooftops-high-silos-storage-tanks-working-tablet-computer_342744-441.jpg", imageAlt: "Qualitätskontrolle Detail"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Detaillierte Planung",
|
||||
description: "Strukturiertes Arbeiten von Anfang bis Ende. Kostenlose Beratung, verbindliche Planung und transparente Absprachen.",
|
||||
icon: Clipboard,
|
||||
title: "Detaillierte Planung", description: "Strukturiertes Arbeiten von Anfang bis Ende. Kostenlose Beratung, verbindliche Planung und transparente Absprachen.", icon: Clipboard,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-schematics_23-2148269844.jpg?_wi=8",
|
||||
imageAlt: "Professionelle Projektplanung",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-schematics_23-2148269844.jpg", imageAlt: "Professionelle Projektplanung"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-schematics_23-2148269844.jpg?_wi=9",
|
||||
imageAlt: "Kundenbesprechung vor Ort",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-schematics_23-2148269844.jpg", imageAlt: "Kundenbesprechung vor Ort"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Langfristige Garantie",
|
||||
description: "Umfassende Garantien auf Materialien und Verarbeitung. Wir stehen hinter unserer Arbeit – im Notfall immer erreichbar.",
|
||||
icon: Shield,
|
||||
title: "Langfristige Garantie", description: "Umfassende Garantien auf Materialien und Verarbeitung. Wir stehen hinter unserer Arbeit – im Notfall immer erreichbar.", icon: Shield,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bank-worker-offering-loan-agreement-focus-document-close-up_1163-4278.jpg?_wi=7",
|
||||
imageAlt: "Garantiebestätigung",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bank-worker-offering-loan-agreement-focus-document-close-up_1163-4278.jpg", imageAlt: "Garantiebestätigung"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bank-worker-offering-loan-agreement-focus-document-close-up_1163-4278.jpg?_wi=8",
|
||||
imageAlt: "Gewährleistungsurkunde",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bank-worker-offering-loan-agreement-focus-document-close-up_1163-4278.jpg", imageAlt: "Gewährleistungsurkunde"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
@@ -238,41 +177,17 @@ export default function ServicesPage() {
|
||||
tag="Kundenstimmen"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Michael Schneider",
|
||||
role: "Hausbesitzer",
|
||||
company: "Siegen",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-cute-blonde-woman-pointing-her-smile-checked-shirt-looking-cheerful-front-view_176474-112653.jpg?_wi=4",
|
||||
imageAlt: "Michael Schneider - Zufriedener Kunde",
|
||||
},
|
||||
id: "1", name: "Michael Schneider", role: "Hausbesitzer", company: "Siegen", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-cute-blonde-woman-pointing-her-smile-checked-shirt-looking-cheerful-front-view_176474-112653.jpg", imageAlt: "Michael Schneider - Zufriedener Kunde"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Dr. Sandra Müller",
|
||||
role: "Immobilieneigentümerin",
|
||||
company: "Köln",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-blonde-young-businesswoman-standing-against-gray-background_23-2148029507.jpg?_wi=4",
|
||||
imageAlt: "Dr. Sandra Müller - Premium Kundin",
|
||||
},
|
||||
id: "2", name: "Dr. Sandra Müller", role: "Immobilieneigentümerin", company: "Köln", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-blonde-young-businesswoman-standing-against-gray-background_23-2148029507.jpg", imageAlt: "Dr. Sandra Müller - Premium Kundin"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Klaus Weber",
|
||||
role: "Projektmanager",
|
||||
company: "Kerpen",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-mature-businessman-holding-cup-coffee_23-2147955375.jpg?_wi=3",
|
||||
imageAlt: "Klaus Weber - Geschäftskunde",
|
||||
},
|
||||
id: "3", name: "Klaus Weber", role: "Projektmanager", company: "Kerpen", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-mature-businessman-holding-cup-coffee_23-2147955375.jpg", imageAlt: "Klaus Weber - Geschäftskunde"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Anke Hoffmann",
|
||||
role: "Architektin",
|
||||
company: "Köln",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-face-gorgeous-latin-american-woman_1262-5766.jpg?_wi=2",
|
||||
imageAlt: "Anke Hoffmann - Professionelle Referenz",
|
||||
},
|
||||
id: "4", name: "Anke Hoffmann", role: "Architektin", company: "Köln", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-face-gorgeous-latin-american-woman_1262-5766.jpg", imageAlt: "Anke Hoffmann - Professionelle Referenz"},
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
@@ -288,65 +203,41 @@ export default function ServicesPage() {
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Unternehmen",
|
||||
href: "/unternehmen",
|
||||
},
|
||||
label: "Unternehmen", href: "/unternehmen"},
|
||||
{
|
||||
label: "Leistungen",
|
||||
href: "/leistungen",
|
||||
},
|
||||
label: "Leistungen", href: "/leistungen"},
|
||||
{
|
||||
label: "Referenzen",
|
||||
href: "#testimonials",
|
||||
},
|
||||
label: "Referenzen", href: "#testimonials"},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Siegen",
|
||||
href: "#",
|
||||
},
|
||||
label: "Siegen", href: "#"},
|
||||
{
|
||||
label: "Köln",
|
||||
href: "#",
|
||||
},
|
||||
label: "Köln", href: "#"},
|
||||
{
|
||||
label: "Kerpen",
|
||||
href: "#",
|
||||
},
|
||||
label: "Kerpen", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Kontakt",
|
||||
href: "/kontakt",
|
||||
},
|
||||
label: "Kontakt", href: "/kontakt"},
|
||||
{
|
||||
label: "Impressum",
|
||||
href: "#",
|
||||
},
|
||||
label: "Impressum", href: "#"},
|
||||
{
|
||||
label: "Datenschutz",
|
||||
href: "#",
|
||||
},
|
||||
label: "Datenschutz", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Jobs & Ausbildung",
|
||||
href: "#",
|
||||
},
|
||||
label: "Jobs & Ausbildung", href: "#"},
|
||||
{
|
||||
label: "Zertifizierungen",
|
||||
href: "#",
|
||||
},
|
||||
label: "Zertifizierungen", href: "#"},
|
||||
{
|
||||
label: "Partner",
|
||||
href: "#",
|
||||
},
|
||||
label: "Partner", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
226
src/app/page.tsx
226
src/app/page.tsx
@@ -70,9 +70,7 @@ export default function HomePage() {
|
||||
brandName="Büdenbender"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Anfrage senden",
|
||||
href: "#contact",
|
||||
}}
|
||||
text: "Anfrage senden", href: "#contact"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -87,13 +85,9 @@ export default function HomePage() {
|
||||
showDimOverlay={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "Kostenlose Beratung",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Kostenlose Beratung", href: "#contact"},
|
||||
{
|
||||
text: "Unser Portfolio",
|
||||
href: "#services",
|
||||
},
|
||||
text: "Unser Portfolio", href: "#services"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -105,13 +99,9 @@ export default function HomePage() {
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{
|
||||
text: "Mehr über uns",
|
||||
href: "/unternehmen",
|
||||
},
|
||||
text: "Mehr über uns", href: "/unternehmen"},
|
||||
{
|
||||
text: "Kontakt aufnehmen",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Kontakt aufnehmen", href: "#contact"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -123,63 +113,39 @@ export default function HomePage() {
|
||||
tag="Dach aus einer Hand"
|
||||
features={[
|
||||
{
|
||||
title: "Steildach",
|
||||
description: "Tonziegel, Schiefer, Dachziegel und Faserzement. Handwerklich perfekt verarbeitet mit modernen Dämmsystemen und Dachfenstern.",
|
||||
icon: Home,
|
||||
title: "Steildach", description: "Tonziegel, Schiefer, Dachziegel und Faserzement. Handwerklich perfekt verarbeitet mit modernen Dämmsystemen und Dachfenstern.", icon: Home,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/long-shot-man-working-roof_23-2148748777.jpg?_wi=1",
|
||||
imageAlt: "Steildacheindeckung mit Schiefer",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/long-shot-man-working-roof_23-2148748777.jpg", imageAlt: "Steildacheindeckung mit Schiefer"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/long-shot-man-working-roof_23-2148748777.jpg?_wi=2",
|
||||
imageAlt: "Traditionelle Dachziegel Installation",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/long-shot-man-working-roof_23-2148748777.jpg", imageAlt: "Traditionelle Dachziegel Installation"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Flachdach",
|
||||
description: "Bitumenische Bahnen, Kunststofffolien und Gründächer. Moderne Lösungen mit hochwertigen Dämmsystemen und Lichtkuppeln.",
|
||||
icon: Square,
|
||||
title: "Flachdach", description: "Bitumenische Bahnen, Kunststofffolien und Gründächer. Moderne Lösungen mit hochwertigen Dämmsystemen und Lichtkuppeln.", icon: Square,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/feet-escalator-urban-motion-topdown-view_169016-68492.jpg?_wi=1",
|
||||
imageAlt: "Modernes Flachdach System",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/feet-escalator-urban-motion-topdown-view_169016-68492.jpg", imageAlt: "Modernes Flachdach System"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/feet-escalator-urban-motion-topdown-view_169016-68492.jpg?_wi=2",
|
||||
imageAlt: "Flachdach Membrane Installation",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/feet-escalator-urban-motion-topdown-view_169016-68492.jpg", imageAlt: "Flachdach Membrane Installation"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Fassadenbau",
|
||||
description: "Naturschiefer und Kunstschiefer Fassaden. Hochwertiger Fassadenbau mit modernen Materialien und klassischen Techniken.",
|
||||
icon: Building2,
|
||||
title: "Fassadenbau", description: "Naturschiefer und Kunstschiefer Fassaden. Hochwertiger Fassadenbau mit modernen Materialien und klassischen Techniken.", icon: Building2,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/facade-modern-urban-building_122409-5.jpg?_wi=1",
|
||||
imageAlt: "Premium Schieferfassade",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/facade-modern-urban-building_122409-5.jpg", imageAlt: "Premium Schieferfassade"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/facade-modern-urban-building_122409-5.jpg?_wi=2",
|
||||
imageAlt: "Moderne Fassadenlösung",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/facade-modern-urban-building_122409-5.jpg", imageAlt: "Moderne Fassadenlösung"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Zimmerei",
|
||||
description: "Konstruktive Lösungen für Dachstühle, Gauben und Dachaufbauten. Traditionelles Handwerk mit modernen Materialen.",
|
||||
icon: Hammer,
|
||||
title: "Zimmerei", description: "Konstruktive Lösungen für Dachstühle, Gauben und Dachaufbauten. Traditionelles Handwerk mit modernen Materialen.", icon: Hammer,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-schematics_23-2148269844.jpg?_wi=1",
|
||||
imageAlt: "Zimmererarbeiten im Detail",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-schematics_23-2148269844.jpg", imageAlt: "Zimmererarbeiten im Detail"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-schematics_23-2148269844.jpg?_wi=2",
|
||||
imageAlt: "Professionelle Zimmerei Installation",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-schematics_23-2148269844.jpg", imageAlt: "Professionelle Zimmerei Installation"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
@@ -195,26 +161,15 @@ export default function HomePage() {
|
||||
tag="Unsere Stärken"
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "30+",
|
||||
description: "Jahre Erfahrung im Premium-Handwerk. Generationen von Expertise und bewährter Qualität in Siegen, Köln und Kerpen.",
|
||||
},
|
||||
id: "1", value: "30+", description: "Jahre Erfahrung im Premium-Handwerk. Generationen von Expertise und bewährter Qualität in Siegen, Köln und Kerpen."},
|
||||
{
|
||||
id: "2",
|
||||
value: "100%",
|
||||
description: "Kundenzufriedenheit durch persönliche Beratung, hochwertige Materialien und professionelle Ausführung in jedem Projekt.",
|
||||
},
|
||||
id: "2", value: "100%", description: "Kundenzufriedenheit durch persönliche Beratung, hochwertige Materialien und professionelle Ausführung in jedem Projekt."},
|
||||
{
|
||||
id: "3",
|
||||
value: "3",
|
||||
description: "Standorte für schnelle und zuverlässige Betreuung. Siegen, Köln und Kerpen – nah bei Ihnen vor Ort.",
|
||||
},
|
||||
id: "3", value: "3", description: "Standorte für schnelle und zuverlässige Betreuung. Siegen, Köln und Kerpen – nah bei Ihnen vor Ort."},
|
||||
{
|
||||
id: "4",
|
||||
value: "∞",
|
||||
description: "Qualitätsgarantie. Jedes Projekt ist eine Investition in die Zukunft – wir stehen dafür ein.",
|
||||
},
|
||||
id: "4", value: "∞", description: "Qualitätsgarantie. Jedes Projekt ist eine Investition in die Zukunft – wir stehen dafür ein."},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
@@ -226,63 +181,39 @@ export default function HomePage() {
|
||||
tag="Qualitätszertifizierung"
|
||||
features={[
|
||||
{
|
||||
title: "Zertifizierte Meister",
|
||||
description: "Erfahrene Dachdecker und Fachleute mit anerkannten Zertifizierungen und kontinuierlicher Weiterbildung.",
|
||||
icon: Award,
|
||||
title: "Zertifizierte Meister", description: "Erfahrene Dachdecker und Fachleute mit anerkannten Zertifizierungen und kontinuierlicher Weiterbildung.", icon: Award,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bank-worker-offering-loan-agreement-focus-document-close-up_1163-4278.jpg?_wi=1",
|
||||
imageAlt: "Qualitätszertifikat",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bank-worker-offering-loan-agreement-focus-document-close-up_1163-4278.jpg", imageAlt: "Qualitätszertifikat"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bank-worker-offering-loan-agreement-focus-document-close-up_1163-4278.jpg?_wi=2",
|
||||
imageAlt: "Handwerkszertifizierung",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bank-worker-offering-loan-agreement-focus-document-close-up_1163-4278.jpg", imageAlt: "Handwerkszertifizierung"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Materialqualität",
|
||||
description: "Nur beste Materialien von vertrauenswürdigen Herstellern. Jedes Material wird geprüft und zertifiziert.",
|
||||
icon: CheckCircle,
|
||||
title: "Materialqualität", description: "Nur beste Materialien von vertrauenswürdigen Herstellern. Jedes Material wird geprüft und zertifiziert.", icon: CheckCircle,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-construction-worker-standing-rooftops-high-silos-storage-tanks-working-tablet-computer_342744-441.jpg?_wi=1",
|
||||
imageAlt: "Materialprüfung vor Verarbeitung",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-construction-worker-standing-rooftops-high-silos-storage-tanks-working-tablet-computer_342744-441.jpg", imageAlt: "Materialprüfung vor Verarbeitung"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-construction-worker-standing-rooftops-high-silos-storage-tanks-working-tablet-computer_342744-441.jpg?_wi=2",
|
||||
imageAlt: "Qualitätskontrolle Detail",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-construction-worker-standing-rooftops-high-silos-storage-tanks-working-tablet-computer_342744-441.jpg", imageAlt: "Qualitätskontrolle Detail"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Detaillierte Planung",
|
||||
description: "Strukturiertes Arbeiten von Anfang bis Ende. Kostenlose Beratung, verbindliche Planung und transparente Absprachen.",
|
||||
icon: Clipboard,
|
||||
title: "Detaillierte Planung", description: "Strukturiertes Arbeiten von Anfang bis Ende. Kostenlose Beratung, verbindliche Planung und transparente Absprachen.", icon: Clipboard,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-schematics_23-2148269844.jpg?_wi=3",
|
||||
imageAlt: "Professionelle Projektplanung",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-schematics_23-2148269844.jpg", imageAlt: "Professionelle Projektplanung"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-schematics_23-2148269844.jpg?_wi=4",
|
||||
imageAlt: "Kundenbesprechung vor Ort",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-schematics_23-2148269844.jpg", imageAlt: "Kundenbesprechung vor Ort"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Langfristige Garantie",
|
||||
description: "Umfassende Garantien auf Materialien und Verarbeitung. Wir stehen hinter unserer Arbeit – im Notfall immer erreichbar.",
|
||||
icon: Shield,
|
||||
title: "Langfristige Garantie", description: "Umfassende Garantien auf Materialien und Verarbeitung. Wir stehen hinter unserer Arbeit – im Notfall immer erreichbar.", icon: Shield,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bank-worker-offering-loan-agreement-focus-document-close-up_1163-4278.jpg?_wi=3",
|
||||
imageAlt: "Garantiebestätigung",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bank-worker-offering-loan-agreement-focus-document-close-up_1163-4278.jpg", imageAlt: "Garantiebestätigung"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bank-worker-offering-loan-agreement-focus-document-close-up_1163-4278.jpg?_wi=4",
|
||||
imageAlt: "Gewährleistungsurkunde",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bank-worker-offering-loan-agreement-focus-document-close-up_1163-4278.jpg", imageAlt: "Gewährleistungsurkunde"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
@@ -299,59 +230,23 @@ export default function HomePage() {
|
||||
tag="Kundenstimmen"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Michael Schneider",
|
||||
role: "Hausbesitzer",
|
||||
company: "Siegen",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-cute-blonde-woman-pointing-her-smile-checked-shirt-looking-cheerful-front-view_176474-112653.jpg?_wi=1",
|
||||
imageAlt: "Michael Schneider - Zufriedener Kunde",
|
||||
},
|
||||
id: "1", name: "Michael Schneider", role: "Hausbesitzer", company: "Siegen", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-cute-blonde-woman-pointing-her-smile-checked-shirt-looking-cheerful-front-view_176474-112653.jpg", imageAlt: "Michael Schneider - Zufriedener Kunde"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Dr. Sandra Müller",
|
||||
role: "Immobilieneigentümerin",
|
||||
company: "Köln",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-blonde-young-businesswoman-standing-against-gray-background_23-2148029507.jpg?_wi=1",
|
||||
imageAlt: "Dr. Sandra Müller - Premium Kundin",
|
||||
},
|
||||
id: "2", name: "Dr. Sandra Müller", role: "Immobilieneigentümerin", company: "Köln", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-blonde-young-businesswoman-standing-against-gray-background_23-2148029507.jpg", imageAlt: "Dr. Sandra Müller - Premium Kundin"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Klaus Weber",
|
||||
role: "Projektmanager",
|
||||
company: "Kerpen",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-mature-businessman-holding-cup-coffee_23-2147955375.jpg?_wi=1",
|
||||
imageAlt: "Klaus Weber - Geschäftskunde",
|
||||
},
|
||||
id: "3", name: "Klaus Weber", role: "Projektmanager", company: "Kerpen", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-mature-businessman-holding-cup-coffee_23-2147955375.jpg", imageAlt: "Klaus Weber - Geschäftskunde"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Anke Hoffmann",
|
||||
role: "Architektin",
|
||||
company: "Köln",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-face-gorgeous-latin-american-woman_1262-5766.jpg?_wi=1",
|
||||
imageAlt: "Anke Hoffmann - Professionelle Referenz",
|
||||
},
|
||||
id: "4", name: "Anke Hoffmann", role: "Architektin", company: "Köln", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-face-gorgeous-latin-american-woman_1262-5766.jpg", imageAlt: "Anke Hoffmann - Professionelle Referenz"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Thomas Keller",
|
||||
role: "Facility Manager",
|
||||
company: "Siegen",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-cute-blonde-woman-pointing-her-smile-checked-shirt-looking-cheerful-front-view_176474-112653.jpg?_wi=2",
|
||||
imageAlt: "Thomas Keller - Corporate Kunde",
|
||||
},
|
||||
id: "5", name: "Thomas Keller", role: "Facility Manager", company: "Siegen", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-cute-blonde-woman-pointing-her-smile-checked-shirt-looking-cheerful-front-view_176474-112653.jpg", imageAlt: "Thomas Keller - Corporate Kunde"},
|
||||
{
|
||||
id: "6",
|
||||
name: "Petra Schäfer",
|
||||
role: "Hausbesitzerin",
|
||||
company: "Kerpen",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-blonde-young-businesswoman-standing-against-gray-background_23-2148029507.jpg?_wi=2",
|
||||
imageAlt: "Petra Schäfer - Langzeitkundin",
|
||||
},
|
||||
id: "6", name: "Petra Schäfer", role: "Hausbesitzerin", company: "Kerpen", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-blonde-young-businesswoman-standing-against-gray-background_23-2148029507.jpg", imageAlt: "Petra Schäfer - Langzeitkundin"},
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
@@ -365,36 +260,19 @@ export default function HomePage() {
|
||||
ctaTitle="Kontaktieren Sie uns"
|
||||
ctaDescription="Schnelle und unkomplizierte Beratung für Ihr Dach- oder Fassadenprojekt. Wir sind für Sie da – vor Ort oder telefonisch."
|
||||
ctaButton={{
|
||||
text: "Jetzt anfragen",
|
||||
href: "#contact-form",
|
||||
}}
|
||||
text: "Jetzt anfragen", href: "#contact-form"}}
|
||||
ctaIcon={Phone}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Wie läuft eine Beratung ab?",
|
||||
content: "Wir vereinbaren einen Termin vor Ort. Ein erfahrener Dachdecker begutachtet Ihr Projekt, beantwortet alle Fragen und erstellt ein unverbindliches Angebot. Die Beratung ist kostenlos.",
|
||||
},
|
||||
id: "1", title: "Wie läuft eine Beratung ab?", content: "Wir vereinbaren einen Termin vor Ort. Ein erfahrener Dachdecker begutachtet Ihr Projekt, beantwortet alle Fragen und erstellt ein unverbindliches Angebot. Die Beratung ist kostenlos."},
|
||||
{
|
||||
id: "2",
|
||||
title: "Welche Materialien verwenden Sie?",
|
||||
content: "Wir verwenden ausschließlich hochwertige, zertifizierte Materialien von vertrauenswürdigen Herstellern. Ob Tonziegel, Schiefer, Kunststofffolien oder Naturstein – Qualität steht an erster Stelle.",
|
||||
},
|
||||
id: "2", title: "Welche Materialien verwenden Sie?", content: "Wir verwenden ausschließlich hochwertige, zertifizierte Materialien von vertrauenswürdigen Herstellern. Ob Tonziegel, Schiefer, Kunststofffolien oder Naturstein – Qualität steht an erster Stelle."},
|
||||
{
|
||||
id: "3",
|
||||
title: "Bieten Sie Garantien?",
|
||||
content: "Ja. Wir garantieren die Verarbeitung und die Materialien. Alle Arbeiten sind umfassend abgesichert. Sie erhalten eine Gewährleistungsurkunde mit allen wichtigen Details.",
|
||||
},
|
||||
id: "3", title: "Bieten Sie Garantien?", content: "Ja. Wir garantieren die Verarbeitung und die Materialien. Alle Arbeiten sind umfassend abgesichert. Sie erhalten eine Gewährleistungsurkunde mit allen wichtigen Details."},
|
||||
{
|
||||
id: "4",
|
||||
title: "Wie lange dauert ein Projekt?",
|
||||
content: "Die Dauer hängt vom Umfang ab. Bei der Beratung vor Ort erstellen wir einen realistischen Zeitplan. Wir arbeiten strukturiert und zuverlässig – Versprechungen halten wir ein.",
|
||||
},
|
||||
id: "4", title: "Wie lange dauert ein Projekt?", content: "Die Dauer hängt vom Umfang ab. Bei der Beratung vor Ort erstellen wir einen realistischen Zeitplan. Wir arbeiten strukturiert und zuverlässig – Versprechungen halten wir ein."},
|
||||
{
|
||||
id: "5",
|
||||
title: "Arbeiten Sie auch in meiner Nähe?",
|
||||
content: "Wir haben Standorte in Siegen, Köln und Kerpen. Für diese Regionen bieten wir schnelle und zuverlässige Betreuung. Bei größeren Projekten sind wir auch weitere Wege bereit.",
|
||||
},
|
||||
id: "5", title: "Arbeiten Sie auch in meiner Nähe?", content: "Wir haben Standorte in Siegen, Köln und Kerpen. Für diese Regionen bieten wir schnelle und zuverlässige Betreuung. Bei größeren Projekten sind wir auch weitere Wege bereit."},
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
|
||||
@@ -66,9 +66,7 @@ export default function AboutPage() {
|
||||
brandName="Büdenbender"
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Anfrage senden",
|
||||
href: "#contact",
|
||||
}}
|
||||
text: "Anfrage senden", href: "#contact"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -77,19 +75,15 @@ export default function AboutPage() {
|
||||
title="Über Büdenbender - Generationen von Handwerkskunst"
|
||||
description="Ein mittelständisches Unternehmen mit Tradition, Leidenschaft und Vision. Wir sind spezialisiert auf Premium-Dachdeckerarbeiten, Fassadenbau und Zimmerei in Siegen, Köln und Kerpen."
|
||||
tag="Unser Unternehmen"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/side-view-man-holding-schematics_23-2148269844.jpg?_wi=5"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/side-view-man-holding-schematics_23-2148269844.jpg"
|
||||
imageAlt="Büdenbender Handwerksteam bei der Arbeit"
|
||||
showBlur={true}
|
||||
showDimOverlay={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "Unsere Leistungen",
|
||||
href: "#services",
|
||||
},
|
||||
text: "Unsere Leistungen", href: "#services"},
|
||||
{
|
||||
text: "Kontakt aufnehmen",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Kontakt aufnehmen", href: "#contact"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -100,26 +94,15 @@ export default function AboutPage() {
|
||||
tag="Meilensteine"
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "3",
|
||||
description: "Generationen Erfahrung im Dachdeckerhandwerk. Familienbetrieb mit bewährter Expertise seit über 30 Jahren.",
|
||||
},
|
||||
id: "1", value: "3", description: "Generationen Erfahrung im Dachdeckerhandwerk. Familienbetrieb mit bewährter Expertise seit über 30 Jahren."},
|
||||
{
|
||||
id: "2",
|
||||
value: "1000+",
|
||||
description: "Erfolgreiche Projekte von Privathäusern bis zu großen Gewerbeobjekten. Jede Arbeit ein Zeichen unserer Qualität.",
|
||||
},
|
||||
id: "2", value: "1000+", description: "Erfolgreiche Projekte von Privathäusern bis zu großen Gewerbeobjekten. Jede Arbeit ein Zeichen unserer Qualität."},
|
||||
{
|
||||
id: "3",
|
||||
value: "50+",
|
||||
description: "Spezialisierte Handwerkmeister und Fachkräfte in unseren Teams. Ständig weitergebildet und zertifiziert.",
|
||||
},
|
||||
id: "3", value: "50+", description: "Spezialisierte Handwerkmeister und Fachkräfte in unseren Teams. Ständig weitergebildet und zertifiziert."},
|
||||
{
|
||||
id: "4",
|
||||
value: "100%",
|
||||
description: "Kundenorientierung und Transparenz. Wir stehen für persönliche Beratung, faire Preise und handwerkliche Qualität.",
|
||||
},
|
||||
id: "4", value: "100%", description: "Kundenorientierung und Transparenz. Wir stehen für persönliche Beratung, faire Preise und handwerkliche Qualität."},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
@@ -131,32 +114,14 @@ export default function AboutPage() {
|
||||
tag="Kundenbewertungen"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Michael Schneider",
|
||||
role: "Hausbesitzer",
|
||||
company: "Siegen",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-cute-blonde-woman-pointing-her-smile-checked-shirt-looking-cheerful-front-view_176474-112653.jpg?_wi=3",
|
||||
imageAlt: "Michael Schneider - Zufriedener Kunde",
|
||||
},
|
||||
id: "1", name: "Michael Schneider", role: "Hausbesitzer", company: "Siegen", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-cute-blonde-woman-pointing-her-smile-checked-shirt-looking-cheerful-front-view_176474-112653.jpg", imageAlt: "Michael Schneider - Zufriedener Kunde"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Dr. Sandra Müller",
|
||||
role: "Immobilieneigentümerin",
|
||||
company: "Köln",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-blonde-young-businesswoman-standing-against-gray-background_23-2148029507.jpg?_wi=3",
|
||||
imageAlt: "Dr. Sandra Müller - Premium Kundin",
|
||||
},
|
||||
id: "2", name: "Dr. Sandra Müller", role: "Immobilieneigentümerin", company: "Köln", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-blonde-young-businesswoman-standing-against-gray-background_23-2148029507.jpg", imageAlt: "Dr. Sandra Müller - Premium Kundin"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Klaus Weber",
|
||||
role: "Projektmanager",
|
||||
company: "Kerpen",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-mature-businessman-holding-cup-coffee_23-2147955375.jpg?_wi=2",
|
||||
imageAlt: "Klaus Weber - Geschäftskunde",
|
||||
},
|
||||
id: "3", name: "Klaus Weber", role: "Projektmanager", company: "Kerpen", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-mature-businessman-holding-cup-coffee_23-2147955375.jpg", imageAlt: "Klaus Weber - Geschäftskunde"},
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
|
||||
@@ -1,51 +1,36 @@
|
||||
"use client";
|
||||
import React, { forwardRef, SVGProps } from 'react';
|
||||
|
||||
import { memo } from "react";
|
||||
import useSvgTextLogo from "./useSvgTextLogo";
|
||||
import { cls } from "@/lib/utils";
|
||||
|
||||
interface SvgTextLogoProps {
|
||||
logoText: string;
|
||||
adjustHeightFactor?: number;
|
||||
verticalAlign?: "top" | "center";
|
||||
interface SvgTextLogoProps extends SVGProps<SVGSVGElement> {
|
||||
text: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
|
||||
logoText,
|
||||
adjustHeightFactor,
|
||||
verticalAlign = "top",
|
||||
className = "",
|
||||
}) {
|
||||
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
|
||||
|
||||
return (
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox={viewBox}
|
||||
className={cls("w-full", className)}
|
||||
style={{ aspectRatio: aspectRatio }}
|
||||
preserveAspectRatio="none"
|
||||
role="img"
|
||||
aria-label={`${logoText} logo`}
|
||||
>
|
||||
<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"
|
||||
}}
|
||||
const SvgTextLogo = forwardRef<SVGSVGElement, SvgTextLogoProps>(
|
||||
({ text, className = '', ...props }, ref) => {
|
||||
return (
|
||||
<svg
|
||||
ref={ref}
|
||||
viewBox="0 0 200 100"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className}
|
||||
{...props}
|
||||
>
|
||||
{logoText}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
<text
|
||||
x="50%"
|
||||
y="50%"
|
||||
textAnchor="middle"
|
||||
dominantBaseline="middle"
|
||||
fontSize="24"
|
||||
fontWeight="bold"
|
||||
fill="currentColor"
|
||||
>
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
SvgTextLogo.displayName = 'SvgTextLogo';
|
||||
|
||||
export default SvgTextLogo;
|
||||
export default SvgTextLogo;
|
||||
Reference in New Issue
Block a user