feat: remove card labels and add breathing gold border glow animation
This commit is contained in:
parent
a798a4b5ce
commit
b595699133
|
|
@ -71,6 +71,30 @@ export default function TechnogenSection() {
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
{/* Dynamic CSS keyframes for breathing border glow */}
|
||||||
|
<style>{`
|
||||||
|
@keyframes technogenCardBreathe {
|
||||||
|
0%, 100% {
|
||||||
|
border-color: rgba(205, 158, 83, 0.25);
|
||||||
|
box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5), 0 0 14px 0px rgba(205, 158, 83, 0.12);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
border-color: rgba(205, 158, 83, 0.75);
|
||||||
|
box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.65), 0 0 26px 3px rgba(205, 158, 83, 0.38);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.technogen-card-glow {
|
||||||
|
animation: technogenCardBreathe 4s ease-in-out infinite;
|
||||||
|
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
|
||||||
|
}
|
||||||
|
.technogen-card-glow:hover {
|
||||||
|
animation: none;
|
||||||
|
border-color: rgba(205, 158, 83, 0.9) !important;
|
||||||
|
box-shadow: 0 20px 42px -10px rgba(0, 0, 0, 0.75), 0 0 32px 5px rgba(205, 158, 83, 0.55) !important;
|
||||||
|
transform: translateY(-6px) scale(1.015);
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
|
||||||
{/* Ambient background lighting */}
|
{/* Ambient background lighting */}
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
|
|
@ -192,7 +216,7 @@ export default function TechnogenSection() {
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* ── 5-Card Row / Slider Strip (Like Factory Reports) ── */}
|
{/* ── 5-Card Row / Slider Strip (No Labels, Breathing Border Animation) ── */}
|
||||||
<AnimatePresence mode="wait" custom={direction}>
|
<AnimatePresence mode="wait" custom={direction}>
|
||||||
<motion.div
|
<motion.div
|
||||||
key={page}
|
key={page}
|
||||||
|
|
@ -208,29 +232,28 @@ export default function TechnogenSection() {
|
||||||
}}
|
}}
|
||||||
className="max-lg:!grid-cols-3 max-md:!grid-cols-2 max-sm:!grid-cols-1"
|
className="max-lg:!grid-cols-3 max-md:!grid-cols-2 max-sm:!grid-cols-1"
|
||||||
>
|
>
|
||||||
{currentReports.map((report) => {
|
{currentReports.map((report, idx) => {
|
||||||
const isSpecial = !!report.isFeatured
|
const isSpecial = !!report.isFeatured
|
||||||
return (
|
return (
|
||||||
<motion.div
|
<div
|
||||||
key={report.id}
|
key={report.id}
|
||||||
whileHover={{ y: -4 }}
|
className="technogen-card-glow"
|
||||||
transition={{ duration: 0.2 }}
|
|
||||||
style={{
|
style={{
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
background: isSpecial
|
background: isSpecial
|
||||||
? 'linear-gradient(135deg, rgba(205,158,83,0.12) 0%, rgba(3,35,64,0.4) 100%)'
|
? 'linear-gradient(135deg, rgba(205,158,83,0.14) 0%, rgba(3,35,64,0.5) 100%)'
|
||||||
: 'linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%)',
|
: 'linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%)',
|
||||||
borderRadius: 20,
|
borderRadius: 20,
|
||||||
border: isSpecial ? '1px solid rgba(205,158,83,0.4)' : '1px solid rgba(255,255,255,0.12)',
|
border: '1px solid rgba(205,158,83,0.3)',
|
||||||
boxShadow: '0 12px 28px -12px rgba(0,0,0,0.5)',
|
|
||||||
backdropFilter: 'blur(10px)',
|
backdropFilter: 'blur(10px)',
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
paddingBottom: 4,
|
paddingBottom: 4,
|
||||||
|
animationDelay: `${idx * 0.7}s`,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* Top Cover Image */}
|
{/* Top Cover Image (Clean, No Labels) */}
|
||||||
<div
|
<div
|
||||||
onClick={() => openPreview(report)}
|
onClick={() => openPreview(report)}
|
||||||
style={{
|
style={{
|
||||||
|
|
@ -250,35 +273,10 @@ export default function TechnogenSection() {
|
||||||
height: '100%',
|
height: '100%',
|
||||||
objectFit: 'cover',
|
objectFit: 'cover',
|
||||||
display: 'block',
|
display: 'block',
|
||||||
transition: 'transform 0.3s ease',
|
transition: 'transform 0.35s ease',
|
||||||
}}
|
}}
|
||||||
className="hover:scale-105"
|
className="hover:scale-105"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Tag badge overlay */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: 10,
|
|
||||||
right: isFa ? 10 : 'auto',
|
|
||||||
left: isFa ? 'auto' : 10,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
background: isSpecial ? GOLD : 'rgba(3,35,64,0.85)',
|
|
||||||
color: isSpecial ? NAVY : '#f0c784',
|
|
||||||
border: isSpecial ? 'none' : '1px solid rgba(205,158,83,0.3)',
|
|
||||||
fontSize: 9,
|
|
||||||
fontWeight: 900,
|
|
||||||
padding: '3px 8px',
|
|
||||||
borderRadius: 4,
|
|
||||||
backdropFilter: 'blur(4px)',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{isFa ? (report.tagFa || 'گزارش تکنوژن') : (report.tagEn || 'Technogen Report')}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Card Content Body */}
|
{/* Card Content Body */}
|
||||||
|
|
@ -394,11 +392,11 @@ export default function TechnogenSection() {
|
||||||
left: 0,
|
left: 0,
|
||||||
width: '100%',
|
width: '100%',
|
||||||
height: 3,
|
height: 3,
|
||||||
backgroundColor: isSpecial ? GOLD : 'rgba(205,158,83,0.3)',
|
backgroundColor: isSpecial ? GOLD : 'rgba(205,158,83,0.4)',
|
||||||
borderRadius: '0 0 20px 20px',
|
borderRadius: '0 0 20px 20px',
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</motion.div>
|
</div>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
@ -469,9 +467,6 @@ export default function TechnogenSection() {
|
||||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 0 }}>
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 0 }}>
|
||||||
<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 }}>
|
|
||||||
{isFa ? selectedReport.tagFa : (selectedReport.tagEn || selectedReport.tagFa)}
|
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
fontSize: 15,
|
fontSize: 15,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue