feat: Implement core page structure with Header and Footer, add multiple content pages, and refine UI components and global styling.

app/page.tsx

@@ -1,12 +1,170 @@
+
+import Link from "next/link";
 import { Container } from "@/components/layout/Container";
 import { Section } from "@/components/layout/Section";
 
-export default function Page() {
+export default function Home() {
   return (
     <main>
+      {/* Hero Section */}
+      <Section variant="hero" className="bg-[var(--color-muted)] text-center">
+        <Container>
+          <h1 className="mb-[var(--spacing-md)]">
+            Ihr Partner für Telekom & IT <br />
+            <span className="text-[color:var(--color-primary)]">in Reutte & Umgebung</span>
+          </h1>
+          <p className="lead mb-[var(--spacing-xl)] max-w-2xl mx-auto">
+            Highspeed-Internet, brillantes Fernsehen und professionelle IT-Lösungen aus einer Hand.
+            Regional, persönlich und zuverlässig seit 1976.
+          </p>
+          <div className="flex flex-col sm:flex-row justify-center gap-[var(--spacing-md)]">
+            <Link href="#kontakt" className="btn btn-primary btn-lg">
+              Jetzt beraten lassen
+            </Link>
+            <Link href="/internet" className="btn btn-outline btn-lg">
+              Internet-Tarife prüfen
+            </Link>
+          </div>
+        </Container>
+      </Section>
+
+      {/* Services Section */}
       <Section>
         <Container>
-          <p>Ready</p>
+          <div className="text-center mb-[var(--spacing-2xl)]">
+            <h2 className="mb-[var(--spacing-sm)]">Rundum versorgt</h2>
+            <p className="text-[color:var(--color-muted-foreground)]">
+              Alles, was Sie für digitale Kommunikation benötigen.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-[var(--spacing-xl)]">
+            {/* Internet */}
+            <div className="card text-center transition-transform hover:-translate-y-1">
+              <div className="mb-[var(--spacing-md)] text-4xl">🚀</div>
+              <h3 className="heading-4 mb-[var(--spacing-sm)]">Highspeed Internet</h3>
+              <p className="mb-[var(--spacing-lg)] text-[color:var(--color-muted-foreground)]">
+                Egal ob Kabel oder Glasfaser – surfen Sie mit bis zu 500 Mbit/s. Stabil und unlimitiert.
+              </p>
+              <Link href="/internet" className="btn btn-secondary w-full">
+                Zu den Tarifen
+              </Link>
+            </div>
+
+            {/* Fernsehen */}
+            <div className="card text-center transition-transform hover:-translate-y-1">
+              <div className="mb-[var(--spacing-md)] text-4xl">📺</div>
+              <h3 className="heading-4 mb-[var(--spacing-sm)]">Kabelfernsehen</h3>
+              <p className="mb-[var(--spacing-lg)] text-[color:var(--color-muted-foreground)]">
+                Über 200 Programme, davon 40 in HD. Beste Bildqualität direkt aus der Region.
+              </p>
+              <Link href="/fernsehen" className="btn btn-secondary w-full">
+                Sender entdecken
+              </Link>
+            </div>
+
+            {/* Telefonie */}
+            <div className="card text-center transition-transform hover:-translate-y-1">
+              <div className="mb-[var(--spacing-md)] text-4xl">📞</div>
+              <h3 className="heading-4 mb-[var(--spacing-sm)]">Telefonie</h3>
+              <p className="mb-[var(--spacing-lg)] text-[color:var(--color-muted-foreground)]">
+                Günstig telefonieren über Ihren Kabelanschluss. Keine Grundgebühr bei Internet-Kombi.
+              </p>
+              <Link href="/telefonie" className="btn btn-secondary w-full">
+                Mehr erfahren
+              </Link>
+            </div>
+          </div>
+        </Container>
+      </Section>
+
+      {/* IT Services Teaser */}
+      <Section className="bg-[var(--color-muted)]">
+        <Container>
+          <div className="grid md:grid-cols-2 gap-[var(--spacing-2xl)] items-center">
+            <div>
+              <h2 className="mb-[var(--spacing-md)]">
+                Professionelle IT-Lösungen <br /> für Unternehmen & Privat
+              </h2>
+              <p className="mb-[var(--spacing-lg)]">
+                Computer-Probleme? Netzwerk-Einrichtung? Wir sind Ihre IT-Experten vor Ort.
+                Von der Reparatur Ihres Laptops bis zur Planung komplexer Firmennetzwerke.
+              </p>
+              <ul className="mb-[var(--spacing-xl)] space-y-[var(--spacing-sm)]">
+                <li className="flex items-center gap-[var(--spacing-sm)]">
+                  ✅ <span>Schnelle Fernwartung und Vor-Ort-Service</span>
+                </li>
+                <li className="flex items-center gap-[var(--spacing-sm)]">
+                  ✅ <span>Netzwerk- und Serverplanung</span>
+                </li>
+                <li className="flex items-center gap-[var(--spacing-sm)]">
+                  ✅ <span>Verkauf & Reparatur von Hardware</span>
+                </li>
+              </ul>
+              <Link href="/leistungen" className="btn btn-primary">
+                Zu den IT-Services
+              </Link>
+            </div>
+            <div className="bg-white p-[var(--spacing-md)] rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)] rotate-1 hover:rotate-0 transition-transform duration-500">
+              {/* Placeholder styled as a media frame */}
+              <div className="aspect-video bg-[var(--color-muted)] rounded-[var(--radius-md)] flex flex-col items-center justify-center text-[color:var(--color-muted-foreground)] border-2 border-dashed border-[var(--color-border)]">
+                <span className="text-4xl mb-2">📸</span>
+                <span className="font-medium">IT-Service vor Ort</span>
+              </div>
+              <p className="text-xs text-[color:var(--color-muted-foreground)] text-center mt-[var(--spacing-sm)]">
+                Symbolbild: Unser Team bei der Netzwerk-Installation
+              </p>
+            </div>
+          </div>
+        </Container>
+      </Section>
+
+      {/* USPs / Trust Section */}
+      <Section>
+        <Container>
+          <h2 className="text-center mb-[var(--spacing-2xl)]">Warum TeleNetSystems?</h2>
+          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-[var(--spacing-xl)]">
+            <div className="p-[var(--spacing-lg)] bg-[var(--color-muted)]/50 rounded-[var(--radius-lg)] text-center">
+              <div className="text-[var(--color-primary)] text-4xl font-bold mb-[var(--spacing-xs)]">1976</div>
+              <p className="font-semibold text-[color:var(--color-foreground)]">Gründung</p>
+              <p className="text-sm text-[color:var(--color-muted-foreground)]">Erfahrung seit 50 Jahren</p>
+            </div>
+            <div className="p-[var(--spacing-lg)] bg-[var(--color-muted)]/50 rounded-[var(--radius-lg)] text-center">
+              <div className="text-[var(--color-primary)] text-4xl font-bold mb-[var(--spacing-xs)]">100%</div>
+              <p className="font-semibold text-[color:var(--color-foreground)]">Tirol</p>
+              <p className="text-sm text-[color:var(--color-muted-foreground)]">Regional aus Reutte</p>
+            </div>
+            <div className="p-[var(--spacing-lg)] bg-[var(--color-muted)]/50 rounded-[var(--radius-lg)] text-center">
+              <div className="text-[var(--color-primary)] text-4xl font-bold mb-[var(--spacing-xs)]">24h</div>
+              <p className="font-semibold text-[color:var(--color-foreground)]">Support</p>
+              <p className="text-sm text-[color:var(--color-muted-foreground)]">Störungsdienst</p>
+            </div>
+            <div className="p-[var(--spacing-lg)] bg-[var(--color-muted)]/50 rounded-[var(--radius-lg)] text-center">
+              <div className="text-[var(--color-primary)] text-4xl font-bold mb-[var(--spacing-xs)]">Top</div>
+              <p className="font-semibold text-[color:var(--color-foreground)]">Service</p>
+              <p className="text-sm text-[color:var(--color-muted-foreground)]">Persönlicher Ansprechpartner</p>
+            </div>
+          </div>
+        </Container>
+      </Section>
+
+      {/* Contact CTA */}
+      <Section id="kontakt" className="bg-[var(--color-primary)] text-[color:var(--color-background)]">
+        <Container className="text-center">
+          <h2 className="text-[color:var(--color-background)] mb-[var(--spacing-md)]">
+            Noch Fragen? Wir sind für Sie da.
+          </h2>
+          <p className="text-xl mb-[var(--spacing-xl)] opacity-90">
+            Rufen Sie uns an oder schreiben Sie uns. Wir beraten Sie gerne persönlich.
+          </p>
+          <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>