Snigdha-OS/snigdhaos-web-dev
2
0
Fork 0
mirror of https://github.com/Snigdha-OS/snigdhaos-web-dev.git synced 2025-09-07 13:25:12 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ style(ui*): update styles and more

Browse Source
This commit is contained in:
eshanized
2024-12-19 13:20:24 +05:30
parent 9f6636858c
commit 388e1c6c17
1 changed files with 74 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,12 +17,17 @@ export function Footer() {
}, []);
return (
<footer className="bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 text-white py-16">
<div className="container mx-auto px-6">
<footer className="relative bg-[#1a202c] text-white py-16 overflow-hidden">
{/* Background Bubble Animation */}
<div className="absolute inset-0 pointer-events-none z-0">
<div className="bubble-container"></div>
</div>
<div className="container mx-auto px-6 relative z-10">
<div className="grid grid-cols-1 md:grid-cols-4 gap-10">
{/* Snigdha OS Section */}
<div>
<h3 className="font-bold text-xl mb-6 text-indigo-400">Snigdha OS</h3>
<h3 className="font-bold text-xl mb-6 text-[#6495ED]">Snigdha OS</h3>
<p className="text-sm text-gray-400 leading-relaxed">
Arch-based Linux Distribution for Penetration Testing and Ethical Hacking! Experience power and simplicity
like never before.
@@ -31,29 +36,20 @@ export function Footer() {
{/* Quick Links */}
<div>
<h3 className="font-bold text-xl mb-6 text-indigo-400">Quick Links</h3>
<h3 className="font-bold text-xl mb-6 text-[#6495ED]">Quick Links</h3>
<ul className="space-y-4 text-sm">
<li>
<a
href="https://blog.snigdhaos.org/"
className="hover:text-indigo-400 transition-colors"
>
<a href="https://blog.snigdhaos.org/" className="hover:text-[#6495ED] transition-colors">
Blog <span className="text-xs text-gray-400">(Upcoming!)</span>
</a>
</li>
<li>
<a
href="https://forum.snigdhaos.org/"
className="hover:text-indigo-400 transition-colors"
>
<a href="https://forum.snigdhaos.org/" className="hover:text-[#6495ED] transition-colors">
Forums <span className="text-xs text-gray-400">(Maintenance!)</span>
</a>
</li>
<li>
<a
href="#"
className="hover:text-indigo-400 transition-colors"
>
<a href="#" className="hover:text-[#6495ED] transition-colors">
Community <span className="text-xs text-gray-400">(Upcoming!)</span>
</a>
</li>
@@ -62,12 +58,12 @@ export function Footer() {
{/* Documentation */}
<div>
<h3 className="font-bold text-xl mb-6 text-indigo-400">Documentation</h3>
<h3 className="font-bold text-xl mb-6 text-[#6495ED]">Documentation</h3>
<ul className="space-y-4 text-sm">
<li>
<a
href="https://snigdha-os.github.io/documentation/category/installation"
className="hover:text-indigo-400 transition-colors"
className="hover:text-[#6495ED] transition-colors"
>
Installation Guide
</a>
@@ -75,7 +71,7 @@ export function Footer() {
<li>
<a
href="https://snigdha-os.github.io/documentation/category/user-guide"
className="hover:text-indigo-400 transition-colors"
className="hover:text-[#6495ED] transition-colors"
>
User Guide
</a>
@@ -83,7 +79,7 @@ export function Footer() {
<li>
<a
href="https://snigdha-os.github.io/documentation/introduction/release_notes"
className="hover:text-indigo-400 transition-colors"
className="hover:text-[#6495ED] transition-colors"
>
Release Notes
</a>
@@ -93,13 +89,13 @@ export function Footer() {
{/* Connect Section */}
<div>
<h3 className="font-bold text-xl mb-6 text-indigo-400">Connect</h3>
<h3 className="font-bold text-xl mb-6 text-[#6495ED]">Connect</h3>
<div className="flex items-center space-x-5">
<a
href="https://github.com/Snigdha-OS"
target="_blank"
rel="noopener noreferrer"
className="flex items-center space-x-3 bg-gray-800 hover:bg-indigo-500 transition-colors px-4 py-3 rounded-lg shadow-lg"
className="flex items-center space-x-3 bg-gray-800 hover:bg-[#6495ED] transition-colors px-4 py-3 rounded-lg shadow-lg"
>
<Github className="h-7 w-7 text-white" />
{githubFollowers !== null && (
@@ -113,15 +109,70 @@ export function Footer() {
</div>
</div>
{/* Footer Logo */}
{/* <div className="flex justify-center mt-8">
<img
src="/snigdhaos-logo.svg" // Replace with your actual logo path
alt="Snigdha OS Logo"
className="h-16 w-auto"
/>
</div> */}
{/* Footer Bottom */}
<div className="mt-16 pt-8 border-t border-gray-700 text-center text-sm text-gray-400">
<p>
© {new Date().getFullYear()} <span className="text-indigo-400">Snigdha OS</span> & Tonmoy Infrastructure™.
© {new Date().getFullYear()} <span className="text-[#6495ED]">Snigdha OS</span>. Powered by <span className="font-bold text-[#6495ED]">Tonmoy Infrastructure™. </span>
All rights reserved.
</p>
<p className="mt-2">Built with ❤️ by the Snigdha OS team.</p>
{/* <p className="mt-4 text-xs text-gray-500">
Powered by <span className="font-bold text-[#6495ED]">Tonmoy Infrastructure™</span>
</p> */}
</div>
</div>
{/* Inline Styles for Bubble Animation */}
<style>{`
.bubble-container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
/* Creating multiple bubbles */
.bubble {
position: absolute;
border-radius: 50%;
background: rgba(100, 149, 237, 0.7);
animation: bubble-move 6s infinite;
opacity: 0.7;
}
.bubble:nth-child(1) { width: 50px; height: 50px; animation-duration: 7s; top: 80%; left: 30%; }
.bubble:nth-child(2) { width: 60px; height: 60px; animation-duration: 5s; top: 70%; left: 40%; }
.bubble:nth-child(3) { width: 40px; height: 40px; animation-duration: 6s; top: 80%; left: 50%; }
.bubble:nth-child(4) { width: 70px; height: 70px; animation-duration: 8s; top: 60%; left: 20%; }
.bubble:nth-child(5) { width: 80px; height: 80px; animation-duration: 10s; top: 90%; left: 60%; }
.bubble:nth-child(6) { width: 50px; height: 50px; animation-duration: 6s; top: 50%; left: 75%; }
@keyframes bubble-move {
0% {
transform: translateX(0) translateY(0);
opacity: 0.7;
}
50% {
transform: translateX(150px) translateY(-300px);
opacity: 0.5;
}
100% {
transform: translateX(0) translateY(-500px);
opacity: 0;
}
}
`}</style>
</footer>
);
}