save

2026-08-14 13:34:12 +02:00
parent 728e2ec270
commit b6ed4118d1
41 changed files with 1071 additions and 81 deletions
@@ -0,0 +1,123 @@
+import { Link } from "react-router-dom"
+import { ArrowRight, Euro } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { CtaBanner } from "@/components/gebos/cta-banner"
+import { Container, Section, SectionHeading } from "@/components/gebos/section"
+import { PageBreadcrumb } from "@/components/gebos/page-breadcrumb"
+import { AssetRender, renders } from "@/components/gebos/site-assets"
+
+const products = [
+  {
+    title: "UVI",
+    sub: "Monatliche Verbrauchsinformation",
+    description:
+      "Verbrauchsdaten werden automatisch erfasst und die regelmäßigen Verbrauchsinformationen für die Bewohner bereitgestellt.",
+    illustration: (
+      <div className="relative">
+        <AssetRender render={renders.gateway} imgClassName="w-28" />
+      </div>
+    ),
+  },
+  {
+    title: "Heizkostenabrechnung",
+    sub: "Verbrauchsdaten korrekt abrechnen",
+    description:
+      "Verbrauchsdaten strukturiert erfassen und für die jährliche Abrechnung nutzen.",
+    illustration: <AssetRender render={renders.glassDonutShadow} alt="" className="w-28" />,
+  },
+  {
+    title: "Rauchwarnmelder",
+    sub: "Sicher überwacht, zentral verwaltet",
+    description:
+      "Rauchwarnmelder gemeinsam mit der übrigen Gebäudetechnik planen und verwalten.",
+    illustration: <AssetRender render={renders.smokeAlarm} imgClassName="w-28" />,
+  },
+]
+
+export default function ProductsPage() {
+  return (
+    <>
+      <div className="bg-hero-glow">
+        <Container>
+          <Section className="pt-6 pb-10 sm:pt-7 sm:pb-12 lg:pt-8 lg:pb-14">
+            <PageBreadcrumb
+              className="mb-4"
+              items={[
+                { label: "Startseite", to: "/" },
+                { label: "Produkte" },
+              ]}
+            />
+            <SectionHeading
+              title="Unsere Produkte"
+              lead="Hier finden Sie eine Übersicht unserer Produkte für Messtechnik, Abrechnung und Verwaltung."
+            />
+            <div className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+              {products.map((s) => (
+                <Card key={s.title} className="gap-0 p-6 sm:p-7">
+                  <h3 className="text-xl font-extrabold tracking-tight text-navy">
+                    {s.title}
+                  </h3>
+                  <p className="mt-1 text-sm text-muted-foreground">{s.sub}</p>
+                  <div className="my-6 flex h-32 flex-1 items-center justify-center">
+                    {s.illustration}
+                  </div>
+                  <p className="text-sm leading-relaxed text-muted-foreground">
+                    {s.description}
+                  </p>
+                  <Button
+                    variant="link"
+                    className="mt-3 self-start px-0"
+                    asChild
+                  >
+                    <Link to="/produkte">
+                      Mehr erfahren
+                      <ArrowRight />
+                    </Link>
+                  </Button>
+                </Card>
+              ))}
+            </div>
+            <Card className="mt-6 flex-col items-start gap-4 p-5 sm:flex-row sm:items-center sm:p-6">
+              <AssetRender
+                render={renders.gateway}
+                className="shrink-0"
+                imgClassName="w-14"
+              />
+              <div className="min-w-0 flex-1">
+                <h3 className="text-sm font-bold text-navy">
+                  Messtechnik und Infrastruktur
+                </h3>
+                <p className="mt-0.5 text-sm leading-relaxed text-muted-foreground">
+                  Fernauslesbare Zähler, Sensoren und
+                  Kommunikationsinfrastruktur für den laufenden Betrieb.
+                </p>
+              </div>
+              <Button variant="link" className="shrink-0 px-0 sm:px-4" asChild>
+                <Link to="/produkte">
+                  Mehr erfahren
+                  <ArrowRight />
+                </Link>
+              </Button>
+            </Card>
+          </Section>
+        </Container>
+      </div>
+      <Container>
+        <Section className="pt-0">
+          <CtaBanner
+            icon={<Euro />}
+            title="Jetzt Preis für Ihr Gebäude berechnen"
+            description="In wenigen Minuten zur ersten Preisindikation."
+            actions={
+              <Button variant="inverse" size="lg" asChild>
+                <Link to="/konfigurator">Preis berechnen</Link>
+              </Button>
+            }
+          />
+        </Section>
+      </Container>
+    </>
+  )
+}