124 lines
4.5 KiB
TypeScript
124 lines
4.5 KiB
TypeScript
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>
|
|
</>
|
|
)
|
|
}
|