Refactor footer component and integrate into landing page

- Remove unnecessary elements and simplify the footer layout
- Update copyright notice and styling for consistency
- Add Footer27 component to the landing page
- Enhance tests to verify footer rendering and legal links
This commit is contained in:
2026-05-06 22:06:43 +02:00
parent d2ba994fad
commit 3440508bac
6 changed files with 326 additions and 45 deletions

View File

@@ -1,6 +1,3 @@
import { ArrowRight, Mail, Phone } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
interface Footer27Props {
@@ -9,48 +6,11 @@ interface Footer27Props {
const Footer27 = ({ className }: Footer27Props) => {
return (
<footer className={cn("px-4 pb-10 sm:px-6 lg:px-8", className)}>
<div className="mx-auto max-w-6xl border-t border-border/80 pt-8">
<div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-start">
<div>
<h2 className="max-w-2xl text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
Bereit für eine Website, die Ihr Unternehmen klarer erklärt?
</h2>
<p className="mt-4 max-w-xl text-base leading-7 text-muted-foreground">
Eine kurze Nachricht reicht. Ich prüfe, welcher Weg sinnvoll ist,
und melde mich mit einer ehrlichen Einschätzung.
</p>
<Button asChild size="lg" className="mt-6 h-11 rounded-md px-5">
<a href="#kontakt">
Kostenloses Angebot anfordern
<ArrowRight className="shrink-0" aria-hidden />
</a>
</Button>
</div>
<address className="not-italic">
<div className="space-y-3 text-sm text-muted-foreground">
<a
href="mailto:info@matthias-meister-webdesign.de"
className="flex items-center gap-2 transition-colors hover:text-foreground"
>
<Mail className="size-4" aria-hidden />
info@matthias-meister-webdesign.de
</a>
<a
href="tel:037627984400"
className="flex items-center gap-2 transition-colors hover:text-foreground"
>
<Phone className="size-4" aria-hidden />
03762 798 4400
</a>
</div>
</address>
</div>
<div className="mt-10 flex flex-col gap-4 border-t border-border/80 pt-6 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
<footer className={cn("px-5 pb-10 sm:px-8 lg:px-12", className)}>
<div className="border-t border-border/80 pt-6">
<div className="flex flex-col gap-4 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
<div className="space-y-1">
<p>© 2026 Matthias Meister Webdesign Crimmitschau</p>
<p>© 2026 Matthias Meister Webdesign</p>
<p className="text-xs text-muted-foreground/90">
Diese Website misst Nutzung anonym und cookiefrei (Rybbit).
</p>