feat: Implement core page structure with Header and Footer, add multiple content pages, and refine UI components and global styling.

2026-02-03 21:56:55 +01:00
parent 1cc779e89c
commit 0c2e9a81a6
17 changed files with 1184 additions and 58 deletions
@@ -0,0 +1,54 @@
+
+import Link from "next/link";
+import { Container } from "./Container";
+
+export function Footer() {
+    const currentYear = new Date().getFullYear();
+
+    return (
+        <footer className="bg-[var(--color-muted)] border-t border-[color:var(--color-border)] py-[var(--spacing-xl)] mt-auto">
+            <Container>
+                <div className="grid grid-cols-1 md:grid-cols-4 gap-[var(--spacing-xl)] mb-[var(--spacing-xl)]">
+                    <div className="md:col-span-1">
+                        <Link href="/" className="font-heading text-lg font-bold text-[color:var(--color-primary)] mb-[var(--spacing-sm)] block">
+                            TeleNetSystems
+                        </Link>
+                        <p className="text-sm text-[color:var(--color-muted-foreground)]">
+                            Ihr regionaler Partner für Internet, TV und Telefonie in Reutte & Umgebung.
+                        </p>
+                    </div>
+
+                    <div>
+                        <h4 className="font-bold mb-[var(--spacing-md)]">Produkte</h4>
+                        <ul className="space-y-[var(--spacing-xs)] text-sm">
+                            <li><Link href="/fernsehen" className="hover:text-[color:var(--color-primary)]">Fernsehen</Link></li>
+                            <li><Link href="/internet" className="hover:text-[color:var(--color-primary)]">Internet</Link></li>
+                            <li><Link href="/telefonie" className="hover:text-[color:var(--color-primary)]">Telefonie</Link></li>
+                        </ul>
+                    </div>
+
+                    <div>
+                        <h4 className="font-bold mb-[var(--spacing-md)]">Unternehmen</h4>
+                        <ul className="space-y-[var(--spacing-xs)] text-sm">
+                            <li><Link href="/ueber-uns" className="hover:text-[color:var(--color-primary)]">Über uns</Link></li>
+                            <li><Link href="/leistungen" className="hover:text-[color:var(--color-primary)]">Leistungen</Link></li>
+                            <li><Link href="#kontakt" className="hover:text-[color:var(--color-primary)]">Kontakt</Link></li>
+                        </ul>
+                    </div>
+
+                    <div>
+                        <h4 className="font-bold mb-[var(--spacing-md)]">Rechtliches</h4>
+                        <ul className="space-y-[var(--spacing-xs)] text-sm">
+                            <li><Link href="/impressum" className="hover:text-[color:var(--color-primary)]">Impressum</Link></li>
+                            <li><Link href="/datenschutz" className="hover:text-[color:var(--color-primary)]">Datenschutz</Link></li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div className="border-t border-[color:var(--color-border)] pt-[var(--spacing-md)] text-center text-sm text-[color:var(--color-muted-foreground)]">
+                    &copy; {currentYear} TeleNetSystems GmbH. Alle Rechte vorbehalten.
+                </div>
+            </Container>
+        </footer>
+    );
+}