Update src/app/page.tsx
This commit is contained in:
216
src/app/page.tsx
216
src/app/page.tsx
@@ -20,231 +20,113 @@ export default function LandingPage() {
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<div id="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Start",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Leistungen",
|
||||
id: "leistungen",
|
||||
},
|
||||
{
|
||||
name: "Über uns",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Kontakt",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Start", id: "hero" },
|
||||
{ name: "Leistungen", id: "leistungen" },
|
||||
{ name: "Vorteile", id: "vorteile" },
|
||||
{ name: "Über uns", id: "about" },
|
||||
{ name: "Kontakt", id: "contact" },
|
||||
]}
|
||||
brandName="Rohr & Kraft"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<div id="hero">
|
||||
<HeroLogo
|
||||
logoText="Rohr & Kraft – Ihr Klempner in München"
|
||||
description="24/7 Notdienst für alle Fälle. Schnelle, zuverlässige Hilfe bei Rohrbruch, Heizung und Sanitär."
|
||||
logoText="Rohr & Kraft"
|
||||
description="Ihr professioneller Partner in München für Sanitär, Heizung und Rohrreinigung. 24/7 Notdienst – schnell, zuverlässig, fair."
|
||||
buttons={[
|
||||
{
|
||||
text: "Jetzt anrufen",
|
||||
href: "tel:+4989123456",
|
||||
},
|
||||
{ text: "Jetzt anrufen", href: "tel:+4989123456" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721551.jpg?_wi=1"
|
||||
imageAlt="Rohr & Kraft Handwerker-Team"
|
||||
imageAlt="Klempner bei der Arbeit"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="leistungen" data-section="leistungen">
|
||||
<div id="leistungen">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
icon: AlertTriangle,
|
||||
title: "Rohrbruch-Notdienst",
|
||||
description: "Soforthilfe bei akuten Notfällen, rund um die Uhr erreichbar.",
|
||||
},
|
||||
{
|
||||
icon: Flame,
|
||||
title: "Heizungsinstallation",
|
||||
description: "Moderne Heiztechnik für Ihr Zuhause oder Gewerbeobjekt.",
|
||||
},
|
||||
{
|
||||
icon: Droplets,
|
||||
title: "Badezimmersanierung",
|
||||
description: "Individuelle Planung und Umsetzung Ihres Traum-Bads.",
|
||||
},
|
||||
{
|
||||
icon: Droplet,
|
||||
title: "Wasserschadenbeseitigung",
|
||||
description: "Professionelle Trocknung und Sanierung bei Wasserschäden.",
|
||||
},
|
||||
{
|
||||
icon: Wrench,
|
||||
title: "Kanalreinigung",
|
||||
description: "Zuverlässige Beseitigung von Verstopfungen in allen Rohrsystemen.",
|
||||
},
|
||||
]}
|
||||
title="Unsere Leistungen"
|
||||
description="Vom Notfall bis zur Komplettsanierung – wir sind für Sie da."
|
||||
description="Von akuten Notfällen bis zur kompletten Badsanierung – wir bieten fachmännische Lösungen für Ihr Zuhause."
|
||||
features={[
|
||||
{ icon: AlertTriangle, title: "Rohrbruch-Notdienst", description: "24/7 Soforthilfe bei Wasserschäden in München." },
|
||||
{ icon: Flame, title: "Heizungsinstallation", description: "Moderne Heiztechnik für effiziente Wärme." },
|
||||
{ icon: Droplets, title: "Badezimmersanierung", description: "Ihr Traum-Bad aus einer Hand geplant und umgesetzt." },
|
||||
{ icon: Droplet, title: "Wasserschadenbeseitigung", description: "Professionelle Trocknung und Sanierung nach Notfällen." },
|
||||
{ icon: Wrench, title: "Kanalreinigung", description: "Zuverlässige Beseitigung von Verstopfungen." },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="vorteile" data-section="vorteile">
|
||||
<div id="vorteile">
|
||||
<MetricCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Ihre Vorteile bei Rohr & Kraft"
|
||||
description="Warum Münchner Haushalte uns vertrauen."
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "24/7",
|
||||
title: "Reaktionszeit",
|
||||
description: "Wir sind immer für Sie da.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-male-builder-uniform-yellow-background_140725-112486.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "Festpreis",
|
||||
title: "Garantie",
|
||||
description: "Keine versteckten Kosten für Sie.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-excited-girl-holding-skateboard-her-shoulders_171337-3270.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "Fachbetrieb",
|
||||
title: "Zertifiziert",
|
||||
description: "Geprüfte Qualität in München.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/men-working-cutting-mdf-board_23-2149384822.jpg",
|
||||
},
|
||||
{
|
||||
id: "m4",
|
||||
value: "100%",
|
||||
title: "Zuverlässigkeit",
|
||||
description: "Fachmännische Arbeit garantiert.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portait-two-generation-carpenters_329181-15614.jpg",
|
||||
},
|
||||
{
|
||||
id: "m5",
|
||||
value: "Lokal",
|
||||
title: "München",
|
||||
description: "Direkt vor Ort für Sie.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-elder-woman-kitchen-holding-tablet_23-2148419314.jpg",
|
||||
},
|
||||
{ id: "v1", value: "24/7", title: "Notdienst", description: "Rund um die Uhr für Sie da.", imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721551.jpg" },
|
||||
{ id: "v2", value: "Fix", title: "Festpreis", description: "Transparente Kosten, keine Überraschungen.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-male-builder-uniform-yellow-background_140725-112486.jpg" },
|
||||
{ id: "v3", value: "Geprüft", title: "Fachbetrieb", description: "Zertifizierte Qualität und Sicherheit.", imageSrc: "http://img.b2bpic.net/free-photo/men-working-cutting-mdf-board_23-2149384822.jpg" },
|
||||
]}
|
||||
title="Warum Rohr & Kraft?"
|
||||
description="Wir stehen für Qualität, Transparenz und Geschwindigkeit in München."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<div id="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={true}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Über Rohr & Kraft",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/view-person-creating-digital-diy-craft-content_23-2151515893.jpg",
|
||||
alt: "Über uns",
|
||||
},
|
||||
{ type: "text", content: "Ihr lokaler Klempner in München" },
|
||||
]}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<div id="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="Super schnelle Hilfe bei meinem Rohrbruch! Sehr kompetentes Team und fairer Preis."
|
||||
testimonial="Super schnell und professionell bei meinem Notfall! Absolut empfehlenswert für München."
|
||||
rating={5}
|
||||
author="Markus S."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/front-view-male-builder-uniform-yellow-background_140725-112486.jpg",
|
||||
alt: "Kunde 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-excited-girl-holding-skateboard-her-shoulders_171337-3270.jpg",
|
||||
alt: "Kunde 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/men-working-cutting-mdf-board_23-2149384822.jpg",
|
||||
alt: "Kunde 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portait-two-generation-carpenters_329181-15614.jpg",
|
||||
alt: "Kunde 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-elder-woman-kitchen-holding-tablet_23-2148419314.jpg",
|
||||
alt: "Kunde 5",
|
||||
},
|
||||
]}
|
||||
author="Familie Müller"
|
||||
ratingAnimation="blur-reveal"
|
||||
avatarsAnimation="slide-up"
|
||||
avatars={[]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<div id="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Kontaktieren Sie uns"
|
||||
description="Haben Sie ein Anliegen oder benötigen Sie sofort Hilfe? Schreiben Sie uns."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/view-person-creating-digital-diy-craft-content_23-2151515893.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
tag="Kontakt"
|
||||
title="Direkt Hilfe anfordern"
|
||||
description="Rufen Sie uns an oder schreiben Sie uns eine Nachricht."
|
||||
background={{ variant: "gradient-bars" }}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<div id="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721551.jpg?_wi=2"
|
||||
logoText="Rohr & Kraft"
|
||||
copyrightText="© 2024 Rohr & Kraft – Ihr Klempner in München"
|
||||
columns={[
|
||||
{
|
||||
title: "Kontakt",
|
||||
items: [
|
||||
{
|
||||
label: "Telefon: 089 123456",
|
||||
href: "tel:+4989123456",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Info",
|
||||
items: [
|
||||
{
|
||||
label: "Über uns",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Datenschutz",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Service", items: [{ label: "Notdienst", href: "tel:+4989123456" }] },
|
||||
{ title: "Rechtliches", items: [{ label: "Datenschutz", href: "#" }, { label: "Impressum", href: "#" }] },
|
||||
{ title: "Öffnungszeiten", items: [{ label: "24/7 für Sie erreichbar", href: "#" }] }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721551.jpg"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user