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,97 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { Menu, X, Phone } from "lucide-react";
+
+const navigation = [
+    { name: "Fernsehen", href: "/fernsehen" },
+    { name: "Internet", href: "/internet" },
+    { name: "Telefonie", href: "/telefonie" },
+    { name: "Leistungen", href: "/leistungen" },
+    { name: "Über uns", href: "/ueber-uns" },
+];
+
+export function Header() {
+    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+    return (
+        <header className="sticky top-0 z-50 bg-[var(--color-background)] border-b border-[var(--color-border)]">
+            <div className="container">
+                <nav className="flex items-center justify-between h-16 md:h-20">
+                    {/* Logo */}
+                    <Link
+                        href="/"
+                        className="text-xl font-semibold text-[var(--color-foreground)] hover:no-underline"
+                    >
+                        <span className="text-[var(--color-primary)]">Tele</span>NetSystems
+                    </Link>
+
+                    {/* Desktop Navigation */}
+                    <div className="hidden lg:flex items-center gap-[var(--spacing-lg)]">
+                        {navigation.map((item) => (
+                            <Link
+                                key={item.name}
+                                href={item.href}
+                                className="text-[var(--color-foreground)] hover:text-[var(--color-primary)] hover:no-underline transition-colors"
+                            >
+                                {item.name}
+                            </Link>
+                        ))}
+                    </div>
+
+                    {/* Desktop CTAs */}
+                    <div className="hidden lg:flex items-center gap-[var(--spacing-md)]">
+                        <a
+                            href="tel:+43567612345"
+                            className="flex items-center gap-[var(--spacing-xs)] text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] hover:no-underline transition-colors"
+                        >
+                            <Phone size={18} />
+                            <span className="text-sm">PLACEHOLDER: Telefon</span>
+                        </a>
+                        <Link href="/kontakt" className="btn btn-primary">
+                            Jetzt beraten lassen
+                        </Link>
+                    </div>
+
+                    {/* Mobile Menu Button */}
+                    <button
+                        type="button"
+                        className="lg:hidden p-2 text-[var(--color-foreground)]"
+                        onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+                        aria-label={mobileMenuOpen ? "Menü schließen" : "Menü öffnen"}
+                    >
+                        {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
+                    </button>
+                </nav>
+
+                {/* Mobile Navigation */}
+                {mobileMenuOpen && (
+                    <div className="lg:hidden border-t border-[var(--color-border)] pb-[var(--spacing-lg)]">
+                        <div className="stack-sm pt-[var(--spacing-md)]">
+                            {navigation.map((item) => (
+                                <Link
+                                    key={item.name}
+                                    href={item.href}
+                                    className="block py-[var(--spacing-sm)] text-[var(--color-foreground)] hover:text-[var(--color-primary)] hover:no-underline"
+                                    onClick={() => setMobileMenuOpen(false)}
+                                >
+                                    {item.name}
+                                </Link>
+                            ))}
+                            <div className="pt-[var(--spacing-md)] border-t border-[var(--color-border)] mt-[var(--spacing-md)]">
+                                <Link
+                                    href="/kontakt"
+                                    className="btn btn-primary w-full"
+                                    onClick={() => setMobileMenuOpen(false)}
+                                >
+                                    Jetzt beraten lassen
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </header>
+    );
+}