From 11b13a31ae2da4c104b33f6ccc5d1f8a0ea94a83 Mon Sep 17 00:00:00 2001
From: alireza <alirezaameria2@gmail.com>
Date: Tue, 25 Aug 2026 15:51:15 +0330
Subject: [PATCH] style: move slider navigation bar below cards to align left
 and right column heights

---
 .../pages/Home/sections/TechnogenSection.tsx  | 124 +++++++++---------
 1 file changed, 63 insertions(+), 61 deletions(-)

diff --git a/frontend/src/pages/Home/sections/TechnogenSection.tsx b/frontend/src/pages/Home/sections/TechnogenSection.tsx
index 300cdf2..ef98925 100644
--- a/frontend/src/pages/Home/sections/TechnogenSection.tsx
+++ b/frontend/src/pages/Home/sections/TechnogenSection.tsx
@@ -343,67 +343,6 @@ export default function TechnogenSection() {
             }}
             className="max-lg:!col-span-1"
           >
-            {/* Slider Navigation Bar */}
-            {totalPages > 1 && (
-              <div
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'space-between',
-                  padding: '2px 4px',
-                }}
-              >
-                <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.75)', fontWeight: 700 }}>
-                  {isFa ? 'سایر یادداشت‌های تحلیلی' : 'Analytical Notes'}
-                </div>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                  <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', fontWeight: 600 }}>
-                    {isFa ? `${faNum(page + 1)} از ${faNum(totalPages)}` : `${page + 1} of ${totalPages}`}
-                  </span>
-                  <button
-                    onClick={goNext}
-                    style={{
-                      width: 26,
-                      height: 26,
-                      borderRadius: '50%',
-                      background: 'rgba(255,255,255,0.08)',
-                      border: '1px solid rgba(255,255,255,0.2)',
-                      color: '#fff',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      cursor: 'pointer',
-                      transition: 'all 0.15s',
-                    }}
-                    className="hover:!bg-gold hover:!text-navy"
-                    title={isFa ? 'بعدی' : 'Next'}
-                  >
-                    <ChevronLeft size={14} />
-                  </button>
-                  <button
-                    onClick={goPrev}
-                    style={{
-                      width: 26,
-                      height: 26,
-                      borderRadius: '50%',
-                      background: 'rgba(255,255,255,0.08)',
-                      border: '1px solid rgba(255,255,255,0.2)',
-                      color: '#fff',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      cursor: 'pointer',
-                      transition: 'all 0.15s',
-                    }}
-                    className="hover:!bg-gold hover:!text-navy"
-                    title={isFa ? 'قبلی' : 'Previous'}
-                  >
-                    <ChevronRight size={14} />
-                  </button>
-                </div>
-              </div>
-            )}
-
             {/* Slider Content Frame */}
             <div style={{ display: 'flex', flexDirection: 'column', gap: 10, flex: 1, justifyContent: 'space-between' }}>
               <AnimatePresence mode="wait" custom={direction}>
@@ -558,6 +497,69 @@ export default function TechnogenSection() {
                 </motion.div>
               </AnimatePresence>
             </div>
+
+            {/* Slider Navigation Bar (Below the cards for perfect top alignment) */}
+            {totalPages > 1 && (
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  padding: '4px 4px 0',
+                  borderTop: '1px solid rgba(255,255,255,0.08)',
+                  marginTop: 2,
+                }}
+              >
+                <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', fontWeight: 700 }}>
+                  {isFa ? 'سایر یادداشت‌های تحلیلی' : 'Analytical Notes'}
+                </div>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                  <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', fontWeight: 600 }}>
+                    {isFa ? `${faNum(page + 1)} از ${faNum(totalPages)}` : `${page + 1} of ${totalPages}`}
+                  </span>
+                  <button
+                    onClick={goNext}
+                    style={{
+                      width: 26,
+                      height: 26,
+                      borderRadius: '50%',
+                      background: 'rgba(255,255,255,0.08)',
+                      border: '1px solid rgba(255,255,255,0.2)',
+                      color: '#fff',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      cursor: 'pointer',
+                      transition: 'all 0.15s',
+                    }}
+                    className="hover:!bg-gold hover:!text-navy"
+                    title={isFa ? 'بعدی' : 'Next'}
+                  >
+                    <ChevronLeft size={14} />
+                  </button>
+                  <button
+                    onClick={goPrev}
+                    style={{
+                      width: 26,
+                      height: 26,
+                      borderRadius: '50%',
+                      background: 'rgba(255,255,255,0.08)',
+                      border: '1px solid rgba(255,255,255,0.2)',
+                      color: '#fff',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      cursor: 'pointer',
+                      transition: 'all 0.15s',
+                    }}
+                    className="hover:!bg-gold hover:!text-navy"
+                    title={isFa ? 'قبلی' : 'Previous'}
+                  >
+                    <ChevronRight size={14} />
+                  </button>
+                </div>
+              </div>
+            )}
           </div>
         </div>
       </div>