Bob AI: Can you reduce the spacing between the first and s...

Merge version_2 into main

src/app/page.tsx

@@ -11,6 +11,7 @@ import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import { Coffee, MapPin } from "lucide-react";
+import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
 
 export default function CafeMadridPage() {
   return (
@@ -199,6 +200,56 @@ export default function CafeMadridPage() {
         />
       </div>
 
+      <div id="ecommerce" data-section="ecommerce">
+        <ProductCatalog
+            layout="section"
+            products={[
+                {
+                    id: "1",
+                    name: "Espresso",
+                    price: 2.5,
+                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+                    imageAlt: "Espresso",
+                    rating: 4.8,
+                    reviewCount: 120,
+                    category: "Coffee",
+                    onProductClick: () => {}
+                },
+                {
+                    id: "2",
+                    name: "Café Latte",
+                    price: 3.5,
+                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+                    imageAlt: "Café Latte",
+                    rating: 4.7,
+                    reviewCount: 95,
+                    category: "Coffee",
+                    onProductClick: () => {}
+                },
+                {
+                    id: "3",
+                    name: "Churros",
+                    price: 4.0,
+                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+                    imageAlt: "Churros",
+                    rating: 4.9,
+                    reviewCount: 150,
+                    category: "Dessert",
+                    onProductClick: () => {}
+                }
+            ]}
+            searchPlaceholder="Search our menu..."
+            emptyMessage="No items found"
+            className="mt-10"
+            gridClassName="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6"
+            cardClassName="bg-white rounded-lg shadow-md overflow-hidden"
+            imageClassName="w-full h-48 object-cover"
+            searchClassName="mb-4"
+            filterClassName="mb-4"
+            toolbarClassName="mb-4"
+        />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterSimple
           columns={[

src/components/sections/hero/HeroSplitDualMedia.tsx

@@ -134,7 +134,7 @@ const HeroSplitDualMedia = ({
             className={cls("relative w-full h-fit py-hero-page-padding md:py-0 md:h-svh flex items-center", className)}
         >
             <HeroBackgrounds {...background} />
-            <div className={cls("w-content-width mx-auto flex flex-col md:flex-row gap-13 md:gap-15 items-center relative z-10", containerClassName)}>
+            <div className={cls("w-content-width mx-auto flex flex-col md:flex-row gap-8 md:gap-10 items-center relative z-10", containerClassName)}>
                 <div className="w-full md:w-1/2">
                     <TextBox
                         title={title}