From fd1240252d4d940d339b0dd07125b68517d93f11 Mon Sep 17 00:00:00 2001
From: Norbert Maciaszek <norbert@ambiscale.com>
Date: Mon, 18 Aug 2025 15:27:28 +0200
Subject: [PATCH] feat: implement responsive container utility and enhance
 layout styles across components; update Carousel and Gallery for improved
 structure and consistency

---
 src/app/aktor/[id]/page.tsx                   |  36 ++-
 src/app/film/[id]/page.tsx                    |   4 +-
 src/app/globals.css                           |  42 ++-
 src/app/layout.tsx                            |   4 +-
 src/app/odkrywaj/page.tsx                     |  86 ++----
 src/components/atoms/Button/index.tsx         |   7 +-
 .../atoms/MovieCard/layouts/AuroraLayout.tsx  |   2 +-
 src/components/molecules/ActorHero/index.tsx  | 292 +++++++++---------
 src/components/molecules/Carousel/index.tsx   |  16 +-
 src/components/molecules/Gallery/index.tsx    | 120 ++++---
 src/components/molecules/HeroMovie/index.tsx  |   6 +-
 src/components/molecules/MovieCast/index.tsx  |   6 +-
 src/components/molecules/MovieList/index.tsx  |   6 +-
 .../molecules/RecommendedMovies/index.tsx     |  26 +-
 .../molecules/SimilarMovies/index.tsx         |   2 +-
 .../Navbar/components/Search/index.tsx        |  17 +-
 src/components/organisms/Navbar/index.tsx     |  26 +-
 17 files changed, 353 insertions(+), 345 deletions(-)

diff --git a/src/app/aktor/[id]/page.tsx b/src/app/aktor/[id]/page.tsx
index 96c5d03..8b93b43 100644
--- a/src/app/aktor/[id]/page.tsx
+++ b/src/app/aktor/[id]/page.tsx
@@ -16,22 +16,30 @@ export default async function Page({
   const personDetails = await TMDB.getPersonDetails(actorId);
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 pb-16">
+    <div className="bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 py-0.5">
       <ActorHero personDetails={personDetails} />
       <Gallery images={personDetails.images.profiles} heading="Galeria" />
-      <div className="container">
-        <Carousel
-          heading={`Filmy z udziałem ${personDetails.name}`}
-          icon={<FaStar />}
-          colors="purple"
-        >
-          {personDetails.movie_credits.cast.map((movie) => {
-            const convertedMovie = convertToMovie(movie);
-            if (!convertedMovie) return null;
-            return <MovieCard key={movie.id} {...convertedMovie} />;
-          })}
-        </Carousel>
-      </div>
+      <section className="blocks">
+        <div className="container">
+          <Carousel
+            heading={`Filmy z udziałem ${personDetails.name}`}
+            icon={<FaStar />}
+            colors="purple"
+          >
+            {personDetails.movie_credits.cast
+              .sort(
+                (a, b) =>
+                  new Date(b.release_date).getTime() -
+                  new Date(a.release_date).getTime()
+              )
+              .map((movie) => {
+                const convertedMovie = convertToMovie(movie);
+                if (!convertedMovie) return null;
+                return <MovieCard key={movie.id} {...convertedMovie} />;
+              })}
+          </Carousel>
+        </div>
+      </section>
     </div>
   );
 }
diff --git a/src/app/film/[id]/page.tsx b/src/app/film/[id]/page.tsx
index 26ef2f1..9532e7b 100644
--- a/src/app/film/[id]/page.tsx
+++ b/src/app/film/[id]/page.tsx
@@ -12,10 +12,10 @@ export default async function Page({
   const movieDetails = await TMDB.getMovieDetails(movieId);
 
   return (
-    <div className="min-h-screen mt-16">
+    <>
       <HeroMovie movieDetails={movieDetails} />
       <MovieCast movieDetails={movieDetails} />
       <RecommendedMovies movies={movieDetails.recommendations} />
-    </div>
+    </>
   );
 }
diff --git a/src/app/globals.css b/src/app/globals.css
index 6a9418d..0a80c26 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -46,18 +46,30 @@
 
 @custom-variant hover-any (&:hover);
 
+@utility container {
+  margin: 0 auto;
+  padding: 0 15px;
+  width: 100%;
+  max-width: 100%;
+
+  @variant sm {
+    max-width: 640px;
+  }
+
+  @variant lg {
+    max-width: 860px;
+  }
+
+  @variant xl {
+    max-width: 1280px;
+  }
+}
+
 @layer base {
   body {
     @apply bg-hippie-blue-950 text-text;
   }
 
-  .container {
-    width: 100%;
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 15px;
-  }
-
   .container-fluid {
     width: 100%;
     max-width: 100%;
@@ -71,6 +83,22 @@
     margin: 0 -15px;
   }
 
+  .blocks {
+    margin: 32px 0;
+
+    @variant lg {
+      margin: 64px 0;
+    }
+  }
+
+  .blockp {
+    padding: 32px 0;
+
+    @variant lg {
+      padding: 64px 0;
+    }
+  }
+
   a {
     @apply transition-colors;
   }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 29e3aff..6a80a26 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -34,9 +34,7 @@ export default async function RootLayout({
         <GlobalStoreProvider>
           <AuroraBackground />
           <Navbar />
-          <main className="relative pt-16 lg:pt-20 [&>:last-child]:mb-0">
-            {children}
-          </main>
+          <main className="relative">{children}</main>
         </GlobalStoreProvider>
       </body>
     </html>
diff --git a/src/app/odkrywaj/page.tsx b/src/app/odkrywaj/page.tsx
index 5adacf1..cdd5494 100644
--- a/src/app/odkrywaj/page.tsx
+++ b/src/app/odkrywaj/page.tsx
@@ -47,63 +47,41 @@ export default async function Home() {
     <>
       <Hero movies={heroMovies} autoRotate />
 
-      <div className="container py-16 space-y-16">
-        <section>
-          <Carousel heading="Teraz w kinach" icon={<FaPlay />}>
-            {nowPlayingMovies.map((movie) => (
-              <MovieCard
-                key={movie.id}
-                {...movie}
-                simpleToggle
-                layout="aurora"
-              />
-            ))}
-          </Carousel>
-        </section>
+      <section className="blocks">
+        <Carousel heading="Teraz w kinach" icon={<FaPlay />}>
+          {nowPlayingMovies.map((movie) => (
+            <MovieCard key={movie.id} {...movie} simpleToggle layout="aurora" />
+          ))}
+        </Carousel>
+      </section>
 
-        <section>
-          <Carousel
-            heading="Nadchodzące filmy"
-            icon={<FaCalendar />}
-            colors="blue"
-          >
-            {upcomingMovies.map((movie) => (
-              <MovieCard
-                key={movie.id}
-                {...movie}
-                simpleToggle
-                layout="aurora"
-              />
-            ))}
-          </Carousel>
-        </section>
+      <section className="blocks">
+        <Carousel
+          heading="Nadchodzące filmy"
+          icon={<FaCalendar />}
+          colors="blue"
+        >
+          {upcomingMovies.map((movie) => (
+            <MovieCard key={movie.id} {...movie} simpleToggle layout="aurora" />
+          ))}
+        </Carousel>
+      </section>
 
-        <section>
-          <Carousel heading="Popularne filmy" icon={<FaFire />} colors="red">
-            {popularMovies.map((movie) => (
-              <MovieCard
-                key={movie.id}
-                {...movie}
-                simpleToggle
-                layout="aurora"
-              />
-            ))}
-          </Carousel>
-        </section>
+      <section className="blocks">
+        <Carousel heading="Popularne filmy" icon={<FaFire />} colors="red">
+          {popularMovies.map((movie) => (
+            <MovieCard key={movie.id} {...movie} simpleToggle layout="aurora" />
+          ))}
+        </Carousel>
+      </section>
 
-        <section>
-          <Carousel heading="Trendy dnia" icon={<FaChartLine />} colors="green">
-            {trendingMovies.map((movie) => (
-              <MovieCard
-                key={movie.id}
-                {...movie}
-                simpleToggle
-                layout="aurora"
-              />
-            ))}
-          </Carousel>
-        </section>
-      </div>
+      <section className="blocks">
+        <Carousel heading="Trendy dnia" icon={<FaChartLine />} colors="green">
+          {trendingMovies.map((movie) => (
+            <MovieCard key={movie.id} {...movie} simpleToggle layout="aurora" />
+          ))}
+        </Carousel>
+      </section>
 
       <div className="p-2 text-center text-xs text-gray-500">
         <p>Ostatnia aktualizacja: {lastModified}</p>
diff --git a/src/components/atoms/Button/index.tsx b/src/components/atoms/Button/index.tsx
index 4721f45..59b44de 100644
--- a/src/components/atoms/Button/index.tsx
+++ b/src/components/atoms/Button/index.tsx
@@ -7,7 +7,7 @@ type Props = {
   children: React.ReactNode;
   className?: string;
   theme?: Theme;
-  size?: "small" | "medium" | "large";
+  size?: "small" | "medium" | "large" | "icon";
   onClick?: () => void;
   href?: string;
   gradient?: {
@@ -31,7 +31,7 @@ export const Button: FC<Props> = ({
 
   return (
     <Component
-      className={`flex items-center justify-center gap-2 cursor-pointer text-white rounded-xl font-semibold shadow-2xl transition-all duration-300 hover:scale-105 
+      className={`flex items-center justify-center gap-2 cursor-pointer text-white rounded-xl font-semibold shadow-2xl transition-colors duration-300 
         bg-gradient-to-r ${buttonColor?.from} ${buttonColor?.to} cursor-pointer ${sizes[size]} ${className}`}
       onClick={onClick}
       {...(href && { href })}
@@ -45,6 +45,7 @@ const sizes = {
   small: "px-4 py-2 text-sm",
   medium: "px-8 py-4 text-lg",
   large: "px-12 py-6 text-xl",
+  icon: "p-3 [&>*]:w-5 [&>*]:h-5",
 };
 
 const colors = {
@@ -57,7 +58,7 @@ const colors = {
     to: "to-pink-600 hover:to-pink-500",
   },
   glass: {
-    from: "from-white/15 via-white/8 to-white/12",
+    from: "from-white/15 via-white/8 to-white/12 border border-white/20",
     to: "to-white/15 hover:to-white/10",
   },
   rose: {
diff --git a/src/components/atoms/MovieCard/layouts/AuroraLayout.tsx b/src/components/atoms/MovieCard/layouts/AuroraLayout.tsx
index b6613b5..98d3f22 100644
--- a/src/components/atoms/MovieCard/layouts/AuroraLayout.tsx
+++ b/src/components/atoms/MovieCard/layouts/AuroraLayout.tsx
@@ -48,7 +48,7 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
       : "from-red-400 to-pink-400";
 
   return (
-    <article className="group relative w-full overflow-hidden rounded-2xl">
+    <article className="group relative w-full overflow-hidden rounded-2xl max-w-[300px] mx-auto">
       {/* Aurora background effect */}
       <div className="absolute inset-0 bg-gradient-to-br from-purple-900/20 via-blue-900/20 to-teal-900/20 opacity-60"></div>
       <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>
diff --git a/src/components/molecules/ActorHero/index.tsx b/src/components/molecules/ActorHero/index.tsx
index 51df2d6..80bae35 100644
--- a/src/components/molecules/ActorHero/index.tsx
+++ b/src/components/molecules/ActorHero/index.tsx
@@ -55,7 +55,7 @@ export const ActorHero: FC<Props> = ({ personDetails }) => {
   };
 
   return (
-    <section className="pt-16 pb-8">
+    <section className="blocks">
       <div className="relative">
         {/* Navigation */}
         <div className="absolute top-0 left-0 right-0 z-20 px-6">
@@ -63,161 +63,157 @@ export const ActorHero: FC<Props> = ({ personDetails }) => {
         </div>
 
         {/* Main content */}
-        <div className="relative z-10 px-6 lg:px-8 mt-16">
-          <div className="max-w-7xl mx-auto">
-            <div className="flex flex-col lg:flex-row gap-8">
-              {/* Profile photo */}
-              <div className="flex-shrink-0">
-                <div className="relative group">
-                  <img
-                    src={
-                      personDetails.profile_path
-                        ? `https://image.tmdb.org/t/p/w500${personDetails.profile_path}`
-                        : "/api/placeholder/400/600"
-                    }
-                    alt={personDetails.name}
-                    className="w-80 h-auto rounded-2xl shadow-2xl shadow-purple-500/20 group-hover:shadow-purple-500/40 transition-all duration-500"
-                  />
-                  <div className="absolute inset-0 rounded-2xl bg-gradient-to-t from-purple-600/20 to-transparent opacity-100" />
-                </div>
+        <div className="container">
+          <div className="flex flex-col lg:flex-row gap-8">
+            {/* Profile photo */}
+            <div className="flex-shrink-0 text-center">
+              <div className="relative group inline-block">
+                <img
+                  src={
+                    personDetails.profile_path
+                      ? `https://image.tmdb.org/t/p/w500${personDetails.profile_path}`
+                      : "/api/placeholder/400/600"
+                  }
+                  alt={personDetails.name}
+                  className="w-80 h-auto rounded-2xl shadow-2xl shadow-purple-500/20 group-hover:shadow-purple-500/40 transition-all duration-500"
+                />
+                <div className="absolute inset-0 rounded-2xl bg-gradient-to-t from-purple-600/20 to-transparent opacity-100" />
               </div>
+            </div>
 
-              {/* Actor details */}
-              <div className="flex-1 text-white">
-                <div className="space-y-6">
-                  {/* Name and known for */}
-                  <div>
-                    <h1 className="text-4xl lg:text-5xl font-bold bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
-                      {personDetails.name}
-                    </h1>
-                    {personDetails.birthday && (
-                      <span className="text-sm text-gray-400">
-                        (
-                        {calculateAge(
-                          personDetails.birthday,
-                          personDetails.deathday
-                        )}{" "}
-                        lat
-                        {personDetails.deathday && " w chwili śmierci"})
-                      </span>
-                    )}
-
-                    <div className="flex items-center gap-4 mb-4 mt-4">
-                      <div className="flex items-center gap-2">
-                        <FaTheaterMasks className="text-purple-400" />
-                        <span className="text-xl text-gray-300 font-medium">
-                          {personDetails.known_for_department}
-                        </span>
-                      </div>
-
-                      <div className="flex items-center gap-2">
-                        <FaStar className="text-yellow-400" />
-                        <span className="text-lg text-gray-300">
-                          {Math.round(personDetails.popularity)} popularność
-                        </span>
-                      </div>
-                    </div>
-
-                    {/* Also known as */}
-                    {personDetails.also_known_as.length > 0 && (
-                      <div className="mb-4">
-                        <p className="text-gray-400 text-sm">
-                          Znany również jako:{" "}
-                          {personDetails.also_known_as.slice(0, 3).join(", ")}
-                        </p>
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Personal info */}
-                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                    {/* Gender */}
-                    <div className="flex items-center gap-2 text-gray-300">
-                      <span className="text-purple-400">Płeć:</span>
-                      <span>{getGenderText(personDetails.gender)}</span>
-                    </div>
-
-                    {/* Birthday */}
-                    {personDetails.birthday && (
-                      <div className="flex items-center gap-2 text-gray-300">
-                        <FaCalendarAlt className="text-purple-400" />
-                        <div className="flex">
-                          <span>{formatDate(personDetails.birthday)}</span>
-                        </div>
-                      </div>
-                    )}
-
-                    {/* Deathday */}
-                    {personDetails.deathday && (
-                      <div className="flex items-center gap-2 text-gray-300">
-                        <FaCalendarAlt className="text-red-400" />
-                        <div className="flex flex-col">
-                          <span className="text-red-300">Data śmierci:</span>
-                          <span>{formatDate(personDetails.deathday)}</span>
-                        </div>
-                      </div>
-                    )}
-
-                    {/* Place of birth */}
-                    {personDetails.place_of_birth && (
-                      <div className="flex items-center gap-2 text-gray-300">
-                        <FaMapMarkerAlt className="text-purple-400" />
-                        <span>{personDetails.place_of_birth}</span>
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Biography */}
-                  {personDetails.biography && (
-                    <div>
-                      <h3 className="text-lg font-semibold mb-3 text-purple-300">
-                        Biografia
-                      </h3>
-                      <div className="text-gray-300 leading-relaxed text-lg space-y-4">
-                        {personDetails.biography
-                          .split("\n\n")
-                          .map((paragraph, index) => (
-                            <p key={index}>{paragraph}</p>
-                          ))}
-                      </div>
-                    </div>
+            {/* Actor details */}
+            <div className="flex-1 text-white">
+              <div className="space-y-6">
+                {/* Name and known for */}
+                <div>
+                  <h1 className="text-4xl lg:text-5xl font-bold bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
+                    {personDetails.name}
+                  </h1>
+                  {personDetails.birthday && (
+                    <span className="text-sm text-gray-400">
+                      (
+                      {calculateAge(
+                        personDetails.birthday,
+                        personDetails.deathday
+                      )}{" "}
+                      lat
+                      {personDetails.deathday && " w chwili śmierci"})
+                    </span>
                   )}
 
-                  {/* External links */}
-                  {personDetails.external_ids && (
-                    <div>
-                      <h3 className="text-lg font-semibold mb-3 text-purple-300">
-                        Linki
-                      </h3>
-                      <div className="flex gap-4">
-                        {Object.entries(personDetails.external_ids).map(
-                          ([key, value]) => {
-                            if (!(key in externalIdsMap) || !value) {
-                              return null;
-                            }
+                  <div className="flex items-center gap-4 mb-4 mt-4">
+                    <div className="flex items-center gap-2">
+                      <FaTheaterMasks className="text-purple-400" />
+                      <span className="text-xl text-gray-300 font-medium">
+                        {personDetails.known_for_department}
+                      </span>
+                    </div>
 
-                            const { label, icon, url } =
-                              externalIdsMap[
-                                key as keyof typeof externalIdsMap
-                              ];
-                            return (
-                              <a
-                                key={key}
-                                href={url(value as string)}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="flex items-center gap-2 bg-white/10 hover:bg-white/20 px-4 py-2 rounded-xl transition-all duration-300 border border-white/20"
-                              >
-                                {icon}
-                                {label}
-                              </a>
-                            );
-                          }
-                        )}
-                      </div>
+                    <div className="flex items-center gap-2">
+                      <FaStar className="text-yellow-400" />
+                      <span className="text-lg text-gray-300">
+                        {Math.round(personDetails.popularity)} popularność
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* Also known as */}
+                  {personDetails.also_known_as.length > 0 && (
+                    <div className="mb-4">
+                      <p className="text-gray-400 text-sm">
+                        Znany również jako:{" "}
+                        {personDetails.also_known_as.slice(0, 3).join(", ")}
+                      </p>
                     </div>
                   )}
                 </div>
+
+                {/* Personal info */}
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                  {/* Gender */}
+                  <div className="flex items-center gap-2 text-gray-300">
+                    <span className="text-purple-400">Płeć:</span>
+                    <span>{getGenderText(personDetails.gender)}</span>
+                  </div>
+
+                  {/* Birthday */}
+                  {personDetails.birthday && (
+                    <div className="flex items-center gap-2 text-gray-300">
+                      <FaCalendarAlt className="text-purple-400" />
+                      <div className="flex">
+                        <span>{formatDate(personDetails.birthday)}</span>
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Deathday */}
+                  {personDetails.deathday && (
+                    <div className="flex items-center gap-2 text-gray-300">
+                      <FaCalendarAlt className="text-red-400" />
+                      <div className="flex flex-col">
+                        <span className="text-red-300">Data śmierci:</span>
+                        <span>{formatDate(personDetails.deathday)}</span>
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Place of birth */}
+                  {personDetails.place_of_birth && (
+                    <div className="flex items-center gap-2 text-gray-300">
+                      <FaMapMarkerAlt className="text-purple-400" />
+                      <span>{personDetails.place_of_birth}</span>
+                    </div>
+                  )}
+                </div>
+
+                {/* Biography */}
+                {personDetails.biography && (
+                  <div>
+                    <h3 className="text-lg font-semibold mb-3 text-purple-300">
+                      Biografia
+                    </h3>
+                    <div className="text-gray-300 leading-relaxed text-lg space-y-4">
+                      {personDetails.biography
+                        .split("\n\n")
+                        .map((paragraph, index) => (
+                          <p key={index}>{paragraph}</p>
+                        ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* External links */}
+                {personDetails.external_ids && (
+                  <div>
+                    <h3 className="text-lg font-semibold mb-3 text-purple-300">
+                      Linki
+                    </h3>
+                    <div className="flex gap-4">
+                      {Object.entries(personDetails.external_ids).map(
+                        ([key, value]) => {
+                          if (!(key in externalIdsMap) || !value) {
+                            return null;
+                          }
+
+                          const { label, icon, url } =
+                            externalIdsMap[key as keyof typeof externalIdsMap];
+                          return (
+                            <a
+                              key={key}
+                              href={url(value as string)}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="flex items-center gap-2 bg-white/10 hover:bg-white/20 px-4 py-2 rounded-xl transition-all duration-300 border border-white/20"
+                            >
+                              {icon}
+                              {label}
+                            </a>
+                          );
+                        }
+                      )}
+                    </div>
+                  </div>
+                )}
               </div>
             </div>
           </div>
diff --git a/src/components/molecules/Carousel/index.tsx b/src/components/molecules/Carousel/index.tsx
index bbc2fb3..f472101 100644
--- a/src/components/molecules/Carousel/index.tsx
+++ b/src/components/molecules/Carousel/index.tsx
@@ -15,6 +15,7 @@ type Props = {
   heading?: string;
   icon?: ReactNode;
   colors?: keyof typeof colorsMap;
+  fluid?: boolean;
 };
 
 export const Carousel: FC<Props> = ({
@@ -24,6 +25,7 @@ export const Carousel: FC<Props> = ({
   heading,
   icon,
   colors = "yellow",
+  fluid = false,
 }) => {
   const {
     itemsPerView = 4,
@@ -66,17 +68,19 @@ export const Carousel: FC<Props> = ({
   );
 
   return (
-    <div>
-      <div className="flex items-center justify-between mb-8">
+    <div className={`${fluid ? "max-w-full px-4" : "container"}`}>
+      <div className="flex items-center justify-between mb-8 flex-wrap">
         {heading && (
           <div className="flex items-center gap-3">
             {icon && (
-              <div className={`p-2 rounded-lg ${colorsMap[colors]}`}>
+              <div
+                className={`hidden sm:block p-2 rounded-lg ${colorsMap[colors]}`}
+              >
                 {icon}
               </div>
             )}
             <h2
-              className={`text-3xl font-bold ${colorsMap[colors]} bg-clip-text text-transparent`}
+              className={`text-3xl font-bold ${colorsMap[colors]} bg-clip-text text-transparent text-center sm:text-left`}
             >
               {heading}
             </h2>
@@ -84,7 +88,7 @@ export const Carousel: FC<Props> = ({
         )}
 
         {totalPages > 1 && (
-          <div className="flex gap-2">
+          <div className="flex gap-2 mx-auto mt-4 sm:mt-0 sm:mr-0 sm:ml-auto">
             <button
               onClick={prevPage}
               className={`cursor-pointer p-3 rounded-full ${colorsMap[colors]} text-white transition-all duration-300`}
@@ -116,7 +120,7 @@ export const Carousel: FC<Props> = ({
 
       {totalPages > 1 && (
         <div className="flex justify-center mt-8">
-          <div className="flex gap-2">
+          <div className="flex gap-2 flex-wrap justify-center">
             {Array.from({ length: totalPages }, (_, i) => (
               <button
                 key={i}
diff --git a/src/components/molecules/Gallery/index.tsx b/src/components/molecules/Gallery/index.tsx
index bf99b90..940dde9 100644
--- a/src/components/molecules/Gallery/index.tsx
+++ b/src/components/molecules/Gallery/index.tsx
@@ -43,71 +43,69 @@ export const Gallery: FC<Props> = ({
   };
 
   return (
-    <section className="py-16">
-      <div className="px-6 lg:px-8">
-        <div className="max-w-7xl mx-auto">
-          {heading && (
-            <div className="flex items-center gap-3 mb-8">
-              <div className="p-2 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500">
-                <FaImages className="text-white" size={20} />
-              </div>
-              <h2 className="text-3xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
-                {heading}
-              </h2>
+    <section className="blocks">
+      <div className="container">
+        {heading && (
+          <div className="flex items-center gap-3 mb-8">
+            <div className="p-2 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500">
+              <FaImages className="text-white" size={20} />
             </div>
-          )}
-
-          {/* Category tabs */}
-          {categories.length > 0 && (
-            <div className="flex gap-4 mb-8">
-              {Object.entries(images).map(([category, categoryImages]) => {
-                if (!categoryImages.length) return null;
-
-                return (
-                  <button
-                    key={category}
-                    onClick={() =>
-                      setSelectedCategory(category as keyof typeof images)
-                    }
-                    className={`px-6 py-3 rounded-xl font-medium transition-all duration-300 ${
-                      selectedCategory === category
-                        ? "bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-lg"
-                        : "bg-white/10 text-gray-300 hover:bg-white/20 hover:text-white"
-                    }`}
-                  >
-                    {category} ({categoryImages.length})
-                  </button>
-                );
-              })}
-            </div>
-          )}
-
-          {/* Image grid */}
-          <div className={`grid gap-4 grid-auto-cols-160 [&>div]:contents`}>
-            <LightGallery>
-              {currentImages.slice(0, limit).map((image, index) => (
-                <a
-                  key={index}
-                  href={getImageUrl(image.file_path)}
-                  className="group relative overflow-hidden rounded-xl cursor-pointer bg-slate-800"
-                >
-                  <img src={getImageUrl(image.file_path, "w185")} />
-                </a>
-              ))}
-            </LightGallery>
+            <h2 className="text-3xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
+              {heading}
+            </h2>
           </div>
-          {limit < currentImages.length && (
-            <div className="flex justify-center mt-6">
-              <Button
-                theme="teal"
-                size="small"
-                onClick={() => setLimit(currentImages.length)}
+        )}
+
+        {/* Category tabs */}
+        {categories.length > 0 && (
+          <div className="flex gap-4 mb-8">
+            {Object.entries(images).map(([category, categoryImages]) => {
+              if (!categoryImages.length) return null;
+
+              return (
+                <button
+                  key={category}
+                  onClick={() =>
+                    setSelectedCategory(category as keyof typeof images)
+                  }
+                  className={`px-6 py-3 rounded-xl font-medium transition-all duration-300 ${
+                    selectedCategory === category
+                      ? "bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-lg"
+                      : "bg-white/10 text-gray-300 hover:bg-white/20 hover:text-white"
+                  }`}
+                >
+                  {category} ({categoryImages.length})
+                </button>
+              );
+            })}
+          </div>
+        )}
+
+        {/* Image grid */}
+        <div className={`grid gap-4 grid-auto-cols-160 [&>div]:contents`}>
+          <LightGallery>
+            {currentImages.slice(0, limit).map((image, index) => (
+              <a
+                key={index}
+                href={getImageUrl(image.file_path)}
+                className="group relative overflow-hidden rounded-xl cursor-pointer bg-slate-800"
               >
-                Pokaż wszystkie ({currentImages.length - limit})
-              </Button>
-            </div>
-          )}
+                <img src={getImageUrl(image.file_path, "w185")} />
+              </a>
+            ))}
+          </LightGallery>
         </div>
+        {limit < currentImages.length && (
+          <div className="flex justify-center mt-6">
+            <Button
+              theme="teal"
+              size="small"
+              onClick={() => setLimit(currentImages.length)}
+            >
+              Pokaż wszystkie ({currentImages.length - limit})
+            </Button>
+          </div>
+        )}
       </div>
     </section>
   );
diff --git a/src/components/molecules/HeroMovie/index.tsx b/src/components/molecules/HeroMovie/index.tsx
index 61b6930..47f32be 100644
--- a/src/components/molecules/HeroMovie/index.tsx
+++ b/src/components/molecules/HeroMovie/index.tsx
@@ -75,7 +75,7 @@ export const HeroMovie: FC<Props> = ({ movieDetails }) => {
   };
 
   return (
-    <section className="my-16">
+    <section className="blocks">
       <div className="relative">
         {/* Navigation */}
         <div className="absolute top-0 left-0 right-0 z-20 px-6">
@@ -83,8 +83,8 @@ export const HeroMovie: FC<Props> = ({ movieDetails }) => {
         </div>
 
         {/* Main content */}
-        <div className="relative z-10 px-6 lg:px-8">
-          <div className="max-w-7xl mx-auto">
+        <div className="relative z-10">
+          <div className="container">
             <div className="flex flex-col lg:flex-row gap-8">
               {/* Movie poster */}
               <div className="flex-shrink-0">
diff --git a/src/components/molecules/MovieCast/index.tsx b/src/components/molecules/MovieCast/index.tsx
index 4f06541..75a46b0 100644
--- a/src/components/molecules/MovieCast/index.tsx
+++ b/src/components/molecules/MovieCast/index.tsx
@@ -23,14 +23,14 @@ export const MovieCast: FC<Props> = ({ movieDetails }) => {
     }).format(amount);
 
   return (
-    <section className="px-6 lg:px-8 py-16">
-      <div className="max-w-7xl mx-auto">
+    <section className="blocks">
+      <div className="container mx-auto">
         <div className="grid lg:grid-cols-3 gap-12">
           {/* Cast */}
           {mainCast.length > 0 && (
             <div className="lg:col-span-2">
               <h2 className="text-2xl font-bold text-white mb-6">Obsada</h2>
-              <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
                 {mainCast.map((actor) => (
                   <Link
                     key={actor.id}
diff --git a/src/components/molecules/MovieList/index.tsx b/src/components/molecules/MovieList/index.tsx
index ce71044..24a017c 100644
--- a/src/components/molecules/MovieList/index.tsx
+++ b/src/components/molecules/MovieList/index.tsx
@@ -78,8 +78,8 @@ export const MovieList: FC<Props> = ({
   }
 
   return (
-    <section className="my-4 md:my-10">
-      <div className={`${fluid ? "max-w-full" : "container"}`}>
+    <section className="blocks">
+      <div className={`${fluid ? "max-w-full px-4" : "container"}`}>
         {heading && (
           <div className="row">
             <div className="col-12 md:col-10 flex gap-2 items-center">
@@ -103,7 +103,7 @@ export const MovieList: FC<Props> = ({
         )}
         {filteredMovies.length > 0 && (
           <div
-            className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-y-6 gap-3 sm:gap-6 mt-8 justify-center"
+            className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-y-6 gap-3 sm:gap-6 mt-8 justify-center"
             ref={parent}
           >
             {sortedMovies.map((movie) => (
diff --git a/src/components/molecules/RecommendedMovies/index.tsx b/src/components/molecules/RecommendedMovies/index.tsx
index dc05985..29ae02b 100644
--- a/src/components/molecules/RecommendedMovies/index.tsx
+++ b/src/components/molecules/RecommendedMovies/index.tsx
@@ -13,15 +13,20 @@ export const RecommendedMovies: FC<Props> = ({ movies }) => {
   if (!movies.results.length) return null;
 
   return (
-    <section className="py-16 bg-gradient-to-br from-slate-900/50 to-slate-800/50">
-      <div className="px-6 lg:px-8">
-        <div className="max-w-7xl mx-auto">
-          <Carousel
-            heading="Rekomendowane filmy"
-            icon={<FaStar />}
-            colors="yellow"
-          >
-            {movies.results.map((movie) => (
+    <section className="blockp bg-gradient-to-br from-slate-900/50 to-slate-800/50">
+      <div className="container">
+        <Carousel
+          heading="Rekomendowane filmy"
+          icon={<FaStar />}
+          colors="yellow"
+        >
+          {movies.results
+            .sort(
+              (a, b) =>
+                new Date(b.release_date).getTime() -
+                new Date(a.release_date).getTime()
+            )
+            .map((movie) => (
               <MovieCard
                 key={movie.id}
                 layout="aurora"
@@ -43,8 +48,7 @@ export const RecommendedMovies: FC<Props> = ({ movies }) => {
                 favorite={false}
               />
             ))}
-          </Carousel>
-        </div>
+        </Carousel>
       </div>
     </section>
   );
diff --git a/src/components/molecules/SimilarMovies/index.tsx b/src/components/molecules/SimilarMovies/index.tsx
index 747e0c1..0aedc77 100644
--- a/src/components/molecules/SimilarMovies/index.tsx
+++ b/src/components/molecules/SimilarMovies/index.tsx
@@ -32,7 +32,7 @@ export const SimilarMovies: FC<Props> = ({ movies }) => {
   return (
     <section className="py-16">
       <div className="px-6 lg:px-8">
-        <div className="max-w-7xl mx-auto">
+        <div className="container mx-auto">
           <div className="flex items-center justify-between mb-8">
             <h2 className="text-3xl font-bold bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
               Podobne filmy
diff --git a/src/components/organisms/Navbar/components/Search/index.tsx b/src/components/organisms/Navbar/components/Search/index.tsx
index 543fd10..07eef44 100644
--- a/src/components/organisms/Navbar/components/Search/index.tsx
+++ b/src/components/organisms/Navbar/components/Search/index.tsx
@@ -49,16 +49,12 @@ export const Search = () => {
   return (
     <>
       <Button
-        theme="glass"
-        size="small"
+        theme="secondary"
+        size="icon"
         className="group relative"
         onClick={() => setIsSearchOpen(!isSearchOpen)}
       >
-        <IoSearch
-          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>
+        <IoSearch className="text-white" />
       </Button>
 
       {isSearchOpen && (
@@ -71,14 +67,11 @@ export const Search = () => {
           {/* Close button */}
           <Button
             theme="glass"
-            size="small"
+            size="icon"
             className="absolute top-6 right-6 z-10 group hover:!bg-red-500/50"
             onClick={handleClose}
           >
-            <IoClose
-              size={24}
-              className="text-white transition-transform duration-300 group-hover:rotate-90"
-            />
+            <IoClose className="text-white transition-transform duration-300 group-hover:rotate-90" />
           </Button>
 
           <div className="relative min-h-full flex flex-col py-20" ref={ref}>
diff --git a/src/components/organisms/Navbar/index.tsx b/src/components/organisms/Navbar/index.tsx
index f9cb57a..d4b0de8 100644
--- a/src/components/organisms/Navbar/index.tsx
+++ b/src/components/organisms/Navbar/index.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { HiMenuAlt3, HiX, HiSparkles } from "react-icons/hi";
 import { Search } from "./components/Search";
 import { usePathname } from "next/navigation";
+import { Button } from "@/components/atoms/Button";
 
 const links = [
   {
@@ -33,7 +34,7 @@ export const Navbar = () => {
   return (
     <>
       {/* Main Navbar */}
-      <header className="fixed top-0 w-full z-50 transition-all duration-300">
+      <header className="sticky top-0 w-full z-50 transition-all duration-300">
         {/* Aurora background effect */}
         <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>
@@ -43,7 +44,7 @@ export const Navbar = () => {
         <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-purple-400/50 to-transparent"></div>
 
         <div className="relative">
-          <div className="container mx-auto px-4">
+          <div className=" mx-auto px-4 max-w-[1500px]">
             <div className="flex items-center justify-between h-16 lg:h-20">
               {/* Logo */}
               <Link
@@ -95,19 +96,18 @@ export const Navbar = () => {
                 <Search />
 
                 {/* Mobile Menu Button */}
-                <button
+                <Button
+                  theme="glass"
+                  size="icon"
                   onClick={toggleMobileMenu}
-                  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"
+                  className="md:hidden"
                 >
-                  <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>
+                  {isMobileMenuOpen ? (
+                    <HiX className="text-white" />
+                  ) : (
+                    <HiMenuAlt3 className="text-white" />
+                  )}
+                </Button>
               </div>
             </div>
           </div>