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,137 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+
+import { ContactStrip } from "@/components/contact-strip";
+import { PageHero } from "@/components/page-hero";
+import { internetTariffs } from "@/lib/site-content";
+
+export const metadata: Metadata = {
+  title: "Internet in Reutte und Tirol",
+  description:
+    "Internet-Tarife fuer Reutte und Tirol: Kabel, Glasfaser und Business-Leitungen mit transparenten Preisen und regionalem Support."
+};
+
+export default function InternetPage() {
+  return (
+    <>
+      <PageHero
+        eyebrow="Internet"
+        title="Schnelles Internet fuer Alltag und Betrieb"
+        intro="Ob Familie, Homeoffice oder Unternehmensstandort: Sie sehen auf einen Blick, welche Geschwindigkeit, Vertragsdauer und Kosten zu Ihrem Bedarf passen."
+        imageSrc="/assets/gallery/internet-7b594a2d-793cefee.jpg"
+        imageAlt="Internetinfrastruktur von TeleNetSystems"
+        primaryCta={{ label: "Jetzt beraten lassen", href: "/#kontakt" }}
+        secondaryCta={{ label: "Fernsehen ansehen", href: "/fernsehen" }}
+      />
+
+      <section className="section-block pt-6">
+        <div className="container-shell grid gap-5 md:grid-cols-3">
+          <article className="surface-card">
+            <h2 className="text-xl font-semibold text-alpine-900">Transparent kalkuliert</h2>
+            <p className="mt-3 text-sm text-alpine-700">Monatspreis, Aktivierung und Laufzeit sind offen dargestellt.</p>
+          </article>
+          <article className="surface-card">
+            <h2 className="text-xl font-semibold text-alpine-900">Stabil in Spitzenzeiten</h2>
+            <p className="mt-3 text-sm text-alpine-700">Tarife sind fuer Streaming, Homeoffice und Cloud-Nutzung ausgelegt.</p>
+          </article>
+          <article className="surface-card">
+            <h2 className="text-xl font-semibold text-alpine-900">Support vor Ort</h2>
+            <p className="mt-3 text-sm text-alpine-700">Keine Hotline-Odyssee. Unser Team sitzt in Tirol und kennt die Netze.</p>
+          </article>
+        </div>
+      </section>
+
+      <section className="section-block bg-white/70">
+        <div className="container-shell space-y-12">
+          <div>
+            <p className="eyebrow">Privatkunden | Kabel</p>
+            <div className="mt-4 table-shell">
+              <table className="data-table">
+                <thead>
+                  <tr>
+                    <th>Tarif</th>
+                    <th>Geschwindigkeit</th>
+                    <th>Laufzeit</th>
+                    <th>Setup</th>
+                    <th>Preis</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {internetTariffs.privateCable.map((tariff) => (
+                    <tr key={tariff.name}>
+                      <td>{tariff.name}</td>
+                      <td>{tariff.speed}</td>
+                      <td>{tariff.contract}</td>
+                      <td>{tariff.setup}</td>
+                      <td>{tariff.price}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <div>
+            <p className="eyebrow">Privatkunden | Glasfaser</p>
+            <div className="mt-4 table-shell">
+              <table className="data-table">
+                <thead>
+                  <tr>
+                    <th>Tarif</th>
+                    <th>Geschwindigkeit</th>
+                    <th>Laufzeit</th>
+                    <th>Setup</th>
+                    <th>Preis</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {internetTariffs.privateFiber.map((tariff) => (
+                    <tr key={tariff.name}>
+                      <td>{tariff.name}</td>
+                      <td>{tariff.speed}</td>
+                      <td>{tariff.contract}</td>
+                      <td>{tariff.setup}</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>
+            <p className="eyebrow">Business-Internet</p>
+            <h2 className="mt-2 text-3xl font-semibold text-alpine-900">Wenn Leitungen Teil Ihrer Betriebszeit sind.</h2>
+            <p className="mt-4 text-alpine-700">
+              Fuer Betriebe konfigurieren wir Internet nicht als Standardpaket, sondern passend zu Ausfallsicherheit,
+              Standortanzahl und Lastprofil.
+            </p>
+            <ul className="mt-4 space-y-2 text-sm text-alpine-700">
+              {internetTariffs.business.map((point) => (
+                <li className="surface-card py-3" key={point}>
+                  {point}
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="overflow-hidden rounded-3xl border border-alpine-200 bg-white shadow-soft">
+            <Image
+              alt="Serverraum TeleNetSystems"
+              className="h-[340px] w-full object-cover"
+              src="/assets/gallery/serverraum-7225cb6a.jpg"
+              width={900}
+              height={560}
+            />
+          </div>
+        </div>
+      </section>
+
+      <ContactStrip />
+    </>
+  );
+}