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,133 @@
|
||||
|
||||
import Link from "next/link";
|
||||
import { Container } from "@/components/layout/Container";
|
||||
import { Section } from "@/components/layout/Section";
|
||||
|
||||
export const metadata = {
|
||||
title: "Telefonie Tarife | TeleNetSystems",
|
||||
description: "Günstig telefonieren über Ihren Kabelanschluss. Privat- und Business-Tarife in Reutte.",
|
||||
};
|
||||
|
||||
export default function TelefoniePage() {
|
||||
return (
|
||||
<main>
|
||||
<Section variant="hero" className="bg-[var(--color-muted)] text-center">
|
||||
<Container>
|
||||
<h1 className="mb-[var(--spacing-md)]">
|
||||
Klar verständlich. <span className="text-[color:var(--color-primary)]">Einfach günstig.</span>
|
||||
</h1>
|
||||
<p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
|
||||
Telefonieren Sie in bester Qualität über Ihren bestehenden Kabelanschluss.
|
||||
Ideal als Ergänzung zu Ihrem Internet-Paket.
|
||||
</p>
|
||||
<Link href="#tarife" className="btn btn-primary btn-lg">
|
||||
Tarife ansehen
|
||||
</Link>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Section id="tarife">
|
||||
<Container>
|
||||
<div className="text-center mb-[var(--spacing-2xl)]">
|
||||
<h2>Unsere Telefonie-Tarife</h2>
|
||||
<p className="text-[color:var(--color-muted-foreground)]">Fair abgerechnet, ohne versteckte Kosten.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-[var(--spacing-xl)] max-w-5xl mx-auto">
|
||||
{/* Zero (With Internet) */}
|
||||
<div className="card text-center border-[color:var(--color-primary)] shadow-[var(--shadow-md)]">
|
||||
<div className="bg-[var(--color-primary)] text-white text-xs py-1 px-3 rounded-full inline-block mb-[var(--spacing-sm)]">Empfehlung</div>
|
||||
<h3 className="heading-4 mb-[var(--spacing-xs)]">zero</h3>
|
||||
<p className="text-sm mb-[var(--spacing-sm)] text-[color:var(--color-muted-foreground)]">(in Kombi mit Internet)</p>
|
||||
<div className="text-4xl font-bold text-[color:var(--color-primary)] mb-[var(--spacing-md)]">
|
||||
€ 0,00
|
||||
</div>
|
||||
<p className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-lg)]">
|
||||
Grundgebühr pro Monat
|
||||
</p>
|
||||
<ul className="text-left space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)] mx-auto inline-block">
|
||||
<li>✅ Keine Grundgebühr!</li>
|
||||
<li>📞 Festnetz AT: ab 2,4 Cent/min</li>
|
||||
<li>🎯 Ideal für Gelegenheitsnutzer</li>
|
||||
</ul>
|
||||
<Link href="#kontakt" className="btn btn-primary w-full">Bestellen</Link>
|
||||
</div>
|
||||
|
||||
{/* Zero (Solo) */}
|
||||
<div className="card text-center">
|
||||
<h3 className="heading-4 mb-[var(--spacing-xs)]">zero</h3>
|
||||
<p className="text-sm mb-[var(--spacing-sm)] text-[color:var(--color-muted-foreground)]">(ohne Internet)</p>
|
||||
<div className="text-4xl font-bold text-[color:var(--color-neutral)] mb-[var(--spacing-md)]">
|
||||
€ 5,00
|
||||
</div>
|
||||
<p className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-lg)]">
|
||||
Grundgebühr pro Monat
|
||||
</p>
|
||||
<ul className="text-left space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)] mx-auto inline-block">
|
||||
<li>✅ Günstige Grundgebühr</li>
|
||||
<li>📞 Festnetz AT: ab 2,4 Cent/min</li>
|
||||
<li>🔌 Nur Kabelanschluss nötig</li>
|
||||
</ul>
|
||||
<Link href="#kontakt" className="btn btn-outline w-full">Bestellen</Link>
|
||||
</div>
|
||||
|
||||
{/* Business */}
|
||||
<div className="card text-center">
|
||||
<h3 className="heading-4 mb-[var(--spacing-xs)]">business</h3>
|
||||
<p className="text-sm mb-[var(--spacing-sm)] text-[color:var(--color-muted-foreground)]">(für Unternehmen)</p>
|
||||
<div className="text-4xl font-bold text-[color:var(--color-neutral)] mb-[var(--spacing-md)]">
|
||||
€ 8,90
|
||||
</div>
|
||||
<p className="text-sm text-[color:var(--color-muted-foreground)] mb-[var(--spacing-lg)]">
|
||||
Grundgebühr pro Monat
|
||||
</p>
|
||||
<ul className="text-left space-y-[var(--spacing-sm)] mb-[var(--spacing-xl)] mx-auto inline-block">
|
||||
<li>✅ Professionelle Lösung</li>
|
||||
<li>📞 Festnetz AT: ab 3,24 Cent/min</li>
|
||||
<li>👔 Für Firmenkunden</li>
|
||||
</ul>
|
||||
<Link href="#kontakt" className="btn btn-outline w-full">Anfragen</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Section className="bg-[var(--color-muted)]">
|
||||
<Container>
|
||||
<div className="grid md:grid-cols-2 gap-[var(--spacing-xl)] items-center">
|
||||
<div>
|
||||
<h3 className="mb-[var(--spacing-md)]">Rufnummernmitnahme? Kein Problem!</h3>
|
||||
<p className="mb-[var(--spacing-md)]">
|
||||
Sie hängen an Ihrer alten Nummer? Wir auch. Deshalb übernehmen wir gerne die Portierung Ihrer bestehenden Festnetznummer zu uns.
|
||||
</p>
|
||||
<p className="text-sm text-[color:var(--color-muted-foreground)]">
|
||||
Abhängig von Ihrem bisherigen Anbieter können Portierungskosten entstehen. Wir beraten Sie gerne zum Ablauf.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<div className="bg-white p-[var(--spacing-lg)] rounded-[var(--radius-lg)] shadow-[var(--shadow-sm)] rotate-3">
|
||||
<div className="text-6xl mb-2">☎️</div>
|
||||
<div className="font-bold">Ihre Nummer</div>
|
||||
<div className="text-sm">bleibt gleich.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Section id="kontakt" className="bg-[var(--color-primary)] text-white text-center">
|
||||
<Container>
|
||||
<h2 className="text-white mb-[var(--spacing-md)]">Jetzt Telefonie anmelden</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)]">
|
||||
📞 Anrufen
|
||||
</a>
|
||||
<a href="mailto:PLACEHOLDER" className="btn btn-outline border-white text-white hover:bg-white hover:text-[color:var(--color-primary)]">
|
||||
✉️ E-Mail schreiben
|
||||
</a>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user