Add movie details and cast components: implement Page, HeroMovie, and MovieCast components to display detailed movie information, including cast, genres, and financial data. Integrate new BackButton and GenreLabel components for enhanced navigation and presentation.

src/components/atoms/BackButton/index.tsx

@@ -0,0 +1,24 @@
+"use client";
+import { FaArrowLeft } from "react-icons/fa";
+import { useRouter } from "next/navigation";
+import { FC } from "react";
+
+type Props = {
+  label?: string;
+};
+
+export const BackButton: FC<Props> = ({ label = "Powrót" }) => {
+  const router = useRouter();
+
+  return (
+    <button
+      onClick={() => router.back()}
+      className="flex items-center gap-3 text-white hover:text-purple-300 transition-colors group"
+    >
+      <div className="p-2 rounded-full bg-black/30 group-hover:bg-purple-600/30 transition-colors">
+        <FaArrowLeft size={20} />
+      </div>
+      <span className="font-medium">{label}</span>
+    </button>
+  );
+};

src/components/atoms/GenreLabel/index.tsx

@@ -0,0 +1,13 @@
+import { FC } from "react";
+
+type Props = {
+  genre: string;
+};
+
+export const GenreLabel: FC<Props> = ({ genre }) => {
+  return (
+    <span className="px-3 py-1 bg-gradient-to-r from-purple-600/30 to-pink-600/30 rounded-full text-sm border border-purple-400/30">
+      {genre}
+    </span>
+  );
+};

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

@@ -1,8 +1,9 @@
 "use client";
 import { FC, useState } from "react";
+import Link from "next/link";
 import { MdFavorite } from "react-icons/md";
 import { RxEyeOpen } from "react-icons/rx";
-import { FaFire, FaTrash } from "react-icons/fa";
+import { FaFire, FaTrash, FaInfoCircle } from "react-icons/fa";
 import { RiCalendarCheckLine, RiCalendarScheduleLine } from "react-icons/ri";
 import { Movie } from "@/types/global";
 
@@ -20,6 +21,7 @@ interface AuroraLayoutProps extends Movie {
 }
 
 export const AuroraLayout: FC<AuroraLayoutProps> = ({
+  id,
   title,
   overview,
   popularity,
@@ -202,22 +204,35 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
               </div>
             </div>
 
-            {alreadyInStore && (
-              <div className="flex gap-2">
-                {seen && (
-                  <div
-                    className="w-3 h-3 bg-gradient-to-r from-emerald-400 to-teal-400 rounded-full shadow-lg shadow-emerald-400/50 animate-pulse"
-                    title="Watched"
-                  />
-                )}
-                {favorite && (
-                  <div
-                    className="w-3 h-3 bg-gradient-to-r from-rose-400 to-pink-400 rounded-full shadow-lg shadow-rose-400/50 animate-pulse"
-                    title="Favorite"
-                  />
-                )}
-              </div>
-            )}
+            <div className="flex items-center gap-3">
+              {/* Zobacz więcej button */}
+              <Link
+                href={`/film/${id}`}
+                className="opacity-0 group-hover:opacity-100 transition-all duration-300 transform group-hover:scale-105"
+              >
+                <div className="flex items-center gap-2 bg-gradient-to-r from-purple-600/90 to-pink-600/90 hover:from-purple-500 hover:to-pink-500 px-3 py-2 rounded-lg text-white text-sm font-medium shadow-lg border border-white/10 transition-all duration-300">
+                  <FaInfoCircle size={14} />
+                  <span>Zobacz więcej</span>
+                </div>
+              </Link>
+
+              {alreadyInStore && (
+                <div className="flex gap-2">
+                  {seen && (
+                    <div
+                      className="w-3 h-3 bg-gradient-to-r from-emerald-400 to-teal-400 rounded-full shadow-lg shadow-emerald-400/50 animate-pulse"
+                      title="Watched"
+                    />
+                  )}
+                  {favorite && (
+                    <div
+                      className="w-3 h-3 bg-gradient-to-r from-rose-400 to-pink-400 rounded-full shadow-lg shadow-rose-400/50 animate-pulse"
+                      title="Favorite"
+                    />
+                  )}
+                </div>
+              )}
+            </div>
           </div>
         </div>