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

style: remove TGN code labels and page counts, add contrasting luxury dark navy background to Technogen section

This commit is contained in:
alireza 2026-08-25 15:45:10 +03:30
parent bda94d7124
commit c6fc734a9e
1 changed files with 61 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,15 +49,43 @@ export default function TechnogenSection() {
id="technogen" id="technogen"
dir={isFa ? 'rtl' : 'ltr'} dir={isFa ? 'rtl' : 'ltr'}
style={{ style={{
background: 'var(--paper)', background: 'linear-gradient(180deg, #021a30 0%, #042442 50%, #021629 100%)',
borderTop: '1px solid var(--rule-thin)', borderTop: '1px solid rgba(205,158,83,0.3)',
borderBottom: '1px solid var(--rule-thin)', borderBottom: '1px solid rgba(205,158,83,0.3)',
padding: '44px 0 52px', padding: '48px 0 54px',
position: 'relative', position: 'relative',
overflow: 'hidden', overflow: 'hidden',
}} }}
> >
<div className="max-w-7xl mx-auto px-12 max-md:px-4"> {/* Background ambient lighting */}
<div
style={{
position: 'absolute',
top: '-20%',
right: isFa ? '-5%' : 'auto',
left: isFa ? 'auto' : '-5%',
width: '500px',
height: '500px',
borderRadius: '50%',
background: 'radial-gradient(circle, rgba(205,158,83,0.12) 0%, transparent 70%)',
pointerEvents: 'none',
}}
/>
<div
style={{
position: 'absolute',
bottom: '-25%',
left: isFa ? '-10%' : 'auto',
right: isFa ? 'auto' : '-10%',
width: '550px',
height: '550px',
borderRadius: '50%',
background: 'radial-gradient(circle, rgba(0,174,239,0.1) 0%, transparent 70%)',
pointerEvents: 'none',
}}
/>
<div className="max-w-7xl mx-auto px-12 max-md:px-4" style={{ position: 'relative', zIndex: 1 }}>
{/* ── Section Header with Gold Accent Line ── */} {/* ── Section Header with Gold Accent Line ── */}
<div style={{ marginBottom: 24 }}> <div style={{ marginBottom: 24 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}> <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
@ -66,7 +94,7 @@ export default function TechnogenSection() {
style={{ style={{
fontSize: 'clamp(20px, 2.2vw, 28px)', fontSize: 'clamp(20px, 2.2vw, 28px)',
fontWeight: 900, fontWeight: 900,
color: NAVY, color: '#FFFFFF',
margin: 0, margin: 0,
letterSpacing: isFa ? '-0.5px' : '-0.2px', letterSpacing: isFa ? '-0.5px' : '-0.2px',
lineHeight: 1.3, lineHeight: 1.3,
@ -78,7 +106,7 @@ export default function TechnogenSection() {
<p <p
style={{ style={{
fontSize: 13, fontSize: 13,
color: 'rgba(3,35,64,0.65)', color: 'rgba(255,255,255,0.7)',
margin: '6px 0 0', margin: '6px 0 0',
paddingInlineStart: 16, paddingInlineStart: 16,
lineHeight: 1.6, lineHeight: 1.6,
@ -112,9 +140,10 @@ export default function TechnogenSection() {
position: 'relative', position: 'relative',
borderRadius: 18, borderRadius: 18,
overflow: 'hidden', overflow: 'hidden',
background: `linear-gradient(135deg, ${NAVY} 0%, #062b4f 60%, #031e36 100%)`, background: 'linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%)',
boxShadow: '0 12px 30px -10px rgba(3,35,64,0.25)', boxShadow: '0 16px 36px -10px rgba(0,0,0,0.5)',
border: '1px solid rgba(255,255,255,0.08)', border: '1px solid rgba(205,158,83,0.3)',
backdropFilter: 'blur(12px)',
padding: '24px 28px', padding: '24px 28px',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
@ -122,20 +151,6 @@ export default function TechnogenSection() {
}} }}
className="max-lg:!col-span-1 max-md:!flex-col max-md:!p-5 max-md:!gap-4" className="max-lg:!col-span-1 max-md:!flex-col max-md:!p-5 max-md:!gap-4"
> >
{/* Subtle background glow */}
<div
style={{
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 */} {/* Cover Thumbnail */}
<div <div
style={{ style={{
@ -154,8 +169,8 @@ export default function TechnogenSection() {
aspectRatio: '1 / 1.414', aspectRatio: '1 / 1.414',
borderRadius: 10, borderRadius: 10,
overflow: 'hidden', overflow: 'hidden',
boxShadow: '0 14px 28px -6px rgba(0,0,0,0.5)', boxShadow: '0 16px 32px -6px rgba(0,0,0,0.7)',
border: '1px solid rgba(255,255,255,0.15)', border: '1px solid rgba(255,255,255,0.2)',
cursor: 'pointer', cursor: 'pointer',
background: NAVY, background: NAVY,
}} }}
@ -180,7 +195,7 @@ export default function TechnogenSection() {
}} }}
className="max-md:!text-center" className="max-md:!text-center"
> >
{/* Meta Pills */} {/* Tag Pill */}
<div <div
style={{ style={{
display: 'flex', display: 'flex',
@ -197,30 +212,12 @@ export default function TechnogenSection() {
color: NAVY, color: NAVY,
fontSize: 10, fontSize: 10,
fontWeight: 900, fontWeight: 900,
padding: '3px 8px', padding: '3px 9px',
borderRadius: 4, borderRadius: 4,
}} }}
> >
{isFa ? 'مطالعه تطبیقی ویژه' : 'Flagship Study'} {isFa ? 'مطالعه تطبیقی ویژه' : 'Flagship Study'}
</span> </span>
{featured.code && (
<span
style={{
background: 'rgba(255,255,255,0.12)',
color: '#fff',
fontSize: 10,
fontWeight: 800,
padding: '3px 8px',
borderRadius: 4,
direction: 'ltr',
}}
>
{featured.code}
</span>
)}
<span style={{ fontSize: 11, color: 'rgba(255,255,255,0.65)', fontWeight: 600 }}>
{isFa ? (featured.pagesFa || '۳۰ صفحه') : (featured.pagesEn || '30 Pages')}
</span>
</div> </div>
{/* Title */} {/* Title */}
@ -298,7 +295,7 @@ export default function TechnogenSection() {
alignItems: 'center', alignItems: 'center',
gap: 6, gap: 6,
background: 'rgba(255,255,255,0.08)', background: 'rgba(255,255,255,0.08)',
border: '1px solid rgba(255,255,255,0.18)', border: '1px solid rgba(255,255,255,0.22)',
color: '#fff', color: '#fff',
fontSize: 12, fontSize: 12,
fontWeight: 700, fontWeight: 700,
@ -337,10 +334,11 @@ export default function TechnogenSection() {
transition={{ duration: 0.4, ease: EASE, delay: idx * 0.08 }} transition={{ duration: 0.4, ease: EASE, delay: idx * 0.08 }}
whileHover={{ y: -2 }} whileHover={{ y: -2 }}
style={{ style={{
background: '#FFFFFF', background: 'linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%)',
borderRadius: 14, borderRadius: 14,
border: '1px solid rgba(3,35,64,0.08)', border: '1px solid rgba(255,255,255,0.1)',
boxShadow: '0 4px 14px -4px rgba(3,35,64,0.05)', boxShadow: '0 8px 20px -6px rgba(0,0,0,0.3)',
backdropFilter: 'blur(8px)',
padding: '12px 14px', padding: '12px 14px',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
@ -357,8 +355,8 @@ export default function TechnogenSection() {
aspectRatio: '1 / 1.414', aspectRatio: '1 / 1.414',
borderRadius: 6, borderRadius: 6,
overflow: 'hidden', overflow: 'hidden',
boxShadow: '0 4px 10px rgba(0,0,0,0.15)', boxShadow: '0 6px 14px rgba(0,0,0,0.35)',
border: '1px solid rgba(3,35,64,0.1)', border: '1px solid rgba(255,255,255,0.15)',
background: NAVY, background: NAVY,
cursor: 'pointer', cursor: 'pointer',
}} }}
@ -373,25 +371,10 @@ export default function TechnogenSection() {
{/* Content */} {/* Content */}
<div style={{ flex: '1 1 0', minWidth: 0 }}> <div style={{ flex: '1 1 0', minWidth: 0 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}> <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
{note.code && (
<span
style={{
background: 'rgba(3,35,64,0.06)',
color: NAVY,
fontSize: 9,
fontWeight: 800,
padding: '2px 6px',
borderRadius: 3,
direction: 'ltr',
}}
>
{note.code}
</span>
)}
<span <span
style={{ style={{
background: 'rgba(205,158,83,0.15)', background: 'rgba(205,158,83,0.2)',
color: '#9c6f28', color: '#f0c784',
fontSize: 9, fontSize: 9,
fontWeight: 800, fontWeight: 800,
padding: '2px 6px', padding: '2px 6px',
@ -400,9 +383,6 @@ export default function TechnogenSection() {
> >
{isFa ? (note.tagFa || 'یادداشت تحلیلی') : (note.tagEn || 'Analytical Note')} {isFa ? (note.tagFa || 'یادداشت تحلیلی') : (note.tagEn || 'Analytical Note')}
</span> </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> </div>
<h4 <h4
@ -410,7 +390,7 @@ export default function TechnogenSection() {
style={{ style={{
fontSize: 13, fontSize: 13,
fontWeight: 800, fontWeight: 800,
color: NAVY, color: '#FFFFFF',
lineHeight: 1.4, lineHeight: 1.4,
margin: '0 0 2px', margin: '0 0 2px',
cursor: 'pointer', cursor: 'pointer',
@ -428,7 +408,7 @@ export default function TechnogenSection() {
style={{ style={{
fontSize: 11, fontSize: 11,
lineHeight: 1.5, lineHeight: 1.5,
color: 'rgba(3,35,64,0.65)', color: 'rgba(255,255,255,0.65)',
margin: 0, margin: 0,
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
overflow: 'hidden', overflow: 'hidden',
@ -455,12 +435,12 @@ export default function TechnogenSection() {
width: 32, width: 32,
height: 32, height: 32,
borderRadius: 8, borderRadius: 8,
background: 'rgba(3,35,64,0.06)', background: 'rgba(255,255,255,0.1)',
color: NAVY, color: '#FFFFFF',
textDecoration: 'none', textDecoration: 'none',
transition: 'all 0.15s', transition: 'all 0.15s',
}} }}
className="hover:!bg-navy hover:!text-white" className="hover:!bg-gold hover:!text-navy"
title={isFa ? 'دانلود فایل PDF' : 'Download PDF'} title={isFa ? 'دانلود فایل PDF' : 'Download PDF'}
> >
<Download size={14} /> <Download size={14} />
@ -477,12 +457,12 @@ export default function TechnogenSection() {
height: 32, height: 32,
borderRadius: 8, borderRadius: 8,
background: 'transparent', background: 'transparent',
border: '1px solid rgba(3,35,64,0.15)', border: '1px solid rgba(255,255,255,0.2)',
color: NAVY, color: '#FFFFFF',
cursor: 'pointer', cursor: 'pointer',
transition: 'all 0.15s', transition: 'all 0.15s',
}} }}
className="hover:!border-navy" className="hover:!border-gold"
title={isFa ? 'مشاهده آنلاین' : 'Preview'} title={isFa ? 'مشاهده آنلاین' : 'Preview'}
> >
<Eye size={14} /> <Eye size={14} />
@ -559,7 +539,7 @@ export default function TechnogenSection() {
<FileText size={20} color={GOLD} /> <FileText size={20} color={GOLD} />
<div style={{ minWidth: 0 }}> <div style={{ minWidth: 0 }}>
<div style={{ fontSize: 11, color: GOLD, fontWeight: 700 }}> <div style={{ fontSize: 11, color: GOLD, fontWeight: 700 }}>
{selectedReport.code} · {isFa ? selectedReport.tagFa : (selectedReport.tagEn || selectedReport.tagFa)} {isFa ? selectedReport.tagFa : (selectedReport.tagEn || selectedReport.tagFa)}
</div> </div>
<div <div
style={{ style={{