From dbf9d63f392f4170cfe782ee9ceda947756876d6 Mon Sep 17 00:00:00 2001
From: alireza <alirezaameria2@gmail.com>
Date: Tue, 25 Aug 2026 15:48:02 +0330
Subject: [PATCH] feat: add paginated slider carousel for Technogen analytical
 notes

---
 .../pages/Home/sections/TechnogenSection.tsx  | 352 +++++++++++-------
 1 file changed, 220 insertions(+), 132 deletions(-)

diff --git a/frontend/src/pages/Home/sections/TechnogenSection.tsx b/frontend/src/pages/Home/sections/TechnogenSection.tsx
index f1d1e69..fcd237a 100644
--- a/frontend/src/pages/Home/sections/TechnogenSection.tsx
+++ b/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,162 +332,232 @@ 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) => (
-              <motion.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 }}
+            {/* Slider Navigation Bar */}
+            {totalPages > 1 && (
+              <div
                 style={{
-                  background: 'linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%)',
-                  borderRadius: 14,
-                  border: '1px solid rgba(255,255,255,0.1)',
-                  boxShadow: '0 8px 20px -6px rgba(0,0,0,0.3)',
-                  backdropFilter: 'blur(8px)',
-                  padding: '12px 14px',
                   display: 'flex',
                   alignItems: 'center',
-                  gap: 14,
-                  flex: '1 1 0',
+                  justifyContent: 'space-between',
+                  padding: '2px 4px',
                 }}
               >
-                {/* Mini Cover Thumbnail */}
-                <div
-                  onClick={() => openPreview(note)}
-                  style={{
-                    flex: '0 0 54px',
-                    width: 54,
-                    aspectRatio: '1 / 1.414',
-                    borderRadius: 6,
-                    overflow: 'hidden',
-                    boxShadow: '0 6px 14px rgba(0,0,0,0.35)',
-                    border: '1px solid rgba(255,255,255,0.15)',
-                    background: NAVY,
-                    cursor: 'pointer',
-                  }}
-                >
-                  <img
-                    src={note.coverImage}
-                    alt={isFa ? note.titleFa : (note.titleEn || note.titleFa)}
-                    style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
-                  />
+                <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.75)', fontWeight: 700 }}>
+                  {isFa ? 'سایر یادداشت‌های تحلیلی' : 'Analytical Notes'}
                 </div>
-
-                {/* Content */}
-                <div style={{ flex: '1 1 0', minWidth: 0 }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
-                    <span
-                      style={{
-                        background: 'rgba(205,158,83,0.2)',
-                        color: '#f0c784',
-                        fontSize: 9,
-                        fontWeight: 800,
-                        padding: '2px 6px',
-                        borderRadius: 3,
-                      }}
-                    >
-                      {isFa ? (note.tagFa || 'یادداشت تحلیلی') : (note.tagEn || 'Analytical Note')}
-                    </span>
-                  </div>
-
-                  <h4
-                    onClick={() => openPreview(note)}
-                    style={{
-                      fontSize: 13,
-                      fontWeight: 800,
-                      color: '#FFFFFF',
-                      lineHeight: 1.4,
-                      margin: '0 0 2px',
-                      cursor: 'pointer',
-                      whiteSpace: 'nowrap',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                    }}
-                    title={isFa ? note.titleFa : (note.titleEn || note.titleFa)}
-                  >
-                    {isFa ? note.titleFa : (note.titleEn || note.titleFa)}
-                  </h4>
-
-                  {note.subtitleFa && (
-                    <p
-                      style={{
-                        fontSize: 11,
-                        lineHeight: 1.5,
-                        color: 'rgba(255,255,255,0.65)',
-                        margin: 0,
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                      }}
-                    >
-                      {isFa ? note.subtitleFa : (note.subtitleEn || note.subtitleFa)}
-                    </p>
-                  )}
-                </div>
-
-                {/* Quick Action Buttons */}
-                <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
-                  {note.fileUrl && (
-                    <a
-                      href={note.fileUrl}
-                      download
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      style={{
-                        display: 'inline-flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        width: 32,
-                        height: 32,
-                        borderRadius: 8,
-                        background: 'rgba(255,255,255,0.1)',
-                        color: '#FFFFFF',
-                        textDecoration: 'none',
-                        transition: 'all 0.15s',
-                      }}
-                      className="hover:!bg-gold hover:!text-navy"
-                      title={isFa ? 'دانلود فایل PDF' : 'Download PDF'}
-                    >
-                      <Download size={14} />
-                    </a>
-                  )}
-
+                <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={() => openPreview(note)}
+                    onClick={isFa ? goNext : goPrev}
                     style={{
-                      display: 'inline-flex',
+                      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',
-                      width: 32,
-                      height: 32,
-                      borderRadius: 8,
-                      background: 'transparent',
-                      border: '1px solid rgba(255,255,255,0.2)',
-                      color: '#FFFFFF',
                       cursor: 'pointer',
                       transition: 'all 0.15s',
                     }}
-                    className="hover:!border-gold"
-                    title={isFa ? 'مشاهده آنلاین' : 'Preview'}
+                    className="hover:!bg-gold hover:!text-navy"
+                    title={isFa ? 'قبلی' : 'Previous'}
                   >
-                    <Eye size={14} />
+                    <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>
-              </motion.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}
+                      style={{
+                        background: 'linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%)',
+                        borderRadius: 14,
+                        border: '1px solid rgba(255,255,255,0.1)',
+                        boxShadow: '0 8px 20px -6px rgba(0,0,0,0.3)',
+                        backdropFilter: 'blur(8px)',
+                        padding: '12px 14px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 14,
+                        flex: '1 1 0',
+                      }}
+                    >
+                      {/* Mini Cover Thumbnail */}
+                      <div
+                        onClick={() => openPreview(note)}
+                        style={{
+                          flex: '0 0 54px',
+                          width: 54,
+                          aspectRatio: '1 / 1.414',
+                          borderRadius: 6,
+                          overflow: 'hidden',
+                          boxShadow: '0 6px 14px rgba(0,0,0,0.35)',
+                          border: '1px solid rgba(255,255,255,0.15)',
+                          background: NAVY,
+                          cursor: 'pointer',
+                        }}
+                      >
+                        <img
+                          src={note.coverImage}
+                          alt={isFa ? note.titleFa : (note.titleEn || note.titleFa)}
+                          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
+                        />
+                      </div>
+
+                      {/* Content */}
+                      <div style={{ flex: '1 1 0', minWidth: 0 }}>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
+                          <span
+                            style={{
+                              background: 'rgba(205,158,83,0.2)',
+                              color: '#f0c784',
+                              fontSize: 9,
+                              fontWeight: 800,
+                              padding: '2px 6px',
+                              borderRadius: 3,
+                            }}
+                          >
+                            {isFa ? (note.tagFa || 'یادداشت تحلیلی') : (note.tagEn || 'Analytical Note')}
+                          </span>
+                        </div>
+
+                        <h4
+                          onClick={() => openPreview(note)}
+                          style={{
+                            fontSize: 13,
+                            fontWeight: 800,
+                            color: '#FFFFFF',
+                            lineHeight: 1.4,
+                            margin: '0 0 2px',
+                            cursor: 'pointer',
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                          }}
+                          title={isFa ? note.titleFa : (note.titleEn || note.titleFa)}
+                        >
+                          {isFa ? note.titleFa : (note.titleEn || note.titleFa)}
+                        </h4>
+
+                        {note.subtitleFa && (
+                          <p
+                            style={{
+                              fontSize: 11,
+                              lineHeight: 1.5,
+                              color: 'rgba(255,255,255,0.65)',
+                              margin: 0,
+                              whiteSpace: 'nowrap',
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis',
+                            }}
+                          >
+                            {isFa ? note.subtitleFa : (note.subtitleEn || note.subtitleFa)}
+                          </p>
+                        )}
+                      </div>
+
+                      {/* Quick Action Buttons */}
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
+                        {note.fileUrl && (
+                          <a
+                            href={note.fileUrl}
+                            download
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            style={{
+                              display: 'inline-flex',
+                              alignItems: 'center',
+                              justifyContent: 'center',
+                              width: 32,
+                              height: 32,
+                              borderRadius: 8,
+                              background: 'rgba(255,255,255,0.1)',
+                              color: '#FFFFFF',
+                              textDecoration: 'none',
+                              transition: 'all 0.15s',
+                            }}
+                            className="hover:!bg-gold hover:!text-navy"
+                            title={isFa ? 'دانلود فایل PDF' : 'Download PDF'}
+                          >
+                            <Download size={14} />
+                          </a>
+                        )}
+
+                        <button
+                          onClick={() => openPreview(note)}
+                          style={{
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            width: 32,
+                            height: 32,
+                            borderRadius: 8,
+                            background: 'transparent',
+                            border: '1px solid rgba(255,255,255,0.2)',
+                            color: '#FFFFFF',
+                            cursor: 'pointer',
+                            transition: 'all 0.15s',
+                          }}
+                          className="hover:!border-gold"
+                          title={isFa ? 'مشاهده آنلاین' : 'Preview'}
+                        >
+                          <Eye size={14} />
+                        </button>
+                      </div>
+                    </div>
+                  ))}
+                </motion.div>
+              </AnimatePresence>
+            </div>
           </div>
         </div>
       </div>