import { createScope, Styles } from '../../src' import { theme } from './themes' const { define } = createScope('Landing') const Page = define('Page', { base: 'body', margin: 0, padding: theme('spacing-xl'), minHeight: '100vh', fontFamily: theme('fonts-mono'), background: theme('colors-bg'), color: theme('colors-fg'), }) const Container = define('Container', { maxWidth: 800, margin: '0 auto', }) const Pre = define('Pre', { base: 'pre', fontSize: 14, lineHeight: 1.4, marginBottom: theme('spacing-xl'), color: theme('colors-fg'), whiteSpace: 'pre', borderBottom: '1px solid var(--theme-colors-border)', }) const P = define('P', { base: 'p', fontSize: 16, lineHeight: 1.6, marginBottom: theme('spacing-xl'), color: theme('colors-fgMuted'), }) const LinkSection = define('LinkSection', { marginTop: theme('spacing-xxl'), paddingTop: theme('spacing-xl'), borderTop: `1px solid ${theme('colors-border')}`, }) const Link = define('Link', { base: 'a', display: 'inline-block', marginRight: theme('spacing-xl'), padding: `${theme('spacing-sm')} ${theme('spacing-lg')}`, background: theme('colors-bgElevated'), border: `1px solid ${theme('colors-border')}`, color: theme('colors-fg'), textDecoration: 'none', fontSize: 14, states: { ':hover': { background: theme('colors-bgHover'), borderColor: theme('colors-borderActive'), } } }) export const LandingPage = () => { const themeScript = ` function switchTheme(themeName) { document.body.setAttribute('data-theme', themeName) localStorage.setItem('theme', themeName) } window.switchTheme = switchTheme // Load saved theme or default to dark const savedTheme = localStorage.getItem('theme') || 'dark' document.body.setAttribute('data-theme', savedTheme) ` return ( forge 
{`╔═╝╔═║╔═║╔═╝╔═╝
╔═╝║ ║╔╔╝║ ║╔═╝
╝  ══╝╝ ╝══╝══╝`}

Typed, local, variant-driven CSS. No globals, no selector hell, no inline styles. Built for TSX. Compiles to real CSS.

CSS is hostile to humans at scale. Forge fixes that by making styles local, typed, and composable. Parts replace selectors. Variants replace inline styles. Everything deterministic.

SSR demos → SPA demos → ) }