Files
gebos-landing/component-library/src/pages/audiences/messdienstleister.tsx
T
2026-08-14 13:34:12 +02:00

310 lines
11 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import { Link } from "react-router-dom"
import { ArrowDown, Code2, Layers, ShieldCheck, Tag } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Section, SectionHeading } from "@/components/gebos/section"
import { Checklist } from "@/components/gebos/checklist"
import { FaqAccordion, type FaqItem } from "@/components/gebos/faq-accordion"
import {
AssetRender,
renders,
vectors,
} from "@/components/gebos/site-assets"
import { AudiencePage, AudienceClosing } from "@/pages/audiences/audience-page"
const platformRequirements = [
"kompatible Messtechnik",
"Kommunikationsinfrastruktur",
"Gateways",
"sichere Datenerfassung",
"Geräteverwaltung",
"Monitoring",
"Verbrauchsdatenverarbeitung",
"Nutzerportale",
"Schnittstellen",
"laufender technischer Betrieb",
]
const whiteLabelItems = [
"eigenes Branding",
"eigene Kundenbeziehung",
"mandantenfähige Verwaltung",
"Endkundenportale",
"APIs und Datenexporte",
"Geräteverwaltung",
"technischer Support",
]
const platformCapabilities = [
{
title: "Gerätekompatibilität",
sub: "Einbindung unterschiedlicher Zähler- und Gerätetypen auf Basis geeigneter Standards.",
},
{
title: "Gateway-Infrastruktur",
sub: "Zentrale Erfassung und sichere Übertragung der Gerätedaten.",
},
{
title: "Gerätemanagement",
sub: "Verwaltung großer Gerätebestände über Gebäude und Kunden hinweg.",
},
{
title: "Monitoring",
sub: "Probleme und Ausfälle erkennen, bevor daraus manueller Aufwand beim Kunden entsteht.",
},
{
title: "APIs und Integrationen",
sub: "Anbindung an eigene Systeme und bestehende Geschäftsprozesse.",
},
{
title: "Mandantenfähigkeit",
sub: "Kunden und Bestände getrennt innerhalb einer gemeinsamen Plattform verwalten.",
},
{
title: "White Label",
sub: "GebOS-Infrastruktur unter der Marke des Messdienstleisters einsetzen.",
},
]
const businessComponents = [
"Einkaufspreise für Hardware",
"Plattformgebühren",
"Mengenstaffeln",
"wiederkehrende Gebühren",
"White-Label-Konditionen",
"Support- und Servicelevel",
"mögliche Mindestmengen",
]
const stackFlow = ["Ihre Kunden", "Ihr Messdienst", "GebOS Plattform"]
const faqs: FaqItem[] = [
{
question: "Können wir GebOS unter unserer eigenen Marke anbieten?",
answer:
"Ja. GebOS ist als technische Grundlage für Dienstleistungen unter Ihrer Marke vorgesehen mit eigenem Branding, mandantenfähiger Verwaltung und Endkundenportalen in Ihrem Auftritt.",
},
{
question: "Behalten wir die Kundenbeziehung?",
answer:
"Ja. Sie betreuen Ihre Kunden und verkaufen Ihre Dienstleistungen. GebOS stellt Hardware, Datenerfassung, Software und Betrieb im Hintergrund bereit.",
},
{
question: "Wie integrieren wir GebOS in unsere Systeme?",
answer:
"Über offene Schnittstellen: APIs und Datenexporte für Verbrauchsdaten, Geräte- und Objektstrukturen. Damit lässt sich GebOS an bestehende Abrechnungs- und Verwaltungssysteme anbinden.",
},
{
question: "Wer betreibt die Plattform technisch?",
answer:
"GebOS einschließlich Kommunikationsinfrastruktur, Gateways, Datenerfassung, Geräteverwaltung und Monitoring. Sie müssen dafür keine eigene Hardware- und Softwareentwicklung aufbauen.",
},
{
question: "Wie werden die Konditionen festgelegt?",
answer:
"Individuell beziehungsweise mengenabhängig mit anderen Geschäftsmodellen, Mengenstaffeln und gegebenenfalls White-Label-Konditionen als im öffentlichen Preiskonfigurator. Die konkreten Konditionen werden nicht öffentlich dargestellt.",
},
]
/** Platform hero per asset kit 07: laptop dashboard, glass cubes, cloud support. */
function PlatformHeroArt() {
return (
<div className="relative flex aspect-[1.45] w-full items-center">
<img
src={vectors.cloudSupport}
alt=""
className="absolute top-0 right-0 w-[26%]"
/>
<AssetRender
render={renders.laptopDashboard}
className="mx-auto w-full"
imgClassName="w-full"
loading="eager"
/>
<img
src={vectors.glassCubes}
alt=""
className="absolute bottom-[2%] left-0 w-[24%]"
/>
</div>
)
}
export default function MessdienstleisterPage() {
return (
<AudiencePage
breadcrumb="Messdienstleister"
title="Für Messdienstleister"
tagline="Ihre Services. Unsere Plattform."
lead="Nutzen Sie GebOS als technische Grundlage für Ihren eigenen Messdienst skalierbar und zuverlässig."
actions={
<>
<Button asChild size="lg">
<Link to="/kontakt">Plattform kennenlernen</Link>
</Button>
<Button asChild size="lg" variant="outline">
<Link to="/kontakt">Konditionen anfragen</Link>
</Button>
</>
}
visual={<PlatformHeroArt />}
features={[
{
icon: <Tag />,
title: "White Label",
sub: "Ihr Branding, Ihre Kunden",
},
{
icon: <Code2 />,
title: "Offene APIs",
sub: "Einfach integrieren",
},
{
icon: <Layers />,
title: "Skalierbare Plattform",
sub: "Für jedes Geschäftsmodell",
},
{
icon: <ShieldCheck />,
title: "Zuverlässiger Betrieb",
sub: "Sicher und performant",
},
]}
closing={
<AudienceClosing
title="Möchten Sie GebOS für Ihren Messdienst einsetzen?"
lead="Wir zeigen Ihnen Plattform, technische Möglichkeiten und mögliche Geschäftsmodelle."
actions={
<>
<Button asChild size="lg">
<Link to="/kontakt">Plattform kennenlernen</Link>
</Button>
<Button asChild size="lg" variant="outline">
<Link to="/kontakt">Konditionen anfragen</Link>
</Button>
</>
}
/>
}
>
<Section className="pt-0 sm:pt-0 lg:pt-0">
<SectionHeading
eyebrow="Infrastruktur"
title="Messdienstleistungen anbieten, ohne die gesamte Plattform selbst zu entwickeln"
lead="Moderne Messdienstleistungen benötigen mehr als einzelne Zähler. Erforderlich sind unter anderem:"
/>
<div className="mt-8 grid max-w-3xl gap-x-10 gap-y-2.5 sm:grid-cols-2">
<Checklist items={platformRequirements.slice(0, 5)} />
<Checklist items={platformRequirements.slice(5)} />
</div>
<p className="mt-8 text-base font-bold text-navy">
GebOS stellt diese Infrastruktur als Plattform bereit.
</p>
</Section>
<Section className="pt-0 sm:pt-0 lg:pt-0">
<SectionHeading
align="center"
title="Konzentrieren Sie sich auf Ihre Kunden"
lead="Der Messdienstleister betreut seine Kunden und verkauft seine Dienstleistungen. GebOS stellt die technische Infrastruktur im Hintergrund bereit."
/>
<Card className="mx-auto mt-10 max-w-md">
<CardContent className="flex flex-col items-center gap-2.5 py-8">
{stackFlow.map((label) => (
<div
key={label}
className="flex flex-col items-center gap-2.5"
>
<div className="rounded-full border border-border bg-card px-6 py-2.5 text-sm font-bold text-navy shadow-pill">
{label}
</div>
<ArrowDown className="size-4 text-primary" />
</div>
))}
<div className="rounded-full bg-brand-gradient px-6 py-2.5 text-center text-sm font-bold text-white shadow-band">
Hardware · Datenerfassung · Software · Betrieb
</div>
</CardContent>
</Card>
</Section>
<Section className="pt-0 sm:pt-0 lg:pt-0">
<SectionHeading
eyebrow="Ihre Marke"
title="White Label"
lead="GebOS kann als technische Grundlage für Dienstleistungen unter Ihrer eigenen Marke eingesetzt werden. Je nach Geschäftsmodell können unter anderem relevant sein:"
/>
<div className="mt-8 grid max-w-3xl gap-x-10 gap-y-2.5 sm:grid-cols-2">
<Checklist items={whiteLabelItems.slice(0, 4)} />
<Checklist items={whiteLabelItems.slice(4)} />
</div>
</Section>
<Section className="pt-0 sm:pt-0 lg:pt-0">
<SectionHeading
align="center"
eyebrow="Technik"
title="Technische Plattform"
lead="Für Messdienstleister steht die technische Leistungsfähigkeit deutlich stärker im Vordergrund."
/>
<div className="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
{platformCapabilities.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"
eyebrow="Konditionen"
title="Das Geschäftsmodell muss funktionieren"
lead="Eine Plattform für Messdienstleister ist nur interessant, wenn auch der wirtschaftliche Rahmen stimmt. Deshalb werden kommerzielle Konditionen individuell beziehungsweise mengenabhängig vereinbart mit anderen Geschäftsmodellen, Mengenstaffeln und gegebenenfalls White-Label-Konditionen als im öffentlichen Preiskonfigurator."
/>
<div className="mx-auto mt-8 max-w-2xl text-center">
<p className="text-xs font-bold text-muted-foreground">
Mögliche Bestandteile
</p>
<div className="mt-2.5 flex flex-wrap justify-center gap-1.5">
{businessComponents.map((component) => (
<Badge key={component} variant="outline">
{component}
</Badge>
))}
</div>
<p className="mt-6 text-sm text-muted-foreground italic">
Die konkreten Konditionen werden nicht öffentlich auf der Website
dargestellt.
</p>
</div>
</Section>
<Section className="pt-0 sm:pt-0 lg:pt-0">
<SectionHeading
align="center"
title="Gemeinsam skalieren"
lead="GebOS soll insbesondere Messdienstleistern ermöglichen, neue digitale Dienstleistungen anzubieten, ohne dafür eine vollständige eigene Hardware- und Softwareentwicklung aufbauen zu müssen. Der Messdienstleister behält dabei seine Kundenbeziehung und sein eigenes Geschäftsmodell."
/>
</Section>
<Section className="pt-0 sm:pt-0 lg:pt-0">
<SectionHeading
align="center"
eyebrow="Häufige Fragen"
title="Was Messdienstleister am häufigsten fragen"
/>
<FaqAccordion className="mt-10" items={faqs} />
</Section>
</AudiencePage>
)
}