feat: remove card labels and add breathing gold border glow animation
This commit is contained in:
alireza
parent
a798a4b5ce
commit
b595699133
|
|
@ -71,6 +71,30 @@ export default function TechnogenSection() {
|
|||
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 */}
|
||||
<div
|
||||
style={{
|
||||
|
|
@ -192,7 +216,7 @@ export default function TechnogenSection() {
|
|||
)}
|
||||
</div>
|
||||
|
||||
{/* ── 5-Card Row / Slider Strip (Like Factory Reports) ── */}
|
||||
{/* ── 5-Card Row / Slider Strip (No Labels, Breathing Border Animation) ── */}
|
||||
<AnimatePresence mode="wait" custom={direction}>
|
||||
<motion.div
|
||||
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"
|
||||
>
|
||||
{currentReports.map((report) => {
|
||||
{currentReports.map((report, idx) => {
|
||||
const isSpecial = !!report.isFeatured
|
||||
return (
|
||||
<motion.div
|
||||
<div
|
||||
key={report.id}
|
||||
whileHover={{ y: -4 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="technogen-card-glow"
|
||||
style={{
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
background: isSpecial
|
||||
? 'linear-gradient(135deg, rgba(205,158,83,0.12) 0%, rgba(3,35,64,0.4) 100%)'
|
||||
: 'linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 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.08) 0%, rgba(255,255,255,0.02) 100%)',
|
||||
borderRadius: 20,
|
||||
border: isSpecial ? '1px solid rgba(205,158,83,0.4)' : '1px solid rgba(255,255,255,0.12)',
|
||||
boxShadow: '0 12px 28px -12px rgba(0,0,0,0.5)',
|
||||
border: '1px solid rgba(205,158,83,0.3)',
|
||||
backdropFilter: 'blur(10px)',
|
||||
overflow: 'hidden',
|
||||
paddingBottom: 4,
|
||||
animationDelay: `${idx * 0.7}s`,
|
||||
}}
|
||||
>
|
||||
{/* Top Cover Image */}
|
||||
{/* Top Cover Image (Clean, No Labels) */}
|
||||
<div
|
||||
onClick={() => openPreview(report)}
|
||||
style={{
|
||||
|
|
@ -250,35 +273,10 @@ export default function TechnogenSection() {
|
|||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
display: 'block',
|
||||
transition: 'transform 0.3s ease',
|
||||
transition: 'transform 0.35s ease',
|
||||
}}
|
||||
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>
|
||||
|
||||
{/* Card Content Body */}
|
||||
|
|
@ -394,11 +392,11 @@ export default function TechnogenSection() {
|
|||
left: 0,
|
||||
width: '100%',
|
||||
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',
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</motion.div>
|
||||
|
|
@ -469,9 +467,6 @@ export default function TechnogenSection() {
|
|||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 0 }}>
|
||||
<FileText size={20} color={GOLD} />
|
||||
<div style={{ minWidth: 0 }}>
|
||||
<div style={{ fontSize: 11, color: GOLD, fontWeight: 700 }}>
|
||||
{isFa ? selectedReport.tagFa : (selectedReport.tagEn || selectedReport.tagFa)}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 15,
|
||||
|
|
|
|||
Loading…
Reference in New Issue