feat: Implement initial website structure, core pages, and layout components, including a redesigned homepage.

2026-02-03 21:41:03 +01:00
parent 1cc779e89c
commit 578bb8edb3
13 changed files with 1749 additions and 80 deletions
@@ -0,0 +1,123 @@
+import Link from "next/link";
+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="text-xl font-semibold text-[var(--color-background)] hover:no-underline"
+                        >
+                            <span className="text-[var(--color-primary)]">Tele</span>NetSystems
+                        </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>
+    );
+}