From 8a6b9304b52ac08b0b58afc8a8002c42af72ca51 Mon Sep 17 00:00:00 2001
From: Ferdinand Ogama <ogamagabriel@gmail.com>
Date: Mon, 23 Oct 2023 00:49:14 +0300
Subject: [PATCH 1/2] Adding Footer

---
 package-lock.json                       |  8 ++++----
 src/App.js                              |  2 ++
 src/components/common/Footer.js         | 17 +++++++++++++++++
 src/styles/components/common/Footer.css | 14 ++++++++++++++
 4 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 src/components/common/Footer.js
 create mode 100644 src/styles/components/common/Footer.css

diff --git a/package-lock.json b/package-lock.json
index 391dc8f..3e7d839 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18795,16 +18795,16 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
-      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=14.17"
+        "node": ">=4.2.0"
       }
     },
     "node_modules/unbox-primitive": {
diff --git a/src/App.js b/src/App.js
index eb48f27..9c92d4d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,6 +5,7 @@ import {Navbar} from "./components/common/Navbar";
 import {Games} from "./pages/Games";
 import {Activities} from "./pages/Activities";
 import {activities, games} from "./data/content";
+import Footer from "./components/common/Footer"
 
 function App() {
     return (
@@ -29,6 +30,7 @@ function App() {
                     })
                 }
             </Routes>
+            <Footer />
         </div>
     );
 }
diff --git a/src/components/common/Footer.js b/src/components/common/Footer.js
new file mode 100644
index 0000000..07064e0
--- /dev/null
+++ b/src/components/common/Footer.js
@@ -0,0 +1,17 @@
+import { React } from 'react';
+import "../../styles/components/common/Footer.css";
+
+const Footer = () => {
+    const currentYear = new Date().getFullYear();
+
+    return (
+        <footer>
+            <div className="footer-content">
+                <p>ACM</p>
+                <p>Copyright {currentYear}</p>
+            </div>
+        </footer>
+    );
+};
+
+export default Footer;
diff --git a/src/styles/components/common/Footer.css b/src/styles/components/common/Footer.css
new file mode 100644
index 0000000..1a9f447
--- /dev/null
+++ b/src/styles/components/common/Footer.css
@@ -0,0 +1,14 @@
+footer {
+    background-color: #4e4e4c;
+    color: #fff;
+    padding: 20px 0;
+    text-align: center;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    right: 0;
+}
+
+P {
+    margin-bottom: 10px;
+}
\ No newline at end of file

From e3d6f59fd0df78a5eeb5a3fbb27dcfbd60f9fb9e Mon Sep 17 00:00:00 2001
From: Ferdinand Ogama <ogamagabriel@gmail.com>
Date: Mon, 23 Oct 2023 02:15:47 +0300
Subject: [PATCH 2/2] Adding Social Media Icons

---
 package-lock.json                       | 83 +++++++++++++++++++++++++
 package.json                            |  6 ++
 src/components/common/Footer.js         | 30 +++++++--
 src/styles/components/common/Footer.css | 27 +++++++-
 4 files changed, 137 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3e7d839..e1205cf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,10 +8,16 @@
       "name": "acm-fun",
       "version": "0.1.0",
       "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.4.2",
+        "@fortawesome/free-brands-svg-icons": "^6.4.2",
+        "@fortawesome/free-regular-svg-icons": "^6.4.2",
+        "@fortawesome/free-solid-svg-icons": "^6.4.2",
+        "@fortawesome/react-fontawesome": "^0.2.0",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "axios": "^1.5.1",
+        "font-awesome": "^4.7.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-lottie-player": "^1.5.5",
@@ -2333,6 +2339,75 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
+      "integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.2.tgz",
+      "integrity": "sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-LKOwJX0I7+mR/cvvf6qIiqcERbdnY+24zgpUSouySml+5w8B4BJOx8EhDR/FTKAu06W12fmUIcv6lzPSwYKGGg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-0+sIUWnkgTVVXVAPQmW4vxb9ZTHv0WstOa3rBx9iPxrrrDH6bNLsDYuwXF9b6fGm+iR7DKQvQshUH/FJm3ed9Q==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.13",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@@ -8873,6 +8948,14 @@
         }
       }
     },
+    "node_modules/font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==",
+      "engines": {
+        "node": ">=0.10.3"
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
diff --git a/package.json b/package.json
index b7713c2..f8983cf 100644
--- a/package.json
+++ b/package.json
@@ -3,10 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/free-regular-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.5.1",
+    "font-awesome": "^4.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-lottie-player": "^1.5.5",
diff --git a/src/components/common/Footer.js b/src/components/common/Footer.js
index 07064e0..6a334f1 100644
--- a/src/components/common/Footer.js
+++ b/src/components/common/Footer.js
@@ -1,17 +1,35 @@
-import { React } from 'react';
+import React from 'react';
 import "../../styles/components/common/Footer.css";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faFacebook, faTwitter } from '@fortawesome/free-brands-svg-icons';
+import { faGithub, faInstagram } from '@fortawesome/free-brands-svg-icons';
+
 
-const Footer = () => {
-    const currentYear = new Date().getFullYear();
 
+function Footer() {
+    const currentYear = new Date().getFullYear();
     return (
         <footer>
             <div className="footer-content">
-                <p>ACM</p>
-                <p>Copyright {currentYear}</p>
+                <p>&copy; {currentYear} ACM FUN </p>
+                <div className="social-icons">
+                    <a href="#" target="_blank" rel="noopener noreferrer">
+                        <FontAwesomeIcon icon={faFacebook} className="icon" />
+                    </a>
+                    <a href="#" target="_blank" rel="noopener noreferrer">
+                        <FontAwesomeIcon icon={faGithub} className="icon" />
+                    </a>
+                    <a href="#" target="_blank" rel="noopener noreferrer">
+                        <FontAwesomeIcon icon={faTwitter} className="icon" />
+                    </a>
+                    <a href="#" target="_blank" rel="noopener noreferrer">
+                        <FontAwesomeIcon icon={faInstagram} className="icon" />
+                    </a>
+                </div>
             </div>
         </footer>
     );
-};
+}
 
 export default Footer;
+
diff --git a/src/styles/components/common/Footer.css b/src/styles/components/common/Footer.css
index 1a9f447..97a6606 100644
--- a/src/styles/components/common/Footer.css
+++ b/src/styles/components/common/Footer.css
@@ -2,13 +2,34 @@ footer {
     background-color: #4e4e4c;
     color: #fff;
     padding: 20px 0;
-    text-align: center;
     position: absolute;
     left: 0;
     bottom: 0;
     right: 0;
 }
 
-P {
-    margin-bottom: 10px;
+.footer-content {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 40px;
+
+    
+}
+
+.social-icons {
+    display: flex;
+    align-items: center;
+}
+
+
+.icon {
+    color: white;
+    margin-left: 15px;
+    font-size: 25px;
+} 
+
+p {
+    font-size: 15px;
+    
+
 }
\ No newline at end of file