From a798a4b5ce0315a6c695adebe4e8853501607f18 Mon Sep 17 00:00:00 2001 From: alireza Date: Tue, 25 Aug 2026 15:52:38 +0330 Subject: [PATCH] feat: convert Technogen section to 5-card row style like Factory Reports with auto-slider --- .../pages/Home/sections/TechnogenSection.tsx | 699 +++++++----------- 1 file changed, 270 insertions(+), 429 deletions(-) diff --git a/frontend/src/pages/Home/sections/TechnogenSection.tsx b/frontend/src/pages/Home/sections/TechnogenSection.tsx index ef98925..96e8886 100644 --- a/frontend/src/pages/Home/sections/TechnogenSection.tsx +++ b/frontend/src/pages/Home/sections/TechnogenSection.tsx @@ -1,13 +1,13 @@ import { useState, useEffect } from 'react' import { motion, AnimatePresence } from 'framer-motion' -import { Download, FileText, ExternalLink, X, Eye, BookOpen, ChevronLeft, ChevronRight } from 'lucide-react' +import { Download, FileText, ExternalLink, X, Eye, 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 ITEMS_PER_PAGE = 5 const faNum = (n: number | string) => String(n).replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[+d]) @@ -37,12 +37,8 @@ export default function TechnogenSection() { } }, []) - // Featured report (POSCO study) vs analytical notes - 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 totalPages = Math.max(1, Math.ceil(reports.length / ITEMS_PER_PAGE)) + const currentReports = reports.slice(page * ITEMS_PER_PAGE, page * ITEMS_PER_PAGE + ITEMS_PER_PAGE) const goNext = () => { setDirection(1) @@ -70,12 +66,12 @@ export default function TechnogenSection() { background: 'linear-gradient(180deg, #021a30 0%, #042442 50%, #021629 100%)', borderTop: '1px solid rgba(205,158,83,0.3)', borderBottom: '1px solid rgba(205,158,83,0.3)', - padding: '48px 0 54px', + padding: '44px 0 52px', position: 'relative', overflow: 'hidden', }} > - {/* Background ambient lighting */} + {/* Ambient background lighting */}
- {/* ── Section Header with Gold Accent Line ── */} -
-
-
-

- {isFa ? 'تکنوژن؛ برنامه توسعه‌گر ملی فناوری' : 'Technogen: National Technology Developer Program'} -

-
-

- {isFa - ? 'گزارش‌های تحلیلی و مطالعات تطبیقی یادگیری صنعتی، انتقال دانش و ساخت قابلیت فناورانه در زنجیره فولاد' - : 'Analytical notes and comparative studies on industrial learning, knowledge absorption, and technological capability building in steel.'} -

-
- - {/* ── Bento Grid Layout (Unified Single Block) ── */} + {/* ── Section Header with Gold Accent Line & Slider Controls ── */}
- {/* ── Bento Card 1: Flagship POSCO Study (Spans 7 columns) ── */} - {featured && ( - - {/* Cover Thumbnail */} -
+
+
+

- openPreview(featured)} - style={{ - width: 150, - aspectRatio: '1 / 1.414', - borderRadius: 10, - overflow: 'hidden', - boxShadow: '0 16px 32px -6px rgba(0,0,0,0.7)', - border: '1px solid rgba(255,255,255,0.2)', - cursor: 'pointer', - background: NAVY, - }} - > - {isFa - -

+ {isFa ? 'تکنوژن؛ برنامه توسعه‌گر ملی فناوری' : 'Technogen: National Technology Developer Program'} + +
+

+ {isFa + ? 'گزارش‌های تحلیلی و مطالعات تطبیقی یادگیری صنعتی، انتقال دانش و ساخت قابلیت فناورانه در زنجیره فولاد' + : 'Analytical notes and comparative studies on industrial learning, knowledge absorption, and technological capability building in steel.'} +

+
- {/* Info & Actions */} -
1 && ( +
+ + {isFa ? `${faNum(page + 1)} از ${faNum(totalPages)}` : `${page + 1} of ${totalPages}`} + + -
-
- + + + +
)} +
- {/* ── Bento Cards: Analytical Notes Slider (Spans 5 columns) ── */} -
+ - {/* Slider Content Frame */} -
- + {currentReports.map((report) => { + const isSpecial = !!report.isFeatured + return ( - {currentNotes.map((note) => ( -
openPreview(report)} + style={{ + width: '100%', + aspectRatio: '1 / 1.15', + overflow: 'hidden', + background: NAVY, + position: 'relative', + cursor: 'pointer', + }} + > + {isFa + + {/* Tag badge overlay */} +
- {/* Mini Cover Thumbnail */} -
openPreview(note)} + - {isFa -
+ {isFa ? (report.tagFa || 'گزارش تکنوژن') : (report.tagEn || 'Technogen Report')} + +
+
- {/* Content */} -
-
- - {isFa ? (note.tagFa || 'یادداشت تحلیلی') : (note.tagEn || 'Analytical Note')} - -
+ {/* Card Content Body */} +
+

openPreview(report)} + style={{ + fontSize: 14, + fontWeight: 900, + color: '#FFFFFF', + lineHeight: 1.45, + margin: '0 0 6px', + cursor: 'pointer', + display: '-webkit-box', + WebkitLineClamp: 2, + WebkitBoxOrient: 'vertical', + overflow: 'hidden', + minHeight: 40, + }} + title={isFa ? report.titleFa : (report.titleEn || report.titleFa)} + > + {isFa ? report.titleFa : (report.titleEn || report.titleFa)} +

-

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)} -

+ {report.subtitleFa && ( +

+ {isFa ? report.subtitleFa : (report.subtitleEn || report.subtitleFa)} +

+ )} - {note.subtitleFa && ( -

- {isFa ? note.subtitleFa : (note.subtitleEn || note.subtitleFa)} -

- )} -
- - {/* Quick Action Buttons */} -
- {note.fileUrl && ( - - - - )} - - -
-
- ))} - - -
+ + {isFa ? 'دانلود PDF' : 'Download'} + + )} - {/* Slider Navigation Bar (Below the cards for perfect top alignment) */} - {totalPages > 1 && ( -
-
- {isFa ? 'سایر یادداشت‌های تحلیلی' : 'Analytical Notes'} -
-
- - {isFa ? `${faNum(page + 1)} از ${faNum(totalPages)}` : `${page + 1} of ${totalPages}`} - - +
+
+ + {/* Bottom Gold Accent Bar */} +
- - - -
-
- )} -
-
+ /> + + ) + })} + + {/* ── Document Reader / Preview Modal ── */}