feat: Implement core page structure with Header and Footer, add multiple content pages, and refine UI components and global styling.
This commit is contained in:
@@ -0,0 +1,82 @@
|
||||
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
|
||||
export const metadata = {
|
||||
title: "Über uns | TeleNetSystems",
|
||||
description: "TeleNetSystems GmbH - Ihr regionaler Telekommunikationsanbieter in Reutte seit 1976.",
|
||||
};
|
||||
|
||||
export default function UeberUnsPage() {
|
||||
return (
|
||||
<main>
|
||||
<Section variant="hero" className="bg-[var(--color-muted)] text-center">
|
||||
<Container>
|
||||
<h1 className="mb-[var(--spacing-md)]">
|
||||
Regional. Persönlich. <span className="text-[color:var(--color-primary)]">Verlässlich.</span>
|
||||
</h1>
|
||||
<p className="lead max-w-2xl mx-auto">
|
||||
Seit 1976 verbinden wir Menschen in der Region Reutte.
|
||||
</p>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)] items-center mb-[var(--spacing-2xl)]">
|
||||
<div className="order-2 md:order-1">
|
||||
<div className="aspect-square bg-[var(--color-muted)] rounded-[var(--radius-lg)] flex items-center justify-center text-[color:var(--color-muted-foreground)]">
|
||||
PLACEHOLDER: Historic Image / Company Building
|
||||
</div>
|
||||
</div>
|
||||
<div className="order-1 md:order-2">
|
||||
<h2 className="mb-[var(--spacing-md)]">Unsere Geschichte</h2>
|
||||
<p className="mb-[var(--spacing-md)]">
|
||||
Die Telenet Systems GmbH blickt auf eine lange Tradition zurück. Gegründet 1976, haben wir uns von einem lokalen Anbieter für
|
||||
Antennen- und Kabelfernsehen zu einem modernen Full-Service-Provider entwickelt.
|
||||
</p>
|
||||
<p className="mb-[var(--spacing-md)]">
|
||||
In einer Zeit, in der Technologie immer komplexer wurde, war unser Ziel immer einfach: Technik verständlich und nutzbar zu machen.
|
||||
Heute versorgen wir Haushalte und Unternehmen im gesamten Bezirk Reutte mit Highspeed-Internet, digitalem Fernsehen und
|
||||
Telefonie.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)] items-center">
|
||||
<div>
|
||||
<h2 className="mb-[var(--spacing-md)]">Unsere Philosophie</h2>
|
||||
<p className="mb-[var(--spacing-md)]">
|
||||
Wir sind kein anonymer Konzern mit Call-Center im Ausland. Wir sind Ihre Nachbarn.
|
||||
Unsere Mitarbeiter leben in der Region und kennen die Anforderungen vor Ort.
|
||||
</p>
|
||||
<ul className="space-y-[var(--spacing-sm)]">
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">✅ Echte Ansprechpartner</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">✅ Schnelle Reaktionszeiten</li>
|
||||
<li className="flex items-center gap-[var(--spacing-sm)]">✅ Handschlagqualität</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<div className="aspect-video bg-[var(--color-muted)] rounded-[var(--radius-lg)] flex items-center justify-center text-[color:var(--color-muted-foreground)]">
|
||||
PLACEHOLDER: Team Image
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Contact Anchor */}
|
||||
<Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
|
||||
<Container>
|
||||
<h2 className="text-white mb-[var(--spacing-md)]">Werden Sie Teil unseres Netzes</h2>
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
|
||||
<a href="tel:PLACEHOLDER" className="btn btn-ghost bg-white text-[color:var(--color-primary)] hover:bg-[var(--color-muted)]">
|
||||
📞 Kontakt aufnehmen
|
||||
</a>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user