Skip to content

Stylish Footer and Small Updates #20

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

Open
amanraula wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Stylish Footer and Small Updates #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
927f09c
stylish footer and small updates
amanraula May 11, 2025
b6f434b
Stylish footer and small updates --
amanraula May 11, 2025
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
5 changes: 3 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<!doctype html>

<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/png" href="./src/assets/nitrkl-logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<title>CohortGate</title>
</head>
<body>
<div id="root"></div>
Expand Down
10 changes: 10 additions & 0 deletions 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 package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
14 changes: 13 additions & 1 deletion src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,25 @@ import AboutUs from "./components/AboutUs/AboutUs";
import Form from "./components/Form/Form";
import Contact from "./components/Contact/Contact";
import "./App.css";

import Footer from "./components/Footer/Footer.jsx";
function RootLayout() {
return (
<>
<NavBar />
{/* Padding */}
<div className="flex-grow pt-16"></div>
<Outlet />
<div className="container mx-auto px-4">
<h1 className="text-3xl font-bold text-center my-8">Welcome to Our Website</h1>
<p className="text-center text-gray-600 mb-8">
We are glad to have you here. Explore our services and get in touch with us.
</p>
</div>

<Footer />

</>

);
}

Expand Down
99 changes: 97 additions & 2 deletions src/components/Footer/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,102 @@
import React from "react";
import { FaFacebook, FaTwitter, FaInstagram, FaLinkedin, FaYoutube } from "react-icons/fa";
import { MdEmail, MdPhone, MdLocationOn } from "react-icons/md";

function Footer() {
return <div>Footer</div>;
return (
<footer className="bg-gray-900 text-white pt-12 pb-6 ">
<div className="container mx-auto px-4">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div>
<h3 className="text-xl font-bold mb-4">About Us</h3>
<p className="text-gray-400 mb-4">
We are NITians working upon <br />Open-Source project and contributing.
</p>
<div className="flex space-x-4">
<a href="https://www.facebook.com/nitrkl1/" target="_blank" className="text-gray-400 hover:text-white transition">
<FaFacebook size={20} />
</a>
<a href="https://x.com/nitrourkela" target="_blank" className="text-gray-400 hover:text-white transition">

<FaTwitter size={20} />
</a>
<a href="https://www.instagram.com/nitrourkela1961" target="_blank" className="text-gray-400 hover:text-white transition">
<FaInstagram size={20} />
</a>
<a href="https://www.linkedin.com/school/national-institute-of-technology-rourkela" target="_blank" className="text-gray-400 hover:text-white transition">
<FaLinkedin size={20} />
</a>
<a href="https://www.youtube.com/@nitrourkela1961" target="_blank" className="text-gray-400 hover:text-white transition">
<FaYoutube size={20} />
</a>
</div>
</div>

{/* LINKOOS */}
<div>
<h3 className="text-xl font-bold mb-4">Quick Links</h3>
<ul className="space-y-2">
<li><a href="/" className="text-gray-400 hover:text-white transition">Home</a></li>
<li><a href="/about" className="text-gray-400 hover:text-white transition">About</a></li>

<li><a href="/portfolio" className="text-gray-400 hover:text-white transition">Portfolio</a></li>
<li><a href="/contact" className="text-gray-400 hover:text-white transition">Contact</a></li>
<li><a href="/FAQ" className="text-gray-400 hover:text-white transition">FAQ</a></li>
</ul>
</div>

{/* Contact Info */}
<div>
<h3 className="text-xl font-bold mb-4">Contact Us</h3>
<ul className="space-y-3">
<li className="flex items-start">
<MdLocationOn className="mt-1 mr-2 flex-shrink-0" />
<span className="text-gray-400"><a href="https://www.google.com/maps/place/NIT Rourkela" target="_blank">National Institute of Technology, Rourkela, Odisha, India, 769008</a></span>
</li>
<li className="flex items-center">
<MdPhone className="mr-2" />
<span className="text-gray-400">(0661) 246 - 2020 / 2002</span>
</li>
<li className="flex items-center">
<MdEmail className="mr-2" />
<span className="text-gray-400">[email protected]</span>
</li>
</ul>
</div>
</div>

{/* Newsletter */}
<div className="mt-12 border-t border-gray-800 pt-8">
<div className="flex flex-col md:flex-row justify-between items-center">
<div className="mb-4 md:mb-0">
<h3 className="text-xl font-bold mb-2">Subscribe to Newsletter</h3>
<p className="text-gray-400">Get the latest updates and news</p>
</div>
<div className="flex w-full md:w-auto">
<input
type="email"
placeholder="Your email address"
className="px-4 py-2 rounded-l bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-blue-500 w-full"
/>
<button className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-r transition">
Subscribe
</button>
</div>
</div>
</div>

{/* Copyright */}
<div className="mt-8 pt-6 border-t border-gray-800 text-center text-gray-400">
<p>&copy; {new Date().getFullYear()} NIT Rourkela. All rights reserved.</p>
<div className="mt-2 flex justify-center space-x-4">
<a href="/PrivacyPolicy" className="hover:text-white transition">Privacy Policy</a>
<a href="/termsofservice" className="hover:text-white transition">Terms of Service</a>
<a href="/cookiepolicy" className="hover:text-white transition">Cookie Policy</a>
</div>
</div>
</div>
</footer>
);
}

export default Footer;
export default Footer;
3 changes: 2 additions & 1 deletion src/components/Home/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@ import React from 'react'

function Home() {
return (
<div>Home</div>
// <div>Home</div>
<></>
)
}

Expand Down