Hero section dashboard frontend revamp (#459)

* TaskDialog UI updated, overlapping issue resolved

* truncation is removed

* removed hover tooltips to show full text

* replace Hero CSS animation with Framer Motion

* fixed test fail issue

* improved animation

* refactor hero animation into shared component

Author: HarshRaj29004

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 { AnimatedHeroGlow } from '@/components/utils/AnimatedHeroGlow';
 
 export const Hero = (props: Props) => {
   const [showUuid, setShowUuid] = useState(true);
@@ -94,7 +95,7 @@ export const Hero = (props: Props) => {
         </div>
       </div>
 
-      <div className="shadow"></div>
+      <AnimatedHeroGlow />
 
       <ToastNotification />
     </section>

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

@@ -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 { AnimatedHeroGlow } from '@/components/utils/AnimatedHeroGlow';
 
 export const Hero = () => {
   return (
@@ -51,7 +52,7 @@ export const Hero = () => {
         <HeroCards />
       </div>
 
-      <div className="shadow"></div>
+      <AnimatedHeroGlow />
     </section>
   );
 };

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>

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

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