Refactor Navbar and Search components: enhance Navbar with mobile menu functionality and improved styling, update Search component to utilize new Button component for better UI consistency, and optimize search input layout for a more engaging user experience.

src/app/layout.tsx

@@ -32,7 +32,9 @@ export default async function RootLayout({
       >
         <GlobalStoreProvider>
           <Navbar />
-          <main className="[&>:last-child]:mb-0">{children}</main>
+          <main className="pt-16 lg:pt-20 [&>:last-child]:mb-0">
+            {children}
+          </main>
         </GlobalStoreProvider>
       </body>
     </html>

src/components/atoms/Button/index.tsx

@@ -4,6 +4,7 @@ import { FC } from "react";
 type Props = {
   children: React.ReactNode;
   className?: string;
+  theme?: "primary" | "glass";
   onClick?: () => void;
   href?: string;
 };
@@ -13,12 +14,13 @@ export const Button: FC<Props> = ({
   className = "",
   onClick,
   href,
+  theme = "primary",
 }) => {
   const Component = (href ? Link : "button") as any;
 
   return (
     <Component
-      className={`rounded-md bg-primary px-5 py-2.5 text-sm font-medium text-white transition hover:bg-primary-900 ${className}`}
+      className={`${styles[theme]} cursor-pointer ${className}`}
       onClick={onClick}
       {...(href && { href })}
     >
@@ -26,3 +28,10 @@ export const Button: FC<Props> = ({
     </Component>
   );
 };
+
+const styles = {
+  primary:
+    "block relative bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white px-8 py-4 rounded-xl font-semibold text-lg shadow-2xl transition-all duration-300 hover:scale-105",
+  glass:
+    "p-3 rounded-xl bg-white/10 backdrop-blur-sm border border-white/20 transition-all duration-300 hover:bg-white/20 hover:scale-105",
+};

src/components/atoms/SearchInput/index.tsx

@@ -30,17 +30,17 @@ export const SearchInput: FC<Props> = ({
   }, [value]);
 
   return (
-    <div className={`relative text-gray-600 inline-block ${className}`}>
+    <div>
       <input
         type="search"
         name="search"
-        className="bg-white h-10 px-5 pr-10 rounded-full text-md md:text-sm focus:outline-none w-52 focus:w-[400px] transition-all max-w-[90vw]"
         value={value}
         placeholder={placeholder}
+        className={className}
         onChange={(e) => setValue(e.target.value)}
         autoFocus={autoFocus}
       />
-      <button type="submit" className="absolute right-0 top-0 mt-3 mr-4">
+      <button type="submit" className="absolute right-0 top-1 mt-3 mr-4">
         <IoSearch />
       </button>
     </div>

src/components/organisms/Navbar/components/Search/index.tsx

@@ -42,59 +42,122 @@ export const Search = () => {
 
   return (
     <>
-      <button
+      <Button
-        className="text-text hover:text-secondary cursor-pointer transition-colors"
+        theme="glass"
+        className="group relative"
         onClick={() => setIsSearchOpen(!isSearchOpen)}
       >
-        <IoSearch size={25} fill="currentColor" />
+        <IoSearch
-      </button>
+          size={20}
+          className="text-white transition-transform duration-300 group-hover:scale-110"
+        />
+        <div className="absolute inset-0 bg-gradient-to-r from-purple-500/30 to-cyan-500/30 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+      </Button>
 
       {isSearchOpen && (
-        <div className="fixed inset-0 bg-black/50 z-20 backdrop-blur-sm overflow-y-auto flex py-20">
+        <div className="fixed inset-0 z-[60] overflow-y-auto">
-          <button
+          {/* Aurora Background */}
-            className="absolute top-4 right-4 text-white cursor-pointer"
+          <div className="absolute inset-0 bg-gradient-to-br from-purple-900/95 via-blue-900/95 to-teal-900/95 backdrop-blur-2xl"></div>
+          <div className="absolute inset-0 bg-gradient-to-tr from-pink-500/20 via-transparent to-cyan-500/20 animate-pulse"></div>
+
+          {/* Close button */}
+          <Button
+            theme="glass"
+            className="absolute top-6 right-6 z-10 group hover:!bg-red-500/50"
             onClick={handleClose}
           >
-            <IoClose size={25} fill="currentColor" />
+            <IoClose
-          </button>
+              size={24}
+              className="text-white transition-transform duration-300 group-hover:rotate-90"
+            />
+          </Button>
 
-          <div className="container" ref={ref}>
+          <div className="relative min-h-full flex flex-col py-20" ref={ref}>
-            <div className="text-center">
+            <div className="container mx-auto px-4 flex-1">
-              <SearchInput
+              {/* Header Section */}
-                className="lg:scale-200"
+              <div className="text-center mb-12">
-                onChange={handleSearch}
+                <h2 className="text-4xl lg:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white via-purple-200 to-cyan-200 mb-4">
-                placeholder="Search for a movie"
+                  Znajdź Filmy
-                autoFocus={true}
+                </h2>
-              />
+                <p className="text-lg text-gray-300 mb-8">
+                  Odkryj niesamowite filmy z całego świata
+                </p>
+
+                {/* Enhanced Search Input */}
+                <div className="relative max-w-2xl mx-auto">
+                  <div className="absolute inset-0 bg-gradient-to-r from-purple-500/30 to-cyan-500/30 rounded-2xl blur-xl"></div>
+                  <div className="relative bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-2">
+                    <SearchInput
+                      className="w-full px-3 bg-transparent border-none text-lg lg:text-xl placeholder-gray-400 text-white focus:outline-none"
+                      onChange={handleSearch}
+                      placeholder="Wpisz tytuł filmu..."
+                      autoFocus={true}
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {/* Loading State */}
+              {isLoading && (
+                <div className="text-center py-20">
+                  <div className="relative inline-block">
+                    <Spinner />
+                    <div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-cyan-400 rounded-full opacity-30 blur-lg animate-pulse"></div>
+                  </div>
+                  <p className="text-gray-300 mt-4 text-lg">Szukam filmów...</p>
+                </div>
+              )}
+
+              {/* Results Header */}
+              {results && (
+                <div className="mb-8">
+                  <p className="text-white font-semibold flex items-center justify-center">
+                    <span className="mr-2 w-2 h-2 bg-gradient-to-r from-green-400 to-emerald-400 rounded-full animate-pulse"></span>
+                    Znaleziono {total_results} filmów
+                  </p>
+                </div>
+              )}
+
+              {/* Results */}
+              {results && (
+                <div className="mb-12">
+                  <MovieList
+                    overrideMovies={results.slice(0, 5).map((m) => ({
+                      ...m,
+                      favorite: false,
+                      seen: false,
+                      genre_ids: JSON.stringify(m.genre_ids),
+                    }))}
+                    fluid
+                  />
+                </div>
+              )}
+
+              {/* Show More Button */}
+              {total_results > 5 && (
+                <div className="text-center">
+                  <div className="relative inline-block">
+                    <div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-cyan-500 rounded-xl blur-lg opacity-50"></div>
+                    <Button href={`/search?s=${query}`} onClick={handleClose}>
+                      <span className="flex items-center gap-2">
+                        Zobacz wszystkie ({total_results})
+                      </span>
+                    </Button>
+                  </div>
+                </div>
+              )}
+
+              {/* No Results */}
+              {query.length >= 3 && results && results.length === 0 && (
+                <div className="text-center py-20">
+                  <div className="text-6xl mb-4">🎬</div>
+                  <h3 className="text-2xl font-bold text-white mb-2">
+                    Brak wyników
+                  </h3>
+                  <p className="text-gray-400">Spróbuj wyszukać inny tytuł</p>
+                </div>
+              )}
             </div>
-            {isLoading && (
-              <div className="col-span-full mt-2 lg:mt-30 text-center ">
-                <Spinner />
-              </div>
-            )}
-            {results && (
-              <div className="col-span-full mt-2 lg:mt-10 text-center ">
-                <p className="text-white">{total_results} movies found</p>
-              </div>
-            )}
-            {results && (
-              <MovieList
-                overrideMovies={results.slice(0, 5).map((m) => ({
-                  ...m,
-                  favorite: false,
-                  seen: false,
-                  genre_ids: JSON.stringify(m.genre_ids),
-                }))}
-                fluid
-              />
-            )}
-            {total_results > 5 && (
-              <div className="col-span-full text-center">
-                <Button href={`/search?s=${query}`} onClick={handleClose}>
-                  Pokaż więcej
-                </Button>
-              </div>
-            )}
           </div>
         </div>
       )}

src/components/organisms/Navbar/index.tsx

@@ -1,65 +1,177 @@
+"use client";
 import Link from "next/link";
+import { useState } from "react";
+import { HiMenuAlt3, HiX, HiSparkles } from "react-icons/hi";
 import { Search } from "./components/Search";
 
 const links = [
   {
     label: "Odkrywaj",
     href: "/odkrywaj",
+    icon: "🎬",
+  },
+  {
+    label: "Moja Lista",
+    href: "/",
+    icon: "📚",
   },
 ];
 
 export const Navbar = () => {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  const toggleMobileMenu = () => {
+    setIsMobileMenuOpen(!isMobileMenuOpen);
+  };
+
   return (
-    <header className="bg-hippie-blue-700 shadow-sm max-sm:sticky top-0 w-full z-30">
+    <>
-      <div className="container">
+      {/* Main Navbar */}
-        <div className="flex items-center gap-8 py-4">
+      <header className="fixed top-0 w-full z-50 transition-all duration-300">
-          <Link className="block text-teal-600" href="/">
+        {/* Aurora background effect */}
-            <span className="sr-only">Home</span>
+        <div className="absolute inset-0 bg-gradient-to-r from-purple-900/80 via-blue-900/80 to-teal-900/80 backdrop-blur-xl"></div>
-            <img src="/logo.svg" alt="Logo" width={40} />
+        <div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 via-transparent to-cyan-500/10"></div>
-          </Link>
 
-          <div className="flex flex-1 items-center justify-end md:justify-between">
+        {/* Border glow */}
-            <nav aria-label="Global" className="hidden md:block">
+        <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-purple-400/50 to-transparent"></div>
-              <ul className="flex items-center gap-6 text-sm">
-                {links.map((link) => (
-                  <li key={link.href}>
-                    <Link
-                      className="text-text/70 font-semibold hover:text-text"
-                      href={link.href}
-                    >
-                      {link.label}
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-            </nav>
 
-            <div className="flex items-center gap-4">
+        <div className="relative">
-              <div className="flex gap-4 sm:gap-6">
+          <div className="container mx-auto px-4">
-                <Search />
+            <div className="flex items-center justify-between h-16 lg:h-20">
-              </div>
+              {/* Logo */}
-
+              <Link
-              <button className="block rounded-sm bg-gray-100 p-2.5 text-gray-600 transition hover:text- md:hidden">
+                href="/"
-                <span className="sr-only">Toggle menu</span>
+                className="group flex items-center gap-3 transition-all duration-300 hover:scale-105"
-                <svg
+              >
-                  xmlns="http://www.w3.org/2000/svg"
+                <div className="relative">
-                  className="size-5"
+                  <img
-                  fill="none"
+                    src="/logo.svg"
-                  viewBox="0 0 24 24"
+                    alt="MovieBox"
-                  stroke="currentColor"
+                    className="w-10 h-10 lg:w-12 lg:h-12 transition-all duration-300 group-hover:brightness-110"
-                  strokeWidth="2"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M4 6h16M4 12h16M4 18h16"
                   />
-                </svg>
+                  <div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-cyan-400 rounded-full opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-md"></div>
-              </button>
+                </div>
+                <div className="hidden sm:block">
+                  <h1 className="text-xl lg:text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-300 group-hover:from-purple-200 group-hover:to-cyan-200 transition-all duration-300">
+                    MovieBox
+                  </h1>
+                  <div className="flex items-center gap-1">
+                    <HiSparkles className="w-3 h-3 text-purple-400 animate-pulse" />
+                    <span className="text-xs text-gray-400 font-medium">
+                      Premium Experience
+                    </span>
+                  </div>
+                </div>
+              </Link>
+
+              {/* Desktop Navigation */}
+              <nav className="hidden md:flex items-center gap-8">
+                {links.map((link) => (
+                  <Link
+                    key={link.href}
+                    href={link.href}
+                    className="group relative px-4 py-2 rounded-xl transition-all duration-300 hover:bg-white/10 backdrop-blur-sm"
+                  >
+                    <div className="flex items-center gap-2">
+                      <span className="text-lg">{link.icon}</span>
+                      <span className="font-medium text-gray-300 group-hover:text-white transition-colors duration-300">
+                        {link.label}
+                      </span>
+                    </div>
+                    <div className="absolute inset-0 bg-gradient-to-r from-purple-500/20 to-cyan-500/20 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                  </Link>
+                ))}
+              </nav>
+
+              {/* Search and Mobile Menu */}
+              <div className="flex items-center gap-4">
+                <Search />
+
+                {/* Mobile Menu Button */}
+                <button
+                  onClick={toggleMobileMenu}
+                  className="md:hidden relative p-3 rounded-xl bg-white/10 backdrop-blur-sm border border-white/20 transition-all duration-300 hover:bg-white/20 hover:scale-105"
+                >
+                  <div className="w-6 h-6 flex items-center justify-center">
+                    {isMobileMenuOpen ? (
+                      <HiX className="w-5 h-5 text-white" />
+                    ) : (
+                      <HiMenuAlt3 className="w-5 h-5 text-white" />
+                    )}
+                  </div>
+                  <div className="absolute inset-0 bg-gradient-to-r from-purple-500/30 to-cyan-500/30 rounded-xl opacity-0 hover:opacity-100 transition-opacity duration-300"></div>
+                </button>
+              </div>
             </div>
           </div>
         </div>
-      </div>
+      </header>
-    </header>
+
+      {/* Mobile Menu Overlay */}
+      {isMobileMenuOpen && (
+        <div className="fixed inset-0 z-40 md:hidden">
+          {/* Backdrop */}
+          <div
+            className="absolute inset-0 bg-black/70 backdrop-blur-sm transition-opacity duration-300"
+            onClick={toggleMobileMenu}
+          />
+
+          {/* Menu Panel */}
+          <div className="absolute top-0 right-0 w-80 max-w-[85vw] h-full">
+            {/* Aurora background */}
+            <div className="absolute inset-0 bg-gradient-to-br from-slate-800/95 to-slate-900/95 backdrop-blur-xl"></div>
+            <div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 via-transparent to-cyan-500/10"></div>
+
+            <div className="relative h-full flex flex-col p-6 pt-24">
+              {/* Menu Items */}
+              <nav className="flex-1">
+                <div className="space-y-4">
+                  {links.map((link, index) => (
+                    <Link
+                      key={link.href}
+                      href={link.href}
+                      onClick={toggleMobileMenu}
+                      className="group relative block p-4 rounded-2xl bg-white/5 border border-white/10 transition-all duration-300 hover:bg-white/10 hover:border-white/20 hover:scale-105"
+                      style={{
+                        animationDelay: `${index * 100}ms`,
+                        animation: "slideInRight 0.3s ease-out forwards",
+                      }}
+                    >
+                      <div className="flex items-center gap-4">
+                        <div className="w-12 h-12 rounded-xl bg-gradient-to-r from-purple-500/20 to-cyan-500/20 flex items-center justify-center text-2xl backdrop-blur-sm">
+                          {link.icon}
+                        </div>
+                        <div>
+                          <h3 className="font-semibold text-white group-hover:text-purple-200 transition-colors duration-300">
+                            {link.label}
+                          </h3>
+                          <p className="text-sm text-gray-400">
+                            Explore amazing content
+                          </p>
+                        </div>
+                      </div>
+                      <div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 to-cyan-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                    </Link>
+                  ))}
+                </div>
+              </nav>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <style jsx>{`
+        @keyframes slideInRight {
+          from {
+            opacity: 0;
+            transform: translateX(30px);
+          }
+          to {
+            opacity: 1;
+            transform: translateX(0);
+          }
+        }
+      `}</style>
+    </>
   );
 };