Mr.Gay100
/
steelforesight
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: convert Technogen section to compact bento grid layout and add gold accent line

This commit is contained in:
alireza 2026-08-25 15:42:47 +03:30
parent 2c299776b5
commit bda94d7124
1 changed files with 243 additions and 427 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

580
frontend/src/pages/Home/sections/TechnogenSection.tsx
View File

@ -1,6 +1,6 @@
import { useState, useEffect } from 'react' import { useState, useEffect } from 'react'
import { motion, AnimatePresence } from 'framer-motion' import { motion, AnimatePresence } from 'framer-motion'
import { Download, FileText, ExternalLink, Sparkles, X, Eye, BookOpen, Layers } from 'lucide-react' import { Download, FileText, ExternalLink, X, Eye, BookOpen } from 'lucide-react'
import { useLang } from '@/context/LangContext' import { useLang } from '@/context/LangContext'
import { FALLBACK_TECHNOGEN_REPORTS, type TechnogenReport } from '@/data/technogen' import { FALLBACK_TECHNOGEN_REPORTS, type TechnogenReport } from '@/data/technogen'
@ -26,9 +26,7 @@ export default function TechnogenSection() {
setReports(data) setReports(data)
} }
}) })
.catch(() => { .catch(() => {})
// use fallback reports seamlessly
})
return () => { return () => {
unmounted = true unmounted = true
} }
@ -54,336 +52,217 @@ export default function TechnogenSection() {
background: 'var(--paper)', background: 'var(--paper)',
borderTop: '1px solid var(--rule-thin)', borderTop: '1px solid var(--rule-thin)',
borderBottom: '1px solid var(--rule-thin)', borderBottom: '1px solid var(--rule-thin)',
padding: '72px 0 88px', padding: '44px 0 52px',
position: 'relative', position: 'relative',
overflow: 'hidden', overflow: 'hidden',
}} }}
> >
{/* Background ambient lighting */} <div className="max-w-7xl mx-auto px-12 max-md:px-4">
<div {/* ── Section Header with Gold Accent Line ── */}
<div style={{ marginBottom: 24 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<div style={{ width: 4, height: 28, background: GOLD, borderRadius: 2, flexShrink: 0 }} />
<h2
style={{ style={{
position: 'absolute', fontSize: 'clamp(20px, 2.2vw, 28px)',
top: '-15%',
right: isFa ? '-5%' : 'auto',
left: isFa ? 'auto' : '-5%',
width: '550px',
height: '550px',
borderRadius: '50%',
background: 'radial-gradient(circle, rgba(205,158,83,0.08) 0%, rgba(3,35,64,0) 70%)',
pointerEvents: 'none',
}}
/>
<div
style={{
position: 'absolute',
bottom: '-20%',
left: isFa ? '-10%' : 'auto',
right: isFa ? 'auto' : '-10%',
width: '600px',
height: '600px',
borderRadius: '50%',
background: 'radial-gradient(circle, rgba(0,174,239,0.06) 0%, rgba(3,35,64,0) 70%)',
pointerEvents: 'none',
}}
/>
<div className="max-w-7xl mx-auto px-12 max-md:px-5">
{/* ── Section Header ── */}
<div style={{ marginBottom: 40, position: 'relative', zIndex: 1 }}>
<motion.div
initial={{ opacity: 0, y: 16 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, ease: EASE }}
style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 12 }}
>
<span
style={{
display: 'inline-flex',
alignItems: 'center',
gap: 6,
padding: '4px 12px',
borderRadius: 20,
background: 'rgba(3,35,64,0.06)',
border: '1px solid rgba(3,35,64,0.12)',
color: NAVY,
fontSize: 12,
fontWeight: 800,
letterSpacing: isFa ? '0' : '1px',
}}
>
<Sparkles size={14} color={GOLD} />
TECHNOGEN
</span>
<span style={{ fontSize: 13, color: GOLD, fontWeight: 700 }}>
{isFa ? 'برنامه توسعه‌گر ملی فناوری' : 'National Technology Developer Program'}
</span>
</motion.div>
<div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
<div>
<motion.h2
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, ease: EASE, delay: 0.1 }}
style={{
fontSize: 'clamp(24px, 2.8vw, 36px)',
fontWeight: 900, fontWeight: 900,
color: NAVY, color: NAVY,
margin: '0 0 8px', margin: 0,
letterSpacing: isFa ? '-0.5px' : '-0.2px', letterSpacing: isFa ? '-0.5px' : '-0.2px',
lineHeight: 1.3, lineHeight: 1.3,
}} }}
> >
{isFa ? 'تکنوژن؛ برنامه توسعه‌گر ملی فناوری' : 'Technogen: National Technology Developer Program'} {isFa ? 'تکنوژن؛ برنامه توسعه‌گر ملی فناوری' : 'Technogen: National Technology Developer Program'}
</motion.h2> </h2>
<motion.p </div>
initial={{ opacity: 0, y: 16 }} <p
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, ease: EASE, delay: 0.15 }}
style={{ style={{
fontSize: 'clamp(14px, 1.2vw, 16px)', fontSize: 13,
color: 'rgba(3,35,64,0.7)', color: 'rgba(3,35,64,0.65)',
margin: 0, margin: '6px 0 0',
maxWidth: 720, paddingInlineStart: 16,
lineHeight: 1.7, lineHeight: 1.6,
}} }}
> >
{isFa {isFa
? 'گزارش‌های تحلیلی و مطالعات تطبیقی یادگیری صنعتی، انتقال دانش و ساخت قابلیت فناورانه در زنجیره فولاد' ? 'گزارش‌های تحلیلی و مطالعات تطبیقی یادگیری صنعتی، انتقال دانش و ساخت قابلیت فناورانه در زنجیره فولاد'
: 'Analytical notes and comparative studies on industrial learning, knowledge absorption, and technological capability building in steel.'} : 'Analytical notes and comparative studies on industrial learning, knowledge absorption, and technological capability building in steel.'}
</motion.p> </p>
</div>
</div>
</div> </div>
{/* ── Flagship Featured Report (POSCO Study) ── */} {/* ── Bento Grid Layout (Unified Single Block) ── */}
<div
style={{
display: 'grid',
gridTemplateColumns: 'repeat(12, 1fr)',
gap: 16,
alignItems: 'stretch',
}}
className="max-lg:!grid-cols-1"
>
{/* ── Bento Card 1: Flagship POSCO Study (Spans 7 columns) ── */}
{featured && ( {featured && (
<motion.div <motion.div
initial={{ opacity: 0, y: 30 }} initial={{ opacity: 0, y: 16 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.7, ease: EASE }} transition={{ duration: 0.5, ease: EASE }}
style={{ style={{
gridColumn: 'span 7',
position: 'relative', position: 'relative',
borderRadius: 24, borderRadius: 18,
overflow: 'hidden', overflow: 'hidden',
background: `linear-gradient(135deg, ${NAVY} 0%, #062b4f 50%, #041c33 100%)`, background: `linear-gradient(135deg, ${NAVY} 0%, #062b4f 60%, #031e36 100%)`,
boxShadow: '0 25px 50px -18px rgba(3,35,64,0.35)', boxShadow: '0 12px 30px -10px rgba(3,35,64,0.25)',
border: '1px solid rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.08)',
marginBottom: 36, padding: '24px 28px',
display: 'flex',
alignItems: 'center',
gap: 24,
}} }}
className="max-lg:!col-span-1 max-md:!flex-col max-md:!p-5 max-md:!gap-4"
> >
{/* Ambient decorative elements */} {/* Subtle background glow */}
<div <div
style={{ style={{
position: 'absolute', position: 'absolute',
top: 0, top: '-30%',
right: 0, right: '-20%',
width: '100%', width: '320px',
height: '100%', height: '320px',
backgroundImage: 'radial-gradient(circle at 85% 20%, rgba(205,158,83,0.15) 0%, transparent 50%)', borderRadius: '50%',
background: 'radial-gradient(circle, rgba(205,158,83,0.15) 0%, transparent 60%)',
pointerEvents: 'none', pointerEvents: 'none',
}} }}
/> />
{/* Cover Thumbnail */}
<div <div
style={{ style={{
display: 'flex', flex: '0 0 160px',
alignItems: 'center',
minHeight: 380,
padding: '36px 44px',
}}
className="max-lg:!flex-col max-md:!p-6"
>
{/* Cover Column */}
<div
style={{
flex: '0 0 280px',
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center',
position: 'relative',
}} }}
className="max-lg:!w-full max-lg:!mb-8" className="max-md:!w-full"
> >
<motion.div <motion.div
whileHover={{ scale: 1.03, rotateY: isFa ? -4 : 4, y: -4 }} whileHover={{ scale: 1.03, y: -3 }}
transition={{ duration: 0.4 }} transition={{ duration: 0.25 }}
style={{
position: 'relative',
borderRadius: 12,
boxShadow: '0 20px 40px -10px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.12)',
overflow: 'hidden',
background: NAVY,
maxWidth: 240,
width: '100%',
aspectRatio: '1 / 1.414',
cursor: 'pointer',
}}
onClick={() => openPreview(featured)} onClick={() => openPreview(featured)}
style={{
width: 150,
aspectRatio: '1 / 1.414',
borderRadius: 10,
overflow: 'hidden',
boxShadow: '0 14px 28px -6px rgba(0,0,0,0.5)',
border: '1px solid rgba(255,255,255,0.15)',
cursor: 'pointer',
background: NAVY,
}}
> >
<img <img
src={featured.coverImage} src={featured.coverImage}
alt={isFa ? featured.titleFa : (featured.titleEn || featured.titleFa)} alt={isFa ? featured.titleFa : (featured.titleEn || featured.titleFa)}
style={{ style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
width: '100%',
height: '100%',
objectFit: 'cover',
display: 'block',
}}
/> />
<div
style={{
position: 'absolute',
inset: 0,
background: 'linear-gradient(to top, rgba(3,35,64,0.6) 0%, transparent 40%)',
display: 'flex',
alignItems: 'flex-end',
justifyContent: 'center',
padding: 12,
opacity: 0,
transition: 'opacity 0.25s',
}}
className="hover:!opacity-100"
>
<span
style={{
background: 'rgba(255,255,255,0.95)',
color: NAVY,
fontSize: 12,
fontWeight: 800,
padding: '6px 14px',
borderRadius: 20,
display: 'inline-flex',
alignItems: 'center',
gap: 6,
}}
>
<Eye size={14} />
{isFa ? 'مشاهده گزارش' : 'Preview'}
</span>
</div>
</motion.div> </motion.div>
</div> </div>
{/* Text / Info Column */} {/* Info & Actions */}
<div <div
style={{ style={{
flex: '1 1 0', flex: '1 1 0',
marginInlineStart: 36,
color: '#fff', color: '#fff',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'center', justifyContent: 'center',
minWidth: 0,
}} }}
className="max-lg:!m-0 max-lg:!w-full max-lg:!text-center" className="max-md:!text-center"
> >
{/* Meta Badges */} {/* Meta Pills */}
<div <div
style={{ style={{
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: 10, gap: 8,
marginBottom: 14, marginBottom: 10,
flexWrap: 'wrap', flexWrap: 'wrap',
}} }}
className="max-lg:!justify-center" className="max-md:!justify-center"
> >
<span <span
style={{ style={{
background: GOLD, background: GOLD,
color: NAVY, color: NAVY,
fontSize: 11, fontSize: 10,
fontWeight: 900, fontWeight: 900,
padding: '4px 10px', padding: '3px 8px',
borderRadius: 6, borderRadius: 4,
}} }}
> >
{isFa ? 'مطالعه تطبیقی ویژه' : 'Flagship Case Study'} {isFa ? 'مطالعه تطبیقی ویژه' : 'Flagship Study'}
</span> </span>
{featured.code && ( {featured.code && (
<span <span
style={{ style={{
background: 'rgba(255,255,255,0.12)', background: 'rgba(255,255,255,0.12)',
color: '#fff', color: '#fff',
fontSize: 11, fontSize: 10,
fontWeight: 800, fontWeight: 800,
padding: '4px 10px', padding: '3px 8px',
borderRadius: 6, borderRadius: 4,
letterSpacing: '0.5px', direction: 'ltr',
}} }}
> >
{featured.code} {featured.code}
</span> </span>
)} )}
<span style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)', fontWeight: 600 }}> <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.65)', fontWeight: 600 }}>
{isFa ? (featured.pagesFa || '۳۰ صفحه') : (featured.pagesEn || '30 Pages')} {isFa ? (featured.pagesFa || '۳۰ صفحه') : (featured.pagesEn || '30 Pages')}
</span> </span>
<span style={{ color: 'rgba(255,255,255,0.3)' }}>•</span>
<span style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)' }}>
{isFa ? (featured.dateFa || 'مرداد ۱۴۰۵') : (featured.dateEn || 'August 2026')}
</span>
</div> </div>
{/* Title */} {/* Title */}
<h3 <h3
style={{ style={{
fontSize: 'clamp(20px, 2.3vw, 28px)', fontSize: 'clamp(16px, 1.6vw, 20px)',
fontWeight: 900, fontWeight: 900,
lineHeight: 1.4, lineHeight: 1.4,
margin: '0 0 12px', margin: '0 0 8px',
color: '#fff', color: '#fff',
}} }}
> >
{isFa ? featured.titleFa : (featured.titleEn || featured.titleFa)} {isFa ? featured.titleFa : (featured.titleEn || featured.titleFa)}
</h3> </h3>
{/* Subtitle / Quote */} {/* Subtitle / Excerpt */}
{featured.subtitleFa && ( {featured.subtitleFa && (
<div
style={{
fontSize: 'clamp(14px, 1.1vw, 16px)',
lineHeight: 1.7,
color: 'rgba(255,255,255,0.85)',
fontWeight: 600,
marginBottom: 14,
borderInlineStart: `3px solid ${GOLD}`,
paddingInlineStart: 14,
}}
className="max-lg:!border-none max-lg:!p-0"
>
{isFa ? featured.subtitleFa : (featured.subtitleEn || featured.subtitleFa)}
</div>
)}
{/* Description */}
{featured.descriptionFa && (
<p <p
style={{ style={{
fontSize: 13, fontSize: 12,
lineHeight: 1.8, lineHeight: 1.7,
color: 'rgba(255,255,255,0.65)', color: 'rgba(255,255,255,0.75)',
margin: '0 0 24px', margin: '0 0 16px',
maxWidth: 680, display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical',
overflow: 'hidden',
}} }}
className="max-lg:!mx-auto"
> >
{isFa ? featured.descriptionFa : (featured.descriptionEn || featured.descriptionFa)} {isFa ? featured.subtitleFa : (featured.subtitleEn || featured.subtitleFa)}
</p> </p>
)} )}
{/* Action Buttons */} {/* Actions */}
<div <div
style={{ style={{
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: 14, gap: 10,
flexWrap: 'wrap', flexWrap: 'wrap',
}} }}
className="max-lg:!justify-center" className="max-md:!justify-center"
> >
{featured.fileUrl && ( {featured.fileUrl && (
<a <a
@ -394,21 +273,21 @@ export default function TechnogenSection() {
style={{ style={{
display: 'inline-flex', display: 'inline-flex',
alignItems: 'center', alignItems: 'center',
gap: 10, gap: 6,
background: `linear-gradient(135deg, ${GOLD} 0%, #e0b469 100%)`, background: `linear-gradient(135deg, ${GOLD} 0%, #e0b469 100%)`,
color: NAVY, color: NAVY,
fontSize: 13, fontSize: 12,
fontWeight: 900, fontWeight: 900,
padding: '12px 24px', padding: '9px 16px',
borderRadius: 12, borderRadius: 8,
textDecoration: 'none', textDecoration: 'none',
boxShadow: '0 10px 25px -5px rgba(205,158,83,0.4)', boxShadow: '0 6px 16px -4px rgba(205,158,83,0.4)',
transition: 'all 0.2s ease', transition: 'transform 0.15s',
}} }}
className="hover:!brightness-105 active:!scale-95" className="hover:!brightness-105 active:!scale-95"
> >
<Download size={17} strokeWidth={2.5} /> <Download size={14} strokeWidth={2.5} />
<span>{isFa ? 'دانلود متن کامل گزارش (PDF)' : 'Download Full PDF (30 Pages)'}</span> <span>{isFa ? 'دانلود PDF کامل' : 'Download PDF'}</span>
</a> </a>
)} )}
@ -417,104 +296,93 @@ export default function TechnogenSection() {
style={{ style={{
display: 'inline-flex', display: 'inline-flex',
alignItems: 'center', alignItems: 'center',
gap: 8, gap: 6,
background: 'rgba(255,255,255,0.08)', background: 'rgba(255,255,255,0.08)',
border: '1px solid rgba(255,255,255,0.2)', border: '1px solid rgba(255,255,255,0.18)',
color: '#fff', color: '#fff',
fontSize: 13, fontSize: 12,
fontWeight: 700, fontWeight: 700,
padding: '12px 20px', padding: '9px 14px',
borderRadius: 12, borderRadius: 8,
cursor: 'pointer', cursor: 'pointer',
transition: 'all 0.2s ease', transition: 'background 0.15s',
}} }}
className="hover:!bg-white/15" className="hover:!bg-white/15"
> >
<BookOpen size={16} /> <BookOpen size={14} />
<span>{isFa ? 'مطالعه و ورق زدن آنلاین' : 'Read Online'}</span> <span>{isFa ? 'مشاهده آنلاین' : 'Read'}</span>
</button> </button>
</div> </div>
</div> </div>
</div>
</motion.div> </motion.div>
)} )}
{/* ── Analytical Notes (3-Card Grid) ── */} {/* ── Bento Cards 2, 3, 4: Analytical Notes (Spans 5 columns) ── */}
<div style={{ marginTop: 24 }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<Layers size={18} color={NAVY} />
<h4 style={{ fontSize: 18, fontWeight: 900, color: NAVY, margin: 0 }}>
{isFa ? 'یادداشت‌های تحلیلی تکنوژن' : 'Technogen Analytical Notes'}
</h4>
</div>
<span style={{ fontSize: 12, color: 'rgba(3,35,64,0.6)', fontWeight: 600 }}>
{isFa ? `${analyticalNotes.length} شماره منتشر شده` : `${analyticalNotes.length} Published Notes`}
</span>
</div>
<div <div
style={{ style={{
display: 'grid', gridColumn: 'span 5',
gridTemplateColumns: 'repeat(3, 1fr)', display: 'flex',
gap: 20, flexDirection: 'column',
gap: 10,
justifyContent: 'space-between',
}} }}
className="max-lg:!grid-cols-2 max-md:!grid-cols-1" className="max-lg:!col-span-1"
> >
{analyticalNotes.map((note, idx) => ( {analyticalNotes.map((note, idx) => (
<motion.article <motion.div
key={note.id} key={note.id}
initial={{ opacity: 0, y: 24 }} initial={{ opacity: 0, x: isFa ? -12 : 12 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.5, ease: EASE, delay: idx * 0.1 }} transition={{ duration: 0.4, ease: EASE, delay: idx * 0.08 }}
whileHover={{ y: -6 }} whileHover={{ y: -2 }}
style={{ style={{
background: '#FFFFFF', background: '#FFFFFF',
borderRadius: 20, borderRadius: 14,
border: '1px solid rgba(3,35,64,0.08)', border: '1px solid rgba(3,35,64,0.08)',
boxShadow: '0 8px 24px -6px rgba(3,35,64,0.06)', boxShadow: '0 4px 14px -4px rgba(3,35,64,0.05)',
overflow: 'hidden', padding: '12px 14px',
display: 'flex', display: 'flex',
flexDirection: 'column',
transition: 'box-shadow 0.3s ease',
}}
className="hover:!shadow-xl"
>
{/* Card Top / Cover & Tag */}
<div
style={{
position: 'relative',
background: `linear-gradient(135deg, ${NAVY} 0%, #0a2f52 100%)`,
padding: '24px 20px 20px',
display: 'flex',
flexDirection: 'column',
alignItems: 'center', 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 4px 10px rgba(0,0,0,0.15)',
border: '1px solid rgba(3,35,64,0.1)',
background: NAVY,
cursor: 'pointer', cursor: 'pointer',
}} }}
onClick={() => openPreview(note)}
>
<div
style={{
position: 'absolute',
top: 14,
right: isFa ? 14 : 'auto',
left: isFa ? 'auto' : 14,
display: 'flex',
alignItems: 'center',
gap: 6,
}}
> >
<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 }}>
{note.code && ( {note.code && (
<span <span
style={{ style={{
background: 'rgba(255,255,255,0.15)', background: 'rgba(3,35,64,0.06)',
color: '#fff', color: NAVY,
fontSize: 10, fontSize: 9,
fontWeight: 800, fontWeight: 800,
padding: '3px 8px', padding: '2px 6px',
borderRadius: 4, borderRadius: 3,
letterSpacing: '0.5px', direction: 'ltr',
}} }}
> >
{note.code} {note.code}
@ -522,71 +390,35 @@ export default function TechnogenSection() {
)} )}
<span <span
style={{ style={{
background: 'rgba(205,158,83,0.25)', background: 'rgba(205,158,83,0.15)',
color: GOLD, color: '#9c6f28',
fontSize: 10, fontSize: 9,
fontWeight: 800, fontWeight: 800,
padding: '3px 8px', padding: '2px 6px',
borderRadius: 4, borderRadius: 3,
}} }}
> >
{isFa ? (note.tagFa || 'یادداشت تحلیلی') : (note.tagEn || 'Analytical Note')} {isFa ? (note.tagFa || 'یادداشت تحلیلی') : (note.tagEn || 'Analytical Note')}
</span> </span>
</div> <span style={{ fontSize: 10, color: 'rgba(3,35,64,0.5)', fontWeight: 600, marginInlineStart: 'auto' }}>
{isFa ? (note.pagesFa || '۴ صفحه') : (note.pagesEn || '4 Pages')}
{/* Thumbnail Cover Image */} </span>
<div
style={{
width: 140,
aspectRatio: '1 / 1.414',
borderRadius: 8,
overflow: 'hidden',
marginTop: 18,
boxShadow: '0 12px 24px -4px rgba(0,0,0,0.5)',
border: '1px solid rgba(255,255,255,0.15)',
background: NAVY,
}}
>
<img
src={note.coverImage}
alt={isFa ? note.titleFa : (note.titleEn || note.titleFa)}
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
/>
</div>
</div>
{/* Card Body */}
<div
style={{
padding: '20px 22px',
display: 'flex',
flexDirection: 'column',
flex: '1 1 auto',
}}
>
<div
style={{
fontSize: 11,
color: 'rgba(3,35,64,0.55)',
fontWeight: 700,
marginBottom: 8,
display: 'flex',
justifyContent: 'space-between',
}}
>
<span>{isFa ? (note.dateFa || 'مرداد ۱۴۰۵') : (note.dateEn || 'August 2026')}</span>
<span>{isFa ? (note.pagesFa || '۴ صفحه') : (note.pagesEn || '4 Pages')}</span>
</div> </div>
<h4 <h4
onClick={() => openPreview(note)}
style={{ style={{
fontSize: 16, fontSize: 13,
fontWeight: 900, fontWeight: 800,
color: NAVY, color: NAVY,
lineHeight: 1.45, lineHeight: 1.4,
margin: '0 0 8px', margin: '0 0 2px',
minHeight: 46, cursor: 'pointer',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}} }}
title={isFa ? note.titleFa : (note.titleEn || note.titleFa)}
> >
{isFa ? note.titleFa : (note.titleEn || note.titleFa)} {isFa ? note.titleFa : (note.titleEn || note.titleFa)}
</h4> </h4>
@ -594,32 +426,22 @@ export default function TechnogenSection() {
{note.subtitleFa && ( {note.subtitleFa && (
<p <p
style={{ style={{
fontSize: 12, fontSize: 11,
lineHeight: 1.7, lineHeight: 1.5,
color: 'rgba(3,35,64,0.7)', color: 'rgba(3,35,64,0.65)',
margin: '0 0 16px', margin: 0,
flex: '1 1 auto', whiteSpace: 'nowrap',
display: '-webkit-box',
WebkitLineClamp: 3,
WebkitBoxOrient: 'vertical',
overflow: 'hidden', overflow: 'hidden',
textOverflow: 'ellipsis',
}} }}
> >
{isFa ? note.subtitleFa : (note.subtitleEn || note.subtitleFa)} {isFa ? note.subtitleFa : (note.subtitleEn || note.subtitleFa)}
</p> </p>
)} )}
</div>
{/* Actions */} {/* Quick Action Buttons */}
<div <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
style={{
display: 'flex',
alignItems: 'center',
gap: 8,
paddingTop: 12,
borderTop: '1px solid rgba(3,35,64,0.06)',
marginTop: 'auto',
}}
>
{note.fileUrl && ( {note.fileUrl && (
<a <a
href={note.fileUrl} href={note.fileUrl}
@ -627,24 +449,21 @@ export default function TechnogenSection() {
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
style={{ style={{
flex: '1 1 0',
display: 'inline-flex', display: 'inline-flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
gap: 6, width: 32,
height: 32,
borderRadius: 8,
background: 'rgba(3,35,64,0.06)', background: 'rgba(3,35,64,0.06)',
color: NAVY, color: NAVY,
fontSize: 12,
fontWeight: 800,
padding: '8px 12px',
borderRadius: 8,
textDecoration: 'none', textDecoration: 'none',
transition: 'all 0.2s', transition: 'all 0.15s',
}} }}
className="hover:!bg-navy hover:!text-white" className="hover:!bg-navy hover:!text-white"
title={isFa ? 'دانلود فایل PDF' : 'Download PDF'}
> >
<Download size={14} /> <Download size={14} />
<span>{isFa ? 'دانلود PDF' : 'Download'}</span>
</a> </a>
)} )}
@ -654,25 +473,22 @@ export default function TechnogenSection() {
display: 'inline-flex', display: 'inline-flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
gap: 6, width: 32,
height: 32,
borderRadius: 8,
background: 'transparent', background: 'transparent',
border: '1px solid rgba(3,35,64,0.15)', border: '1px solid rgba(3,35,64,0.15)',
color: NAVY, color: NAVY,
fontSize: 12,
fontWeight: 700,
padding: '8px 12px',
borderRadius: 8,
cursor: 'pointer', cursor: 'pointer',
transition: 'all 0.2s', transition: 'all 0.15s',
}} }}
className="hover:!border-navy" className="hover:!border-navy"
title={isFa ? 'مشاهده آنلاین' : 'Preview'}
> >
<Eye size={14} /> <Eye size={14} />
<span>{isFa ? 'مشاهده' : 'View'}</span>
</button> </button>
</div> </div>
</div> </motion.div>
</motion.article>
))} ))}
</div> </div>
</div> </div>