bender/2babc775-97ac-454e-bf60-383cb3600561
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-06-03 13:49:28 +00:00
parent 31ebb2f58f
commit 0aa82ed59c
1 changed files with 63 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

292
src/app/page.tsx
View File

@@ -31,25 +31,15 @@ export default function LandingPage() {
<NavbarStyleCentered <NavbarStyleCentered
navItems={[ navItems={[
{ {
name: "Home", name: "Home", id: "/"},
id: "/",
},
{ {
name: "Leistungen", name: "Leistungen", id: "#leistungen"},
id: "#leistungen",
},
{ {
name: "Projekte", name: "Projekte", id: "#projekte"},
id: "#projekte",
},
{ {
name: "Über uns", name: "Über uns", id: "#ueber-uns"},
id: "#ueber-uns",
},
{ {
name: "Kontakt", name: "Kontakt", id: "#kontakt"},
id: "#kontakt",
},
]} ]}
brandName="DachWerk Meisterbetrieb" brandName="DachWerk Meisterbetrieb"
/> />
@@ -58,52 +48,29 @@ export default function LandingPage() {
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel <HeroBillboardRotatedCarousel
background={{ background={{
variant: "plain", variant: "plain"}}
}}
title="Moderne Dachlösungen vom Meisterbetrieb" title="Moderne Dachlösungen vom Meisterbetrieb"
description="Von der Reparatur bis zur kompletten Dachsanierung. Fachgerechte Ausführung, persönliche Beratung und langlebige Ergebnisse." description="Von der Reparatur bis zur kompletten Dachsanierung. Fachgerechte Ausführung, persönliche Beratung und langlebige Ergebnisse."
buttons={[ buttons={[
{ {
text: "Kostenloses Angebot anfordern", text: "Kostenloses Angebot anfordern", href: "#kontakt"},
href: "#kontakt",
},
{ {
text: "Beratung vereinbaren", text: "Beratung vereinbaren", href: "#kontakt"},
href: "#kontakt",
},
]} ]}
buttonAnimation="slide-up" buttonAnimation="slide-up"
carouselItems={[ carouselItems={[
{ {
id: "hero-carousel-1", id: "hero-carousel-1", imageSrc: "http://img.b2bpic.net/roofing/hero-worker-modern-roof_1.jpg", imageAlt: "Dachdecker arbeiten auf dem Dach eines modernen Hauses"},
imageSrc: "http://img.b2bpic.net/free-photo/young-male-performer-dancing-parking-lot-with-pilons_23-2149344067.jpg",
imageAlt: "Hochwertiges Dachprojekt mit professionellen Handwerkern",
},
{ {
id: "hero-carousel-2", id: "hero-carousel-2", imageSrc: "http://img.b2bpic.net/roofing/hero-new-tiles-closeup_2.jpg", imageAlt: "Nahaufnahme von neu verlegten Dachziegeln"},
imageSrc: "http://img.b2bpic.net/free-photo/aerial-shot-ski-resort-covered-snow-alps_181624-30150.jpg",
imageAlt: "Moderner Dachbau mit blauer Himmel",
},
{ {
id: "hero-carousel-3", id: "hero-carousel-3", imageSrc: "http://img.b2bpic.net/roofing/hero-modern-house-architecture_3.jpg", imageAlt: "Modernes Wohnhaus mit markanter Dacharchitektur"},
imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-asphalt-crosswalk_116348-42.jpg",
imageAlt: "Dachfenstereinbau bei Tageslicht",
},
{ {
id: "hero-carousel-4", id: "hero-carousel-4", imageSrc: "http://img.b2bpic.net/roofing/hero-flat-roof-installation_4.jpg", imageAlt: "Flachdachinstallation im Gange"},
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-shot-lamp-hanging-inside-building-with-glass-ceiling_181624-11469.jpg",
imageAlt: "Dachdecker bei der Arbeit mit Schutzhelm",
},
{ {
id: "hero-carousel-5", id: "hero-carousel-5", imageSrc: "http://img.b2bpic.net/roofing/hero-roof-window-interior_5.jpg", imageAlt: "Dachfenster wird mit Blick auf den Innenraum installiert"},
imageSrc: "http://img.b2bpic.net/free-photo/building-construction-workers-site_23-2149124309.jpg",
imageAlt: "Detailansicht von Dachziegeln",
},
{ {
id: "hero-carousel-6", id: "hero-carousel-6", imageSrc: "http://img.b2bpic.net/roofing/hero-drone-renovated-roof_6.jpg", imageAlt: "Drohnenaufnahme eines wunderschön sanierten Daches"},
imageSrc: "http://img.b2bpic.net/free-photo/collaboration-two-carpenters-building_329181-15617.jpg",
imageAlt: "Fertiggestelltes Dach bei Sonnenuntergang",
},
]} ]}
autoPlay={true} autoPlay={true}
autoPlayInterval={4000} autoPlayInterval={4000}
@@ -115,14 +82,7 @@ export default function LandingPage() {
textboxLayout="default" textboxLayout="default"
useInvertedBackground={true} useInvertedBackground={true}
names={[ names={[
"Meisterbetrieb", "Meisterbetrieb", "Persönliche Beratung", "Schnelle Terminvergabe", "Saubere Ausführung", "Geprüfte Qualität", "Faire Preise", "Langjährige Erfahrung"]}
"Persönliche Beratung",
"Schnelle Terminvergabe",
"Saubere Ausführung",
"Geprüfte Qualität",
"Faire Preise",
"Langjährige Erfahrung",
]}
title="Ihr Vertrauen ist unser Fundament" title="Ihr Vertrauen ist unser Fundament"
description="Als Meisterbetrieb legen wir Wert auf Transparenz und Qualität in jedem Schritt." description="Als Meisterbetrieb legen wir Wert auf Transparenz und Qualität in jedem Schritt."
tag="Unser Versprechen" tag="Unser Versprechen"
@@ -137,65 +97,29 @@ export default function LandingPage() {
useInvertedBackground={false} useInvertedBackground={false}
features={[ features={[
{ {
id: "leistung-1", id: "leistung-1", title: "Dachsanierung", tags: [
title: "Dachsanierung", "Energieeffizienz", "Wertsteigerung"],
tags: [ imageSrc: "http://img.b2bpic.net/roofing/service-renovation-scaffold_1.jpg", imageAlt: "Handwerker auf einem Gerüst bei der Dachsanierung"},
"Energieeffizienz",
"Wertsteigerung",
],
imageSrc: "http://img.b2bpic.net/free-photo/gothic-brick-tower-with-tall-window-dramatic-architecture-angle_169016-70801.jpg",
imageAlt: "Professionelle Dachsanierung",
},
{ {
id: "leistung-2", id: "leistung-2", title: "Dachreparatur", tags: [
title: "Dachreparatur", "Schnell", "Zuverlässig"],
tags: [ imageSrc: "http://img.b2bpic.net/roofing/service-repair-damaged-tiles_2.jpg", imageAlt: "Dachdecker repariert beschädigte Dachziegel"},
"Schnell",
"Zuverlässig",
],
imageSrc: "http://img.b2bpic.net/free-photo/romantic-couple-looking-each-other-before-kissing_1153-734.jpg",
imageAlt: "Dachreparatur nach Sturmschaden",
},
{ {
id: "leistung-3", id: "leistung-3", title: "Neueindeckung", tags: [
title: "Neueindeckung", "Schutz", "Ästhetik"],
tags: [ imageSrc: "http://img.b2bpic.net/roofing/service-new-dark-tiles_3.jpg", imageAlt: "Frisch verlegte dunkle Dachziegel"},
"Schutz",
"Ästhetik",
],
imageSrc: "http://img.b2bpic.net/free-photo/long-shot-men-working-roof_23-2149343673.jpg",
imageAlt: "Dach Neueindeckung mit modernen Ziegeln",
},
{ {
id: "leistung-4", id: "leistung-4", title: "Flachdach", tags: [
title: "Flachdach", "Dicht", "Langlebig"],
tags: [ imageSrc: "http://img.b2bpic.net/roofing/service-flat-roof-waterproofing_4.jpg", imageAlt: "Detaillierte Aufnahme einer Flachdachabdichtung"},
"Dicht",
"Langlebig",
],
imageSrc: "http://img.b2bpic.net/free-photo/portrait-construction-worker-standing-rooftops-high-silos-storage-tanks_342744-442.jpg",
imageAlt: "Flachdach mit Abdichtung",
},
{ {
id: "leistung-5", id: "leistung-5", title: "Dachfenster", tags: [
title: "Dachfenster", "Licht", "Komfort"],
tags: [ imageSrc: "http://img.b2bpic.net/roofing/service-window-installation_5.jpg", imageAlt: "Einbau eines Dachfensters"},
"Licht",
"Komfort",
],
imageSrc: "http://img.b2bpic.net/free-photo/concrete-building-blue-sky-seen-through-window_250224-295.jpg",
imageAlt: "Dachfenster-Einbau in einem Wohnhaus",
},
{ {
id: "leistung-6", id: "leistung-6", title: "Wartung & Inspektion", tags: [
title: "Wartung & Inspektion", "Werterhalt", "Sicherheit"],
tags: [ imageSrc: "http://img.b2bpic.net/roofing/service-inspection-roofer_6.jpg", imageAlt: "Dachdecker inspiziert ein Dach mit Ausrüstung"},
"Werterhalt",
"Sicherheit",
],
imageSrc: "http://img.b2bpic.net/free-photo/auto-mechanic-inflating-tire-with-air-compressor-street_651396-3561.jpg",
imageAlt: "Dachinspektion durch Fachpersonal",
},
]} ]}
title="Unsere Dachleistungen im Überblick" title="Unsere Dachleistungen im Überblick"
description="Fachkompetenz und Präzision für Ihr Dachprojekt – von der Planung bis zur Fertigstellung." description="Fachkompetenz und Präzision für Ihr Dachprojekt – von der Planung bis zur Fertigstellung."
@@ -211,47 +135,17 @@ export default function LandingPage() {
useInvertedBackground={true} useInvertedBackground={true}
products={[ products={[
{ {
id: "projekt-1", id: "projekt-1", name: "Einfamilienhaus Dachsanierung", price: "Anfrage", imageSrc: "http://img.b2bpic.net/roofing/project-single-family-renovated_1.jpg", imageAlt: "Saniertes Dach eines Einfamilienhauses"},
name: "Einfamilienhaus Dachsanierung",
price: "Anfrage",
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-view-couple-standing-balcony_23-2147923064.jpg",
imageAlt: "Saniertes Dach eines Einfamilienhauses",
},
{ {
id: "projekt-2", id: "projekt-2", name: "Flachdach Modernisierung", price: "Anfrage", imageSrc: "http://img.b2bpic.net/roofing/project-commercial-flat-solar_2.jpg", imageAlt: "Modernisiertes Flachdach eines Gewerbegebäudes mit Solaranlage"},
name: "Flachdach Modernisierung",
price: "Anfrage",
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-modern-building-design_23-2148252751.jpg",
imageAlt: "Modernisiertes Flachdach eines Gewerbegebäudes",
},
{ {
id: "projekt-3", id: "projekt-3", name: "Neueindeckung Wohnhaus", price: "Anfrage", imageSrc: "http://img.b2bpic.net/roofing/project-residential-red-tiles_3.jpg", imageAlt: "Neu eingedecktes Wohnhaus mit roten Ziegeln"},
name: "Neueindeckung Wohnhaus",
price: "Anfrage",
imageSrc: "http://img.b2bpic.net/free-photo/modern-country-houses-construction_1385-20.jpg",
imageAlt: "Neu eingedecktes Wohnhaus mit roten Ziegeln",
},
{ {
id: "projekt-4", id: "projekt-4", name: "Dachfenster Einbau", price: "Anfrage", imageSrc: "http://img.b2bpic.net/roofing/project-house-multiple-windows_4.jpg", imageAlt: "Haus mit mehreren neuen Dachfenstern"},
name: "Dachfenster Einbau",
price: "Anfrage",
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-view-wooden-brown-houses-blue-sky_181624-6026.jpg",
imageAlt: "Installiertes Dachfenster im Innenraum",
},
{ {
id: "projekt-5", id: "projekt-5", name: "Dachreparatur Bürogebäude", price: "Anfrage", imageSrc: "http://img.b2bpic.net/roofing/project-office-building-repair_5.jpg", imageAlt: "Reparatur eines Bürogebäudedachs"},
name: "Dachreparatur Bürogebäude",
price: "Anfrage",
imageSrc: "http://img.b2bpic.net/free-photo/empty-pool-with-chairs-near-cliff-sea_181624-3442.jpg",
imageAlt: "Reparatur eines Bürogebäudedachs",
},
{ {
id: "projekt-6", id: "projekt-6", name: "Neueindeckung Garage", price: "Anfrage", imageSrc: "http://img.b2bpic.net/roofing/project-garage-new-sleek_6.jpg", imageAlt: "Neu gedecktes Garagendach"},
name: "Neueindeckung Garage",
price: "Anfrage",
imageSrc: "http://img.b2bpic.net/free-photo/gray-brown-concrete-modern-building-shot-from-low-angle_181624-3502.jpg",
imageAlt: "Neu gedecktes Garagendach",
},
]} ]}
title="Unsere erfolgreich abgeschlossenen Projekte" title="Unsere erfolgreich abgeschlossenen Projekte"
description="Ein Einblick in unsere vielseitige Arbeit und Fachkompetenz, die für sich spricht." description="Ein Einblick in unsere vielseitige Arbeit und Fachkompetenz, die für sich spricht."
@@ -269,38 +163,11 @@ export default function LandingPage() {
tag="Online Präsenz" tag="Online Präsenz"
blogs={[ blogs={[
{ {
id: "blog-1", id: "blog-1", category: "Digitalisierung", title: "Die digitale Visitenkarte: Vertrauen aufbauen", excerpt: "Eine professionelle Website ist der erste Kontaktpunkt und schafft sofort Glaubwürdigkeit.", imageSrc: "http://img.b2bpic.net/roofing/blog-laptop-website-roof_1.jpg", imageAlt: "Laptop zeigt Website einer Dachdeckerfirma mit Dachbild", authorName: "Lena Meier", authorAvatar: "http://img.b2bpic.net/free-photo/cheerful-woman-looking-away_23-2147774838.jpg", date: "15. Juni 2024"},
category: "Digitalisierung",
title: "Die digitale Visitenkarte: Vertrauen aufbauen",
excerpt: "Eine professionelle Website ist der erste Kontaktpunkt und schafft sofort Glaubwürdigkeit.",
imageSrc: "http://img.b2bpic.net/free-photo/happy-entrepreneur-having-online-business-meeting-from-home_637285-12729.jpg",
imageAlt: "Person am Computer, die eine Website betrachtet",
authorName: "Lena Meier",
authorAvatar: "http://img.b2bpic.net/free-photo/cheerful-woman-looking-away_23-2147774838.jpg",
date: "15. Juni 2024",
},
{ {
id: "blog-2", id: "blog-2", category: "Marketing", title: "Kunden gewinnen: Online sichtbar sein", excerpt: "Erhöhen Sie Ihre Reichweite und erhalten Sie mehr qualifizierte Anfragen durch gezielte Online-Präsenz.", imageSrc: "http://img.b2bpic.net/roofing/blog-charts-growth-roof_2.jpg", imageAlt: "Digitale Diagramme über einer Baustelle mit Dach, symbolisiert Wachstum", authorName: "Max Schmidt", authorAvatar: "http://img.b2bpic.net/free-photo/portrait-young-female-with-glasses_23-2148415937.jpg", date: "01. Juli 2024"},
category: "Marketing",
title: "Kunden gewinnen: Online sichtbar sein",
excerpt: "Erhöhen Sie Ihre Reichweite und erhalten Sie mehr qualifizierte Anfragen durch gezielte Online-Präsenz.",
imageSrc: "http://img.b2bpic.net/free-photo/employee-putting-sticky-notes-laptop-screen-as-work-reminder-company-office-manager-using-adhesive-post-it-paper-display-remember-business-schedule-presentation-close-up_482257-33914.jpg",
imageAlt: "Diagramm zum Online-Wachstum",
authorName: "Max Schmidt",
authorAvatar: "http://img.b2bpic.net/free-photo/portrait-young-female-with-glasses_23-2148415937.jpg",
date: "01. Juli 2024",
},
{ {
id: "blog-3", id: "blog-3", category: "Service", title: "Service digital: Von der Anfrage bis zum Kontakt", excerpt: "Eine moderne Website erleichtert die Kontaktaufnahme und vereinfacht den gesamten Prozess für Ihre Kunden.", imageSrc: "http://img.b2bpic.net/roofing/blog-tablet-contact-form-roof_3.jpg", imageAlt: "Tablet zeigt Kontaktformular mit unscharfem Dach-Hintergrund", authorName: "Anna Fischer", authorAvatar: "http://img.b2bpic.net/free-photo/woman-portrait-with-bright-blue-lips_23-2151096454.jpg", date: "10. Juli 2024"},
category: "Service",
title: "Service digital: Von der Anfrage bis zum Kontakt",
excerpt: "Eine moderne Website erleichtert die Kontaktaufnahme und vereinfacht den gesamten Prozess für Ihre Kunden.",
imageSrc: "http://img.b2bpic.net/free-photo/pretty-girl-black-glasses-with-long-hair-is-sitting-chair-orange-background-she-has-blue-laptop-suitcase-she-wears-yellow-sweater-laughing-camera_197531-492.jpg",
imageAlt: "Kontaktformular auf einem Tablet",
authorName: "Anna Fischer",
authorAvatar: "http://img.b2bpic.net/free-photo/woman-portrait-with-bright-blue-lips_23-2151096454.jpg",
date: "10. Juli 2024",
},
]} ]}
/> />
</div> </div>
@@ -315,20 +182,14 @@ export default function LandingPage() {
tag="Über uns" tag="Über uns"
bulletPoints={[ bulletPoints={[
{ {
title: "Qualität & Präzision", title: "Qualität & Präzision", description: "Fachgerechte Ausführung nach höchsten Standards."},
description: "Fachgerechte Ausführung nach höchsten Standards.",
},
{ {
title: "Zuverlässigkeit & Termintreue", title: "Zuverlässigkeit & Termintreue", description: "Projekte pünktlich und im Budget abschließen."},
description: "Projekte pünktlich und im Budget abschließen.",
},
{ {
title: "Transparenz & Fairness", title: "Transparenz & Fairness", description: "Klare Kommunikation und ehrliche Angebote."},
description: "Klare Kommunikation und ehrliche Angebote.",
},
]} ]}
imageSrc="http://img.b2bpic.net/free-photo/male-coworkers-office-with-lunch_273609-6313.jpg" imageSrc="http://img.b2bpic.net/roofing/about-team-blueprints_1.jpg"
imageAlt="Team von Dachdeckern bei der Besprechung" imageAlt="Team von Dachdeckern bespricht Baupläne auf einer Baustelle"
mediaAnimation="slide-up" mediaAnimation="slide-up"
/> />
</div> </div>
@@ -337,15 +198,13 @@ export default function LandingPage() {
<ContactCTA <ContactCTA
useInvertedBackground={false} useInvertedBackground={false}
background={{ background={{
variant: "plain", variant: "plain"}}
}}
tag="Kontaktieren Sie uns" tag="Kontaktieren Sie uns"
title="Planen Sie ein Dachprojekt?" title="Planen Sie ein Dachprojekt?"
description="Vereinfachen Sie Ihre Planung. Vereinbaren Sie jetzt ein unverbindliches Beratungsgespräch. Wir freuen uns auf Ihre Anfrage über unser Kontaktformular (Name, Telefon, E-Mail, Nachricht)." description="Vereinfachen Sie Ihre Planung. Vereinbaren Sie jetzt ein unverbindliches Beratungsgespräch. Wir freuen uns auf Ihre Anfrage über unser Kontaktformular (Name, Telefon, E-Mail, Nachricht)."
buttons={[ buttons={[
{ {
text: "Anfrage senden", text: "Anfrage senden"},
},
]} ]}
buttonAnimation="slide-up" buttonAnimation="slide-up"
/> />
@@ -355,62 +214,37 @@ export default function LandingPage() {
<FooterBase <FooterBase
columns={[ columns={[
{ {
title: "Leistungen", title: "Leistungen", items: [
items: [
{ {
label: "Dachsanierung", label: "Dachsanierung", href: "#leistungen"},
href: "#leistungen",
},
{ {
label: "Dachreparatur", label: "Dachreparatur", href: "#leistungen"},
href: "#leistungen",
},
{ {
label: "Neueindeckung", label: "Neueindeckung", href: "#leistungen"},
href: "#leistungen",
},
{ {
label: "Flachdach", label: "Flachdach", href: "#leistungen"},
href: "#leistungen",
},
{ {
label: "Dachfenster", label: "Dachfenster", href: "#leistungen"},
href: "#leistungen",
},
{ {
label: "Wartung", label: "Wartung", href: "#leistungen"},
href: "#leistungen",
},
], ],
}, },
{ {
title: "Unternehmen", title: "Unternehmen", items: [
items: [
{ {
label: "Referenzen", label: "Referenzen", href: "#projekte"},
href: "#projekte",
},
{ {
label: "Über uns", label: "Über uns", href: "#ueber-uns"},
href: "#ueber-uns",
},
{ {
label: "Kontakt", label: "Kontakt", href: "#kontakt"},
href: "#kontakt",
},
], ],
}, },
{ {
title: "Rechtliches", title: "Rechtliches", items: [
items: [
{ {
label: "Impressum", label: "Impressum", href: "#"},
href: "#",
},
{ {
label: "Datenschutz", label: "Datenschutz", href: "#"},
href: "#",
},
], ],
}, },
]} ]}