feat: add new components for navigation, contact, customer segments, hero section, and service overview
- Implement Navigation component for main navigation links. - Create ContactSection for displaying contact information and a contact form. - Add CustomerSegments to showcase target customer groups. - Develop HeroSection for the landing page with a background image and call-to-action buttons. - Introduce ServiceOverview to present available services with icons and descriptions. - Create PageHero for consistent page headers with optional background images. - Implement TariffTable for displaying internet and phone tariff plans. - Add TeamGrid to showcase team members with images and roles. - Create TrustSection to highlight company statistics. - Implement ValueProposition to present company values with icons. - Add reusable UI components: Badge, Button, Card, Container, and SectionHeading. - Define constants for company information, services, and tariffs. - Create utility function for class name management. - Define TypeScript types for navigation links, team members, tariff plans, and service cards. - Configure TypeScript settings for the project.
This commit is contained in:
1elle1
@@ -0,0 +1,117 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Heart, Target, Users, Zap } from "lucide-react";
|
||||
import PageHero from "@/components/sections/PageHero";
|
||||
import TeamGrid from "@/components/sections/TeamGrid";
|
||||
import ContactSection from "@/components/sections/ContactSection";
|
||||
import Container from "@/components/ui/Container";
|
||||
import SectionHeading from "@/components/ui/SectionHeading";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Über uns",
|
||||
description:
|
||||
"Lernen Sie das Team hinter TeleNetSystems kennen. Regional verwurzelt in Reutte, Tirol. Persönlicher Service seit über 20 Jahren.",
|
||||
};
|
||||
|
||||
const companyValues = [
|
||||
{
|
||||
icon: Heart,
|
||||
title: "Ehrliche Beratung",
|
||||
description: "Wir empfehlen, was sinnvoll ist — nicht, was die höchste Marge bringt.",
|
||||
},
|
||||
{
|
||||
icon: Target,
|
||||
title: "Klare Kommunikation",
|
||||
description: "Was wir versprechen, halten wir. Ohne Sternchen im Kleingedruckten.",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Regionale Verantwortung",
|
||||
description: "Wir leben und arbeiten hier. Was wir tun, hat direkten Einfluss auf unsere Nachbarn.",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Schnelles Handeln",
|
||||
description: "Wenn es brennt, sind wir da. Nicht morgen, sondern heute.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function UeberUnsPage() {
|
||||
return (
|
||||
<>
|
||||
<PageHero
|
||||
title="Wir sind TeleNetSystems"
|
||||
description="Ein Team aus Reutte, das Technik versteht und Menschen ernst nimmt."
|
||||
backgroundImage="/images/team/team-telenet.jpg"
|
||||
/>
|
||||
|
||||
{/* Company Story */}
|
||||
<section className="py-20 lg:py-24" aria-labelledby="story-heading">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 items-center gap-12 lg:grid-cols-2">
|
||||
<div>
|
||||
<h2 id="story-heading" className="text-title font-bold text-neutral-900">
|
||||
Aus der Region, für die Region
|
||||
</h2>
|
||||
<div className="mt-6 space-y-4 text-neutral-600 leading-relaxed">
|
||||
<p>
|
||||
TeleNetSystems gibt es nicht erst seit gestern. Seit über zwei Jahrzehnten
|
||||
versorgen wir Reutte und das Außerfern mit Internet, Fernsehen und Telefonie.
|
||||
Angefangen hat alles mit ein paar Kabelanschlüssen. Heute betreuen wir
|
||||
über tausend Kunden — privat und gewerblich.
|
||||
</p>
|
||||
<p>
|
||||
Was sich nicht geändert hat: Wir sitzen hier. In Reutte, nicht in Wien oder
|
||||
München. Wenn Sie anrufen, heben wir ab. Wenn etwas nicht funktioniert,
|
||||
kommen wir vorbei. Das klingt selbstverständlich, ist es aber bei den
|
||||
Großen der Branche längst nicht mehr.
|
||||
</p>
|
||||
<p>
|
||||
Uns geht es nicht darum, die meisten Kunden zu haben. Es geht darum,
|
||||
die Kunden, die wir haben, gut zu betreuen. Daran messen wir uns selbst.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="overflow-hidden rounded-card">
|
||||
<img
|
||||
src="/images/gallery/firma1.jpg"
|
||||
alt="TeleNetSystems Firmengebäude in Reutte"
|
||||
className="w-full object-cover"
|
||||
loading="lazy"
|
||||
width={600}
|
||||
height={400}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
{/* Values */}
|
||||
<section className="bg-neutral-50 py-20 lg:py-24" aria-labelledby="values-heading">
|
||||
<Container>
|
||||
<SectionHeading
|
||||
title="Wofür wir stehen"
|
||||
subtitle="Vier Grundsätze, an denen wir uns im Alltag messen."
|
||||
/>
|
||||
<div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4" id="values-heading">
|
||||
{companyValues.map((value) => {
|
||||
const Icon = value.icon;
|
||||
return (
|
||||
<div key={value.title} className="rounded-card bg-white p-6 shadow-sm border border-neutral-200">
|
||||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-100">
|
||||
<Icon className="h-6 w-6 text-primary-700" aria-hidden="true" />
|
||||
</div>
|
||||
<h3 className="mt-4 text-base font-semibold text-neutral-900">{value.title}</h3>
|
||||
<p className="mt-2 text-sm leading-relaxed text-neutral-600">{value.description}</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<TeamGrid />
|
||||
|
||||
<ContactSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user