Merge pull request #30 from aswanthabam/dev

feat : launch page

index.html

@@ -49,6 +49,10 @@
       href="https://fonts.googleapis.com/css2?family=Orbitron&family=Poppins&display=swap"
       rel="stylesheet"
     />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Orbitron&family=Poppins&family=Silkscreen&display=swap"
+      rel="stylesheet"
+    />
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD00ws_IqKiBskZB7I_HnohOW_Umy7cNhE&callback=myMap"></script>
     <link rel="icon" type="image/x-icon" href="/logo.png" />
     <!-- <script src="https://accounts.google.com/gsi/client" async></script> -->

src/App.tsx

@@ -22,6 +22,7 @@ import Dashboard from "./pages/dashboard/Dashboard";
 import { LoginStatus } from "./apis/api";
 import { GoogleIdentity, isLoggedIn } from "./utils/utils";
 import WhatsappIcon from "./components/whatsapp/Whatsapp";
+import Launch from "./pages/launch/launch";
 
 function getTheme() {
   var theme = localStorage.getItem("theme");
@@ -112,6 +113,7 @@ function App() {
           <Route path="details" element={<RegisterStep2 />}></Route>
         </Route>
         <Route path="/login" element={<Login />}></Route>
+        <Route path="/launch" element={<Launch />}></Route>
         <Route
           path="/events"
           element={

src/components/counter/Counter.module.css

@@ -7,6 +7,7 @@
   line-height: normal;
   /* letter-spacing: 5px; */
   margin: 30px 0px;
+  font-family: "Black Ops One", sans-serif;
 }
 /* Target tablet devices */
 @media screen and (min-width: 768px) {

src/pages/home/Home.module.css

@@ -76,6 +76,24 @@
           font-family: Wallpoet;
           color: var(--color-green);
         }
+        .topLineA {
+          position: relative;
+          font-family: Wallpoet;
+          display: inline-block;
+
+          &::after {
+            content: "";
+            position: absolute;
+            top: 3px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 60%;
+            height: 100%;
+            /* background: var(--color-black); */
+            border-top: 3px solid var(--color-black);
+            z-index: 1;
+          }
+        }
       }
 
       .mottoText {
@@ -189,10 +207,17 @@
         transform: translate(0%, -50%);
         & h1 {
           font-size: 90px;
+          .topLineA {
+            &::after {
+              top: 10px;
+              border-top: 4px solid var(--color-black);
+            }
+          }
         }
 
         .daysLeft {
           font-size: 20px;
+          font-family: Silkscreen;
         }
       }
     }

src/pages/home/Home.tsx

@@ -48,7 +48,9 @@ const Home: React.FC<HomeProps> = ({}) => {
       <div className={style.header}>
         <div className={style.content}>
           <h1>
-            VIJÑĀNA <span>2.0</span>
+            VIJÑ
+            <div className={style.topLineA}>A</div>
+            NA <span>2.0</span>
           </h1>
           {/* <img style={{ height: 300 }} src="/logo.png" /> */}
           <span className={style.mottoText}>KBM Government College</span>

src/pages/launch/launch.module.css

@@ -0,0 +1,23 @@
+@keyframes anim {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.launch {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  .countDown {
+    font-size: 80px;
+    font-family: "Black Ops One", sans-serif;
+    animation: anim 1s linear infinite;
+  }
+}

src/pages/launch/launch.tsx

@@ -0,0 +1,24 @@
+import { useNavigate } from "react-router-dom";
+import style from "./launch.module.css";
+import { useEffect, useState } from "react";
+
+interface EventsProps {}
+
+const Launch: React.FC<EventsProps> = ({}) => {
+  const [count, setCount] = useState(3);
+  const redirect = useNavigate();
+
+  setInterval(async () => {
+    if (count >= 1) await setCount(count - 1);
+    else redirect("/");
+  }, 1000);
+  return (
+    <div className={style.launch}>
+      <div id="countDown" className={style.countDown}>
+        {count}
+      </div>
+    </div>
+  );
+};
+
+export default Launch;