refactor: remove blur effects from AuroraBackground and various components for improved performance and visual clarity

src/app/odkrywaj/page.tsx

@@ -5,15 +5,8 @@ import {
   getUpcomingMovies,
 } from "@/lib/tmdb/server";
 import { Hero } from "@/components/organisms/Hero";
-import { Carousel } from "@/components/molecules/Carousel";
+import { FaCalendar, FaChartLine, FaFire, FaPlay } from "react-icons/fa";
-import { MovieCard } from "@/components/atoms/MovieCard";
+import { MovieList } from "@/components/molecules/MovieList";
-import {
-  FaCalendar,
-  FaChartLine,
-  FaFire,
-  FaPlay,
-  FaStar,
-} from "react-icons/fa";
 
 // 12 hours
 export const revalidate = 43200;
@@ -48,39 +41,43 @@ export default async function Home() {
       <Hero movies={heroMovies} autoRotate />
 
       <section className="blocks">
-        <Carousel heading="Teraz w kinach" icon={<FaPlay />}>
+        <MovieList
-          {nowPlayingMovies.map((movie) => (
+          overrideMovies={nowPlayingMovies}
-            <MovieCard key={movie.id} {...movie} simpleToggle layout="aurora" />
+          heading="Teraz w kinach"
-          ))}
+          loadMore
-        </Carousel>
+          icon={<FaPlay />}
+          colors="blue"
+        />
       </section>
 
       <section className="blocks">
-        <Carousel
+        <MovieList
+          overrideMovies={upcomingMovies}
           heading="Nadchodzące filmy"
+          loadMore
           icon={<FaCalendar />}
           colors="blue"
-        >
+        />
-          {upcomingMovies.map((movie) => (
-            <MovieCard key={movie.id} {...movie} simpleToggle layout="aurora" />
-          ))}
-        </Carousel>
       </section>
 
       <section className="blocks">
-        <Carousel heading="Popularne filmy" icon={<FaFire />} colors="red">
+        <MovieList
-          {popularMovies.map((movie) => (
+          overrideMovies={popularMovies}
-            <MovieCard key={movie.id} {...movie} simpleToggle layout="aurora" />
+          heading="Popularne filmy"
-          ))}
+          loadMore
-        </Carousel>
+          icon={<FaFire />}
+          colors="red"
+        />
       </section>
 
       <section className="blocks">
-        <Carousel heading="Trendy dnia" icon={<FaChartLine />} colors="green">
+        <MovieList
-          {trendingMovies.map((movie) => (
+          overrideMovies={trendingMovies}
-            <MovieCard key={movie.id} {...movie} simpleToggle layout="aurora" />
+          heading="Trendy dnia"
-          ))}
+          loadMore
-        </Carousel>
+          icon={<FaChartLine />}
+          colors="green"
+        />
       </section>
 
       <div className="p-2 text-center text-xs text-gray-500">

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

@@ -49,23 +49,13 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
 
   return (
     <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>
-
       {/* 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">
-        <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
+        <figure className="relative overflow-hidden aspect-[4/3] lg:aspect-[342/513]">
-          className="relative overflow-hidden"
-          style={{
-            aspectRatio: "342/513",
-          }}
-        >
           <Link href={`/film/${id}`}>
             <img
-              className="w-full h-full object-cover transition-all duration-700 group-hover:scale-110 group-hover:brightness-110 bg-gradient-to-b from-purple-600/50 to-emerald-600"
+              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}
             />
@@ -73,7 +63,6 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
 
           {/* 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" />
-          <div className="absolute inset-0 bg-gradient-to-r from-purple-600/20 via-transparent to-cyan-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
 
           {/* Floating rating badge */}
           {!!vote_average && (
@@ -158,15 +147,12 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
 
         {/* Content section with glowing effects */}
         <div className="relative p-6 flex flex-col justify-between">
-          {/* Subtle glow effect */}
-          <div className="absolute inset-0 bg-gradient-to-t from-purple-500/5 to-transparent pointer-events-none"></div>
-
           <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 group-hover:opacity-100 transition-colors duration-300 hover:text-secondary">
+              <p className="text-sm text-gray-400 line-clamp-2 leading-relaxed opacity-80 transition-colors duration-300 hover:text-secondary">
                 {overview}
               </p>
             </Link>

src/components/effects/AuroraBackground.tsx

@@ -7,19 +7,19 @@ export const AuroraBackground = () => {
       {/* Static aurora effects */}
       <div className="absolute inset-0 opacity-40">
         {/* Top-left aurora glow */}
-        <div className="absolute top-0 left-0 w-96 h-96 bg-gradient-radial from-purple-500/20 via-purple-500/5 to-transparent blur-3xl"></div>
+        <div className="absolute top-0 left-0 w-96 h-96 bg-gradient-radial from-purple-500/20 via-purple-500/5 to-transparent"></div>
 
         {/* Top-right aurora glow */}
-        <div className="absolute top-20 right-0 w-80 h-80 bg-gradient-radial from-cyan-500/15 via-cyan-500/3 to-transparent blur-3xl"></div>
+        <div className="absolute top-20 right-0 w-80 h-80 bg-gradient-radial from-cyan-500/15 via-cyan-500/3 to-transparent"></div>
 
         {/* Center aurora wave */}
-        <div className="absolute top-1/3 left-1/3 w-[600px] h-40 bg-gradient-to-r from-transparent via-pink-500/10 to-transparent blur-2xl transform rotate-12"></div>
+        <div className="absolute top-1/3 left-1/3 w-[600px] h-40 bg-gradient-to-r from-transparent via-pink-500/10 to-transparent transform rotate-12"></div>
 
         {/* Bottom aurora glow */}
-        <div className="absolute bottom-0 left-1/4 w-96 h-64 bg-gradient-radial from-teal-500/15 via-teal-500/3 to-transparent blur-3xl"></div>
+        <div className="absolute bottom-0 left-1/4 w-96 h-64 bg-gradient-radial from-teal-500/15 via-teal-500/3 to-transparent"></div>
 
         {/* Right side accent */}
-        <div className="absolute top-1/2 right-20 w-32 h-96 bg-gradient-to-b from-transparent via-purple-400/8 to-transparent blur-2xl transform -rotate-12"></div>
+        <div className="absolute top-1/2 right-20 w-32 h-96 bg-gradient-to-b from-transparent via-purple-400/8 to-transparent transform -rotate-12"></div>
       </div>
 
       {/* Gradient mesh overlay for content readability */}

src/components/molecules/HeroMovie/index.tsx

@@ -87,12 +87,12 @@ export const HeroMovie: FC<Props> = ({ movieDetails }) => {
           <div className="container">
             <div className="flex flex-col lg:flex-row gap-8">
               {/* Movie poster */}
-              <div className="flex-shrink-0">
+              <div className="flex-shrink-0 text-center">
-                <div className="relative group">
+                <div className="relative group inline-block">
                   <img
                     src={`https://image.tmdb.org/t/p/w500${movieDetails.poster_path}`}
                     alt={movieDetails.title}
-                    className="w-80 h-auto rounded-2xl shadow-2xl shadow-purple-500/20 group-hover:shadow-purple-500/40 transition-all duration-500"
+                    className="w-80 h-auto rounded-2xl shadow-2xl shadow-purple-500/20"
                   />
                   <div className="absolute inset-0 rounded-2xl bg-gradient-to-t from-purple-600/20 to-transparent opacity-100" />
                 </div>

src/components/molecules/MovieCast/index.tsx

@@ -54,7 +54,7 @@ export const MovieCast: FC<Props> = ({ movieDetails }) => {
 
                       {/* Hover overlay with link indication */}
                       <div className="absolute inset-0 bg-purple-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
-                        <div className="bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-white text-sm font-medium">
+                        <div className="bg-white/20 px-3 py-1 rounded-full text-white text-sm font-medium">
                           Zobacz profil
                         </div>
                       </div>

src/components/molecules/MovieList/index.tsx

@@ -1,13 +1,17 @@
 "use client";
-import { FC, useState } from "react";
+import { FC, ReactNode, useState } from "react";
 import { MovieCard } from "@/components/atoms/MovieCard";
 import { Movie } from "@/types/global";
 import { useGlobalStore } from "@/app/store/globalStore";
 import { Dropdown } from "@/components/atoms/Dropdown";
 import { useAutoAnimate } from "@formkit/auto-animate/react";
+import { Button } from "@/components/atoms/Button";
 
 type Props = {
   heading?: string;
+  icon?: ReactNode;
+  colors?: keyof typeof colorsMap;
+
   overrideMovies?: Movie[];
 
   filterSeen?: 0 | 1;
@@ -19,10 +23,14 @@ type Props = {
   showFilters?: boolean;
   sort?: "title" | "releaseDate" | "popularity";
   sortDirection?: "asc" | "desc";
+
+  loadMore?: boolean;
 };
 
 export const MovieList: FC<Props> = ({
   heading,
+  icon,
+  colors = "white",
   overrideMovies,
   filterSeen,
   filterFavorites,
@@ -32,15 +40,17 @@ export const MovieList: FC<Props> = ({
   showFilters = true,
   sort = "releaseDate",
   sortDirection = "asc",
+  loadMore = false,
 }) => {
   const { movies: storeMovies } = useGlobalStore();
+  const movies = overrideMovies || storeMovies;
+
   const [filter, setFilter] = useState<"title" | "releaseDate" | "popularity">(
     sort
   );
+  const [loaded, setLoaded] = useState(loadMore ? 4 : movies.length);
   const [parent] = useAutoAnimate();
 
-  const movies = overrideMovies || storeMovies;
-
   const filteredMovies = movies.filter((movie) => {
     let result = true;
     const today = new Date();
@@ -73,6 +83,8 @@ export const MovieList: FC<Props> = ({
     return 0;
   });
 
+  sortedMovies = sortedMovies.slice(0, loaded);
+
   if (sortDirection === "desc") {
     sortedMovies = sortedMovies.reverse();
   }
@@ -81,21 +93,30 @@ export const MovieList: FC<Props> = ({
     <section className="blocks">
       <div className={`${fluid ? "max-w-full px-4" : "container"}`}>
         {heading && (
-          <div className="row">
+          <div className="flex items-center gap-3">
-            <div className="col-12 md:col-10 flex gap-2 items-center">
+            {icon && (
-              {showFilters && (
+              <div
-                <Dropdown
+                className={`hidden sm:block p-2 rounded-lg ${colorsMap[colors]}`}
-                  items={[
+              >
-                    { label: "Tytuł", value: "title" },
+                {icon}
-                    { label: "Data premiery", value: "releaseDate" },
+              </div>
-                    { label: "Popularność", value: "popularity" },
+            )}
-                  ]}
+            {showFilters && !icon && (
-                  defaultValue={filter}
+              <Dropdown
-                  callback={(value) => setFilter(value as "title")}
+                items={[
-                />
+                  { label: "Tytuł", value: "title" },
-              )}
+                  { label: "Data premiery", value: "releaseDate" },
-              <h2 className="text-2xl font-bold">{heading}</h2>
+                  { label: "Popularność", value: "popularity" },
-            </div>
+                ]}
+                defaultValue={filter}
+                callback={(value) => setFilter(value as "title")}
+              />
+            )}
+            <h2
+              className={`text-3xl font-bold ${colorsMap[colors]} bg-clip-text text-transparent text-center sm:text-left`}
+            >
+              {heading}
+            </h2>
           </div>
         )}
         {filteredMovies.length === 0 && (
@@ -111,7 +132,27 @@ export const MovieList: FC<Props> = ({
             ))}
           </div>
         )}
+        {loadMore && filteredMovies.length > loaded && (
+          <div className="flex justify-center mt-10">
+            <Button theme="teal" onClick={() => setLoaded(movies.length)}>
+              Pokaż więcej
+            </Button>
+          </div>
+        )}
       </div>
     </section>
   );
 };
+
+const colorsMap = {
+  white: "bg-gradient-to-r from-white to-gray-300",
+  yellow: "bg-gradient-to-r from-yellow-400 to-orange-400",
+  blue: "bg-gradient-to-r from-blue-400 to-purple-400",
+  green: "bg-gradient-to-r from-green-400 to-teal-400",
+  red: "bg-gradient-to-r from-red-400 to-pink-400",
+  purple: "bg-gradient-to-r from-purple-400 to-pink-400",
+  orange: "bg-gradient-to-r from-orange-400 to-yellow-400",
+  pink: "bg-gradient-to-r from-pink-400 to-purple-400",
+  teal: "bg-gradient-to-r from-teal-400 to-green-400",
+  gray: "bg-gradient-to-r from-gray-400 to-gray-400",
+};

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

@@ -60,9 +60,7 @@ export const Search = () => {
       {isSearchOpen && (
         <div className="fixed inset-0 z-[60] overflow-y-auto">
           {/* Aurora Background */}
-          <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-purple-900/98 via-blue-900/98 to-teal-900/98 brightness-75"></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
@@ -87,7 +85,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="absolute inset-0 bg-gradient-to-r from-purple-500/30 to-cyan-500/30 rounded-2xl"></div>
                   <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"
@@ -104,7 +102,7 @@ export const Search = () => {
                 <div className="text-center py-20">
                   <div className="relative inline-block">
                     <Spinner />
-                    <div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-cyan-400 rounded-full opacity-30 blur-lg animate-pulse"></div>
+                    <div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-cyan-400 rounded-full opacity-30 animate-pulse"></div>
                   </div>
                   <p className="text-gray-300 mt-4 text-lg">Szukam filmów...</p>
                 </div>

src/components/organisms/Navbar/index.tsx

@@ -37,8 +37,6 @@ export const Navbar = () => {
       <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>
-        <div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 via-transparent to-cyan-500/10"></div>
 
         {/* Border glow */}
         <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-purple-400/50 to-transparent"></div>
@@ -57,7 +55,7 @@ export const Navbar = () => {
                     alt="MovieBox"
                     className="w-10 h-10 lg:w-12 lg:h-12 transition-all duration-300 group-hover:brightness-110"
                   />
-                  <div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-cyan-400 rounded-full opacity-0 group-hover:opacity-20 transition-opacity duration-300 blur-md"></div>
+                  <div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-cyan-400 rounded-full opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
                 </div>
                 <div className="hidden sm:block">
                   <h1 className="text-xl lg:text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-300 group-hover:from-purple-200 group-hover:to-cyan-200 transition-all duration-300">