fix: improve the footer ui, buttons, icons and newsletter section

Author: anujsharma8d

web-app/css/styles.css

@@ -3127,21 +3127,6 @@ body.sidebar-collapsed .playground-section {
   gap: 10px;
 }
 
-.footer-social-icons a {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 38px;
-  height: 38px;
-  border-radius: 10px;
-  background: var(--bg-glass);
-  border: 1px solid var(--border);
-  color: var(--text-secondary);
-  font-size: 1rem;
-  transition: all var(--duration-fast) ease;
-  text-decoration: none;
-}
-
 .footer-links h3 {
   font-family: var(--font-sans);
   font-size: 0.85rem;
@@ -3594,7 +3579,6 @@ body.sidebar-collapsed .playground-section {
 }
 
 .footer-links a:hover,
-.footer-social-icons a:hover,
 .footer-bottom-links a:hover,
 .footer-brand h2:hover,
 .footer-brand p:hover,
@@ -3607,7 +3591,6 @@ body.sidebar-collapsed .playground-section {
 .footer-links h3::after,
 .footer-links a::before,
 .footer-links a::after,
-.footer-social-icons a::after,
 .footer-bottom-links a::after {
   animation: none !important;
   transform: none !important;
@@ -5891,6 +5874,7 @@ button:focus-visible,
   transform: translateY(-5px);
   box-shadow: 0 10px 20px rgba(34, 197, 94, 0.3);
   transform: translateY(-5px) scale(1.08);
+}
 
   .project-card:hover {
     transform: translateY(-6px);
@@ -5902,7 +5886,6 @@ button:focus-visible,
     background: #ffffff;
     border-color: rgba(106, 191, 141, 0.4);
   }
-}
 
 .footer-social-icons .github:hover i {
   filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
@@ -6028,6 +6011,13 @@ button:focus-visible,
   transition: var(--transition);
 }
 
+.footer-links a svg {
+  font-size: 0.9rem;
+  color: var(--accent-color);
+  opacity: 0.7;
+  transition: var(--transition);
+}
+
 
 .card-actions .btn-play {
   margin-top: 0;
@@ -7198,4 +7188,35 @@ body.sidebar-collapsed .sidebar-dock .sidebar-footer .sidebar-main-controls {
         color:var(--text);
     }
 
+}
+
+.newsletter-form{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+  margin-top: 10px;
+}
+
+.footer-input {
+  font-size: larger;
+  border-radius: 10px;
+  outline: none;
+  border: none;
+  padding: 5px;
+  font-family: var(--font-sans);
+}
+
+.newsletter-form button{
+  padding: 8px 20px;
+  border-radius: 10px;
+  font-family: var(--font-sans);
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--text);
+  box-shadow: 0 12px 0 rgba(0, 0, 0, 0.06), 0 16px 32px rgba(34, 197, 94, 0.3);
+    background: linear-gradient(135deg, #22c55e, #14b8a6);
+  border: 1px solid var(--border);
+  transition: all var(--duration-fast) ease;
+  white-space: nowrap;
 }

web-app/index.html

@@ -534,8 +534,15 @@ <h2>🎮 Python Mini Projects</h2>
           <div class="footer-social-icons">
             <a href="https://github.com/steam-bell-92/python-mini-project" target="_blank" class="github"
               rel="noopener noreferrer" aria-label="GitHub"><i class="fab fa-github"></i></a>
-            <a href="https://x.com/AnujKulkarni040" class="twitter" aria-label="X (formerly Twitter)"><i
-                class="fa fa-x-twitter"></i></a>
+            <a href="https://x.com/AnujKulkarni040" class="twitter" aria-label="X (formerly Twitter)">
+              <svg xmlns="http://www.w3.org/2000/svg"
+       width="15"
+       height="15"
+       viewBox="0 0 24 24"
+       fill="currentColor">
+    <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.847h-7.406l-5.8-7.584-6.64 7.584H.473l8.6-9.83L0 1.153h7.594l5.243 6.932L18.901 1.153z"/>
+  </svg>
+</a>
             <a href="https://www.linkedin.com/in/anujCkulkarni" class="linkedin" aria-label="LinkedIn"><i
                 class="fab fa-linkedin"></i></a>
             <a href="https://www.instagram.com/obscura.nuj" class="instagram" aria-label="Instagram"><i
@@ -545,14 +552,14 @@ <h2>🎮 Python Mini Projects</h2>
         <div class="footer-links">
           <h3>Quick Links</h3>
           <ul>
-            <li><a href="#main-content" onclick="document.querySelector('[data-category=\'games\']').click()">Games</a>
+            <li><a href="#main-content" onclick="document.querySelector('[data-category=\'games\']').click()"><svg width="20" height="20" data-lucide="gamepad-2"></svg>Games</a>
             </li>
-            <li><a href="#main-content" onclick="document.querySelector('[data-category=\'math\']').click()">Math</a>
+            <li><a href="#main-content" onclick="document.querySelector('[data-category=\'math\']').click()"><svg width="20" height="20" data-lucide="sigma"></svg>Math</a>
             </li>
             <li><a href="#main-content"
-                onclick="document.querySelector('[data-category=\'utilities\']').click()">Utilities</a></li>
-            <li><a href="#main-content" onclick="document.querySelector('[data-category=\'favorites\']').click()">Favorites</a></li>
-            <li><a href="#main-content" onclick="document.querySelector('[data-category=\'playground\']').click()">Playground</a></li>
+                onclick="document.querySelector('[data-category=\'utilities\']').click()"><svg width="20" height="20" data-lucide="wrench"></svg>Utilities</a></li>
+            <li><a href="#main-content" onclick="document.querySelector('[data-category=\'favorites\']').click()"><svg width="20" height="20" data-lucide="star"></svg>Favorites</a></li>
+            <li><a href="#main-content" onclick="document.querySelector('[data-category=\'playground\']').click()"><svg width="20" height="20" data-lucide="terminal"></svg>Playground</a></li>
           </ul>
         </div>
         <div class="footer-links">
@@ -574,7 +581,7 @@ <h3>Resources</h3>
           <h3>Stay Updated</h3>
           <p>Get notified about new projects and features!</p>
           <form class="newsletter-form" onsubmit="event.preventDefault(); alert('Thanks for subscribing!');">
-            <input type="email" placeholder="Enter your email" required aria-label="Email for newsletter">
+            <input class="footer-input" type="email" placeholder="Enter your email" required aria-label="Email for newsletter">
             <button type="submit" aria-label="Subscribe">
               <i class="fas fa-paper-plane"></i>
             </button>