Redesign UI with Netflix-style design system

.gitignore

@@ -4,3 +4,4 @@ tsconfig.json
 package-lock.json
 .env.local
 next-env.d.ts
+*.backup

components/Footer.js

@@ -1,15 +1,31 @@
 import React from "react";
+import { FaGithub, FaHeart } from "react-icons/fa";
 
 export default function Footer() {
   return (
     <footer className="footer">
-      <div>
-        <span>
-          &copy; {new Date().getFullYear()} ImpactStream &mdash; Powered by TMDB and multiple streaming APIs.
-        </span>
-      </div>
-      <div style={{ marginTop: '0.5rem', fontSize: '0.85rem', opacity: 0.7 }}>
-        <span>Made with ❤️ for streaming enthusiasts</span>
+      <div className="footer-content">
+        <div className="footer-links">
+          <div className="footer-section">
+            <h3>About</h3>
+            <ul>
+              <li><a href="https://github.com/LaganYT/ImpactStream" target="_blank" rel="noopener noreferrer">GitHub Repository</a></li>
+              <li><a href="https://www.themoviedb.org/" target="_blank" rel="noopener noreferrer">TMDB</a></li>
+            </ul>
+          </div>
+          <div className="footer-section">
+            <h3>Features</h3>
+            <ul>
+              <li>Multiple Streaming APIs</li>
+              <li>Live TV Channels</li>
+              <li>Search Movies & TV Shows</li>
+            </ul>
+          </div>
+        </div>
+        <div className="footer-bottom">
+          <p>&copy; {new Date().getFullYear()} ImpactStream. Powered by TMDB and multiple streaming APIs.</p>
+          <p className="footer-love">Made with <FaHeart className="footer-heart" /> for streaming enthusiasts</p>
+        </div>
       </div>
     </footer>
   );

components/Navbar.js

@@ -1,11 +1,21 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
 import { FaGithub, FaTv, FaHome, FaSearch, FaBars, FaTimes } from "react-icons/fa";
 
 export default function Navbar({ query, setQuery, onSearch }) {
   const router = useRouter();
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 0);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
 
   const handleSearch = () => {
     if (query.trim()) {
@@ -20,7 +30,7 @@ export default function Navbar({ query, setQuery, onSearch }) {
   };
 
   return (
-    <nav className="navbar">
+    <nav className={`navbar ${isScrolled ? 'scrolled' : ''}`}>
       <Link href="/"><h1 className="logo">ImpactStream</h1></Link>
 
       {/* Desktop Navigation */}