import { define, Styles } from '../../src'
const Page = define('LandingPage', {
base: 'body',
margin: 0,
padding: 0,
minHeight: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
})
const Container = define('LandingContainer', {
textAlign: 'center',
color: 'white',
})
const Title = define('LandingTitle', {
base: 'h1',
fontSize: 48,
fontWeight: 700,
marginBottom: 50,
color: 'white',
})
const Subtitle = define('LandingSubtitle', {
base: 'p',
fontSize: 20,
marginBottom: 48,
color: 'rgba(255, 255, 255, 0.9)',
})
const ButtonGroup = define('LandingButtonGroup', {
display: 'flex',
gap: 50,
justifyContent: 'center',
flexWrap: 'wrap',
})
const ChoiceCard = define('LandingChoiceCard', {
base: 'a',
display: 'block',
padding: 40,
background: 'white',
borderRadius: 16,
textDecoration: 'none',
color: '#111827',
boxShadow: '0 10px 30px rgba(0, 0, 0, 0.2)',
transition: 'all 0.3s ease',
minWidth: 250,
states: {
':hover': {
transform: 'translateY(-8px)',
boxShadow: '0 20px 40px rgba(0, 0, 0, 0.3)',
}
},
parts: {
Icon: {
fontSize: 48,
marginBottom: 16,
},
Title: {
base: 'h2',
fontSize: 24,
fontWeight: 600,
marginBottom: 8,
color: '#111827',
}
},
render({ props, parts: { Root, Icon, Title, Description } }) {
return (
{props.icon}
{props.title}
)
}
})
export const LandingPage = () => (
Forge - Choose Your Rendering Mode
Welcome to Forge
)