Update footer layout with new categories and legal links
Refactor footer component to use a wider max-width, introduce new CATEGORIES and LEGAL_LINKS arrays, and adjust flexbox properties for responsive layout. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 23852c00-4779-460a-9e0c-d09fee4b6c92 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 537a9458-cd04-4055-b860-45752e6eb204 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/23852c00-4779-460a-9e0c-d09fee4b6c92/ee1CXlO Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic
parent
be89600ee2
commit
67d064c793
@ -8,18 +8,33 @@ const SOCIAL_LINKS = [
|
||||
{ href: "https://www.tiktok.com/@folxtv", icon: SiTiktok, label: "TikTok", testId: "link-social-tiktok" },
|
||||
];
|
||||
|
||||
const CATEGORIES = [
|
||||
{ href: "/category/News", label: "News", testId: "link-footer-news" },
|
||||
{ href: "/videos", label: "Video", testId: "link-footer-video" },
|
||||
{ href: "/gallery", label: "Fotogalerie", testId: "link-footer-gallery" },
|
||||
{ href: "/horoskop", label: "Horoskop", testId: "link-footer-horoskop" },
|
||||
{ href: "/rezepte", label: "Rezepte", testId: "link-footer-rezepte" },
|
||||
];
|
||||
|
||||
const LEGAL_LINKS = [
|
||||
{ href: "/empfang-folx-tv", label: "Empfang", testId: "link-footer-empfang" },
|
||||
{ href: "/ueber-uns", label: "Über uns", testId: "link-footer-ueber-uns" },
|
||||
{ href: "/kontakt", label: "Kontakt", testId: "link-footer-kontakt" },
|
||||
{ href: "/impressum", label: "Impressum", testId: "link-footer-impressum" },
|
||||
{ href: "/datenschutz", label: "Datenschutz", testId: "link-footer-datenschutz" },
|
||||
];
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="border-t border-border bg-[hsl(var(--card))] mt-8 relative z-20 isolation-isolate" data-testid="footer">
|
||||
<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<h3 className="font-bold text-card-foreground text-lg mb-3">Folx Music Television</h3>
|
||||
<p className="text-muted-foreground text-sm leading-relaxed mb-4">
|
||||
Folx Music Television. Aktuelle Nachrichten, Interviews und
|
||||
Hintergrundberichte aus der Welt der Volksmusik und des Schlagers.
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="py-8 flex flex-col md:flex-row md:items-start md:justify-between gap-8">
|
||||
<div className="flex-shrink-0">
|
||||
<h3 className="font-bold text-card-foreground text-xl mb-2 tracking-tight">FOLX TV</h3>
|
||||
<p className="text-muted-foreground text-sm leading-relaxed max-w-[260px] mb-4">
|
||||
Ihr Sender für Volksmusik und Schlager. Aktuelle Nachrichten, Interviews und Hintergrundberichte.
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<div className="flex gap-4">
|
||||
{SOCIAL_LINKS.map((s) => (
|
||||
<a
|
||||
key={s.label}
|
||||
@ -35,76 +50,56 @@ export default function Footer() {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-card-foreground mb-3">Kategorien</h4>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>
|
||||
<Link href="/category/News">
|
||||
<span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-news">News</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/videos">
|
||||
<span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-video">Video</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/gallery">
|
||||
<span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-gallery">Fotogalerie</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/horoskop">
|
||||
<span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-horoskop">Horoskop</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/rezepte">
|
||||
<span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-rezepte">Rezepte</span>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-card-foreground mb-3">Folgt uns</h4>
|
||||
<ul className="space-y-2 text-sm">
|
||||
{SOCIAL_LINKS.map((s) => (
|
||||
<li key={s.label}>
|
||||
<a
|
||||
href={s.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-muted-foreground hover:text-primary transition-colors inline-flex items-center gap-2"
|
||||
data-testid={`link-footer-${s.label.toLowerCase()}`}
|
||||
>
|
||||
<s.icon className="w-4 h-4" />
|
||||
{s.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div className="flex flex-wrap gap-x-16 gap-y-6">
|
||||
<div>
|
||||
<h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">Kategorien</h4>
|
||||
<ul className="space-y-1.5 text-sm">
|
||||
{CATEGORIES.map((c) => (
|
||||
<li key={c.label}>
|
||||
<Link href={c.href}>
|
||||
<span className="text-card-foreground/80 cursor-pointer hover:text-primary transition-colors" data-testid={c.testId}>{c.label}</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">Folgt uns</h4>
|
||||
<ul className="space-y-1.5 text-sm">
|
||||
{SOCIAL_LINKS.map((s) => (
|
||||
<li key={s.label}>
|
||||
<a
|
||||
href={s.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-card-foreground/80 hover:text-primary transition-colors inline-flex items-center gap-2"
|
||||
data-testid={`link-footer-${s.label.toLowerCase()}`}
|
||||
>
|
||||
<s.icon className="w-3.5 h-3.5" />
|
||||
{s.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t border-border mt-6 pt-4 flex flex-col items-center gap-2">
|
||||
<div className="flex flex-wrap justify-center gap-x-4 gap-y-1 text-xs">
|
||||
<Link href="/empfang-folx-tv">
|
||||
<span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-empfang">Empfang</span>
|
||||
</Link>
|
||||
<Link href="/ueber-uns">
|
||||
<span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-ueber-uns">Über uns</span>
|
||||
</Link>
|
||||
<Link href="/kontakt">
|
||||
<span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-kontakt">Kontakt</span>
|
||||
</Link>
|
||||
<Link href="/impressum">
|
||||
<span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-impressum">Impressum</span>
|
||||
</Link>
|
||||
<Link href="/datenschutz">
|
||||
<span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid="link-footer-datenschutz">Datenschutz</span>
|
||||
</Link>
|
||||
|
||||
<div className="border-t border-border/50 py-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
|
||||
<div className="flex flex-wrap gap-x-3 gap-y-1 text-xs">
|
||||
{LEGAL_LINKS.map((l, i) => (
|
||||
<span key={l.label} className="flex items-center gap-3">
|
||||
<Link href={l.href}>
|
||||
<span className="text-muted-foreground cursor-pointer hover:text-primary transition-colors" data-testid={l.testId}>{l.label}</span>
|
||||
</Link>
|
||||
{i < LEGAL_LINKS.length - 1 && <span className="text-border">·</span>}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
© {new Date().getFullYear()} Folx Music Television. Alle Rechte vorbehalten.
|
||||
<p className="text-xs text-muted-foreground/60">
|
||||
© {new Date().getFullYear()} Folx Music Television
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user