Merge pull request #252 from harshmishra19/Add/animation

Added animation

Author: ajay-dhangar

package-lock.json

@@ -53,7 +53,8 @@
     "redux": "^5.0.1",
     "rehype-katex": "^7.0.0",
     "remark-math": "^6.0.0",
-    "styled-components": "^6.1.8"
+    "styled-components": "^6.1.8",
+    "vanilla-tilt": "^1.8.1"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^3.3.2",

package.json

@@ -1,7 +1,8 @@
 // skipcq: JS-W1028
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import "./header.css";
-import Link from "@docusaurus/Link"; 
+import Link from "@docusaurus/Link";
+import VanillaTilt from "vanilla-tilt";
 
 /**
  * Renders the header component of the application.
@@ -13,7 +14,10 @@ const HeaderContent = () => {
     <div className="chh__header-content">
       <h1 className="gradient__text">Level Up Skills with CodeHarborHub</h1>
       <p>
-        Tired of limitations? CodeHarborHub shatters them. We&apos;re the exclusive platform offering a comprehensive tech curriculum, taught by industry masters, completely free. Join our vibrant community, master in-demand skills, and launch your dream tech career.
+        Tired of limitations? CodeHarborHub shatters them. We&apos;re the
+        exclusive platform offering a comprehensive tech curriculum, taught by
+        industry masters, completely free. Join our vibrant community, master
+        in-demand skills, and launch your dream tech career.
       </p>
 
       <div className="chh__header-content__input">
@@ -37,9 +41,35 @@ const HeaderContent = () => {
  * @returns The header image element.
  */
 const HeaderImage = () => {
+  const imgRef = useRef<HTMLImageElement>(null);
+
+  useEffect(() => {
+    if (imgRef.current) {
+      VanillaTilt.init(imgRef.current, {
+        max: 25,
+        speed: 400,
+        glare: true,
+        "max-glare": 0.5,
+      });
+    }
+
+    // Cleanup function to destroy VanillaTilt instance
+    return () => {
+      if (imgRef.current && imgRef.current.vanillaTilt) {
+        imgRef.current.vanillaTilt.destroy();
+      }
+    };
+  }, []);
+
   return (
     <div className="chh__header-image">
-      <img src="/img/hero-img.png" alt="ai" />
+      <img
+        src="/img/hero-img.png"
+        alt="ai"
+        className="float-animation"
+        data-tilt
+        ref={imgRef}
+      />
     </div>
   );
 };
@@ -59,4 +89,4 @@ const Header: React.FC = () => {
   );
 };
 
-export default Header;
+export default Header;

src/components/HomePage/Header.tsx

@@ -298,4 +298,22 @@
     font-size: 12px;
     line-height: 16px;
   }
+}
+
+@keyframes float {
+  0% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-10px);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.float-animation {
+  animation: float 2s ease-in-out infinite;
 }