From 7b66b5bd21c56a1986fef90c88f505044828f1d1 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: 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
---
 .../LandingComponents/Hero/Hero.tsx           | 21 ++++++-
 .../__snapshots__/Hero.test.tsx.snap          |  3 +-
 frontend/src/index.css                        | 62 -------------------
 3 files changed, 22 insertions(+), 64 deletions(-)

diff --git a/frontend/src/components/LandingComponents/Hero/Hero.tsx b/frontend/src/components/LandingComponents/Hero/Hero.tsx
index 73afe01f..ddbb9e32 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 { 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>
   );
 };
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/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;
-    }
-  }
-}