117 lines
4.6 KiB
TypeScript
117 lines
4.6 KiB
TypeScript
import { ArrowRight, Mail, MapPin, Phone } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Hero235Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero235 = ({ className }: Hero235Props) => {
|
|
return (
|
|
<section className={cn("px-4 pt-5 sm:px-6 lg:px-8", className)}>
|
|
<div className="mx-auto max-w-6xl">
|
|
<header className="flex flex-col gap-4 border-b border-border/80 pb-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<a
|
|
href="/"
|
|
className="text-sm font-semibold tracking-tight text-foreground"
|
|
>
|
|
Matthias Meister Webdesign
|
|
</a>
|
|
<nav
|
|
aria-label="Direkte Kontaktwege"
|
|
className="flex flex-wrap items-center gap-x-5 gap-y-2 text-sm text-muted-foreground"
|
|
>
|
|
<a
|
|
href="tel:037627984400"
|
|
className="inline-flex items-center gap-1.5 transition-colors hover:text-foreground"
|
|
>
|
|
<Phone className="size-3.5" aria-hidden />
|
|
03762 798 4400
|
|
</a>
|
|
<a
|
|
href="mailto:info@matthias-meister-webdesign.de"
|
|
className="inline-flex items-center gap-1.5 transition-colors hover:text-foreground"
|
|
>
|
|
<Mail className="size-3.5" aria-hidden />
|
|
E-Mail
|
|
</a>
|
|
<span className="inline-flex items-center gap-1.5">
|
|
<MapPin className="size-3.5" aria-hidden />
|
|
Crimmitschau
|
|
</span>
|
|
</nav>
|
|
</header>
|
|
|
|
<div className="grid gap-10 py-16 sm:py-20 lg:grid-cols-[minmax(0,1.05fr)_minmax(320px,0.95fr)] lg:items-end lg:py-24">
|
|
<div className="flex max-w-3xl flex-col gap-7">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">
|
|
Webdesign für regionale KMU
|
|
</p>
|
|
<h1 className="max-w-[12ch] text-5xl font-semibold leading-[0.95] tracking-tight text-balance text-foreground sm:text-6xl lg:text-7xl">
|
|
Websites, die vor Ort Vertrauen schaffen.
|
|
</h1>
|
|
<p className="max-w-[62ch] text-lg leading-8 text-muted-foreground">
|
|
Für Handwerk, Praxen und kleine Betriebe: klar erklärt, schnell
|
|
gebaut und so strukturiert, dass Besucher ohne Umwege verstehen,
|
|
warum sie gerade Sie anfragen sollten.
|
|
</p>
|
|
<div className="flex flex-col gap-3 pt-1 sm:flex-row sm:items-center">
|
|
<Button asChild size="lg" className="h-11 rounded-md px-5">
|
|
<a href="#kontakt">
|
|
Projekt anfragen
|
|
<ArrowRight className="shrink-0" aria-hidden />
|
|
</a>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
variant="outline"
|
|
className="h-11 rounded-md px-5"
|
|
>
|
|
<a href="#preise">Pakete ansehen</a>
|
|
</Button>
|
|
</div>
|
|
<dl className="grid gap-4 border-t border-border/80 pt-6 sm:grid-cols-3">
|
|
{[
|
|
["24h", "Rückmeldung"],
|
|
["2 Wochen", "typischer Go-Live"],
|
|
["Sachsen", "Hosting & Betrieb"],
|
|
].map(([value, label]) => (
|
|
<div key={label}>
|
|
<dt className="text-2xl font-semibold tracking-tight text-foreground">
|
|
{value}
|
|
</dt>
|
|
<dd className="mt-1 text-sm text-muted-foreground">
|
|
{label}
|
|
</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
|
|
<div className="relative">
|
|
<figure className="overflow-hidden rounded-lg border border-border bg-card">
|
|
<img
|
|
src="/about.jpg"
|
|
alt="Arbeitsplatz von Matthias Meister beim Entwickeln einer Website"
|
|
className="h-[19rem] w-full object-cover sm:h-[24rem] lg:h-[31rem]"
|
|
/>
|
|
<figcaption className="grid gap-2 border-t border-border bg-card/95 p-5 sm:grid-cols-[1fr_auto] sm:items-center">
|
|
<span className="text-sm font-medium text-foreground">
|
|
Direkt mit dem Entwickler statt mit wechselnden Agenturrollen.
|
|
</span>
|
|
<span className="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
|
|
Persönlich geplant
|
|
</span>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero235 };
|