refactor: replace Hero CSS animations with Framer Motion

Replaced custom CSS keyframe animations with Framer Motion in the Hero section to improve consistency and reduce build size. Removed 62 lines of CSS while maintaining identical visual appearance.

Fixes #450

Author: Hell1213

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 { motion } from 'framer-motion';
 
 export const Hero = () => {
   return (
@@ -51,7 +52,25 @@ export const Hero = () => {
         <HeroCards />
       </div>
 
-      <div className="shadow"></div>
+      <motion.div
+        className="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)',
+        }}
+        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',
+        }}
+      />
     </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/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;
-    }
-  }
-}