feat: add blur to movie card

components/Card.tsx

@@ -12,6 +12,7 @@ export function Card(
   const backgroundStyle = {
     backgroundImage: `url(${image})`,
     backgroundSize: "cover",
+    boxShadow: "0px -60px 90px black inset, 0px 10px 20px #fff3 inset",
   };
 
   if (backgroundSize !== 100) {
@@ -24,11 +25,16 @@ export function Card(
     <a
       href={link}
       style={backgroundStyle}
-      class="text-white rounded-3xl shadow-md p-4 relative overflow-hidden 
+      class="text-white rounded-3xl shadow-md p-4 relative 
   lg:w-56 lg:h-56 
   sm:w-48 sm:h-48
   w-[37vw] h-[37vw]"
     >
+      <img
+        class="absolute opacity-30 top-0 left-0 object-cover w-full h-full -z-10"
+        src={image}
+        style={{ filter: "blur(30px)" }}
+      />
       <div class="h-full flex flex-col justify-between relative z-10">
         <div>
           {/* Recipe Card content */}
@@ -38,10 +44,7 @@ export function Card(
           {title}
         </div>
       </div>
-      <div
-        class="absolute inset-x-0 bottom-0 h-3/4"
-        style={{ background: "linear-gradient(transparent, #000e)" }}
-      />
+      <div class="absolute inset-x-0 bottom-0 h-3/4" />
     </a>
   );
 }