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:
1elle1
@@ -0,0 +1,114 @@
|
||||
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
|
||||
export const metadata = {
|
||||
title: "IT-Services & Leistungen | TeleNetSystems",
|
||||
description: "Professionelle IT-Dienstleistungen in Reutte. Netzwerk, Hardware, Wartung und Support für Firmen und Privat.",
|
||||
};
|
||||
|
||||
export default function LeistungenPage() {
|
||||
return (
|
||||
<main>
|
||||
<Section variant="hero" className="bg-[var(--color-muted)] text-center">
|
||||
<Container>
|
||||
<h1 className="mb-[var(--spacing-md)]">
|
||||
Mehr als nur Kommunikation. <br />
|
||||
<span className="text-[color:var(--color-primary)]">Ihr IT-Partner vor Ort.</span>
|
||||
</h1>
|
||||
<p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
|
||||
Wir vernetzen nicht nur Ihr Zuhause, wir sorgen auch dafür, dass Ihre Technik reibungslos läuft.
|
||||
Von der Planung bis zur Wartung.
|
||||
</p>
|
||||
<Link href="#it-services" className="btn btn-primary btn-lg">
|
||||
Zu den IT-Services
|
||||
</Link>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* Overview Core Services */}
|
||||
<Section>
|
||||
<Container>
|
||||
<div className="text-center mb-[var(--spacing-2xl)]">
|
||||
<h2>Unsere Kernkompetenzen</h2>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-[var(--spacing-xl)]">
|
||||
<div className="card text-center hover:bg-[var(--color-muted)]/50 transition-colors">
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">Internet & Glasfaser</h3>
|
||||
<p className="mb-[var(--spacing-md)] text-sm">Highspeed-Verbindungen für jede Anforderung.</p>
|
||||
<Link href="/internet" className="text-[color:var(--color-primary)] text-sm hover:underline">Mehr erfahren →</Link>
|
||||
</div>
|
||||
<div className="card text-center hover:bg-[var(--color-muted)]/50 transition-colors">
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">Fernsehen</h3>
|
||||
<p className="mb-[var(--spacing-md)] text-sm">TV-Genuss mit über 200 Programmen.</p>
|
||||
<Link href="/fernsehen" className="text-[color:var(--color-primary)] text-sm hover:underline">Mehr erfahren →</Link>
|
||||
</div>
|
||||
<div className="card text-center hover:bg-[var(--color-muted)]/50 transition-colors">
|
||||
<h3 className="heading-5 mb-[var(--spacing-sm)]">Telefonie</h3>
|
||||
<p className="mb-[var(--spacing-md)] text-sm">Kostengünstig telefonieren über Kabel.</p>
|
||||
<Link href="/telefonie" className="text-[color:var(--color-primary)] text-sm hover:underline">Mehr erfahren →</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
{/* IT Services Detail */}
|
||||
<Section id="it-services" className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)]">
|
||||
<div>
|
||||
<h2 className="mb-[var(--spacing-lg)]">Unsere IT-Dienstleistungen</h2>
|
||||
<div className="space-y-[var(--spacing-xl)]">
|
||||
<div>
|
||||
<h3 className="heading-4 text-[color:var(--color-primary)] mb-[var(--spacing-xs)]">Netzwerktechnik</h3>
|
||||
<p>
|
||||
Planung und Installation von Firmennetzwerken, WLAN-Ausleuchtung, VPN-Standortvernetzung und Server-Schränken.
|
||||
Wir sorgen für eine stabile Infrastruktur.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="heading-4 text-[color:var(--color-primary)] mb-[var(--spacing-xs)]">Hardware & Software</h3>
|
||||
<p>
|
||||
Beratung und Verkauf von PCs, Laptops, Druckern und Zubehör. Installation von Betriebssystemen, Office-Lösungen
|
||||
und Antivirus-Software.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="heading-4 text-[color:var(--color-primary)] mb-[var(--spacing-xs)]">Reparatur & Wartung</h3>
|
||||
<p>
|
||||
Ihr PC streikt? Wir reparieren Hardware-Defekte, entfernen Viren und rüsten alte Geräte auf.
|
||||
Gerne auch per Fernwartung für schnelle Hilfe.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-[var(--spacing-md)]">
|
||||
<div className="bg-white p-[var(--spacing-xl)] rounded-[var(--radius-lg)] shadow-[var(--shadow-md)] aspect-video flex items-center justify-center bg-[var(--color-muted)] text-[color:var(--color-muted-foreground)]">
|
||||
PLACEHOLDER: IT Hardware Image
|
||||
</div>
|
||||
<div className="bg-white p-[var(--spacing-xl)] rounded-[var(--radius-lg)] shadow-[var(--shadow-md)] aspect-video flex items-center justify-center bg-[var(--color-muted)] text-[color:var(--color-muted-foreground)]">
|
||||
PLACEHOLDER: Server Room 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)]">IT-Probleme? Wir helfen.</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)]">
|
||||
📞 05672 / PLACEHOLDER
|
||||
</a>
|
||||
<a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
|
||||
✉️ support@tnr.at
|
||||
</a>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user