feat: add GenreList component for genre exploration and integrate it into Home and Odkrywaj pages; update GenreLabel to support linking by genre ID

src/components/molecules/GenreList/index.tsx

@@ -0,0 +1,62 @@
+import Link from "next/link";
+import { getMovieGenres } from "@/lib/tmdb/server";
+import { Genre } from "@/lib/tmdb/types";
+import { FC } from "react";
+
+type Props = {
+  heading?: string;
+};
+
+// Genre color mappings for visual variety.
+const getGenreStyle = (genreId: number) => {
+  const styles = [
+    "from-purple-600/30 to-pink-600/30 border-purple-400/30 hover:from-purple-500/40 hover:to-pink-500/40 hover:border-purple-300/40 hover:shadow-purple-500/20",
+    "from-cyan-600/30 to-blue-600/30 border-cyan-400/30 hover:from-cyan-500/40 hover:to-blue-500/40 hover:border-cyan-300/40 hover:shadow-cyan-500/20",
+    "from-emerald-600/30 to-teal-600/30 border-emerald-400/30 hover:from-emerald-500/40 hover:to-teal-500/40 hover:border-emerald-300/40 hover:shadow-emerald-500/20",
+    "from-rose-600/30 to-red-600/30 border-rose-400/30 hover:from-rose-500/40 hover:to-red-500/40 hover:border-rose-300/40 hover:shadow-rose-500/20",
+    "from-amber-600/30 to-orange-600/30 border-amber-400/30 hover:from-amber-500/40 hover:to-orange-500/40 hover:border-amber-300/40 hover:shadow-amber-500/20",
+    "from-indigo-600/30 to-purple-600/30 border-indigo-400/30 hover:from-indigo-500/40 hover:to-purple-500/40 hover:border-indigo-300/40 hover:shadow-indigo-500/20",
+  ];
+  return styles[genreId % styles.length];
+};
+
+export const GenreList: FC<Props> = async ({ heading = "Gatunki filmowe" }) => {
+  const { genres } = await getMovieGenres();
+
+  return (
+    <section className="blocks">
+      <div className="container">
+        <h2 className="text-3xl font-bold mb-8 text-center bg-gradient-to-r from-purple-400 via-pink-400 to-cyan-400 bg-clip-text text-transparent">
+          {heading}
+        </h2>
+        <div className="flex flex-wrap gap-4 justify-center">
+          {genres.map((genre: Genre) => (
+            <Link
+              key={genre.id}
+              href={`/odkrywaj/gatunek/${genre.id}`}
+              className={`group relative overflow-hidden rounded-2xl px-4 py-2 text-center 
+                         transition-all duration-500 hover:scale-105 hover:-translate-y-1
+                         bg-gradient-to-br ${getGenreStyle(genre.id)}
+                         border shadow-lg hover:shadow-2xl`}
+            >
+              {/* Subtle aurora glow effect */}
+              <div className="absolute inset-0 bg-gradient-to-br from-white/5 via-transparent to-white/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+
+              {/* Content */}
+              <div className="relative z-10">
+                <span className="text-sm font-semibold text-white/90 group-hover:text-white transition-colors duration-300">
+                  {genre.name}
+                </span>
+              </div>
+            </Link>
+          ))}
+        </div>
+
+        {/* Optional decorative element */}
+        <div className="mt-12 flex justify-center">
+          <div className="w-32 h-px bg-gradient-to-r from-transparent via-purple-400/50 to-transparent" />
+        </div>
+      </div>
+    </section>
+  );
+};

src/components/molecules/HeroMovie/index.tsx

@@ -174,7 +174,11 @@ export const HeroMovie: FC<Props> = ({ movieDetails }) => {
                       </h3>
                       <div className="flex flex-wrap gap-2">
                         {movieDetails.genres.map((genre) => (
-                          <GenreLabel key={genre.id} genre={genre.name} />
+                          <GenreLabel
+                            key={genre.id}
+                            genre={genre.name}
+                            id={genre.id}
+                          />
                         ))}
                       </div>
                     </div>