268 lines
11 KiB
TypeScript
268 lines
11 KiB
TypeScript
import { createFileRoute, Link } from '@tanstack/react-router'
|
|
import { Box, Button, Group, SimpleGrid, Text, Title } from '@pikku/mantine/core'
|
|
import { useLocale } from '@/i18n/config'
|
|
import { m } from '@/i18n/messages'
|
|
import { asI18n } from '@pikku/react'
|
|
|
|
function QSeal({ size = 30, fontSize = 17, bg = '#1F5641', color = '#FBFAF7', radius = 7 }: {
|
|
size?: number; fontSize?: number; bg?: string; color?: string; radius?: number
|
|
}) {
|
|
return (
|
|
<span style={{
|
|
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
|
|
width: size, height: size, borderRadius: radius,
|
|
background: bg, color, flexShrink: 0,
|
|
fontFamily: "'Source Serif 4', Georgia, serif",
|
|
fontWeight: 600, fontSize, lineHeight: 1,
|
|
}}>
|
|
Q
|
|
</span>
|
|
)
|
|
}
|
|
|
|
function LandingNav() {
|
|
return (
|
|
<Box style={{
|
|
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
|
padding: '22px 48px', borderBottom: '1px solid rgba(255,255,255,.07)',
|
|
}}>
|
|
<Group gap={11}>
|
|
<QSeal bg="#2E6F54" />
|
|
<Text style={{ fontFamily: "'Source Serif 4', Georgia, serif", fontSize: 20, fontWeight: 600, color: '#F4F1E9', letterSpacing: '-.01em' }}>
|
|
{m.common_brand_name()}
|
|
</Text>
|
|
</Group>
|
|
<Group gap={34}>
|
|
<Text size="sm" style={{ color: 'rgba(244,241,233,.62)' }}>{m.landing_nav_product()}</Text>
|
|
<Text size="sm" style={{ color: 'rgba(244,241,233,.62)' }}>{m.landing_nav_templates()}</Text>
|
|
<Text size="sm" style={{ color: 'rgba(244,241,233,.62)' }}>{m.landing_nav_pricing()}</Text>
|
|
<Link to="/login" style={{ textDecoration: 'none' }}>
|
|
<Text size="sm" style={{ color: 'rgba(244,241,233,.62)' }}>{m.app_nav_sign_in()}</Text>
|
|
</Link>
|
|
<Link to="/signup" style={{ textDecoration: 'none' }}>
|
|
<Box style={{
|
|
fontSize: 14, fontWeight: 600, color: '#0E1F18',
|
|
background: '#EBC57A', padding: '9px 18px', borderRadius: 6,
|
|
cursor: 'pointer',
|
|
}}>
|
|
{m.landing_nav_cta()}
|
|
</Box>
|
|
</Link>
|
|
</Group>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
function FloatingResolutionCard() {
|
|
return (
|
|
<Box style={{
|
|
background: '#FBFAF7', borderRadius: 4,
|
|
boxShadow: '0 30px 80px -24px rgba(0,0,0,.5)',
|
|
transform: 'rotate(.6deg)', overflow: 'hidden',
|
|
}}>
|
|
<Box style={{
|
|
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
|
padding: '18px 22px', borderBottom: '1px solid #E6E3DB',
|
|
}}>
|
|
<Group gap={9}>
|
|
<QSeal size={22} fontSize={12} radius={5} />
|
|
<Text style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: '#8A938C', letterSpacing: '.04em' }}>
|
|
{asI18n('BESCHLUSS · 2026-014')}
|
|
</Text>
|
|
</Group>
|
|
<Box style={{
|
|
fontFamily: "'IBM Plex Mono', monospace", fontWeight: 600,
|
|
fontSize: 10, letterSpacing: '.18em', textTransform: 'uppercase',
|
|
color: '#1F5641', background: '#E7F0EA', padding: '4px 9px', borderRadius: 20,
|
|
}}>
|
|
Published
|
|
</Box>
|
|
</Box>
|
|
<Box style={{ padding: '24px 24px 26px' }}>
|
|
<Text style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, letterSpacing: '.18em', textTransform: 'uppercase', color: '#A9B0A6', marginBottom: 8 }}>
|
|
{asI18n('Profit Distribution')}
|
|
</Text>
|
|
<Text style={{ fontFamily: "'Source Serif 4', Georgia, serif", fontSize: 21, fontWeight: 600, color: '#16201B', lineHeight: 1.25, marginBottom: 20 }}>
|
|
{asI18n('Resolution on the appropriation of the 2025 annual result')}
|
|
</Text>
|
|
{([
|
|
['Distributable profit', '€ 248,500.00'],
|
|
['Per share (25,000)', '€ 9.94'],
|
|
['Record date', '31 May 2026'],
|
|
] as [string, string][]).map(([label, value]) => (
|
|
<Box key={label} style={{ display: 'flex', justifyContent: 'space-between', padding: '11px 0', borderTop: '1px solid #EFEDE6' }}>
|
|
<Text size="sm" style={{ color: '#55615A' }}>{asI18n(label)}</Text>
|
|
<Text style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 13, fontWeight: 600, color: '#16201B' }}>{asI18n(value)}</Text>
|
|
</Box>
|
|
))}
|
|
<Box style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 22, paddingTop: 18, borderTop: '1px solid #EFEDE6' }}>
|
|
<Box style={{
|
|
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
|
|
width: 40, height: 40, borderRadius: '50%', border: '1.5px solid #B08A3E',
|
|
color: '#B08A3E', fontFamily: "'IBM Plex Mono', monospace", fontSize: 9, textAlign: 'center', lineHeight: 1.1,
|
|
}}>
|
|
SIG<br />NED
|
|
</Box>
|
|
<Box>
|
|
<Text size="xs" fw={600} style={{ color: '#16201B' }}>{asI18n('M. Bauer · Managing Director')}</Text>
|
|
<Text style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 11, color: '#8A938C' }}>{asI18n('signed 02 Jun 2026, 14:21')}</Text>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
const FEATURES = [
|
|
{ num: '01', titleKey: 'landing_feature1_title' as const, descKey: 'landing_feature1_desc' as const },
|
|
{ num: '02', titleKey: 'landing_feature2_title' as const, descKey: 'landing_feature2_desc' as const },
|
|
{ num: '03', titleKey: 'landing_feature3_title' as const, descKey: 'landing_feature3_desc' as const },
|
|
{ num: '04', titleKey: 'landing_feature4_title' as const, descKey: 'landing_feature4_desc' as const },
|
|
]
|
|
|
|
function IndexPage() {
|
|
useLocale()
|
|
return (
|
|
<Box style={{ background: '#0E1F18', minHeight: '100vh' }}>
|
|
<LandingNav />
|
|
|
|
{/* Hero */}
|
|
<Box style={{
|
|
position: 'relative', padding: '84px 48px 76px',
|
|
display: 'grid', gridTemplateColumns: '1.05fr .95fr', gap: 56, alignItems: 'center',
|
|
}}>
|
|
<Box style={{
|
|
position: 'absolute', inset: 0,
|
|
background: 'radial-gradient(900px 460px at 16% 18%, rgba(46,111,84,.30), transparent 70%)',
|
|
pointerEvents: 'none',
|
|
}} />
|
|
|
|
{/* Left column */}
|
|
<Box style={{ position: 'relative' }}>
|
|
<Box style={{
|
|
display: 'inline-flex', alignItems: 'center', gap: 9,
|
|
padding: '7px 14px', border: '1px solid rgba(235,197,122,.34)',
|
|
borderRadius: 30, marginBottom: 28,
|
|
}}>
|
|
<Box style={{ width: 5, height: 5, borderRadius: '50%', background: '#EBC57A', flexShrink: 0 }} />
|
|
<Text style={{
|
|
fontFamily: "'IBM Plex Mono', monospace", fontWeight: 600,
|
|
fontSize: 11, letterSpacing: '.18em', textTransform: 'uppercase', color: '#EBC57A',
|
|
}}>
|
|
{m.landing_eyebrow()}
|
|
</Text>
|
|
</Box>
|
|
|
|
<Title style={{
|
|
margin: 0, fontFamily: "'Source Serif 4', Georgia, serif",
|
|
fontWeight: 380, fontSize: 'clamp(2.5rem, 4vw, 3.875rem)',
|
|
lineHeight: 1.06, letterSpacing: '-.025em', color: '#F4F1E9',
|
|
}}>
|
|
{m.landing_headline_plain()}<br />
|
|
<span style={{ fontStyle: 'italic', color: '#8FCBA9' }}>
|
|
{m.landing_headline_accent()}
|
|
</span>
|
|
</Title>
|
|
|
|
<Text style={{ margin: '28px 0 0', maxWidth: 460, fontSize: 17, lineHeight: 1.7, color: 'rgba(244,241,233,.66)' }}>
|
|
{m.landing_subline()}
|
|
</Text>
|
|
|
|
<Group gap={13} mt={36}>
|
|
<Button
|
|
component={Link}
|
|
to="/signup"
|
|
style={{
|
|
fontSize: 15, fontWeight: 600, color: '#0E1F18',
|
|
background: '#EBC57A', border: 'none',
|
|
padding: '13px 24px', borderRadius: 7, height: 'auto',
|
|
}}
|
|
>
|
|
{m.landing_cta_primary()}
|
|
</Button>
|
|
<Button
|
|
component={Link}
|
|
to="/login"
|
|
variant="outline"
|
|
style={{
|
|
fontSize: 15, fontWeight: 500, color: '#F4F1E9',
|
|
border: '1px solid rgba(244,241,233,.26)',
|
|
padding: '13px 22px', borderRadius: 7, height: 'auto',
|
|
background: 'transparent',
|
|
}}
|
|
>
|
|
{m.landing_cta_secondary()}
|
|
</Button>
|
|
</Group>
|
|
|
|
{/* Stats */}
|
|
<Group gap={0} mt={44} align="stretch">
|
|
{[
|
|
{ value: m.landing_stat1_value(), label: m.landing_stat1_label() },
|
|
{ value: m.landing_stat2_value(), label: m.landing_stat2_label() },
|
|
{ value: m.landing_stat3_value(), label: m.landing_stat3_label() },
|
|
].map(({ value, label }, i) => (
|
|
<Group key={String(value)} gap={0} align="stretch">
|
|
{i > 0 && (
|
|
<Box style={{ width: 1, background: 'rgba(244,241,233,.12)', marginInline: 28, alignSelf: 'stretch' }} />
|
|
)}
|
|
<Box>
|
|
<Text style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 24, fontWeight: 600, color: '#F4F1E9' }}>
|
|
{value}
|
|
</Text>
|
|
<Text size="xs" style={{ color: 'rgba(244,241,233,.5)', marginTop: 3 }}>{label}</Text>
|
|
</Box>
|
|
</Group>
|
|
))}
|
|
</Group>
|
|
</Box>
|
|
|
|
{/* Right column */}
|
|
<Box style={{ position: 'relative' }}>
|
|
<FloatingResolutionCard />
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Feature strip */}
|
|
<Box style={{ borderTop: '1px solid rgba(255,255,255,.07)', padding: '54px 48px 64px' }}>
|
|
<Text style={{
|
|
fontFamily: "'IBM Plex Mono', monospace", fontWeight: 600,
|
|
fontSize: 11, letterSpacing: '.18em', textTransform: 'uppercase',
|
|
color: 'rgba(244,241,233,.42)', textAlign: 'center', marginBottom: 38,
|
|
}}>
|
|
{m.landing_features_eyebrow()}
|
|
</Text>
|
|
<SimpleGrid cols={{ base: 1, sm: 2, md: 4 }} spacing="xl">
|
|
{FEATURES.map(({ num, titleKey, descKey }) => (
|
|
<Box key={num}>
|
|
<Text style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 13, color: '#8FCBA9', marginBottom: 14 }}>
|
|
{asI18n(num)}
|
|
</Text>
|
|
<Text style={{ fontFamily: "'Source Serif 4', Georgia, serif", fontSize: 18, fontWeight: 600, color: '#F4F1E9', marginBottom: 8 }}>
|
|
{m[titleKey]()}
|
|
</Text>
|
|
<Text size="sm" style={{ lineHeight: 1.65, color: 'rgba(244,241,233,.55)' }}>
|
|
{m[descKey]()}
|
|
</Text>
|
|
</Box>
|
|
))}
|
|
</SimpleGrid>
|
|
</Box>
|
|
|
|
{/* Footer */}
|
|
<Box style={{ padding: '20px 48px', borderTop: '1px solid rgba(255,255,255,.06)', textAlign: 'center' }}>
|
|
<Text style={{
|
|
fontFamily: "'IBM Plex Mono', monospace", fontSize: 11,
|
|
color: 'rgba(244,241,233,.32)', letterSpacing: '.06em',
|
|
}}>
|
|
{m.landing_footer()}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
export const Route = createFileRoute('/')({
|
|
component: IndexPage,
|
|
})
|