Merge pull request #19 from POSUA-NITS/hero

Hero of the landing

src/Components/Hero/Hero.module.scss

@@ -0,0 +1,341 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+@import url("https://fonts.googleapis.com/css2?family=Alata&display=swap");
+
+.landing {
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(178deg, #39b6d8 -0.36%, #ffdc97 74.6%, #5cbdcd 92.2%);
+}
+
+.Jaapi_text {
+  font-family: "Atlata";
+}
+
+@layer utilities {
+  .main {
+    --tw-brightness: 0.5;
+    filter: brightness(var(--tw-brightness));
+    animation-name: brightness;
+    animation-duration: 4s;
+    animation-delay: 1s;
+  }
+
+  .jungle_rays {
+    width: 0;
+    opacity: 0.25;
+    animation-name: rays;
+    animation-duration: 3s;
+    animation-delay: 1s;
+  }
+
+  .jungle_sunrays {
+    width: 50vw;
+    animation-name: sunrays;
+    animation-duration: 4s;
+    animation-delay: 1s;
+    animation-iteration-count: 1;
+  }
+
+  .jungle_outer1 {
+    width: 100vw;
+    animation-name: outer1;
+    animation-duration: 4s;
+    animation-delay: 2s;
+  }
+  .jungle_outer2 {
+    width: 100vw;
+    animation-name: outer2;
+    animation-duration: 4s;
+    animation-delay: 2s;
+  }
+  .jungle_outer3 {
+    width: 100vw;
+    animation-name: outer3;
+    animation-duration: 4s;
+    animation-delay: 2s;
+  }
+  .jungle_outerCircular {
+    width: 100vw;
+    animation-name: outerCircular;
+    animation-duration: 4s;
+    animation-delay: 2s;
+  }
+  .jungle_outer4 {
+    width: 100vw;
+    animation-name: outer4;
+    animation-duration: 4s;
+    animation-delay: 2s;
+  }
+
+  .jungle_left {
+    left: -10vh;
+    animation-name: left;
+    animation-duration: 4s;
+    animation-delay: 2s;
+  }
+
+  .jungle_right {
+    right: 0;
+    animation-name: right;
+    animation-duration: 4s;
+    animation-delay: 2s;
+  }
+
+  .posua_logo {
+    animation-name: logo_slide_down;
+    animation-duration: 4s;
+  }
+  .posua_logo_mobile {
+    animation-name: logo_slide_down_mobile;
+    animation-duration: 2s;
+  }
+
+  .jaapi_arrow {
+    z-index: 10000;
+    animation-name: jaapi_slide_up;
+    animation-duration: 4s;
+  }
+
+  .cloud_L2R {
+    animation-name: cloud_L2R;
+    animation-duration: 16s;
+    animation-iteration-count: infinite;
+  }
+
+  .cloud_R2L {
+    animation-name: cloud_R2L;
+    animation-duration: 16s;
+    animation-iteration-count: infinite;
+  }
+
+  @keyframes rays {
+    0% {
+      width: 0;
+      height: 0;
+      opacity: 0.25;
+    }
+    10% {
+      width: 100vw;
+      height: 100vh;
+      opacity: 1;
+    }
+    100% {
+      width: 100vw;
+      height: 100vh;
+      opacity: 0;
+    }
+  }
+
+  @keyframes brightness {
+    0% {
+      --tw-brightness: 0.5;
+    }
+    10% {
+      --tw-brightness: 0.5;
+    }
+    15% {
+      --tw-brightness: 0.625;
+    }
+    20% {
+      --tw-brightness: 0.75;
+    }
+    25% {
+      --tw-brightness: 1.125;
+    }
+    30% {
+      --tw-brightness: 1.5;
+    }
+    35% {
+      --tw-brightness: 1.75;
+    }
+    40% {
+      --tw-brightness: 2.25;
+    }
+    45% {
+      --tw-brightness: 2.5;
+    }
+    50% {
+      --tw-brightness: 2.75;
+    }
+    55% {
+      --tw-brightness: 3;
+    }
+    60% {
+      --tw-brightness: 3.5;
+    }
+    70% {
+      --tw-brightness: 3.75;
+    }
+    80% {
+      --tw-brightness: 4;
+    }
+    90% {
+      --tw-brightness: 5;
+    }
+    100% {
+      --tw-brightness: 10;
+    }
+  }
+
+  @keyframes outer1 {
+    0% {
+      width: 100vw;
+      transform: scale(1);
+    }
+    50% {
+      width: 100vw;
+      transform: scale(2);
+      opacity: 0;
+    }
+    100% {
+      opacity: 0;
+      width: 200vw;
+    }
+  }
+
+  @keyframes sunrays {
+    0% {
+      width: 50vw;
+      opacity: 0.5;
+    }
+    10% {
+      width: 100vw;
+      opacity: 0;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes outer2 {
+    0% {
+      width: 100vw;
+      transform: scale(1);
+    }
+    50% {
+      width: 100vw;
+      transform: scale(2);
+      opacity: 0;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes outer3 {
+    0% {
+      width: 100vw;
+      transform: scale(1);
+    }
+    50% {
+      width: 200vw;
+      transform: scale(2);
+      opacity: 0;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes outerCircular {
+    0% {
+      width: 100vw;
+      transform: scale(1);
+    }
+    50% {
+      width: 100vw;
+      transform: scale(2);
+      opacity: 0;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes outer4 {
+    0% {
+      width: 100vw;
+      transform: scale(1);
+    }
+    50% {
+      width: 100vw;
+      transform: scale(1.5);
+      opacity: 0;
+    }
+    100% {
+      width: 200vw;
+      transform: scale(2);
+      opacity: 0;
+    }
+  }
+
+  @keyframes left {
+    0% {
+      left: -5vw;
+    }
+    50% {
+      left: -100vw;
+      opacity: 0;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes right {
+    0% {
+      right: 0;
+    }
+    50% {
+      right: -100vw;
+      opacity: 0;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes logo_slide_down_mobile {
+    0% {
+      top: -10%;
+    }
+    100% {
+      top: 0%;
+    }
+  }
+
+  @keyframes jaapi_slide_up {
+    0% {
+      top: 100vh;
+    }
+    100% {
+      top: 55vh;
+    }
+  }
+
+  @keyframes cloud_L2R {
+    0% {
+      left: 0%;
+    }
+    50% {
+      left: 40%;
+    }
+    100% {
+      left: 0%;
+    }
+  }
+
+  @keyframes cloud_R2L {
+    0% {
+      right: 0%;
+    }
+    50% {
+      right: 50%;
+    }
+    100% {
+      right: 0%;
+    }
+  }
+}

src/Pages/Home/Home.jsx

@@ -3,10 +3,12 @@ import Borhomthuri from "../../Components/Borhomthuri/Borhomthuri";
 import About from "../About/About";
 import styles from "./Home.module.scss";
 import Invitation from "../Invitation/Invitation";
+import Hero from "../../Components/Hero/Hero";
 const Home = () => {
   useSetTitle("Home | Posua");
   return (
-    <div className={styles.home}>
+    <div className={`${styles.home}`}>
+      <Hero />
       <About />
       <Invitation />
       <Borhomthuri />

src/Pages/Home/Home.module.scss

@@ -1,3 +1,4 @@
 .home {
   min-height: auto;
+  // background-color: red;
 }

src/Pages/Invitation/Invitation.jsx

@@ -72,7 +72,7 @@ const Invitation = () => {
             onLoad={() => setIsLoaded(true)}
           />
         </div>
-        <ScrollerJapi />
+        <ScrollerJapi type="invitation" windowSize={window.innerWidth} />
         {/* <div id={styles.cicularrangoliholder}>
           <img src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711462263/hald_rangoli_posua_24_fbsywv.png" alt="" />
         </div> */}

src/Pages/Invitation/ScrollerJapi.jsx

@@ -1,13 +1,6 @@
 import React from "react";
 import styles from "./ScrollerJapi.module.scss";
 const ScrollerJapi = () => {
-  // const[IsHover, setIsHover] = useState(false);
-  // const handleMouseEnter = () =>{
-  //     setIsHover(true);
-  // };
-  // const handleMouseLeave = () =>{
-  //     setIsHover(false);
-  // };
   return (
     <div>
       <div className={styles.ScrollerJapiClass}>

src/assets/Edition.json

@@ -41,4 +41,4 @@
     "edition_num": "https://res.cloudinary.com/dl0knguhb/image/upload/v1711552352/3RD_EDITION_ukdway.png",
     "link": "https://drive.google.com/file/d/17sXVH1QLGPC4uB4OxDTJECIvQb5Lmlei/view"
   }
-]
+]