Update components/GlassCard.js

components/GlassCard.js

@@ -2,21 +2,13 @@ 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 bg-[#F8FAFC]">
+    <div className="relative w-full h-full flex items-center justify-center">
       
-      {/* THE FRAME CONTAINER
-        Adjust 'max-w-md' if you want it wider or narrower.
-        'h-[80%]' ensures it fits on screen without being covered by the top/bottom bars.
-      */}
-      <motion.div 
-        initial={{ scale: 0.9, opacity: 0 }}
-        whileInView={{ scale: 1, opacity: 1 }}
-        transition={{ duration: 0.4 }}
-        className="relative w-full max-w-sm h-[75vh] flex-shrink-0"
-      >
+      {/* THE FRAME WRAPPER */}
+      <div className="relative w-full max-w-[360px] aspect-[9/16]">
         
-        {/* LAYER 1: The Model Image (Behind Glass) */}
-        <div className="absolute top-6 bottom-16 left-5 right-5 z-0 rounded-2xl overflow-hidden bg-white shadow-inner">
+        {/* 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" 
@@ -24,31 +16,31 @@ export default function GlassCard({ image, caption, price }) {
           />
         </div>
 
-        {/* LAYER 2: The Glass Frame PNG (Overlay) */}
+        {/* LAYER 2: The Glass Frame (Overlay) */}
         <div className="absolute inset-0 z-10 pointer-events-none">
           <img 
             src="/assets/picture_frame.png" 
-            alt="Glass Frame" 
             className="w-full h-full object-fill drop-shadow-2xl" 
           />
         </div>
 
-        {/* LAYER 3: Caption & Price (On the 'Caption Frame' Ledge) */}
-        <div className="absolute bottom-5 left-8 right-8 z-20 h-16 flex items-center justify-between">
-          <div className="flex flex-col justify-center w-2/3">
-             <p className="font-manrope font-bold text-[#1E293B] text-sm leading-tight line-clamp-2">
-               {caption}
-             </p>
-          </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 className="flex items-center justify-center">
-             <span className="font-manrope font-extrabold text-[#0EA5E9] text-lg bg-white/70 px-3 py-1 rounded-lg backdrop-blur-md shadow-sm border border-white/50">
-               {price}
-             </span>
-          </div>
         </div>
 
-      </motion.div>
+      </div>
     </div>
   );
 }