From b595699133a0d41ba913de443173d38706015263 Mon Sep 17 00:00:00 2001
From: alireza <alirezaameria2@gmail.com>
Date: Tue, 25 Aug 2026 16:09:45 +0330
Subject: [PATCH] feat: remove card labels and add breathing gold border glow
 animation

---
 .../pages/Home/sections/TechnogenSection.tsx  | 77 +++++++++----------
 1 file changed, 36 insertions(+), 41 deletions(-)

diff --git a/frontend/src/pages/Home/sections/TechnogenSection.tsx b/frontend/src/pages/Home/sections/TechnogenSection.tsx
index 96e8886..a8d06e0 100644
--- a/frontend/src/pages/Home/sections/TechnogenSection.tsx
+++ b/frontend/src/pages/Home/sections/TechnogenSection.tsx
@@ -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,