Marketing route group, layout, typography setup

2025-11-15 22:13:31 +01:00
parent fa7e355bcc
commit b1cfb339a2
5 changed files with 89 additions and 74 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,15 +1,30 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Crimson_Text, Inter, JetBrains_Mono } from "next/font/google";
 import "./globals.css";

-const geistSans = Geist({
-  variable: "--font-geist-sans",
+// Serif font voor long-form content (manifesto)
+const crimsonText = Crimson_Text({
+  variable: "--font-serif",
  subsets: ["latin"],
+  weight: ["400", "600"],
+  display: "swap",
+  preload: true,
 });

-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+// Sans-serif font voor UI, nav, metadata
+const inter = Inter({
+  variable: "--font-sans",
  subsets: ["latin"],
+  display: "swap",
+  preload: true,
+});
+
+// Mono font voor tech details, numbers
+const jetBrainsMono = JetBrains_Mono({
+  variable: "--font-mono",
+  subsets: ["latin"],
+  display: "swap",
+  preload: true,
 });

 export const metadata: Metadata = {
@@ -25,7 +40,7 @@ export default function RootLayout({
  return (
    <html lang="nl">
      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${crimsonText.variable} ${inter.variable} ${jetBrainsMono.variable} antialiased`}
      >
        {children}
      </body>