From 6cd77b1b23a25465a96e6c8b5667fdf93c2f9d2b Mon Sep 17 00:00:00 2001
From: Rajat yadav <yadavrajat1210@gmail.com>
Date: Fri, 6 Feb 2026 00:24:54 +0530
Subject: [PATCH] refactor: extract Hero animations to reusable AnimatedGlow
 component Replaced CSS keyframe animations with Framer Motion in both Landing
 and Home page Hero components. Created a shared AnimatedGlow component in
 utils for better code reusability and testing.

---
 .../components/HomeComponents/Hero/Hero.tsx   |  9 ++-
 .../__snapshots__/Hero.test.tsx.snap          |  3 +-
 .../LandingComponents/Hero/Hero.tsx           |  3 +-
 .../__snapshots__/Hero.test.tsx.snap          |  3 +-
 .../src/components/utils/AnimatedGlow.tsx     | 31 ++++++++++
 frontend/src/index.css                        | 62 -------------------
 6 files changed, 45 insertions(+), 66 deletions(-)
 create mode 100644 frontend/src/components/utils/AnimatedGlow.tsx

diff --git a/frontend/src/components/HomeComponents/Hero/Hero.tsx b/frontend/src/components/HomeComponents/Hero/Hero.tsx
index 5bf4ef83..a56d982d 100644
--- a/frontend/src/components/HomeComponents/Hero/Hero.tsx
+++ b/frontend/src/components/HomeComponents/Hero/Hero.tsx
@@ -3,6 +3,7 @@ import { CopyButton } from './CopyButton';
 import { ToastNotification } from './ToastNotification';
 import { useState } from 'react';
 import { Eye, EyeOff } from 'lucide-react';
+import { AnimatedGlow } from '@/components/utils/AnimatedGlow';
 
 export const Hero = (props: Props) => {
   const [showUuid, setShowUuid] = useState(true);
@@ -94,7 +95,13 @@ export const Hero = (props: Props) => {
         </div>
       </div>
 
-      <div className="shadow"></div>
+      <AnimatedGlow
+        className="absolute top-[200px] w-[260px] h-[400px] lg:top-[200px] lg:w-[260px] lg:h-[400px] md:top-[70px] md:w-[100px] md:h-[350px]"
+        style={{
+          rotate: '35deg',
+          borderRadius: '24px',
+        }}
+      />
 
       <ToastNotification />
     </section>
diff --git a/frontend/src/components/HomeComponents/Hero/__tests__/__snapshots__/Hero.test.tsx.snap b/frontend/src/components/HomeComponents/Hero/__tests__/__snapshots__/Hero.test.tsx.snap
index 1147dc0c..d55777ba 100644
--- a/frontend/src/components/HomeComponents/Hero/__tests__/__snapshots__/Hero.test.tsx.snap
+++ b/frontend/src/components/HomeComponents/Hero/__tests__/__snapshots__/Hero.test.tsx.snap
@@ -167,7 +167,8 @@ exports[`Hero component using snapshot renders correctly 1`] = `
       </div>
     </div>
     <div
-      class="shadow"
+      class="absolute top-[200px] w-[260px] h-[400px] lg:top-[200px] lg:w-[260px] lg:h-[400px] md:top-[70px] md:w-[100px] md:h-[350px]"
+      style="filter: blur(150px); border-radius: 24px; transform: rotate(35deg);"
     />
     <div
       data-testid="toast-notification"
diff --git a/frontend/src/components/LandingComponents/Hero/Hero.tsx b/frontend/src/components/LandingComponents/Hero/Hero.tsx
index 73afe01f..2c93cc75 100644
--- a/frontend/src/components/LandingComponents/Hero/Hero.tsx
+++ b/frontend/src/components/LandingComponents/Hero/Hero.tsx
@@ -3,6 +3,7 @@ import { Button } from '../../ui/button';
 import { buttonVariants } from '../../ui/button';
 import { HeroCards } from './HeroCards';
 import { GitHubLogoIcon } from '@radix-ui/react-icons';
+import { AnimatedGlow } from '@/components/utils/AnimatedGlow';
 
 export const Hero = () => {
   return (
@@ -51,7 +52,7 @@ export const Hero = () => {
         <HeroCards />
       </div>
 
-      <div className="shadow"></div>
+      <AnimatedGlow className="absolute top-[200px] w-[300px] h-[400px] lg:w-[400px] lg:h-[400px] md:top-[150px] md:w-[200px] md:h-[300px]" />
     </section>
   );
 };
diff --git a/frontend/src/components/LandingComponents/Hero/__tests__/__snapshots__/Hero.test.tsx.snap b/frontend/src/components/LandingComponents/Hero/__tests__/__snapshots__/Hero.test.tsx.snap
index 3c459e6d..d05f52ea 100644
--- a/frontend/src/components/LandingComponents/Hero/__tests__/__snapshots__/Hero.test.tsx.snap
+++ b/frontend/src/components/LandingComponents/Hero/__tests__/__snapshots__/Hero.test.tsx.snap
@@ -84,7 +84,8 @@ exports[`Hero component using snapshot renders correctly 1`] = `
       </div>
     </div>
     <div
-      class="shadow"
+      class="absolute top-[200px] w-[300px] h-[400px] lg:w-[400px] lg:h-[400px] md:top-[150px] md:w-[200px] md:h-[300px]"
+      style="filter: blur(150px);"
     />
   </section>
 </DocumentFragment>
diff --git a/frontend/src/components/utils/AnimatedGlow.tsx b/frontend/src/components/utils/AnimatedGlow.tsx
new file mode 100644
index 00000000..876b4cf7
--- /dev/null
+++ b/frontend/src/components/utils/AnimatedGlow.tsx
@@ -0,0 +1,31 @@
+import { motion } from 'framer-motion';
+
+interface AnimatedGlowProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export const AnimatedGlow = ({ className, style }: AnimatedGlowProps) => {
+  return (
+    <motion.div
+      className={className}
+      style={{
+        filter: 'blur(150px)',
+        ...style,
+      }}
+      animate={{
+        background: [
+          'hsla(330, 100%, 50%, 20%)',
+          'hsla(240, 100%, 50%, 80%)',
+          'hsla(330, 100%, 50%, 20%)',
+        ],
+        right: ['460px', '160px', '460px'],
+      }}
+      transition={{
+        duration: 8,
+        repeat: Infinity,
+        ease: 'linear',
+      }}
+    />
+  );
+};
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f2c53fa9..cc1c72cc 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,65 +1,3 @@
 html {
   scroll-behavior: smooth;
 }
-
-/* HeroCards background shadow */
-.shadow {
-  position: absolute;
-  background: hsla(330, 100%, 50%, 0%);
-  border-radius: 24px;
-  rotate: 35deg;
-
-  width: 260px;
-  top: 200px;
-  height: 400px;
-  filter: blur(150px);
-  animation: shadow-slide infinite 4s linear alternate;
-}
-
-@keyframes shadow-slide {
-  from {
-    background: hsla(330, 100%, 50%, 20%); /* Pink shadow color */
-    right: 460px;
-  }
-  to {
-    background: hsla(240, 100%, 50%, 80%); /* Blue shadow color */
-    right: 160px;
-  }
-}
-
-@media (max-width: 1024px) {
-  .shadow {
-    top: 70px;
-  }
-
-  @keyframes shadow-slide {
-    from {
-      background: hsla(330, 100%, 50%, 20%); /* Pink shadow color */
-      right: 460px;
-    }
-    to {
-      background: hsla(240, 100%, 50%, 50%); /* Blue shadow color */
-      right: 160px;
-    }
-  }
-}
-
-@media (max-width: 768px) {
-  .shadow {
-    top: 70px;
-    width: 100px;
-    height: 350px;
-    filter: blur(60px);
-  }
-
-  @keyframes shadow-slide {
-    from {
-      background: hsla(330, 100%, 50%, 20%); /* Pink shadow color */
-      right: 280px;
-    }
-    to {
-      background: hsla(240, 100%, 50%, 30%); /* Blue shadow color */
-      right: 100px;
-    }
-  }
-}