save

2026-08-13 15:46:04 +02:00
parent 920b1da4b0
commit 2c1a8ae9b5
178 changed files with 10289 additions and 0 deletions
@@ -0,0 +1,181 @@
+import type { ReactNode } from "react"
+import { Link } from "react-router-dom"
+import { Calculator, ChevronRight } from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { CtaBanner } from "@/components/gebos/cta-banner"
+import { ProcessSteps } from "@/components/gebos/process-steps"
+import { Container, Section, SectionHeading } from "@/components/gebos/section"
+import { PageBreadcrumb } from "@/components/gebos/page-breadcrumb"
+import {
+  AssetRender,
+  renders,
+  vectors,
+} from "@/components/gebos/site-assets"
+
+function StepMedia({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex h-16 items-end justify-center gap-1">{children}</div>
+  )
+}
+
+const steps = [
+  {
+    media: (
+      <StepMedia>
+        <img src={vectors.uviBadge} alt="" className="w-16" />
+      </StepMedia>
+    ),
+    title: "Gebäude erfassen",
+    description:
+      "Bei der Konfiguration werden Gebäude, Wohnungen und die benötigten Leistungen erfasst.",
+  },
+  {
+    media: (
+      <StepMedia>
+        <AssetRender render={renders.building} imgClassName="w-16" />
+      </StepMedia>
+    ),
+    title: "Gerätebedarf bestimmen",
+    description:
+      "Auf Basis der Gebäudedaten wird ermittelt, welche Messtechnik, Rauchwarnmelder und weiteren Komponenten benötigt werden.",
+  },
+  {
+    media: (
+      <StepMedia>
+        <img src={vectors.packageBox} alt="" className="w-16" />
+      </StepMedia>
+    ),
+    title: "Vorkonfiguriert liefern",
+    description:
+      "Gebäude, Wohnungen und Geräte werden bereits vorbereitet. Die Hardware wird objektbezogen und installationsfertig geliefert.",
+  },
+  {
+    media: (
+      <StepMedia>
+        <AssetRender render={renders.heatMeter} imgClassName="w-12" />
+        <AssetRender render={renders.gateway} imgClassName="w-9" />
+      </StepMedia>
+    ),
+    title: "Geräte montieren",
+    description: (
+      <>
+        Die Geräte müssen vor Ort im Wesentlichen nur noch fachgerecht montiert
+        werden.{" "}
+        <strong className="font-bold text-navy">
+          Keine aufwendige Softwarekonfiguration bei der Installation.
+        </strong>
+      </>
+    ),
+  },
+  {
+    media: (
+      <StepMedia>
+        <img src={vectors.wirelessOrb} alt="" className="w-16" />
+      </StepMedia>
+    ),
+    title: "Automatisch betreiben",
+    description:
+      "Nach der Installation übernimmt GebOS die laufende Datenerfassung und die gebuchten digitalen Dienstleistungen.",
+  },
+]
+
+const journey = [
+  "Besucher versteht GebOS",
+  "identifiziert seinen Anwendungsfall",
+  "berechnet einen ungefähren Preis",
+  "speichert seine Konfiguration",
+  "ergänzt die tatsächlichen Gebäudedaten",
+  "erhält den genauen Preis",
+  "erteilt den Auftrag",
+  "GebOS bereitet Gebäude und Geräte vor",
+  "vorkonfigurierte Hardware wird geliefert",
+  "Montage vor Ort",
+  "automatischer laufender Betrieb",
+]
+
+export default function HowItWorksPage() {
+  return (
+    <>
+      <div className="bg-hero-glow">
+        <Container>
+          <Section className="pt-6 pb-10 sm:pt-7 sm:pb-12 lg:pt-8 lg:pb-14">
+            <PageBreadcrumb
+              className="mb-4 justify-center"
+              items={[
+                { label: "Startseite", to: "/" },
+                { label: "So funktioniert’s" },
+              ]}
+            />
+            <SectionHeading
+              align="center"
+              title="So funktioniert GebOS"
+              lead="Von der Bestellung bis zum laufenden Betrieb. GebOS verbindet Bestellung, Konfiguration und Installation miteinander."
+            />
+            <Card className="mt-10 gap-0 p-8 sm:mt-12 sm:p-10">
+              <ProcessSteps steps={steps} />
+            </Card>
+            <p className="mx-auto mt-10 max-w-xl text-center text-sm font-medium text-muted-foreground italic">
+              „Bestellung, Konfiguration und Installation greifen ineinander.“
+            </p>
+          </Section>
+        </Container>
+      </div>
+      <Container>
+        <Section>
+          <SectionHeading
+            align="center"
+            eyebrow="Gesamtprozess"
+            title="Der Gesamtprozess aus Kundensicht"
+            lead="Website, Konfigurator und operativer Rollout sind keine getrennten Systeme – sie bauen aufeinander auf."
+          />
+          <div className="mx-auto mt-10 flex max-w-4xl flex-wrap items-center justify-center gap-x-1.5 gap-y-3">
+            {journey.map((station, i) => (
+              <span key={station} className="flex items-center gap-1.5">
+                <Badge variant="outline" className="bg-card">
+                  {station}
+                </Badge>
+                {i < journey.length - 1 ? (
+                  <ChevronRight
+                    aria-hidden="true"
+                    className="size-4 shrink-0 text-brand-400"
+                  />
+                ) : null}
+              </span>
+            ))}
+          </div>
+          <div className="mx-auto mt-10 max-w-2xl text-center">
+            <p className="text-base font-bold text-navy sm:text-lg">
+              Der Konfigurator ist der Beginn des
+              GebOS-Bestell- und Rolloutprozesses.
+            </p>
+            <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+              Die einmal eingegebenen Gebäudedaten werden nicht erneut erfasst,
+              sondern durch den gesamten Prozess weiterverwendet.
+            </p>
+            <p className="mt-6 font-mono text-xs tracking-wide text-muted-foreground uppercase">
+              Preisschätzung → Konfiguration → Bestellung → Gerätevorbereitung →
+              Installation → Betrieb
+            </p>
+          </div>
+        </Section>
+      </Container>
+      <Container>
+        <Section className="pt-0">
+          <CtaBanner
+            icon={<Calculator />}
+            title="Was kostet GebOS für Ihr Gebäude?"
+            description="Mit wenigen Angaben erhalten Sie eine erste Preisindikation."
+            actions={
+              <Button variant="inverse" size="lg" asChild>
+                <Link to="/konfigurator">Preis berechnen</Link>
+              </Button>
+            }
+          />
+        </Section>
+      </Container>
+    </>
+  )
+}