feat: Implement initial website structure, core pages, and layout components, including a redesigned homepage.
This commit is contained in:
1elle1
@@ -0,0 +1,203 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user