204 lines
10 KiB
TypeScript
204 lines
10 KiB
TypeScript
import { Metadata } from "next";
|
||
import Link from "next/link";
|
||
import { Section } from "@/components/layout/Section";
|
||
import { Container } from "@/components/layout/Container";
|
||
import { MapPin, Clock, Users, Heart, Shield, ArrowRight } from "lucide-react";
|
||
|
||
export const metadata: Metadata = {
|
||
title: "Über uns",
|
||
description:
|
||
"Lernen Sie TeleNetSystems kennen – Ihr regionaler Telekom- und IT-Partner in Tirol seit 1976.",
|
||
};
|
||
|
||
const values = [
|
||
{
|
||
icon: Heart,
|
||
title: "Persönlich",
|
||
description: "Wir sind kein anonymer Konzern. Bei uns bekommen Sie echte Ansprechpartner.",
|
||
},
|
||
{
|
||
icon: MapPin,
|
||
title: "Regional",
|
||
description: "In Reutte verwurzelt, für die Region da. Wir kennen Land und Leute.",
|
||
},
|
||
{
|
||
icon: Shield,
|
||
title: "Zuverlässig",
|
||
description: "Stabile Technik, bewährte Lösungen, transparente Kommunikation.",
|
||
},
|
||
{
|
||
icon: Clock,
|
||
title: "Schnell",
|
||
description: "Bei Problemen sind wir schnell zur Stelle – ohne lange Warteschleifen.",
|
||
},
|
||
];
|
||
|
||
const milestones = [
|
||
{ year: "1976", text: "Gründung als regionaler Telekom-Anbieter" },
|
||
{ year: "1990er", text: "Ausbau des Kabelnetzes in Reutte und Umgebung" },
|
||
{ year: "2000er", text: "Einführung von Highspeed-Internet" },
|
||
{ year: "2010er", text: "Erweiterung um IT-Dienstleistungen" },
|
||
{ year: "Heute", text: "Ihr verlässlicher Partner für Telekom & IT" },
|
||
];
|
||
|
||
export default function UeberUnsPage() {
|
||
return (
|
||
<main>
|
||
{/* Hero Section */}
|
||
<Section variant="hero" className="bg-[var(--color-muted)]">
|
||
<Container>
|
||
<div className="max-w-3xl">
|
||
<h1 className="mb-[var(--spacing-lg)]">
|
||
Wir sind
|
||
<span className="text-[var(--color-primary)]"> TeleNetSystems</span>
|
||
</h1>
|
||
<p className="lead mb-[var(--spacing-2xl)]">
|
||
Ihr regionaler Telekom- und IT-Partner in Tirol.
|
||
Seit 1976 verbinden wir Menschen – mit zuverlässiger Technik, ehrlicher Beratung und persönlichem Service.
|
||
</p>
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Story Section */}
|
||
<Section>
|
||
<Container>
|
||
<div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
|
||
<div>
|
||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||
Unsere Geschichte
|
||
</span>
|
||
<h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
|
||
Fast 50 Jahre Erfahrung
|
||
</h2>
|
||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||
1976 gegründet, sind wir heute einer der führenden regionalen Anbieter für
|
||
Telekommunikation und IT-Services in Tirol. Was als kleines Unternehmen begann,
|
||
ist heute ein verlässlicher Partner für Tausende von Privat- und Geschäftskunden.
|
||
</p>
|
||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||
Trotz des Wachstums sind wir unseren Werten treu geblieben:
|
||
persönlicher Service, regionale Nähe und ehrliche Beratung.
|
||
Wir kennen unsere Kunden – viele seit Jahrzehnten.
|
||
</p>
|
||
</div>
|
||
<div className="stack-md">
|
||
{milestones.map((milestone) => (
|
||
<div key={milestone.year} className="flex items-start gap-[var(--spacing-md)]">
|
||
<span className="text-[var(--color-primary)] font-bold text-lg min-w-[80px]">
|
||
{milestone.year}
|
||
</span>
|
||
<span className="text-muted pt-0.5">{milestone.text}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Values Section */}
|
||
<Section className="bg-[var(--color-muted)]">
|
||
<Container>
|
||
<div className="text-center mb-[var(--spacing-3xl)]">
|
||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||
Wofür wir stehen
|
||
</span>
|
||
<h2 className="mt-[var(--spacing-sm)]">Unsere Werte</h2>
|
||
</div>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-xl)]">
|
||
{values.map((value) => (
|
||
<div key={value.title} className="text-center">
|
||
<div className="w-14 h-14 rounded-full bg-[var(--color-primary)] flex items-center justify-center mx-auto mb-[var(--spacing-md)]">
|
||
<value.icon size={24} className="text-[var(--color-background)]" />
|
||
</div>
|
||
<h3 className="heading-5 mb-[var(--spacing-sm)]">{value.title}</h3>
|
||
<p className="text-sm text-muted">{value.description}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Team Section */}
|
||
<Section>
|
||
<Container variant="narrow">
|
||
<div className="text-center">
|
||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||
Unser Team
|
||
</span>
|
||
<h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
|
||
Menschen, die für Sie da sind
|
||
</h2>
|
||
<p className="text-muted mb-[var(--spacing-xl)]">
|
||
Hinter TeleNetSystems steht ein engagiertes Team aus Technikern, Beratern und
|
||
Service-Mitarbeitern. Wir kennen die Region, wir kennen die Technik – und wir
|
||
sind für Sie da, wenn Sie uns brauchen.
|
||
</p>
|
||
<div className="flex items-center justify-center gap-[var(--spacing-sm)]">
|
||
<Users size={20} className="text-[var(--color-primary)]" />
|
||
<span className="font-medium">PLACEHOLDER: Anzahl Mitarbeiter</span>
|
||
</div>
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* Region Section */}
|
||
<Section className="bg-[var(--color-muted)]">
|
||
<Container>
|
||
<div className="grid lg:grid-cols-2 gap-[var(--spacing-3xl)] items-center">
|
||
<div className="lg:order-2">
|
||
<span className="text-[var(--color-primary)] font-medium text-sm uppercase tracking-wide">
|
||
Unser Standort
|
||
</span>
|
||
<h2 className="mt-[var(--spacing-sm)] mb-[var(--spacing-lg)]">
|
||
Verwurzelt in Reutte
|
||
</h2>
|
||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||
Unser Hauptsitz ist in Reutte – mitten im Herzen des Außerferns.
|
||
Von hier aus betreuen wir Kunden in der gesamten Region.
|
||
</p>
|
||
<p className="text-muted mb-[var(--spacing-lg)]">
|
||
Der Vorteil für Sie: Kurze Wege, schnelle Reaktionszeiten und
|
||
persönliche Betreuung vor Ort. Bei uns sind Sie keine Nummer –
|
||
sondern ein geschätzter Kunde.
|
||
</p>
|
||
<div className="flex items-start gap-[var(--spacing-sm)]">
|
||
<MapPin size={20} className="text-[var(--color-primary)] shrink-0 mt-0.5" />
|
||
<span className="text-muted">
|
||
PLACEHOLDER: Adresse<br />
|
||
6600 Reutte, Tirol
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="lg:order-1 bg-[var(--color-background)] rounded-[var(--radius-lg)] aspect-video flex items-center justify-center border border-[var(--color-border)]">
|
||
<p className="text-muted">PLACEHOLDER: Karte oder Bild</p>
|
||
</div>
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
|
||
{/* CTA Section */}
|
||
<Section className="bg-[var(--color-primary)]">
|
||
<Container>
|
||
<div className="text-center text-[var(--color-background)]">
|
||
<h2 className="mb-[var(--spacing-md)] text-[var(--color-background)]">
|
||
Lernen Sie uns kennen
|
||
</h2>
|
||
<p className="text-lg opacity-90 mb-[var(--spacing-xl)] max-w-2xl mx-auto">
|
||
Besuchen Sie uns vor Ort oder kontaktieren Sie uns –
|
||
wir freuen uns auf Sie.
|
||
</p>
|
||
<Link
|
||
href="/kontakt"
|
||
className="btn bg-[var(--color-background)] text-[var(--color-primary)] hover:opacity-90"
|
||
>
|
||
Kontakt aufnehmen
|
||
<ArrowRight size={18} />
|
||
</Link>
|
||
</div>
|
||
</Container>
|
||
</Section>
|
||
</main>
|
||
);
|
||
}
|