feat : launch

aswanthabam · Dec 7, 2023 · 765233e · 765233e
1 parent 7076e73
commit 765233e
Show file tree

Hide file tree

Showing 5 changed files with 344 additions and 3 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -113,7 +113,6 @@ 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={
@@ -166,6 +165,21 @@ function App() {
             </TopBarLayer>
           }
         ></Route>
+
+        <Route path="/launch" element={<Launch />}></Route>
+        <Route
+          path="/home"
+          element={
+            <TopBarLayer
+              sidebarState={sidebarState}
+              setSidebarState={setSidebarState}
+              setTheme={setTheme}
+              theme={theme}
+            >
+              <Home />
+            </TopBarLayer>
+          }
+        ></Route>
         <Route path="*" element={<Error404 />}></Route>
       </Routes>
     </div>

diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,19 @@
+@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
@@ -0,0 +1,74 @@
+import style from "./LaunchHome.module.css";
+// import SecondaryButton from '../../components/buttons/secondary_button/SecondaryButton';
+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";
+// for build commit
+interface LaunchHomeProps {}
+
+const LaunchHome: React.FC<LaunchHomeProps> = ({}) => {
+  return (
+    <div className={style.home}>
+      <div className={style.background}>
+        <div className={style.topGradient}></div>
+        <svg
+          className={style.bottomDesign}
+          xmlns="http://www.w3.org/2000/svg"
+          width="598"
+          height="488"
+          viewBox="0 0 598 488"
+          fill="none"
+        >
+          <path
+            d="M-2.13721 2.60027C50.9325 15.2771 71.6006 73.2347 90.7836 127.027C111.703 185.69 130.856 239.399 188.339 224.029C217.184 216.316 231.421 196.464 246.058 176.053C259.085 157.887 272.429 139.279 296.672 128.394C463.654 53.4164 597.863 487.521 597.863 487.521H-2.13721C-2.13721 487.521 -186.328 -41.3976 -2.13721 2.60027Z"
+            fill="url(#paint0_linear_2_21)"
+          />
+          <path
+            d="M-2.13721 2.60027C50.9325 15.2771 71.6006 73.2347 90.7836 127.027C111.703 185.69 130.856 239.399 188.339 224.029C217.184 216.316 231.421 196.464 246.058 176.053C259.085 157.887 272.429 139.279 296.672 128.394C463.654 53.4164 597.863 487.521 597.863 487.521H-2.13721C-2.13721 487.521 -186.328 -41.3976 -2.13721 2.60027Z"
+            stroke="black"
+          />
+          <defs>
+            <linearGradient
+              id="paint0_linear_2_21"
+              x1="-2.13722"
+              y1="2.60029"
+              x2="297.863"
+              y2="487.521"
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop stopColor="#2F6838" />
+              <stop offset="1" stopColor="#072F0D" stopOpacity="0.89" />
+            </linearGradient>
+          </defs>
+        </svg>
+
+        <img className={style.alien} src={alien} />
+      </div>
+      <div className={style.header}>
+        <div className={style.content}>
+          <h1>
+            VIJÑ
+            <div className={style.topLineA}>A</div>
+            NA <span className="sparkblink-1">2.0</span>
+          </h1>
+          {/* <img style={{ height: 300 }} src="/logo.png" /> */}
+          <span className={style.mottoText}>KBM Government College</span>
+          <span className="line"></span>
+          <span className={style.daysLeft}>
+            The countdown to awesomeness begins...
+          </span>
+          <Counter date={new Date("2023-12-15 00:00:00")} />
+        </div>
+      </div>
+      <div className={style.page2}>
+        <h2 className="underline">Events</h2>
+        <br />
+        <EventList limit={4} />
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+export default LaunchHome;
diff --git a/src/pages/launch/LaunchHome.module.css b/src/pages/launch/LaunchHome.module.css
@@ -0,0 +1,237 @@
+.home {
+  .background {
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    background: linear-gradient(
+      230deg,
+      rgba(47, 104, 56, 0) 23.61%,
+      rgba(37, 105, 48, 0.46) 83.24%
+    );
+
+    .topGradient {
+      background: radial-gradient(
+        50% 50% at 50% 50%,
+        var(--color-dark-green) 0%,
+        rgba(217, 217, 217, 0) 100%
+      );
+      width: 40%;
+      height: 40%;
+      flex-shrink: 0;
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: -0;
+      transform: translate(50%, -50%);
+    }
+
+    .bottomDesign {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 90%;
+      height: auto;
+      z-index: 0;
+    }
+
+    .alien {
+      position: absolute;
+      bottom: 8%;
+      left: -5%;
+      width: 100vw;
+    }
+  }
+
+  .header {
+    position: relative;
+    width: 100vw;
+    height: calc(100vh - var(--topbar-total-height) - var(--bottom-spacing));
+
+    .content {
+      position: absolute;
+      width: 100vw;
+      display: flex;
+      align-items: center;
+      justify-content: start;
+      flex-direction: column;
+      right: 0%;
+      top: -5%;
+      transform: translate(0%, -0%);
+      & h1 {
+        color: var(--color-black);
+        font-family: Wallpoet;
+        font-size: 47px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        margin-top: 80px;
+
+        & span {
+          display: inline-block;
+          font-family: Wallpoet;
+          color: var(--color-green);
+          animation: sparkblink 1s ease infinite;
+        }
+        .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 {
+        color: var(--color-text-secondary);
+        font-family: Wallpoet;
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 400;
+        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 {
+        color: var(--color-orange);
+        font-size: 15px;
+        margin-top: 50px;
+        text-align: center;
+      }
+    }
+    .headerButtons {
+      position: absolute;
+      display: flex;
+      align-items: end;
+      justify-content: start;
+      flex-direction: column;
+      gap: 20px;
+      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 {
+    position: absolute;
+    bottom: 2%;
+    left: -5%;
+    width: 45vw;
+  }
+
+  .page2 {
+    /* position: absolute; */
+    margin-top: 70px;
+    top: 100vh;
+    padding: 25px;
+    width: calc(100% - 50px);
+    background: linear-gradient(
+      180deg,
+      rgba(47, 104, 56, 0.33) 0%,
+      rgba(255, 211, 180, 0.38) 100%
+    );
+    & h2 {
+      margin-bottom: 20px;
+      font-size: 30px;
+      color: var(--color-green);
+      width: 200px;
+    }
+  }
+}
+/* Target tablet devices */
+@media screen and (min-width: 768px) {
+  /* Your CSS styles for tablet devices go here */
+  .home {
+    .background {
+      .bottomDesign {
+        width: 35%;
+      }
+      .alien {
+        width: 45%;
+      }
+    }
+    .header {
+      .content {
+        width: auto;
+        right: 20%;
+        top: 50%;
+        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;
+        }
+      }
+    }
+    .page2 {
+      padding: 30px 50px;
+      width: calc(100% - 100px);
+      margin-top: 40px;
+      & h2 {
+        width: 100%;
+        font-size: 40px;
+        text-align: center;
+      }
+    }
+  }
+}
+/* Target desktop devices */
+@media screen and (min-width: 1024px) {
+  /* Your CSS styles for desktop devices go here */
+}
diff --git a/src/pages/launch/launch.tsx b/src/pages/launch/launch.tsx
@@ -1,6 +1,6 @@
 import { useNavigate } from "react-router-dom";
 import style from "./launch.module.css";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 interface EventsProps {}
 
@@ -10,7 +10,7 @@ const Launch: React.FC<EventsProps> = ({}) => {
 
   setInterval(async () => {
     if (count >= 1) await setCount(count - 1);
-    else redirect("/");
+    else redirect("/home");
   }, 1000);
   return (
     <div className={style.launch}>