Update components/GlassCard.js

components/GlassCard.js

@@ -1,22 +1,28 @@
-import { motion } from "framer-motion";
-
 export default function GlassCard({ image, caption, price }) {
   return (
-    <div className="relative w-full h-full flex items-center justify-center">
+    // FULL SCREEN CONTAINER - Centers the frame
+    <div className="relative w-full h-full flex items-center justify-center p-2">
       
-      {/* THE FRAME WRAPPER */}
-      <div className="relative w-full max-w-[360px] aspect-[9/16]">
+      {/* THE FRAME ITSELF (Expands to fit screen, max width for mobile feel) */}
+      <div className="relative w-full h-[85vh] max-w-md">
         
-        {/* LAYER 1: The Model Image (Tucked behind the glass) */}
-        <div className="absolute top-[4%] bottom-[15%] left-[6%] right-[6%] z-0 bg-white rounded-lg overflow-hidden">
-          <img 
-            src={image} 
-            alt="Model" 
-            className="w-full h-full object-cover" 
-          />
+        {/* LAYER 1: The Content Area (Behind the Glass) 
+            Adjust top/bottom percentages to fit YOUR specific png frame borders.
+        */}
+        <div className="absolute top-[4%] bottom-[15%] left-[5%] right-[5%] z-0 rounded-xl overflow-hidden bg-white/10">
+          
+          {/* LOGIC: Only show image if one is uploaded. Otherwise, show empty placeholder */}
+          {image ? (
+             <img src={image} className="w-full h-full object-cover" />
+          ) : (
+             <div className="w-full h-full flex items-center justify-center bg-gray-50/20">
+               <p className="text-gray-400 font-light text-sm">Waiting for upload...</p>
+             </div>
+          )}
+          
         </div>
 
-        {/* LAYER 2: The Glass Frame (Overlay) */}
+        {/* LAYER 2: The Glass Frame PNG (The Overlay) */}
         <div className="absolute inset-0 z-10 pointer-events-none">
           <img 
             src="/assets/picture_frame.png" 
@@ -24,21 +30,17 @@ export default function GlassCard({ image, caption, price }) {
           />
         </div>
 
-        {/* LAYER 3: The Content (Inside the Bottom Ledge) */}
-        {/* We position this precisely to fit your PNG's bottom bar */}
-        <div className="absolute bottom-[4%] left-[8%] right-[8%] h-[10%] z-20 flex items-center justify-between px-2">
-          
-          {/* Caption (Left side of ledge) */}
-          <span className="font-manrope font-bold text-[#1E293B] text-xs w-2/3 leading-tight line-clamp-2 opacity-80">
-            {caption}
-          </span>
-          
-          {/* Price (Right side of ledge - Styled like a glass pill) */}
-          <span className="font-manrope font-extrabold text-[#0EA5E9] text-base">
-            {price}
-          </span>
-          
-        </div>
+        {/* LAYER 3: The Caption Area (Only appears IF there is text) */}
+        {(caption || price) && (
+          <div className="absolute bottom-[5%] left-[8%] right-[8%] z-20 flex flex-col items-center">
+            {caption && (
+               <p className="text-slate-800 font-bold text-sm mb-1">{caption}</p>
+            )}
+            {price && (
+               <p className="text-[#0EA5E9] font-extrabold text-lg">{price}</p>
+            )}
+          </div>
+        )}
 
       </div>
     </div>