fix(home): rebalance application form split
This commit is contained in:
@@ -42,12 +42,17 @@ export function ApplicationFormSection({ source }: { source: NewsletterSource })
|
||||
const newsletterPhase = newsletterPhaseForApplicationPhase(activeApplicationPhase)
|
||||
const benefits = fallbackArray<NewsletterBenefit>(section.benefits, homeContent.application.benefits)
|
||||
const finalBenefits = showApplicationForm ? benefits : newsletterCopy.benefits
|
||||
const desktopGridTemplateColumns = source === 'homepage' ? '5fr 1px 7fr' : '4fr 1px 8fr'
|
||||
|
||||
return (
|
||||
<section style={{ background: '#24366A', position: 'relative', overflow: 'hidden', height: isMobile ? 'auto' : showApplicationForm ? 'calc(100vh - 60px)' : 'auto', minHeight: isMobile ? undefined : showApplicationForm ? undefined : 560, display: 'flex', flexDirection: 'column' }} id="bewerben">
|
||||
<div style={{ position: 'absolute', left: -120, top: '50%', transform: 'translateY(-50%)', width: 600, height: 600, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%)', pointerEvents: 'none' }} />
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '4fr 1px 8fr', position: 'relative', flex: isMobile ? 'none' : 1, minHeight: 0, overflow: 'hidden' }}>
|
||||
<div
|
||||
data-testid="application-form-layout"
|
||||
data-source={source}
|
||||
style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : desktopGridTemplateColumns, position: 'relative', flex: isMobile ? 'none' : 1, minHeight: 0, overflow: 'hidden' }}
|
||||
>
|
||||
<div style={{ padding: isMobile ? '32px 24px 24px' : '36px 36px 32px 52px', display: 'flex', flexDirection: 'column', justifyContent: 'center', overflow: 'hidden' }}>
|
||||
<span style={{ fontFamily: FF, fontSize: 10, color: '#EFBF04', textTransform: 'uppercase', letterSpacing: '0.36em', fontWeight: 700, display: 'block', marginBottom: 16, opacity: 0.8 }}>{showApplicationForm ? fallbackText(section.eyebrow, homeContent.application.eyebrow) : newsletterCopy.eyebrow}</span>
|
||||
<h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', marginBottom: 16 }}>
|
||||
|
||||
Reference in New Issue
Block a user