From 48522228b1e149d468d8c5725c11d8af99379241 Mon Sep 17 00:00:00 2001
From: tamalCodes <tamalcodes@gmail.com>
Date: Thu, 12 Sep 2024 18:48:42 +0530
Subject: [PATCH] fix: winners

---
 src/App.jsx                                |  67 +---------
 src/assets/data/HeaderContent.js           |   7 ++
 src/assets/data/NavbarContent.js           |   9 +-
 src/components/private/marquee/Marquee.jsx |   7 +-
 src/components/private/winners/Winner.jsx  |  95 ++++++++++++++
 src/components/private/winners/Winner.scss | 137 +++++++++++++++++++++
 src/pages/home/Home.jsx                    |   6 +-
 7 files changed, 252 insertions(+), 76 deletions(-)
 create mode 100644 src/components/private/winners/Winner.jsx
 create mode 100644 src/components/private/winners/Winner.scss

diff --git a/src/App.jsx b/src/App.jsx
index 499c061..5863b92 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,19 +5,14 @@ import Loading from "./components/shared/loading/Loading";
 import Notfound from "./pages/404/Notfound";
 import Forward from "./pages/Forward";
 import Brand from "./pages/brand/Brand";
-import Cloud from "./pages/cloud101/Cloud101";
+import Certificate from "./pages/certificate/Certificate";
 import CodeofConduct from "./pages/coc/CodeofConduct";
-import Evangelist from "./pages/evangelist/Evangelist";
 import Events from "./pages/events/Events";
-import Live from "./pages/live/Live";
 import Home from "./pages/home/Home";
-import Surprise from "./pages/surprise/Surprise";
 import Team from "./pages/team/Team";
 import Telegram from "./pages/telegram/Telegram";
-import "./styles/Globals.scss";
-import Register from "./pages/registration/Register";
 import Verify from "./pages/verify/Verify";
-import Certificate from "./pages/certificate/Certificate";
+import "./styles/Globals.scss";
 
 const App = () => {
   return (
@@ -43,6 +38,7 @@ const App = () => {
                 />
               }
             />
+
             <Route
               exact
               path="/guide"
@@ -56,74 +52,19 @@ const App = () => {
                 />
               }
             />
-            <Route
-              exact
-              path="/community"
-              element={
-                <Forward
-                  pathname={"/community"}
-                  title={"Community Partners"}
-                  url={"https://lu.ma/H4B-community-partners"}
-                />
-              }
-            />
-            <Route
-              exact
-              path="/apply"
-              element={
-                <Forward
-                  pathname={"/apply"}
-                  title={"S4 Applications"}
-                  url={
-                    "https://docs.google.com/forms/d/e/1FAIpQLScxL27u1UUIRi6L6I8GOpfSaLIJnW34_gfoL2_Lfy9xItgCYw/viewform"
-                  }
-                />
-              }
-            />
-            <Route
-              exact
-              path="/howto"
-              element={
-                <Forward
-                  pathname={"/howto"}
-                  title={"Registration Walkthrough"}
-                  url={
-                    "https://www.instagram.com/reel/C7y9O1Ly4nk/?igsh=amYyamVtMDVlcmRi"
-                  }
-                />
-              }
-            />
-            <Route
-              exact
-              path="/call-for-mentors"
-              element={
-                <Forward
-                  pathname={"/call-for-mentors"}
-                  title={"Call for Mentors"}
-                  url={"https://lu.ma/9fkggmb3"}
-                />
-              }
-            />
 
             <Route exact path="/coc" element={<CodeofConduct />} />
             <Route exact path="/brand" element={<Brand />} />
             <Route exact path="/tg" element={<Telegram />} />
             <Route exact path="/verify" element={<Verify />} />
             <Route exact path="/certificate" element={<Certificate />} />
-            <Route exact path="/cloud-101" element={<Cloud />} />
             <Route exact path="/events" element={<Events />} />
-            <Route exact path="/evangelist" element={<Evangelist />} />
             <Route exact path="/team" element={<Team />} />
-            <Route exact path="/live" element={<Live />} />
-            <Route exact path="/load" element={<Loading />} />
-            {/* <Route exact path="/surprise" element={<Register />} /> */}
             <Route exact path="/*" element={<Notfound />} />
           </Routes>
         </main>
 
-        {window.location.pathname !== "/surprise" &&
-          window.location.pathname !== "/register" &&
-          window.location.pathname !== "/discord" && <Footer />}
+        {window.location.pathname !== "/discord" && <Footer />}
       </Suspense>
     </Router>
   );
diff --git a/src/assets/data/HeaderContent.js b/src/assets/data/HeaderContent.js
index 63aac6b..98751a2 100644
--- a/src/assets/data/HeaderContent.js
+++ b/src/assets/data/HeaderContent.js
@@ -6,6 +6,13 @@ const HeaderData = {
     frontWord: "Hackathon Prizes",
     frontWordMobile: "Prizes",
   },
+  winner: {
+    backWord: "Winners",
+    backWordSize_mobile: "85px",
+    backWordSpacing_mobile: "0.2rem",
+    frontWord: "Champions",
+    frontWordMobile: "Champions",
+  },
   venue: {
     backWord: "Venue",
     backWordSize_mobile: "85px",
diff --git a/src/assets/data/NavbarContent.js b/src/assets/data/NavbarContent.js
index bbf6e3a..66f41c0 100644
--- a/src/assets/data/NavbarContent.js
+++ b/src/assets/data/NavbarContent.js
@@ -12,10 +12,6 @@ const navbarContent = {
     //   link: "about",
     // },
 
-    {
-      text: "Timeline",
-      link: "timeline",
-    },
     {
       text: "Venue",
       link: "venue",
@@ -48,10 +44,7 @@ const navbarContent = {
         text: "Testimonials",
         link: "testimonials",
       },
-      {
-        text: "Events",
-        link: "/events",
-      },
+
       {
         text: "FAQ",
         link: "faq",
diff --git a/src/components/private/marquee/Marquee.jsx b/src/components/private/marquee/Marquee.jsx
index 04762d8..17ae0db 100644
--- a/src/components/private/marquee/Marquee.jsx
+++ b/src/components/private/marquee/Marquee.jsx
@@ -6,7 +6,12 @@ function Marquee() {
 
   const paragraphs = [];
   for (let i = 0; i < numParagraphs; i++) {
-    paragraphs.push(<p key={i}> Hack4Bengal 3.0 is Live!</p>);
+    paragraphs.push(
+      <p key={i}>
+        {" "}
+        Thankyou for the overwhelming response in Hack4Bengal 3.0 !
+      </p>
+    );
   }
 
   return (
diff --git a/src/components/private/winners/Winner.jsx b/src/components/private/winners/Winner.jsx
new file mode 100644
index 0000000..0de3616
--- /dev/null
+++ b/src/components/private/winners/Winner.jsx
@@ -0,0 +1,95 @@
+import React from "react";
+import { FiExternalLink } from "react-icons/fi";
+import HeaderData from "../../../assets/data/HeaderContent";
+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 { Header } from "../../shared";
+import "./Winner.scss";
+
+const Winner = () => {
+  return (
+    <div className="winners_parent" id="prizes">
+      <Header {...HeaderData.winner} />
+
+      <div className="winners_container">
+        <div className="first_runner_up winner_box desktop">
+          <img src={second} className="prize_logo winner_logo" alt="" />
+          <h1>EdgeRunners</h1>
+          <p>
+            Project Synode{" "}
+            <a
+              href="https://www.hackquest.io/en/hackathon/projects/Hack4Bengal-30-Synode-Offline-Wallet"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <FiExternalLink />
+            </a>
+          </p>
+        </div>
+        <div className="winner winner_box desktop">
+          <img src={first} className="prize_logo winner_logo" alt="" />
+          {/*  */}
+          <h1>Bongo(n)</h1>
+          <p>
+            Project PAW-sitive{" "}
+            <a
+              href="https://www.hackquest.io/en/hackathon/projects/Hack4Bengal-30-PAW-sitive"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <FiExternalLink />
+            </a>
+          </p>
+        </div>
+        <div className="second_runner_up winner_box desktop">
+          <img src={third} className="prize_logo winner_logo" alt="" />
+          <h1>BengalDevs</h1>
+          <p>
+            Project Term AI
+            <a
+              href="https://www.hackquest.io/en/hackathon/projects/Hack4Bengal-30-Term-AI"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <FiExternalLink />
+            </a>
+          </p>
+        </div>
+      </div>
+      <div className="winners_container mobile">
+        <div className="first_runner_up winner_box">
+          <img src={second} className="prize_logo winner_logo" alt="" />
+          <h1>EdgeRunners</h1>
+          <p>
+            Project Synode{" "}
+            <a
+              href="https://www.hackquest.io/en/hackathon/projects/Hack4Bengal-30-Synode-Offline-Wallet"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <FiExternalLink />
+            </a>
+          </p>
+        </div>
+
+        <div className="second_runner_up winner_box">
+          <img src={third} className="prize_logo winner_logo" alt="" />
+          <h1>BengalDevs</h1>
+          <p>
+            Project Term AI{" "}
+            <a
+              href="https://www.hackquest.io/en/hackathon/projects/Hack4Bengal-30-Term-AI"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <FiExternalLink />
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Winner;
diff --git a/src/components/private/winners/Winner.scss b/src/components/private/winners/Winner.scss
new file mode 100644
index 0000000..d6c54d8
--- /dev/null
+++ b/src/components/private/winners/Winner.scss
@@ -0,0 +1,137 @@
+.winners_parent {
+  padding: 4rem 7rem;
+  padding-bottom: 0;
+  margin-top: 4rem;
+  margin-bottom: 3rem;
+  position: relative;
+  overflow: hidden;
+
+  @media screen and (max-width: 576px) {
+    padding: 2rem 1.5rem;
+    margin-top: 2rem;
+  }
+
+  .winners_container {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    width: 90%;
+    margin: 0 auto;
+    margin-top: 6rem;
+
+    &.mobile {
+      display: none;
+    }
+
+    @media screen and (max-width: 1200px) {
+      margin-top: 4rem;
+      flex-direction: column;
+      gap: 3rem;
+      width: 100%;
+      align-items: center;
+
+      &.mobile {
+        display: flex;
+        flex-direction: row;
+      }
+
+      .first_runner_up {
+        &.desktop {
+          display: none;
+        }
+      }
+
+      .second_runner_up {
+        &.desktop {
+          display: none;
+        }
+      }
+    }
+
+    .winner_box {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 30%;
+      text-align: center;
+      font-family: var(--heading-font);
+
+      h1 {
+        font-weight: 800;
+      }
+
+      p {
+        font-size: 1.3rem;
+        margin-top: 1rem;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        svg {
+          cursor: pointer;
+          width: 25px;
+          height: 25px;
+          color: #ff1717;
+        }
+      }
+
+      @media screen and (max-width: 576px) {
+        width: 80%;
+        margin: 0 auto;
+      }
+
+      img {
+        @media screen and (max-width: 576px) {
+          width: 100%;
+          margin: 0 auto;
+        }
+      }
+    }
+
+    .winner {
+      h1 {
+        font-size: 3rem;
+        background: #ffffff;
+        background: linear-gradient(to right, #ffffff 0%, #ffc700 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+
+        @media screen and (max-width: 576px) {
+          font-size: 2.5rem;
+        }
+      }
+    }
+
+    .first_runner_up {
+      h1 {
+        font-size: 2.5rem;
+
+        background: #ffffff;
+        background: linear-gradient(to right, #ffffff 0%, #554c4c 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+
+        @media screen and (max-width: 576px) {
+          font-size: 2.5rem;
+        }
+      }
+    }
+
+    .second_runner_up {
+      h1 {
+        font-size: 2.5rem;
+
+        background: #ffffff;
+        background: linear-gradient(to right, #ffffff 0%, #ec8423 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+
+        @media screen and (max-width: 576px) {
+          font-size: 2.5rem;
+        }
+      }
+    }
+  }
+}
diff --git a/src/pages/home/Home.jsx b/src/pages/home/Home.jsx
index 583243b..1a5bcd1 100644
--- a/src/pages/home/Home.jsx
+++ b/src/pages/home/Home.jsx
@@ -11,8 +11,8 @@ import {
 } from "../../components/private";
 import CommunityPartners from "../../components/private/community/CommunityPartners";
 import Theme from "../../components/private/themes/Theme";
-import Timer from "../../components/private/timer/Timer";
 import Venue from "../../components/private/venue/Venue";
+import Winner from "../../components/private/winners/Winner";
 import "./Home.scss";
 
 const Home = () => {
@@ -20,10 +20,8 @@ const Home = () => {
     <div className="main_parent">
       <Landing />
       {window.innerWidth < 600 && <Marquee />}
-      <Timer />
-      {/* <Timeline /> */}
+      <Winner />
       <About />
-      {/* <Spotlight /> */}
       <Venue />
       <Theme />
       <Prizes />