Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Created a responsive footer for the webpage. #94

Merged
merged 5 commits into from
Oct 15, 2024
Merged

Created a responsive footer for the webpage. #94

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
964250c
Changed ui in mobile devices such that menu button wont collide with…
varma-101 Oct 14, 2024
d72caee
Solved hamburger menu and club login collision and reduced size of na…
varma-101 Oct 14, 2024
ad2a223
Added responsive footer to the webpage.
varma-101 Oct 14, 2024
0599c70
Created a responsive footer for the webpage.
varma-101 Oct 14, 2024
d8d061d
Created a responsive footer for the webpage.
varma-101 Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
134 changes: 132 additions & 2 deletions frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
45 changes: 22 additions & 23 deletions frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useState } from "react";
import { Route, Routes, BrowserRouter as Router, Outlet } from "react-router-dom";
import { Route, Routes, BrowserRouter as Router} from "react-router-dom";
import Hero from "./appComponents/Herosection";
import Clubs from "./appComponents/Clubs";
import Particles from "@/components/magicui/particles";
Expand All @@ -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";


Expand All @@ -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
Expand All @@ -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;
64 changes: 64 additions & 0 deletions frontend/src/appComponents/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
const Footer = () => {
return (
<footer className="bg-gray-800 text-white py-6">
<div className="container mx-auto text-center">
<h2 className="text-3xl font-bold mb-4">Stay Connected</h2>
<p className="mb-4 text-lg">
Subscribe to our newsletter to get the latest updates!
</p>
<form className="flex flex-col md:flex-row justify-center mb-4">
<input
type="email"
placeholder="Your email address"
className="p-2 mb-2 md:mb-0 md:mr-2 rounded-md focus:outline-none border border-gray-300"
/>
<button className="bg-blue-500 text-white p-2 rounded-md hover:bg-blue-600 transition-colors duration-300">
Subscribe
</button>
</form>
<ul className="flex flex-wrap justify-center space-x-4 mb-4">
<li>
<a href="#" className="hover:text-blue-400 transition duration-300">
Terms of Service
</a>
</li>
<li>
<a href="#" className="hover:text-blue-400 transition duration-300">
Privacy Policy
</a>
</li>
<li>
<a href="#" className="hover:text-blue-400 transition duration-300">
Contact Us
</a>
</li>
</ul>
{/* Social Media Icons */}
<div className="flex justify-center space-x-6 mb-4">
<a href="#" aria-label="GitHub" className="hover:text-blue-400 transition duration-300">
<i className="fab fa-github fa-lg"></i>
</a>
<a href="#" aria-label="Facebook" className="hover:text-blue-400 transition duration-300">
<i className="fab fa-facebook-f fa-lg"></i>
</a>
<a href="#" aria-label="Twitter" className="hover:text-blue-400 transition duration-300">
<i className="fab fa-twitter fa-lg"></i>
</a>
<a href="#" aria-label="Instagram" className="hover:text-blue-400 transition duration-300">
<i className="fab fa-instagram fa-lg"></i>
</a>
<a href="#" aria-label="LinkedIn" className="hover:text-blue-400 transition duration-300">
<i className="fab fa-linkedin-in fa-lg"></i>
</a>
</div>
<p className="mt-4 italic text-gray-400 text-lg">
Discover the vibrant community of clubs at our college, where students come together to explore their passions, learn new skills, and make lasting connections.
</p>
<p className="mt-2">&copy; 2024 dypcetclubs. All rights reserved.</p>
</div>
</footer>
);
};

export default Footer;

Loading
Loading