Lars Nolden
76 lines
2.4 KiB
TypeScript
76 lines
2.4 KiB
TypeScript
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>
|
|
)
|
|
}
|