Merge pull request #37 from HackYourFuture-CPH/AdditionalDesign

Additional design
HackYourFuture-CPH · May 1, 2024 · 04d4f75 · 04d4f75
2 parents 9885e4f + 1a9b077
commit 04d4f75
Show file tree

Hide file tree

Showing 10 changed files with 176 additions and 21 deletions.
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@testing-library/jest-dom": "^5.16.4",

diff --git a/packages/client/src/App.js b/packages/client/src/App.js
@@ -12,6 +12,7 @@ import JoinRetroPage from './containers/JoinRetroPage/JoinRetroPage';
 import { RetroCodeProvider } from './containers/Contexts/RetroCodeProvider';
 import ContactUs from './containers/ContactUsPage/ContactUsPage';
 import AboutUs from './containers/AboutUsPage/AboutUsPage';
+import Footer from './containers/Footer/Footer';
 
 function App() {
   return (
@@ -32,6 +33,7 @@ function App() {
             <Route path="/contact" element={<ContactUs />} />
             <Route path="/about" element={<AboutUs />} />
           </Routes>
+          <Footer />
         </Router>
       </RetroCodeProvider>
     </div>

diff --git a/packages/client/src/containers/AboutUsPage/AboutUsPage.css b/packages/client/src/containers/AboutUsPage/AboutUsPage.css
@@ -29,3 +29,19 @@
 .about-us {
   font-size: 25px;
 }
+
+.social-icons {
+  margin-top: 10px;
+}
+
+.social-icons a {
+  margin-right: 10px; /* Add margin between icons */
+}
+
+.social-icons a:last-child {
+  margin-right: 0; /* Remove margin from the last icon */
+}
+
+.social-icons .fa-icon {
+  color: black; /* Set the color of the icons to black */
+}
diff --git a/packages/client/src/containers/AboutUsPage/AboutUsPage.js b/packages/client/src/containers/AboutUsPage/AboutUsPage.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import './AboutUsPage.css';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGithub, faLinkedin } from '@fortawesome/free-brands-svg-icons';
 
 const AboutUs = () => {
   return (
@@ -25,6 +27,28 @@ const AboutUs = () => {
             passionate about learning coding. Loves creating immersive
             experiences for the community.
           </p>
+          <div className="social-icons">
+            <a
+              href="https://github.com/nishadipri"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span className="sr-only">
+                GitHub Profile of Nishadi Priyangika Samarathunge
+              </span>
+              <FontAwesomeIcon icon={faGithub} />
+            </a>
+            <a
+              href="https://www.linkedin.com/in/nishadi-samarathunge-125231b0/?originalSubdomain=lk"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span className="sr-only">
+                LinkedIn Profile of Nishadi Priyangika Samarathunge
+              </span>
+              <FontAwesomeIcon icon={faLinkedin} />
+            </a>
+          </div>
         </div>
         <div className="person">
           <img src="/assets/images/Aaron.png" alt="Aaron" />
@@ -35,6 +59,28 @@ const AboutUs = () => {
             wife. Has a keen eye for design and ensures that RetroRealms
             interface is both stylish and user-friendly.
           </p>
+          <div className="social-icons">
+            <a
+              href="https://github.com/SpartanDeBoss"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span className="sr-only">
+                GitHub Profile of Nishadi Priyangika Samarathunge
+              </span>
+              <FontAwesomeIcon icon={faGithub} />
+            </a>
+            <a
+              href="https://www.linkedin.com/in/aaron-ekow-moses/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span className="sr-only">
+                LinkedIn Profile of Nishadi Priyangika Samarathunge
+              </span>
+              <FontAwesomeIcon icon={faLinkedin} />
+            </a>
+          </div>
         </div>
         <div className="person">
           <img src="/assets/images/Komal.png" alt="Komal Ranjan" />
@@ -45,6 +91,28 @@ const AboutUs = () => {
             learning coding and differrent technical coding languages. Currently
             living in Denamrak. Fell in love with website building.
           </p>
+          <div className="social-icons">
+            <a
+              href="https://github.com/komalranjan9"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span className="sr-only">
+                GitHub Profile of Nishadi Priyangika Samarathunge
+              </span>
+              <FontAwesomeIcon icon={faGithub} />
+            </a>
+            <a
+              href="https://www.linkedin.com/in/komal-ranjan-dk/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <span className="sr-only">
+                LinkedIn Profile of Nishadi Priyangika Samarathunge
+              </span>
+              <FontAwesomeIcon icon={faLinkedin} />
+            </a>
+          </div>
         </div>
       </div>
     </div>

diff --git a/packages/client/src/containers/ContactUsPage/ContactUsPage.css b/packages/client/src/containers/ContactUsPage/ContactUsPage.css
@@ -2,7 +2,7 @@
   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);
 }
@@ -14,7 +14,7 @@
 }
 
 .contact-us-container p {
-  color: #666;
+  color: #444141;
   font-size: 20px;
   line-height: 1.5;
 }
diff --git a/packages/client/src/containers/ContactUsPage/ContactUsPage.js b/packages/client/src/containers/ContactUsPage/ContactUsPage.js
@@ -8,6 +8,8 @@ const ContactUs = () => {
       <p>
         You can reach us via these emails: komalranjan24@gmail.com ,
         nish.shanika@gmail.com , pastures77@gmail.com
+        <hr />
+        Address: Hack Your Future, Talent Garden
       </p>
     </div>
   );

diff --git a/packages/client/src/containers/Footer/Footer.css b/packages/client/src/containers/Footer/Footer.css
@@ -0,0 +1,41 @@
+.footer {
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* Center items horizontally */
+  padding: 5px;
+  background: rgb(173, 176, 192);
+  color: #fff;
+}
+
+.footer-item {
+  margin-bottom: 5px; /* Add margin between items */
+}
+
+.footer-item h3 {
+  font-size: 16px;
+  margin-bottom: 5px;
+  color: #fff;
+}
+
+.social-links {
+  display: flex;
+  margin-bottom: 5px; /* Add margin between social links and copyright */
+}
+
+.social-links a {
+  color: #fff;
+  text-decoration: none;
+  margin-right: 5px;
+}
+
+.social-links a:hover {
+  text-decoration: underline;
+}
+
+.footer-bottom {
+  font-size: 12px;
+  color: #fff;
+}
diff --git a/packages/client/src/containers/Footer/Footer.js b/packages/client/src/containers/Footer/Footer.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGithub, faLinkedin } from '@fortawesome/free-brands-svg-icons';
+import './Footer.css'; // Import your CSS file for styling
+
+function Footer() {
+  return (
+    <footer className="footer">
+      <div className="footer-item">
+        <h3>Follow Us</h3>
+        <div className="social-links">
+          <a
+            href="https://github.com/yourusername"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span className="sr-only">GitHub</span>
+            <FontAwesomeIcon icon={faGithub} />
+          </a>
+          <a
+            href="https://linkedin.com/in/yourusername"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span className="sr-only">LinkedIn</span>
+            <FontAwesomeIcon icon={faLinkedin} />
+          </a>
+        </div>
+      </div>
+      <div className="footer-bottom">
+        <p>&copy; 2024 RetroRealm. All rights reserved.</p>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;
diff --git a/packages/client/src/containers/IndexPage/IndexPage.css b/packages/client/src/containers/IndexPage/IndexPage.css
@@ -82,22 +82,3 @@
   margin-left: 10px;
   width: 30%;
 }
-
-.footer {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  text-align: center;
-  margin-top: 2rem;
-  font-size: 0.875rem;
-  color: #6c757d;
-}
-
-.buttonDisabled {
-  background-color: rgb(78, 72, 72);
-  color: rgb(255, 255, 255);
-}
-
-primaryButton {
-  background-color: blue;
-}
diff --git a/yarn.lock b/yarn.lock
@@ -1617,6 +1617,13 @@
   dependencies:
     "@fortawesome/fontawesome-common-types" "6.5.2"
 
+"@fortawesome/free-brands-svg-icons@^6.5.2":
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.2.tgz#bfca0cebd2c4713dc93244e1fa8b384f1f023587"
+  integrity sha512-zi5FNYdmKLnEc0jc0uuHH17kz/hfYTg4Uei0wMGzcoCL/4d3WM3u1VMc0iGGa31HuhV5i7ZK8ZlTCQrHqRHSGQ==
+  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"