save

2026-08-13 23:12:07 +02:00
parent 2f09345ad3
commit a5d773d9f3
26 changed files with 260 additions and 134 deletions
@@ -1,19 +1,12 @@
 import { Link } from "react-router-dom"
-import {
-  ArrowRight,
-  Building2,
-  Calculator,
-  HardHat,
-  House,
-  Network,
-} from "lucide-react"
+import { ArrowRight, Calculator } from "lucide-react"

 import { Button } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
 import { Container, Section, SectionHeading } from "@/components/gebos/section"
 import { PageHero } from "@/components/gebos/page-hero"
 import { HeroArt } from "@/components/gebos/hero-art"
-import { FeatureTile, IconBadge } from "@/components/gebos/icon-tile"
+import { FeatureTile } from "@/components/gebos/icon-tile"
 import { ProcessSteps, NumberedList } from "@/components/gebos/process-steps"
 import { Checklist } from "@/components/gebos/checklist"
 import { CtaBanner } from "@/components/gebos/cta-banner"
@@ -27,34 +20,34 @@ import {
 const features = [
  {
    media: <img src={icons.uvi} alt="" className="size-14" loading="lazy" />,
-    title: "UVI",
-    sub: "Monatliche Verbrauchsinformation",
+    title: "Unterjährighe Verbrauchsinformation (UVI)",
+    // sub: "Monatliche Verbrauchsinformation",
  },
  {
    media: (
      <img src={icons.billing} alt="" className="size-14" loading="lazy" />
    ),
    title: "Heizkosten\u00adabrechnung",
-    sub: "Jährlich korrekt abrechnen",
+    // sub: "Jährlich korrekt abrechnen",
  },
  {
    media: (
      <img src={icons.smokeAlarm} alt="" className="size-14" loading="lazy" />
    ),
    title: "Rauchwarnmelder",
-    sub: "Sicher überwacht, zentral verwaltet",
+    // sub: "Sicher überwacht, zentral verwaltet",
  },
  {
    media: <img src={icons.radio} alt="" className="size-14" loading="lazy" />,
    title: "Fernauslesbare Messtechnik",
-    sub: "Automatisch erfasst, sicher übertragen",
+    // sub: "Automatisch erfasst, sicher übertragen",
  },
  {
    media: (
      <img src={icons.portal} alt="" className="size-14" loading="lazy" />
    ),
    title: "Portale & Verwaltung",
-    sub: "Alle Daten und Geräte im Blick",
+    // sub: "Alle Daten und Geräte im Blick",
  },
 ]

@@ -153,22 +146,18 @@ const processSteps = [

 const lessEffort = [
  {
-    vector: vectors.packageBox,
    title: "Vorkonfigurierte Hardware",
    text: "Geräte werden passend zum jeweiligen Gebäude und zur vorgesehenen Nutzung vorbereitet.",
  },
  {
-    vector: vectors.checkOrb,
    title: "Keine aufwendige Einrichtung auf der Baustelle",
    text: "Der Installateur kann sich auf die fachgerechte Montage konzentrieren.",
  },
  {
-    vector: vectors.checkOrb,
    title: "Bestehende Fachbetriebe nutzen",
    text: "Kein spezieller GebOS-Partner erforderlich – eigene Hausmeister, Heizungsbauer oder bestehende Installationspartner können weiterhin eingesetzt werden.",
  },
  {
-    vector: vectors.checkOrb,
    title: "Weniger doppelte Dateneingabe",
    text: "Informationen aus Bestellung und Konfiguration werden für den späteren Betrieb weiterverwendet.",
  },
@@ -203,7 +192,14 @@ const systemTasks = [

 const audiences = [
  {
-    icon: <House />,
+    media: (
+      <AssetRender
+        render={renders.houseSmallIso}
+        alt=""
+        className="flex size-14 shrink-0 items-center justify-center"
+        imgClassName="w-14"
+      />
+    ),
    name: "Hauseigentümer",
    headline: "Messdienstleistungen für Ihr Mehrfamilienhaus",
    text: "Installieren Sie vorkonfigurierte Technik selbst beziehungsweise mit Ihrem bestehenden Fachbetrieb – oder überlassen Sie GebOS die komplette Umsetzung.",
@@ -216,7 +212,14 @@ const audiences = [
    to: "/fuer-wen/hauseigentuemer",
  },
  {
-    icon: <Building2 />,
+    media: (
+      <AssetRender
+        render={renders.housesSmallIso}
+        alt=""
+        className="flex size-14 shrink-0 items-center justify-center"
+        imgClassName="w-14"
+      />
+    ),
    name: "Hausverwaltungen",
    headline: "Viele Gebäude. Ein einfacher Rollout.",
    text: "Erfassen Sie Ihre Objekte einmal, erhalten Sie vorkonfigurierte Hardware und nutzen Sie bestehende Mitarbeiter oder Installationspartner für die Montage.",
@@ -229,7 +232,14 @@ const audiences = [
    to: "/fuer-wen/hausverwaltungen",
  },
  {
-    icon: <Network />,
+    media: (
+      <AssetRender
+        render={renders.sprinter}
+        alt=""
+        className="flex size-14 shrink-0 items-center justify-center"
+        imgClassName="w-14"
+      />
+    ),
    name: "Messdienstleister",
    headline: "Ihre Messdienstleistung. Unsere Infrastruktur.",
    text: "Nutzen Sie GebOS als technische Grundlage für Ihre eigenen Dienstleistungen – mit Hardware, Plattform, Gerätemanagement und optionalem White Label.",
@@ -238,7 +248,14 @@ const audiences = [
    to: "/fuer-wen/messdienstleister",
  },
  {
-    icon: <HardHat />,
+    media: (
+      <AssetRender
+        render={renders.workerTablet}
+        alt=""
+        className="flex size-14 shrink-0 items-center justify-center"
+        imgClassName="w-14"
+      />
+    ),
    name: "Installateure & Heizungsbauer",
    headline: "Bestellen. Montieren. Fertig.",
    text: "Setzen Sie GebOS bei Ihren bestehenden Kunden ein, ohne zunächst ein Partnerprogramm durchlaufen zu müssen.",
@@ -294,7 +311,7 @@ export default function HomePage() {
            <span className="text-primary">einfach</span> gemacht.
          </>
        }
-        lead="Unterjährige Verbrauchsinformation (UVI), Heizkostenabrechnung und Rauchwarnmelder – von der vorkonfigurierten Hardware bis zum laufenden Betrieb."
+        lead="Unterjährige Verbrauchsinformation (UVI), Heizkostenabrechnung und Rauchwarnmelder – mit vorkonfigurierter Hardware."
        actions={
          <>
            <Button asChild size="lg">
@@ -313,7 +330,7 @@ export default function HomePage() {
          <div className="rounded-2xl border border-border bg-card p-6 shadow-card sm:p-8">
            <div className="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 lg:grid-cols-5">
              {features.map((feature) => (
-                <FeatureTile key={feature.sub} {...feature} />
+                <FeatureTile key={feature.title} {...feature} />
              ))}
            </div>
          </div>
@@ -351,14 +368,6 @@ export default function HomePage() {
            lead="Von der Bestellung bis zum laufenden Betrieb – GebOS verbindet Bestellung, Konfiguration und Installation miteinander."
          />
          <ProcessSteps steps={processSteps} className="mt-12" />
-          <p className="mt-10 text-center text-base font-semibold italic text-navy">
-            „Bestellung, Konfiguration und Installation greifen ineinander.“
-          </p>
-          <div className="mt-6 flex justify-center">
-            <Button asChild size="lg">
-              <Link to="/konfigurator">Preis für mein Gebäude berechnen</Link>
-            </Button>
-          </div>
        </Section>

        <Section>
@@ -372,12 +381,6 @@ export default function HomePage() {
            {lessEffort.map((item) => (
              <Card key={item.title} className="p-6 gap-0">
                <CardContent className="flex h-full flex-col items-start gap-3 p-0">
-                  <img
-                    src={item.vector}
-                    alt=""
-                    className="size-12"
-                    loading="lazy"
-                  />
                  <h3 className="text-base font-bold text-navy">
                    {item.title}
                  </h3>
@@ -460,16 +463,15 @@ export default function HomePage() {
        </Section>

        <Section>
-          <SectionHeading
-            eyebrow="Preis"
-            title="Was kostet GebOS?"
-            lead="Mit dem GebOS-Konfigurator erhalten Sie bereits mit wenigen Angaben eine erste Preisindikation."
-          />
-          <div className="mt-10 grid items-start gap-10 lg:grid-cols-2 lg:gap-14">
+          <div className="grid items-start gap-10 lg:grid-cols-2 lg:gap-14">
            <div>
-              <p className="text-sm leading-relaxed text-muted-foreground">
-                Dafür werden zunächst nur grundlegende Informationen benötigt,
-                beispielsweise:
+              <SectionHeading
+                eyebrow="Preis"
+                title="Was kostet GebOS?"
+                lead="Mit dem GebOS-Konfigurator erhalten Sie schnell einen ersten Preis und können sofort bestellen."
+              />
+              <p className="mt-10 text-sm leading-relaxed text-muted-foreground">
+                Für einen ersten Preis brauchen wir Grundlegende Informationen:
              </p>
              <Checklist
                className="mt-4"
@@ -485,15 +487,6 @@ export default function HomePage() {
                Auf Basis dieser Angaben schätzt GebOS die voraussichtlich
                benötigte Geräteanzahl und berechnet einen ungefähren Preis.
              </p>
-              <h3 className="mt-8 text-lg font-extrabold tracking-tight text-navy">
-                Erst schätzen. Dann genau konfigurieren.
-              </h3>
-              <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
-                Der Schnellkonfigurator arbeitet bewusst mit Annahmen. Für
-                einen genauen Preis können Sie die Konfiguration anschließend
-                speichern und Ihre Gebäude detailliert erfassen. Die bereits
-                eingegebenen Daten werden übernommen.
-              </p>
              <Button asChild size="lg" className="mt-6">
                <Link to="/konfigurator">Preis berechnen</Link>
              </Button>
@@ -536,9 +529,7 @@ export default function HomePage() {
              <Card key={audience.to} className="p-6 gap-0 sm:p-7">
                <CardContent className="flex h-full flex-col items-start gap-3 p-0">
                  <div className="flex items-center gap-3">
-                    <IconBadge variant="soft" shape="squircle" size="lg">
-                      {audience.icon}
-                    </IconBadge>
+                    {audience.media}
                    <span className="text-xs font-bold tracking-wide text-primary uppercase">
                      {audience.name}
                    </span>