mission and vision page added

Author: vedikaag99

.gitignore

@@ -0,0 +1 @@
+**/node_modules

frontend/src/App.js

@@ -1,12 +1,23 @@
 // import logo from './logo.svg';
+import { Fragment } from "react";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import "semantic-ui-css/semantic.min.css";
 import './App.css';
+// Pages Import
+import Mission from "./Components/Mission/mission";
 
-function App() {
+const App = () => {
   return (
-    <>
-      <h1>App.js</h1>
-    </>
+    <Fragment>
+      <div className="Container">
+        <Router>
+          <Switch>
+            <Route exact path="/" component={Mission} />
+          </Switch>
+        </Router>
+      </div>
+    </Fragment>
   );
-}
+};
 
 export default App;

frontend/src/Components/Mission/dummy.js

@@ -0,0 +1,27 @@
+const arrayCards = [
+    [
+       "AWARENESS ABOUT TECH",
+       "Help us reach tier-two and tier-three cities",
+    ],
+    [
+        "AWARENESS ABOUT TECH",
+        "Help us reach tier-two and tier-three cities",
+    ],
+    [
+        "AWARENESS ABOUT TECH",
+        "Help us reach tier-two and tier-three cities",
+    ],
+    [
+        "AWARENESS ABOUT TECH",
+        "Help us reach tier-two and tier-three cities",
+    ],
+    [
+        "AWARENESS ABOUT TECH",
+        "Help us reach tier-two and tier-three cities",
+    ],
+    [
+        "AWARENESS ABOUT TECH",
+        "Help us reach tier-two and tier-three cities",
+    ],
+  ];
+  export default arrayCards

frontend/src/Components/Mission/mission.js

@@ -0,0 +1,31 @@
+import React from "react";
+import style from "./mission.module.css";
+import arrayCards from "./dummy";
+
+const Mission = () => {
+  return (
+    <main>
+      <div id={style["hero"]}>
+        <div id={style["heading"]}>
+          <div id={style["title"]}>MISSION AND VISION</div>
+        </div>
+      </div>
+      <div id={style["all-cards"]}>
+        {arrayCards.map((element, i) => {
+          return (
+            <div
+              className={`${style["card-item"]} ${style["card-item2"]} key={${i}}`}
+            >
+            <div className={style["clickable-card"]}>
+                <div className={style["card-title"]}><i class="fas fa-grin-stars"></i>{element[0]}</div>
+                <div className={style["card-content"]}>{element[1]}</div>
+            </div>
+            </div>
+          );
+        })}
+      </div>
+    </main>
+  );
+};
+
+export default Mission;

frontend/src/Components/Mission/mission.module.css

@@ -0,0 +1,89 @@
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+#hero {
+  display: flex;
+  width: 100vw;
+}
+
+#heading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  margin: 4rem 0 2rem 0;
+  text-align: center;
+}
+
+#title {
+  display: flex;
+  font-size: 3.5rem;
+  line-height: 4rem;
+  font-weight: bold;
+}
+
+#all-cards {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  width: 95vw;
+  margin: 0.5em;
+}
+
+.card-item {
+  background-color: #95B9C7;
+  text-align: center;
+  font-size: 1.5rem;
+  border-radius: 1em;
+  box-shadow: 0.3em 0.3em 0.4em grey;
+  height: auto;
+  width: 15em;
+  margin: 1em;
+  background-position: left center;
+  transition: background 0.3s ease-out;
+}
+
+.card-item2 {
+  height: 10em;
+}
+
+.clickable-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1.6em;
+  padding-top: 2.5em;
+  color: var(--bs-light);
+}
+
+.card-title {
+  font-size: 1.4rem;
+  margin-bottom: 1.5rem;
+  line-height: 1.9rem;
+  font-weight: bold;
+}
+
+.card-content {
+  font-weight: normal;
+  text-align: center;
+  font-size: 1.2rem;
+  width: 100%;
+}
+
+.card-item:hover {
+  background: linear-gradient(
+  45deg,
+  #f9d976 0%,
+  #f39f86 90%
+);
+}
+
+@media screen and (orientation: portrait) {
+  #hero {
+    flex-direction: column;
+  }
+
+}