add some animation to hero

software-community · Jul 8, 2024 · 114ce29 · 114ce29
1 parent 6cf720c
commit 114ce29
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 42 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@gsap/react": "^2.1.1",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
@@ -24,6 +25,7 @@
     "date-fns": "^3.6.0",
     "embla-carousel-react": "^8.1.5",
     "framer-motion": "^11.2.11",
+    "gsap": "^3.12.5",
     "html-react-parser": "^5.1.10",
     "lucide-react": "^0.379.0",
     "mongoose": "^8.4.0",

diff --git a/src/components/Home/Hero.jsx b/src/components/Home/Hero.jsx
@@ -1,12 +1,13 @@
+
 export default function Hero() {
   return (
     <section className="w-full h-[90vh]  flex flex-col lg:flex-row justify-center items-center px-6">
       <div className="w-full lg:w-1/2 h-auto lg:h-full flex flex-col justify-center items-center">
-        <h1 className="w-full text-center font-bold text-5xl lg:text-7xl">BOST PORTAL</h1>
-        <p className="roboto-light text-xl lg:text-3xl">To manage all things Bost</p>
+        <h1 className="w-full text-center font-bold text-5xl lg:text-7xl LandingHeroTitle">BOST PORTAL</h1>
+        <p className="roboto-light text-xl lg:text-3xl LandingHeroSubtitle">To manage all things Bost</p>
       </div>
-      <div className="w-full lg:w-1/2  h-1/2 lg:h-full flex justify-center items-center">
-        <img src="./home/Globe.svg" className="object-cover h-3/5 " />{" "}
+      <div className="w-full lg:w-1/2  h-1/2 lg:h-full flex justify-center LandingHeroImage items-center">
+        <img src="./home/Globe.svg" className="object-cover Globe h-3/5 " />{" "}
       </div>
     </section>
   );

diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -7,37 +7,45 @@ import Link from "next/link";
 import { handleLogin } from "@/app/actions/authentication";
 import Image from "next/image";
 import { usePathname, useRouter } from "next/navigation";
+import { useRef } from "react";
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
+gsap.registerPlugin(useGSAP);
 
 export default function Navbar({ session }) {
   const pathname = usePathname();
   const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const container = useRef();
 
   useEffect(() => {
     setIsSheetOpen(false);
   }, [pathname]);
 
-  // useEffect(() => {
-  //   const handleKeyDown = (event) => {
-  //     if (event.key === "L" || event.key === "l") {
-  //       handleLogin();
-  //     }
-  //   };
-
-  //   window.addEventListener("keydown", handleKeyDown);
-
-  //   return () => {
-  //     window.removeEventListener("keydown", handleKeyDown);
-  //   };
-  // }, []);
+  useGSAP(
+    () => {
+      gsap.from([".hamburger",".Logo"], { y:-50,
+        opacity:0,
+        duration:1
+      });
+      gsap.from([".Globe",".LandingHeroTitle",".LandingHeroSubtitle"], { opacity:0,
+        delay:1,
+        duration:1
+      });
+    },
+    {  }
+  );
 
   if (pathname.startsWith("/dashboard")) return null;
 
   return (
-    <header className="flex select-none  h-[10vh] bg-secondary w-full justify-between shrink-0 items-center px-4 md:px-6">
-      <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
+    <header
+      // ref={container}
+      className="flex  select-none  h-[10vh] bg-secondary w-full justify-between shrink-0 items-center px-4 md:px-6"
+    >
+      <Sheet  open={isSheetOpen} onOpenChange={setIsSheetOpen}>
         <SheetTrigger asChild>
           <Button
-            className="lg:hidden  overflow-hidden p-0"
+            className="lg:hidden hamburger  overflow-hidden p-0"
             size="icon"
             variant="outline"
           >
@@ -75,10 +83,10 @@ export default function Navbar({ session }) {
           </div>
         </SheetContent>
       </Sheet>
-      <Link className="mr-6 hidden lg:flex" href="/">
+      <Link className="mr-6 Logo hidden lg:flex" href="/">
         <img src="/Logo.png" className=" h-[60px]"></img>
       </Link>
-      <nav className="ml-auto hidden lg:flex gap-6">
+      <nav className="ml-auto hidden hamburger  lg:flex gap-6">
         {session ? (
           <>
             <NavDropdown />
@@ -108,7 +116,7 @@ export default function Navbar({ session }) {
           </>
         )}
       </nav>
-      <Link href="/" className="lg:hidden">
+      <Link href="/" className="lg:hidden Logo">
         <img src="/Logo.png" className=" h-[60px]"></img>
       </Link>
     </header>
@@ -135,22 +143,3 @@ function MenuIcon(props) {
     </svg>
   );
 }
-
-function MountainIcon(props) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="m8 3 4 8 5-5 5 15H2L8 3z" />
-    </svg>
-  );
-}