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