matthias/Dev-Landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance Contact21, CTA, and Hero235 components with improved structure and localized content; update styles and accessibility features for better user experience.

Browse Source
This commit is contained in:
Matthias Meister
2026-04-22 10:52:12 +02:00
parent ec22c238fa
commit b4acc4a308
5 changed files with 117 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/hero235.tsx
View File

@@ -1,4 +1,4 @@
import { ArrowDown } from "lucide-react";
import { ArrowRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
@@ -9,45 +9,37 @@ interface Hero235Props {
const Hero235 = ({ className }: Hero235Props) => {
return (
<section
className={cn(
"relative flex h-dvh items-center justify-center overflow-hidden bg-background py-32",
className,
)}
>
<div aria-hidden={true}>
<div
className="absolute inset-0 z-0 bg-[linear-gradient(to_right,var(--muted)_1px,transparent_1px),linear-gradient(to_bottom,var(--muted)_1px,transparent_1px)] bg-size-[40px_40px]"
style={{
WebkitMaskImage:
"radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)",
maskImage:
"radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)",
}}
/>
<div
className="pointer-events-none absolute inset-0 z-0 opacity-40"
style={{
backgroundImage:
"url(https://deifkwefumgah.cloudfront.net/shadcnblocks/block/noise.png)",
backgroundRepeat: "repeat",
}}
/>
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-40 bg-linear-to-b from-transparent via-background/10 to-background/90" />
</div>
<div className="relative container flex h-full flex-col justify-between">
<div className="flex flex-1 items-center justify-center">
<div className="mx-auto flex max-w-4xl flex-col items-center text-center">
<h1 className="text-4xl font-semibold tracking-tight text-balance text-foreground md:text-5xl lg:text-8xl">
Hallo, ich bin Matthias - ich baue Websites, die Kunden bringen.
</h1>
<p className="mt-8 max-w-xl text-pretty text-muted-foreground md:text-lg">
Moderne, blitzschnelle Auftritte für Handwerker, Friseure und Unternehmen aus der Region. Kein Agentur-Preisschild. Kein Overkill. Einfach eine Website, die funktioniert.
</p>
<Button size="lg" className="mt-10">
Kostenloses Angebot
<ArrowDown className="shrink-0" aria-hidden />
<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 fuer KMU aus der Region
</p>
<p className="text-sm text-muted-foreground">
Rueckmeldung 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 fuer Unternehmen aus der Region - klar, schnell und
glaubwuerdig.
</h1>
<p className="max-w-[65ch] text-base leading-7 text-muted-foreground sm:text-lg">
Ich arbeite direkt mit Handwerk, Praxen und kleinen Betrieben. Kein
Baukasten-Look, keine Agenturshow, kein technischer Umweg - sondern
ein Auftritt, der sofort zeigt, was Sie anbieten und wie man Sie
erreicht.
</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">
Kostenloses Angebot anfordern
<ArrowRight className="shrink-0" aria-hidden />
</a>
</Button>
<p className="text-sm text-muted-foreground">
Fuer Handwerk, Praxen und kleine Betriebe.
</p>
</div>
</div>
</div>