Redesign phase 1: Homepage polish and design system foundation

- Fix newsletter subscribe box centering on homepage
- Fix header overlap on product pages (pt-[72px] instead of pt-[100px])
- Add scroll-mt-[72px] for smooth scroll anchor offset
- Add HeroVideo component with video hero placeholder
- Add REDESIGN_SPECIFICATION.md with 9-phase design plan
- Clean up globals.css theme declarations and comments
- Update Header with improved sticky behavior and cart
- Update ProductDetail with better layout and spacing
- Update CartDrawer with improved slide-out cart UI
- Add English translations for updated pages
- Various CSS refinements across pages

src/components/product/ProductCard.tsx

@@ -26,31 +26,55 @@ export default function ProductCard({ product, index = 0, locale = "SR" }: Produ
       transition={{ duration: 0.5, delay: index * 0.1 }}
     >
       <Link href={`/products/${localized.slug}`} className="group block">
-        <div className="relative aspect-[4/5] bg-background-ice overflow-hidden mb-4">
-          {image && (
+        {/* Image Container */}
+        <div className="relative aspect-square bg-[#f8f9fa] overflow-hidden mb-4">
+          {image ? (
             <Image
               src={image}
               alt={localized.name}
               fill
-              className="object-cover transition-transform duration-500 group-hover:scale-105"
+              className="object-cover transition-transform duration-700 ease-out group-hover:scale-105"
+              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
             />
+          ) : (
+            <div className="absolute inset-0 flex items-center justify-center text-[#999999]">
+              <span className="text-sm">No image</span>
+            </div>
           )}
+          
+          {/* Out of Stock Overlay */}
           {!isAvailable && (
-            <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
-              <span className="text-white font-medium">
-                {locale === "en" ? "Out of Stock" : "Nema na stanju"}
+            <div className="absolute inset-0 bg-white/80 flex items-center justify-center">
+              <span className="text-sm uppercase tracking-[0.1em] text-[#666666]">
+                {locale === "EN" ? "Out of Stock" : "Nema na stanju"}
               </span>
             </div>
           )}
+
+          {/* Hover Quick Add (optional) */}
+          <div className="absolute inset-x-0 bottom-0 p-4 translate-y-full group-hover:translate-y-0 transition-transform duration-300">
+            <button 
+              className="w-full py-3 bg-black text-white text-xs uppercase tracking-[0.1em] hover:bg-[#333333] transition-colors"
+              onClick={(e) => {
+                e.preventDefault();
+                // Quick add functionality can be added here
+              }}
+            >
+              {locale === "EN" ? "Quick Add" : "Dodaj u korpu"}
+            </button>
+          </div>
         </div>
         
-        <h3 className="font-serif text-lg mb-1 group-hover:text-accent-dark transition-colors">
-          {localized.name}
-        </h3>
-        
-        <p className="text-foreground-muted">
-          {price || (locale === "en" ? "Contact for price" : "Kontaktirajte za cenu")}
-        </p>
+        {/* Product Info */}
+        <div className="text-center">
+          <h3 className="text-[15px] font-medium text-[#1a1a1a] mb-1 group-hover:text-[#666666] transition-colors line-clamp-1">
+            {localized.name}
+          </h3>
+          
+          <p className="text-[14px] text-[#666666]">
+            {price || (locale === "EN" ? "Contact for price" : "Kontaktirajte za cenu")}
+          </p>
+        </div>
       </Link>
     </motion.div>
   );