Skip to content

foter added #25

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
Adithyakp86 wants to merge 1 commit into
base: main
Choose a base branch
from
+208 −2
Open

foter added #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
204 changes: 204 additions & 0 deletions src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
import React from 'react';
import { Heart, Mail, Phone, MapPin, Github, Linkedin, Twitter, Facebook, ExternalLink } from 'lucide-react';

const Footer: React.FC = () => {
const currentYear = new Date().getFullYear();

return (
<footer className="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{/* Company Info */}
<div className="space-y-4">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
Student Portal
</h3>
<p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
Empowering students with a comprehensive platform for academic management,
collaboration, and success tracking.
</p>
<div className="flex space-x-4">
<a
href="#"
className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 p-2 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900/20 border border-gray-200 dark:border-gray-600"
aria-label="GitHub"
>
<Github className="h-6 w-6" />
</a>
<a
href="#"
className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 p-2 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900/20 border border-gray-200 dark:border-gray-600"
aria-label="LinkedIn"
>
<Linkedin className="h-6 w-6" />
</a>
<a
href="#"
className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 p-2 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900/20 border border-gray-200 dark:border-gray-600"
aria-label="Twitter"
>
<Twitter className="h-6 w-6" />
</a>
<a
href="#"
className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 p-2 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900/20 border border-gray-200 dark:border-gray-600"
aria-label="Facebook"
>
<Facebook className="h-6 w-6" />
</a>
</div>
</div>

{/* Quick Links */}
<div className="space-y-4">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
Quick Links
</h3>
<ul className="space-y-2">
<li>
<a
href="#"
className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 text-sm transition-colors duration-200"
>
Dashboard
</a>
</li>
<li>
<a
href="#"
className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 text-sm transition-colors duration-200"
>
User Directory
</a>
</li>
<li>
<a
href="#"
className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 text-sm transition-colors duration-200"
>
Academic Calendar
</a>
</li>
<li>
<a
href="#"
className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 text-sm transition-colors duration-200"
>
Resources
</a>
</li>
</ul>
</div>

{/* Support */}
<div className="space-y-4">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
Support
</h3>
<ul className="space-y-2">
<li>
<a
href="#"
className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 text-sm transition-colors duration-200"
>
Help Center
</a>
</li>
<li>
<a
href="#"
className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 text-sm transition-colors duration-200"
>
Contact Support
</a>
</li>
<li>
<a
href="#"
className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 text-sm transition-colors duration-200"
>
FAQ
</a>
</li>
<li>
<a
href="#"
className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 text-sm transition-colors duration-200"
>
Documentation
</a>
</li>
</ul>
</div>

{/* Contact Info */}
<div className="space-y-4">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
Contact Us
</h3>
<div className="space-y-3">
<div className="flex items-center space-x-3">
<Mail className="h-4 w-4 text-gray-400" />
<span className="text-gray-600 dark:text-gray-300 text-sm">
[email protected]
</span>
</div>
<div className="flex items-center space-x-3">
<Phone className="h-4 w-4 text-gray-400" />
<span className="text-gray-600 dark:text-gray-300 text-sm">
+1 (555) 123-4567
</span>
</div>
<div className="flex items-center space-x-3">
<MapPin className="h-4 w-4 text-gray-400" />
<span className="text-gray-600 dark:text-gray-300 text-sm">
123 Education St, Learning City, LC 12345
</span>
</div>
</div>
</div>
</div>

{/* Bottom Section */}
<div className="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
<div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
<div className="flex items-center space-x-2 text-gray-600 dark:text-gray-300 text-sm">
<span>© {currentYear} Student Portal. All rights reserved.</span>
</div>
<div className="flex items-center space-x-6 text-sm">
<a
href="#"
className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200"
>
Privacy Policy
</a>
<a
href="#"
className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200"
>
Terms of Service
</a>
<a
href="#"
className="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200"
>
Cookie Policy
</a>
</div>
</div>

{/* Made with love */}
<div className="mt-4 text-center">
<p className="text-gray-500 dark:text-gray-400 text-sm flex items-center justify-center space-x-1">
<span>Made with</span>
<Heart className="h-4 w-4 text-red-500 fill-current" />
<span>for students worldwide</span>
</p>
</div>
</div>
</div>
</footer>
);
};

export default Footer;
6 changes: 4 additions & 2 deletions src/components/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import React from 'react';
import { Outlet } from 'react-router-dom';
import Navbar from './Navbar';
import Footer from './Footer';

const Layout: React.FC = () => {
return (
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors duration-300 flex flex-col">
<Navbar />
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<main className="flex-1 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<Outlet />
</main>
<Footer />
</div>
);
};
Expand Down