From 8c9f326a4de12cb21075c0d7dafc96cf8cf50fbd Mon Sep 17 00:00:00 2001
From: Fallen-dev <rishav.m.19.02@gmail.com>
Date: Mon, 6 Feb 2023 00:41:10 +0530
Subject: [PATCH] add guidelines route

---
 package-lock.json                         |  15 +++
 public/index.html                         |   6 ++
 src/App.tsx                               |  10 ++
 src/Routes.ts                             |   1 +
 src/components/NavBar/NavBar.tsx          |  21 +---
 src/pages/Guidelines/guidelines.style.css |   3 +
 src/pages/Guidelines/index.tsx            | 116 ++++++++++++++++++++++
 7 files changed, 156 insertions(+), 16 deletions(-)
 create mode 100644 src/pages/Guidelines/guidelines.style.css
 create mode 100644 src/pages/Guidelines/index.tsx

diff --git a/package-lock.json b/package-lock.json
index 8e7f979..c743b0a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "@types/react": "^18.0.27",
         "@types/react-dom": "^18.0.10",
         "bootstrap": "^5.2.3",
+        "emailjs-com": "^3.2.0",
         "firebase": "^9.16.0",
         "react": "^18.2.0",
         "react-bootstrap": "^2.7.0",
@@ -7206,6 +7207,15 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz",
       "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA=="
     },
+    "node_modules/emailjs-com": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/emailjs-com/-/emailjs-com-3.2.0.tgz",
+      "integrity": "sha512-Prbz3E1usiAwGjMNYRv6EsJ5c373cX7/AGnZQwOfrpNJrygQJ15+E9OOq4pU8yC977Z5xMetRfc3WmDX6RcjAA==",
+      "deprecated": "The SDK name changed to @emailjs/browser",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/emittery": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
@@ -23037,6 +23047,11 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz",
       "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA=="
     },
+    "emailjs-com": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/emailjs-com/-/emailjs-com-3.2.0.tgz",
+      "integrity": "sha512-Prbz3E1usiAwGjMNYRv6EsJ5c373cX7/AGnZQwOfrpNJrygQJ15+E9OOq4pU8yC977Z5xMetRfc3WmDX6RcjAA=="
+    },
     "emittery": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
diff --git a/public/index.html b/public/index.html
index 7aa5eea..61be092 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,6 +11,12 @@
     integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
     crossorigin="anonymous" referrerpolicy="no-referrer" />
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      prefix: 'tw-'
+    }
+  </script>
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/src/App.tsx b/src/App.tsx
index 7742e4d..5fb26ea 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,6 +10,7 @@ import {
   sbhthemesRoute,
   updatesRoute,
   EmailRoute,
+  guidelinesRoute
 } from "./Routes";
 import { lazy, Suspense } from "react";
 import { DataProvider } from "./contexts/Data";
@@ -24,6 +25,7 @@ const ProjectImplementation = lazy(
   () => import("./pages/ProjectImplementation/ProjectImplementation")
 );
 const Venue = lazy(() => import("./pages/Venue/Venue"));
+const Guidelines = lazy(() => import("./pages/Guidelines/index"));
 const ThemePage = lazy(() => import("./pages/ThemePage/ThemePage"));
 const Updates = lazy(() => import("./pages/Updates/Updates"));
 const ProcessFlow = lazy(() => import("./pages/ProcessFlow/ProcessFlow"));
@@ -66,6 +68,14 @@ function App() {
                 </Suspense>
               }
             ></Route>
+            <Route
+              path={guidelinesRoute}
+              element={
+                <Suspense fallback={<></>}>
+                  <Guidelines />
+                </Suspense>
+              }
+            ></Route>
             <Route
               path={venueRoute}
               element={
diff --git a/src/Routes.ts b/src/Routes.ts
index 9de774d..0650312 100644
--- a/src/Routes.ts
+++ b/src/Routes.ts
@@ -6,3 +6,4 @@ export const venueRoute = "/venue";
 export const sbhthemesRoute = "/sbh-themes";
 export const updatesRoute = "/updates";
 export const EmailRoute = "/email";
+export const guidelinesRoute = '/guidelines'
\ No newline at end of file
diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx
index a7711d3..dae9116 100644
--- a/src/components/NavBar/NavBar.tsx
+++ b/src/components/NavBar/NavBar.tsx
@@ -8,8 +8,8 @@ import {
   venueRoute,
   sbhthemesRoute,
   updatesRoute,
+  guidelinesRoute
 } from "../../Routes";
-import guideline_clg from "../../assets/docs/Guidelines-College-SPOC.pdf";
 import guideline_school from "../../assets/docs/Guidelines-School-SPOC.pdf";
 import idea_template_college from "../../assets/docs/Idea-Presentation-Format-SBH2023-College.pptx";
 import idea_template_school from "../../assets/docs/Idea-Presentation-Format-SIH2022-School.pptx";
@@ -21,7 +21,7 @@ const NavBar = () => {
   return (
     <>
       <Navbar collapseOnSelect expand="xxl" className="px-3">
-        <Navbar.Brand href="#home">
+        <Navbar.Brand href={indexRoute}>
           <img
             src={logo}
             alt="logo"
@@ -64,20 +64,9 @@ const NavBar = () => {
                 Project Implementation
               </Link>
             </div>
-            <NavDropdown title="Guidelines">
-              <div className="dropdown-item">
-                <span className="dot"></span>
-                <a href={guideline_clg} target="_blank">
-                  Colleges
-                </a>
-              </div>
-              <div className="dropdown-item">
-                <span className="dot"></span>
-                <a href={guideline_school} target="_blank">
-                  Schools
-                </a>
-              </div>
-            </NavDropdown>
+            <div className="nav-link text-decoration-none">
+              <Link to={guidelinesRoute}>Guidelines</Link>
+            </div>
             <NavDropdown title="Idea Template">
               <div className="dropdown-item">
                 <span className="dot"></span>
diff --git a/src/pages/Guidelines/guidelines.style.css b/src/pages/Guidelines/guidelines.style.css
new file mode 100644
index 0000000..5756624
--- /dev/null
+++ b/src/pages/Guidelines/guidelines.style.css
@@ -0,0 +1,3 @@
+p {
+  margin-bottom: 0 !important;
+}
\ No newline at end of file
diff --git a/src/pages/Guidelines/index.tsx b/src/pages/Guidelines/index.tsx
new file mode 100644
index 0000000..cf11df3
--- /dev/null
+++ b/src/pages/Guidelines/index.tsx
@@ -0,0 +1,116 @@
+import './guidelines.style.css'
+import pdf_college from '../../assets/docs/Guidelines-College-SPOC.pdf'
+import pdf_school from '../../assets/docs/Guidelines-School-SPOC.pdf'
+
+const info = [
+  'Total cash prizes worth INR 2,00,000 + goodies, internship opportunities for SBH Senior & SBH  Junior both.',
+  'With certificate of excellence for top 3 teams.',
+  'With certificate of distinction for top 10 teams.',
+  'With certificate of participation to all teams.'
+]
+
+const Guidelines = ()=> {
+  return (
+    <div className="tw-min-h-screen tw-space-y-4 tw-mb-0 tw-p-6 sm:tw-mx-auto sm:tw-max-w-2xl">
+      <div>
+        <h1 className="tw-mb-4 tw-text-2xl tw-font-bold">Rewards and Prizes</h1>
+        <p>All participants will be provided a With certificate of participation. Top 3 teams will be awarded with prize money, exciting goodies and a With certificate of excellence for SBH Junior and SBH Senior. Also the team of the best solution against each problem statement will also be awarded. SBH Senior</p>
+      </div>
+      <div>
+        <h3 className="tw-mb-4 tw-text-xl tw-font-bold">Read the guidelines</h3>
+        <div className="tw-flex tw-items-center tw-space-x-6">
+          <a href={pdf_college} target="_blank" className="tw-rounded tw-bg-transparent tw-px-5 tw-py-2 tw-text-sm tw-font-bold tw-text-blue-600 tw-ring-2 hover:tw-bg-blue-600 hover:tw-text-white">For college</a>
+          <a href={pdf_school} target="_blank" className="tw-rounded tw-bg-transparent tw-px-5 tw-py-2 tw-text-sm tw-font-bold tw-text-blue-600 tw-ring-2 hover:tw-bg-blue-600 hover:tw-text-white">For school</a>
+        </div>
+      </div>
+      <h3 className="tw-pt-4 tw-text-xl tw-font-bold tw-border-b-2">SBH Senior</h3>
+      <div className="tw-flex tw-items-center tw-rounded tw-border tw-bg-yellow-200 tw-p-4">
+        <div className="tw-mr-6 tw-aspect-square tw-w-16">
+          <img src="https://png.pngtree.com/png-vector/20191029/ourmid/pngtree-first-prize-gold-trophy-icon-prize-gold-trophy-winner-first-prize-png-image_1908592.jpg" alt="prize image" />
+        </div>
+        <div>
+          <p className="tw-text-lg tw-font-bold">Winner</p>
+          <p>&#8377; 50,000</p>
+          <p className="tw-text-sm tw-font-medium tw-text-yellow-600">With certificate</p>
+        </div>
+      </div>
+      <div className="tw-flex tw-items-center tw-rounded tw-border tw-bg-cyan-200 tw-p-4">
+        <div className="tw-mr-6 tw-aspect-square tw-w-16">
+          <img src="https://png.pngtree.com/png-vector/20191029/ourmid/pngtree-first-prize-gold-trophy-icon-prize-gold-trophy-winner-first-prize-png-image_1908592.jpg" alt="prize image" />
+        </div>
+        <div>
+          <p className="tw-text-lg tw-font-bold">First runner up</p>
+          <p>&#8377; 30,000</p>
+          <p className="tw-text-sm tw-font-medium tw-text-cyan-600">With certificate</p>
+        </div>
+      </div>
+      <div className="tw-flex tw-items-center tw-rounded tw-border tw-bg-green-200 tw-p-4">
+        <div className="tw-mr-6 tw-aspect-square tw-w-16">
+          <img src="https://png.pngtree.com/png-vector/20191029/ourmid/pngtree-first-prize-gold-trophy-icon-prize-gold-trophy-winner-first-prize-png-image_1908592.jpg" alt="prize image" />
+        </div>
+        <div>
+          <p className="tw-text-lg tw-font-bold">Second runner up</p>
+          <p>&#8377; 20,000</p>
+          <p className="tw-text-sm tw-font-medium tw-text-green-600">With certificate</p>
+        </div>
+      </div>
+      <div className="tw-flex tw-items-center tw-rounded tw-border tw-bg-gray-200 tw-p-4">
+        <div className="tw-mr-6 tw-aspect-square tw-w-16">
+          <img src="https://png.pngtree.com/png-vector/20191029/ourmid/pngtree-first-prize-gold-trophy-icon-prize-gold-trophy-winner-first-prize-png-image_1908592.jpg" alt="prize image" />
+        </div>
+        <div>
+          <p className="tw-text-lg tw-font-bold">Participation With certificate</p>
+          <p className="tw-text-sm tw-font-medium tw-text-gray-600">With certificate</p>
+        </div>
+      </div>
+      <h3 className="tw-pt-4 tw-text-xl tw-font-bold tw-border-b-2">SBH Junior</h3>
+      <div className="tw-flex tw-items-center tw-rounded tw-border tw-bg-yellow-200 tw-p-4">
+        <div className="tw-mr-6 tw-aspect-square tw-w-16">
+          <img src="https://png.pngtree.com/png-vector/20191029/ourmid/pngtree-first-prize-gold-trophy-icon-prize-gold-trophy-winner-first-prize-png-image_1908592.jpg" alt="prize image" />
+        </div>
+        <div>
+          <p className="tw-text-lg tw-font-bold">Winner</p>
+          <p>&#8377; 25,000</p>
+          <p className="tw-text-sm tw-font-medium tw-text-yellow-600">With certificate</p>
+        </div>
+      </div>
+      <div className="tw-flex tw-items-center tw-rounded tw-border tw-bg-cyan-200 tw-p-4">
+        <div className="tw-mr-6 tw-aspect-square tw-w-16">
+          <img src="https://png.pngtree.com/png-vector/20191029/ourmid/pngtree-first-prize-gold-trophy-icon-prize-gold-trophy-winner-first-prize-png-image_1908592.jpg" alt="prize image" />
+        </div>
+        <div>
+          <p className="tw-text-lg tw-font-bold">First runner up</p>
+          <p>&#8377; 15,000</p>
+          <p className="tw-text-sm tw-font-medium tw-text-cyan-600">With certificate</p>
+        </div>
+      </div>
+      <div className="tw-flex tw-items-center tw-rounded tw-border tw-bg-green-200 tw-p-4">
+        <div className="tw-mr-6 tw-aspect-square tw-w-16">
+          <img src="https://png.pngtree.com/png-vector/20191029/ourmid/pngtree-first-prize-gold-trophy-icon-prize-gold-trophy-winner-first-prize-png-image_1908592.jpg" alt="prize image" />
+        </div>
+        <div>
+          <p className="tw-text-lg tw-font-bold">Second runner up</p>
+          <p>&#8377; 10,000</p>
+          <p className="tw-text-sm tw-font-medium tw-text-green-600">With certificate</p>
+        </div>
+      </div>
+      <div className="tw-flex tw-items-center tw-rounded tw-border tw-bg-gray-200 tw-p-4">
+        <div className="tw-mr-6 tw-aspect-square tw-w-16">
+          <img src="https://png.pngtree.com/png-vector/20191029/ourmid/pngtree-first-prize-gold-trophy-icon-prize-gold-trophy-winner-first-prize-png-image_1908592.jpg" alt="prize image" />
+        </div>
+        <div>
+          <p className="tw-text-lg tw-font-bold">Participation</p>
+          <p className="tw-text-sm tw-font-medium tw-text-gray-600">With certificate</p>
+        </div>
+      </div>
+      <div className="tw-pt-4 tw-text-xl tw-font-bold">Additional info</div>
+      <div>
+        {
+          info.map((data, index) => (<p className="tw-font-medium">{++index}. {data}</p>))
+        }
+      </div>
+    </div>
+  );
+}
+
+export default Guidelines;
\ No newline at end of file