From 9e07386d705c294b84e7395852cf37d06c35121b Mon Sep 17 00:00:00 2001
From: Diyorbek Ibragimov <dierbekibragimov@gmail.com>
Date: Mon, 25 Nov 2024 14:37:44 +0300
Subject: [PATCH] Improved the footer

---
 src/pages/home.tsx                        | 60 ++++++++++++++++++++++-
 tailwind.config.js => tailwind.config.cjs |  0
 2 files changed, 58 insertions(+), 2 deletions(-)
 rename tailwind.config.js => tailwind.config.cjs (100%)

diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index d2d4f1e..be11897 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -1,10 +1,66 @@
 import "../styles/Home.css";
 import { motion } from "framer-motion";
 import UpcomingEvents from "../components/UpcomingEvents";
+import {
+  FaTwitterSquare,
+  FaInstagramSquare,
+  FaFacebookSquare,
+  FaLinkedin,
+  FaYoutubeSquare
+} from "react-icons/fa";
 
 const Footer: React.FC = () => (
-  <footer className="bg-gray-700 text-white text-center py-4">
-    &copy; 2024 Carnegie Mellon University In Qatar. All rights reserved.
+  <footer className="bg-gray-700 text-white py-8">
+    <div className="container mx-auto px-8">
+      <div className="footer-sections grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div className="mb-4">
+            <h2 className="text-xl font-bold mb-2">Carnegie Mellon University in Qatar</h2>
+            <p>Computer Science Department</p>
+            <p>Education City</p>
+            <p>PO Box 24866</p>
+            <p>Doha, Qatar</p>
+        </div>
+        <nav aria-label="Info Menu" className="mb-4 pt-4">
+          <ul className="menu space-y-2">
+            <li className="menu-item">
+              <a href="https://www.qatar.cmu.edu/home-3/contact/" className="hover:underline">Contact</a>
+            </li>
+            <li className="menu-item">
+              <a href="https://www.qatar.cmu.edu/about-us/media-resources/" className="hover:underline">Press Requests</a>
+            </li>
+            <li className="menu-item">
+              <a href="https://cmu.edu/computing/dao/index.html" className="hover:underline">Accessibility</a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+      <div className="footer-bottom flex justify-between items-center mt-8">
+        <div className="footer-social-icons flex space-x-4">
+          <a aria-label="twitter" target="_blank" href="https://x.com/carnegiemellonq" className="text-2xl text-white hover:text-gray-400">
+            <FaTwitterSquare />
+          </a>
+          <a aria-label="facebook" target="_blank" href="https://www.facebook.com/CarnegieMellonQ/" className="text-2xl text-white hover:text-gray-400">
+            <FaFacebookSquare />
+          </a>
+          <a aria-label="youtube" target="_blank" href="https://www.youtube.com/user/CarnegieMellonQatar" className="text-2xl text-white hover:text-gray-400">
+            <FaYoutubeSquare />
+          </a>
+          <a aria-label="instagram" target="_blank" href="https://www.instagram.com/scsatcmuq/" className="text-2xl text-white hover:text-gray-400">
+            <FaInstagramSquare />
+          </a>
+          <a aria-label="linkedin" target="_blank" href="https://www.linkedin.com/school/carnegie-mellon-university-in-qatar/" className="text-2xl text-white hover:text-gray-400">
+            <FaLinkedin />
+          </a>
+        </div>
+        <a href="https://www.cmu.edu" style={{ borderBottom: "none" }}>
+          <img
+            style={{ maxWidth: "250px" }}
+            src="/public/images/cs-header.png"
+            alt="Carnegie Mellon University"
+          />
+        </a>
+      </div>
+    </div>
   </footer>
 );
 
diff --git a/tailwind.config.js b/tailwind.config.cjs
similarity index 100%
rename from tailwind.config.js
rename to tailwind.config.cjs