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 */}

src/components/molecules/HeroMovie/index.tsx

@@ -201,22 +201,27 @@ export const HeroMovie: FC<Props> = ({ movieDetails }) => {
                   {/* Action buttons */}
                   <div className="flex gap-4 flex-wrap">
                     <Button
-                      className={`flex items-center gap-3 ${
+                      gradient={
                         isInStore
-                          ? "bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-500 hover:to-teal-500"
-                          : ""
-                      }`}
+                          ? {
+                              from: "from-purple-600 hover:from-purple-500",
+                              to: "to-emerald-600 hover:to-emerald-500",
+                            }
+                          : {
+                              from: "from-purple-600 hover:from-purple-500",
+                              to: "to-pink-600 hover:to-pink-500",
+                            }
+                      }
+                      className={`flex items-center gap-3`}
                       onClick={handleAddToList}
                     >
                       <FaBookmark />
                       {isInStore ? "Usuń z listy" : "Dodaj do listy"}
                     </Button>
                     <Button
-                      theme="glass"
+                      theme={isFavorite ? "rose" : "glass"}
                       className={`flex items-center gap-3 ${
-                        isFavorite
-                          ? "bg-gradient-to-r from-rose-600/90 to-pink-600/90 hover:from-rose-500/90 hover:to-pink-500/90 border-rose-400/30"
-                          : ""
+                        isFavorite ? "bg-gradient-to-r border-rose-400/30" : ""
                       }`}
                       onClick={handleToggleFavorite}
                     >
@@ -224,11 +229,9 @@ export const HeroMovie: FC<Props> = ({ movieDetails }) => {
                       {isFavorite ? "Usuń z ulubionych" : "Dodaj do ulubionych"}
                     </Button>
                     <Button
-                      theme="glass"
+                      theme={isSeen ? "emerald" : "glass"}
                       className={`flex items-center gap-3 ${
-                        isSeen
-                          ? "bg-gradient-to-r from-emerald-600/90 to-teal-600/90 hover:from-emerald-500/90 hover:to-teal-500/90 border-emerald-400/30"
-                          : ""
+                        isSeen ? "bg-gradient-to-r border-emerald-400/30" : ""
                       }`}
                       onClick={handleToggleSeen}
                     >

src/components/molecules/RecommendedMovies/index.tsx

@@ -39,7 +39,7 @@ export const RecommendedMovies: FC<Props> = ({ movies }) => {
                 <FaStar className="text-white" size={20} />
               </div>
               <h2 className="text-3xl font-bold bg-gradient-to-r from-yellow-400 to-orange-400 bg-clip-text text-transparent">
-                Podobne filmy
+                Rekomendowane filmy
               </h2>
             </div>
 

src/components/organisms/Navbar/components/Search/index.tsx

@@ -51,6 +51,7 @@ export const Search = () => {
     <>
       <Button
         theme="glass"
+        size="small"
         className="group relative"
         onClick={() => setIsSearchOpen(!isSearchOpen)}
       >
@@ -71,6 +72,7 @@ export const Search = () => {
           {/* Close button */}
           <Button
             theme="glass"
+            size="small"
             className="absolute top-6 right-6 z-10 group hover:!bg-red-500/50"
             onClick={handleClose}
           >
@@ -144,9 +146,8 @@ export const Search = () => {
               {/* Show More Button */}
               {total_results > 4 && (
                 <div className="text-center">
-                  <div className="relative inline-block">
-                    <div className="absolute inset-0 bg-gradient-to-r from-purple-500 to-cyan-500 rounded-xl blur-lg opacity-50"></div>
-                    <Button href={`/search?s=${query}`} onClick={handleClose}>
+                  <div className="inline-block">
+                    <Button href={`/search?s=${query}`}>
                       <span className="flex items-center gap-2">
                         Zobacz wszystkie ({total_results})
                       </span>