Mr.Gay100
/
steelforesight
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

@ 

Scanner section: move heading to right column, globe alone on left, no divider

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@
This commit is contained in:
alireza 2026-06-10 16:51:32 +03:30
parent 775dbbf78d
commit eecbb9acbb
1 changed files with 15 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/pages/Home/sections/MapEventsSection.tsx
View File

@ -29,37 +29,31 @@ export default function MapEventsSection() {
<div className="max-w-7xl mx-auto px-12 max-md:px-5"> <div className="max-w-7xl mx-auto px-12 max-md:px-5">
<div style={{ display: 'flex', alignItems: 'stretch', minHeight: 520 }} className="max-md:flex-col"> <div style={{ display: 'flex', alignItems: 'stretch', minHeight: 520 }} className="max-md:flex-col">
{/* ── 70% · Map ── */} {/* ── Text + Calendar — RIGHT in RTL ── */}
<div style={{ <div style={{ flex: '4 4 0', minWidth: 0, display: 'flex', flexDirection: 'column' }}>
flex: '7 7 0', minWidth: 0, overflow: 'hidden', {/* scanner heading (moved here from above the globe) */}
borderLeft: lang === 'fa' ? '1px solid var(--rule-thin)' : 'none', <div style={{ padding: '48px 20px 4px' }}>
borderRight: lang === 'en' ? '1px solid var(--rule-thin)' : 'none',
}}>
<div className="px-12 max-md:px-5" style={{ paddingTop: 48, paddingBottom: 8 }}>
<div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: 'var(--ink-4)', marginBottom: 8 }}>{t.mapOverline}</div> <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: 'var(--ink-4)', marginBottom: 8 }}>{t.mapOverline}</div>
<h2 style={{ fontSize: 'clamp(18px,2vw,28px)', fontWeight: 900, color: 'var(--ink)', letterSpacing: '-0.5px', lineHeight: 1.2, marginBottom: 10 }}>{t.mapHeading}</h2> <h2 style={{ fontSize: 'clamp(18px,2vw,26px)', fontWeight: 900, color: 'var(--ink)', letterSpacing: '-0.5px', lineHeight: 1.2, marginBottom: 10 }}>{t.mapHeading}</h2>
<p style={{ fontSize: 13, color: 'var(--ink-4)', lineHeight: 1.7, maxWidth: 460 }}>{t.mapSub}</p> <p style={{ fontSize: 13, color: 'var(--ink-4)', lineHeight: 1.7 }}>{t.mapSub}</p>
</div> </div>
<div style={{ padding: '8px 16px 32px' }}> {/* upcoming-events heading */}
<Globe size={460} /> <div style={{ padding: '20px 20px 12px' }}>
</div>
</div>
{/* ── 30% · Events ── */}
<div style={{ flex: '3 3 0', minWidth: 0, display: 'flex', flexDirection: 'column' }}>
<div style={{ padding: '48px 20px 16px', borderBottom: '1px solid var(--rule-thin)' }}>
<div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: 'var(--ink-4)', marginBottom: 6 }}>{t.eventsOverline}</div>
<div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8 }}> <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8 }}>
<h2 style={{ fontSize: 'clamp(15px,1.4vw,20px)', fontWeight: 900, color: 'var(--ink)', letterSpacing: '-0.3px' }}>{t.eventsHeading}</h2> <h3 style={{ fontSize: 'clamp(15px,1.4vw,20px)', fontWeight: 900, color: 'var(--ink)', letterSpacing: '-0.3px', margin: 0 }}>{t.eventsHeading}</h3>
<Link to="/events" style={{ fontSize: 11, fontWeight: 700, color: 'var(--red)', textDecoration: 'none', whiteSpace: 'nowrap', flexShrink: 0 }}>{t.eventsAll}</Link> <Link to="/events" style={{ fontSize: 11, fontWeight: 700, color: 'var(--red)', textDecoration: 'none', whiteSpace: 'nowrap', flexShrink: 0 }}>{t.eventsAll}</Link>
</div> </div>
</div> </div>
<div style={{ flex: 1, display: 'flex', alignItems: 'flex-start', justifyContent: 'center', padding: '8px 20px 40px' }}>
<div style={{ flex: 1, display: 'flex', alignItems: 'flex-start', justifyContent: 'center', padding: '28px 20px' }}>
<EventCalendar /> <EventCalendar />
</div> </div>
</div> </div>
{/* ── Globe — LEFT, no text ── */}
<div style={{ flex: '6 6 0', minWidth: 0, overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px 16px' }}>
<Globe size={560} />
</div>
</div> </div>
</div> </div>
</section> </section>