✨ style(ui*): update styles and more

src/components/layout/Footer.tsx

@@ -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">
+    <footer className="relative bg-[#1a202c] text-white py-16 overflow-hidden">
-      <div className="container mx-auto px-6">
+      {/* 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
+                <a href="https://blog.snigdhaos.org/" className="hover:text-[#6495ED] transition-colors">
-                  href="https://blog.snigdhaos.org/"
-                  className="hover:text-indigo-400 transition-colors"
-                >
                   Blog <span className="text-xs text-gray-400">(Upcoming!)</span>
                 </a>
               </li>
               <li>
-                <a
+                <a href="https://forum.snigdhaos.org/" className="hover:text-[#6495ED] transition-colors">
-                  href="https://forum.snigdhaos.org/"
-                  className="hover:text-indigo-400 transition-colors"
-                >
                   Forums <span className="text-xs text-gray-400">(Maintenance!)</span>
                 </a>
               </li>
               <li>
-                <a
+                <a href="#" className="hover:text-[#6495ED] transition-colors">
-                  href="#"
-                  className="hover:text-indigo-400 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>
   );
 }