syntaxbullet/bmp-website-2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(about): rebalance relevance section

Browse Source
This commit is contained in:
syntaxbullet
2026-07-31 18:25:33 +02:00
parent 4bb265dac1
commit 3c28f6ff9c
3 changed files with 178 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/spa/pages/About.tsx
View File

@@ -6,7 +6,7 @@ import HomeWinnersSection, { type HomeWinnersContent } from '@/spa/components/Ho
import TestimonialsSection from '@/spa/components/TestimonialsSection'
import MunichSkylineBg from '@/spa/components/ui/munich-skyline-bg'
import Image from '@/spa/components/ui/UnoptimizedImage'
import { mediaAlt, mediaUrl } from '@/spa/cmsMediaField'
import { mediaAlt, mediaObjectPosition, mediaUrl } from '@/spa/cmsMediaField'
import { useCmsCollection, useCmsRoute, type CmsRouteDoc } from '@/spa/cmsRoute'
import { useIsMobile } from '@/spa/hooks/useIsMobile'
import { Link } from '@/spa/router'
@@ -82,6 +82,7 @@ function HighlightedText({ text, highlight }: { text: string; highlight: string
const About: React.FC = () => {
const isMobile = useIsMobile()
const isRelevanceStacked = useIsMobile(1024)
const cms = (useCmsRoute()?.doc?.about || {}) as AboutCms
const cmsPages = useCmsCollection('pages')
const hero = { ...aboutContent.hero, ...(cms.hero || {}) }
@@ -215,14 +216,22 @@ const About: React.FC = () => {
</div>
</section>
<section id="mittelstand" style={{ overflow: 'hidden' }}>
<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '45% 55%', minHeight: isMobile ? 'auto' : 580 }}>
<div style={{ position: 'relative', overflow: 'hidden', minHeight: isMobile ? 280 : undefined }}>
<section id="mittelstand" data-testid="relevance-section" style={{ overflow: 'hidden' }}>
<div
data-testid="relevance-layout"
data-layout={isRelevanceStacked ? 'stacked' : 'split'}
style={{ display: 'grid', gridTemplateColumns: isRelevanceStacked ? '1fr' : '55% 45%', minHeight: isRelevanceStacked ? 'auto' : 580 }}
>
<div
data-testid="relevance-image-panel"
style={{ position: 'relative', overflow: 'hidden', minHeight: isRelevanceStacked ? (isMobile ? 280 : 420) : undefined }}
>
<Image
unoptimized
data-testid="relevance-image"
src={mediaUrl(mittelstand.image, `/images/${aboutContent.mittelstand.imageFilename}`)}
alt={mediaAlt(mittelstand.image, fallbackText(mittelstand.imageAlt, aboutContent.mittelstand.imageAlt))}
style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', display: 'block' }}
style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: mediaObjectPosition(mittelstand.image), display: 'block' }}
/>
<div style={{ position: 'absolute', inset: 0, background: isMobile
? 'linear-gradient(to top, rgba(3,9,58,0.94) 0%, rgba(3,9,58,0.55) 38%, rgba(3,9,58,0.12) 72%, transparent 100%), linear-gradient(to right, rgba(3,9,58,0.5) 0%, transparent 55%)'
@@ -242,21 +251,26 @@ const About: React.FC = () => {
)}
</div>
<div style={{ background: NAVY, padding: isMobile ? '32px 24px 40px' : '88px 80px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
{!isMobile && (
<>
<span style={{ fontFamily: FF, fontSize: 10, color: '#EFBF04', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 20 }}>{fallbackText(mittelstand.eyebrow, aboutContent.mittelstand.eyebrow)}</span>
<h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 20px' }}>
<Lines text={fallbackText(mittelstand.heading, aboutContent.mittelstand.heading)} />
</h2>
</>
)}
<div style={{ width: 36, height: 2, background: GOLD, marginBottom: 28 }} />
{paragraphs(mittelstand.body, aboutContent.mittelstand.body).map((text, index, arr) => (
<p key={index} className="type-body text-role-inverse-secondary" style={{ maxWidth: 440, marginBottom: index === arr.length - 1 ? 40 : 16 }}>
{text}
</p>
))}
<div
data-testid="relevance-copy-panel"
style={{ background: NAVY, padding: isMobile ? '32px 24px 40px' : isRelevanceStacked ? '56px 48px' : '88px 64px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}
>
<div data-testid="relevance-copy" style={{ width: '100%', maxWidth: 520, margin: '0 auto' }}>
{!isMobile && (
<>
<span style={{ fontFamily: FF, fontSize: 10, color: '#EFBF04', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 20 }}>{fallbackText(mittelstand.eyebrow, aboutContent.mittelstand.eyebrow)}</span>
<h2 className="type-section-title text-role-inverse" style={{ textTransform: 'uppercase', margin: '0 0 20px' }}>
<Lines text={fallbackText(mittelstand.heading, aboutContent.mittelstand.heading)} />
</h2>
</>
)}
<div style={{ width: 36, height: 2, background: GOLD, marginBottom: 28 }} />
{paragraphs(mittelstand.body, aboutContent.mittelstand.body).map((text, index, arr) => (
<p key={index} className="type-body text-role-inverse-secondary" style={{ marginBottom: index === arr.length - 1 ? (isMobile ? 0 : 40) : 16 }}>
{text}
</p>
))}
</div>
</div>
</div>
</section>