chore: germantax customer project
This commit is contained in:
e2e
267
apps/app/src/pages/index.tsx
Normal file
267
apps/app/src/pages/index.tsx
Normal file
@@ -0,0 +1,267 @@
|
||||
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,
|
||||
})
|
||||
Reference in New Issue
Block a user