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

feat: update WegZurAuszeichnungSection styles for improved mobile experience and enhance process timeline scrolling behavior

Browse Source
This commit is contained in:
syntaxbullet
2026-07-13 18:23:19 +02:00
parent 9ebe544987
commit 234da4cdac
2 changed files with 40 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/spa/components/WegZurAuszeichnungSection.tsx
View File

@@ -14,7 +14,6 @@ const FF = '"IBM Plex Sans", sans-serif';
const FB = '"Inter", sans-serif';
const NAVY = '#111D55';
const GOLD = '#EFBF04';
const CARD_BACKGROUND = '#FFF8E1';
type ProcessContent = Partial<typeof participationContent.process>;
@@ -44,14 +43,14 @@ export default function WegZurAuszeichnungSection({ content }: { content?: Proce
// ── MOBILE: stacked vertical list (no scroll-jack, no horizontal overflow) ──
if (isMobile) {
return (
<section id="schritte" style={{ background: GOLD, padding: '56px 22px' }}>
<section id="schritte" style={{ background: NAVY, padding: '56px 22px' }}>
{/* Section header */}
<div style={{ marginBottom: 36 }}>
<span style={{ fontFamily: FF, fontSize: 10, color: 'rgba(17,29,85,0.72)', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 12 }}>{fallbackText(section.eyebrow, participationContent.process.eyebrow)}</span>
<h2 style={{ fontFamily: FF, fontSize: 'clamp(1.9rem, 8vw, 2.6rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.05, margin: '0 0 16px' }}>
<span style={{ fontFamily: FF, fontSize: 10, color: GOLD, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 12 }}>{fallbackText(section.eyebrow, participationContent.process.eyebrow)}</span>
<h2 style={{ fontFamily: FF, fontSize: 'clamp(1.9rem, 8vw, 2.6rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.05, margin: '0 0 16px' }}>
<Lines text={fallbackText(section.heading, participationContent.process.heading)} />
</h2>
<p style={{ fontFamily: FB, fontSize: 15, color: 'rgba(16,24,40,0.68)', lineHeight: 1.7, margin: 0 }}>
<p style={{ fontFamily: FB, fontSize: 15, color: 'rgba(255,255,255,0.65)', lineHeight: 1.7, margin: 0 }}>
{fallbackText(section.description, participationContent.process.description)}
</p>
</div>
@@ -61,29 +60,29 @@ export default function WegZurAuszeichnungSection({ content }: { content?: Proce
{steps.map((item, index) => {
const Icon = ICONS[item.icon as keyof typeof ICONS] || FileText;
return (
<div key={`${item.step}-${index}`} style={{ border: '1px solid rgba(17,29,85,0.16)', background: CARD_BACKGROUND, padding: '24px 22px' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
<div style={{ width: 44, height: 44, border: '1px solid rgba(17,29,85,0.22)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
<Icon size={18} style={{ color: NAVY }} strokeWidth={1.5} />
<div key={`${item.step}-${index}`} style={{ border: '1px solid rgba(239,191,4,0.25)', background: NAVY, padding: '18px' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
<div style={{ width: 44, height: 44, border: '1px solid rgba(239,191,4,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
<Icon size={18} style={{ color: GOLD }} strokeWidth={1.5} />
</div>
<div>
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
<span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, color: 'rgba(17,29,85,0.78)', letterSpacing: '0.18em', textTransform: 'uppercase' }}>{stepPrefix} {fallbackText(item.step, '')}</span>
<span style={{ width: 1, height: 11, background: 'rgba(17,29,85,0.18)' }} />
<span style={{ fontFamily: FF, fontSize: 10, color: 'rgba(17,29,85,0.62)', letterSpacing: '0.06em' }}>{fallbackText(item.date, '')}</span>
<span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, color: GOLD, letterSpacing: '0.18em', textTransform: 'uppercase' }}>{stepPrefix} {fallbackText(item.step, '')}</span>
<span style={{ width: 1, height: 11, background: 'rgba(255,255,255,0.2)' }} />
<span style={{ fontFamily: FF, fontSize: 10, color: 'rgba(255,255,255,0.62)', letterSpacing: '0.06em' }}>{fallbackText(item.date, '')}</span>
</div>
<h3 style={{ fontFamily: FF, fontSize: '1.35rem', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.1, margin: 0 }}>
<h3 style={{ fontFamily: FF, fontSize: '1.35rem', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.1, margin: 0 }}>
{fallbackText(item.title, '')}
</h3>
</div>
</div>
<p style={{ fontFamily: FB, fontSize: 17, color: 'rgba(16,24,40,0.68)', lineHeight: 1.7, margin: 0 }}>
<p style={{ fontFamily: FB, fontSize: 17, color: 'rgba(255,255,255,0.68)', lineHeight: 1.7, margin: 0 }}>
{fallbackText(item.desc, '')}
</p>
{/* Step progress indicator */}
<div style={{ display: 'flex', gap: 4, marginTop: 20 }}>
<div style={{ display: 'flex', gap: 4, marginTop: 16 }}>
{steps.map((_, i) => (
<div key={i} style={{ height: 2, flex: i === index ? 2 : 1, background: i === index ? GOLD : 'rgba(17,29,85,0.12)' }} />
<div key={i} style={{ height: 2, flex: i === index ? 2 : 1, background: i === index ? GOLD : 'rgba(255,255,255,0.1)' }} />
))}
</div>
</div>
@@ -95,18 +94,18 @@ export default function WegZurAuszeichnungSection({ content }: { content?: Proce
}
return (
<ContainerScroll id="schritte" className="h-[380vh]" style={{ background: GOLD }}>
<ContainerScroll id="schritte" className="h-[300vh]" style={{ background: NAVY }}>
<ContainerSticky className="top-0 h-screen flex flex-col">
{/* Section header */}
<div style={{ padding: '56px 80px 40px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'flex-end', borderBottom: '1px solid rgba(17,29,85,0.14)', flexShrink: 0 }}>
<div style={{ padding: '56px 80px 40px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'flex-end', borderBottom: '1px solid rgba(255,255,255,0.07)', flexShrink: 0 }}>
<div>
<span style={{ fontFamily: FF, fontSize: 10, color: 'rgba(17,29,85,0.72)', textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 14 }}>{fallbackText(section.eyebrow, participationContent.process.eyebrow)}</span>
<h2 style={{ fontFamily: FF, fontSize: 'clamp(1.8rem, 3vw, 2.8rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.03, margin: 0 }}>
<span style={{ fontFamily: FF, fontSize: 10, color: GOLD, textTransform: 'uppercase', letterSpacing: '0.32em', fontWeight: 700, display: 'block', marginBottom: 14 }}>{fallbackText(section.eyebrow, participationContent.process.eyebrow)}</span>
<h2 style={{ fontFamily: FF, fontSize: 'clamp(1.8rem, 3vw, 2.8rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.025em', lineHeight: 1.03, margin: 0 }}>
<Lines text={fallbackText(section.heading, participationContent.process.heading)} />
</h2>
</div>
<p style={{ fontFamily: FB, fontSize: 14, color: 'rgba(16,24,40,0.68)', lineHeight: 1.8, margin: 0 }}>
<p style={{ fontFamily: FB, fontSize: 14, color: 'rgba(255,255,255,0.65)', lineHeight: 1.8, margin: 0 }}>
{fallbackText(section.description, participationContent.process.description)}
</p>
</div>
@@ -121,18 +120,18 @@ export default function WegZurAuszeichnungSection({ content }: { content?: Proce
width="12" height="7" viewBox="0 0 12 7" fill="none"
style={{ opacity: 1 - i * 0.3, animation: `scrollBounce 1.6s ease-in-out ${i * 0.18}s infinite` }}
>
<polyline points="1,1 6,6 11,1" stroke={NAVY} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<polyline points="1,1 6,6 11,1" stroke={GOLD} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
))}
</div>
<span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(17,29,85,0.68)' }}>
<span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)' }}>
{fallbackText(section.scrollHint, participationContent.process.scrollHint)}
</span>
{/* Progress bar */}
<div style={{ flex: 1, height: 1, background: 'rgba(17,29,85,0.14)', position: 'relative', overflow: 'hidden', maxWidth: 200 }}>
<div style={{ position: 'absolute', left: 0, top: 0, height: '100%', width: '25%', background: NAVY, opacity: 0.6 }} />
<div style={{ flex: 1, height: 1, background: 'rgba(255,255,255,0.07)', position: 'relative', overflow: 'hidden', maxWidth: 200 }}>
<div style={{ position: 'absolute', left: 0, top: 0, height: '100%', width: '25%', background: GOLD, opacity: 0.6 }} />
</div>
<span style={{ fontFamily: FF, fontSize: 9, color: 'rgba(17,29,85,0.62)', letterSpacing: '0.1em' }}>{fallbackText(section.progressLabel, participationContent.process.progressLabel)}</span>
<span style={{ fontFamily: FF, fontSize: 9, color: 'rgba(255,255,255,0.50)', letterSpacing: '0.1em' }}>{fallbackText(section.progressLabel, participationContent.process.progressLabel)}</span>
</div>
{/* Cards strip */}
@@ -145,40 +144,40 @@ export default function WegZurAuszeichnungSection({ content }: { content?: Proce
itemsLength={steps.length}
index={index}
variant="bmp"
className="min-w-[70%] max-w-[70%] flex-shrink-0 bg-[#FFF8E1] text-[#101828] border-[rgba(17,29,85,0.16)]"
className="h-[300px] self-start min-w-[70%] max-w-[70%] flex-shrink-0"
>
{/* Left accent strip with step number */}
<ProcessCardTitle className="border-r border-[rgba(17,29,85,0.16)] flex flex-col items-center justify-between py-8 px-5 min-w-[80px]">
<div style={{ width: 40, height: 40, border: '1px solid rgba(17,29,85,0.22)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<Icon size={16} style={{ color: NAVY }} strokeWidth={1.5} />
<ProcessCardTitle className="border-r border-[rgba(239,191,4,0.2)] flex flex-col items-center justify-between py-6 px-4 min-w-[64px]">
<div style={{ width: 40, height: 40, border: '1px solid rgba(239,191,4,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<Icon size={16} style={{ color: GOLD }} strokeWidth={1.5} />
</div>
<span style={{ fontFamily: FF, fontSize: 11, fontWeight: 900, color: 'rgba(17,29,85,0.38)', letterSpacing: '0.1em', writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}>
<span style={{ fontFamily: FF, fontSize: 11, fontWeight: 900, color: 'rgba(239,191,4,0.4)', letterSpacing: '0.1em', writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}>
{fallbackText(item.step, '')}
</span>
</ProcessCardTitle>
{/* Card body */}
<ProcessCardBody className="flex flex-col justify-between py-10 px-10 gap-6">
<ProcessCardBody className="flex flex-col justify-between py-6 px-7 gap-4">
<div>
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24 }}>
<span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, color: 'rgba(17,29,85,0.78)', letterSpacing: '0.22em', textTransform: 'uppercase' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
<span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, color: GOLD, letterSpacing: '0.22em', textTransform: 'uppercase' }}>
{stepPrefix} {fallbackText(item.step, '')}
</span>
<span style={{ width: 1, height: 12, background: 'rgba(17,29,85,0.18)' }} />
<span style={{ fontFamily: FF, fontSize: 10, color: 'rgba(17,29,85,0.62)', letterSpacing: '0.08em' }}>{fallbackText(item.date, '')}</span>
<span style={{ width: 1, height: 12, background: 'rgba(255,255,255,0.2)' }} />
<span style={{ fontFamily: FF, fontSize: 10, color: 'rgba(255,255,255,0.62)', letterSpacing: '0.08em' }}>{fallbackText(item.date, '')}</span>
</div>
<div style={{ width: 32, height: 1, background: GOLD, marginBottom: 20, opacity: 0.5 }} />
<h3 style={{ fontFamily: FF, fontSize: 'clamp(1.5rem, 2.5vw, 2.2rem)', fontWeight: 900, color: '#101828', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.1, margin: 0 }}>
<div style={{ width: 32, height: 1, background: GOLD, marginBottom: 16, opacity: 0.5 }} />
<h3 style={{ fontFamily: FF, fontSize: 'clamp(1.5rem, 2.5vw, 2.2rem)', fontWeight: 900, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 1.1, margin: 0 }}>
{fallbackText(item.title, '')}
</h3>
</div>
<p style={{ fontFamily: FB, fontSize: 17, color: 'rgba(16,24,40,0.68)', lineHeight: 1.7, margin: 0 }}>
<p style={{ fontFamily: FB, fontSize: 17, color: 'rgba(255,255,255,0.68)', lineHeight: 1.7, margin: 0 }}>
{fallbackText(item.desc, '')}
</p>
{/* Step progress indicator */}
<div style={{ display: 'flex', gap: 4 }}>
{steps.map((_, i) => (
<div key={i} style={{ height: 2, flex: i === index ? 2 : 1, background: i === index ? GOLD : 'rgba(17,29,85,0.12)', transition: 'flex 0.3s' }} />
<div key={i} style={{ height: 2, flex: i === index ? 2 : 1, background: i === index ? GOLD : 'rgba(255,255,255,0.1)', transition: 'flex 0.3s' }} />
))}
</div>
</ProcessCardBody>

1
src/spa/components/ui/process-timeline.tsx
View File

@@ -86,6 +86,7 @@ export const ContainerScroll = ({
const scrollRef = React.useRef<HTMLDivElement>(null)
const { scrollYProgress } = useScroll({
target: scrollRef,
offset: ["start start", "end end"],
})
return (
<ContainerScrollContext.Provider value={{ scrollYProgress }}>