feat: Implement initial website structure, core pages, and layout components, including a redesigned homepage.

2026-02-03 21:41:03 +01:00
parent 1cc779e89c
commit 578bb8edb3
13 changed files with 1749 additions and 80 deletions
@@ -1,98 +1,64 @@
 import type { Metadata, Viewport } from "next";
+import { Inter } from "next/font/google";
+import { Header } from "@/components/layout/Header";
+import { Footer } from "@/components/layout/Footer";
 import "@/theme/globals.css";
+import "@/theme/stylesheet.css";

-/**
- * Root Layout
- *
- * This layout is designed to work with the 9-category parameter system.
- * It supports:
- * - Dynamic locale (from spec.client.locale or content.defaultLanguage)
- * - Google Fonts loading (from spec.brand.fonts)
- * - Scroll behavior (from spec.interaction.scrollBehavior)
- * - Meta tags for SEO
- *
- * CUSTOMIZATION INSTRUCTIONS:
- * 1. Update `lang` attribute based on spec.client.locale (e.g., "de", "de-AT", "en")
- * 2. Add Google Fonts import based on spec.brand.fonts.heading.family and body.family
- * 3. Set scroll-behavior in globals.css based on spec.interaction.scrollBehavior
- * 4. Update metadata based on spec.brand and spec.seo
- */
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+  display: "swap",
+});

-// TODO: Update these values based on ProjectSpec.json
-// - title: from spec.brand.name or spec.meta.projectName
-// - description: from spec.brand.description
-// - keywords: from spec.seo.primaryKeywords
 export const metadata: Metadata = {
-  title: "Website",
-  description: "Generated website",
+  title: {
+    default: "TeleNetSystems | Telekom & IT aus Tirol",
+    template: "%s | TeleNetSystems",
+  },
+  description:
+    "Ihr regionaler Telekom- und IT-Partner in Reutte, Tirol. Fernsehen, Internet, Telefonie und IT-Services – zuverlässig, persönlich, seit 1976.",
+  keywords: [
+    "Telekommunikation Tirol",
+    "IT-Dienstleister Reutte",
+    "Highspeed-Internet Österreich",
+    "Glasfaser Tirol",
+    "TeleNetSystems",
+    "regionaler IT-Service",
+    "Kabel-TV Anbieter",
+  ],
  robots: {
    index: true,
    follow: true,
  },
-  // Open Graph tags - update based on spec
  openGraph: {
    type: "website",
-    locale: "de_DE",
-    // title, description, images will be set per project
+    locale: "de_AT",
+    siteName: "TeleNetSystems",
+    title: "TeleNetSystems | Telekom & IT aus Tirol",
+    description:
+      "Ihr regionaler Telekom- und IT-Partner in Reutte, Tirol. Fernsehen, Internet, Telefonie und IT-Services.",
  },
 };

 export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
-  // TODO: Update themeColor from spec.brand.colors.primary or design_tokens
-  themeColor: "#ffffff",
+  themeColor: "#f39210",
 };

-/**
- * Font Loading
- *
- * To add Google Fonts based on spec.brand.fonts:
- *
- * 1. Import from next/font/google:
- *    import { Inter, Playfair_Display } from "next/font/google";
- *
- * 2. Configure fonts:
- *    const headingFont = Playfair_Display({
- *      subsets: ["latin"],
- *      variable: "--font-heading",
- *      display: "swap",
- *    });
- *
- *    const bodyFont = Inter({
- *      subsets: ["latin"],
- *      variable: "--font-body",
- *      display: "swap",
- *    });
- *
- * 3. Apply to html element:
- *    <html lang="de" className={`${headingFont.variable} ${bodyFont.variable}`}>
- *
- * 4. Update globals.css to use the variables:
- *    --font-sans: var(--font-body), system-ui, sans-serif;
- *    --font-heading: var(--font-heading), Georgia, serif;
- */
-
 export default function RootLayout({
  children,
 }: Readonly<{
  children: React.ReactNode;
 }>) {
-  // TODO: Update lang attribute based on spec.client.locale
-  // Examples: "de", "de-AT", "de-CH", "en", "en-US"
-  const locale = "de";
-
  return (
-    <html lang={locale}>
-      {/*
-        Scroll Behavior:
-        - If spec.interaction.scrollBehavior === "smooth", add className="scroll-smooth"
-        - Or set scroll-behavior: smooth in globals.css on html element
-
-        Example with smooth scrolling:
-        <html lang={locale} className="scroll-smooth">
-      */}
-      <body>{children}</body>
+    <html lang="de-AT" className={inter.variable}>
+      <body>
+        <Header />
+        {children}
+        <Footer />
+      </body>
    </html>
  );
 }