feat: update layout and MovieCard components to enhance styling and functionality; replace layout system with a unified MovieCard design, adjust display types in Odkrywaj and GenrePage, and improve pagination button styles

src/app/layout.tsx

@@ -26,7 +26,7 @@ export default async function RootLayout({
         <GlobalStoreProvider initialMovies={movies}>
           <AuroraBackground />
           <Navbar />
-          <main className="relative pb-10">{children}</main>
+          <main className="relative [&>*:last-child]:pb-16">{children}</main>
         </GlobalStoreProvider>
       </body>
     </html>

src/app/odkrywaj/gatunek/[id]/page.tsx

@@ -96,7 +96,7 @@ export default async function GenrePage({ params }: PageProps) {
           icon={<FaCalendar />}
           colors="green"
           showFilters={false}
-          displayType="list"
+          overrideDisplayType="list"
         />
       </section>
 
@@ -111,7 +111,7 @@ export default async function GenrePage({ params }: PageProps) {
             colors="blue"
             showFilters={false}
             sortDirection="desc"
-            displayType="list"
+            overrideDisplayType="list"
           />
         </section>
       )}
@@ -125,7 +125,7 @@ export default async function GenrePage({ params }: PageProps) {
             icon={<FaFire />}
             colors="red"
             showFilters={false}
-            displayType="list"
+            overrideDisplayType="list"
           />
         </section>
       )}

src/app/odkrywaj/page.tsx

@@ -49,7 +49,7 @@ export default async function Home() {
           icon={<FaPlay />}
           colors="blue"
           showFilters={false}
-          displayType="list"
+          overrideDisplayType="grid"
         />
       </section>
 
@@ -61,7 +61,7 @@ export default async function Home() {
           icon={<FaCalendar />}
           colors="blue"
           showFilters={false}
-          displayType="list"
+          overrideDisplayType="grid"
         />
       </section>
 
@@ -73,7 +73,7 @@ export default async function Home() {
           icon={<FaFire />}
           colors="red"
           showFilters={false}
-          displayType="list"
+          overrideDisplayType="grid"
         />
       </section>
 
@@ -85,7 +85,7 @@ export default async function Home() {
           icon={<FaChartLine />}
           colors="green"
           showFilters={false}
-          displayType="list"
+          overrideDisplayType="grid"
         />
       </section>
 

src/components/atoms/MovieCard/index.tsx

@@ -2,21 +2,18 @@
 import { FC } from "react";
 import { useGlobalStore } from "@/app/store/globalStore";
 import { Movie } from "@/types/global";
-import {
+import { FaFire, FaPlusCircle, FaTrash } from "react-icons/fa";
-  AuroraLayout,
+import Link from "next/link";
-  MinimalLayout,
+import { RxEyeOpen } from "react-icons/rx";
-  ZeusLayout,
+import { MdFavorite } from "react-icons/md";
-  DefaultLayout,
+import { RiCalendarCheckLine, RiCalendarScheduleLine } from "react-icons/ri";
-} from "./layouts";
 
 type Props = Movie & {
-  layout?: "default" | "zeus" | "minimal" | "aurora";
   showDayCounter?: boolean;
   simpleToggle?: boolean;
 };
 
 export const MovieCard: FC<Props> = ({
-  layout = "aurora",
   showDayCounter = true,
   simpleToggle = false,
   ...movie
@@ -27,14 +24,21 @@ export const MovieCard: FC<Props> = ({
     deleteMovie: deleteMovieFromStore,
     updateMovie: updateMovieInStore,
   } = useGlobalStore();
+  const { vote_average, popularity, poster_path, title, overview } = movie;
 
   const { id } = movie;
   const alreadyInStore = movies.find((m) => m.id === id);
 
+  const seen = alreadyInStore?.seen || movie.seen;
+  const favorite = alreadyInStore?.favorite || movie.favorite;
+
   const isReleased = new Date(movie.release_date) < new Date();
-  const iconSize = 48;
+  const scoreColor =
-  const buttonClass =
+    vote_average >= 8
-    "p-4 text-sm transition-colors cursor-pointer text-center group/toggle";
+      ? "from-emerald-400 to-teal-400"
+      : vote_average >= 6
+      ? "from-yellow-400 to-orange-400"
+      : "from-red-400 to-pink-400";
 
   const handleAdd = () => {
     addMovieToStore(movie);
@@ -65,32 +69,161 @@ export const MovieCard: FC<Props> = ({
     )
   );
 
-  const commonProps = {
+  return (
-    ...movie,
+    <article className="group relative w-full overflow-hidden rounded-2xl max-w-[300px] mx-auto">
-    alreadyInStore,
+      {/* Main card container */}
-    isReleased,
+      <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">
-    handleAdd,
+        {/* Image section with sophisticated overlay */}
-    handleRemove,
+        <figure className="relative overflow-hidden aspect-[4/3] lg:aspect-[342/513]">
-    handleSeen,
+          <Link href={`/film/${id}`}>
-    handleFavorite,
+            <img
-    daysSinceRelease,
+              className="w-full h-full object-cover transition-all duration-700 hover:scale-110 hover:brightness-110 bg-gradient-to-b from-purple-600/50 to-emerald-600"
-    releaseDate,
+              src={`http://image.tmdb.org/t/p/w342${poster_path}`}
-    showDayCounter,
+              alt={title}
-    simpleToggle,
+            />
-    buttonClass,
+          </Link>
-    iconSize,
-    favorite: alreadyInStore?.favorite || movie.favorite,
-    seen: alreadyInStore?.seen || movie.seen,
-  };
 
-  switch (layout) {
+          {/* Gradient overlays for depth */}
-    case "aurora":
+          <div className="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/20 to-transparent pointer-events-none" />
-      return <AuroraLayout {...commonProps} />;
+
-    case "minimal":
+          {/* Floating rating badge */}
-      return <MinimalLayout {...commonProps} />;
+          {!!vote_average && (
-    case "zeus":
+            <div className="absolute top-4 right-4 transform rotate-3 group-hover:rotate-0 transition-transform duration-300">
-      return <ZeusLayout {...commonProps} />;
+              <div
-    default:
+                className={`bg-gradient-to-r ${scoreColor} p-2 rounded-xl shadow-lg border border-white/10`}
-      return <DefaultLayout {...commonProps} />;
+              >
-  }
+                <div className="flex items-center gap-2 text-white font-bold">
+                  <span className="text-xl">★</span>
+                  <span className="text-lg">{vote_average.toFixed(1)}</span>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Popularity indicator */}
+          <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">
+                {Math.round(popularity)}
+              </span>
+            </div>
+          </div>
+
+          {/* Days left to release */}
+          {(!isReleased || daysSinceRelease < 35) && (
+            <div className="absolute bottom-4 left-4 flex justify-center">
+              <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`}
+                {!isReleased && `za ${daysSinceRelease} dni`}
+              </p>
+            </div>
+          )}
+
+          {/* Status indicators */}
+          <div className="absolute bottom-4 right-4 flex gap-2">
+            {alreadyInStore && !simpleToggle && (
+              <>
+                <div
+                  className={`${
+                    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-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" />
+                </div>
+              </>
+            )}
+            {!alreadyInStore && (
+              <div
+                className={`bg-gradient-to-r from-emerald-500/50 to-emerald-600/50 p-2 rounded-full cursor-pointer hover:bg-emerald-400 transition-colors border border-white/10 shadow-lg`}
+                onClick={handleAdd}
+              >
+                <FaPlusCircle size={16} className="text-white" />
+              </div>
+            )}
+            {alreadyInStore && (
+              <div
+                className={`bg-gradient-to-r from-red-400/25 to-red-400/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" />
+              </div>
+            )}
+          </div>
+        </figure>
+
+        {/* Content section with glowing effects */}
+        <div className="relative p-6 flex flex-col justify-between">
+          <div className="relative z-10">
+            <Link href={`/film/${id}`}>
+              <h3 className="font-bold text-xl leading-tight mb-3 transition-colors duration-500 hover:text-secondary flex items-center gap-2">
+                {title}
+              </h3>
+              <p className="text-sm text-gray-400 line-clamp-2 leading-relaxed opacity-80 transition-colors duration-300 hover:text-secondary">
+                {overview}
+              </p>
+            </Link>
+          </div>
+
+          {/* Bottom section with enhanced styling */}
+          <div className="relative z-10 flex items-center justify-between pt-4 mt-4 border-t border-gradient-to-r border-slate-700/50">
+            <div className="flex items-center gap-3">
+              <div
+                className={`flex items-center gap-1 text-sm ${
+                  isReleased ? "text-emerald-400" : "text-amber-400"
+                }`}
+              >
+                {isReleased ? (
+                  <RiCalendarCheckLine />
+                ) : (
+                  <RiCalendarScheduleLine />
+                )}
+                <span className="font-medium">
+                  {releaseDate.toLocaleDateString("pl-PL", {
+                    day: "numeric",
+                    month: "short",
+                    year: "numeric",
+                  })}
+                </span>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-3">
+              {alreadyInStore && (
+                <div className="flex gap-2">
+                  {seen && (
+                    <div
+                      className="w-3 h-3 bg-gradient-to-r from-emerald-400 to-teal-400 rounded-full shadow-lg shadow-emerald-400/50 animate-pulse"
+                      title="Watched"
+                    />
+                  )}
+                  {favorite && (
+                    <div
+                      className="w-3 h-3 bg-gradient-to-r from-rose-400 to-pink-400 rounded-full shadow-lg shadow-rose-400/50 animate-pulse"
+                      title="Favorite"
+                    />
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+  );
 };

src/components/atoms/MovieCard/layouts/AuroraLayout.tsx

@@ -1,207 +0,0 @@
-"use client";
-import { FC, useState } from "react";
-import { MdFavorite } from "react-icons/md";
-import { RxEyeOpen } from "react-icons/rx";
-import { FaFire, FaTrash, FaPlusCircle } from "react-icons/fa";
-import { RiCalendarCheckLine, RiCalendarScheduleLine } from "react-icons/ri";
-import { Movie } from "@/types/global";
-import Link from "next/link";
-
-interface AuroraLayoutProps extends Movie {
-  showDayCounter?: boolean;
-  simpleToggle?: boolean;
-  alreadyInStore?: Movie | undefined;
-  isReleased: boolean;
-  handleAdd: () => void;
-  handleRemove: () => void;
-  handleSeen: () => void;
-  handleFavorite: () => void;
-  daysSinceRelease: number;
-  releaseDate: Date;
-}
-
-export const AuroraLayout: FC<AuroraLayoutProps> = ({
-  id,
-  title,
-  overview,
-  popularity,
-  release_date,
-  poster_path,
-  vote_average,
-  seen,
-  favorite,
-  alreadyInStore,
-  isReleased,
-  handleAdd,
-  handleRemove,
-  handleSeen,
-  handleFavorite,
-  daysSinceRelease,
-  releaseDate,
-  simpleToggle,
-}) => {
-  const scoreColor =
-    vote_average >= 8
-      ? "from-emerald-400 to-teal-400"
-      : vote_average >= 6
-      ? "from-yellow-400 to-orange-400"
-      : "from-red-400 to-pink-400";
-
-  return (
-    <article className="group relative w-full overflow-hidden rounded-2xl max-w-[300px] mx-auto">
-      {/* Main card container */}
-      <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">
-        {/* Image section with sophisticated overlay */}
-        <figure className="relative overflow-hidden aspect-[4/3] lg:aspect-[342/513]">
-          <Link href={`/film/${id}`}>
-            <img
-              className="w-full h-full object-cover transition-all duration-700 hover:scale-110 hover:brightness-110 bg-gradient-to-b from-purple-600/50 to-emerald-600"
-              src={`http://image.tmdb.org/t/p/w342${poster_path}`}
-              alt={title}
-            />
-          </Link>
-
-          {/* Gradient overlays for depth */}
-          <div className="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/20 to-transparent pointer-events-none" />
-
-          {/* Floating rating badge */}
-          {!!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 border border-white/10`}
-              >
-                <div className="flex items-center gap-2 text-white font-bold">
-                  <span className="text-xl">★</span>
-                  <span className="text-lg">{vote_average.toFixed(1)}</span>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Popularity indicator */}
-          <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">
-                {Math.round(popularity)}
-              </span>
-            </div>
-          </div>
-
-          {/* Days left to release */}
-          {(!isReleased || daysSinceRelease < 35) && (
-            <div className="absolute bottom-4 left-4 flex justify-center">
-              <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`}
-                {!isReleased && `za ${daysSinceRelease} dni`}
-              </p>
-            </div>
-          )}
-
-          {/* Status indicators */}
-          <div className="absolute bottom-4 right-4 flex gap-2">
-            {alreadyInStore && !simpleToggle && (
-              <>
-                <div
-                  className={`${
-                    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-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" />
-                </div>
-              </>
-            )}
-            {!alreadyInStore && (
-              <div
-                className={`bg-gradient-to-r from-emerald-500/50 to-emerald-600/50 p-2 rounded-full cursor-pointer hover:bg-emerald-400 transition-colors border border-white/10 shadow-lg`}
-                onClick={handleAdd}
-              >
-                <FaPlusCircle size={16} className="text-white" />
-              </div>
-            )}
-            {alreadyInStore && (
-              <div
-                className={`bg-gradient-to-r from-red-400/25 to-red-400/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" />
-              </div>
-            )}
-          </div>
-        </figure>
-
-        {/* Content section with glowing effects */}
-        <div className="relative p-6 flex flex-col justify-between">
-          <div className="relative z-10">
-            <Link href={`/film/${id}`}>
-              <h3 className="font-bold text-xl leading-tight mb-3 transition-colors duration-500 hover:text-secondary flex items-center gap-2">
-                {title}
-              </h3>
-              <p className="text-sm text-gray-400 line-clamp-2 leading-relaxed opacity-80 transition-colors duration-300 hover:text-secondary">
-                {overview}
-              </p>
-            </Link>
-          </div>
-
-          {/* Bottom section with enhanced styling */}
-          <div className="relative z-10 flex items-center justify-between pt-4 mt-4 border-t border-gradient-to-r border-slate-700/50">
-            <div className="flex items-center gap-3">
-              <div
-                className={`flex items-center gap-1 text-sm ${
-                  isReleased ? "text-emerald-400" : "text-amber-400"
-                }`}
-              >
-                {isReleased ? (
-                  <RiCalendarCheckLine />
-                ) : (
-                  <RiCalendarScheduleLine />
-                )}
-                <span className="font-medium">
-                  {releaseDate.toLocaleDateString("pl-PL", {
-                    day: "numeric",
-                    month: "short",
-                    year: "numeric",
-                  })}
-                </span>
-              </div>
-            </div>
-
-            <div className="flex items-center gap-3">
-              {alreadyInStore && (
-                <div className="flex gap-2">
-                  {seen && (
-                    <div
-                      className="w-3 h-3 bg-gradient-to-r from-emerald-400 to-teal-400 rounded-full shadow-lg shadow-emerald-400/50 animate-pulse"
-                      title="Watched"
-                    />
-                  )}
-                  {favorite && (
-                    <div
-                      className="w-3 h-3 bg-gradient-to-r from-rose-400 to-pink-400 rounded-full shadow-lg shadow-rose-400/50 animate-pulse"
-                      title="Favorite"
-                    />
-                  )}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </article>
-  );
-};

src/components/atoms/MovieCard/layouts/DefaultLayout.tsx

@@ -1,109 +0,0 @@
-"use client";
-import { FC } from "react";
-import { ReadMore } from "../../ReadMore";
-import { Movie } from "@/types/global";
-
-interface DefaultLayoutProps extends Movie {
-  showDayCounter?: boolean;
-  simpleToggle?: boolean;
-  alreadyInStore?: Movie | undefined;
-  isReleased: boolean;
-  handleAdd: () => void;
-  handleRemove: () => void;
-  handleSeen: () => void;
-  handleFavorite: () => void;
-  buttonClass: string;
-}
-
-export const DefaultLayout: FC<DefaultLayoutProps> = ({
-  title,
-  overview,
-  popularity,
-  release_date,
-  poster_path,
-  alreadyInStore,
-  isReleased,
-  handleAdd,
-  handleRemove,
-  handleSeen,
-  handleFavorite,
-  buttonClass,
-}) => {
-  return (
-    <div className="flex w-full shadow-md rounded-lg overflow-hidden mx-auto group/card">
-      <div className="overflow-hidden rounded-xl relative movie-item text-white movie-card">
-        <div className="absolute inset-0 z-10 bg-gradient-to-t from-black via-gray-900 to-transparent"></div>
-        <div className="relative group z-10 p-6 space-y-6 h-full">
-          <div className="align-self-end w-full h-full flex flex-col">
-            <div className="h-64"></div>
-            <div className="flex flex-col space-y-2 inner mb-4">
-              <h3
-                className="text-lg leading-[1.3] font-bold text-white line-clamp-1"
-                title={title}
-              >
-                {title}
-              </h3>
-              <div className="text-xs text-gray-400">
-                <ReadMore text={overview} />
-              </div>
-            </div>
-            <div className="flex flex-row justify-between mt-auto">
-              <div className="flex flex-col">
-                <div className="text-sm text-gray-400">Popularity:</div>
-                <div className="popularity">{popularity}</div>
-              </div>
-              <div className="flex flex-col">
-                <div className="text-sm text-gray-400">Release date:</div>
-                <div className="release">{release_date}</div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="absolute top-0 z-10 bg-transparent inset-0 group-hover/card:bg-black/50 transition-all opacity-0 group-hover/card:opacity-100 flex flex-col justify-center">
-          {!alreadyInStore && (
-            <button
-              className={`${buttonClass} bg-primary/70 text-white hover:bg-primary`}
-              onClick={handleAdd}
-            >
-              Add to list
-            </button>
-          )}
-          {alreadyInStore && (
-            <>
-              {isReleased && (
-                <button
-                  className={`${buttonClass} bg-accent/70 text-white hover:bg-accent`}
-                  onClick={handleSeen}
-                >
-                  {alreadyInStore.seen ? "Mark as unseen" : "Mark as seen"}
-                </button>
-              )}
-
-              <button
-                className={`${buttonClass} bg-amber-400/70 text-white hover:bg-amber-500`}
-                onClick={handleFavorite}
-              >
-                {alreadyInStore.favorite
-                  ? "Remove favorite"
-                  : "Add to favorites"}
-              </button>
-
-              <button
-                className={`${buttonClass} bg-primary/70 text-white hover:bg-primary`}
-                onClick={handleRemove}
-              >
-                Remove from list
-              </button>
-            </>
-          )}
-        </div>
-        <figure className="absolute inset-0 w-full bottom-[20%]">
-          <img
-            className="w-full h-96 object-cover"
-            src={`http://image.tmdb.org/t/p/w342${poster_path}`}
-          />
-        </figure>
-      </div>
-    </div>
-  );
-};

src/components/atoms/MovieCard/layouts/MinimalLayout.tsx

@@ -1,141 +0,0 @@
-"use client";
-import { FC } from "react";
-import { ReadMore } from "../../ReadMore";
-import { MdFavorite, MdFavoriteBorder } from "react-icons/md";
-import { RxEyeOpen, RxEyeClosed } from "react-icons/rx";
-import { IoMdRemoveCircleOutline } from "react-icons/io";
-import { Movie } from "@/types/global";
-
-interface MinimalLayoutProps extends Movie {
-  showDayCounter?: boolean;
-  simpleToggle?: boolean;
-  alreadyInStore?: Movie | undefined;
-  isReleased: boolean;
-  handleAdd: () => void;
-  handleRemove: () => void;
-  handleSeen: () => void;
-  handleFavorite: () => void;
-  releaseDate: Date;
-}
-
-export const MinimalLayout: FC<MinimalLayoutProps> = ({
-  title,
-  overview,
-  poster_path,
-  vote_average,
-  seen,
-  favorite,
-  alreadyInStore,
-  isReleased,
-  handleAdd,
-  handleRemove,
-  handleSeen,
-  handleFavorite,
-  releaseDate,
-}) => {
-  return (
-    <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"
-          src={`http://image.tmdb.org/t/p/w342${poster_path}`}
-          alt={title}
-        />
-
-        {/* Rating badge */}
-        {!!vote_average && (
-          <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>
-          </div>
-        )}
-
-        {/* Action overlay */}
-        <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}
-              className="bg-white text-black px-4 py-2 rounded-lg font-medium text-sm transition-all duration-200 hover:bg-gray-100 hover:scale-105"
-            >
-              Add to List
-            </button>
-          ) : (
-            <div className="flex gap-2">
-              {isReleased && (
-                <button
-                  onClick={handleSeen}
-                  className={`p-2 rounded-lg transition-all duration-200 hover:scale-110 ${
-                    seen
-                      ? "bg-green-500 text-white"
-                      : "bg-white/20 text-white hover:bg-white/30"
-                  }`}
-                >
-                  {seen ? <RxEyeOpen size={20} /> : <RxEyeClosed size={20} />}
-                </button>
-              )}
-              <button
-                onClick={handleFavorite}
-                className={`p-2 rounded-lg transition-all duration-200 hover:scale-110 ${
-                  favorite
-                    ? "bg-red-500 text-white"
-                    : "bg-white/20 text-white hover:bg-white/30"
-                }`}
-              >
-                {favorite ? (
-                  <MdFavorite size={20} />
-                ) : (
-                  <MdFavoriteBorder size={20} />
-                )}
-              </button>
-              <button
-                onClick={handleRemove}
-                className="p-2 rounded-lg bg-white/20 text-white hover:bg-red-500 transition-all duration-200 hover:scale-110"
-              >
-                <IoMdRemoveCircleOutline size={20} />
-              </button>
-            </div>
-          )}
-        </div>
-      </figure>
-
-      {/* Content section */}
-      <div className="p-4 flex flex-col justify-between">
-        <div>
-          <h3 className="font-semibold text-lg leading-tight line-clamp-2 mb-2 transition-colors duration-200 group-hover:text-white/90">
-            {title}
-          </h3>
-          <div className="text-sm text-gray-400 leading-relaxed">
-            <ReadMore text={overview} />
-          </div>
-        </div>
-
-        <div className="flex items-center justify-between mt-3 pt-3 border-t border-white/10">
-          <span className="text-xs text-gray-500 font-medium">
-            {releaseDate.toLocaleDateString("pl-PL", {
-              day: "numeric",
-              month: "long",
-              year: "numeric",
-            })}
-          </span>
-          {alreadyInStore && (
-            <div className="flex gap-1">
-              {seen && (
-                <div
-                  className="w-2 h-2 bg-green-400 rounded-full"
-                  title="Watched"
-                />
-              )}
-              {favorite && (
-                <div
-                  className="w-2 h-2 bg-red-400 rounded-full"
-                  title="Favorite"
-                />
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    </article>
-  );
-};

src/components/atoms/MovieCard/layouts/ZeusLayout.tsx

@@ -1,166 +0,0 @@
-"use client";
-import { FC } from "react";
-import { ReadMore } from "../../ReadMore";
-import { MdFavorite, MdFavoriteBorder, MdOutlinePostAdd } from "react-icons/md";
-import { RxEyeOpen, RxEyeClosed } from "react-icons/rx";
-import { IoMdRemoveCircleOutline } from "react-icons/io";
-import { FaFire } from "react-icons/fa";
-import { RiCalendarCheckLine, RiCalendarScheduleLine } from "react-icons/ri";
-import { Movie } from "@/types/global";
-
-interface ZeusLayoutProps extends Movie {
-  showDayCounter?: boolean;
-  simpleToggle?: boolean;
-  alreadyInStore?: Movie | undefined;
-  isReleased: boolean;
-  handleAdd: () => void;
-  handleRemove: () => void;
-  handleSeen: () => void;
-  handleFavorite: () => void;
-  daysSinceRelease: number;
-  releaseDate: Date;
-  buttonClass: string;
-  iconSize: number;
-}
-
-export const ZeusLayout: FC<ZeusLayoutProps> = ({
-  title,
-  overview,
-  popularity,
-  poster_path,
-  vote_average,
-  seen,
-  favorite,
-  showDayCounter,
-  simpleToggle,
-  alreadyInStore,
-  isReleased,
-  handleAdd,
-  handleRemove,
-  handleSeen,
-  handleFavorite,
-  daysSinceRelease,
-  releaseDate,
-  buttonClass,
-  iconSize,
-}) => {
-  return (
-    <article className="flex flex-col w-full shadow-lg rounded-t-lg overflow-hidden bg-black/50 shadow-white/5">
-      <figure className="relative ">
-        <img
-          style={{
-            aspectRatio: "342/513",
-          }}
-          className="w-full object-cover"
-          src={`http://image.tmdb.org/t/p/w342${poster_path}`}
-        />
-        <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" />
-            </button>
-          )}
-          {alreadyInStore && (
-            <div className="flex flex-col">
-              <>
-                {isReleased && !simpleToggle && (
-                  <button
-                    className={`${buttonClass} text-white`}
-                    onClick={handleSeen}
-                  >
-                    <span className="group-hover/toggle:hidden">
-                      {seen ? (
-                        <RxEyeOpen size={iconSize} />
-                      ) : (
-                        <RxEyeClosed size={iconSize} />
-                      )}
-                    </span>
-                    <span className="hidden group-hover/toggle:block">
-                      {seen ? (
-                        <RxEyeClosed size={iconSize} />
-                      ) : (
-                        <RxEyeOpen size={iconSize} />
-                      )}
-                    </span>
-                  </button>
-                )}
-
-                {!simpleToggle && (
-                  <button
-                    className={`${buttonClass} text-amber-400`}
-                    onClick={handleFavorite}
-                  >
-                    <span className="group-hover/toggle:hidden">
-                      {favorite ? (
-                        <MdFavorite size={iconSize} />
-                      ) : (
-                        <MdFavoriteBorder size={iconSize} />
-                      )}
-                    </span>
-                    <span className="hidden group-hover/toggle:block">
-                      {favorite ? (
-                        <MdFavoriteBorder size={iconSize} />
-                      ) : (
-                        <MdFavorite size={iconSize} />
-                      )}
-                    </span>
-                  </button>
-                )}
-
-                <button
-                  className={`${buttonClass} text-red-500`}
-                  onClick={handleRemove}
-                >
-                  <IoMdRemoveCircleOutline size={iconSize} />
-                </button>
-              </>
-            </div>
-          )}
-        </span>
-        <span className="absolute top-0 right-0 bg-black/50 px-2 py-1 rounded-bl-lg">
-          <p className="text-sm text-white flex items-center gap-1">
-            <FaFire />
-            {popularity}
-          </p>
-        </span>
-      </figure>
-      <div className="p-4">
-        {!!vote_average && (
-          <p className="flex items-center gap-1 text-sm mb-2">
-            <span className="text-yellow-400">★</span>
-            <span>{vote_average.toFixed(1)}/10</span>
-          </p>
-        )}
-
-        <div className="flex justify-between">
-          <h2 className="text-xl leading-[1.1] font-bold">{title}</h2>
-        </div>
-
-        <p
-          className={`text-sm mt-2 flex items-center gap-1 leading-[1.1] ${
-            isReleased ? "text-green-700" : "text-yellow-500"
-          }`}
-        >
-          {isReleased ? <RiCalendarCheckLine /> : <RiCalendarScheduleLine />}
-          <span>
-            {releaseDate.toLocaleDateString("pl-PL", {
-              day: "numeric",
-              month: "long",
-              year: "numeric",
-            })}
-          </span>
-        </p>
-        {showDayCounter && (
-          <span className="text-xs text-gray-400">
-            {isReleased
-              ? `${daysSinceRelease} dni od premiery`
-              : `${daysSinceRelease} dni do premiery`}
-          </span>
-        )}
-        <div className="text-xs text-gray-400 mt-4">
-          <ReadMore text={overview} />
-        </div>
-      </div>
-    </article>
-  );
-};

src/components/atoms/MovieCard/layouts/index.ts

@@ -1,4 +0,0 @@
-export { AuroraLayout } from "./AuroraLayout";
-export { MinimalLayout } from "./MinimalLayout";
-export { ZeusLayout } from "./ZeusLayout";
-export { DefaultLayout } from "./DefaultLayout";

src/components/atoms/Pagination/index.tsx

@@ -18,6 +18,7 @@ export const Pagination: FC<Props> = ({
         <li>
           <Button
             theme="glass"
+            size="icon"
             aria-label="Previous page"
             onClick={() => onPageChange(currentPage - 1)}
           >
@@ -45,6 +46,7 @@ export const Pagination: FC<Props> = ({
         <li>
           <Button
             theme="glass"
+            size="icon"
             aria-label="Next page"
             onClick={() => onPageChange(currentPage + 1)}
           >

src/components/molecules/MovieList/index.tsx

@@ -234,7 +234,7 @@ export const MovieList: FC<Props> = ({
           >
             {sortedMovies.map((movie) =>
               displayType === "grid" ? (
-                <MovieCard key={movie.id} layout="aurora" {...movie} />
+                <MovieCard key={movie.id} {...movie} />
               ) : (
                 <MovieRow key={movie.id} movie={movie} compact />
               )

src/components/molecules/SearchMovies/index.tsx

@@ -58,6 +58,8 @@ export const SearchList: FC<Props> = ({ query }) => {
             </div>
           )}
           <MovieList
+            showFilters={false}
+            overrideDisplayType="grid"
             overrideMovies={results?.map((m) => ({
               ...m,
               favorite: false,