Enhance MovieCard component: add simpleToggle prop to conditionally render favorite button and update vote average display logic for improved user experience. Update Hero component styles for better visual consistency.

src/components/atoms/MovieCard/index.tsx

@@ -13,6 +13,7 @@ import { RiCalendarCheckLine, RiCalendarScheduleLine } from "react-icons/ri";
 type Props = Movie & {
   layout?: "default" | "zeus";
   showDayCounter?: boolean;
+  simpleToggle?: boolean;
 };
 
 const buttonClass =
@@ -21,6 +22,7 @@ const buttonClass =
 export const MovieCard: FC<Props> = ({
   layout = "default",
   showDayCounter = true,
+  simpleToggle = false,
   ...movie
 }) => {
   const {
@@ -93,7 +95,7 @@ export const MovieCard: FC<Props> = ({
             {alreadyInStore && (
               <div className="flex flex-col">
                 <>
-                  {isReleased && (
+                  {isReleased && !simpleToggle && (
                     <button
                       className={`${buttonClass} text-white`}
                       onClick={handleSeen}
@@ -115,25 +117,27 @@ export const MovieCard: FC<Props> = ({
                     </button>
                   )}
 
-                  <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>
+                  {!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`}
@@ -153,16 +157,17 @@ export const MovieCard: FC<Props> = ({
           </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>
-
-            {!!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] ${
               isReleased ? "text-green-700" : "text-yellow-500"

src/components/organisms/Hero/index.tsx

@@ -237,7 +237,7 @@ export const Hero: FC<Props> = ({
               className={`w-3 h-3 rounded-full transition-all duration-300 disabled:cursor-not-allowed cursor-pointer ${
                 index === currentIndex
                   ? "bg-secondary scale-125"
-                  : "bg-secondary/50 hover:bg-secondary/70"
+                  : "bg-white/50 hover:bg-secondary/70"
               }`}
             />
           ))}

src/lib/tmdb/server.ts

@@ -27,6 +27,7 @@ export async function search(options: SearchOptions): Promise<SearchResult> {
   const params = new URLSearchParams();
 
   options.language = "pl-PL";
+  options.region = "PL";
 
   Object.entries(options).forEach(([key, value]) => {
     if (value) {
@@ -47,10 +48,14 @@ 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(
+  page: number = 1
+): Promise<SearchResult> {
+  return await fetchTmbd(
+    `/movie/now_playing?language=pl-PL&region=PL&page=${page}`
+  );
 }
 
-export async function getNowPlayingMovies(): Promise<SearchResult> {
-  return await fetchTmbd("/movie/now_playing?language=pl-PL&region=PL");
+export async function getUpcomingMovies(): Promise<SearchResult> {
+  return await fetchTmbd("/movie/upcoming?language=pl-PL&region=PL");
 }