feat: add paginated slider carousel for Technogen analytical notes

frontend/src/pages/Home/sections/TechnogenSection.tsx

@@ -1,18 +1,23 @@
 import { useState, useEffect } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
-import { Download, FileText, ExternalLink, X, Eye, BookOpen } from 'lucide-react'
+import { Download, FileText, ExternalLink, X, Eye, BookOpen, ChevronLeft, ChevronRight } from 'lucide-react'
 import { useLang } from '@/context/LangContext'
 import { FALLBACK_TECHNOGEN_REPORTS, type TechnogenReport } from '@/data/technogen'
 
 const NAVY = '#032340'
 const GOLD = '#CD9E53'
 const EASE = [0.22, 1, 0.36, 1] as const
+const PAGE_SIZE = 3
+
+const faNum = (n: number | string) => String(n).replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[+d])
 
 export default function TechnogenSection() {
   const { lang } = useLang()
   const isFa = lang === 'fa'
   const [reports, setReports] = useState<TechnogenReport[]>(FALLBACK_TECHNOGEN_REPORTS)
   const [selectedReport, setSelectedReport] = useState<TechnogenReport | null>(null)
+  const [page, setPage] = useState(0)
+  const [direction, setDirection] = useState(0)
 
   useEffect(() => {
     let unmounted = false
@@ -36,6 +41,19 @@ export default function TechnogenSection() {
   const featured = reports.find((r) => r.isFeatured) || reports[0]
   const analyticalNotes = reports.filter((r) => r.id !== featured?.id)
 
+  const totalPages = Math.max(1, Math.ceil(analyticalNotes.length / PAGE_SIZE))
+  const currentNotes = analyticalNotes.slice(page * PAGE_SIZE, page * PAGE_SIZE + PAGE_SIZE)
+
+  const goNext = () => {
+    setDirection(1)
+    setPage((p) => (p + 1) % totalPages)
+  }
+
+  const goPrev = () => {
+    setDirection(-1)
+    setPage((p) => (p - 1 + totalPages) % totalPages)
+  }
+
   const openPreview = (report: TechnogenReport) => {
     setSelectedReport(report)
   }
@@ -314,25 +332,92 @@ export default function TechnogenSection() {
             </motion.div>
           )}
 
-          {/* ── Bento Cards 2, 3, 4: Analytical Notes (Spans 5 columns) ── */}
+          {/* ── Bento Cards: Analytical Notes Slider (Spans 5 columns) ── */}
           <div
             style={{
               gridColumn: 'span 5',
               display: 'flex',
               flexDirection: 'column',
-              gap: 10,
               justifyContent: 'space-between',
+              gap: 10,
             }}
             className="max-lg:!col-span-1"
           >
-            {analyticalNotes.map((note, idx) => (
+            {/* 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={isFa ? goNext : 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>
+                  <button
+                    onClick={isFa ? goPrev : 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>
+                </div>
+              </div>
+            )}
+
+            {/* Slider Content Frame */}
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, flex: 1, justifyContent: 'space-between' }}>
+              <AnimatePresence mode="wait" custom={direction}>
                 <motion.div
+                  key={page}
+                  initial={{ opacity: 0, x: isFa ? direction * -20 : direction * 20 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  exit={{ opacity: 0, x: isFa ? direction * 20 : direction * -20 }}
+                  transition={{ duration: 0.25, ease: EASE }}
+                  style={{ display: 'flex', flexDirection: 'column', gap: 10, height: '100%', justifyContent: 'space-between' }}
+                >
+                  {currentNotes.map((note) => (
+                    <div
                       key={note.id}
-                initial={{ opacity: 0, x: isFa ? -12 : 12 }}
-                whileInView={{ opacity: 1, x: 0 }}
-                viewport={{ once: true }}
-                transition={{ duration: 0.4, ease: EASE, delay: idx * 0.08 }}
-                whileHover={{ y: -2 }}
                       style={{
                         background: 'linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%)',
                         borderRadius: 14,
@@ -468,8 +553,11 @@ export default function TechnogenSection() {
                           <Eye size={14} />
                         </button>
                       </div>
-              </motion.div>
+                    </div>
                   ))}
+                </motion.div>
+              </AnimatePresence>
+            </div>
           </div>
         </div>
       </div>