Refactor homepage layout and add new "Odkrywaj" page: remove "O mnie" page, update Navbar links, and implement new page for displaying trending movies with a Hero component for enhanced user experience.

src/app/(withGlobalData)/layout.tsx

@@ -13,9 +13,7 @@ export default async function WithGlobalDataLayout({
   return (
     <GlobalStoreProvider initialMovies={movies}>
       <Navbar />
-      <main className="py-10 [&>:first-child]:mt-0 [&>:last-child]:mb-0">
+      <main className="[&>:last-child]:mb-0">{children}</main>
-        {children}
-      </main>
     </GlobalStoreProvider>
   );
 }

src/app/(withGlobalData)/o-mnie/page.tsx

@@ -1,21 +0,0 @@
-import { MovieList } from "@/components/molecules/MovieList";
-
-export default async function Home() {
-  return (
-    <>
-      <MovieList
-        heading="Nadchodzące"
-        filterUpcoming={1}
-        sortDirection="desc"
-      />
-      <MovieList
-        heading="Do obejrzenia"
-        filterReleased={1}
-        filterSeen={0}
-        filterFavorites={0}
-      />
-      <MovieList heading="Obejrzane" filterSeen={1} />
-      <MovieList heading="Ulubione" filterFavorites={1} />
-    </>
-  );
-}

src/app/(withGlobalData)/odkrywaj/page.tsx

@@ -0,0 +1,31 @@
+import { getNowPlayingMovies } from "@/lib/tmdb/server";
+import { Hero } from "@/components/organisms/Hero";
+
+// 12 hours
+export const revalidate = 43200;
+
+export default async function Home() {
+  // Get trending movies and popular movies for hero carousel.
+  const data = await getNowPlayingMovies();
+
+  // Combine first 3 trending and first 2 popular movies for variety.
+  const dataRaw = data.results.slice(0, 5);
+
+  // Convert TMDB movie format to our Movie type.
+  const heroMovies = dataRaw.map((movie) => ({
+    ...movie,
+    genre_ids: JSON.stringify(movie.genre_ids),
+    seen: false,
+    favorite: false,
+  }));
+
+  return (
+    <>
+      <Hero movies={heroMovies} autoRotate />
+      <div className="container py-16">
+        <h2 className="text-3xl font-bold text-white mb-8">Popularne filmy</h2>
+        {/* Add other homepage content here */}
+      </div>
+    </>
+  );
+}

src/app/(withGlobalData)/page.tsx

@@ -1,7 +1,21 @@
+import { MovieList } from "@/components/molecules/MovieList";
+
 export default async function Home() {
   return (
     <>
-      <h1>Strona główna</h1>
+      <MovieList
+        heading="Nadchodzące"
+        filterUpcoming={1}
+        sortDirection="desc"
+      />
+      <MovieList
+        heading="Do obejrzenia"
+        filterReleased={1}
+        filterSeen={0}
+        filterFavorites={0}
+      />
+      <MovieList heading="Obejrzane" filterSeen={1} />
+      <MovieList heading="Ulubione" filterFavorites={1} />
     </>
   );
 }

src/components/atoms/MovieCard/index.tsx

@@ -29,7 +29,15 @@ export const MovieCard: FC<Props> = ({
     deleteMovie: deleteMovieFromStore,
     updateMovie: updateMovieInStore,
   } = useGlobalStore();
-  const { id, title, overview, popularity, release_date, poster_path } = movie;
+  const {
+    id,
+    title,
+    overview,
+    popularity,
+    release_date,
+    poster_path,
+    vote_average,
+  } = movie;
   const alreadyInStore = movies.find((m) => m.id === id);
 
   const isReleased = new Date(release_date) < new Date();
@@ -147,6 +155,13 @@ export const MovieCard: FC<Props> = ({
         <div className="p-4">
           <div className="flex justify-between">
             <h2 className="text-xl leading-[1.1] font-bold">{title}</h2>
+
+            {!!vote_average && (
+              <p className="flex items-center gap-1 text-sm">
+                <span className="text-yellow-400">★</span>
+                <span>{vote_average.toFixed(1)}/10</span>
+              </p>
+            )}
           </div>
           <p
             className={`text-sm mt-2 flex items-center gap-1 leading-[1.1] ${

src/components/organisms/Navbar/index.tsx

@@ -3,12 +3,8 @@ import { Search } from "./components/Search";
 
 const links = [
   {
-    label: "O mnie",
+    label: "Odkrywaj",
-    href: "/o-mnie",
+    href: "/odkrywaj",
-  },
-  {
-    label: "Odkryj",
-    href: "/discover",
   },
 ];
 

src/lib/tmdb/server.ts

@@ -36,3 +36,21 @@ export async function search(options: SearchOptions): Promise<SearchResult> {
 
   return await fetchTmbd(`/search/movie?${params.toString()}`);
 }
+
+export async function getPopularMovies(
+  page: number = 1
+): Promise<SearchResult> {
+  return await fetchTmbd(`/movie/popular?language=pl-PL&page=${page}`);
+}
+
+export async function getTrendingMovies(): Promise<SearchResult> {
+  return await fetchTmbd("/trending/movie/day?language=pl-PL");
+}
+
+export async function getUpcomingMovies(): Promise<SearchResult> {
+  return await fetchTmbd("/movie/upcoming?language=pl-PL");
+}
+
+export async function getNowPlayingMovies(): Promise<SearchResult> {
+  return await fetchTmbd("/movie/now_playing?language=pl-PL&region=PL");
+}