From eecbb9acbbe030e368eccd21893f97c40e7405c0 Mon Sep 17 00:00:00 2001
From: alireza <alirezaameria2@gmail.com>
Date: Wed, 10 Jun 2026 16:51:32 +0330
Subject: [PATCH] @ Scanner section: move heading to right column, globe alone
 on left, no divider

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@
---
 src/pages/Home/sections/MapEventsSection.tsx | 36 ++++++++------------
 1 file changed, 15 insertions(+), 21 deletions(-)

diff --git a/src/pages/Home/sections/MapEventsSection.tsx b/src/pages/Home/sections/MapEventsSection.tsx
index a88c3b1..1b2258d 100644
--- a/src/pages/Home/sections/MapEventsSection.tsx
+++ b/src/pages/Home/sections/MapEventsSection.tsx
@@ -29,37 +29,31 @@ export default function MapEventsSection() {
       <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">
 
-        {/* ── 70% · Map ── */}
-        <div style={{
-          flex: '7 7 0', minWidth: 0, overflow: 'hidden',
-          borderLeft: lang === 'fa' ? '1px solid var(--rule-thin)' : 'none',
-          borderRight: lang === 'en' ? '1px solid var(--rule-thin)' : 'none',
-        }}>
-          <div className="px-12 max-md:px-5" style={{ paddingTop: 48, paddingBottom: 8 }}>
+        {/* ── Text + Calendar — RIGHT in RTL ── */}
+        <div style={{ flex: '4 4 0', minWidth: 0, display: 'flex', flexDirection: 'column' }}>
+          {/* scanner heading (moved here from above the globe) */}
+          <div style={{ padding: '48px 20px 4px' }}>
             <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>
-            <p style={{ fontSize: 13, color: 'var(--ink-4)', lineHeight: 1.7, maxWidth: 460 }}>{t.mapSub}</p>
+            <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 }}>{t.mapSub}</p>
           </div>
-          <div style={{ padding: '8px 16px 32px' }}>
-            <Globe size={460} />
-          </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>
+          {/* upcoming-events heading */}
+          <div style={{ padding: '20px 20px 12px' }}>
             <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>
             </div>
           </div>
-
-          <div style={{ flex: 1, display: 'flex', alignItems: 'flex-start', justifyContent: 'center', padding: '28px 20px' }}>
+          <div style={{ flex: 1, display: 'flex', alignItems: 'flex-start', justifyContent: 'center', padding: '8px 20px 40px' }}>
             <EventCalendar />
           </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>
     </section>