Professionalize landing page design
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { ArrowRight } from "lucide-react";
|
||||
import { ArrowRight, Mail, MapPin, Phone } from "lucide-react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
@@ -9,38 +9,103 @@ interface Hero235Props {
|
||||
|
||||
const Hero235 = ({ className }: Hero235Props) => {
|
||||
return (
|
||||
<section className={cn("px-4 sm:px-6 lg:px-8", className)}>
|
||||
<div className="mx-auto max-w-5xl py-20 sm:py-24 lg:py-28">
|
||||
<div className="mb-8 flex flex-col gap-3 border-b border-border/70 pb-5 sm:mb-10 sm:flex-row sm:items-center sm:justify-between">
|
||||
<p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
|
||||
Matthias Meister | Webdesign für KMU aus der Region
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Rückmeldung innerhalb von 24 Stunden
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex max-w-4xl flex-col gap-7">
|
||||
<h1 className="max-w-[13ch] text-4xl font-semibold tracking-tight text-balance text-foreground sm:text-5xl lg:text-6xl">
|
||||
Websites für Unternehmen aus der Region - klar, schnell und
|
||||
glaubwürdig.
|
||||
</h1>
|
||||
<p className="max-w-[65ch] text-base leading-7 text-muted-foreground sm:text-lg">
|
||||
Ich arbeite direkt für Handwerk, Praxen und kleine Betriebe aus
|
||||
der Region. Ohne Baukasten-Look, Agenturshow oder technischen
|
||||
Umweg - sondern mit einer Website, die Ihr Angebot klar zeigt und
|
||||
Anfragen leichter macht.
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center gap-4 pt-1">
|
||||
<Button asChild size="lg" className="h-11 rounded-full px-5">
|
||||
<a href="#kontakt">
|
||||
Projekt anfragen
|
||||
<ArrowRight className="shrink-0" aria-hidden />
|
||||
</a>
|
||||
</Button>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Kurze Nachricht reicht - Sie erhalten direkt eine erste
|
||||
Einschätzung und den passenden nächsten Schritt.
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user