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,108 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+
+import { ContactStrip } from "@/components/contact-strip";
+import { PageHero } from "@/components/page-hero";
+import { teamMembers } from "@/lib/site-content";
+
+export const metadata: Metadata = {
+  title: "Ueber TeleNetSystems",
+  description:
+    "TeleNetSystems aus Reutte: Team, Werte und Arbeitsweise fuer regionale Telekommunikations- und IT-Dienstleistungen in Tirol."
+};
+
+const values = [
+  {
+    title: "Verlaesslichkeit",
+    text: "Wir versprechen nur Leistungen, die wir technisch und organisatorisch halten koennen."
+  },
+  {
+    title: "Nahbarkeit",
+    text: "Sie sprechen mit Menschen aus der Region, nicht mit anonymen Weiterleitungen."
+  },
+  {
+    title: "Klarheit",
+    text: "Angebote und Entscheidungen bleiben nachvollziehbar, auch wenn die Technik komplex ist."
+  }
+];
+
+export default function UeberUnsPage() {
+  return (
+    <>
+      <PageHero
+        eyebrow="Ueber uns"
+        title="TeleNetSystems ist in Reutte zuhause"
+        intro="Wir arbeiten fuer Menschen und Betriebe in Tirol, die eine stabile technische Basis und eine erreichbare Betreuung brauchen. Genau darauf ist unser Team ausgerichtet."
+        imageSrc="/assets/gallery/firmenkunden-96736712-5fa99704.jpg"
+        imageAlt="Teamarbeit bei TeleNetSystems"
+        primaryCta={{ label: "Kontakt aufnehmen", href: "/#kontakt" }}
+        secondaryCta={{ label: "Leistungen", href: "/leistungen" }}
+      />
+
+      <section className="section-block pt-6">
+        <div className="container-shell grid gap-8 lg:grid-cols-[1fr_1fr]">
+          <article className="surface-card">
+            <p className="eyebrow">Unsere Geschichte</p>
+            <h2 className="mt-2 text-3xl font-semibold text-alpine-900">Vom regionalen Anbieter zum festen IT-Partner</h2>
+            <p className="mt-4 text-alpine-700">
+              TeleNetSystems ist als regionales Telekom-Team gestartet und hat das Angebot schrittweise um
+              IT-Dienstleistungen erweitert. Heute betreuen wir private Haushalte, Handwerksbetriebe, Hotels und
+              mittelstaendische Unternehmen in ganz Tirol.
+            </p>
+          </article>
+
+          <article className="surface-card bg-alpine-900 text-alpine-50">
+            <p className="eyebrow text-copper-300">Regional verankert</p>
+            <h2 className="mt-2 text-3xl font-semibold text-white">Reutte als Basis, Tirol als Einsatzgebiet</h2>
+            <ul className="mt-4 space-y-2 text-sm text-alpine-100">
+              <li>- Kurze Wege zu Kundenterminen</li>
+              <li>- Schnelle Abstimmung zwischen Beratung und Technik</li>
+              <li>- Langfristige Kundenbeziehungen statt kurzfristiger Abschluesse</li>
+            </ul>
+          </article>
+        </div>
+      </section>
+
+      <section className="section-block bg-white/70">
+        <div className="container-shell">
+          <p className="eyebrow">Werte</p>
+          <h2 className="mt-2 text-3xl font-semibold text-alpine-900">So arbeiten wir im Alltag</h2>
+          <div className="mt-7 grid gap-5 md:grid-cols-3">
+            {values.map((value) => (
+              <article className="surface-card" key={value.title}>
+                <h3 className="text-xl font-semibold text-alpine-900">{value.title}</h3>
+                <p className="mt-3 text-sm text-alpine-700">{value.text}</p>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="section-block">
+        <div className="container-shell">
+          <p className="eyebrow">Team</p>
+          <h2 className="mt-2 text-3xl font-semibold text-alpine-900">Ihre Ansprechpartner bei TeleNetSystems</h2>
+          <div className="mt-7 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
+            {teamMembers.map((member) => (
+              <article className="overflow-hidden rounded-2xl border border-alpine-200 bg-white shadow-card" key={member.name}>
+                <Image
+                  alt={`${member.name} von TeleNetSystems`}
+                  className="h-56 w-full object-cover"
+                  src={member.image}
+                  width={420}
+                  height={420}
+                />
+                <div className="p-4">
+                  <h3 className="font-semibold text-alpine-900">{member.name}</h3>
+                  <p className="mt-1 text-sm text-alpine-700">{member.role}</p>
+                </div>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <ContactStrip />
+    </>
+  );
+}