improved animation

Author: HarshRaj29004

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

@@ -97,19 +97,21 @@ export const Hero = (props: Props) => {
 
       <motion.div
         aria-hidden="true"
-        className="pointer-events-none absolute top-[70px] lg:top-[200px] h-[350px] w-[100px] md:h-[400px] md:w-[260px] rounded-[24px] rotate-[35deg] blur-[60px] md:blur-[150px]"
-        style={{ right: '160px' }}
-        animate={
-          process.env.NODE_ENV === 'test'
-            ? {}
-            : {
-                backgroundColor: [
-                  'hsla(330, 100%, 50%, 0.2)',
-                  'hsla(240, 100%, 50%, 0.8)',
-                ],
-                x: [300, 0],
-              }
-        }
+        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,

frontend/src/components/HomeComponents/Hero/__tests__/__snapshots__/Hero.test.tsx.snap

@@ -167,7 +167,9 @@ exports[`Hero component using snapshot renders correctly 1`] = `
       </div>
     </div>
     <div
-      class="shadow"
+      aria-hidden="true"
+      class="pointer-events-none absolute rounded-[24px] rotate-[35deg]"
+      style="top: 200px; right: 460px; width: 260px; height: 400px; filter: blur(150px);"
     />
     <div
       data-testid="toast-notification"

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

@@ -54,19 +54,21 @@ export const Hero = () => {
 
       <motion.div
         aria-hidden="true"
-        className="pointer-events-none absolute top-[70px] lg:top-[200px] h-[350px] w-[100px] md:h-[400px] md:w-[260px] rounded-[24px] rotate-[35deg] blur-[60px] md:blur-[150px]"
-        style={{ right: '160px' }}
-        animate={
-          process.env.NODE_ENV === 'test'
-            ? {}
-            : {
-                backgroundColor: [
-                  'hsla(330, 100%, 50%, 0.2)',
-                  'hsla(240, 100%, 50%, 0.8)',
-                ],
-                x: [300, 0],
-              }
-        }
+        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,

frontend/src/components/LandingComponents/Hero/__tests__/__snapshots__/Hero.test.tsx.snap

@@ -84,7 +84,9 @@ exports[`Hero component using snapshot renders correctly 1`] = `
       </div>
     </div>
     <div
-      class="shadow"
+      aria-hidden="true"
+      class="pointer-events-none absolute rounded-[24px] rotate-[35deg]"
+      style="top: 200px; right: 460px; width: 260px; height: 400px; filter: blur(150px);"
     />
   </section>
 </DocumentFragment>