feat: Scaffold new Next.js website with core pages, components, and assets.
This commit is contained in:
1elle1
+142
@@ -0,0 +1,142 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
|
||||
import { ContactStrip } from "@/components/contact-strip";
|
||||
import { PageHero } from "@/components/page-hero";
|
||||
import { company, faqItems, serviceHighlights, testimonials } from "@/lib/site-content";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Regionaler Telekom- und IT-Service in Reutte",
|
||||
description:
|
||||
"TeleNetSystems praesentiert Internet, Fernsehen und Telefonie fuer Privat- und Geschaeftskunden in Tirol. Mit klaren Tarifen und direktem Support aus Reutte."
|
||||
};
|
||||
|
||||
const localBusinessSchema = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "LocalBusiness",
|
||||
name: company.name,
|
||||
areaServed: "Tirol",
|
||||
address: {
|
||||
"@type": "PostalAddress",
|
||||
streetAddress: "Untermarkt 12",
|
||||
postalCode: "6600",
|
||||
addressLocality: "Reutte",
|
||||
addressCountry: "AT"
|
||||
},
|
||||
telephone: company.phone,
|
||||
email: company.email,
|
||||
openingHours: ["Mo-Fr 08:00-17:30"],
|
||||
sameAs: []
|
||||
};
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<PageHero
|
||||
eyebrow="TeleNetSystems Reutte"
|
||||
title="Technik, die laeuft. Support, der erreichbar bleibt."
|
||||
intro="TeleNetSystems verbindet in Tirol private Haushalte und Betriebe mit stabilem Internet, Fernsehen und Telefonie. Sie bekommen transparente Angebote und ein Team aus der Region, das sich kuemmert."
|
||||
imageSrc="/assets/hero/internet-header-431619ac.jpg"
|
||||
imageAlt="Netzwerktechnik von TeleNetSystems"
|
||||
primaryCta={{ label: "Beratung starten", href: "#kontakt" }}
|
||||
secondaryCta={{ label: "Leistungen ansehen", href: "/leistungen" }}
|
||||
/>
|
||||
|
||||
<section className="section-block pt-6">
|
||||
<div className="container-shell">
|
||||
<div className="mb-8 flex flex-wrap items-end justify-between gap-4">
|
||||
<div>
|
||||
<p className="eyebrow">Leistungsuebersicht</p>
|
||||
<h2 className="mt-2 text-3xl font-semibold text-alpine-900">Drei Bereiche, klar getrennt aufgebaut.</h2>
|
||||
</div>
|
||||
<p className="max-w-xl text-alpine-700">
|
||||
Erst Internet, dann Fernsehen, danach Telefonie: Die Reihenfolge folgt den haeufigsten Fragen in der
|
||||
Beratung und macht die Entscheidung schneller.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-5 md:grid-cols-3">
|
||||
{serviceHighlights.map((item) => (
|
||||
<article className="surface-card flex h-full flex-col" key={item.title}>
|
||||
<h3 className="text-xl font-semibold text-alpine-900">{item.title}</h3>
|
||||
<p className="mt-3 flex-1 text-alpine-700">{item.text}</p>
|
||||
<Link className="mt-5 inline-flex items-center text-sm font-semibold text-copper-700 hover:text-copper-800" href={item.href}>
|
||||
Details ansehen ->
|
||||
</Link>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section-block">
|
||||
<div className="container-shell grid gap-6 lg:grid-cols-2">
|
||||
<article className="surface-card border-moss-500/20 bg-gradient-to-br from-white via-white to-moss-500/5">
|
||||
<p className="eyebrow text-moss-600">Privatkunden</p>
|
||||
<h2 className="mt-2 text-2xl font-semibold text-alpine-900">Wenn Technik einfach funktionieren soll.</h2>
|
||||
<ul className="mt-4 space-y-2 text-alpine-700">
|
||||
<li>Klare Monatspreise ohne Tarifdschungel</li>
|
||||
<li>TV-, Internet- und Telefoniepakete fuer den Alltag</li>
|
||||
<li>Schnelle Hilfe bei Stoerungen, ohne Umwege</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article className="surface-card border-copper-300/40 bg-gradient-to-br from-white via-white to-copper-100/30">
|
||||
<p className="eyebrow">Geschaeftskunden</p>
|
||||
<h2 className="mt-2 text-2xl font-semibold text-alpine-900">Wenn Ausfaelle sofort Geld kosten.</h2>
|
||||
<ul className="mt-4 space-y-2 text-alpine-700">
|
||||
<li>Skalierbare Business-Leitungen mit SLA</li>
|
||||
<li>Standortvernetzung und SIP-Telefonie aus einer Hand</li>
|
||||
<li>Direkter Kontakt zu Technik und Projektleitung</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section-block bg-white/65">
|
||||
<div className="container-shell">
|
||||
<p className="eyebrow">Stimmen aus Tirol</p>
|
||||
<h2 className="mt-2 text-3xl font-semibold text-alpine-900">Vertrauen entsteht im Tagesgeschaeft.</h2>
|
||||
<div className="mt-8 grid gap-5 md:grid-cols-3">
|
||||
{testimonials.map((item) => (
|
||||
<blockquote className="surface-card" key={item.author}>
|
||||
<p className="text-alpine-700">{item.quote}</p>
|
||||
<footer className="mt-4 text-sm text-alpine-600">
|
||||
<span className="font-semibold text-alpine-800">{item.author}</span> | {item.context}
|
||||
</footer>
|
||||
</blockquote>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section-block">
|
||||
<div className="container-shell grid gap-8 lg:grid-cols-[0.9fr_1.1fr] lg:items-start">
|
||||
<div>
|
||||
<p className="eyebrow">Hauefige Fragen</p>
|
||||
<h2 className="mt-2 text-3xl font-semibold text-alpine-900">Was vor einem Wechsel oft unklar ist.</h2>
|
||||
<p className="mt-4 text-alpine-700">
|
||||
Diese Fragen kommen in der Erstberatung am haeufigsten. Wenn Ihr Punkt nicht dabei ist, klaeren wir ihn
|
||||
telefonisch in wenigen Minuten.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{faqItems.map((item) => (
|
||||
<details className="surface-card p-0" key={item.question}>
|
||||
<summary className="cursor-pointer list-none px-5 py-4 font-semibold text-alpine-900">{item.question}</summary>
|
||||
<p className="border-t border-alpine-100 px-5 py-4 text-sm text-alpine-700">{item.answer}</p>
|
||||
</details>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<ContactStrip />
|
||||
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(localBusinessSchema) }}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user