save
This commit is contained in:
Lars Nolden
@@ -0,0 +1,223 @@
|
||||
import * as React from "react"
|
||||
import { Link } from "react-router-dom"
|
||||
import { Building2, House, LineChart, Wrench } from "lucide-react"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card } from "@/components/ui/card"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select"
|
||||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import { Checklist } from "@/components/gebos/checklist"
|
||||
import { Container, Section, SectionHeading } from "@/components/gebos/section"
|
||||
import { PageBreadcrumb } from "@/components/gebos/page-breadcrumb"
|
||||
import {
|
||||
AssetRender,
|
||||
renders,
|
||||
vectors,
|
||||
} from "@/components/gebos/site-assets"
|
||||
|
||||
type AudienceKey =
|
||||
| "hauseigentuemer"
|
||||
| "hausverwaltung"
|
||||
| "messdienstleister"
|
||||
| "installateur"
|
||||
|
||||
const AUDIENCES: Record<
|
||||
AudienceKey,
|
||||
{
|
||||
select: string
|
||||
tab: string
|
||||
tabIcon: React.ReactNode
|
||||
headline: string
|
||||
text: string
|
||||
bullets: string[]
|
||||
cta: string
|
||||
href: string
|
||||
}
|
||||
> = {
|
||||
hauseigentuemer: {
|
||||
select: "Hauseigentümer",
|
||||
tab: "Hauseigentümer",
|
||||
tabIcon: <House />,
|
||||
headline: "Messdienstleistungen für Ihr Mehrfamilienhaus",
|
||||
text: "Installieren Sie vorkonfigurierte Technik selbst beziehungsweise mit Ihrem bestehenden Fachbetrieb – oder überlassen Sie GebOS die komplette Umsetzung.",
|
||||
bullets: [
|
||||
"einfache Installation",
|
||||
"transparente Kosten",
|
||||
"zuverlässiger laufender Betrieb",
|
||||
"eigene Fachbetriebe weiter nutzen",
|
||||
"wahlweise Selbstinstallation oder Komplettlösung",
|
||||
],
|
||||
cta: "GebOS für Hauseigentümer",
|
||||
href: "/fuer-wen/hauseigentuemer",
|
||||
},
|
||||
hausverwaltung: {
|
||||
select: "Hausverwaltung",
|
||||
tab: "Hausverwaltungen",
|
||||
tabIcon: <Building2 />,
|
||||
headline: "Viele Gebäude. Ein einfacher Rollout.",
|
||||
text: "Erfassen Sie Ihre Objekte einmal, erhalten Sie vorkonfigurierte Hardware und nutzen Sie bestehende Mitarbeiter oder Installationspartner für die Montage.",
|
||||
bullets: [
|
||||
"standardisierter Rollout",
|
||||
"vorkonfigurierte Geräte",
|
||||
"wenig Softwarearbeit vor Ort",
|
||||
"zentrale Portfolioverwaltung",
|
||||
"geringer administrativer Aufwand",
|
||||
"schnelle Erweiterung um weitere Gebäude",
|
||||
],
|
||||
cta: "GebOS für Hausverwaltungen",
|
||||
href: "/fuer-wen/hausverwaltungen",
|
||||
},
|
||||
messdienstleister: {
|
||||
select: "Messdienstleister",
|
||||
tab: "Messdienstleister",
|
||||
tabIcon: <LineChart />,
|
||||
headline: "Ihre Messdienstleistung. Unsere Infrastruktur.",
|
||||
text: "Nutzen Sie GebOS als technische Grundlage für Ihre eigenen Dienstleistungen – mit Hardware, Plattform, Gerätemanagement und optionalem White Label.",
|
||||
bullets: [
|
||||
"technische Plattform",
|
||||
"Gerätekompatibilität",
|
||||
"Skalierbarkeit",
|
||||
"APIs und Integrationen",
|
||||
"White Label",
|
||||
"individuelles Geschäftsmodell",
|
||||
],
|
||||
cta: "GebOS für Messdienstleister",
|
||||
href: "/fuer-wen/messdienstleister",
|
||||
},
|
||||
installateur: {
|
||||
select: "Installateur & Heizungsbauer",
|
||||
tab: "Installateure",
|
||||
tabIcon: <Wrench />,
|
||||
headline: "Bestellen. Montieren. Fertig.",
|
||||
text: "Setzen Sie GebOS bei Ihren bestehenden Kunden ein, ohne zunächst ein Partnerprogramm durchlaufen zu müssen.",
|
||||
bullets: [
|
||||
"kein verpflichtender Partnerstatus",
|
||||
"keine Mindestabnahme",
|
||||
"vorkonfigurierte Hardware",
|
||||
"keine aufwendige Softwarekonfiguration",
|
||||
"bestehende Kundenbeziehung bleibt erhalten",
|
||||
],
|
||||
cta: "GebOS für Installateure",
|
||||
href: "/fuer-wen/installateure",
|
||||
},
|
||||
}
|
||||
|
||||
const AUDIENCE_KEYS = Object.keys(AUDIENCES) as AudienceKey[]
|
||||
|
||||
/**
|
||||
* Page-local hero composition (04-for-whom kit):
|
||||
* building portfolio render, teal growth bars behind right,
|
||||
* consumption ring in front at the lower left.
|
||||
*/
|
||||
function ForWhomArt() {
|
||||
return (
|
||||
<div className="relative mx-auto aspect-[1.28] w-full max-w-[560px]">
|
||||
<img
|
||||
src={vectors.tealBars}
|
||||
alt=""
|
||||
className="absolute top-[16%] right-0 w-[38%]"
|
||||
/>
|
||||
<AssetRender
|
||||
render={renders.building}
|
||||
className="absolute inset-x-[6%] top-[6%]"
|
||||
imgClassName="w-full"
|
||||
loading="eager"
|
||||
/>
|
||||
<img
|
||||
src={vectors.consumptionRing}
|
||||
alt=""
|
||||
className="absolute bottom-[2%] left-[2%] w-[30%] drop-shadow-lg"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function ForWhomPage() {
|
||||
const [audience, setAudience] = React.useState<AudienceKey>("hausverwaltung")
|
||||
const active = AUDIENCES[audience]
|
||||
|
||||
return (
|
||||
<div className="bg-hero-glow">
|
||||
<Container>
|
||||
<Section className="pt-6 sm:pt-7 lg:pt-8">
|
||||
<PageBreadcrumb
|
||||
className="mb-4"
|
||||
items={[
|
||||
{ label: "Startseite", to: "/" },
|
||||
{ label: "Für wen?" },
|
||||
]}
|
||||
/>
|
||||
<SectionHeading
|
||||
eyebrow="Finden Sie die passende Lösung"
|
||||
title="Für wen ist GebOS?"
|
||||
lead="GebOS wird von unterschiedlichen Kundengruppen eingesetzt. Wählen Sie aus, was am besten zu Ihnen passt."
|
||||
/>
|
||||
|
||||
<div className="mt-8 flex flex-wrap items-center gap-3">
|
||||
<Label htmlFor="audience-select" className="text-muted-foreground">
|
||||
Ich bin …
|
||||
</Label>
|
||||
<Select
|
||||
value={audience}
|
||||
onValueChange={(value) => setAudience(value as AudienceKey)}
|
||||
>
|
||||
<SelectTrigger id="audience-select" className="w-64">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{AUDIENCE_KEYS.map((key) => (
|
||||
<SelectItem key={key} value={key}>
|
||||
{AUDIENCES[key].select}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 grid items-center gap-10 lg:grid-cols-[1.05fr_0.95fr] lg:gap-6">
|
||||
<Card className="max-w-xl gap-0 p-7">
|
||||
<h2 className="text-xl font-extrabold tracking-tight text-balance text-navy sm:text-2xl">
|
||||
{active.headline}
|
||||
</h2>
|
||||
<p className="mt-3 text-sm leading-relaxed text-pretty text-muted-foreground">
|
||||
{active.text}
|
||||
</p>
|
||||
<p className="mt-5 text-sm font-bold text-navy">
|
||||
Besonders wichtig für Sie:
|
||||
</p>
|
||||
<Checklist items={active.bullets} className="mt-3" />
|
||||
<div className="mt-6">
|
||||
<Button asChild>
|
||||
<Link to={active.href}>{active.cta}</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
<ForWhomArt />
|
||||
</div>
|
||||
|
||||
<Tabs
|
||||
value={audience}
|
||||
onValueChange={(value) => setAudience(value as AudienceKey)}
|
||||
className="mt-12"
|
||||
>
|
||||
<TabsList>
|
||||
{AUDIENCE_KEYS.map((key) => (
|
||||
<TabsTrigger key={key} value={key}>
|
||||
{AUDIENCES[key].tabIcon}
|
||||
{AUDIENCES[key].tab}
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
</Section>
|
||||
</Container>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user