feat: Scaffold new Next.js website with core pages, components, and assets.

2026-02-06 11:19:57 +01:00
parent d63eb85218
commit db27ebf76f
53 changed files with 7756 additions and 0 deletions
@@ -0,0 +1,57 @@
+import Link from "next/link";
+import Image from "next/image";
+
+import { company, mainNavigation } from "@/lib/site-content";
+
+export function SiteHeader() {
+  return (
+    <header className="sticky top-0 z-40 border-b border-alpine-100/70 bg-white/90 backdrop-blur">
+      <div className="bg-alpine-900 text-alpine-50">
+        <div className="container-shell flex flex-wrap items-center justify-between gap-2 py-2 text-xs sm:text-sm">
+          <p>{company.region} | Persoenlicher IT- und Telekom-Service</p>
+          <div className="flex flex-wrap gap-4">
+            <a className="hover:text-copper-200" href={`tel:${company.phone.replace(/\s+/g, "")}`}>
+              {company.phone}
+            </a>
+            <a className="hover:text-copper-200" href={`mailto:${company.email}`}>
+              {company.email}
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div className="container-shell flex flex-wrap items-center justify-between gap-6 py-4">
+        <Link className="group inline-flex items-center gap-3" href="/">
+          <Image
+            alt="TeleNetSystems Logo"
+            className="h-10 w-auto transition group-hover:scale-[1.02]"
+            src="/assets/logo/logo-systems-9fd0db14.png"
+            width={190}
+            height={50}
+            priority
+          />
+          <span className="font-heading text-sm uppercase tracking-[0.22em] text-alpine-700">
+            Reutte | Tirol
+          </span>
+        </Link>
+
+        <nav aria-label="Hauptnavigation" className="w-full overflow-x-auto pb-1 lg:w-auto lg:pb-0">
+          <ul className="flex min-w-max items-center gap-2 text-sm font-semibold text-alpine-700">
+            {mainNavigation.map((item) => (
+              <li key={item.href}>
+                <Link className="nav-chip" href={item.href}>
+                  {item.label}
+                </Link>
+              </li>
+            ))}
+            <li>
+              <Link className="btn-primary ml-2" href="/#kontakt">
+                Beratung anfragen
+              </Link>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+  );
+}