From fcedb7c4d54643b6e30f53ea3ed1792f0279872d Mon Sep 17 00:00:00 2001
From: Alok Dangre <148090007+alokdangre@users.noreply.github.com>
Date: Wed, 2 Apr 2025 12:04:55 +0000
Subject: [PATCH] added footer

---
 package-lock.json                | 10 ++++
 package.json                     |  1 +
 src/App.jsx                      |  2 +
 src/components/Footer/Footer.jsx | 99 ++++++++++++++++++++++++++++++--
 4 files changed, 108 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 589a4fa..093a557 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "react": "^19.0.0",
         "react-bootstrap": "^2.10.9",
         "react-dom": "^19.0.0",
+        "react-icons": "^5.5.0",
         "react-router": "^7.3.0",
         "react-router-dom": "^7.3.0",
         "tailwindcss": "^4.0.12"
@@ -3672,6 +3673,15 @@
         "react": "^19.0.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index f6c203a..a0f72ca 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "react": "^19.0.0",
     "react-bootstrap": "^2.10.9",
     "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0",
     "react-router": "^7.3.0",
     "react-router-dom": "^7.3.0",
     "tailwindcss": "^4.0.12"
diff --git a/src/App.jsx b/src/App.jsx
index aa35afa..5ecaca2 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,6 +3,7 @@ import NavBar from "./components/NavBar/NavBar";
 import Home from "./components/Home/Home";
 import AboutUs from "./components/AboutUs/AboutUs";
 import Form from "./components/Form/Form";
+import Footer from "./components/Footer/Footer";
 import Contact from "./components/Contact/Contact";
 import "./App.css";
 
@@ -11,6 +12,7 @@ function RootLayout() {
     <>
       <NavBar />
       <Outlet />
+      <Footer />
     </>
   );
 }
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index 18f584f..e371de3 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -1,7 +1,98 @@
-import React from "react";
+import React from 'react';
+import { FaLinkedin, FaTwitter, FaGithub, FaArrowUp } from 'react-icons/fa';
 
-function Footer() {
-  return <div>Footer</div>;
-}
+const Footer = () => {
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  return (
+    <footer className="bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 fixed bottom-0 left-0 right-0 z-10">
+      <div className="max-w-7xl mx-auto px-4 py-6">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
+          
+          <div className="text-center md:text-left">
+            <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-100">Training Committee</h3>
+            <p className="text-gray-600 dark:text-gray-400">Email: training@committee.com</p>
+            <p className="text-gray-600 dark:text-gray-400">Phone: +123456789</p>
+          </div>
+
+          <div className="flex justify-center">
+            <ul className="flex space-x-4">
+              <li>
+                <a
+                  href="https://www.linkedin.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+                >
+                  <FaLinkedin size={24} />
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://www.twitter.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-gray-600 dark:text-gray-300 hover:text-blue-400 dark:hover:text-blue-300 transition-colors"
+                >
+                  <FaTwitter size={24} />
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://github.com/Training-Committee-NIT-Rourkela"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
+                >
+                  <FaGithub size={24} />
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div className="text-center md:text-right">
+            <ul className="flex justify-center md:justify-end space-x-4">
+              <li>
+                <a
+                  href="/about-us"
+                  className="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
+                >
+                  About Us
+                </a>
+              </li>
+              <li>
+                <a
+                  href="/form"
+                  className="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
+                >
+                  Form
+                </a>
+              </li>
+              <li>
+                <a
+                  href="/contact"
+                  className="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
+                >
+                  Contact
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="mt-4 flex justify-center">
+          <button
+            onClick={scrollToTop}
+            className="bg-blue-500 dark:bg-blue-600 hover:bg-blue-600 dark:hover:bg-blue-700 text-white p-3 rounded-full transition-colors"
+            aria-label="Back to Top"
+          >
+            <FaArrowUp size={20} />
+          </button>
+        </div>
+      </div>
+    </footer>
+  );
+};
 
 export default Footer;