From f498f2d2177c8ef668d19514b79f147923317861 Mon Sep 17 00:00:00 2001
From: Norbert Maciaszek <norbert@ambiscale.com>
Date: Sun, 17 Aug 2025 23:41:22 +0200
Subject: [PATCH] refactor: enhance movie details and UI components for better
 user experience

---
 src/app/film/[id]/page.tsx                   |  3 --
 src/components/atoms/Button/index.tsx        |  8 +++--
 src/components/molecules/MovieCast/index.tsx | 11 ++++++
 src/components/organisms/Hero/index.tsx      | 38 ++++++++++----------
 4 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/src/app/film/[id]/page.tsx b/src/app/film/[id]/page.tsx
index 95b0493..9a66754 100644
--- a/src/app/film/[id]/page.tsx
+++ b/src/app/film/[id]/page.tsx
@@ -1,11 +1,8 @@
 import { HeroMovie } from "@/components/molecules/HeroMovie";
 import { MovieCast } from "@/components/molecules/MovieCast";
-import { SimilarMovies } from "@/components/molecules/SimilarMovies";
 import { RecommendedMovies } from "@/components/molecules/RecommendedMovies";
-import { MovieGallery } from "@/components/molecules/MovieGallery";
 import { TMDB } from "@/lib/tmdb";
 
-// Main movie details component.
 export default async function Page({
   params,
 }: {
diff --git a/src/components/atoms/Button/index.tsx b/src/components/atoms/Button/index.tsx
index 1b3fd68..4721f45 100644
--- a/src/components/atoms/Button/index.tsx
+++ b/src/components/atoms/Button/index.tsx
@@ -31,7 +31,7 @@ export const Button: FC<Props> = ({
 
   return (
     <Component
-      className={`block 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-all duration-300 hover:scale-105 
         bg-gradient-to-r ${buttonColor?.from} ${buttonColor?.to} cursor-pointer ${sizes[size]} ${className}`}
       onClick={onClick}
       {...(href && { href })}
@@ -49,9 +49,13 @@ const sizes = {
 
 const colors = {
   primary: {
-    from: "from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500",
+    from: "from-purple-600 hover:from-purple-500",
     to: "to-emerald-600 hover:to-emerald-500",
   },
+  secondary: {
+    from: "from-purple-600 hover:from-purple-500",
+    to: "to-pink-600 hover:to-pink-500",
+  },
   glass: {
     from: "from-white/15 via-white/8 to-white/12",
     to: "to-white/15 hover:to-white/10",
diff --git a/src/components/molecules/MovieCast/index.tsx b/src/components/molecules/MovieCast/index.tsx
index 5ae5ee6..4a48889 100644
--- a/src/components/molecules/MovieCast/index.tsx
+++ b/src/components/molecules/MovieCast/index.tsx
@@ -86,6 +86,17 @@ export const MovieCast: FC<Props> = ({ movieDetails }) => {
                       </span>
                     </div>
                   )}
+                  {movieDetails.budget > 0 && movieDetails.revenue > 0 && (
+                    <div className="flex items-center gap-2">
+                      <FaDollarSign className="text-green-400" />
+                      <span className="text-gray-400">Zysk:</span>
+                      <span className="text-white">
+                        {formatCurrency(
+                          movieDetails.revenue - movieDetails.budget
+                        )}
+                      </span>
+                    </div>
+                  )}
                 </div>
               </div>
             )}
diff --git a/src/components/organisms/Hero/index.tsx b/src/components/organisms/Hero/index.tsx
index 4bc6354..2a383d6 100644
--- a/src/components/organisms/Hero/index.tsx
+++ b/src/components/organisms/Hero/index.tsx
@@ -12,6 +12,8 @@ import { RiCalendarCheckLine, RiCalendarScheduleLine } from "react-icons/ri";
 import { useGlobalStore } from "@/app/store/globalStore";
 import { addMovie, deleteMovie } from "@/lib/db";
 import { ReadMore } from "@/components/atoms/ReadMore";
+import Link from "next/link";
+import { Button } from "@/components/atoms/Button";
 
 type Props = {
   movies: Movie[];
@@ -153,11 +155,13 @@ export const Hero: FC<Props> = ({
         >
           {/* Poster */}
           <div className="flex-shrink-0">
-            <img
-              src={`http://image.tmdb.org/t/p/w500${poster_path}`}
-              alt={title}
-              className="w-64 h-96 object-cover rounded-lg shadow-2xl"
-            />
+            <Link href={`/film/${id}`}>
+              <img
+                src={`http://image.tmdb.org/t/p/w500${poster_path}`}
+                alt={title}
+                className="w-64 h-96 object-cover rounded-lg shadow-2xl hover:scale-105 transition-transform duration-300"
+              />
+            </Link>
           </div>
 
           {/* Movie details */}
@@ -167,8 +171,8 @@ export const Hero: FC<Props> = ({
                 {preheading}
               </h3>
             )}
-            <h2 className="text-4xl lg:text-6xl font-bold text-white mb-4 leading-tight">
-              {title}
+            <h2 className="text-4xl lg:text-6xl font-bold text-white mb-4 leading-tight hover:text-secondary transition-colors duration-300">
+              <Link href={`/film/${id}`}>{title}</Link>
             </h2>
 
             {/* Movie meta info */}
@@ -204,23 +208,21 @@ export const Hero: FC<Props> = ({
             </div>
 
             {/* Overview */}
-            <div className="text-lg lg:text-xl text-white/90 mb-8 max-w-2xl leading-relaxed">
-              <ReadMore text={overview} />
-            </div>
+            <p className="text-lg lg:text-xl text-white/90 mb-8 max-w-2xl leading-relaxed line-clamp-3 hover:text-secondary transition-all duration-300">
+              <Link href={`/film/${id}`}>{overview}</Link>
+            </p>
 
             {/* Action buttons */}
             <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
-              <button
+              <Button
+                theme={alreadyInStore ? "primary" : "secondary"}
                 onClick={alreadyInStore ? handleRemove : handleAdd}
-                className={`flex items-center justify-center gap-3 px-8 py-3 rounded-lg font-semibold text-lg text-white transition-colors cursor-pointer ${
-                  alreadyInStore
-                    ? "bg-red-500 hover:bg-red-600"
-                    : "bg-primary hover:bg-primary/80"
-                }`}
               >
                 {alreadyInStore ? <FaMinus /> : <FaPlus />}
-                {alreadyInStore ? "Usuń z listy" : "Dodaj do listy"}
-              </button>
+                <span>
+                  {alreadyInStore ? "Usuń z listy" : "Dodaj do listy"}
+                </span>
+              </Button>
             </div>
           </div>
         </div>