349 lines
12 KiB
TypeScript
349 lines
12 KiB
TypeScript
import { Link } from "react-router-dom"
|
||
import {
|
||
Ban,
|
||
Euro,
|
||
LayoutDashboard,
|
||
Package,
|
||
Timer,
|
||
TrendingUp,
|
||
Unlock,
|
||
X,
|
||
} from "lucide-react"
|
||
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Card, CardContent } from "@/components/ui/card"
|
||
import { Separator } from "@/components/ui/separator"
|
||
import { Section, SectionHeading } from "@/components/gebos/section"
|
||
import { CtaBanner } from "@/components/gebos/cta-banner"
|
||
import { IconBadge } from "@/components/gebos/icon-tile"
|
||
import { NumberedList } from "@/components/gebos/process-steps"
|
||
import {
|
||
AssetRender,
|
||
renders,
|
||
vectors,
|
||
} from "@/components/gebos/site-assets"
|
||
import { AudiencePage } from "@/pages/audiences/audience-page"
|
||
|
||
const deviceExamples = [
|
||
"Wärmemengenzähler",
|
||
"Warmwasserzähler",
|
||
"Kaltwasserzähler",
|
||
"Kommunikationsinfrastruktur",
|
||
"Rauchwarnmelder",
|
||
]
|
||
|
||
const rolloutSteps = [
|
||
{
|
||
title: "Portfolio und Objekte erfassen",
|
||
description:
|
||
"Bei der Auftragserstellung werden die betreffenden Gebäude, Wohnungen und die vorhandene beziehungsweise benötigte Ausstattung erfasst.",
|
||
},
|
||
{
|
||
title: "Gerätebedarf bestimmen",
|
||
description: (
|
||
<>
|
||
Für jedes Objekt wird festgelegt, welche Geräte benötigt werden.
|
||
Beispielsweise:
|
||
<span className="mt-2 flex flex-wrap gap-1.5">
|
||
{deviceExamples.map((device) => (
|
||
<Badge key={device} variant="muted">
|
||
{device}
|
||
</Badge>
|
||
))}
|
||
</span>
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
title: "GebOS bereitet den Rollout vor",
|
||
description:
|
||
"Gebäude und Wohnungen werden im System angelegt und die Hardware wird objektbezogen vorbereitet.",
|
||
},
|
||
{
|
||
title: "Installationsfertig liefern",
|
||
description:
|
||
"Die Geräte werden passend zum jeweiligen Gebäude beziehungsweise zur jeweiligen Nutzungseinheit ausgeliefert.",
|
||
},
|
||
{
|
||
title: "Bestehende Monteure installieren",
|
||
description:
|
||
"Eigene Mitarbeiter, Hausmeister oder bestehende Installationspartner können die Montage übernehmen. Eine umfangreiche Softwarekonfiguration vor Ort ist nicht erforderlich.",
|
||
},
|
||
{
|
||
title: "Bewohner einladen",
|
||
description:
|
||
"Nach der Einrichtung müssen im Wesentlichen noch die relevanten Bewohnerdaten ergänzt beziehungsweise Einladungen zum Mieterportal versendet werden.",
|
||
},
|
||
]
|
||
|
||
const noEffortItems = [
|
||
{ icon: <Ban />, title: "Keine aufwendige Gerätekonfiguration." },
|
||
{ icon: <X />, title: "Keine manuelle Anlage jedes einzelnen Gerätes." },
|
||
{
|
||
icon: <Unlock />,
|
||
title: "Keine spezielle GebOS-Zertifizierung für den Installateur.",
|
||
},
|
||
]
|
||
|
||
const portfolioStats = [
|
||
{ value: "48", label: "Gebäude" },
|
||
{ value: "384", label: "Wohnungen" },
|
||
{ value: "1.746", label: "Geräte" },
|
||
]
|
||
|
||
const statusInfos = [
|
||
"Auftrag angelegt",
|
||
"Hardware vorbereitet",
|
||
"Versendet",
|
||
"Installation begonnen",
|
||
"Installation vollständig",
|
||
"Geräte aktiv",
|
||
"Bewohner eingeladen",
|
||
"Handlungsbedarf",
|
||
]
|
||
|
||
const whyGebos = [
|
||
{
|
||
title: "Schneller Rollout",
|
||
sub: "Standardisierte Abläufe ermöglichen die parallele Umsetzung vieler Objekte.",
|
||
},
|
||
{
|
||
title: "Weniger Administration",
|
||
sub: "Gebäudedaten werden möglichst nur einmal erfasst und anschließend weiterverwendet.",
|
||
},
|
||
{
|
||
title: "Vorkonfigurierte Hardware",
|
||
sub: "Geräte werden bereits passend zu den jeweiligen Objekten vorbereitet.",
|
||
},
|
||
{
|
||
title: "Bestehende Installationspartner",
|
||
sub: "Eigene Hausmeister, technische Mitarbeiter oder externe Fachbetriebe können weiter eingesetzt werden.",
|
||
},
|
||
{
|
||
title: "Zentrale Portfolioübersicht",
|
||
sub: "Gebäude, Wohnungen und Geräte lassen sich gemeinsam betrachten.",
|
||
},
|
||
{
|
||
title: "Ein Ansprechpartner",
|
||
sub: "Technik und laufende digitale Dienstleistungen greifen ineinander.",
|
||
},
|
||
]
|
||
|
||
/** Portfolio/rollout hero per asset kit 06: building, teal bars, consumption ring. */
|
||
function PortfolioHeroArt() {
|
||
return (
|
||
<div className="relative aspect-[1.28] w-full">
|
||
<img
|
||
src={vectors.tealBars}
|
||
alt=""
|
||
className="absolute top-[22%] right-0 w-[44%]"
|
||
/>
|
||
<AssetRender
|
||
render={renders.building}
|
||
className="absolute inset-x-[8%] top-[4%]"
|
||
imgClassName="w-full"
|
||
loading="eager"
|
||
/>
|
||
<img
|
||
src={vectors.consumptionRing}
|
||
alt=""
|
||
className="absolute bottom-[3%] left-[2%] w-[28%]"
|
||
/>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default function HausverwaltungenPage() {
|
||
return (
|
||
<AudiencePage
|
||
breadcrumb="Hausverwaltungen"
|
||
title="Für Hausverwaltungen"
|
||
tagline="Skalieren Sie Ihre Bestände einfach."
|
||
lead="Rollout über viele Gebäude mit minimalem Aufwand – von der Planung bis zum laufenden Betrieb."
|
||
actions={
|
||
<>
|
||
<Button asChild size="lg">
|
||
<Link to="/konfigurator">Portfolio kalkulieren</Link>
|
||
</Button>
|
||
<Button asChild size="lg" variant="outline">
|
||
<Link to="/kontakt">Rollout besprechen</Link>
|
||
</Button>
|
||
</>
|
||
}
|
||
visual={<PortfolioHeroArt />}
|
||
features={[
|
||
{
|
||
icon: <Package />,
|
||
title: "Vorkonfigurierte Hardware",
|
||
},
|
||
{
|
||
icon: <Timer />,
|
||
title: "Wenig Aufwand vor Ort",
|
||
},
|
||
{
|
||
icon: <LayoutDashboard />,
|
||
title: "Zentrale Übersicht",
|
||
},
|
||
{
|
||
icon: <TrendingUp />,
|
||
title: "Skalierbar für wachsende Portfolios",
|
||
},
|
||
]}
|
||
closing={
|
||
<Section className="pt-0 sm:pt-0 lg:pt-0">
|
||
<CtaBanner
|
||
icon={<Euro />}
|
||
title="Wie sieht Ihr Portfolio aus?"
|
||
description="Erhalten Sie zunächst mit wenigen Angaben eine Preisindikation für mehrere Gebäude – oder sprechen Sie mit uns über vorhandene Messtechnik und den geplanten Rollout."
|
||
actions={
|
||
<>
|
||
<Button asChild variant="inverse" size="lg">
|
||
<Link to="/konfigurator">Portfolio kalkulieren</Link>
|
||
</Button>
|
||
<Button asChild variant="inverse" size="lg">
|
||
<Link to="/kontakt">Rollout besprechen</Link>
|
||
</Button>
|
||
</>
|
||
}
|
||
/>
|
||
</Section>
|
||
}
|
||
>
|
||
<Section className="pt-0 sm:pt-0 lg:pt-0">
|
||
<SectionHeading
|
||
align="center"
|
||
eyebrow="Skalierung"
|
||
title="Weniger Projektaufwand pro Gebäude"
|
||
lead="Bei einem einzelnen Gebäude sind manuelle Arbeitsschritte überschaubar. Bei dutzenden Gebäuden werden sie zum Problem. GebOS reduziert genau diese wiederkehrenden Aufgaben."
|
||
/>
|
||
<Card className="mx-auto mt-8 max-w-xl border-l-4 border-l-primary">
|
||
<CardContent className="py-6 text-center">
|
||
<p className="text-lg font-bold text-balance text-navy">
|
||
Objekte einmal erfassen. Geräte vorbereitet erhalten. Montieren.
|
||
Betreiben.
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</Section>
|
||
|
||
<Section className="pt-0 sm:pt-0 lg:pt-0">
|
||
<SectionHeading
|
||
eyebrow="Ablauf"
|
||
title="Bestellung und Installation greifen ineinander"
|
||
/>
|
||
<NumberedList className="mt-10 max-w-2xl" steps={rolloutSteps} />
|
||
</Section>
|
||
|
||
<Section className="pt-0 sm:pt-0 lg:pt-0">
|
||
<SectionHeading
|
||
align="center"
|
||
title="Der Monteur montiert. GebOS kümmert sich um den Rest."
|
||
lead="Die Installation soll nicht davon abhängen, dass vor Ort ein speziell geschulter GebOS-Techniker verfügbar ist."
|
||
/>
|
||
<div className="mt-10 grid gap-6 sm:grid-cols-3">
|
||
{noEffortItems.map((item, i) => (
|
||
<Card key={i}>
|
||
<CardContent className="flex flex-col items-center gap-4 py-6 text-center">
|
||
<IconBadge variant="soft" shape="squircle" size="lg">
|
||
{item.icon}
|
||
</IconBadge>
|
||
<p className="text-sm font-bold text-balance text-navy">
|
||
{item.title}
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
<p className="mt-8 text-center text-base text-muted-foreground">
|
||
Damit können bestehende Installationsstrukturen weiter genutzt
|
||
werden.
|
||
</p>
|
||
</Section>
|
||
|
||
<Section className="pt-0 sm:pt-0 lg:pt-0">
|
||
<SectionHeading
|
||
align="center"
|
||
eyebrow="Übersicht"
|
||
title="Rollout zentral überblicken"
|
||
lead="Bei größeren Portfolios reicht es nicht, Geräte lediglich zu installieren. Die Verwaltung muss erkennen können, wo der Rollout steht und wo Handlungsbedarf besteht."
|
||
/>
|
||
<Card className="mx-auto mt-10 max-w-3xl shadow-card-lg">
|
||
<CardContent className="py-6">
|
||
<div className="flex flex-wrap items-start justify-between gap-6">
|
||
<div className="min-w-0 flex-1">
|
||
<p className="text-xs font-bold tracking-[0.14em] text-primary uppercase">
|
||
Beispiel
|
||
</p>
|
||
<h3 className="mt-1 text-xl font-extrabold tracking-tight text-navy">
|
||
Portfolio
|
||
</h3>
|
||
<div className="mt-5 flex flex-wrap gap-x-10 gap-y-4">
|
||
{portfolioStats.map((stat) => (
|
||
<div key={stat.label}>
|
||
<div className="text-3xl font-extrabold tracking-tight text-navy">
|
||
{stat.value}
|
||
</div>
|
||
<div className="text-xs font-medium text-muted-foreground">
|
||
{stat.label}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="mt-6 flex flex-wrap gap-2">
|
||
<Badge>43 Gebäude aktiv</Badge>
|
||
<Badge variant="muted">3 in Installation</Badge>
|
||
<Badge variant="destructive">2 mit Handlungsbedarf</Badge>
|
||
</div>
|
||
</div>
|
||
<img
|
||
src={vectors.consumptionRing}
|
||
alt=""
|
||
className="w-36 shrink-0 max-sm:hidden"
|
||
/>
|
||
</div>
|
||
<Separator className="my-6" />
|
||
<p className="text-xs font-bold text-muted-foreground">
|
||
Mögliche Statusinformationen
|
||
</p>
|
||
<div className="mt-2.5 flex flex-wrap gap-1.5">
|
||
{statusInfos.map((status) => (
|
||
<Badge key={status} variant="outline">
|
||
{status}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</Section>
|
||
|
||
<Section className="pt-0 sm:pt-0 lg:pt-0">
|
||
<SectionHeading
|
||
align="center"
|
||
title="Warum GebOS für Hausverwaltungen?"
|
||
/>
|
||
<div className="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||
{whyGebos.map((item) => (
|
||
<Card key={item.title}>
|
||
<CardContent className="py-5">
|
||
<h3 className="text-sm font-bold text-navy">{item.title}</h3>
|
||
<p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">
|
||
{item.sub}
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</Section>
|
||
|
||
<Section className="pt-0 sm:pt-0 lg:pt-0">
|
||
<SectionHeading
|
||
align="center"
|
||
title="Vom kleinen Bestand bis zum wachsenden Portfolio"
|
||
lead="GebOS soll nicht verlangen, dass eine Hausverwaltung zunächst eine eigene Messdienst-Infrastruktur aufbaut. Neue Gebäude können schrittweise ergänzt und nach demselben standardisierten Prozess ausgerollt werden."
|
||
/>
|
||
</Section>
|
||
</AudiencePage>
|
||
)
|
||
}
|