initial

2026-06-23 21:17:01 +02:00
commit 5e0a26677e
72 changed files with 8592 additions and 0 deletions
@@ -0,0 +1,75 @@
+import { Container } from '@/components/Container'
+
+const steps = [
+  {
+    title: 'Kunde fragt an',
+    description:
+      'Ein Vermieter oder eine Hausverwaltung fragt nach einer UVI-Lösung.',
+  },
+  {
+    title: 'Sie bieten GebOS an',
+    description: 'Sie empfehlen das GebOS UVI-Servicepaket.',
+  },
+  {
+    title: 'Sie installieren',
+    description:
+      'Sie übernehmen Installation und Inbetriebnahme beim Kunden.',
+  },
+  {
+    title: 'Sie verdienen mit',
+    description:
+      'GebOS vergütet Sie über eine Installationspauschale, Provision oder laufende Beteiligung.',
+  },
+]
+
+export function HowItWorks() {
+  return (
+    <section
+      id="so-funktioniert-es"
+      aria-labelledby="how-it-works-title"
+      className="py-20 sm:py-32"
+    >
+      <Container>
+        <div className="mx-auto max-w-2xl text-center">
+          <p className="text-sm font-semibold uppercase tracking-wide text-blue-600">
+            Das Partner-Modell
+          </p>
+          <h2
+            id="how-it-works-title"
+            className="mt-3 font-display text-3xl tracking-tight text-slate-900 sm:text-4xl"
+          >
+            So funktioniert das Partner-Modell
+          </h2>
+          <p className="mt-4 text-lg tracking-tight text-slate-700">
+            Ein einfacher Ablauf in vier Schritten.
+          </p>
+        </div>
+
+        <ol
+          role="list"
+          className="relative mx-auto mt-16 grid max-w-md grid-cols-1 gap-y-12 sm:max-w-3xl sm:grid-cols-2 sm:gap-x-12 lg:max-w-none lg:grid-cols-4 lg:gap-x-8"
+        >
+          {/* Connector line behind the step numbers on large screens. */}
+          <div
+            aria-hidden="true"
+            className="absolute left-[12.5%] right-[12.5%] top-7 hidden h-px bg-slate-200 lg:block"
+          />
+
+          {steps.map((step, index) => (
+            <li key={step.title} className="relative text-center lg:text-left">
+              <span className="relative mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-blue-600 font-display text-xl font-semibold text-white shadow-lg shadow-blue-600/25 lg:mx-0">
+                {index + 1}
+              </span>
+              <h3 className="mt-6 font-display text-lg font-medium text-slate-900">
+                {step.title}
+              </h3>
+              <p className="mt-2 text-base tracking-tight text-slate-600">
+                {step.description}
+              </p>
+            </li>
+          ))}
+        </ol>
+      </Container>
+    </section>
+  )
+}