refactor hero animation into shared component

Author: HarshRaj29004

frontend/src/components/HomeComponents/Hero/Hero.tsx

@@ -3,7 +3,7 @@ import { CopyButton } from './CopyButton';
 import { ToastNotification } from './ToastNotification';
 import { useState } from 'react';
 import { Eye, EyeOff } from 'lucide-react';
-import { motion } from 'framer-motion';
+import { AnimatedHeroGlow } from '@/components/utils/AnimatedHeroGlow';
 
 export const Hero = (props: Props) => {
   const [showUuid, setShowUuid] = useState(true);
@@ -95,30 +95,7 @@ export const Hero = (props: Props) => {
         </div>
       </div>
 
-      <motion.div
-        aria-hidden="true"
-        className="pointer-events-none absolute rounded-[24px] rotate-[35deg]"
-        style={{
-          top: 200,
-          right: 460,
-          width: 260,
-          height: 400,
-          filter: 'blur(150px)',
-        }}
-        animate={{
-          right: [460, 160],
-          backgroundColor: [
-            'hsla(330, 100%, 50%, 0.2)',
-            'hsla(240, 100%, 50%, 0.8)',
-          ],
-        }}
-        transition={{
-          duration: 4,
-          repeat: Infinity,
-          repeatType: 'reverse',
-          ease: 'linear',
-        }}
-      />
+      <AnimatedHeroGlow />
 
       <ToastNotification />
     </section>

frontend/src/components/LandingComponents/Hero/Hero.tsx

@@ -3,7 +3,7 @@ import { Button } from '../../ui/button';
 import { buttonVariants } from '../../ui/button';
 import { HeroCards } from './HeroCards';
 import { GitHubLogoIcon } from '@radix-ui/react-icons';
-import { motion } from 'framer-motion';
+import { AnimatedHeroGlow } from '@/components/utils/AnimatedHeroGlow';
 
 export const Hero = () => {
   return (
@@ -52,30 +52,7 @@ export const Hero = () => {
         <HeroCards />
       </div>
 
-      <motion.div
-        aria-hidden="true"
-        className="pointer-events-none absolute rounded-[24px] rotate-[35deg]"
-        style={{
-          top: 200,
-          right: 460,
-          width: 260,
-          height: 400,
-          filter: 'blur(150px)',
-        }}
-        animate={{
-          right: [460, 160],
-          backgroundColor: [
-            'hsla(330, 100%, 50%, 0.2)',
-            'hsla(240, 100%, 50%, 0.8)',
-          ],
-        }}
-        transition={{
-          duration: 4,
-          repeat: Infinity,
-          repeatType: 'reverse',
-          ease: 'linear',
-        }}
-      />
+      <AnimatedHeroGlow />
     </section>
   );
 };

frontend/src/components/utils/AnimatedHeroGlow.tsx

@@ -0,0 +1,30 @@
+import { motion } from 'framer-motion';
+
+export const AnimatedHeroGlow = () => {
+  return (
+    <motion.div
+      aria-hidden="true"
+      className="pointer-events-none absolute rounded-[24px] rotate-[35deg]"
+      style={{
+        top: 200,
+        right: 460,
+        width: 260,
+        height: 400,
+        filter: 'blur(150px)',
+      }}
+      animate={{
+        right: [460, 160],
+        backgroundColor: [
+          'hsla(330, 100%, 50%, 0.2)',
+          'hsla(240, 100%, 50%, 0.8)',
+        ],
+      }}
+      transition={{
+        duration: 4,
+        repeat: Infinity,
+        repeatType: 'reverse',
+        ease: 'linear',
+      }}
+    />
+  );
+};