Added responsive footer to the webpage.

Yash-Ainapure · Oct 14, 2024 · ad2a223 · ad2a223
1 parent d72caee
commit ad2a223
Show file tree

Hide file tree

Showing 6 changed files with 262 additions and 24 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -5,6 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="fav.png">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <title>dypcetclubs.live</title>
   </head>
   <body>

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -32,6 +32,7 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.27.0",
     "react-spinners": "^0.14.1",
+    "styled-components": "^6.1.13",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7"
   },

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -11,9 +11,9 @@ import ClubLogin from "./appComponents/ClubLogin";
 import { ClubAdmin } from "./appComponents/ClubAdmin";
 import "./App.css";
 import QuizPage from "./appComponents/QuizPage";
+import Footer from "./appComponents/Footer"; // Import the Footer component
 
 import { Navbar } from "./appComponents/Navbar";
-
 import About from "./appComponents/About";
 
 
@@ -29,13 +29,11 @@ function App() {
 
   return (
     <Router>
-
-      <Routes>
-        <Route
-          path="/"
-          element={
-            <div className="bg-black font-popins">
-              <Outlet />
+      <div className="bg-black font-popins">
+        <Routes>
+          <Route
+            path="/"
+            element={
               <div className="relative overflow-hidden">
                 <Meteors number={numberOfMeteors} />
                 <Particles
@@ -48,21 +46,22 @@ function App() {
                 <Navbar setShowLoginPage={setShowLoginPage} />
                 <Hero />
               </div>
-              <Clubs />
-              <Events />
-              {showPopup && <Popup onClose={handleClose} />}
-              {showLoginPage && <ClubLogin onClose={setShowLoginPage} />}
-            </div>
-          }
-        >
-          <Route path="registerClub" element={<ClubRegistration />} />
-        </Route>
-        <Route path="/clubAdmin/*" element={<ClubAdmin />} />
-        <Route path="/quiz/:id" element={<QuizPage />} />
-        <Route path="/about" element={<About />} />
-      </Routes>
+            }
+          >
+            <Route path="registerClub" element={<ClubRegistration />} />
+          </Route>
+          <Route path="/clubAdmin/*" element={<ClubAdmin />} />
+          <Route path="/quiz/:id" element={<QuizPage />} />
+          <Route path="/about" element={<About />} />
+        </Routes>
+        <Clubs />
+        <Events />
+        {showPopup && <Popup onClose={handleClose} />}
+        {showLoginPage && <ClubLogin onClose={setShowLoginPage} />}
+      </div>
+      <Footer /> {/* Render the Footer component on all routes */}
     </Router>
   );
 }
 
-export default App;
+export default App;
diff --git a/frontend/src/appComponents/Footer.css b/frontend/src/appComponents/Footer.css
@@ -0,0 +1,48 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.footer-container {
+  @apply max-w-6xl mx-auto px-4 lg:px-8;
+}
+
+.footer-section {
+  @apply flex flex-wrap justify-between mb-8;
+}
+
+.footer-section div {
+  @apply w-full lg:w-1/2 xl:w-1/3 p-4;
+}
+
+.footer-section h4 {
+  @apply text-xl font-bold mb-4;
+}
+
+.footer-section ul {
+  @apply list-none mb-0;
+}
+
+.footer-section li {
+  @apply mb-2;
+}
+
+.footer-section a {
+  @apply text-white hover:text-gray-400;
+}
+
+.copyright {
+  @apply text-sm text-center;
+}
+
+/* Custom styles */
+.bg-footer {
+  background-color: #2f2f2f;
+}
+
+.text-footer {
+  color: #ffffff;
+}
+
+.hover-footer:hover {
+  color: #ccc;
+}
diff --git a/frontend/src/appComponents/Footer.tsx b/frontend/src/appComponents/Footer.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+
+const Footer = () => {
+  return (
+    <footer className="bg-gray-800 text-white py-6">
+      <div className="container mx-auto text-center">
+        <h2 className="text-2xl font-bold mb-4">Stay Connected</h2>
+        <p className="mb-4">
+          Subscribe to our newsletter to get the latest updates!
+        </p>
+        <form className="mb-4">
+          <input
+            type="email"
+            placeholder="Your email address"
+            className="p-2 rounded-l-md focus:outline-none"
+          />
+          <button className="bg-blue-500 text-white p-2 rounded-r-md hover:bg-blue-600">
+            Subscribe
+          </button>
+        </form>
+        <ul className="flex justify-center space-x-4 mb-4">
+          <li>
+            <a href="#" className="hover:text-blue-400">
+              Terms of Service
+            </a>
+          </li>
+          <li>
+            <a href="#" className="hover:text-blue-400">
+              Privacy Policy
+            </a>
+          </li>
+          <li>
+            <a href="#" className="hover:text-blue-400">
+              Contact Us
+            </a>
+          </li>
+        </ul>
+        {/* Social Media Icons */}
+        <div className="flex justify-center space-x-6 mb-4">
+          <a href="#" aria-label="Facebook" className="hover:text-blue-400">
+            <i className="fab fa-facebook-f"></i>
+          </a>
+          <a href="#" aria-label="Twitter" className="hover:text-blue-400">
+            <i className="fab fa-twitter"></i>
+          </a>
+          <a href="#" aria-label="Instagram" className="hover:text-blue-400">
+            <i className="fab fa-instagram"></i>
+          </a>
+          <a href="#" aria-label="LinkedIn" className="hover:text-blue-400">
+            <i className="fab fa-linkedin-in"></i>
+          </a>
+        </div>
+        <p className="mt-4">&copy; 2024 dypcetclubs. All rights reserved.</p>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;