@@ -16,75 +57,110 @@ const Faq = () => {
-
-
);
};
diff --git a/src/pages/registration/Register.jsx b/src/pages/registration/Register.jsx
new file mode 100644
index 0000000..3fce415
--- /dev/null
+++ b/src/pages/registration/Register.jsx
@@ -0,0 +1,40 @@
+// src/App.jsx
+import React, { useEffect } from "react";
+import mascot from "../../assets/images/misc/mascot.png";
+import letters from "../../assets/images/timer/letters.png";
+import "./Register.scss";
+
+const Register = () => {
+ useEffect(() => {
+ if (
+ window.location.pathname === "/register" ||
+ window.location.pathname === "/surprise"
+ ) {
+ setTimeout(() => {
+ window.location.href = "https://lu.ma/0nruupo3?utm_source=twitter";
+ }, 3000);
+ }
+ }, []);
+
+ return (
+
-
-
-
- What is a Hackathon?
-- A hackathon is social coding event where programmers, designers, - and developers collaborate to solve a problem and compete for - cash prizes. It’s one part party, one part work-hard overnight - battle against the clock and the competition. -
-
-
- What is the maximum/minimum team size?
-- We encourage you to make a team of minimum 2 and maximum 4 - members. If you are a Solo Hacker and do not have a team, you - can still register and we will help you find a team on our - Discord Server. -
-
- Loading...
}>
-
-
);
}
diff --git a/src/components/private/mentors/Mentors.scss b/src/components/private/mentors/Mentors.scss
index 904b900..e241f81 100644
--- a/src/components/private/mentors/Mentors.scss
+++ b/src/components/private/mentors/Mentors.scss
@@ -1,5 +1,6 @@
.mentors__parent {
padding: 4rem 7rem;
+ padding-bottom: 0;
margin-top: 8rem;
position: relative;
overflow: hidden;
diff --git a/src/components/private/prizes/Prizes.jsx b/src/components/private/prizes/Prizes.jsx
index 976bd3e..c2915e9 100644
--- a/src/components/private/prizes/Prizes.jsx
+++ b/src/components/private/prizes/Prizes.jsx
@@ -2,13 +2,36 @@ import React from "react";
import HeaderData from "../../../assets/data/HeaderContent";
import { ComingSoon, Header } from "../../shared";
import "./Prizes.scss";
+import first from "../../../assets/images/PrizesImages/first.png";
+import second from "../../../assets/images/PrizesImages/second.png";
+import third from "../../../assets/images/PrizesImages/third.png";
+import agun from "../../../assets/images/PrizesImages/agun.png";
const Prizes = () => {
return (
<>
Loading...
}>
-
-
diff --git a/src/components/private/landing/Landing.scss b/src/components/private/landing/Landing.scss
index 7662352..7c9d969 100644
--- a/src/components/private/landing/Landing.scss
+++ b/src/components/private/landing/Landing.scss
@@ -104,13 +104,18 @@
display: flex;
gap: 2rem;
+ @media screen and (max-width: 1120px) {
+ align-items: center;
+ gap: 1.2rem;
+ right: 50%;
+ }
+
@media screen and (max-width: 576px) {
position: relative;
bottom: 0;
flex-direction: column;
align-items: center;
gap: 1.2rem;
- right: 50%;
}
}
}
diff --git a/src/components/private/marquee/Marquee.jsx b/src/components/private/marquee/Marquee.jsx
index b1327d5..13fb5c0 100644
--- a/src/components/private/marquee/Marquee.jsx
+++ b/src/components/private/marquee/Marquee.jsx
@@ -6,7 +6,7 @@ function Marquee() {
const paragraphs = [];
for (let i = 0; i < numParagraphs; i++) {
- paragraphs.push(
-
);
};
diff --git a/src/components/private/faq/FAQ.scss b/src/components/private/faq/FAQ.scss
index 5abbf74..6208a40 100644
--- a/src/components/private/faq/FAQ.scss
+++ b/src/components/private/faq/FAQ.scss
@@ -4,11 +4,19 @@
flex-direction: column;
align-items: center;
justify-content: center;
+ z-index: 1;
+ margin-top: 8rem;
+
+ @media screen and (max-width: 576px) {
+ padding: 2rem 1.5rem;
+ margin-top: 2rem;
+ gap: 4rem;
+ }
.faq__content {
- margin-top: 12.1rem;
- margin-bottom: 10rem;
- width: 69.99475rem;
+ margin-top: 8.1rem;
+ margin-bottom: 3rem;
+ width: 85%; //69.99475
display: inline-flex;
flex-direction: column;
align-items: center;
@@ -17,6 +25,8 @@
@media screen and (max-width: 576px) {
margin-top: 4rem;
gap: 3rem;
+ max-width: 95vw;
+ width: 100%;
}
.faq__subheader {
@@ -25,583 +35,203 @@
color: var(--text-color);
text-align: center;
font-family: var(--heading-font);
- width: 80%;
+ width: 77%;
margin: 0 auto;
@media screen and (max-width: 576px) {
+ max-width: 95vw;
width: 100%;
+ padding: 0 1rem;
font-size: 0.9rem;
text-align: justify;
}
- }
- }
-
- .faq__body {
- display: flex;
- justify-content: center;
- align-items: flex-start;
- gap: 1.88rem;
- flex: 1;
- height: 100%;
-
- .faq__body__left {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- justify-content: space-between;
- gap: 1.88rem;
-
- .faq__body__left__top {
- flex-shrink: 0;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: flex-start;
- gap: 0.63rem;
- padding-top: 1.62rem;
- padding-bottom: 1.37rem;
- padding-left: 2.63rem;
- padding-right: 3.95rem;
- width: 26.70325rem;
- flex-shrink: 0;
- border-radius: 1.9705rem;
- background: #212020;
- box-shadow: -0.2038rem -0.2038rem 1.1755rem 0.0679rem #a7a3a338,
- 0.3397rem 0.2718rem 0.6999rem 0.1359rem #000000c9;
- transition: all 0.3s ease-in-out;
- cursor: pointer;
-
- &:hover {
- box-shadow: -0.2038rem -0.2038rem 1.1755rem 0.0679rem #ff000073,
- 0.3397rem 0.2718rem 0.6999rem 0.1359rem #000000c9;
- transition: all 0.3s ease-in-out;
- }
-
- h3 {
- color: var(--alt-color);
- font-family: var(--heading-font);
- font-size: 1.60438rem;
- font-style: normal;
- font-weight: 600;
- line-height: normal;
-
- @media screen and (max-width: 1500px) {
- font-size: 1.2rem;
- }
- }
-
- p {
- color: #969696;
- font-family: var(--heading-font);
- font-size: 0.93563rem;
- font-style: normal;
- font-weight: 600;
- line-height: normal;
-
- @media screen and (max-width: 1500px) {
- font-size: 0.8rem;
- }
- }
- @media screen and (max-width: 1500px) {
- width: 20.105rem;
- }
- }
-
- .faq__body__left__bottom {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: flex-start;
- gap: 1.38rem;
- width: 26.70325rem;
- padding-top: 2.39rem;
- padding-bottom: 2.13rem;
- padding-left: 2.31rem;
- padding-right: 3.33rem;
- border-radius: 1.9705rem;
- background: #212020;
- box-shadow: -0.2038rem -0.2038rem 1.1755rem 0.0679rem #a7a3a338,
- 0.3397rem 0.2718rem 0.6999rem 0.1359rem #000000c9;
-
- transition: all 0.3s ease-in-out;
- cursor: pointer;
-
- &:hover {
- box-shadow: -0.2038rem -0.2038rem 1.1755rem 0.0679rem #ff000073,
- 0.3397rem 0.2718rem 0.6999rem 0.1359rem #000000c9;
- transition: all 0.3s ease-in-out;
- }
-
- h3 {
- color: var(--alt-color);
- font-family: var(--heading-font);
- font-size: 1.60438rem;
- font-style: normal;
- font-weight: 600;
- line-height: normal;
-
- @media screen and (max-width: 1500px) {
- font-size: 1.2rem;
- }
- }
-
- p {
- color: #969696;
- font-family: var(--heading-font);
- font-size: 0.93563rem;
- font-style: normal;
- font-weight: 600;
- line-height: normal;
-
- @media screen and (max-width: 1500px) {
- font-size: 0.8rem;
- }
- }
-
- @media screen and (max-width: 1500px) {
- width: 20.105rem;
- }
+ @media screen and (max-width: 1024px) {
+ width: 95%;
}
@media screen and (max-width: 768px) {
- .faq__body__left__top {
- padding-right: unset;
- padding-left: unset;
- padding-top: unset;
- padding-bottom: unset;
- padding: 2rem;
- }
-
- .faq__body__left__bottom {
- padding-right: unset;
- padding-left: unset;
- padding-top: unset;
- padding-bottom: unset;
- padding: 2rem;
- }
+ width: 100%;
}
}
+ }
- .faq__body__right {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- gap: 2.4rem;
-
- .faq__body__right__top {
- display: flex;
- gap: 2.875rem;
-
- .faq__body__right__top__left {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- gap: 1.875rem;
-
- .faq__body__right__top__left__top {
- flex-shrink: 0;
- width: 26.70325rem;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: flex-start;
- gap: 1.5rem;
- border-radius: 1.9705rem;
- background: #212020;
- box-shadow: -0.2038rem -0.2038rem 1.1755rem 0.0679rem #a7a3a338,
- 0.3397rem 0.2718rem 0.6999rem 0.1359rem #000000c9;
- padding-top: 1.56rem;
- padding-bottom: 2.37rem;
- padding-left: 1.97rem;
- padding-right: 4.36rem;
-
- transition: all 0.3s ease-in-out;
- cursor: pointer;
-
- &:hover {
- box-shadow: -0.2038rem -0.2038rem 1.1755rem 0.0679rem #ff000073,
- 0.3397rem 0.2718rem 0.6999rem 0.1359rem #000000c9;
- transition: all 0.3s ease-in-out;
- }
-
- h3 {
- color: var(--alt-color);
- font-family: var(--heading-font);
- font-size: 1.60438rem;
- font-style: normal;
- font-weight: 600;
- line-height: normal;
-
- @media screen and (max-width: 1500px) {
- font-size: 1.2rem;
- }
- }
-
- p {
- color: #969696;
- font-family: var(--heading-font);
- font-size: 0.93563rem;
- font-style: normal;
- font-weight: 600;
- line-height: normal;
-
- @media screen and (max-width: 1500px) {
- font-size: 0.8rem;
- }
- }
-
- @media screen and (max-width: 1500px) {
- width: 20rem;
- }
- }
+ .container {
+ margin: 0 auto;
+ padding: 0 4rem 4rem 4rem;
+ width: 65%; //48rem
- .faq__body__right__top__left__bottom {
- flex-shrink: 0;
- width: 26.70325rem;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: flex-start;
- gap: 0.31rem;
- border-radius: 0.9375rem;
- background: #212020;
- box-shadow: -0.2038rem -0.2038rem 1.1755rem 0.0679rem #a7a3a338,
- 0.3397rem 0.2718rem 0.6999rem 0.1359rem #000000c9;
- padding-top: 1.11rem;
- padding-bottom: 0.98rem;
- padding-left: 2.09rem;
- padding-right: 1.36rem;
-
- transition: all 0.3s ease-in-out;
- cursor: pointer;
-
- &:hover {
- box-shadow: -0.2038rem -0.2038rem 1.1755rem 0.0679rem #ff000073,
- 0.3397rem 0.2718rem 0.6999rem 0.1359rem #000000c9;
- transition: all 0.3s ease-in-out;
- }
+ @media screen and (max-width: 1280px) {
+ width: 70%;
+ padding: 0 2rem 4rem 2rem;
+ }
- h3 {
- color: var(--alt-color);
- font-family: var(--heading-font);
- font-size: 1.60438rem;
- font-style: normal;
- font-weight: 600;
- line-height: normal;
-
- @media screen and (max-width: 1500px) {
- font-size: 1.2rem;
- }
- }
+ @media screen and (max-width: 1024px) {
+ width: 80%;
+ padding: 0 0.5rem 4rem 0.5rem;
+ }
- p {
- color: #969696;
- font-family: var(--heading-font);
- font-size: 0.93563rem;
- font-style: normal;
- font-weight: 600;
- line-height: normal;
-
- @media screen and (max-width: 1500px) {
- font-size: 0.8rem;
- }
- }
+ @media screen and (max-width: 768px) {
+ max-width: 95vw;
+ padding: 1rem;
+ width: 100%;
+ }
- @media screen and (max-width: 1500px) {
- width: 20rem;
- }
- }
- }
+ .accordion {
+ .accordion-item {
+ border-bottom: 1px solid #5e5e5e;
- .faq__body__right__top__right {
- width: 26.70325rem;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: flex-start;
- gap: 1.94rem;
- padding-top: 2.31rem;
- padding-bottom: 3.98rem;
- padding-left: 2.02rem;
- padding-right: 2.99rem;
- flex-shrink: 0;
- border-radius: 1.9705rem;
- background: #212020;
- box-shadow: -0.2038rem -0.2038rem 1.1755rem 0.0679rem #a7a3a338,
- 0.3397rem 0.2718rem 0.6999rem 0.1359rem #000000c9;
-
- transition: all 0.3s ease-in-out;
+ button {
+ position: relative;
+ display: block;
+ text-align: left;
+ width: 100%;
+ padding: 1em 0;
+ color: #ff1717;
cursor: pointer;
-
- &:hover {
- box-shadow: -0.2038rem -0.2038rem 1.1755rem 0.0679rem #ff000073,
- 0.3397rem 0.2718rem 0.6999rem 0.1359rem #000000c9;
- transition: all 0.3s ease-in-out;
- }
-
- h3 {
- color: var(--alt-color);
+ font-size: 1.15rem;
+ font-weight: 400;
+ border: none;
+ background: none;
+ outline: none;
+
+ .accordion-title {
+ font-size: 1.3rem;
+ font-weight: 500;
+ color: var(--text-color);
font-family: var(--heading-font);
- font-size: 1.60438rem;
- font-style: normal;
- font-weight: 600;
- line-height: normal;
-
- @media screen and (max-width: 1500px) {
- font-size: 1.2rem;
- }
- }
-
- p {
- color: #969696;
- font-family: var(--heading-font);
- font-size: 0.93563rem;
- font-style: normal;
- font-weight: 600;
- line-height: normal;
-
- @media screen and (max-width: 1500px) {
- font-size: 0.8rem;
- }
- }
-
- @media screen and (max-width: 1500px) {
- width: 30rem;
- }
- }
-
- @media screen and (max-width: 768px) {
- flex-direction: column;
- gap: 2rem;
- justify-content: flex-start;
-
- .faq__body__right__top__left {
- width: 100%;
- gap: 2rem;
-
- .faq__body__right__top__left__top {
- width: 100%;
- padding-right: unset;
- padding-left: unset;
- padding-top: unset;
- padding-bottom: unset;
- padding: 2rem;
- }
+ padding: 1em 1.5em 1em 0;
- .faq__body__right__top__left__bottom {
- width: 100%;
- padding-right: unset;
- padding-left: unset;
- padding-top: unset;
- padding-bottom: unset;
- padding: 2rem;
+ @media screen and (max-width: 576px) {
+ font-size: 1rem;
+ max-width: 95%;
}
}
- .faq__body__right__top__right {
- width: 100%;
- padding-right: unset;
- padding-left: unset;
- padding-top: unset;
- padding-bottom: unset;
- padding: 2rem;
- }
- }
- }
-
- .faq__body__right__bottom {
- flex: 1;
- width: 56.46419rem;
- flex-shrink: 0;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: flex-start;
- gap: 0.69rem;
- padding-top: 1rem;
- padding-bottom: 1rem;
- padding-left: 2.65rem;
- padding-right: 6.56rem;
- border-radius: 1.9705rem;
- background: #212020;
- box-shadow: -0.2038rem -0.2038rem 1.1755rem 0.0679rem #a7a3a338,
- 0.3397rem 0.2718rem 0.6999rem 0.1359rem #000000c9;
- min-height: 10.5rem;
- margin-top: -10px;
-
- transition: all 0.3s ease-in-out;
- cursor: pointer;
-
- &:hover {
- box-shadow: -0.2038rem -0.2038rem 1.1755rem 0.0679rem #ff000073,
- 0.3397rem 0.2718rem 0.6999rem 0.1359rem #000000c9;
- transition: all 0.3s ease-in-out;
- }
-
- h3 {
- color: var(--alt-color);
- font-family: var(--heading-font);
- font-size: 1.60438rem;
- font-style: normal;
- font-weight: 600;
- line-height: normal;
-
- @media screen and (max-width: 1500px) {
- font-size: 1.2rem;
- }
- }
-
- p {
- color: #969696;
- font-family: var(--heading-font);
- font-size: 0.93563rem;
- font-style: normal;
- font-weight: 600;
- line-height: normal;
-
- @media screen and (max-width: 1500px) {
- font-size: 0.8rem;
- }
-
- a {
- color: #969696;
- font-family: var(--heading-font);
- font-size: 0.93563rem;
- font-style: normal;
- font-weight: 600;
- line-height: normal;
+ .icon {
+ display: inline-block;
+ position: absolute;
+ top: 0;
+ transform: translateY(130%);
+ right: 0;
+ width: 29px;
+ height: 29px;
+ background-color: #0f0e0e;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 50%;
- &:hover {
- text-decoration: underline;
+ svg {
+ width: 1em;
+ height: 1em;
+ fill: #ff1717;
}
- @media screen and (max-width: 1500px) {
- font-size: 0.8rem;
+ @media screen and (max-width: 576px) {
+ top: 50%;
+ transform: translateY(-50%);
}
}
}
- @media screen and (max-width: 1500px) {
- width: 53rem;
- min-height: 10rem;
+ button[aria-expanded="true"] + .accordion-content {
+ opacity: 1;
+ max-height: 9em;
+ transition: all 200ms linear;
+ will-change: opacity, max-height;
}
- @media screen and (max-width: 768px) {
- padding-right: unset;
- padding-left: unset;
- padding-top: unset;
- padding-bottom: unset;
- padding: 2rem;
+ .accordion-content {
+ opacity: 0;
+ max-height: 0;
+ overflow: hidden;
+ transition: opacity 200ms linear, max-height 200ms linear;
+ will-change: opacity, max-height;
p {
- min-width: unset;
- width: 100%;
- max-width: 100%;
+ font-size: 15px;
+ font-weight: 300;
+ margin-bottom: 1.2em;
+ font-family: var(--body-font);
+ opacity: 0.8;
+
+ a {
+ color: #ff1717;
+ font-weight: 500;
+ font-family: var(--heading-font);
+ }
}
}
}
}
+ }
+ }
- @media screen and (max-width: 1340px) {
- flex-direction: column;
- width: 100%;
- gap: 2rem;
-
- .faq__body__left {
- flex-direction: row;
- gap: 2rem;
- width: 100%;
- justify-content: center;
- min-height: 15rem;
- height: 15rem;
-
- .faq__body__left__top {
- max-width: 30rem;
- flex: 1;
- min-height: 100%;
- gap: 0.69rem;
- }
-
- .faq__body__left__bottom {
- max-width: 30rem;
- flex: 1;
- height: 100%;
- gap: 0.69rem;
- }
- }
-
- .faq__body__right {
- width: 100%;
- gap: 2rem;
-
- .faq__body__right__top {
- width: 100%;
- gap: 2rem;
-
- .faq__body__right__top__left {
- gap: 2rem;
-
- .faq__body__right__top__left__top {
- gap: 0.69rem;
- }
+ .faq__blob {
+ position: absolute;
+ width: 9.64481rem;
+ height: 9.54356rem;
+ flex-shrink: 0;
+ top: 3rem;
+ left: 12rem;
+ }
- .faq__body__right__top__left__bottom {
- gap: 0.69rem;
- }
- }
+ .faq__vector__container {
+ overflow: hidden;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: -1;
+
+ .faq__emojis {
+ position: absolute;
+ }
- .faq__body__right__top__right {
- flex: 1;
- gap: 0.69rem;
- }
- }
+ .faq__message__vector {
+ top: 223px;
+ left: 107px;
- .faq__body__right__bottom {
- width: 100%;
- gap: 0.69rem;
- }
- }
+ @media screen and (max-width: 1556px) {
+ display: none;
}
+ }
- @media screen and (max-width: 885px) {
- .faq__body__left {
- width: 100%;
- flex-direction: column;
- justify-content: center;
- max-height: unset;
- height: unset;
+ .faq__question_mark_1__vector {
+ top: 913px;
+ left: 691px;
+ }
- .faq__body__left__bottom {
- max-width: unset;
- width: 100%;
- }
+ .faq__question_mark_2__vector {
+ top: 103px;
+ left: 1198px;
+ }
- .faq__body__left__top {
- max-width: unset;
- width: 100%;
- }
- }
- }
+ .faq__random_shape_1__vector {
+ top: 574px;
+ left: 1382px;
}
- @media screen and (max-width: 1340px) {
- max-width: 67rem;
- width: 100%;
- padding-inline: 4rem;
+ .faq__square__vector {
+ top: 392px;
+ left: 1519px;
}
- @media screen and (max-width: 576px) {
- padding-inline: 2rem;
+ .faq__triangle__vector {
+ top: 942px;
+ left: 142px;
}
- }
- .faq__blob {
- position: absolute;
- width: 9.64481rem;
- height: 9.54356rem;
- flex-shrink: 0;
- top: 3rem;
- left: 12rem;
+ .faq__zig_zak_1__vector {
+ top: 1132px;
+ left: 1009px;
+ }
+
+ .faq__zig_zak_2__vector {
+ top: 666px;
+ left: 354px;
+ }
}
}
diff --git a/src/components/private/index.js b/src/components/private/index.js
index 07700a3..ba90d21 100644
--- a/src/components/private/index.js
+++ b/src/components/private/index.js
@@ -3,7 +3,8 @@ import { lazy } from "react";
export const Landing = lazy(() => import("./landing/Landing"));
export const Marquee = lazy(() => import("./marquee/Marquee"));
export const About = lazy(() => import("./about/About"));
-export const Timeline = lazy(() => import("./timeline/Timeline"));
+export const Timer = lazy(() => import("./timer/Timer"));
+export const TimeLine = lazy(()=>import("./timeline/Timeline"))
export const Theme = lazy(() => import("./themes/Theme"));
export const Prizes = lazy(() => import("./prizes/Prizes"));
export const Sponsors = lazy(() => import("./sponsors/Sponsors"));
diff --git a/src/components/private/landing/Landing.jsx b/src/components/private/landing/Landing.jsx
index fe73335..f75ad07 100644
--- a/src/components/private/landing/Landing.jsx
+++ b/src/components/private/landing/Landing.jsx
@@ -24,14 +24,14 @@ const Landing = () => {
Who can participate?
-- Students in college, schools can apply. If you can innovate - or just want to have a fun learning weekend, you are most - welcome. -
+
+
+
+ {faqContent.map((item, index) => {
+ return (
+
+
+
-
+
{item?.answer}
+
-
Can I participate remotely?
-- Hack4Bengal 3.0 is an in-person hackathon. So remote - participation is not applicable. -
+ ); + })} + +
+
-
-
- How much does it cost to participate?
+ +- Nothing, participation in Hack4Bengal 3.0 is absolutely - FREE!!🎉 We’ll have meals, snacks, and beverages onsite at the - hackathon, in addition to swags, prizes, fun mini-events and - more. + Reach out on our Discord Server{" "} + + (in #🎫ticket-support) + {" "} + or email us at{" "} + + hack4bengal@gmail.com + + !
-
I have more questions, where and how can i reach out
-- Reach out on our Discord Server ( - - in #🎫ticket-support - - ) or email us at{" "} - hack4bengal@gmail.com - ! -
-
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
-
3.0 Registrations Opening soon
); + paragraphs.push(Hack4Bengal 3.0 Registrations are Live
); } return ( diff --git a/src/components/private/mentors/Mentors.jsx b/src/components/private/mentors/Mentors.jsx index d4f80bd..8ee6fd0 100644 --- a/src/components/private/mentors/Mentors.jsx +++ b/src/components/private/mentors/Mentors.jsx @@ -2,7 +2,7 @@ import React from "react"; import Marquee from "react-fast-marquee"; import HeaderData from "../../../assets/data/HeaderContent"; import { mentorContent } from "../../../assets/data/MentorsContent"; -import { Header } from "../../shared"; +import { ComingSoon, Header } from "../../shared"; import "./Mentors.scss"; import SingleMentors from "./singleMentors/SingleMentors"; @@ -10,14 +10,14 @@ function Mentors() { return (
+
*/}
-
+ */}
{mentorContent.map((mentor, index) => {
return
+
+
+ 
+
+ TBD
+1st Runner Up
+
+ 
+ {/* 
*/}
+
+ TBD
+Winner
+
+ 
+
+ TBD
+2nd Runner Up
+
-
}>
- Online Speaker Schedule
+
{
speakers.map(
- (speaker) => (
-
+ />
- {speaker.name} -
-{speaker.topic}
@@ -40,10 +34,6 @@ const SingleSpeaker = ({ speaker }) => {
-
{
{speaker.date}
-- {speaker.time} -
+
);
diff --git a/src/components/private/sponsors/Sponsors.scss b/src/components/private/sponsors/Sponsors.scss
index f9aa893..7604004 100644
--- a/src/components/private/sponsors/Sponsors.scss
+++ b/src/components/private/sponsors/Sponsors.scss
@@ -1,35 +1,82 @@
.sponsors__parent {
padding: 4rem 7rem;
+ padding-bottom: 0;
margin-top: 8rem;
position: relative;
overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ gap: 6rem;
@media screen and (max-width: 576px) {
padding: 2rem 1.5rem;
margin-top: 2rem;
+ gap: 4rem;
+ }
+
+ .sponsors__container_flex {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+ gap: 4rem;
+ max-width: 1400px;
+ margin: auto;
+
+ @media screen and (max-width: 576px) {
+ gap: 1rem;
+ }
}
.sponsors__container {
display: flex;
flex-direction: column;
+ h1 {
+ font-size: 2rem;
+ margin-bottom: 2.5rem;
+ font-weight: 600;
+ color: #fff;
+ text-align: center;
+ font-family: var(--heading-font);
+ position: relative;
+
+ @media screen and (max-width: 576px) {
+ font-size: 1.4rem;
+ }
+
+ &::after {
+ content: "";
+ position: absolute;
+ border: 1px solid var(--h4bred);
+ width: 200px;
+ bottom: -1rem;
+ left: 50%;
+ transform: translate(-50%, -50%);
+
+ @media screen and (max-width: 576px) {
+ bottom: -0.5rem;
+ width: 120px;
+ }
+ }
+ }
.sponsors__flexbox {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
- margin-top: 6rem;
+
gap: 1.5rem;
max-width: 1400px;
margin: auto;
- margin-top: 6rem;
@media screen and (max-width: 576px) {
- display: grid;
- grid-row-gap: 1rem;
- grid-column-gap: 1rem;
- grid-template-columns: repeat(2, 1fr);
+ gap: 1rem;
}
}
}
+
+ .platinum_container {
+ margin-top: 2rem;
+ }
}
diff --git a/src/components/private/sponsors/singlesponsors/SingleSponsors.jsx b/src/components/private/sponsors/singlesponsors/SingleSponsors.jsx
index 073a6fd..5687147 100644
--- a/src/components/private/sponsors/singlesponsors/SingleSponsors.jsx
+++ b/src/components/private/sponsors/singlesponsors/SingleSponsors.jsx
@@ -1,13 +1,20 @@
import React from "react";
import "./SingleSponsors.scss";
-const SingleSponsors = ({ sponsor }) => {
+const SingleSponsors = ({ sponsor, type }) => {
+ const style = {};
+
return (
- <>
-
+
+
+ Gold Sponsors
- {sponsors.map((item, index) => {
- return
+
+
+ Silver Sponsor
+
+ {sponsors["Silver"].map((item, index) => {
+ return (
+
+
+ {/*
+
*/}
+
+ Venue Partner
+
+ {sponsors["Venue"].map((item, index) => {
+ return (
+
+
+
+ Domain Partner
+
+ {sponsors["Domain"].map((item, index) => {
+ return (
+
+
- 
+
+
+
-
+
);
};
diff --git a/src/components/private/sponsors/singlesponsors/SingleSponsors.scss b/src/components/private/sponsors/singlesponsors/SingleSponsors.scss
index 7714ec2..6afbf87 100644
--- a/src/components/private/sponsors/singlesponsors/SingleSponsors.scss
+++ b/src/components/private/sponsors/singlesponsors/SingleSponsors.scss
@@ -1,23 +1,78 @@
.single__sponsor {
- background-color: var(--text-color);
+ background-color: #171717;
padding: 0.5rem 1rem;
- border-radius: 50px;
+ border-radius: 12px;
width: min-content;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
- width: 210px;
- height: 72px;
+ width: 250px;
+ height: 100px;
@media screen and (max-width: 576px) {
- width: 143px;
- height: 43px;
+ width: 200px;
+ height: 80;
}
img {
- object-fit: cover;
max-width: 100%;
max-height: 100%;
+ object-fit: cover;
+ min-width: 200px;
+
+ @media screen and (max-width: 576px) {
+ min-width: 170px;
+ }
}
}
+
+.gold {
+ border: 1px solid #efc230;
+ transition: all 0.3s ease;
+}
+
+.gold:hover {
+ -webkit-box-shadow: inset 0px 0px 13px -2px rgba(239, 194, 48, 1);
+ -moz-box-shadow: inset 0px 0px 13px -2px rgba(239, 194, 48, 1);
+ box-shadow: inset 0px 0px 13px -2px rgba(239, 194, 48, 1);
+ transition: all 0.3s ease;
+}
+
+.platinum {
+ border: 1px solid #e5e4e2;
+ transition: all 0.3s ease;
+}
+
+.platinum:hover {
+ -webkit-box-shadow: inset 0px 0px 13px -2px rgba(229, 228, 226, 1);
+ -moz-box-shadow: inset 0px 0px 13px -2px rgba(229, 228, 226, 1);
+ box-shadow: inset 0px 0px 13px -2px rgba(229, 228, 226, 1);
+ transition: all 0.3s ease;
+}
+
+.silver {
+ border: 1px solid #c0c0c0;
+ transition: all 0.3s ease;
+}
+
+.silver:hover {
+ -webkit-box-shadow: inset 0px 0px 13px -2px rgba(192, 192, 192, 1);
+ -moz-box-shadow: inset 0px 0px 13px -2px rgba(192, 192, 192, 1);
+ box-shadow: inset 0px 0px 13px -2px rgba(192, 192, 192, 1);
+ transition: all 0.3s ease;
+}
+
+.bronze,
+.domain {
+ border: 1px solid #cd7f32;
+ transition: all 0.3s ease;
+}
+
+.bronze:hover,
+.domain:hover {
+ -webkit-box-shadow: inset 0px 0px 13px -2px rgba(205, 127, 50, 1);
+ -moz-box-shadow: inset 0px 0px 13px -2px rgba(205, 127, 50, 1);
+ box-shadow: inset 0px 0px 13px -2px rgba(205, 127, 50, 1);
+ transition: all 0.3s ease;
+}
diff --git a/src/components/private/teamCard/TeamCard.jsx b/src/components/private/teamCard/TeamCard.jsx
index 4d62c3e..deffb62 100644
--- a/src/components/private/teamCard/TeamCard.jsx
+++ b/src/components/private/teamCard/TeamCard.jsx
@@ -28,21 +28,23 @@ const TeamCard = ({ img, imgAlt, name, title, twitter, linkedIn }) => {
-
-
-
+ {twitter && (
+
+
+
+ )}
+
+ );
+};
+
+export default Modal;
diff --git a/src/components/private/timeline/Timeline.jsx b/src/components/private/timeline/Timeline.jsx
deleted file mode 100644
index dff572d..0000000
--- a/src/components/private/timeline/Timeline.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from "react";
-import ghori from "../../../assets/images/timer/ghori.png";
-import letters from "../../../assets/images/timer/letters.png";
-import mask from "../../../assets/images/timer/mask.png";
-import "./Timeline.scss";
-
-const Timeline = () => {
- return (
- <>
-
+
+
+
+
+ -
+
- Registration opens on June 1, 2024, and closes on June 24, 2024. +
- The hackathon takes place from June 28, 2024, to June 30, 2024. +
- The judging round, winner announcement, and closing ceremony will all occur on June 30, 2024. +
- {/* 
- 
-
-
- );
-};
-
-export default Timeline;
diff --git a/src/components/private/timeline/Timeline.scss b/src/components/private/timeline/Timeline.scss
index a595e8e..308e29d 100644
--- a/src/components/private/timeline/Timeline.scss
+++ b/src/components/private/timeline/Timeline.scss
@@ -1,140 +1,161 @@
-.timeline__parent {
- padding: 0rem 0rem;
- margin-top: 0rem;
- position: relative;
- overflow: hidden;
-
- @media screen and (max-width: 576px) {
- padding: 3rem 1.5rem;
- }
-
- .body {
- display: flex;
- align-items: center;
-
- @media screen and (max-width: 576px) {
- justify-content: center;
+.timeline {
+ margin-top: 2rem;
+ padding: 4rem 5rem 8rem 5rem;
+
+ @media screen and (max-width: 768px) {
+ padding: 1rem;
+ }
+ @media screen and (max-width: 344px) {
+ padding: 1rem;
+ }
+ .header__parent{
+ position: relative;
+ h1{
+ letter-spacing: 0.2rem !important;
+ }
+ h2{
+ position: absolute;
+ // top: 5px;
}
-
- .timer {
+ }
+ .timeline__content {
display: flex;
- flex-direction: column;
justify-content: center;
- align-items: center;
- gap: 4rem;
- margin-top: -4rem;
-
- @media screen and (max-width: 576px) {
- margin-top: 0rem;
- gap: 3rem;
+ align-items: flex-start;
+ flex-wrap: wrap;
+ gap: 8rem;
+ margin-top: 8rem;
+
+ @media screen and (max-width: 900px) {
+ padding: 2rem;
+ gap:4rem 9rem ;
}
-
- .header_1 {
- font-family: "Montserrat", sans-serif;
- letter-spacing: 2px;
- font-size: 100px;
- text-align: center;
- color: white;
- font-weight: 800;
- line-height: 1;
- z-index: 1;
-
- @media screen and (max-width: 576px) {
- font-size: 48px;
- }
+ @media screen and (max-width: 412px) {
+ padding: 2rem 1rem;
+ gap: 2rem 4rem ;
+ }
+ @media screen and (max-width: 540px) {
+ gap: 2rem 6rem;
+ }
+ @media screen and (max-width: 400px) {
+ gap: 2rem 4rem;
}
-
- .countdown {
+
+
+
+ .timeline__event {
display: flex;
- justify-content: center;
align-items: center;
- gap: 1rem;
- z-index: 1;
-
- @media screen and (max-width: 576px) {
- gap: 10px;
+ flex-direction: column;
+ justify-content: center;
+
+ .timeline__d-flex {
+ display: flex;
+ align-items: center;
+ position: relative;
+ justify-content: space-between;
+
+ .timeline__number {
+ font-size: clamp(5rem, 12vw, 12rem);
+ font-weight: bolder;
+ font-family: var(--body-font);
+ position: relative;
+ margin-right: 2rem;
+
+ &.active {
+ color: #ffffff;
+ }
+
+ &.inactive {
+ color: #646464;
+ }
+ }
+
+
+ .timeline__circle_details {
+ position: absolute;
+ border-radius: 50%;
+ width: 7rem;
+ height: 7rem;
+ text-align: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ left: 96%;
+ transform: translateX(-50%);
+ overflow: hidden;
+
+ @media screen and (max-width: 1024px) {
+ left: 103%;
+ }
+ @media screen and (max-width: 860px) {
+ left: 109%;
+ }
+ @media screen and (max-width: 820px) {
+ width: 6rem;
+ height: 6rem;
+ left: 100%;
+ }
+
+ @media screen and (max-width: 540px) {
+ width: 5rem;
+ left: 108%;
+ height: 5rem;
+ left: 93%;
+ }
+ img {
+ height: 100%;
+ width: 100%;
+ display: block;
+ border-radius: 50%;
+ background-color: #1b1b1b;
+ }
+
+ p {
+ font-family: var(--body-font);
+ font-size: 1rem;
+ position: absolute;
+ color: white;
+ padding: 5px;
+
+ @media screen and (max-width: 853px) {
+ font-size: 0.7rem;
+ }
+ }
+ }
}
-
- .time {
- font-family: "Montserrat", sans-serif;
- font-size: 60px;
+
+ .timeline__date {
+ padding: 0.5rem;
text-align: center;
- color: white;
- font-weight: 800;
- line-height: 1;
- background-color: #2a2727;
- padding: 1rem;
- border-radius: 18px;
-
+ background-color: red;
+ width: 100%;
+ border-radius: 5px;
+ font-family: var(--body-font);
+ font-size: 12px;
+ font-weight: 600;
+ cursor: pointer;
+ color: #ffffff;
+ border: none;
+ width:120px;
+ outline:none;
+ @media screen and (max-width: 900px) {
+ width: 100px;
+ }
@media screen and (max-width: 576px) {
- font-size: 28px;
+ font-size: 0.75rem;
+ padding: 0.25rem;
}
-
- p:nth-child(2) {
- font-size: 18px;
- font-weight: 600;
-
- @media screen and (max-width: 576px) {
- font-size: 15px;
- }
+ @media screen and (max-width: 320px) {
+ width: 90px;
+ }
+ @media screen and (max-width: 250px) {
+ width: auto;
+ padding-left:7px ;
+ padding-right: 7px;
}
- }
-
- .colon {
- font-size: 60px;
}
}
}
}
-
- .mask {
- right: 0;
- top: 0;
- position: absolute;
- width: 40%;
-
- @media screen and (max-width: 576px) {
- width: 100%;
- }
- }
-
- .letters {
- width: 50%;
- opacity: 0.7;
- right: 9rem;
- top: 6rem;
- position: absolute;
-
- @media screen and (max-width: 576px) {
- display: none;
- }
- }
-
- .ghori {
- width: 55%;
-
- @media screen and (max-width: 576px) {
- display: none;
- }
- }
-
- .text {
- width: 35%;
- }
-}
-
-.colon {
- animation: blink 2s infinite; // Adjust the animation duration as needed
-}
-
-@keyframes blink {
- 0% {
- opacity: 1;
- }
- 50% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
-}
+
\ No newline at end of file
diff --git a/src/components/private/timeline/Timeline.tsx b/src/components/private/timeline/Timeline.tsx
new file mode 100644
index 0000000..a933592
--- /dev/null
+++ b/src/components/private/timeline/Timeline.tsx
@@ -0,0 +1,61 @@
+import React, { useState, useEffect } from "react";
+import "./Timeline.scss";
+import HeaderData from "../../../assets/data/HeaderContent";
+import { Header } from "../../shared";
+import { EventTimeline } from "../../../assets/data/Timeline";
+import Modal from "./Modal";
+
+const Timeline = () => {
+ const [currentDate, setCurrentDate] = useState(new Date());
+ const [isModalOpen, setIsModalOpen] = useState(false);
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setCurrentDate(new Date());
+ }, 1000);
+ return () => {
+ clearInterval(interval);
+ };
+ }, []);
+
+ const closeModal = () => {
+ setIsModalOpen(false);
+ };
+
+ return (
+ <>
+ {isModalOpen &&
- 
-
-
-
-
- Journey
-
-
-
- Journey
Begins In
-
-
-
-
-
-
-
- 25
-Days
-:
- -
-
-
- 25
-Hours
-:
- -
-
- {/* 25
-Mins
-:
- -
-
*/}
- 25
-Secs
-
+
+
+ );
+};
+
+export default Timeline;
diff --git a/src/components/private/timer/Timer.jsx b/src/components/private/timer/Timer.jsx
new file mode 100644
index 0000000..e964f72
--- /dev/null
+++ b/src/components/private/timer/Timer.jsx
@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from "react";
+import ghori from "../../../assets/images/timer/ghori.png";
+import letters from "../../../assets/images/timer/letters.png";
+import mask from "../../../assets/images/timer/mask.png";
+import "./Timer.scss";
+
+const Timer = () => {
+ const calculateTimeLeft = () => {
+ const targetDate = new Date("2024-06-28T18:00:00");
+ const now = new Date();
+ const difference = targetDate - now;
+
+ let timeLeft = {};
+
+ if (difference > 0) {
+ timeLeft = {
+ days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+ hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+ minutes: Math.floor((difference / 1000 / 60) % 60),
+ seconds: Math.floor((difference / 1000) % 60),
+ };
+ } else {
+ timeLeft = {
+ days: 0,
+ hours: 0,
+ minutes: 0,
+ seconds: 0,
+ };
+ }
+
+ return timeLeft;
+ };
+
+ const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+
+ useEffect(() => {
+ const timer = setInterval(() => {
+ setTimeLeft(calculateTimeLeft());
+ }, 1000);
+
+ return () => clearInterval(timer);
+ }, []);
+
+ return (
+ <>
+
+ {EventTimeline.map((event, index) => (
+
+
+
+ ))}
+
+
+
+ event.date ? "active" : "inactive" + }`} + > + {event.number} +
+
+ 
+
+ {event.circleText}
+
+
+
+
+
+ );
+};
+
+export default Timer;
diff --git a/src/components/private/timer/Timer.scss b/src/components/private/timer/Timer.scss
new file mode 100644
index 0000000..92c8b5c
--- /dev/null
+++ b/src/components/private/timer/Timer.scss
@@ -0,0 +1,193 @@
+.timeline__parent {
+ padding: 4rem 0rem;
+ padding-top: 0;
+ margin-top: 0rem;
+ position: relative;
+ overflow: hidden;
+
+ @media screen and (max-width: 576px) {
+ padding: 3rem 1.5rem;
+ }
+
+ .body {
+ display: flex;
+ align-items: center;
+
+ @media screen and (max-width: 850px) {
+ justify-content: center;
+ }
+
+ .timer {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 4rem;
+ margin-top: -4rem;
+
+ @media screen and (max-width: 1120px) {
+ margin-top: 0rem;
+ }
+
+ @media screen and (max-width: 850px) {
+ margin-top: 5rem;
+ }
+
+ @media screen and (max-width: 576px) {
+ margin-top: 0rem;
+ gap: 3rem;
+ }
+
+ .header_1 {
+ font-family: "Montserrat", sans-serif;
+ letter-spacing: 2px;
+ font-size: 77px;
+ text-align: center;
+ color: white;
+ font-weight: 800;
+
+ z-index: 1;
+
+ background: #ffffff;
+ background: linear-gradient(to right, #ffffff 0%, #ff0000 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+
+ @media screen and (max-width: 1120px) {
+ font-size: 60px;
+ }
+
+ @media screen and (max-width: 576px) {
+ font-size: 48px;
+ }
+ }
+
+ .countdown {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+ z-index: 1;
+
+ @media screen and (max-width: 1120px) {
+ gap: 5px;
+ }
+
+ @media screen and (max-width: 576px) {
+ gap: 10px;
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ width: 90%;
+ row-gap: 20px;
+ justify-content: center;
+ .colon {
+ justify-content: center;
+ display: flex;
+ }
+ }
+
+ .time {
+ font-family: "Montserrat", sans-serif;
+ font-size: 60px;
+ text-align: center;
+ color: white;
+ font-weight: 800;
+ line-height: 1;
+ background-color: #2a2727;
+ padding: 1rem;
+ border-radius: 18px;
+ width: 115px;
+ height: 115px;
+
+ @media screen and (max-width: 1120px) {
+ font-size: 30px;
+ }
+
+ @media screen and (max-width: 576px) {
+ font-size: 35px;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ padding: 0.5rem;
+ }
+
+ p:nth-child(2) {
+ font-size: 18px;
+ font-weight: 600;
+
+ @media screen and (max-width: 576px) {
+ font-size: 15px;
+ }
+ }
+ }
+
+ .colon {
+ font-size: 60px;
+ }
+
+ .hidecolon {
+ @media screen and (max-width: 576px) {
+ display: none;
+ }
+ }
+ }
+ }
+ }
+
+ .mask {
+ right: 0;
+ top: 0;
+ position: absolute;
+ width: 45%;
+
+ @media screen and (max-width: 576px) {
+ width: 100%;
+ }
+ }
+
+ .letters {
+ width: 45%;
+ opacity: 0.7;
+ right: 9rem;
+ top: 10rem;
+ position: absolute;
+
+ @media screen and (max-width: 576px) {
+ display: none;
+ }
+ }
+
+ .ghori {
+ width: 55%;
+
+ @media screen and (max-width: 1200px) {
+ width: 45%;
+ }
+
+ @media screen and (max-width: 850px) {
+ display: none;
+ }
+ }
+
+ .text {
+ width: 35%;
+ }
+}
+
+.colon {
+ animation: blink 2s infinite; // Adjust the animation duration as needed
+}
+
+@keyframes blink {
+ 0% {
+ opacity: 1;
+ }
+
+ 50% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
\ No newline at end of file
diff --git a/src/components/shared/button/Button.jsx b/src/components/shared/button/Button.jsx
index 474aaaa..a3212f6 100644
--- a/src/components/shared/button/Button.jsx
+++ b/src/components/shared/button/Button.jsx
@@ -1,9 +1,9 @@
import PropTypes from "prop-types";
import React from "react";
-import { Link } from "react-router-dom";
+import {Link} from "react-router-dom";
import "./Button.scss";
-const Button = ({ type, isLoading, isDisabled, to, onClick, children }) => {
+const Button = ({type, isLoading, isDisabled, to, onClick, children}) => {
const buttonClass = `button ${type} ${isLoading ? "loading" : ""}`;
if (to) {
diff --git a/src/components/shared/footer/Footer.jsx b/src/components/shared/footer/Footer.jsx
index 80ddf2f..68f4dad 100644
--- a/src/components/shared/footer/Footer.jsx
+++ b/src/components/shared/footer/Footer.jsx
@@ -1,15 +1,53 @@
-import React from "react";
+import React, { useState } from "react";
import { Link } from "react-router-dom";
import footerContent from "../../../assets/data/FooterContent";
+import gradient from "../../../assets/images/FooterImages/gradient.png";
import h4b from "../../../assets/images/FooterImages/hack4bengalbrand.webp";
+import taxi from "../../../assets/images/FooterImages/taxi.png";
+import tram from "../../../assets/images/FooterImages/tram.png";
import "./Footer.scss";
const Footer = () => {
+ const [hover, setHover] = useState({
+ applyCss: false,
+ showText: false,
+ });
+
return (
+
+
+
+
+
+ Journey
+
+
+
+ Journey
Begins In
+
+
+
+
+
+
+
+ + {timeLeft?.days < 10 ? `0${timeLeft?.days}` : timeLeft?.days} +
+Days
+:
+ +
+
+
+ + {timeLeft?.hours < 10 + ? `0${timeLeft?.hours}` + : timeLeft?.hours} +
+Hours
+:
+ +
+
+
+ + {timeLeft?.minutes < 10 + ? `0${timeLeft?.minutes}` + : timeLeft?.minutes} +
+Mins
+:
+ +
+
+ + {timeLeft?.seconds < 10 + ? `0${timeLeft?.seconds}` + : timeLeft?.seconds} +
+Secs
+
+
+ );
+};
+
+export default Register;
diff --git a/src/pages/registration/Register.scss b/src/pages/registration/Register.scss
new file mode 100644
index 0000000..7ae196f
--- /dev/null
+++ b/src/pages/registration/Register.scss
@@ -0,0 +1,204 @@
+.surprise_landing {
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+
+ align-items: center;
+ justify-content: center;
+ margin: auto;
+ justify-items: center;
+ font-weight: 600;
+ font-family: sans-serif;
+ height: 100vh;
+ max-height: 100vh;
+ min-height: 100vh;
+ overflow: hidden;
+
+ @media screen and (max-width: 576px) {
+ padding: 1rem;
+ }
+
+ .surprise_body {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin: auto;
+ justify-items: center;
+ position: relative;
+ font-weight: 600;
+ font-family: sans-serif;
+ height: 100vh;
+ font-family: var(--body-font);
+ .launching {
+ @media screen and (max-width: 576px) {
+ margin-bottom: 1rem;
+ }
+ }
+ p {
+ font-size: 1.3rem;
+ }
+ h1 {
+ font-size: 3rem;
+ color: var(--h4bred);
+
+ @media screen and (max-width: 576px) {
+ font-size: 2rem;
+ }
+ }
+
+ .mascot {
+ @media screen and (max-width: 576px) {
+ width: 90%;
+ }
+ }
+
+ .talk-bubble {
+ display: inline-block;
+ position: relative;
+ width: 280px;
+ height: auto;
+ background-color: var(--h4bred);
+ padding: 1rem;
+ border-radius: 10px;
+ position: absolute;
+ top: 36%;
+ left: 83%;
+ transform: translate(-50%, -50%);
+ .talktext {
+ p {
+ font-size: 16px;
+ }
+ }
+
+ @media screen and (max-width: 576px) {
+ display: none;
+ }
+ }
+
+ .border {
+ border: 8px solid #666;
+ }
+ .round {
+ border-radius: 10px;
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+ }
+
+ .tri-right.border.btm-left:before {
+ content: " ";
+ position: absolute;
+ width: 0;
+ height: 0;
+ left: -8px;
+ right: auto;
+ top: auto;
+ bottom: -40px;
+ border: 32px solid;
+ border-color: transparent transparent transparent #666;
+ }
+ .tri-right.btm-left:after {
+ content: " ";
+ position: absolute;
+ width: 0;
+ height: 0;
+ left: -20px;
+ right: auto;
+ top: auto;
+ rotate: -43deg;
+ bottom: -32.6px;
+ border: 33px solid;
+
+ border-color: var(--h4bred) transparent transparent transparent;
+ }
+
+ .letters {
+ width: 89%;
+ opacity: 0.7;
+ right: 30px;
+ top: 176px;
+ position: absolute;
+ @media screen and (max-width: 576px) {
+ display: none;
+ }
+ }
+
+ .red_redirect {
+ color: var(--h4bred);
+ font-size: 1.2rem;
+ font-weight: 600;
+ display: none !important;
+ margin-top: 1rem;
+
+ @media screen and (max-width: 576px) {
+ display: block !important;
+ }
+ }
+ }
+}
+
+.loader {
+ width: 16px;
+ height: 16px;
+ position: relative;
+
+ border-radius: 50%;
+ color: #fff;
+ background: currentColor;
+ box-shadow: 32px 0, -32px 0, 64px 0;
+
+ @media screen and (max-width: 576px) {
+ margin-top: 1rem;
+ }
+}
+
+.loader::after {
+ content: "";
+ position: absolute;
+ left: -32px;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ border-radius: 10px;
+ background: #ff3d00;
+ animation: move 3s linear infinite alternate;
+}
+
+@keyframes move {
+ 0%,
+ 5% {
+ left: -32px;
+ width: 16px;
+ }
+ 15%,
+ 20% {
+ left: -32px;
+ width: 48px;
+ }
+ 30%,
+ 35% {
+ left: 0px;
+ width: 16px;
+ }
+ 45%,
+ 50% {
+ left: 0px;
+ width: 48px;
+ }
+ 60%,
+ 65% {
+ left: 32px;
+ width: 16px;
+ }
+
+ 75%,
+ 80% {
+ left: 32px;
+ width: 48px;
+ }
+ 95%,
+ 100% {
+ left: 64px;
+ width: 16px;
+ }
+}
diff --git a/src/pages/surprise/Surprise.jsx b/src/pages/surprise/Surprise.jsx
new file mode 100644
index 0000000..cd472b8
--- /dev/null
+++ b/src/pages/surprise/Surprise.jsx
@@ -0,0 +1,39 @@
+// src/App.jsx
+import React, { useEffect } from "react";
+import mascot from "../../assets/images/misc/mascot.png";
+import letters from "../../assets/images/timer/letters.png";
+import "./Surprise.scss";
+
+const Surprise = () => {
+ useEffect(() => {
+ if (window.location.pathname === "/surprise") {
+ setTimeout(() => {
+ window.location.href = "https://bit.ly/h4bs3_discord";
+ }, 3000);
+ }
+ }, []);
+
+ return (
+
+ 
+
+
+ {/*
+
+ Redirecting you to registrations . . .
+Registrations are open!🚀
+
+
*/}
+
+
+ We Love You 3000 🤍
{" "} +Redirecting you to registrations.
+Redirecting you to registrations
+
+
+ );
+};
+
+export default Surprise;
diff --git a/src/pages/surprise/Surprise.scss b/src/pages/surprise/Surprise.scss
new file mode 100644
index 0000000..35de9b4
--- /dev/null
+++ b/src/pages/surprise/Surprise.scss
@@ -0,0 +1,206 @@
+.surprise_landing {
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+
+ align-items: center;
+ justify-content: center;
+ margin: auto;
+ justify-items: center;
+ font-weight: 600;
+ font-family: sans-serif;
+ height: 100vh;
+ max-height: 100vh;
+ min-height: 100vh;
+ overflow: hidden;
+
+ @media screen and (max-width: 576px) {
+ padding: 1rem;
+ }
+
+ .surprise_body {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ margin: auto;
+ justify-items: center;
+ position: relative;
+ font-weight: 600;
+ font-family: sans-serif;
+ height: 100vh;
+ font-family: var(--body-font);
+ .launching {
+ @media screen and (max-width: 576px) {
+ margin-bottom: 1rem;
+ }
+ }
+ p {
+ font-size: 1.5rem;
+ }
+ h1 {
+ font-size: 3rem;
+ span {
+ color: var(--h4bred);
+ }
+
+ @media screen and (max-width: 576px) {
+ font-size: 2rem;
+ }
+ }
+
+ .mascot {
+ @media screen and (max-width: 576px) {
+ width: 90%;
+ }
+ }
+
+ .talk-bubble {
+ display: inline-block;
+ position: relative;
+ width: 280px;
+ height: auto;
+ background-color: var(--h4bred);
+ padding: 1rem;
+ border-radius: 10px;
+ position: absolute;
+ top: 36%;
+ left: 83%;
+ transform: translate(-50%, -50%);
+ .talktext {
+ p {
+ font-size: 16px;
+ }
+ }
+
+ @media screen and (max-width: 576px) {
+ display: none;
+ }
+ }
+
+ .border {
+ border: 8px solid #666;
+ }
+ .round {
+ border-radius: 10px;
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+ }
+
+ .tri-right.border.btm-left:before {
+ content: " ";
+ position: absolute;
+ width: 0;
+ height: 0;
+ left: -8px;
+ right: auto;
+ top: auto;
+ bottom: -40px;
+ border: 32px solid;
+ border-color: transparent transparent transparent #666;
+ }
+ .tri-right.btm-left:after {
+ content: " ";
+ position: absolute;
+ width: 0;
+ height: 0;
+ left: -20px;
+ right: auto;
+ top: auto;
+ rotate: -43deg;
+ bottom: -32.6px;
+ border: 33px solid;
+
+ border-color: var(--h4bred) transparent transparent transparent;
+ }
+
+ .letters {
+ width: 89%;
+ opacity: 0.7;
+ right: 30px;
+ top: 176px;
+ position: absolute;
+ @media screen and (max-width: 576px) {
+ display: none;
+ }
+ }
+
+ .red_redirect {
+ color: var(--h4bred);
+ font-size: 1.2rem;
+ font-weight: 600;
+ display: none !important;
+ margin-top: 1rem;
+
+ @media screen and (max-width: 576px) {
+ display: block !important;
+ }
+ }
+ }
+}
+
+.loader {
+ width: 16px;
+ height: 16px;
+ position: relative;
+
+ border-radius: 50%;
+ color: #fff;
+ background: currentColor;
+ box-shadow: 32px 0, -32px 0, 64px 0;
+
+ @media screen and (max-width: 576px) {
+ margin-top: 1rem;
+ }
+}
+
+.loader::after {
+ content: "";
+ position: absolute;
+ left: -32px;
+ top: 0;
+ width: 16px;
+ height: 16px;
+ border-radius: 10px;
+ background: #ff3d00;
+ animation: move 3s linear infinite alternate;
+}
+
+@keyframes move {
+ 0%,
+ 5% {
+ left: -32px;
+ width: 16px;
+ }
+ 15%,
+ 20% {
+ left: -32px;
+ width: 48px;
+ }
+ 30%,
+ 35% {
+ left: 0px;
+ width: 16px;
+ }
+ 45%,
+ 50% {
+ left: 0px;
+ width: 48px;
+ }
+ 60%,
+ 65% {
+ left: 32px;
+ width: 16px;
+ }
+
+ 75%,
+ 80% {
+ left: 32px;
+ width: 48px;
+ }
+ 95%,
+ 100% {
+ left: 64px;
+ width: 16px;
+ }
+}
diff --git a/src/pages/team/Team.jsx b/src/pages/team/Team.jsx
index db797fd..f64440d 100644
--- a/src/pages/team/Team.jsx
+++ b/src/pages/team/Team.jsx
@@ -54,22 +54,20 @@ const Team = ({ refs }) => {
{/* Advisor */}
+
+
+
+
+
+ Launching Registrations
++ Exclusively for our Discord Family +
+
+
+
+
+ We Love You 3000 🤍
{" "} +Redirecting you to registrations.
+Redirecting you to registrations
+
- {teamContent.advisor
- .map((advisor,index)=>{
- return(
-
+ {teamContent.advisor.map((advisor, index) => {
+ return (
+
+ />
+ );
+ })}
+