120 lines
2.3 KiB
TypeScript
120 lines
2.3 KiB
TypeScript
import { createScope, Styles } from '../../src'
|
|
|
|
const { define } = createScope('Landing')
|
|
|
|
const Page = define('Page', {
|
|
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('Container', {
|
|
textAlign: 'center',
|
|
color: 'white',
|
|
})
|
|
|
|
const Title = define('Title', {
|
|
base: 'h1',
|
|
|
|
fontSize: 48,
|
|
fontWeight: 700,
|
|
marginBottom: 50,
|
|
color: 'white',
|
|
})
|
|
|
|
const Subtitle = define('Subtitle', {
|
|
base: 'p',
|
|
|
|
fontSize: 20,
|
|
marginBottom: 48,
|
|
color: 'rgba(255, 255, 255, 0.9)',
|
|
})
|
|
|
|
const ButtonGroup = define('ButtonGroup', {
|
|
display: 'flex',
|
|
gap: 50,
|
|
justifyContent: 'center',
|
|
flexWrap: 'wrap',
|
|
})
|
|
|
|
const ChoiceCard = define('ChoiceCard', {
|
|
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 (
|
|
<Root href={props.href}>
|
|
<Icon>{props.icon}</Icon>
|
|
<Title>{props.title}</Title>
|
|
</Root>
|
|
)
|
|
}
|
|
})
|
|
|
|
export const LandingPage = () => (
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Forge - Choose Your Rendering Mode</title>
|
|
<Styles />
|
|
</head>
|
|
<Page>
|
|
<Container>
|
|
<Title>Welcome to Forge</Title>
|
|
|
|
<ButtonGroup>
|
|
<ChoiceCard
|
|
href="/ssr"
|
|
icon="🖥️"
|
|
title="SSR Examples"
|
|
/>
|
|
|
|
<ChoiceCard
|
|
href="/spa"
|
|
icon="⚡"
|
|
title="SPA Examples"
|
|
/>
|
|
</ButtonGroup>
|
|
</Container>
|
|
</Page>
|
|
</html>
|
|
)
|