feat: Introduce new service pages for 'Leistungen', 'Telefonie', 'Fernsehen', and 'Internet', accompanied by new layout components and image assets.

2026-02-03 19:35:44 +01:00
parent 93d3a6a25d
commit d182ceeb75
39 changed files with 1904 additions and 82 deletions
@@ -0,0 +1,116 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { useState } from "react";
+import { Menu, X, Phone } from "lucide-react";
+
+const navigation = [
+  { name: "Startseite", href: "/" },
+  { name: "Fernsehen", href: "/fernsehen" },
+  { name: "Internet", href: "/internet" },
+  { name: "Telefonie", href: "/telefonie" },
+  { name: "Leistungen", href: "/leistungen" },
+  { name: "Über uns", href: "/ueber-uns" },
+  { name: "Kontakt", href: "/kontakt" },
+];
+
+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 py-[var(--spacing-md)]">
+          {/* Logo */}
+          <Link href="/" className="flex-shrink-0">
+            <Image
+              src="/images/brand/logo-systems-9fd0db14.png"
+              alt="Telenet Systems GmbH"
+              width={180}
+              height={57}
+              priority
+              className="h-10 w-auto md:h-12"
+            />
+          </Link>
+
+          {/* Desktop Navigation */}
+          <div className="hidden lg:flex lg:items-center lg:gap-[var(--spacing-lg)]">
+            {navigation.map((item) => (
+              <Link
+                key={item.name}
+                href={item.href}
+                className="text-sm font-medium text-[var(--color-foreground)] hover:text-[var(--color-primary)] transition-colors"
+              >
+                {item.name}
+              </Link>
+            ))}
+          </div>
+
+          {/* CTA & Phone (Desktop) */}
+          <div className="hidden lg:flex lg:items-center lg:gap-[var(--spacing-md)]">
+            <a
+              href="tel:+4356725000"
+              className="flex items-center gap-[var(--spacing-xs)] text-sm font-medium text-[var(--color-muted-foreground)] hover:text-[var(--color-primary)] transition-colors"
+              aria-label="Anrufen: +43 5672 5000"
+            >
+              <Phone className="h-4 w-4" aria-hidden="true" />
+              <span>+43 5672 5000</span>
+            </a>
+            <Link href="/kontakt" className="btn btn-primary">
+              Jetzt beraten lassen
+            </Link>
+          </div>
+
+          {/* Mobile Menu Button */}
+          <button
+            type="button"
+            className="lg:hidden p-[var(--spacing-sm)] -mr-[var(--spacing-sm)] text-[var(--color-foreground)]"
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+            aria-expanded={mobileMenuOpen}
+            aria-label={mobileMenuOpen ? "Menü schließen" : "Menü öffnen"}
+          >
+            {mobileMenuOpen ? (
+              <X className="h-6 w-6" aria-hidden="true" />
+            ) : (
+              <Menu className="h-6 w-6" aria-hidden="true" />
+            )}
+          </button>
+        </nav>
+
+        {/* Mobile Navigation */}
+        {mobileMenuOpen && (
+          <div className="lg:hidden border-t border-[var(--color-border)] py-[var(--spacing-md)]">
+            <div className="flex flex-col gap-[var(--spacing-sm)]">
+              {navigation.map((item) => (
+                <Link
+                  key={item.name}
+                  href={item.href}
+                  className="py-[var(--spacing-sm)] text-base font-medium text-[var(--color-foreground)] hover:text-[var(--color-primary)] transition-colors"
+                  onClick={() => setMobileMenuOpen(false)}
+                >
+                  {item.name}
+                </Link>
+              ))}
+              <hr className="border-[var(--color-border)] my-[var(--spacing-sm)]" />
+              <a
+                href="tel:+4356725000"
+                className="flex items-center gap-[var(--spacing-sm)] py-[var(--spacing-sm)] text-base font-medium text-[var(--color-muted-foreground)]"
+              >
+                <Phone className="h-5 w-5" aria-hidden="true" />
+                <span>+43 5672 5000</span>
+              </a>
+              <Link
+                href="/kontakt"
+                className="btn btn-primary mt-[var(--spacing-sm)]"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                Jetzt beraten lassen
+              </Link>
+            </div>
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}