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"
dir={isFa ? 'rtl' : 'ltr'}
style={{
background: 'var(--paper)',
borderTop: '1px solid var(--rule-thin)',
borderBottom: '1px solid var(--rule-thin)',
padding: '44px 0 52px',
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',
position: 'relative',
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 ── */}
<div style={{ marginBottom: 24 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
@ -66,7 +94,7 @@ export default function TechnogenSection() {
style={{
fontSize: 'clamp(20px, 2.2vw, 28px)',
fontWeight: 900,
color: NAVY,
color: '#FFFFFF',
margin: 0,
letterSpacing: isFa ? '-0.5px' : '-0.2px',
lineHeight: 1.3,
@ -78,7 +106,7 @@ export default function TechnogenSection() {
<p
style={{
fontSize: 13,
color: 'rgba(3,35,64,0.65)',
color: 'rgba(255,255,255,0.7)',
margin: '6px 0 0',
paddingInlineStart: 16,
lineHeight: 1.6,
@ -112,9 +140,10 @@ export default function TechnogenSection() {
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)',
background: 'linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%)',
boxShadow: '0 16px 36px -10px rgba(0,0,0,0.5)',
border: '1px solid rgba(205,158,83,0.3)',
backdropFilter: 'blur(12px)',
padding: '24px 28px',
display: 'flex',
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"
>
{/* 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 */}
<div
style={{
@ -154,8 +169,8 @@ export default function TechnogenSection() {
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)',
boxShadow: '0 16px 32px -6px rgba(0,0,0,0.7)',
border: '1px solid rgba(255,255,255,0.2)',
cursor: 'pointer',
background: NAVY,
}}
@ -180,7 +195,7 @@ export default function TechnogenSection() {
}}
className="max-md:!text-center"
>
{/* Meta Pills */}
{/* Tag Pill */}
<div
style={{
display: 'flex',
@ -197,30 +212,12 @@ export default function TechnogenSection() {
color: NAVY,
fontSize: 10,
fontWeight: 900,
padding: '3px 8px',
padding: '3px 9px',
borderRadius: 4,
}}
>
{isFa ? 'مطالعه تطبیقی ویژه' : 'Flagship Study'}
</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>
{/* Title */}
@ -298,7 +295,7 @@ export default function TechnogenSection() {
alignItems: 'center',
gap: 6,
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',
fontSize: 12,
fontWeight: 700,
@ -337,10 +334,11 @@ export default function TechnogenSection() {
transition={{ duration: 0.4, ease: EASE, delay: idx * 0.08 }}
whileHover={{ y: -2 }}
style={{
background: '#FFFFFF',
background: 'linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%)',
borderRadius: 14,
border: '1px solid rgba(3,35,64,0.08)',
boxShadow: '0 4px 14px -4px rgba(3,35,64,0.05)',
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',
@ -357,8 +355,8 @@ export default function TechnogenSection() {
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)',
boxShadow: '0 6px 14px rgba(0,0,0,0.35)',
border: '1px solid rgba(255,255,255,0.15)',
background: NAVY,
cursor: 'pointer',
}}
@ -373,25 +371,10 @@ export default function TechnogenSection() {
{/* 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(3,35,64,0.06)',
color: NAVY,
fontSize: 9,
fontWeight: 800,
padding: '2px 6px',
borderRadius: 3,
direction: 'ltr',
}}
>
{note.code}
</span>
)}
<span
style={{
background: 'rgba(205,158,83,0.15)',
color: '#9c6f28',
background: 'rgba(205,158,83,0.2)',
color: '#f0c784',
fontSize: 9,
fontWeight: 800,
padding: '2px 6px',
@ -400,9 +383,6 @@ export default function TechnogenSection() {
>
{isFa ? (note.tagFa || 'یادداشت تحلیلی') : (note.tagEn || 'Analytical Note')}
</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
@ -410,7 +390,7 @@ export default function TechnogenSection() {
style={{
fontSize: 13,
fontWeight: 800,
color: NAVY,
color: '#FFFFFF',
lineHeight: 1.4,
margin: '0 0 2px',
cursor: 'pointer',
@ -428,7 +408,7 @@ export default function TechnogenSection() {
style={{
fontSize: 11,
lineHeight: 1.5,
color: 'rgba(3,35,64,0.65)',
color: 'rgba(255,255,255,0.65)',
margin: 0,
whiteSpace: 'nowrap',
overflow: 'hidden',
@ -455,12 +435,12 @@ export default function TechnogenSection() {
width: 32,
height: 32,
borderRadius: 8,
background: 'rgba(3,35,64,0.06)',
color: NAVY,
background: 'rgba(255,255,255,0.1)',
color: '#FFFFFF',
textDecoration: 'none',
transition: 'all 0.15s',
}}
className="hover:!bg-navy hover:!text-white"
className="hover:!bg-gold hover:!text-navy"
title={isFa ? 'دانلود فایل PDF' : 'Download PDF'}
>
<Download size={14} />
@ -477,12 +457,12 @@ export default function TechnogenSection() {
height: 32,
borderRadius: 8,
background: 'transparent',
border: '1px solid rgba(3,35,64,0.15)',
color: NAVY,
border: '1px solid rgba(255,255,255,0.2)',
color: '#FFFFFF',
cursor: 'pointer',
transition: 'all 0.15s',
}}
className="hover:!border-navy"
className="hover:!border-gold"
title={isFa ? 'مشاهده آنلاین' : 'Preview'}
>
<Eye size={14} />
@ -559,7 +539,7 @@ export default function TechnogenSection() {
<FileText size={20} color={GOLD} />
<div style={{ minWidth: 0 }}>
<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
style={{