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.

Author: Hell1213

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>

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"

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>
   );
 };

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>

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',
+      }}
+    />
+  );
+};

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;
-    }
-  }
-}