feat(kkem-event-template):added-first-section

gtech-mulearn · Sep 13, 2023 · 325f0b6 · 325f0b6
1 parent 6adbd48
commit 325f0b6
Show file tree

Hide file tree

Showing 6 changed files with 513 additions and 1 deletion.
diff --git a/public/assets/events/kkem/aboutImage.svg b/public/assets/events/kkem/aboutImage.svg
diff --git a/public/assets/events/kkem/mU.svg b/public/assets/events/kkem/mU.svg
diff --git a/public/assets/events/kkem/titleFrame.svg b/public/assets/events/kkem/titleFrame.svg
diff --git a/src/App.js b/src/App.js
@@ -45,7 +45,8 @@ import MutechLeaderboard from "./Pages/MutechLeaderBoard/MutechLeaderBoard";
 import CodeStorm from "./Pages/Events/GTA/CodeStorm/CodeStorm";
 import KKEMLearningFest from "./Pages/KKEMLearningFest/KKEMLearningFest";
 
-import MaveliPortfolio from './Pages/Events/MaveliPortfolio/MaveliPortfolio'
+import MaveliPortfolio from "./Pages/Events/MaveliPortfolio/MaveliPortfolio";
+import KKEMEventTemplate from "./Pages/Events/KKEMEventTemplate/KKEMEventTemplate";
 function App() {
   const [redirects, setRedirects] = useState([]);
   const [isLoaded, setIsLoaded] = useState(false);
@@ -115,6 +116,7 @@ function App() {
             <Route path="events/learningfest" element={<KKEMLearningFest />} />
             <Route path="/keralatechfest" element={<KKEMLearningFest />} />
             <Route path="/maveliportfolio" element={<MaveliPortfolio />} />
+            <Route path="/events/beyondus" element={<KKEMEventTemplate />} />
             <Route path="/team">
               <Route path="" element={<Teams />} />
             </Route>

diff --git a/src/Pages/Events/KKEMEventTemplate/KKEMEventTemplate.jsx b/src/Pages/Events/KKEMEventTemplate/KKEMEventTemplate.jsx
@@ -0,0 +1,73 @@
+import React from "react";
+import styles from "./KKEMEventTemplate.module.css";
+
+const KKEMEventTemplate = () => {
+  return (
+    <>
+      <nav className={styles.navbar}>
+        <div className={styles.container}>
+          <a target="_blank" rel="noreferrer" href="https://mulearn.org">
+            About µLearn
+          </a>
+          <a
+            target="_blank"
+            rel="noreferrer"
+            href="https://knowledgemission.kerala.gov.in/"
+          >
+            About K-KEM
+          </a>
+          <a href="/kkem#events">Our Programs</a>
+        </div>
+      </nav>
+      <div style={{ position: "relative", height: "100%" }}>
+        <img
+          src="/assets/events/kkem/titleFrame.svg"
+          alt="title frame"
+          className={styles.title}
+        />
+        <img src="/assets/events/kkem/mU.svg" alt="mU" className={styles.mU} />
+      </div>
+
+      <div className={styles.aboutSection}>
+        <div className={styles.aboutTexts}>
+          <p className={styles.aboutTextsHeading}>Learning Fest</p>
+          <p className={styles.aboutTextstDescription}>
+            µLearn in association with KKEM brings you Learning Fest a series of
+            bootcamps to improve your skills in various domains and the chance
+            to earn Karma points and various other opportunities.
+          </p>
+          <p className={styles.aboutTextDate}>
+            01 October 2023 - 01 November 2023
+          </p>
+          <button className={styles.aboutTextButton}>Explore More</button>
+        </div>
+        <img
+          src="/assets/events/kkem/aboutImage.svg"
+          alt="about section"
+          className={styles.aboutSectionImage}
+        />
+      </div>
+
+      <div className={styles.countsSectionContainer}>
+        <div className={styles.countSection}>
+          <p className={styles.countSectionCount}>1000+</p>
+          <p className={styles.countSectionDescription}>Participants</p>
+        </div>
+        <div className={styles.countSection}>
+          <p className={styles.countSectionCount}>1000+</p>
+          <p className={styles.countSectionDescription}>Participants</p>
+        </div>
+        <div className={styles.countSection}>
+          <p className={styles.countSectionCount}>1000+</p>
+          <p className={styles.countSectionDescription}>Participants</p>
+        </div>
+      </div>
+
+      <div className={styles.winnerDetails}>
+        <p className={styles.winnerDetailsHeading}>Winners Leaderboard</p>
+      </div>
+    </>
+  );
+};
+
+export default KKEMEventTemplate;
diff --git a/src/Pages/Events/KKEMEventTemplate/KKEMEventTemplate.module.css b/src/Pages/Events/KKEMEventTemplate/KKEMEventTemplate.module.css
@@ -0,0 +1,168 @@
+@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
+
+.navbar {
+  background-color: #ffffff;
+  padding: 2rem 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.container {
+  display: flex;
+  justify-content: space-between;
+  background-color: #fff;
+  padding: 1rem 2rem;
+  border-radius: 1.2rem;
+  width: 100%;
+  max-width: 800px;
+  perspective: 1000px;
+}
+
+.container > a {
+  color: #000;
+  text-decoration: none;
+  font-weight: 600;
+  line-height: 1rem;
+}
+.container > a:hover {
+  color: #2e85fe;
+}
+
+/* Banner */
+html {
+  scroll-behavior: smooth;
+}
+
+.main {
+  max-width: 200rem;
+  margin: 0 auto;
+}
+.title {
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+  object-fit: cover;
+  display: block;
+}
+.mU {
+  position: absolute;
+  top: -30%;
+  left: 20px;
+  height: 150%;
+  opacity: 0.5;
+}
+
+.aboutSection {
+  margin: 2rem;
+  margin-top: 3rem;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.aboutTextsHeading {
+  color: #24292d;
+  font-family: sans-serif, "Plus Jakarta Sans";
+  font-size: 4rem;
+  font-weight: 600;
+  line-height: 111.5%; /* 90.499px */
+}
+
+.aboutTextstDescription {
+  color: #24292d;
+  font-family: sans-serif, "Plus Jakarta Sans";
+  font-size: 1.35rem;
+  font-style: normal;
+  margin-top: 1rem;
+  font-weight: 500;
+  max-width: 40rem;
+  line-height: 127.5%; /* 38.25px */
+}
+
+.aboutTextDate {
+  color: #656565;
+  font-family: sans-serif, "Plus Jakarta Sans";
+  font-size: 1.75rem;
+  font-style: normal;
+  color: #24292d;
+  font-weight: 300;
+  margin-top: 1rem;
+  line-height: 127.5%; /* 38.25px */
+}
+
+.aboutTextButton {
+  margin-bottom: 1rem;
+  color: #ffffff;
+  padding: 1rem 3.5rem;
+  flex-shrink: 0;
+  border-radius: 15.62px;
+  background: #52b565;
+  margin-top: 1.5rem;
+  box-shadow: 0px 0px 41.21519px 0px rgba(0, 0, 0, 0.1);
+}
+
+.aboutSectionImage {
+  width: 400px;
+  height: 400px;
+}
+
+@media screen and (max-width: 1224px) {
+  .aboutTextsHeading {
+    font-size: 3.5rem;
+  }
+
+  .aboutSectionImage {
+    width: 300px;
+    height: 300px;
+  }
+
+  .aboutTextstDescription {
+    font-size: 1.25rem;
+  }
+
+  .aboutTextDate {
+    font-size: 1.5rem;
+  }
+}
+
+@media screen and (max-width: 1004px) {
+  .aboutSection {
+    justify-content: flex-start;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .aboutTextsHeading {
+    font-size: 3rem;
+  }
+
+  .aboutTextstDescription {
+    font-size: 1.25rem;
+  }
+
+  .aboutTextDate {
+    font-size: 1.25rem;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .aboutTextsHeading {
+    font-size: 2.5rem;
+  }
+
+  .aboutTextstDescription {
+    font-size: 1.1rem;
+  }
+
+  .aboutTextDate {
+    font-size: 1.1rem;
+  }
+
+  .aboutTextButton {
+    padding: 0.75rem 3rem;
+
+  }
+}