57 lines
2.4 KiB
TypeScript
57 lines
2.4 KiB
TypeScript
import { Brain, HardHat, Stethoscope } from "lucide-react";
|
|
|
|
const audiences = [
|
|
{
|
|
icon: HardHat,
|
|
title: "Handwerksbetriebe",
|
|
text: "Anfragen aus der Region, ohne dass Sie ständig Marketing machen müssen. Referenzen, Leistungen und Kontaktdaten stehen dort, wo Kunden sie suchen.",
|
|
},
|
|
{
|
|
icon: Stethoscope,
|
|
title: "Praxen & Ärzte",
|
|
text: "Neue Patienten und weniger Rückfragen am Telefon. Sprechzeiten, Leistungsspektrum und Anfahrt sofort auf einen Blick - auch am Smartphone.",
|
|
},
|
|
{
|
|
icon: Brain,
|
|
title: "Therapeuten & Berater",
|
|
text: "Ein Auftritt, der Vertrauen weckt - bevor der Erstkontakt zustande kommt. Persönlich, ruhig, ohne Marketing-Lärm.",
|
|
},
|
|
];
|
|
|
|
export const Services = () => {
|
|
return (
|
|
<section
|
|
id="zielgruppen"
|
|
className="mx-auto max-w-6xl px-4 py-16 md:px-6 md:py-24"
|
|
>
|
|
<div className="mx-auto max-w-2xl text-center">
|
|
<span className="island-kicker">Für wen ist das?</span>
|
|
<h2 className="mt-3 font-heading text-3xl font-bold leading-tight tracking-tight text-(--sea-ink) sm:text-4xl">
|
|
Finden Sie sich wieder?
|
|
</h2>
|
|
<p className="mt-4 text-(--sea-ink-soft) sm:text-lg">
|
|
Unsere Kunden verbindet eines: Sie sind Meister ihres Fachs -
|
|
und wollen sich nicht mit ihrer Webseite herumärgern.
|
|
</p>
|
|
</div>
|
|
|
|
<ul className="mt-12 grid gap-5 md:grid-cols-3">
|
|
{audiences.map(({ icon: Icon, title, text }) => (
|
|
<li
|
|
key={title}
|
|
className="feature-card rounded-2xl border border-(--line) p-6"
|
|
>
|
|
<span className="mb-4 inline-flex h-11 w-11 items-center justify-center rounded-xl bg-(--lagoon)/15 text-(--lagoon-deep)">
|
|
<Icon className="h-5 w-5" aria-hidden />
|
|
</span>
|
|
<h3 className="font-heading text-lg font-semibold text-(--sea-ink)">
|
|
{title}
|
|
</h3>
|
|
<p className="mt-2 text-sm text-(--sea-ink-soft)">{text}</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
);
|
|
};
|