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/home/ProductShowcase.tsx

@@ -1,19 +1,20 @@
 "use client";
 
 import { motion } from "framer-motion";
-import { WooProduct } from "@/lib/woocommerce";
+import type { Product } from "@/types/saleor";
 import ProductCard from "@/components/product/ProductCard";
 
 interface ProductShowcaseProps {
-  products: WooProduct[];
+  products: Product[];
+  locale?: string;
 }
 
-export default function ProductShowcase({ products }: ProductShowcaseProps) {
+export default function ProductShowcase({ products, locale = "SR" }: ProductShowcaseProps) {
   if (!products || products.length === 0) return null;
 
   return (
     <section className="py-20 px-4">
-      <div className="max-w-7xl mx-auto">
+      <div className="container">
         <motion.div
           className="text-center mb-16"
           initial={{ opacity: 0, y: 20 }}
@@ -21,15 +22,16 @@ export default function ProductShowcase({ products }: ProductShowcaseProps) {
           viewport={{ once: true }}
           transition={{ duration: 0.6 }}
         >
-          <h2 className="text-4xl md:text-5xl font-serif mb-4">Our Products</h2>
-          <p className="text-foreground-muted max-w-2xl mx-auto">
+          <span className="text-caption text-[#666666] mb-4 block">Our Collection</span>
+          <h2 className="text-3xl md:text-4xl font-medium mb-4">Our Products</h2>
+          <p className="text-[#666666] max-w-2xl mx-auto">
             Discover our premium collection of natural oils for hair and skin care
           </p>
         </motion.div>
 
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
           {products.map((product, index) => (
-            <ProductCard key={product.id} product={product} index={index} />
+            <ProductCard key={product.id} product={product} index={index} locale={locale} />
           ))}
         </div>
       </div>