Snigdha-OS/Snigdha-OS.github.io
2
0
Fork 0
mirror of https://github.com/Snigdha-OS/Snigdha-OS.github.io.git synced 2025-09-07 13:15:17 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ style: add back to top in footer

Browse Source
This commit is contained in:
eshanized
2025-01-06 19:37:33 +05:30
parent 20c991731c
commit acd6990bc7
1 changed files with 51 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/layout/Footer.tsx
View File

@@ -1,7 +1,18 @@
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Github, Twitter, Youtube, Book, MessageSquare, Newspaper, HelpCircle } from 'lucide-react'; import { Github, Twitter, Youtube, Book, MessageSquare, Newspaper, HelpCircle, ChevronUp } from 'lucide-react';
const footerNavigation = { // Define the footer navigation structure with TypeScript
interface FooterLink {
name: string;
href: string;
icon?: React.ComponentType<{ className?: string }>;
}
const footerNavigation: {
main: FooterLink[];
resources: FooterLink[];
community: FooterLink[];
} = {
main: [ main: [
{ name: 'Gallery', href: '/gallery' }, { name: 'Gallery', href: '/gallery' },
{ name: 'Developers', href: '/developers' }, { name: 'Developers', href: '/developers' },
@@ -27,9 +38,10 @@ export function Footer() {
<footer className="bg-gray-900 text-gray-300"> <footer className="bg-gray-900 text-gray-300">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> <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-4 gap-8"> <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
{/* Logo and Social Links */}
<div className="space-y-4"> <div className="space-y-4">
<h3 className="text-lg font-semibold text-white">Snigdha OS</h3> <h3 className="text-xl font-bold text-white">Snigdha OS</h3>
<p className="text-sm"> <p className="text-sm leading-6">
The most advanced penetration testing distribution, designed for security professionals and enthusiasts. The most advanced penetration testing distribution, designed for security professionals and enthusiasts.
</p> </p>
<div className="flex space-x-4"> <div className="flex space-x-4">
@@ -37,22 +49,26 @@ export function Footer() {
<a <a
key={item.name} key={item.name}
href={item.href} href={item.href}
className="hover:text-white transition-colors" className="hover:text-white transition transform hover:scale-110"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<item.icon className="h-5 w-5" /> {item.icon && <item.icon className="h-5 w-5" />}
</a> </a>
))} ))}
</div> </div>
</div> </div>
{/* Navigation Section */}
<div> <div>
<h3 className="text-sm font-semibold text-white uppercase tracking-wider mb-4">Navigation</h3> <h3 className="text-sm font-semibold text-white uppercase tracking-wider mb-4">Navigation</h3>
<ul className="space-y-3"> <ul className="space-y-3">
{footerNavigation.main.map((item) => ( {footerNavigation.main.map((item) => (
<li key={item.name}> <li key={item.name}>
<Link to={item.href} className="hover:text-white transition-colors"> <Link
to={item.href}
className="hover:text-white transition transform hover:scale-105"
>
{item.name} {item.name}
</Link> </Link>
</li> </li>
@@ -60,13 +76,17 @@ export function Footer() {
</ul> </ul>
</div> </div>
{/* Resources Section */}
<div> <div>
<h3 className="text-sm font-semibold text-white uppercase tracking-wider mb-4">Resources</h3> <h3 className="text-sm font-semibold text-white uppercase tracking-wider mb-4">Resources</h3>
<ul className="space-y-3"> <ul className="space-y-3">
{footerNavigation.resources.map((item) => ( {footerNavigation.resources.map((item) => (
<li key={item.name}> <li key={item.name}>
<Link to={item.href} className="flex items-center gap-2 hover:text-white transition-colors"> <Link
<item.icon className="h-4 w-4" /> to={item.href}
className="flex items-center gap-2 hover:text-white transition transform hover:scale-105"
>
{item.icon && <item.icon className="h-4 w-4" />}
{item.name} {item.name}
</Link> </Link>
</li> </li>
@@ -74,6 +94,7 @@ export function Footer() {
</ul> </ul>
</div> </div>
{/* Community Section */}
<div> <div>
<h3 className="text-sm font-semibold text-white uppercase tracking-wider mb-4">Community</h3> <h3 className="text-sm font-semibold text-white uppercase tracking-wider mb-4">Community</h3>
<ul className="space-y-3"> <ul className="space-y-3">
@@ -81,11 +102,11 @@ export function Footer() {
<li key={item.name}> <li key={item.name}>
<a <a
href={item.href} href={item.href}
className="flex items-center gap-2 hover:text-white transition-colors" className="flex items-center gap-2 hover:text-white transition transform hover:scale-105"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<item.icon className="h-4 w-4" /> {item.icon && <item.icon className="h-4 w-4" />}
{item.name} {item.name}
</a> </a>
</li> </li>
@@ -94,11 +115,27 @@ export function Footer() {
</div> </div>
</div> </div>
{/* Footer Bottom Section */}
<div className="mt-12 pt-8 border-t border-gray-800 text-sm text-center"> <div className="mt-12 pt-8 border-t border-gray-800 text-sm text-center">
<p>&copy; {currentYear} Snigdha OS - All rights reserved. Powered by <b className="text-cornflower-blue">Tonmoy Infrastructure™</b></p> <p>
<p>Developed with ❤️ by <b className="text-cornflower-blue"><u>Snigdha OS Open Source Team.</u></b></p> &copy; {currentYear} Snigdha OS - All rights reserved. Powered by{' '}
<b className="text-cornflower-blue">Tonmoy Infrastructure™</b>
</p>
<p>
Developed with ❤️ by{' '}
<b className="text-cornflower-blue">
<u>Snigdha OS Open Source Team.</u>
</b>
</p>
{/* Back-to-Top Button */}
<button
onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
className="mt-4 p-2 bg-cornflower-blue rounded-full text-white shadow-md hover:shadow-lg transition"
>
<ChevronUp className="h-5 w-5" />
</button>
</div> </div>
</div> </div>
</footer> </footer>
); );
} }