save

2026-08-13 15:46:04 +02:00
parent 920b1da4b0
commit 2c1a8ae9b5
178 changed files with 10289 additions and 0 deletions
@@ -0,0 +1,154 @@
+import { ClipboardCheck, Euro, House, ShieldCheck, Tag, Users2, Wifi } from "lucide-react"
+
+import { Separator } from "@/components/ui/separator"
+import { Container, Section } from "@/components/gebos/section"
+import { PageHero } from "@/components/gebos/page-hero"
+import { PageBreadcrumb } from "@/components/gebos/page-breadcrumb"
+import { HeroVisual } from "@/components/gebos/hero-visual"
+import { IconBadge } from "@/components/gebos/icon-tile"
+import { PriceCard } from "@/components/gebos/price-card"
+import {
+  SensorCubesIllustration,
+  SmokeDetectorIllustration,
+} from "@/components/gebos/illustrations"
+
+const trustItems = [
+  { icon: ClipboardCheck, label: ["Klare", "Vertragsstruktur"] },
+  { icon: ShieldCheck, label: ["Keine versteckten", "Gebühren"] },
+  { icon: Users2, label: ["Rabatte für", "große Objekte"] },
+] as const
+
+export default function KlarpreisPage() {
+  return (
+    <>
+      <PageHero
+        breadcrumb={
+          <PageBreadcrumb
+            items={[
+              { label: "Startseite", to: "/" },
+              { label: "GebOS Klarpreis" },
+            ]}
+          />
+        }
+        title={
+          <>
+            GebOS <span className="text-primary">Klarpreis</span>
+          </>
+        }
+        lead="Drei sauber getrennte Leistungen. Einfache Preise. Keine Überraschungen."
+        extra={
+          <div className="inline-flex items-center gap-3 rounded-full border border-border bg-card px-4 py-2 text-sm text-muted-foreground shadow-pill">
+            <IconBadge variant="soft" size="sm">
+              <House />
+            </IconBadge>
+            <span>Ideal für Wohngebäude, Hausverwaltungen und Bestandshalter.</span>
+          </div>
+        }
+        visual={
+          <HeroVisual
+            media={<SmokeDetectorIllustration className="mx-auto w-48" />}
+            chipTitle="Inspektion OK"
+            chipSub="Letzte Prüfung 06.05.2024"
+          />
+        }
+      />
+
+      <Container>
+        <Section className="pt-0">
+          <div className="grid gap-6 lg:grid-cols-3">
+            <PriceCard
+              title="RWM-Hardware"
+              cadence="Einmalig"
+              price="42,00 €"
+              unit="je Wohnung einmalig"
+              allocation={{ label: "Nicht umlagefähig", tone: "negative" }}
+              description="Rauchwarnmelder inklusive Montage und Eigentumsübertragung."
+              media={<SmokeDetectorIllustration />}
+            />
+            <PriceCard
+              title="Ferninspektion"
+              cadence="Monatlich"
+              price="2,20 €"
+              unit="je Wohnung / Monat"
+              allocation={{ label: "Grundsätzlich umlagefähig", tone: "positive" }}
+              description="Regelmäßige Prüfung, Nachweise, Meldungen und Support."
+              media={
+                <div className="relative">
+                  <SmokeDetectorIllustration />
+                  <Wifi className="absolute -right-1 top-1 size-5 text-primary" />
+                </div>
+              }
+            />
+            <PriceCard
+              title={
+                <span className="text-[1.15rem] whitespace-nowrap">
+                  UVI-Komplettbetrieb
+                </span>
+              }
+              cadence="Monatlich"
+              price="10,50 €"
+              unit="je Wohnung / Monat"
+              allocation={{ label: "Grundsätzlich umlagefähig", tone: "positive" }}
+              description="Sensoren, Daten, Portal und Verbrauchsinformation inklusive."
+              media={<SensorCubesIllustration />}
+            />
+          </div>
+
+          <div className="mt-6 grid gap-6 lg:grid-cols-[1.4fr_1fr]">
+            {/* total band */}
+            <div className="flex flex-wrap items-center gap-6 rounded-2xl bg-brand-gradient p-6 shadow-band sm:flex-nowrap sm:p-7">
+              <IconBadge variant="glass" size="xl">
+                <Euro />
+              </IconBadge>
+              <div>
+                <div className="font-semibold text-white/80">
+                  Gesamtkosten laufend
+                </div>
+                <div className="mt-1 flex flex-wrap items-baseline gap-x-3">
+                  <span className="text-4xl font-extrabold tracking-tight text-white">
+                    12,70 €
+                  </span>
+                  <span className="text-sm text-white/75">
+                    je Wohnung / Monat
+                  </span>
+                </div>
+              </div>
+              <Separator
+                orientation="vertical"
+                className="hidden self-stretch bg-white/25 sm:block"
+              />
+              <div className="flex items-center gap-3">
+                <IconBadge variant="glass" size="sm">
+                  <Tag />
+                </IconBadge>
+                <p className="max-w-56 text-sm leading-snug text-white/80">
+                  Alle laufenden Leistungen klar gebündelt – ohne versteckte
+                  Zusatzkosten.
+                </p>
+              </div>
+            </div>
+
+            {/* trust card */}
+            <div className="grid grid-cols-3 divide-x divide-border rounded-2xl bg-card p-6 shadow-card">
+              {trustItems.map(({ icon: Icon, label }) => (
+                <div
+                  key={label[1]}
+                  className="flex flex-col items-center justify-center gap-2.5 px-2 text-center"
+                >
+                  <IconBadge variant="soft" size="lg" shape="circle">
+                    <Icon />
+                  </IconBadge>
+                  <div className="text-sm leading-snug font-bold text-navy">
+                    {label[0]}
+                    <br />
+                    {label[1]}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </Section>
+      </Container>
+    </>
+  )
+}