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