diff --git a/app/(marketing)/layout.tsx b/app/(marketing)/layout.tsx new file mode 100644 index 0000000..8a54e9b --- /dev/null +++ b/app/(marketing)/layout.tsx @@ -0,0 +1,22 @@ +/** + * Marketing Layout + * + * Full-width layout without sidebar for marketing pages. + * Navigation will be added in E1.M5.S1. + */ + +import type { ReactNode } from 'react' + +interface MarketingLayoutProps { + children: ReactNode +} + +export default function MarketingLayout({ children }: MarketingLayoutProps) { + return ( +
+ {/* Navigation will be added in E1.M5.S1 */} + {children} +
+ ) +} + diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx new file mode 100644 index 0000000..6b1c9b7 --- /dev/null +++ b/app/(marketing)/page.tsx @@ -0,0 +1,22 @@ +/** + * Manifesto Homepage + * + * Main landing page for the AI Speedrun manifesto website. + * This page will display the long-form manifesto content. + */ + +export default function ManifestoPage() { + return ( +
+
+

+ Manifesto Page +

+

+ Marketing route group is working. Content will be loaded here. +

+
+
+ ) +} + diff --git a/app/globals.css b/app/globals.css index 563cdad..b797eff 100644 --- a/app/globals.css +++ b/app/globals.css @@ -75,9 +75,17 @@ --shadow-md: 0 2px 6px rgba(15, 23, 42, 0.08); --shadow-lg: 0 8px 20px rgba(15, 23, 42, 0.10); - /* Fonts */ - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); + /* Fonts (injected by Next.js font loader) */ + /* --font-serif, --font-sans, --font-mono are available via className in layout.tsx */ + + /* Typography Scale (Manifesto) */ + --text-hero: clamp(2.5rem, 6vw, 4rem); /* Quote */ + --text-h1: clamp(2rem, 5vw, 3rem); /* Section headings */ + --text-h2: clamp(1.5rem, 4vw, 2.5rem); /* Subsections */ + --text-body: 1.25rem; /* Content */ + --text-small: 0.875rem; /* Metadata */ + --line-height-tight: 1.2; /* Headings */ + --line-height-relaxed: 1.8; /* Body */ --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.129 0.042 264.695); @@ -158,6 +166,19 @@ body { font-family: var(--font-sans), system-ui, -apple-system, sans-serif; } +/* Typography utilities voor manifesto */ +.font-serif { + font-family: var(--font-serif), Georgia, serif; +} + +.font-sans { + font-family: var(--font-sans), system-ui, -apple-system, sans-serif; +} + +.font-mono { + font-family: var(--font-mono), 'Courier New', monospace; +} + /* Focus styles (toegankelijkheid) */ *:focus-visible { outline: 2px solid var(--color-brand); diff --git a/app/layout.tsx b/app/layout.tsx index b04a6f7..e4065f6 100644 --- 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 ( {children} diff --git a/app/page.tsx b/app/page.tsx deleted file mode 100644 index 295f8fd..0000000 --- a/app/page.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import Image from "next/image"; - -export default function Home() { - return ( -
-
- Next.js logo -
-

- To get started, edit the page.tsx file. -

-

- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -

-
-
- - Vercel logomark - Deploy Now - - - Documentation - -
-
-
- ); -}