Skip to content

Commit

Permalink
feat : launch
Browse files Browse the repository at this point in the history
  • Loading branch information
aswanthabam committed Dec 7, 2023
1 parent 7076e73 commit 765233e
Show file tree
Hide file tree
Showing 5 changed files with 344 additions and 3 deletions.
16 changes: 15 additions & 1 deletion src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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={
Expand Down Expand Up @@ -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>
Expand Down
16 changes: 16 additions & 0 deletions src/index.css
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
74 changes: 74 additions & 0 deletions src/pages/launch/Home.tsx
Original file line number Diff line number Diff line change
@@ -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;
237 changes: 237 additions & 0 deletions src/pages/launch/LaunchHome.module.css
Original file line number Diff line number Diff line change
@@ -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 */
}
4 changes: 2 additions & 2 deletions src/pages/launch/launch.tsx
Original file line number Diff line number Diff line change
@@ -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 {}

Expand All @@ -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}>
Expand Down

0 comments on commit 765233e

Please sign in to comment.