import type { Metadata, Viewport } from "next"; import "@/theme/globals.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 */ // 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", 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 }, }; export const viewport: Viewport = { width: "device-width", initialScale: 1, // TODO: Update themeColor from spec.brand.colors.primary or design_tokens themeColor: "#ffffff", }; /** * 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: * * * 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 ( {/* 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: */} {children} ); }