From 040fce9ea3bb79196a08445d45939565997b4203 Mon Sep 17 00:00:00 2001
From: Rajdip Sinh <rajdips834@gmail.com>
Date: Wed, 25 Oct 2023 13:15:01 +0530
Subject: [PATCH] Footer Completed Functionality left

---
 package-lock.json                |  9 +++++
 package.json                     |  1 +
 src/App.jsx                      | 10 ++++--
 src/components/footer/Footer.jsx | 56 ++++++++++++++++++++++++++++++++
 4 files changed, 73 insertions(+), 3 deletions(-)
 create mode 100644 src/components/footer/Footer.jsx

diff --git a/package-lock.json b/package-lock.json
index 4b1e4af..798189a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
       "dependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^4.11.0",
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
@@ -1921,6 +1922,14 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz",
+      "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 2b9e2d4..1767f57 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.11.0",
     "web-vitals": "^2.1.4"
   },
   "repository": {
diff --git a/src/App.jsx b/src/App.jsx
index 7e81f45..0e573ad 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,7 +1,11 @@
+import Footer from "./components/footer/Footer";
+
 function App() {
   return (
-    <div className='bg-red-600'>GDSC</div>
-  )
+    <div>
+      <Footer />
+    </div>
+  );
 }
 
-export default App
\ No newline at end of file
+export default App;
diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx
new file mode 100644
index 0000000..43b4f46
--- /dev/null
+++ b/src/components/footer/Footer.jsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { FaLinkedin, FaInstagram, FaTwitter } from "react-icons/fa";
+
+export default function Footer() {
+  return (
+    <div className="relative text-slate-600 bg-slate-950">
+      <div className="flex flex-col md:flex-row justify-between ml-4 md:ml-[10rem] mr-4 md:mr-[10rem]">
+        <div className="mb-4 text-center md:text-left md:mb-0">
+          <p className="text-[#6D6D6D] text-base not-italic font-extrabold leading-[29.2px] uppercase">
+            Dive into the new world of in-house music
+          </p>
+          <p className="w-full md:w-[20vw] pt-4 text-[#6D6D6D] text-lg not-italic font-medium leading-[normal]">
+            Lorem ipsum dolor sit amet consectetur. At porttitor ut felis nisl
+            ultrices sed sit. Cras nibh quis et diam justo in. Sollicitudin enim
+            tincidunt eros mauris senectus neque.
+          </p>
+        </div>
+        <div className="mb-4 text-center md:text-left md:mb-0">
+          <p className="text-[#6D6D6D] text-base not-italic font-extrabold leading-[29.2px] uppercase">
+            VISIT
+          </p>
+          <ul className="w-full md:w-[20vw] text-[#6D6D6D] text-[32px] not-italic font-medium leading-[30.214px] tracking-[-1px]">
+            <li>
+              <a href="#">About</a>
+            </li>
+            <li>
+              <a href="#">Events</a>
+            </li>
+            <li>
+              <a href="#">Get in touch</a>
+            </li>
+          </ul>
+        </div>
+        <div className="text-center md:text-left">
+          <p className="text-[#6D6D6D] text-base not-italic font-extrabold leading-[29.2px] uppercase">
+            SOCIALS
+          </p>
+          <ul className="flex justify-center gap-3 md:justify-start">
+            <li>
+              <FaInstagram size="2em" />
+            </li>
+            <li>
+              <FaTwitter size="2em" />
+            </li>
+            <li>
+              <FaLinkedin size="2em" />
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div className="text-center md:text-left text-[15vw] text-[#6D6D6D] relative md:pl-[7rem] font-medium font-family: Poppins">
+        GDSC AEC
+      </div>
+    </div>
+  );
+}