Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -11,7 +11,6 @@ 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 (
@@ -200,56 +199,6 @@ 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,14 +134,14 @@ 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}
                         description={description}
                         tag={tag}
                         tagIcon={tagIcon}
-                        buttons={buttons}
+                        buttons={[...(buttons || []), { href: "#learn-more", label: "Learn More" }]}
                         className={cls("flex flex-col gap-3 md:gap-4 md:hidden", textBoxClassName)}
                         titleClassName={cls("text-7xl 2xl:text-8xl font-medium text-center md:text-left text-balance", titleClassName)}
                         descriptionClassName={cls("max-w-8/10 text-lg md:text-xl leading-[1.2] text-center md:text-left", descriptionClassName)}
@@ -156,7 +156,7 @@ const HeroSplitDualMedia = ({
                         description={description}
                         tag={tag}
                         tagIcon={tagIcon}
-                        buttons={buttons}
+                        buttons={[...(buttons || []), { href: "#learn-more", label: "Learn More" }]}
                         className={cls("hidden md:flex flex-col gap-3 md:gap-4", textBoxClassName)}
                         titleClassName={cls("text-7xl 2xl:text-8xl font-medium text-center md:text-left text-balance", titleClassName)}
                         descriptionClassName={cls("max-w-8/10 text-lg md:text-xl leading-[1.2] text-center md:text-left", descriptionClassName)}