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,111 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+import { ContactStrip } from "@/components/contact-strip";
+import { PageHero } from "@/components/page-hero";
+
+export const metadata: Metadata = {
+  title: "Leistungen fuer Privat und Business",
+  description:
+    "Uebersicht aller Leistungen von TeleNetSystems: Internet, Fernsehen, Telefonie und IT-Services fuer Privatkunden und Unternehmen in Tirol."
+};
+
+const serviceBlocks = [
+  {
+    title: "Internet",
+    text: "Kabel- und Glasfaseranschluesse fuer Zuhause sowie SLA-basierte Loesungen fuer Unternehmen.",
+    href: "/internet"
+  },
+  {
+    title: "Fernsehen",
+    text: "TV Privat, Pay TV und individuelle TV Business Konzepte fuer Hotels, Gastronomie und Betriebe.",
+    href: "/fernsehen"
+  },
+  {
+    title: "Telefonie",
+    text: "Festnetzpakete, SIP-Trunks und Erweiterungen fuer Teams mit mehreren Nebenstellen.",
+    href: "/telefonie"
+  },
+  {
+    title: "IT-Service",
+    text: "Planung, Inbetriebnahme und Wartung von Netzwerken sowie laufender technischer Support.",
+    href: "/#kontakt"
+  }
+];
+
+export default function LeistungenPage() {
+  return (
+    <>
+      <PageHero
+        eyebrow="Leistungen"
+        title="Alles aus einer Hand, ohne unnoetige Komplexitaet"
+        intro="TeleNetSystems kombiniert Telekommunikation mit praktischem IT-Service. Das reduziert Abstimmungsaufwand und sorgt dafuer, dass Technik zusammen funktioniert."
+        imageSrc="/assets/gallery/firma1-8a863d8b.jpg"
+        imageAlt="Standort TeleNetSystems in Tirol"
+        primaryCta={{ label: "Jetzt Bedarf klaeren", href: "/#kontakt" }}
+        secondaryCta={{ label: "Ueber uns", href: "/ueber-uns" }}
+      />
+
+      <section className="section-block pt-6">
+        <div className="container-shell grid gap-5 md:grid-cols-2">
+          {serviceBlocks.map((service) => (
+            <article className="surface-card" key={service.title}>
+              <h2 className="text-2xl font-semibold text-alpine-900">{service.title}</h2>
+              <p className="mt-3 text-alpine-700">{service.text}</p>
+              <Link className="mt-4 inline-flex text-sm font-semibold text-copper-700 hover:text-copper-800" href={service.href}>
+                Mehr dazu -&gt;
+              </Link>
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <section className="section-block bg-white/70">
+        <div className="container-shell grid gap-6 lg:grid-cols-2">
+          <article className="surface-card border-moss-500/20 bg-gradient-to-br from-white via-white to-moss-500/5">
+            <p className="eyebrow text-moss-600">Privatkunden</p>
+            <h2 className="mt-2 text-2xl font-semibold text-alpine-900">Uebersichtlich und alltagstauglich</h2>
+            <ul className="mt-4 space-y-2 text-sm text-alpine-700">
+              <li>- Klare Pakete mit offenen Kosten</li>
+              <li>- Schnelle Hilfe bei Stoerungen</li>
+              <li>- Beratung ohne Fachjargon</li>
+            </ul>
+          </article>
+
+          <article className="surface-card border-copper-300/40 bg-gradient-to-br from-white via-white to-copper-100/40">
+            <p className="eyebrow">Geschaeftskunden</p>
+            <h2 className="mt-2 text-2xl font-semibold text-alpine-900">Planbar und skalierbar</h2>
+            <ul className="mt-4 space-y-2 text-sm text-alpine-700">
+              <li>- Individuelle Netz- und Kommunikationskonzepte</li>
+              <li>- SLA-orientierter Support</li>
+              <li>- Direkte Ansprechpartner fuer Technik und Projekte</li>
+            </ul>
+          </article>
+        </div>
+      </section>
+
+      <section className="section-block">
+        <div className="container-shell">
+          <p className="eyebrow">Zusammenarbeit</p>
+          <h2 className="mt-2 text-3xl font-semibold text-alpine-900">Wie wir Projekte in Tirol umsetzen</h2>
+          <div className="mt-7 grid gap-5 md:grid-cols-3">
+            <article className="surface-card">
+              <h3 className="text-xl font-semibold text-alpine-900">1. Analyse</h3>
+              <p className="mt-3 text-sm text-alpine-700">Wir nehmen Ist-Situation, Anforderungen und Budget sauber auf.</p>
+            </article>
+            <article className="surface-card">
+              <h3 className="text-xl font-semibold text-alpine-900">2. Umsetzung</h3>
+              <p className="mt-3 text-sm text-alpine-700">Installation und Inbetriebnahme erfolgen abgestimmt auf Ihren Betrieb.</p>
+            </article>
+            <article className="surface-card">
+              <h3 className="text-xl font-semibold text-alpine-900">3. Betrieb</h3>
+              <p className="mt-3 text-sm text-alpine-700">Wir bleiben als Servicepartner erreichbar, auch nach dem Go-live.</p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <ContactStrip />
+    </>
+  );
+}