Merge branch 'old-dev' into old-production

package.json

@@ -11,7 +11,6 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.3.4",
     "crypto-js": "^4.1.1",
-    "flowbite": "^1.5.3",
     "flowbite-react": "^0.2.0",
     "gh-avatar": "^3.0.0",
     "html-to-image": "^1.11.11",

src/App.js

@@ -51,6 +51,7 @@ import Spiderman from "./Pages/CapTF/Spiderman";
 import Submission from "./Pages/CapTF/Submission";
 import Pathway from "./Pages/Pathway/Pathway";
 import EnablersPage from "./Pages/EnablersPage/EnablersPage";
+import In50Hours from "./Pages/In50Hours/In50Hours";
 function App() {
   const [redirects, setRedirects] = useState([]);
   const [isLoaded, setIsLoaded] = useState(false);
@@ -94,6 +95,7 @@ function App() {
           <Route path="*" element={<NotFound isLoaded={isLoaded} />} />
           <Route path="/termsandconditions" element={<TermsAndCondition />} />
           <Route path="/privacypolicy" element={<PrivacyPolicy />} />
+          <Route path="/in50hours" element={<In50Hours />} />
           <Route element={<Layout />}>
             <Route path="/" element={<Home />} />
             <Route path="/blogs" element={<BlogLanding />} />

src/Pages/In50Hours/In50Hours.jsx

@@ -0,0 +1,117 @@
+import React from "react";
+import Navbar from "../../Components/Navbar/Navbar";
+import styles from "./In50Hours.module.css";
+import Footer from "../../Components/Footer/Footer";
+import heroImage from "./heroimg.png";
+import supporters from "./supporters.png";
+import tsImage from "./tsimg.png";
+import makemyPass from "./makemypass.png";
+
+const In50Hours = () => {
+  return (
+    <>
+      <Navbar />
+      <div className={styles.mainContainer}>
+        <div className={styles.firstSectionContainer}>
+          <img src={heroImage} alt="" className={styles.fsImage} />
+          <div className={styles.fsTexts}>
+            <p className={styles.fsHeading}>
+              IN<span>50</span>HOURS
+            </p>
+            <p className={styles.fsTagline}>
+              Get ready to hack your way to success in just 50 hours at In50Hr!
+              Dive into a whirlwind of innovation, collaboration, and
+              caffeine-fueled brilliance!
+            </p>
+            <p className={styles.supportedBy}>Supported By</p>
+            <img src={supporters} alt="" className={styles.supporters} />
+            <a
+              target="_blank"
+              rel="noreferrer"
+              href="https://www.makemypass.com/in50hours"
+            >
+              <button className={styles.register}>Register Now</button>
+            </a>
+          </div>
+        </div>
+        <div className={styles.secondSectionContainer}>
+          <div className={styles.steps}>
+            <div className={styles.step}>
+              <p className={styles.stepHeading}>
+                P<span>IT</span>CH
+              </p>
+              <p className={styles.stepTagline}>
+                Pitch your boldest ideas and captivate them all in just minutes.{" "}
+              </p>
+            </div>
+            <div className={styles.step}>
+              <p className={styles.stepHeading}>
+                PRO<span>TO</span>TYPE
+              </p>
+              <p className={styles.stepTagline}>
+                Dive into the hustle and bustle of collaboration as teams form
+                and dive headfirst into building their prototypes.
+              </p>
+            </div>
+            <div className={styles.step}>
+              <p className={styles.stepHeading}>
+                <span>GET</span> FUNDED
+              </p>
+              <p className={styles.stepTagline}>
+                Pitch your boldest ideas and captivate them all in just minutes.{" "}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className={styles.thirdSectionContainer}>
+          <div className={styles.tsTexts}>
+            <p className={styles.tsHeading}>
+              HOW <span>TO</span> JOIN
+            </p>
+            <p className={styles.tsTagline}>
+              If you are already into the level 5, you can participate in the
+              event completely free of cost. If you are not, you can still
+              participate by paying a nominal fee of INR 1000.
+            </p>
+            <p className={styles.supportedBy}>Ticketing Partner</p>
+            <img src={makemyPass} alt="" className={styles.tsImage} />{" "}
+          </div>
+        </div>
+        <div className={styles.steps}>
+          <div className={styles.step}>
+            <p className={styles.stepHeading}>
+              STEP <span>1</span>
+            </p>
+            <p className={styles.stepTagline}>
+              Collect your coupons, got to the to In-50hr-Challenge and type
+              <strong> /get-in50hours-coupon</strong> to get your coupon code.
+            </p>
+          </div>
+          <div className={styles.step}>
+            <p className={styles.stepHeading}>
+              STEP <span>2</span>
+            </p>
+            <p className={styles.stepTagline}>
+              <strong>Go to MakeMyPass.com </strong> and register for the event
+              using the coupon code. In case you are not in level 5, you can pay
+              and register.
+            </p>
+          </div>
+          <div className={styles.step}>
+            <p className={styles.stepHeading}>
+              STEP <span>3</span>
+            </p>
+            <p className={styles.stepTagline}>
+              You will receive a confirmation mail having the ticket for joining
+              the event on the 23rd of February.
+            </p>
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </>
+  );
+};
+
+export default In50Hours;

src/Pages/In50Hours/In50Hours.module.css

@@ -0,0 +1,211 @@
+.fsImage {
+  max-width: 45rem;
+  width: 100%;
+  object-fit: cover;
+}
+
+.mainContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.firstSectionContainer {
+  display: flex;
+  flex-direction: row-reverse;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: 2rem;
+  color: #414d59;
+  max-width: 1300px;
+  width: 100%;
+}
+
+.fsHeading {
+  font-size: 4.5rem;
+  font-weight: 600;
+  text-align: left;
+  font-family: "Poppins", sans-serif;
+}
+
+.fsHeading span {
+  color: #0098ca;
+}
+
+.fsTagline {
+  font-size: 1rem;
+  font-weight: 400;
+  text-align: left;
+  font-family: "Poppins", sans-serif;
+  margin-top: -1rem;
+  max-width: 30rem;
+}
+
+.supporters {
+  width: 18rem;
+}
+
+.supportedBy {
+  font-size: 1.05rem;
+  font-weight: 600;
+  text-align: left;
+  font-family: "Poppins", sans-serif;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.steps {
+  display: flex;
+  flex-direction: row;
+  align-items: start;
+  justify-content: space-evenly;
+  padding: 0 2rem;
+  color: #414d59;
+  width: 100vw;
+  margin: auto;
+  flex-wrap: wrap;
+}
+
+.step {
+  width: 20rem;
+  margin: 1rem;
+  margin-top: 0;
+}
+
+.stepHeading {
+  font-size: 1.5rem;
+  font-weight: 600;
+  text-align: left;
+  font-family: "Poppins", sans-serif;
+  margin-top: 1rem;
+}
+
+.stepHeading span {
+  color: #0098ca;
+}
+
+.stepTagline {
+  font-size: 1rem;
+  font-weight: 400;
+  text-align: left;
+  font-family: "Poppins", sans-serif;
+  margin-top: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.tsHeading {
+  font-size: 3.25rem;
+  font-weight: 700;
+  text-align: left;
+  font-family: "Poppins", sans-serif;
+}
+
+.tsHeading span {
+  color: #0098ca;
+}
+
+.tsTagline {
+  font-size: 1rem;
+  font-weight: 400;
+  text-align: left;
+  font-family: "Poppins", sans-serif;
+  margin-bottom: 1rem;
+  max-width: 30rem;
+}
+
+.thirdSectionContainer {
+  max-width: 1300px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: 2rem;
+  color: #414d59;
+  margin: auto;
+}
+
+.register {
+  background-color: #0098ca;
+  color: #ffffff;
+  margin-top: 1rem;
+  padding: 0.5rem 1.5rem;
+  border-radius: 0.5rem;
+}
+
+.tsImage {
+  width: 5rem;
+}
+
+@media (max-width: 1240px) {
+  .firstSectionContainer {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .fsImage {
+    max-width: 30rem;
+  }
+
+  .fsHeading {
+    font-size: 3.75rem;
+  }
+
+  .fsTagline {
+    font-size: 0.875rem;
+  }
+
+  .stepHeading {
+    font-size: 1.25rem;
+  }
+
+  .stepTagline {
+    font-size: 0.875rem;
+  }
+}
+
+@media (max-width: 728px) {
+  .fsImage {
+    width: 25rem;
+  }
+
+  .tsImage {
+    width: 20rem;
+  }
+
+  .fsHeading {
+    font-size: 3rem;
+  }
+
+  .fsTagline {
+    font-size: 0.875rem;
+    margin-top: 1rem;
+  }
+
+  .firstSectionContainer {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .steps {
+    justify-content: flex-start;
+  }
+
+  .stepHeading {
+    font-size: 1.25rem;
+  }
+
+  .stepTagline {
+    font-size: 0.875rem;
+  }
+
+  .tsHeading {
+    font-size: 2.25rem;
+  }
+
+  .tsTagline {
+    font-size: 0.875rem;
+  }
+}