From b577a7927875b4e287eb92b98085cd5f2948eb4b Mon Sep 17 00:00:00 2001
From: Norbert Maciaszek <norbert@ambiscale.com>
Date: Sun, 17 Aug 2025 18:53:15 +0200
Subject: [PATCH] Enhance UI components with gradient backgrounds and improved
 interactions: update Button, Dropdown, MovieCard layouts (Aurora, Minimal,
 Zeus), Pagination, Navbar, and Search components to utilize gradient styles
 for a more visually appealing design. Refactor Pagination to use the new
 Button component for consistency.

---
 src/components/atoms/Button/index.tsx         |  2 +-
 src/components/atoms/Dropdown/index.tsx       |  1 +
 .../atoms/MovieCard/layouts/AuroraLayout.tsx  | 35 +++++++++++++------
 .../atoms/MovieCard/layouts/MinimalLayout.tsx |  6 ++--
 .../atoms/MovieCard/layouts/ZeusLayout.tsx    |  2 +-
 src/components/atoms/Pagination/index.tsx     | 15 ++++----
 .../molecules/SearchMovies/index.tsx          |  2 +-
 .../Navbar/components/Search/index.tsx        | 11 +++---
 src/components/organisms/Navbar/index.tsx     | 14 ++++----
 9 files changed, 54 insertions(+), 34 deletions(-)

diff --git a/src/components/atoms/Button/index.tsx b/src/components/atoms/Button/index.tsx
index 66362a6..ffccd33 100644
--- a/src/components/atoms/Button/index.tsx
+++ b/src/components/atoms/Button/index.tsx
@@ -33,5 +33,5 @@ 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",
+    "p-3 rounded-xl bg-gradient-to-br from-white/15 via-white/8 to-white/12 border border-white/20 transition-all duration-300 hover:bg-gradient-to-br hover:from-white/25 hover:to-white/15 hover:scale-105 shadow-lg shadow-black/20",
 };
diff --git a/src/components/atoms/Dropdown/index.tsx b/src/components/atoms/Dropdown/index.tsx
index 66fd7b4..9676320 100644
--- a/src/components/atoms/Dropdown/index.tsx
+++ b/src/components/atoms/Dropdown/index.tsx
@@ -36,6 +36,7 @@ export const Dropdown: FC<Props> = ({ items, defaultValue, callback }) => {
         className="absolute left-0 z-20 w-48 py-2 mt-2 origin-top-right bg-white rounded-md shadow-xl dark:bg-gray-800"
         style={{
           opacity: isOpen ? 1 : 0,
+          pointerEvents: isOpen ? "auto" : "none",
         }}
       >
         {items.map((item) => (
diff --git a/src/components/atoms/MovieCard/layouts/AuroraLayout.tsx b/src/components/atoms/MovieCard/layouts/AuroraLayout.tsx
index f0bbcae..5dee02a 100644
--- a/src/components/atoms/MovieCard/layouts/AuroraLayout.tsx
+++ b/src/components/atoms/MovieCard/layouts/AuroraLayout.tsx
@@ -57,7 +57,8 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
       <div className="absolute inset-0 bg-gradient-to-tr from-pink-500/10 via-transparent to-cyan-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-1000"></div>
 
       {/* Main card container */}
-      <div className="grid relative h-full bg-gradient-to-br from-slate-800/90 to-slate-900/90 backdrop-blur-xl border border-slate-700/50 shadow-2xl shadow-purple-500/10 group-hover:shadow-purple-500/20 transition-all duration-500">
+      <div className="grid relative h-full bg-gradient-to-br from-slate-800/95 via-slate-850/97 to-slate-900/95 border border-slate-700/50 shadow-2xl shadow-purple-500/10 group-hover:shadow-purple-500/20 transition-all duration-500">
+        <div className="absolute inset-0 bg-gradient-to-br from-purple-500/5 via-transparent to-cyan-500/5 opacity-80"></div>
         {/* Image section with sophisticated overlay */}
         <figure
           className="relative overflow-hidden"
@@ -79,7 +80,7 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
           {!!vote_average && (
             <div className="absolute top-4 right-4 transform rotate-3 group-hover:rotate-0 transition-transform duration-300">
               <div
-                className={`bg-gradient-to-r ${scoreColor} p-2 rounded-xl shadow-lg backdrop-blur-sm`}
+                className={`bg-gradient-to-r ${scoreColor} p-2 rounded-xl shadow-lg border border-white/10`}
               >
                 <div className="flex items-center gap-2 text-white font-bold">
                   <span className="text-xl">★</span>
@@ -90,7 +91,7 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
           )}
 
           {/* Popularity indicator */}
-          <div className="absolute top-4 left-4 bg-black/60 backdrop-blur-sm px-3 py-2 rounded-xl border border-white/20">
+          <div className="absolute top-4 left-4 bg-gradient-to-br from-black/80 to-slate-900/85 px-3 py-2 rounded-xl border border-white/20 shadow-lg">
             <div className="flex items-center gap-2 text-orange-400">
               <FaFire className="animate-pulse" />
               <span className="text-sm font-medium">
@@ -102,7 +103,7 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
           {/* Days left to release */}
           {(!isReleased || daysSinceRelease < 35) && (
             <div className="absolute bottom-4 left-4 flex justify-center">
-              <p className="text-white bg-black/60 backdrop-blur-sm px-2.5 leading-[2] rounded-xl border border-white/20 text-xs">
+              <p className="text-white bg-gradient-to-r from-black/75 to-slate-900/80 px-2.5 leading-[2] rounded-xl border border-white/20 text-xs shadow-lg">
                 {isReleased &&
                   daysSinceRelease < 35 &&
                   `od ${daysSinceRelease} dni`}
@@ -118,16 +119,20 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
                 <>
                   <div
                     className={`${
-                      seen ? "bg-emerald-500/90" : "bg-white/20"
-                    } backdrop-blur-sm p-2 rounded-full animate-pulse cursor-pointer hover:bg-emerald-400 transition-colors`}
+                      seen
+                        ? "bg-gradient-to-r from-emerald-500/95 to-emerald-600/90"
+                        : "bg-gradient-to-r from-white/25 to-white/15"
+                    } p-2 rounded-full cursor-pointer hover:bg-emerald-400 transition-colors border border-white/10 shadow-lg`}
                     onClick={handleSeen}
                   >
                     <RxEyeOpen size={16} className="text-white" />
                   </div>
                   <div
                     className={`${
-                      favorite ? "bg-rose-500/90" : "bg-white/20"
-                    } backdrop-blur-sm p-2 rounded-full animate-pulse cursor-pointer hover:bg-rose-400 transition-colors`}
+                      favorite
+                        ? "bg-gradient-to-r from-rose-500/95 to-rose-600/90"
+                        : "bg-gradient-to-r from-white/25 to-white/15"
+                    } p-2 rounded-full cursor-pointer hover:bg-rose-400 transition-colors border border-white/10 shadow-lg`}
                     onClick={handleFavorite}
                   >
                     <MdFavorite size={16} className="text-white" />
@@ -135,7 +140,7 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
                 </>
               )}
               <div
-                className={`bg-white/20 backdrop-blur-sm p-2 rounded-full animate-pulse cursor-pointer hover:bg-red-400 transition-colors`}
+                className={`bg-gradient-to-r from-white/25 to-white/15 p-2 rounded-full cursor-pointer hover:bg-red-400 transition-colors border border-white/10 shadow-lg`}
                 onClick={handleRemove}
               >
                 <FaTrash size={16} className="text-white" />
@@ -222,10 +227,20 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
 
       {isExpanded && (
         <div
-          className="absolute inset-0 p-4 bg-black bg-gradient-to-t from-purple-500/30 to-secondary/30 cursor-pointer"
+          className="absolute inset-0 p-4 bg-black bg-gradient-to-t from-purple-500/30 to-secondary/30 cursor-pointer z-10"
+          style={{
+            animation: "fadeIn 0.3s ease-in-out",
+          }}
           onClick={() => setIsExpanded(false)}
         >
           <p>{overview}</p>
+          <style jsx>{`
+            @keyframes fadeIn {
+              from {
+                opacity: 0;
+              }
+            }
+          `}</style>
         </div>
       )}
     </article>
diff --git a/src/components/atoms/MovieCard/layouts/MinimalLayout.tsx b/src/components/atoms/MovieCard/layouts/MinimalLayout.tsx
index 1a6d573..e2990d5 100644
--- a/src/components/atoms/MovieCard/layouts/MinimalLayout.tsx
+++ b/src/components/atoms/MovieCard/layouts/MinimalLayout.tsx
@@ -34,7 +34,7 @@ export const MinimalLayout: FC<MinimalLayoutProps> = ({
   releaseDate,
 }) => {
   return (
-    <article className="group relative w-full h-[420px] bg-white/5 border border-white/10 rounded-xl overflow-hidden backdrop-blur-sm transition-all duration-300 hover:bg-white/10 hover:border-white/20 hover:shadow-lg hover:shadow-black/20">
+    <article className="group relative w-full h-[420px] bg-gradient-to-br from-white/8 via-slate-800/5 to-white/5 border border-white/10 rounded-xl overflow-hidden transition-all duration-300 hover:bg-gradient-to-br hover:from-white/15 hover:to-white/8 hover:border-white/20 hover:shadow-lg hover:shadow-black/20">
       <figure className="relative h-[280px] overflow-hidden">
         <img
           className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
@@ -44,7 +44,7 @@ export const MinimalLayout: FC<MinimalLayoutProps> = ({
 
         {/* Rating badge */}
         {!!vote_average && (
-          <div className="absolute top-3 right-3 bg-black/60 backdrop-blur-sm px-2 pr-3 pb-1 rounded-full">
+          <div className="absolute top-3 right-3 bg-gradient-to-br from-black/75 to-slate-900/80 px-2 pr-3 pb-1 rounded-full border border-white/10 shadow-lg">
             <span className="text-xs font-medium text-yellow-400">
               ★ {vote_average.toFixed(1)}
             </span>
@@ -52,7 +52,7 @@ export const MinimalLayout: FC<MinimalLayoutProps> = ({
         )}
 
         {/* Action overlay */}
-        <div className="absolute inset-0 bg-black/70 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center">
+        <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-slate-900/75 to-black/60 opacity-0 group-hover:opacity-100 transition-all duration-300 flex items-center justify-center">
           {!alreadyInStore ? (
             <button
               onClick={handleAdd}
diff --git a/src/components/atoms/MovieCard/layouts/ZeusLayout.tsx b/src/components/atoms/MovieCard/layouts/ZeusLayout.tsx
index 2b43e6d..880325c 100644
--- a/src/components/atoms/MovieCard/layouts/ZeusLayout.tsx
+++ b/src/components/atoms/MovieCard/layouts/ZeusLayout.tsx
@@ -54,7 +54,7 @@ export const ZeusLayout: FC<ZeusLayoutProps> = ({
           className="w-full object-cover"
           src={`http://image.tmdb.org/t/p/w342${poster_path}`}
         />
-        <span className="absolute inset-0 bg-black/30 backdrop-blur-md opacity-0 hover-any:opacity-100 transition-opacity duration-300 flex items-center justify-center cursor-pointer">
+        <span className="absolute inset-0 bg-gradient-to-t from-black/60 via-slate-900/40 to-black/30 opacity-0 hover-any:opacity-100 transition-opacity duration-300 flex items-center justify-center cursor-pointer">
           {!alreadyInStore && (
             <button className={buttonClass} onClick={handleAdd}>
               <MdOutlinePostAdd size={64} color="white" />
diff --git a/src/components/atoms/Pagination/index.tsx b/src/components/atoms/Pagination/index.tsx
index f96f925..e6e901e 100644
--- a/src/components/atoms/Pagination/index.tsx
+++ b/src/components/atoms/Pagination/index.tsx
@@ -1,4 +1,5 @@
 import { FC } from "react";
+import { Button } from "../Button";
 
 type Props = {
   totalPages: number;
@@ -15,8 +16,8 @@ export const Pagination: FC<Props> = ({
     <ul className="flex justify-center gap-3  my-10">
       {currentPage > 1 && (
         <li>
-          <button
-            className="grid size-8 place-content-center rounded border bg-white text-black border-primary transition-colors hover:bg-primary hover:text-white cursor-pointer"
+          <Button
+            theme="glass"
             aria-label="Previous page"
             onClick={() => onPageChange(currentPage - 1)}
           >
@@ -32,18 +33,18 @@ export const Pagination: FC<Props> = ({
                 clipRule="evenodd"
               />
             </svg>
-          </button>
+          </Button>
         </li>
       )}
 
-      <li className="text-sm/8 font-medium tracking-widest">
+      <li className="text-sm/8 font-medium tracking-widest leading-[2.8]">
         {currentPage}/{totalPages}
       </li>
 
       {currentPage < totalPages && (
         <li>
-          <button
-            className="grid size-8 place-content-center rounded border bg-white text-black border-primary transition-colors hover:bg-primary hover:text-white cursor-pointer"
+          <Button
+            theme="glass"
             aria-label="Next page"
             onClick={() => onPageChange(currentPage + 1)}
           >
@@ -59,7 +60,7 @@ export const Pagination: FC<Props> = ({
                 clipRule="evenodd"
               />
             </svg>
-          </button>
+          </Button>
         </li>
       )}
     </ul>
diff --git a/src/components/molecules/SearchMovies/index.tsx b/src/components/molecules/SearchMovies/index.tsx
index a1b1cbb..8bd8933 100644
--- a/src/components/molecules/SearchMovies/index.tsx
+++ b/src/components/molecules/SearchMovies/index.tsx
@@ -53,7 +53,7 @@ export const SearchList: FC<Props> = ({ query }) => {
 
         <div className="relative">
           {isLoading && (
-            <div className="absolute -inset-10 flex pt-60 justify-center  backdrop-blur-xs z-10">
+            <div className="absolute -inset-10 flex pt-60 justify-center bg-gradient-to-t from-slate-900/90 via-slate-800/50 to-transparent z-10">
               <Spinner />
             </div>
           )}
diff --git a/src/components/organisms/Navbar/components/Search/index.tsx b/src/components/organisms/Navbar/components/Search/index.tsx
index fd031f1..93c94c1 100644
--- a/src/components/organisms/Navbar/components/Search/index.tsx
+++ b/src/components/organisms/Navbar/components/Search/index.tsx
@@ -57,8 +57,9 @@ export const Search = () => {
       {isSearchOpen && (
         <div className="fixed inset-0 z-[60] overflow-y-auto">
           {/* Aurora Background */}
-          <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>
+          <div className="fixed inset-0 bg-gradient-to-br from-purple-900/98 via-blue-900/98 to-teal-900/98"></div>
+          <div className="fixed inset-0 bg-gradient-to-tr from-slate-900/95 via-slate-800/90 to-slate-900/95"></div>
+          <div className="fixed inset-0 bg-gradient-to-tr from-pink-500/20 via-transparent to-cyan-500/20 animate-pulse"></div>
 
           {/* Close button */}
           <Button
@@ -86,7 +87,7 @@ export const Search = () => {
                 {/* 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">
+                  <div className="relative bg-gradient-to-br from-white/15 via-white/8 to-white/12 border border-white/20 rounded-2xl p-2 shadow-2xl shadow-purple-500/10">
                     <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}
@@ -122,7 +123,7 @@ export const Search = () => {
               {results && (
                 <div className="mb-12">
                   <MovieList
-                    overrideMovies={results.slice(0, 5).map((m) => ({
+                    overrideMovies={results.slice(0, 4).map((m) => ({
                       ...m,
                       favorite: false,
                       seen: false,
@@ -134,7 +135,7 @@ export const Search = () => {
               )}
 
               {/* Show More Button */}
-              {total_results > 5 && (
+              {total_results > 4 && (
                 <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>
diff --git a/src/components/organisms/Navbar/index.tsx b/src/components/organisms/Navbar/index.tsx
index 2a761f0..f5fb61a 100644
--- a/src/components/organisms/Navbar/index.tsx
+++ b/src/components/organisms/Navbar/index.tsx
@@ -29,7 +29,8 @@ export const Navbar = () => {
       {/* Main Navbar */}
       <header className="fixed top-0 w-full z-50 transition-all duration-300">
         {/* Aurora background effect */}
-        <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>
+        <div className="absolute inset-0 bg-gradient-to-r from-slate-900/95 via-slate-800/98 to-slate-900/95"></div>
+        <div className="absolute inset-0 bg-gradient-to-r from-purple-600/15 via-blue-600/10 to-teal-600/15"></div>
         <div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 via-transparent to-cyan-500/10"></div>
 
         {/* Border glow */}
@@ -70,7 +71,7 @@ export const Navbar = () => {
                   <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"
+                    className="group relative px-4 py-2 rounded-xl transition-all duration-300 hover:bg-gradient-to-r hover:from-white/10 hover:to-white/5 border border-transparent hover:border-white/10"
                   >
                     <div className="flex items-center gap-2">
                       <span className="text-lg">{link.icon}</span>
@@ -90,7 +91,7 @@ export const Navbar = () => {
                 {/* 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"
+                  className="md:hidden relative p-3 rounded-xl bg-gradient-to-br from-white/15 to-white/5 border border-white/20 transition-all duration-300 hover:bg-gradient-to-br hover:from-white/25 hover:to-white/10 hover:scale-105 shadow-lg"
                 >
                   <div className="w-6 h-6 flex items-center justify-center">
                     {isMobileMenuOpen ? (
@@ -112,14 +113,15 @@ export const Navbar = () => {
         <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"
+            className="absolute inset-0 bg-gradient-to-br from-black/85 via-slate-900/90 to-black/85 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-slate-800/98 via-slate-850/99 to-slate-900/98"></div>
+            <div className="absolute inset-0 bg-gradient-to-br from-purple-500/8 via-transparent to-cyan-500/8"></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">
@@ -138,7 +140,7 @@ export const Navbar = () => {
                       }}
                     >
                       <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">
+                        <div className="w-12 h-12 rounded-xl bg-gradient-to-r from-purple-500/25 via-purple-400/15 to-cyan-500/25 flex items-center justify-center text-2xl border border-white/10 shadow-lg shadow-purple-500/10">
                           {link.icon}
                         </div>
                         <div>