328 lines
11 KiB
TypeScript
328 lines
11 KiB
TypeScript
import { Link } from "react-router-dom"
|
||
import {
|
||
CircleCheck,
|
||
GraduationCap,
|
||
Package,
|
||
PackageX,
|
||
Unlock,
|
||
Users,
|
||
Wrench,
|
||
} from "lucide-react"
|
||
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Card } from "@/components/ui/card"
|
||
import { Checklist } from "@/components/gebos/checklist"
|
||
import { IconBadge } from "@/components/gebos/icon-tile"
|
||
import { ProcessSteps } from "@/components/gebos/process-steps"
|
||
import { Section, SectionHeading } from "@/components/gebos/section"
|
||
import { AssetRender, renders, vectors } from "@/components/gebos/site-assets"
|
||
import { AudiencePage, AudienceClosing } from "@/pages/audiences/audience-page"
|
||
|
||
const KUNDEN_BEDARFE = [
|
||
"UVI",
|
||
"Heizkostenabrechnung",
|
||
"fernauslesbare Messtechnik",
|
||
"Rauchwarnmelder",
|
||
]
|
||
|
||
const KEINE_HUERDEN = [
|
||
{
|
||
icon: <Unlock />,
|
||
title: "Keine verpflichtende Partnerschaft",
|
||
},
|
||
{
|
||
icon: <PackageX />,
|
||
title: "Keine Mindestabnahme",
|
||
},
|
||
{
|
||
icon: <GraduationCap />,
|
||
title: "Keine verpflichtende GebOS-Vertriebsschulung",
|
||
},
|
||
{
|
||
icon: <Wrench />,
|
||
title: "Keine komplizierte Softwareeinrichtung auf der Baustelle",
|
||
},
|
||
]
|
||
|
||
const GEBOS_BEREITET_VOR = [
|
||
"Gebäudestruktur",
|
||
"Wohnungen beziehungsweise Nutzungseinheiten",
|
||
"Gerätezuordnung",
|
||
"benötigte Hardware",
|
||
"Kommunikationsinfrastruktur",
|
||
"Softwarestruktur",
|
||
]
|
||
|
||
const SIE_UEBERNEHMEN = [
|
||
"fachgerechte Montage",
|
||
"gegebenenfalls Austausch vorhandener Geräte",
|
||
"Einbau der vorgesehenen Messtechnik",
|
||
"Abschluss der Installation",
|
||
]
|
||
|
||
export default function InstallateurePage() {
|
||
return (
|
||
<AudiencePage
|
||
breadcrumb="Installateure & Heizungsbauer"
|
||
title={
|
||
<>
|
||
Für Installateure &
|
||
<br />
|
||
Heizungsbauer
|
||
</>
|
||
}
|
||
tagline="Bestellen. Montieren. Fertig."
|
||
lead="GebOS für Ihre Kunden installieren – ohne Partnerprogramm, verpflichtende Zertifizierung oder aufwendige Softwarekonfiguration."
|
||
actions={
|
||
<Button asChild size="lg">
|
||
<Link to="/konfigurator">Gebäude für meinen Kunden konfigurieren</Link>
|
||
</Button>
|
||
}
|
||
visual={
|
||
<div className="relative aspect-[1.28] w-full">
|
||
<img
|
||
src={vectors.checkOrb}
|
||
alt=""
|
||
className="absolute top-[6%] right-[8%] w-[16%]"
|
||
/>
|
||
<AssetRender
|
||
render={renders.heatMeter}
|
||
className="absolute top-[30%] left-[2%] w-[38%]"
|
||
imgClassName="w-full"
|
||
/>
|
||
<AssetRender
|
||
render={renders.gateway}
|
||
className="absolute top-[24%] right-[16%] w-[46%]"
|
||
imgClassName="w-full"
|
||
/>
|
||
<img
|
||
src={vectors.glassCubes}
|
||
alt=""
|
||
className="absolute right-[1%] bottom-[10%] w-[26%]"
|
||
/>
|
||
</div>
|
||
}
|
||
features={[
|
||
{
|
||
icon: <Unlock />,
|
||
title: "Keine Partnerpflichten",
|
||
sub: "Keine Mindestmengen",
|
||
},
|
||
{
|
||
icon: <Package />,
|
||
title: "Vorkonfigurierte Hardware",
|
||
},
|
||
{
|
||
icon: <Wrench />,
|
||
title: "Einfache Installation",
|
||
sub: "Keine Softwarekonfiguration",
|
||
},
|
||
{
|
||
icon: <Users />,
|
||
title: "Ihre Kunden",
|
||
sub: "Bleiben Ihre Kunden",
|
||
},
|
||
]}
|
||
closing={
|
||
<AudienceClosing
|
||
title="GebOS bei einem Kunden einsetzen?"
|
||
lead="Stellen Sie mit wenigen Angaben zunächst die ungefähre Ausstattung und den Preis für das Gebäude zusammen."
|
||
actions={
|
||
<Button asChild size="lg">
|
||
<Link to="/konfigurator">
|
||
Gebäude für meinen Kunden konfigurieren
|
||
</Link>
|
||
</Button>
|
||
}
|
||
/>
|
||
}
|
||
>
|
||
{/* 1. Ihr Kunde braucht eine Messdienstlösung? */}
|
||
<Section className="pt-4 sm:pt-6 lg:pt-8">
|
||
<SectionHeading
|
||
eyebrow="Ausgangslage"
|
||
title="Ihr Kunde braucht eine Messdienstlösung?"
|
||
lead="Sie betreuen ein Mehrfamilienhaus und Ihr Kunde benötigt beispielsweise:"
|
||
/>
|
||
<div className="mt-6 flex flex-wrap gap-2.5">
|
||
{KUNDEN_BEDARFE.map((bedarf) => (
|
||
<Badge
|
||
key={bedarf}
|
||
variant="outline"
|
||
className="px-4 py-1.5 text-sm font-semibold text-navy"
|
||
>
|
||
<CircleCheck className="text-primary" />
|
||
{bedarf}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
<p className="mt-6 max-w-2xl text-base leading-relaxed text-muted-foreground">
|
||
Dann können Sie GebOS einfach für das betreffende Gebäude einsetzen.{" "}
|
||
<strong className="font-semibold text-navy">
|
||
Sie müssen dafür nicht zunächst Teil eines Partnerprogramms werden.
|
||
</strong>
|
||
</p>
|
||
</Section>
|
||
|
||
{/* 2. So einfach soll die Installation sein */}
|
||
<Section className="pt-0 sm:pt-0 lg:pt-0">
|
||
<SectionHeading
|
||
eyebrow="Ablauf"
|
||
title="So einfach soll die Installation sein"
|
||
align="center"
|
||
/>
|
||
<ProcessSteps
|
||
className="mt-12"
|
||
steps={[
|
||
{
|
||
media: (
|
||
<AssetRender
|
||
render={renders.building}
|
||
className="flex h-16 items-center justify-center"
|
||
imgClassName="h-16 w-auto"
|
||
/>
|
||
),
|
||
title: "Gebäude erfassen",
|
||
description:
|
||
"Die benötigte Ausstattung wird für das konkrete Objekt zusammengestellt.",
|
||
},
|
||
{
|
||
media: (
|
||
<img
|
||
src={vectors.packageBox}
|
||
alt=""
|
||
className="h-16 w-16 object-contain"
|
||
/>
|
||
),
|
||
title: "Geräte bestellen",
|
||
description:
|
||
"GebOS liefert die zum Gebäude passenden Geräte.",
|
||
},
|
||
{
|
||
media: (
|
||
<AssetRender
|
||
render={renders.gateway}
|
||
className="flex h-16 items-center justify-center"
|
||
imgClassName="h-16 w-auto"
|
||
/>
|
||
),
|
||
title: "Vorkonfiguriert erhalten",
|
||
description:
|
||
"Die Hardware wird bereits objektbezogen vorbereitet.",
|
||
},
|
||
{
|
||
media: (
|
||
<AssetRender
|
||
render={renders.heatMeter}
|
||
className="flex h-16 items-center justify-center"
|
||
imgClassName="h-16 w-auto"
|
||
/>
|
||
),
|
||
title: "Montieren",
|
||
description: "Sie übernehmen die fachgerechte Installation.",
|
||
},
|
||
{
|
||
media: (
|
||
<img
|
||
src={vectors.checkOrb}
|
||
alt=""
|
||
className="h-16 w-16 object-contain"
|
||
/>
|
||
),
|
||
title: "Fertig",
|
||
description:
|
||
"Die digitale Einrichtung und der laufende Betrieb werden von GebOS übernommen.",
|
||
},
|
||
]}
|
||
/>
|
||
</Section>
|
||
|
||
{/* 3. Kein klassisches Partnerprogramm erforderlich */}
|
||
<Section className="pt-0 sm:pt-0 lg:pt-0">
|
||
<SectionHeading
|
||
eyebrow="Ohne Einstiegshürden"
|
||
title="Kein klassisches Partnerprogramm erforderlich"
|
||
lead="Für die normale Installation von GebOS sollen keine unnötigen Einstiegshürden entstehen."
|
||
align="center"
|
||
/>
|
||
<div className="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
|
||
{KEINE_HUERDEN.map((item, i) => (
|
||
<Card key={i} className="items-start gap-4 p-6">
|
||
<IconBadge variant="soft" shape="squircle">
|
||
{item.icon}
|
||
</IconBadge>
|
||
<p className="text-sm font-bold leading-snug text-navy">
|
||
{item.title}
|
||
</p>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
<p className="mx-auto mt-8 max-w-2xl text-center text-base leading-relaxed text-muted-foreground">
|
||
<strong className="font-semibold text-navy">
|
||
Der Fachbetrieb bleibt der Fachbetrieb des Kunden.
|
||
</strong>{" "}
|
||
GebOS stellt das Produkt und die digitale Infrastruktur bereit.
|
||
</p>
|
||
</Section>
|
||
|
||
{/* 4. Sie können bei Ihren bestehenden Kunden bleiben */}
|
||
<Section className="pt-0 sm:pt-0 lg:pt-0">
|
||
<SectionHeading
|
||
title="Sie können bei Ihren bestehenden Kunden bleiben"
|
||
lead={
|
||
<>
|
||
GebOS ist besonders interessant, wenn ein Kunde Sie ohnehin mit
|
||
Arbeiten an Heizungs-, Wasser- oder Gebäudetechnik beauftragt und
|
||
zusätzlich eine Lösung für Messdienstleistungen benötigt. Sie
|
||
können die Installation übernehmen, ohne selbst einen
|
||
vollständigen Messdienst aufbauen zu müssen.
|
||
</>
|
||
}
|
||
/>
|
||
</Section>
|
||
|
||
{/* 5. Was GebOS vorbereitet / Was Sie übernehmen */}
|
||
<Section className="pt-0 sm:pt-0 lg:pt-0">
|
||
<div className="grid gap-6 lg:grid-cols-2">
|
||
<Card className="gap-0 p-6 sm:p-8">
|
||
<h3 className="text-xl font-extrabold tracking-tight text-navy">
|
||
Was GebOS vorbereitet
|
||
</h3>
|
||
<p className="mt-1 text-sm text-muted-foreground">Je nach Auftrag:</p>
|
||
<Checklist className="mt-5" items={GEBOS_BEREITET_VOR} />
|
||
<p className="mt-5 text-sm leading-relaxed text-muted-foreground">
|
||
Damit soll vor Ort möglichst wenig zusätzliche digitale Arbeit
|
||
entstehen.
|
||
</p>
|
||
</Card>
|
||
<Card className="gap-0 p-6 sm:p-8">
|
||
<h3 className="text-xl font-extrabold tracking-tight text-navy">
|
||
Was Sie übernehmen
|
||
</h3>
|
||
<p className="mt-1 text-sm text-muted-foreground">
|
||
Das Handwerk bleibt bei Ihnen:
|
||
</p>
|
||
<Checklist className="mt-5" items={SIE_UEBERNEHMEN} />
|
||
</Card>
|
||
</div>
|
||
</Section>
|
||
|
||
{/* 6. Und wenn Sie regelmäßig GebOS installieren? */}
|
||
<Section className="pt-0 pb-10 sm:pt-0 sm:pb-12 lg:pt-0 lg:pb-14">
|
||
<div className="mx-auto max-w-2xl text-center">
|
||
<h2 className="text-2xl font-extrabold tracking-tight text-balance text-navy sm:text-3xl">
|
||
Und wenn Sie regelmäßig GebOS installieren?
|
||
</h2>
|
||
<p className="mt-4 text-base leading-relaxed text-muted-foreground">
|
||
Auch dann soll der Einstieg freiwillig bleiben. Für Fachbetriebe mit
|
||
größerem Volumen können später zusätzliche Konditionen oder
|
||
Leistungen angeboten werden. Das normale Installieren von GebOS
|
||
bleibt davon unabhängig.
|
||
</p>
|
||
</div>
|
||
</Section>
|
||
</AudiencePage>
|
||
)
|
||
}
|