save
This commit is contained in:
Lars Nolden
@@ -0,0 +1,271 @@
|
||||
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 {
|
||||
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"]
|
||||
|
||||
/** 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>
|
||||
</AudiencePage>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user