131 lines
6.1 KiB
TypeScript
131 lines
6.1 KiB
TypeScript
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { Phone, Mail, MapPin } from "lucide-react";
|
|
|
|
const footerLinks = {
|
|
services: [
|
|
{ name: "Fernsehen", href: "/fernsehen" },
|
|
{ name: "Internet", href: "/internet" },
|
|
{ name: "Telefonie", href: "/telefonie" },
|
|
{ name: "Leistungen", href: "/leistungen" },
|
|
],
|
|
company: [
|
|
{ name: "Über uns", href: "/ueber-uns" },
|
|
{ name: "Kontakt", href: "/kontakt" },
|
|
{ name: "Impressum", href: "/impressum" },
|
|
{ name: "Datenschutz", href: "/datenschutz" },
|
|
],
|
|
};
|
|
|
|
export function Footer() {
|
|
const currentYear = new Date().getFullYear();
|
|
|
|
return (
|
|
<footer className="bg-[var(--color-foreground)] text-[var(--color-background)]">
|
|
<div className="container">
|
|
{/* Main Footer Content */}
|
|
<div className="py-[var(--spacing-3xl)] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-2xl)]">
|
|
{/* Company Info */}
|
|
<div className="stack-md">
|
|
<Link
|
|
href="/"
|
|
className="hover:no-underline"
|
|
>
|
|
<Image
|
|
src="/images/logo/logo-weiss-ffa4cbf6.png"
|
|
alt="TeleNetSystems Logo"
|
|
width={160}
|
|
height={36}
|
|
className="h-8 w-auto"
|
|
/>
|
|
</Link>
|
|
<p className="text-sm opacity-80">
|
|
Ihr regionaler Telekom- und IT-Partner in Tirol.
|
|
Zuverlässige Technik, ehrliche Beratung und persönlicher Service seit 1976.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Services Links */}
|
|
<div>
|
|
<h3 className="text-base font-semibold mb-[var(--spacing-md)] text-[var(--color-background)]">
|
|
Leistungen
|
|
</h3>
|
|
<ul className="stack-sm">
|
|
{footerLinks.services.map((link) => (
|
|
<li key={link.name}>
|
|
<Link
|
|
href={link.href}
|
|
className="text-sm opacity-80 hover:opacity-100 hover:text-[var(--color-primary)] hover:no-underline transition-colors"
|
|
>
|
|
{link.name}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Company Links */}
|
|
<div>
|
|
<h3 className="text-base font-semibold mb-[var(--spacing-md)] text-[var(--color-background)]">
|
|
Unternehmen
|
|
</h3>
|
|
<ul className="stack-sm">
|
|
{footerLinks.company.map((link) => (
|
|
<li key={link.name}>
|
|
<Link
|
|
href={link.href}
|
|
className="text-sm opacity-80 hover:opacity-100 hover:text-[var(--color-primary)] hover:no-underline transition-colors"
|
|
>
|
|
{link.name}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Contact Info */}
|
|
<div>
|
|
<h3 className="text-base font-semibold mb-[var(--spacing-md)] text-[var(--color-background)]">
|
|
Kontakt
|
|
</h3>
|
|
<ul className="stack-md">
|
|
<li className="flex items-start gap-[var(--spacing-sm)]">
|
|
<MapPin size={18} className="shrink-0 mt-0.5 text-[var(--color-primary)]" />
|
|
<span className="text-sm opacity-80">
|
|
PLACEHOLDER: Adresse<br />
|
|
6600 Reutte, Tirol
|
|
</span>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="tel:+43567612345"
|
|
className="flex items-center gap-[var(--spacing-sm)] text-sm opacity-80 hover:opacity-100 hover:text-[var(--color-primary)] hover:no-underline transition-colors"
|
|
>
|
|
<Phone size={18} className="shrink-0 text-[var(--color-primary)]" />
|
|
PLACEHOLDER: Telefon
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="mailto:info@tnr.at"
|
|
className="flex items-center gap-[var(--spacing-sm)] text-sm opacity-80 hover:opacity-100 hover:text-[var(--color-primary)] hover:no-underline transition-colors"
|
|
>
|
|
<Mail size={18} className="shrink-0 text-[var(--color-primary)]" />
|
|
PLACEHOLDER: E-Mail
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Bar */}
|
|
<div className="py-[var(--spacing-lg)] border-t border-[var(--color-background)]/10">
|
|
<p className="text-sm opacity-60 text-center">
|
|
© {currentYear} Telenet Systems GmbH. Alle Rechte vorbehalten.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|