steelforesight/src/pages/Home/sections/MapEventsSection.tsx

28 lines
1.1 KiB
TypeScript

import Globe from '@/components/ui/globe'
import StrategicEvents from '@/components/ui/StrategicEvents'
import { useLang } from '@/context/LangContext'
export default function MapEventsSection() {
const { lang } = useLang()
return (
<section dir={lang === 'fa' ? 'rtl' : 'ltr'} style={{ background: 'var(--paper)', borderBottom: '1px solid var(--rule-thin)', overflow: 'hidden' }}>
<div className="max-w-7xl mx-auto px-12 max-md:px-5">
<div style={{ display: 'flex', alignItems: 'stretch', minHeight: 360 }} className="max-md:flex-col">
{/* ── Strategic events — RIGHT in RTL ── */}
<div style={{ flex: '4 4 0', minWidth: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '24px 24px' }} className="max-md:!px-5">
<StrategicEvents />
</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>
</section>
)
}