Merge pull request #32 from aswanthabam/dev

feat : launch animation
aswanthabam · Dec 9, 2023 · 34e926e · 34e926e
2 parents 7bab404 + eaf5ab5
commit 34e926e
Show file tree

Hide file tree

Showing 9 changed files with 163 additions and 78 deletions.
diff --git a/public/audio/launch.mp3 b/public/audio/launch.mp3
diff --git a/src/App.tsx b/src/App.tsx
@@ -23,6 +23,7 @@ import { LoginStatus } from "./apis/api";
 import { GoogleIdentity, isLoggedIn } from "./utils/utils";
 import WhatsappIcon from "./components/whatsapp/Whatsapp";
 import Launch from "./pages/launch/launch";
+import LaunchHome from "./pages/launch/Home";
 
 function getTheme() {
   var theme = localStorage.getItem("theme");
@@ -170,14 +171,14 @@ function App() {
         <Route
           path="/home"
           element={
-            <TopBarLayer
-              sidebarState={sidebarState}
-              setSidebarState={setSidebarState}
-              setTheme={setTheme}
-              theme={theme}
-            >
-              <Home />
-            </TopBarLayer>
+            // <TopBarLayer
+            //   sidebarState={sidebarState}
+            //   setSidebarState={setSidebarState}
+            //   setTheme={setTheme}
+            //   theme={theme}
+            // >
+            <LaunchHome />
+            // </TopBarLayer>
           }
         ></Route>
         <Route path="*" element={<Error404 />}></Route>

diff --git a/src/components/counter/Counter.tsx b/src/components/counter/Counter.tsx
@@ -3,6 +3,7 @@ import style from "./Counter.module.css";
 
 interface CounterProps {
   date: Date;
+  className?: string;
 }
 function calculateTimeDifference(
   date1: Date,
@@ -23,7 +24,7 @@ function calculateTimeDifference(
 function addLeadingZero(number: number): string {
   return number < 10 ? `0${number}` : `${number}`;
 }
-const Counter: React.FC<CounterProps> = ({ date }) => {
+const Counter: React.FC<CounterProps> = ({ date, className }) => {
   // console.log(date);
   const [diff, setDiff] = useState({
     d: 0,
@@ -55,7 +56,7 @@ const Counter: React.FC<CounterProps> = ({ date }) => {
     // console.log(diff);
   }, 1000);
   return (
-    <div className={style.counter}>
+    <div className={style.counter + " " + className}>
       {addLeadingZero(diff.d)} : {addLeadingZero(diff.h)} :{" "}
       {addLeadingZero(diff.m)} : {addLeadingZero(diff.s)}
     </div>

diff --git a/src/components/topbar/topbar.tsx b/src/components/topbar/topbar.tsx
@@ -8,13 +8,15 @@ interface TopBarProps {
   setTheme: (theme: string) => void;
   setSidebarState: (state: boolean) => void;
   sidebarState: boolean;
+  className?: string;
 }
 
 const TopBar: React.FC<TopBarProps> = ({
   setTheme,
   theme,
   setSidebarState,
   sidebarState,
+  className,
 }) => {
   const [text, setText] = React.useState<string>("Register");
   const [link, setLink] = React.useState<string>("");
@@ -44,7 +46,7 @@ const TopBar: React.FC<TopBarProps> = ({
   });
   return (
     <>
-      <div className={style.topbar + " " + style.mobile}>
+      <div className={style.topbar + " " + style.mobile + " " + className}>
         <div
           onClick={() => {
             setSidebarState(!sidebarState);
@@ -75,7 +77,7 @@ const TopBar: React.FC<TopBarProps> = ({
         </div>
       </div>
 
-      <div className={style.topbar + " " + style.desktop}>
+      <div className={style.topbar + " " + style.desktop + " " + className}>
         <div className={style.menuItems}>
           <div className={style.menuButton}>
             <img className={style.logo} src={logo} />

diff --git a/src/index.css b/src/index.css
@@ -1,19 +1,3 @@
-@keyframes sparkblink {
-  0% {
-    opacity: 0;
-    background: red;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-    background: green;
-  }
-}
-.sparkblink-1 {
-  animation: sparkblink 1s ease infinite;
-}
 * {
   padding: 0;
   margin: 0;

diff --git a/src/pages/launch/Home.tsx b/src/pages/launch/Home.tsx
@@ -4,12 +4,20 @@ import alien from "../../assets/dehill-spacelove-1-dribble.gif";
 import Counter from "../../components/counter/Counter";
 import EventList from "../../components/eventlist/EventList";
 import Footer from "../../components/footer/Footer";
+import TopBar from "../../components/topbar/topbar";
 // for build commit
 interface LaunchHomeProps {}
 
 const LaunchHome: React.FC<LaunchHomeProps> = ({}) => {
   return (
     <div className={style.home}>
+      <TopBar
+        theme="dark"
+        setSidebarState={() => {}}
+        setTheme={() => {}}
+        sidebarState={false}
+        className={style.topbar}
+      />
       <div className={style.background}>
         <div className={style.topGradient}></div>
         <svg
@@ -58,7 +66,10 @@ const LaunchHome: React.FC<LaunchHomeProps> = ({}) => {
           <span className={style.daysLeft}>
             The countdown to awesomeness begins...
           </span>
-          <Counter date={new Date("2023-12-15 00:00:00")} />
+          <Counter
+            className={style.counter}
+            date={new Date("2023-12-15 00:00:00")}
+          />
         </div>
       </div>
       <div className={style.page2}>

diff --git a/src/pages/launch/LaunchHome.module.css b/src/pages/launch/LaunchHome.module.css
@@ -1,4 +1,45 @@
+@keyframes sparkblink {
+  0% {
+    opacity: 0;
+    /* background: red; */
+  }
+  30% {
+    opacity: 1;
+  }
+  70% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+    /* background: green; */
+  }
+}
+
+@keyframes show {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes alien-anim {
+  from {
+    transform: translateX(-5%);
+    width: 41vw;
+  }
+  to {
+    transform: translateX(5%);
+    width: 42vw;
+  }
+}
 .home {
+  .topbar {
+    animation: show 2s ease-in-out forwards;
+    animation-delay: 3s;
+    opacity: 0;
+  }
   .background {
     position: absolute;
     width: 100vw;
@@ -10,6 +51,8 @@
       rgba(47, 104, 56, 0) 23.61%,
       rgba(37, 105, 48, 0.46) 83.24%
     );
+    animation: sparkblink 0.5s ease 5 alternate;
+    animation-delay: 1s;
 
     .topGradient {
       background: radial-gradient(
@@ -34,22 +77,30 @@
       width: 90%;
       height: auto;
       z-index: 0;
+      /* animation: show 4s ease-in-out; */
+      /* opacity: 0; */
     }
 
     .alien {
       position: absolute;
       bottom: 8%;
       left: -5%;
       width: 100vw;
+      animation: alien-anim 2s ease-in-out infinite alternate;
+      /* opacity: 0; */
     }
   }
 
   .header {
+    animation: show 2s ease-in-out;
     position: relative;
     width: 100vw;
     height: calc(100vh - var(--topbar-total-height) - var(--bottom-spacing));
 
     .content {
+      animation: show 2s ease-in-out forwards;
+      animation-delay: 2s;
+      opacity: 0;
       position: absolute;
       width: 100vw;
       display: flex;
@@ -59,6 +110,7 @@
       right: 0%;
       top: -5%;
       transform: translate(0%, -0%);
+
       & h1 {
         color: var(--color-black);
         font-family: Wallpoet;
@@ -67,18 +119,21 @@
         font-weight: 400;
         line-height: normal;
         margin-top: 80px;
-
+        /* animation: show 2s ease-in-out; */
+        /* opacity: 0; */
         & span {
           display: inline-block;
           font-family: Wallpoet;
           color: var(--color-green);
-          animation: sparkblink 1s ease infinite;
+          /* animation: sparkblink 0.5s ease infinite alternate; */
+          /* opacity: 0; */
         }
         .topLineA {
+          /* opacity: 0; */
           position: relative;
           font-family: Wallpoet;
           display: inline-block;
-
+          /* animation: show 2s ease-in-out; */
           &::after {
             content: "";
             position: absolute;
@@ -95,6 +150,7 @@
       }
 
       .mottoText {
+        /* opacity: 0; */
         color: var(--color-text-secondary);
         font-family: Wallpoet;
         font-size: 20px;
@@ -103,25 +159,17 @@
         line-height: normal;
         margin-top: 20px;
       }
-      /* .infoText {
-        color: var(--color-text-secondary);
-        text-align: center;
-        font-family: Wallpoet;
-        font-size: 15px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: normal;
-        width: 50%;
-        margin-top: 50px;
-      } */
       .daysLeft {
+        /* opacity: 0; */
         color: var(--color-orange);
         font-size: 15px;
         margin-top: 50px;
         text-align: center;
+        font-family: Silkscreen;
       }
     }
     .headerButtons {
+      /* opacity: 0; */
       position: absolute;
       display: flex;
       align-items: end;
@@ -131,32 +179,6 @@
       right: 30px;
       bottom: 30px;
     }
-
-    /* .date {
-      position: absolute;
-      bottom: 55px;
-      left: 60px;
-
-      .day {
-        color: var(--color-orange);
-        font-size: 45px;
-        padding-right: 20px;
-      }
-      .dayTH {
-        color: var(--color-white);
-        font-size: 20px;
-        margin-bottom: 20px;
-      }
-      .month {
-        font-size: 25px;
-        color: var(--color-white);
-        padding-right: 20px;
-      }
-      .year {
-        color: var(--color-white);
-        font-size: 23px;
-      }
-    } */
   }
 
   .alien {
@@ -215,7 +237,6 @@
 
         .daysLeft {
           font-size: 20px;
-          font-family: Silkscreen;
         }
       }
     }