save
This commit is contained in:
Lars Nolden
@@ -0,0 +1,348 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user