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,135 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+
+import { ContactStrip } from "@/components/contact-strip";
+import { PageHero } from "@/components/page-hero";
+import { tvTariffs } from "@/lib/site-content";
+
+export const metadata: Metadata = {
+  title: "Fernsehen fuer Privat und Business",
+  description:
+    "TV Privat, Pay TV und TV Business in Tirol: klar verglichen, einfach erklaert und mit persoenlicher Beratung in Reutte."
+};
+
+export default function FernsehenPage() {
+  return (
+    <>
+      <PageHero
+        eyebrow="Fernsehen"
+        title="TV-Pakete, die zu Ihrem Alltag passen"
+        intro="Privatpakete und Pay-TV sind direkt vergleichbar. TV Business planen wir separat, weil Anforderungen in Hotels, Gastro oder Unternehmen deutlich anders sind."
+        imageSrc="/assets/hero/tv-header-44c1e07b.jpg"
+        imageAlt="Fernsehangebot von TeleNetSystems"
+        primaryCta={{ label: "TV-Beratung anfragen", href: "/#kontakt" }}
+        secondaryCta={{ label: "Internet-Tarife", href: "/internet" }}
+      />
+
+      <section className="section-block pt-6 bg-white/70">
+        <div className="container-shell space-y-10">
+          <div>
+            <p className="eyebrow">Vergleich | TV Privat</p>
+            <div className="mt-4 table-shell">
+              <table className="data-table">
+                <thead>
+                  <tr>
+                    <th>Paket</th>
+                    <th>Sender</th>
+                    <th>Extras</th>
+                    <th>Passend fuer</th>
+                    <th>Preis</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {tvTariffs.private.map((tariff) => (
+                    <tr key={tariff.name}>
+                      <td>{tariff.name}</td>
+                      <td>{tariff.channels}</td>
+                      <td>{tariff.extras}</td>
+                      <td>{tariff.target}</td>
+                      <td>{tariff.price}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <div>
+            <p className="eyebrow">Vergleich | Pay TV</p>
+            <div className="mt-4 table-shell">
+              <table className="data-table">
+                <thead>
+                  <tr>
+                    <th>Paket</th>
+                    <th>Sender</th>
+                    <th>Extras</th>
+                    <th>Passend fuer</th>
+                    <th>Preis</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {tvTariffs.payTv.map((tariff) => (
+                    <tr key={tariff.name}>
+                      <td>{tariff.name}</td>
+                      <td>{tariff.channels}</td>
+                      <td>{tariff.extras}</td>
+                      <td>{tariff.target}</td>
+                      <td>{tariff.price}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="section-block">
+        <div className="container-shell grid gap-8 lg:grid-cols-[1fr_1fr] lg:items-center">
+          <div className="surface-card">
+            <p className="eyebrow">TV Business</p>
+            <h2 className="mt-2 text-3xl font-semibold text-alpine-900">Individuell statt One-Size-Fits-All.</h2>
+            <p className="mt-4 text-alpine-700">
+              Unternehmen brauchen meist mehr als ein Standardpaket. Darum planen wir TV Business immer als eigene
+              Loesung mit technischer Abstimmung vor Ort.
+            </p>
+            <ul className="mt-5 space-y-2 text-sm text-alpine-700">
+              {tvTariffs.business.map((point) => (
+                <li key={point}>- {point}</li>
+              ))}
+            </ul>
+          </div>
+
+          <figure className="overflow-hidden rounded-3xl border border-alpine-200 bg-white shadow-soft">
+            <Image
+              alt="TV fuer Unternehmen"
+              className="h-[340px] w-full object-cover"
+              src="/assets/gallery/tv-business-c3bdfb94-23310090.jpg"
+              width={900}
+              height={560}
+            />
+          </figure>
+        </div>
+      </section>
+
+      <section className="section-block bg-white/65">
+        <div className="container-shell grid gap-6 md:grid-cols-3">
+          <article className="surface-card">
+            <h3 className="text-xl font-semibold text-alpine-900">1. Bedarf klaeren</h3>
+            <p className="mt-3 text-sm text-alpine-700">Wie viele Geraete, welche Inhalte, welche Standorte?</p>
+          </article>
+          <article className="surface-card">
+            <h3 className="text-xl font-semibold text-alpine-900">2. Technik abstimmen</h3>
+            <p className="mt-3 text-sm text-alpine-700">Installation, Receiver, Netzstruktur und Laufzeit transparent festlegen.</p>
+          </article>
+          <article className="surface-card">
+            <h3 className="text-xl font-semibold text-alpine-900">3. Betrieb sichern</h3>
+            <p className="mt-3 text-sm text-alpine-700">Support aus Tirol, damit Ausfaelle in Stoerungszeiten kurz bleiben.</p>
+          </article>
+        </div>
+      </section>
+
+      <ContactStrip />
+    </>
+  );
+}