Merge pull request GDSC-Jadavpur-University#11 from YashCyanide/main

footer improved
ASHMITA489 · Oct 1, 2023 · 93d887f · 93d887f
2 parents 2f1b734 + fcd0e39
commit 93d887f
Showing 1 changed file with 75 additions and 19 deletions.
diff --git a/components/Footer.jsx b/components/Footer.jsx
@@ -2,29 +2,85 @@ import React from "react";
 
 function Footer() {
   return (
-    <footer className="bg-white m-4">
-        <hr className=" border-grey-600 sm:mx-auto lg:my-3" />
 
-        <div className="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between">
-            <div className="sm:flex sm:items-center sm:justify-between">
-                <a href="/#" className="flex items-center mb-4 sm:mb-0">
-                    <img src="./gdsc.png" className="h-8 mr-3" alt="GDSC Logo" />
-                </a>
-                <ul className="flex flex-wrap items-center mb-6 text-sm font-medium text-gray-500 sm:mb-0 dark:text-gray-400">
-                    <li>
-                        <a href="#" className="mr-4 hover:underline md:mr-6 ">About</a>
-                    </li>
-                    <li>
-                        <a href="#" className="mr-4 hover:underline md:mr-6">Contact Us</a>
-                    </li>
-
-                </ul>
+    <footer className="bg-gray-100 py-8 sm:py-12">
+      <div className="container mx-auto px-4">
+        <div className="sm:flex sm:flex-wrap sm:-mx-4 md:py-4">
+          <div className="px-4 sm:w-1/2 md:w-1/4 xl:w-1/6">
+            <h5 className="text-xl font-bold mb-6">Features</h5>
+            <ul className="list-none footer-links">
+              <li className="mb-2">
+                <a href="#" className="hover:text-purple-800">Cool features</a>
+              </li>
+              <li className="mb-2">
+                <a href="#" className="hover:text-purple-800">Random feature</a>
+              </li>
+              <li className="mb-2">
+                <a href="#" className="hover:text-purple-800">Team feature</a>
+              </li>
+              <li className="mb-2">
+                <a href="#" className="hover:text-purple-800">Developer stuff</a>
+              </li>
+              <li className="mb-2">
+                <a href="#" className="hover:text-purple-800">Another feature</a>
+              </li>
+              <li className="mb-2">
+                <a href="#" className="hover:text-purple-800">Last feature</a>
+              </li>
+            </ul>
+          </div>
+          <div className="px-4 sm:w-1/2 md:w-1/4 xl:w-1/6 mt-8 sm:mt-0">
+            <h5 className="text-xl font-bold mb-6">Resources</h5>
+            <ul className="list-none footer-links">
+              <li className="mb-2">
+                <a href="#" className="hover:text-purple-800">Resource</a>
+              </li>
+              <li className="mb-2">
+                <a href="#" className="hover:text-purple-800">Resource name</a>
+              </li>
+              <li className="mb-2">
+                <a href="#" className="hover:text-purple-800">Another resource</a>
+              </li>
+              <li className="mb-2">
+                <a href="#" className="hover:text-purple-800">Final resource</a>
+              </li>
+            </ul>
+          </div>
+          <div className="px-4 sm:w-1/2 md:w-1/4 xl:w-1/6 mt-8 md:mt-0">
+            <h5 className="text-xl font-bold mb-6">About</h5>
+            <ul className="list-none footer-links">
+              <li className="mb-2">
+                <a href="#" className="hover:text-purple-800">Our team</a>
+              </li>
+              <li className="mb-2">
+                <a href="#" className="hover:text-purple-800">Locations</a>
+              </li>
+              <li className="mb-2">
+                <a href="#" className="hover:text-purple-800">Privacy policy</a>
+              </li>
+              <li className="mb-2">
+                <a href="#" className="hover:text-purple-800">Terms of service</a>
+              </li>
+            </ul>
+          </div>
+          <div className="px-4 mt-4 sm:w-1/3 xl:w-1/6 sm:mx-auto xl:mt-0 xl:ml-auto">
+            <h5 className="text-xl font-bold mb-6 text-center xl:text-left">Stay connected</h5>
+            <div className="flex justify-center xl:justify-start">
+              <a href="#" className="w-8 h-8 border border-2 border-gray-400 rounded-full text-center py-1 text-gray-600 hover:text-white hover:bg-blue-600 hover:border-blue-600">
+                <i className="fab fa-facebook"></i>
+              </a>
+              <a href="#" className="w-8 h-8 border border-2 border-gray-400 rounded-full text-center py-1 ml-2 text-gray-600 hover:text-white hover:bg-blue-400 hover:border-blue-400">
+                <i className="fab fa-twitter"></i>
+              </a>
+              <a href="#" className="w-8 h-8 border border-2 border-gray-400 rounded-full text-center py-1 ml-2 text-gray-600 hover:text-white hover:bg-red-600 hover:border-red-600">
+                <i className="fab fa-google-plus-g"></i>
+              </a>
             </div>
-            <span className="block text-sm text-gray-500 sm:text-center dark:text-gray-400">© 2023 <a href="#" className="hover:underline">GDSC JU™</a>. All Rights Reserved.</span>
+          </div>
         </div>
+      </div>
     </footer>
-
-
+
   );
 }