fix: improve Button component and replace HTML

src/components/atoms/Button/index.tsx

@@ -1,12 +1,19 @@
 import Link from "next/link";
 import { FC } from "react";
 
+type Theme = keyof typeof colors;
+
 type Props = {
   children: React.ReactNode;
   className?: string;
-  theme?: "primary" | "glass";
+  theme?: Theme;
+  size?: "small" | "medium" | "large";
   onClick?: () => void;
   href?: string;
+  gradient?: {
+    from: string;
+    to: string;
+  };
 };
 
 export const Button: FC<Props> = ({
@@ -14,13 +21,18 @@ export const Button: FC<Props> = ({
   className = "",
   onClick,
   href,
+  size = "medium",
   theme = "primary",
+  gradient,
 }) => {
   const Component = (href ? Link : "button") as any;
 
+  const buttonColor = gradient ?? colors[theme];
+
   return (
     <Component
-      className={`${styles[theme]} cursor-pointer ${className}`}
+      className={`block 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 })}
     >
@@ -29,9 +41,39 @@ export const Button: FC<Props> = ({
   );
 };
 
-const styles = {
-  primary:
-    "block relative bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white px-8 py-4 rounded-xl font-semibold text-lg shadow-2xl transition-all duration-300 hover:scale-105",
-  glass:
-    "p-3 rounded-xl bg-gradient-to-br from-white/15 via-white/8 to-white/12 border border-white/20 transition-all duration-300 hover:bg-gradient-to-br hover:from-white/25 hover:to-white/15 hover:scale-105 shadow-lg shadow-black/20",
+const sizes = {
+  small: "px-4 py-2 text-sm",
+  medium: "px-8 py-4 text-lg",
+  large: "px-12 py-6 text-xl",
+};
+
+const colors = {
+  primary: {
+    from: "from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500",
+    to: "to-emerald-600 hover:to-emerald-500",
+  },
+  glass: {
+    from: "from-white/15 via-white/8 to-white/12",
+    to: "to-white/15 hover:to-white/10",
+  },
+  rose: {
+    from: "from-rose-600/90 hover:from-rose-500/90",
+    to: "to-pink-600/90 hover:to-pink-500/90",
+  },
+  emerald: {
+    from: "from-emerald-600/90 hover:from-emerald-500/90",
+    to: "to-teal-600/90 hover:to-teal-500/90",
+  },
+  purple: {
+    from: "from-purple-600/90 hover:from-purple-500/90",
+    to: "to-pink-600/90 hover:to-pink-500/90",
+  },
+  pink: {
+    from: "from-pink-600/90 hover:from-pink-500/90",
+    to: "to-emerald-600/90 hover:to-emerald-500/90",
+  },
+  teal: {
+    from: "from-teal-600/90 hover:from-teal-500/90",
+    to: "to-emerald-600/90 hover:to-emerald-500/90",
+  },
 };

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

@@ -1,11 +1,11 @@
 "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, FaInfoCircle } from "react-icons/fa";
 import { RiCalendarCheckLine, RiCalendarScheduleLine } from "react-icons/ri";
 import { Movie } from "@/types/global";
+import { Button } from "../../Button";
 
 interface AuroraLayoutProps extends Movie {
   showDayCounter?: boolean;
@@ -153,13 +153,13 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
           {/* Magical action overlay */}
           {!alreadyInStore && (
             <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-purple-900/40 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-500 flex items-center justify-center">
-              <button
+              <Button
+                theme="primary"
                 onClick={handleAdd}
-                className="relative overflow-hidden bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white px-8 py-4 rounded-2xl font-semibold text-lg shadow-2xl transform hover:scale-105 transition-all duration-300 group/btn"
+                className="relative overflow-hidden"
               >
                 <span className="relative z-10">Dodaj do listy</span>
-                <div className="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 group-hover/btn:opacity-100 transition-opacity duration-300"></div>
-              </button>
+              </Button>
             </div>
           )}
         </figure>
@@ -225,15 +225,15 @@ export const AuroraLayout: FC<AuroraLayoutProps> = ({
           </div>
 
           {/* Zobacz więcej button */}
-          <Link
+          <Button
+            theme="teal"
+            size="small"
             href={`/film/${id}`}
-            className="transform hover:scale-105 transition-all duration-300 mt-4 flex justify-center"
+            className="transform hover:scale-105 transition-all duration-300 mt-4 flex justify-center items-center gap-2"
           >
-            <div className="inline-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>
+            <FaInfoCircle size={14} />
+            <span>Zobacz więcej</span>
+          </Button>
         </div>
 
         {/* Decorative border glow */}