since3-website/app/layout.tsx

import type { Metadata, Viewport } from "next";

import { site } from "@/modules/shared/config/site";
import { introScript } from "@/modules/shared/lib/intro";
import { CustomCursor } from "@/modules/shared/ui/components/custom-cursor";
import { InlineScript } from "@/modules/shared/ui/components/inline-script";
import { Preloader } from "@/modules/shared/ui/components/preloader";
import { SiteFooter } from "@/modules/shared/ui/components/site-footer";
import { SiteHeader } from "@/modules/shared/ui/components/site-header";
import { SmoothScroll } from "@/modules/shared/ui/components/smooth-scroll";
import { SoundEffects } from "@/modules/shared/ui/components/sound-effects";

import { mono, sans } from "./fonts";
import "./globals.css";
import CookieBanner from "@/modules/shared/ui/components/cookie-consent";

export const metadata: Metadata = {
  metadataBase: new URL(site.url),
  title: {
    default: "since3 – Websites und Software aus Steinfurt",
    template: "%s – since3",
  },
  description: site.description,
  openGraph: {
    type: "website",
    locale: "de_DE",
    siteName: site.name,
    url: site.url,
  },
};

export const viewport: Viewport = {
  themeColor: "#000000",
  colorScheme: "dark",
};

export default function RootLayout({ children }: LayoutProps<"/">) {
  return (
    // The intro script adds a class before hydration
    <html
      lang="de"
      className={`${sans.variable} ${mono.variable} antialiased`}
      suppressHydrationWarning
    >
      <head>
        <InlineScript html={introScript} />
      </head>
      <body data-theme="dark" className="overflow-x-clip">
        <div id="top" />
        <a
          href="#inhalt"
          className="sr-only z-[var(--z-preloader)] rounded-full bg-white px-5 py-3 text-black focus:not-sr-only focus:fixed focus:top-4 focus:left-4"
        >
          Zum Inhalt springen
        </a>

        <Preloader />
        <SmoothScroll />
        <SoundEffects />
        <CustomCursor />
        <SiteHeader />

        <main id="inhalt" tabIndex={-1} className="outline-none">
          {children}
        </main>
        <CookieBanner/>
        <SiteFooter />
      </body>
    </html>
  );
}