Added 2 more page for frontend

package.json

@@ -16,16 +16,16 @@
     "prettier:fix": "yarn prettier --write",
     "lint": "yarn workspaces run lint",
     "lint:fix": "yarn lint --fix",
-    "stylelint:check": "yarn stylelint \"**/*.css\"",
-    "stylelint:fix": "yarn stylelint \"**/*.css\" --fix",
+    "stylelint:check": "yarn stylelint \"packages/client/src/**/**/*.css\"",
+    "stylelint:fix": "yarn stylelint \"packages/client/src/**/**/*.css\" --fix",
     "validate": "yarn prettier:check && yarn lint && yarn stylelint:check",
     "fix": "yarn prettier:fix && yarn lint:fix && yarn stylelint:fix",
     "prepare": "husky install"
   },
   "devDependencies": {
-    "eslint-plugin-prettier": "^4.0.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
     "husky": "^7.0.4",
     "lint-staged": "^12.4.0",
     "prettier": "^2.6.2",
@@ -44,5 +44,8 @@
     "**/*.+(css)": [
       "yarn stylelint:check"
     ]
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.5.2"
   }
 }

packages/client/package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^13.5.0",

packages/client/src/App.js

@@ -10,6 +10,8 @@ import { PastRetroPage } from './containers/PastRetroPage/PastRetroPage';
 import IndexPage from './containers/IndexPage/IndexPage';
 import JoinRetroPage from './containers/JoinRetroPage/JoinRetroPage';
 import { RetroCodeProvider } from './containers/Contexts/RetroCodeProvider';
+import ContactUs from './containers/ContactUsPage/ContactUsPage';
+import AboutUs from './containers/AboutUsPage/AboutUsPage';
 
 function App() {
   return (
@@ -27,6 +29,8 @@ function App() {
             <Route path="/retromanagement" element={<RetroManagementPage />} />
             <Route path="/retro/:retroID" element={<RetroPage />} />
             <Route path="*" element={<PageNotFound />} />
+            <Route path="/contact" element={<ContactUs />} />
+            <Route path="/about" element={<AboutUs />} />
           </Routes>
         </Router>
       </RetroCodeProvider>

packages/client/src/containers/AboutUsPage/AboutUsPage.css

@@ -0,0 +1,31 @@
+.people-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+}
+
+.person {
+  text-align: center;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.person img {
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  margin-bottom: 10px;
+}
+
+.person h3 {
+  margin-bottom: 5px;
+}
+
+.person p {
+  margin-bottom: 10px;
+}
+
+.about-us {
+  font-size: 25px;
+}

packages/client/src/containers/AboutUsPage/AboutUsPage.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import './AboutUsPage.css';
+
+const AboutUs = () => {
+  return (
+    <div>
+      <h2 className="about-us">About Us</h2>
+      <p className="para">
+        Welcome to RetroRealm! We offer an inviting and engaging platform for
+        retrospectives, ensuring a fulfilling journey through past experiences
+        and future possibilities. This application is co-founded by three
+        remarkable individuals who lacked prior experience in coding and web
+        development. Each of them hails from diverse backgrounds and one day
+        chose to embark on the path of becoming developers. This website stands
+        as a collaborative project they initiated during their time at Hack Your
+        Future.
+      </p>
+      <div className="people-container">
+        <div className="person">
+          <img src="/assets/images/Nishadi.png" alt="Nishadi" />
+          <h3>Nishadi Priyangika Samarathunge</h3>
+          <p>Co-founder & Software Developer</p>
+          <p>
+            Former ayurvedic doctor in SriLanka, currently living in Denmark and
+            passionate about learning coding. Loves creating immersive
+            experiences for the community.
+          </p>
+        </div>
+        <div className="person">
+          <img src="/assets/images/Aaron.png" alt="Aaron" />
+          <h3>Aaron Belling Moses</h3>
+          <p>Co-founder & Software Developer</p>
+          <p>
+            Currently based in Denmark with 2 beautiful children and lovely
+            wife. Has a keen eye for design and ensures that RetroRealms
+            interface is both stylish and user-friendly.
+          </p>
+        </div>
+        <div className="person">
+          <img src="/assets/images/Komal.png" alt="Komal Ranjan" />
+          <h3>Komal Ranjan</h3>
+          <p>Co-founder & Software Developer</p>
+          <p>
+            Former Public Relations Consultant, from writing PR articles to
+            learning coding and differrent technical coding languages. Currently
+            living in Denamrak. Fell in love with website building.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AboutUs;

packages/client/src/containers/ContactUsPage/ContactUsPage.css

@@ -0,0 +1,20 @@
+.contact-us-container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.contact-us-container h2 {
+  color: #333;
+  font-size: 30px;
+  margin-bottom: 15px;
+}
+
+.contact-us-container p {
+  color: #666;
+  font-size: 20px;
+  line-height: 1.5;
+}

packages/client/src/containers/ContactUsPage/ContactUsPage.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import './ContactUsPage.css';
+
+const ContactUs = () => {
+  return (
+    <div className="contact-us-container">
+      <h2>Contact Us</h2>
+      <p>
+        You can reach us via these emails: komalranjan24@gmail.com ,
+        nish.shanika@gmail.com , pastures77@gmail.com
+      </p>
+    </div>
+  );
+};
+
+export default ContactUs;

packages/client/src/containers/NavbarPage/Navbar.css

@@ -20,3 +20,51 @@
   left: 0;
   margin-left: 5%;
 }
+.nav-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  background-color: #333;
+  color: #fff;
+}
+
+.logo {
+  /* Add your logo styles here */
+}
+
+.nav-header,
+.nav-right-headers {
+  display: flex;
+  align-items: center;
+}
+
+.nav-header a,
+.nav-right-headers a {
+  margin-right: 10px;
+  color: #fff;
+  text-decoration: none;
+}
+.nav-right-headers {
+  font-size: 23px;
+}
+
+.nav-header a:last-child {
+  margin-right: 0;
+}
+
+.nav-header a:hover,
+.nav-right-headers a:hover {
+  color: rgb(67, 5, 67);
+}
+
+@media screen and (max-width: 768px) {
+  .nav-container {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .nav-header {
+    margin-top: 10px;
+  }
+}

packages/client/src/containers/NavbarPage/Navbar.jsx

@@ -1,14 +1,30 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faHome,
+  faEnvelope,
+  faInfoCircle,
+} from '@fortawesome/free-solid-svg-icons';
 import './Navbar.css';
 
 export const Navbar = () => {
   return (
     <nav className="nav-container">
       <div className="logo">{/* Add your logo here */}</div>
       <h1 className="nav-header">
-        <Link to="/">RetroRealm</Link>
+        <Link to="/">
+          <FontAwesomeIcon icon={faHome} /> RetroRealm
+        </Link>
       </h1>
+      <div className="nav-right-headers">
+        <Link to="/contact">
+          <FontAwesomeIcon icon={faEnvelope} /> Contact Us
+        </Link>
+        <Link to="/about">
+          <FontAwesomeIcon icon={faInfoCircle} /> About Us
+        </Link>
+      </div>
     </nav>
   );
 };

yarn.lock

@@ -1600,6 +1600,37 @@
   resolved "https://registry.yarnpkg.com/@fal-works/esbuild-plugin-global-externals/-/esbuild-plugin-global-externals-2.1.2.tgz#c05ed35ad82df8e6ac616c68b92c2282bd083ba4"
   integrity sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==
 
+"@fortawesome/fontawesome-common-types@6.5.2":
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz#eaf2f5699f73cef198454ebc0c414e3688898179"
+  integrity sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==
+
+"@fortawesome/fontawesome-free@^6.5.2":
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.2.tgz#310fe90cb5a8dee9698833171b98e7835404293d"
+  integrity sha512-hRILoInAx8GNT5IMkrtIt9blOdrqHOnPBH+k70aWUAqPZPgopb9G5EQJFpaBx/S8zp2fC+mPW349Bziuk1o28Q==
+
+"@fortawesome/fontawesome-svg-core@^6.5.2":
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz#4b42de71e196039b0d5ccf88559b8044e3296c21"
+  integrity sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.5.2"
+
+"@fortawesome/free-solid-svg-icons@^6.5.2":
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz#9b40b077b27400a5e9fcbf2d15b986c7be69e9ca"
+  integrity sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.5.2"
+
+"@fortawesome/react-fontawesome@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz#d90dd8a9211830b4e3c08e94b63a0ba7291ddcf4"
+  integrity sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==
+  dependencies:
+    prop-types "^15.8.1"
+
 "@humanwhocodes/config-array@^0.11.14":
   version "0.11.14"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"