diff --git a/app/branchenloesungen/[slug]/page.module.css b/app/branchenloesungen/[slug]/page.module.css new file mode 100644 index 0000000..e69de29 diff --git a/app/branchenloesungen/[slug]/page.tsx b/app/branchenloesungen/[slug]/page.tsx new file mode 100644 index 0000000..aca9816 --- /dev/null +++ b/app/branchenloesungen/[slug]/page.tsx @@ -0,0 +1,34 @@ +import { notFound } from "next/navigation"; +import Image from "next/image"; +import { branchenloesungen } from "../data"; + +export function generateStaticParams() { + return branchenloesungen.map((item) => ({ + slug: item.slug, + })); +} + +export default async function LeistungDetail({ + params, +}: { + params: Promise<{ slug: string }>; +}) { + const { slug } = await params; + const leistung = branchenloesungen.find((item) => item.slug === slug); + + if (!leistung) notFound(); + + return ( +
+

{leistung.title}

+

{leistung.text}

+ + {leistung.title} +
+ ); +} diff --git a/app/branchenloesungen/data.ts b/app/branchenloesungen/data.ts new file mode 100644 index 0000000..24c30e6 --- /dev/null +++ b/app/branchenloesungen/data.ts @@ -0,0 +1,26 @@ +export const branchenloesungen = [ + { + slug: "bueros", + title: "Büros", + text: "Glas- und Fensterreinigung", + image: "/images/leistungen/webdesign.jpg", + }, + { + slug: "kanzlei", + title: "Kanzlei", + text: "Unterhaltsreinigung", + image: "/images/leistungen/seo.jpg", + }, + { + slug: "hallen-und-lagerflaechen", + title: "Hallen und Lagerflächen", + text: "Treppenhausreinigung", + image: "/images/leistungen/branding.jpg", + }, + { + slug: "wohn-und-geschaeftshaeuser", + title: "Wohn- und Geschäftshäuse", + text: "Performante E-Commerce-Lösungen.", + image: "/images/leistungen/shop.jpg", + }, +]; diff --git a/app/branchenloesungen/page.tsx b/app/branchenloesungen/page.tsx new file mode 100644 index 0000000..d24eb24 --- /dev/null +++ b/app/branchenloesungen/page.tsx @@ -0,0 +1,3 @@ +export default function Branchenloesungen() { + return

Branchenlösungen

; +} diff --git a/app/kontakt/page.tsx b/app/kontakt/page.tsx new file mode 100644 index 0000000..1eeb230 --- /dev/null +++ b/app/kontakt/page.tsx @@ -0,0 +1,3 @@ +export default function Kontakt() { + return

Kontakt

; +} diff --git a/app/leistungen/[slug]/page.module.css b/app/leistungen/[slug]/page.module.css new file mode 100644 index 0000000..3480ca2 --- /dev/null +++ b/app/leistungen/[slug]/page.module.css @@ -0,0 +1,172 @@ +.hero { + background: var(--color-background-linear); + padding-block: var(--space-16); + position: relative; + overflow: hidden; +} + +.inner { + max-width: var(--container-width); + margin-inline: auto; + padding-inline: var(--space-4); + position: relative; + z-index: 1; + display: flex; + flex-direction: column; + gap: var(--space-8); + align-items: center; +} + +.decoration { + position: absolute; + top: var(--space-8); + right: var(--space-8); + display: none; + grid-template-columns: repeat(6, 1fr); + grid-template-rows: repeat(3, 1fr); + gap: var(--space-3); + pointer-events: none; + z-index: 0; +} + +.dot { + width: 14px; + height: 14px; + border-radius: var(--radius-full); + background-color: var(--color-accent); + opacity: 0.8; +} + +.heading { + color: var(--color-heading); + max-width: 24ch; + display: flex; + flex-direction: column; + gap: var(--space-1); + text-align: center; + align-self: center; +} + +.headingSub { + font-size: var(--font-size-h3); + font-weight: var(--font-weight-bold); + color: var(--color-text-muted); + letter-spacing: var(--letter-spacing-tight); +} + +.content { + display: flex; + flex-direction: column; + gap: var(--space-6); +} + +.imageWrapper { + position: relative; + width: min(100%, 300px); + margin-inline: auto; + aspect-ratio: 4 / 3; + flex-shrink: 0; + order: -1; + z-index: 1; +} + +.imageWrapper::before { + content: ""; + position: absolute; + left: 8%; + right: 8%; + bottom: -4px; + height: 28%; + background: color-mix(in srgb, var(--color-accent) 55%, transparent); + filter: blur(22px); + opacity: 0.45; + border-radius: 999px; + z-index: -1; + pointer-events: none; +} + +.imageFrame { + position: relative; + width: 100%; + height: 100%; + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: + 0 10px 30px rgba(0, 0, 0, 0.08), + 0 24px 60px rgba(0, 0, 0, 0.06); +} + +.image { + object-fit: cover; +} + +.body { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: var(--space-6); + align-items: center; + text-align: center; +} + +.lead { + font-size: var(--font-size-base); + text-align: center; + width: min(100%, 48ch); + margin-inline: auto; +} + +/* Tablet: 768px */ +@media (min-width: 768px) { + .content { + flex-direction: row; + align-items: flex-start; + gap: var(--space-8); + } + + .inner { + align-items: flex-start; + } + + .heading { + text-align: left; + align-self: flex-start; + } + + .body { + align-items: flex-start; + text-align: left; + } + + .lead { + text-align: left; + margin-inline: 0; + } + + .decoration { + display: grid; + top: -24px; + } + + .imageWrapper { + width: 260px; + + order: 0; /* zurück zur normalen Reihenfolge */ + } + + .dot { + width: 24px; + height: 24px; + } +} + +/* Desktop: 1024px */ +@media (min-width: 1024px) { + .hero { + padding-block: var(--space-36); + } + + .decoration { + top: -42px; + } +} diff --git a/app/leistungen/[slug]/page.tsx b/app/leistungen/[slug]/page.tsx new file mode 100644 index 0000000..88159f5 --- /dev/null +++ b/app/leistungen/[slug]/page.tsx @@ -0,0 +1,63 @@ +import { notFound } from "next/navigation"; +import { leistungen } from "../data"; +import Image from "next/image"; +import Link from "next/link"; +import { ArrowRightIcon } from "@phosphor-icons/react/dist/ssr"; +import styles from "./page.module.css"; + +export function generateStaticParams() { + return leistungen.map((item) => ({ slug: item.slug })); +} + +export default async function LeistungDetail({ + params, +}: { + params: Promise<{ slug: string }>; +}) { + const { slug } = await params; + const leistung = leistungen.find((item) => item.slug === slug); + + if (!leistung) notFound(); + + return ( +
+
+
+ +

+ {leistung.titleMain} + {leistung.titleSub} +

+ +
+
+
+ {leistung.imageAlt} +
+
+ +
+

{leistung.text}

+ + + Jetzt Angebot anfragen + +
+
+
+
+
+ ); +} diff --git a/app/leistungen/data.ts b/app/leistungen/data.ts new file mode 100644 index 0000000..2a49481 --- /dev/null +++ b/app/leistungen/data.ts @@ -0,0 +1,42 @@ +export const leistungen = [ + { + slug: "fensterreinigung", + titleMain: "Professionelle Fensterreinigung", + titleSub: "in Hannover und Umgebung", + text: "Streifenfreie Fenster und Glasfronten sind das Aushängeschild Ihres Unternehmens. Wir reinigen Fenster, Rahmen, Glasfassaden und Eingangsbereiche zuverlässig – für einen professionellen ersten Eindruck bei Kunden, Mitarbeitenden und Besuchern.", + image: "/images/services/Fensterreinigung.jpg", + imageAlt: "Gereinigte Fensterfront eines Geschäftsgebäudes", + }, + { + slug: "unterhaltsreinigung", + titleMain: "Professionelle Unterhaltsreinigung", + titleSub: "in Hannover und Umgebung", + text: "Regelmäßige Unterhaltsreinigung für Büros, Praxen und Schulen – zuverlässig, gründlich und zu festen Terminen. Wir stimmen die Reinigungsintervalle individuell auf Ihre Räumlichkeiten ab, damit Ihre Flächen dauerhaft gepflegt und einladend wirken.", + image: "/images/services/unterhaltsreinigung.jpg", + imageAlt: "Reinigungskraft bei der Unterhaltsreinigung in einem Büro", + }, + { + slug: "treppenhausreinigung", + titleMain: "Professionelle Treppenhausreinigung", + titleSub: "in Hannover und Umgebung", + text: "Gepflegte Treppenhäuser und Eingangsbereiche hinterlassen bei Mitarbeitenden, Kundschaft und Besuchern einen guten ersten Eindruck. Wir übernehmen die regelmäßige Reinigung zuverlässig und termingerecht – für eine saubere Visitenkarte Ihres Gebäudes.", + image: "/images/services/treppenhausreinigung.jpg", + imageAlt: "Sauberes Treppenhaus in einem Gewerbeobjekt", + }, + { + slug: "grundreinigung", + titleMain: "Professionelle Grundreinigung", + titleSub: "in Hannover und Umgebung", + text: "Intensive Tiefenreinigung für Räume mit besonderem Pflegebedarf – gründlich, termingerecht und mit professionellem Equipment. Ob nach Umzug, vor Neueröffnung oder als saisonale Maßnahme: Wir sorgen für einen makellosen Ausgangszustand.", + image: "/images/services/grundreinigung.jpg", + imageAlt: "Sauberer Büroarbeitsplatz nach der Grundreinigung", + }, + { + slug: "hausmeisterdienste", + titleMain: "Professionelle Hausmeisterdienste", + titleSub: "in Hannover und Umgebung", + text: "Vom Winterdienst bis zur Grünpflege – wir übernehmen zuverlässig alle anfallenden Hausmeisteraufgaben. Ob Kleinreparaturen, Objektbetreuung oder regelmäßige Kontrollgänge: Ein fester Ansprechpartner sorgt für reibungslose Abläufe in Ihrem Objekt.", + image: "/images/services/Hausmeisterdienste.jpg", + imageAlt: "Hausmeister bei der Außenpflege eines Gebäudes", + }, +]; diff --git a/app/leistungen/page.tsx b/app/leistungen/page.tsx new file mode 100644 index 0000000..85419e7 --- /dev/null +++ b/app/leistungen/page.tsx @@ -0,0 +1,3 @@ +export default function Leistungen() { + return

Leistungen

; +} diff --git a/app/page.tsx b/app/page.tsx index c7e1ede..c139997 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,6 +1,7 @@ import AboutUsSection from "@/components/AboutUsSection"; import BenefitsSection from "@/components/benefitsSection"; import ContactCtaSection from "@/components/contact/ContactCtaSection"; +import CtaSection from "@/components/CtaSection"; import { homepageFaq } from "@/components/faq/faqData"; import FaqSection from "@/components/faq/FaqSection"; import HeroSection from "@/components/HeroSection"; @@ -13,6 +14,7 @@ export default function Home() { + +

Datenschutz

+ + ); +} diff --git a/app/rechtliches/impressum/page.tsx b/app/rechtliches/impressum/page.tsx new file mode 100644 index 0000000..c192837 --- /dev/null +++ b/app/rechtliches/impressum/page.tsx @@ -0,0 +1,8 @@ + +export default function Impressum() { + return ( +
+

impressum

+
+ ); +} diff --git a/app/sitemap.ts b/app/sitemap.ts index 7ccbbda..a57d5af 100644 --- a/app/sitemap.ts +++ b/app/sitemap.ts @@ -25,29 +25,71 @@ export default async function sitemap(): Promise { priority: 1.0, }, { - url: `${BASE_URL}/about`, + url: `${BASE_URL}/leistungen`, lastModified: new Date(), changeFrequency: "monthly", priority: 0.8, }, + { + url: `${BASE_URL}/leistungen/fensterreinigung`, + lastModified: new Date(), + changeFrequency: "monthly", + priority: 0.8, + }, + { + url: `${BASE_URL}/leistungen/grundreinigung`, + lastModified: new Date(), + changeFrequency: "monthly", + priority: 0.8, + }, + { + url: `${BASE_URL}/leistungen/unterhaltsreinigung`, + lastModified: new Date(), + changeFrequency: "monthly", + priority: 0.8, + }, + { + url: `${BASE_URL}/leistungen/hausmeisterdienste`, + lastModified: new Date(), + changeFrequency: "monthly", + priority: 0.8, + }, + { + url: `${BASE_URL}/leistungen/treppenhausreinigung`, + lastModified: new Date(), + changeFrequency: "monthly", + priority: 0.8, + }, + { + url: `${BASE_URL}/branchenloesungen/bueros`, + lastModified: new Date(), + changeFrequency: "monthly", + priority: 0.6, + }, + { + url: `${BASE_URL}/branchenloesungen/kanzlei`, + lastModified: new Date(), + changeFrequency: "monthly", + priority: 0.6, + }, + { + url: `${BASE_URL}/branchenloesungen/hallen-und-lagerflaechen`, + lastModified: new Date(), + changeFrequency: "monthly", + priority: 0.6, + }, + { + url: `${BASE_URL}/branchenloesungen/wohn-und-geschaeftshaeuser`, + lastModified: new Date(), + changeFrequency: "monthly", + priority: 0.6, + }, { url: `${BASE_URL}/kontakt`, lastModified: new Date(), changeFrequency: "yearly", priority: 0.6, }, - { - url: `${BASE_URL}/datenschutz`, - lastModified: new Date(), - changeFrequency: "yearly", - priority: 0.3, - }, - { - url: `${BASE_URL}/impressum`, - lastModified: new Date(), - changeFrequency: "yearly", - priority: 0.3, - }, ]; // ─── Dynamische Blog-Seiten (auskommentiert bis Blog vorhanden) ──────────── diff --git a/components/CtaSection.module.css b/components/CtaSection.module.css new file mode 100644 index 0000000..0c1d5e2 --- /dev/null +++ b/components/CtaSection.module.css @@ -0,0 +1,53 @@ +.cta { + background: linear-gradient(135deg, #267361 0%, #1f5f50 100%); + padding-block: var(--space-16); +} + +.inner { + max-width: var(--container-width); + margin: 0 auto; + padding-inline: var(--space-4); +} + +.content { + max-width: 48rem; + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-6); + text-align: center; +} + +.heading { + color: #ffffff; + max-width: 22ch; +} + +.actions { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-4); +} + +.actions :global(.btn) { + font-weight: var(--font-weight-semibold); +} + +.actions :global(.btn--tertiary) { + padding-top: 0; + padding-bottom: 0; + color: #ffffff; +} + +@media (min-width: 768px) { + .cta { + padding-block: var(--space-20); + } + + .actions { + flex-direction: row; + justify-content: center; + } +} diff --git a/components/CtaSection.tsx b/components/CtaSection.tsx new file mode 100644 index 0000000..0f13397 --- /dev/null +++ b/components/CtaSection.tsx @@ -0,0 +1,37 @@ +import { ArrowRightIcon, PhoneIcon } from "@phosphor-icons/react/dist/ssr"; +import Link from "next/link"; +import { companyData } from "@/data/companyData"; +import styles from "./CtaSection.module.css"; + +export default function CtaSection() { + return ( +
+
+
+

+ Saubere Räume für einen starken ersten Eindruck +

+ +
+ + + Jetzt Angebot anfragen + + + + + {companyData.contact.phone.display} + +
+
+
+
+ ); +} diff --git a/components/Footer.tsx b/components/Footer.tsx index ae249d3..328d01a 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -53,10 +53,10 @@ export default function Footer() { Rechtliches
  • - Impressum + Impressum
  • - Datenschutz + Datenschutz
diff --git a/data/navigation.ts b/data/navigation.ts index fc19131..00c2635 100644 --- a/data/navigation.ts +++ b/data/navigation.ts @@ -18,23 +18,23 @@ export const subMenus: SubMenu[] = [ items: [ { label: "Unterhaltsreinigung", - to: "/dienstleistungen/unterhaltsreinigung", + to: "/leistungen/unterhaltsreinigung", }, { label: "Treppenhausreinigung", - to: "/dienstleistungen/treppenhausreinigung", + to: "/leistungen/treppenhausreinigung", }, { label: "Fensterreinigung", - to: "/dienstleistungen/fensterreinigung", + to: "/leistungen/fensterreinigung", }, { label: "Grundreinigung", - to: "/dienstleistungen/grundreinigung", + to: "/leistungen/grundreinigung", }, { label: "Hausmeisterdienste", - to: "/dienstleistungen/hausmeisterdienste", + to: "/leistungen/hausmeisterdienste", }, ], }, @@ -49,14 +49,11 @@ export const subMenus: SubMenu[] = [ }, { label: "Wohn- und Geschäftshäuser", - to: "/branchenloesungen/wohn--und-geschaeftshaeuser", + to: "/branchenloesungen/wohn-und-geschaeftshaeuser", }, { label: "Kanzlei", to: "/branchenloesungen/kanzlei" }, ], }, ]; -export const endLinks: NavItem[] = [ - { label: "Unternehmen", to: "/unternehmen" }, - { label: "Kontakt", to: "/kontakt" }, -]; +export const endLinks: NavItem[] = [{ label: "Kontakt", to: "/kontakt" }];