Merge version_3_1779190697157 into main

Merge version_3_1779190697157 into main

src/components/custom/ImageBentoGallery.tsx

@@ -0,0 +1,63 @@
+import { motion } from "motion/react";
+import { cn } from "@/lib/utils";
+
+interface ImageBentoGalleryProps {
+  title?: string;
+  description?: string;
+  images: {
+    src: string;
+    alt: string;
+    className?: string;
+  }[];
+}
+
+export default function ImageBentoGallery({
+  title,
+  description,
+  images,
+}: ImageBentoGalleryProps) {
+  return (
+    <section className="relative w-full py-12 md:py-24 lg:py-32">
+      <div className="container px-4 md:px-6">
+        <div className="flex flex-col items-center justify-center space-y-4 text-center">
+          {title && (
+            <h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">
+              {title}
+            </h2>
+          )}
+          {description && (
+            <p className="max-w-[900px] text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
+              {description}
+            </p>
+          )}
+        </div>
+        <motion.div
+          initial={{ opacity: 0, y: 50 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, amount: 0.5 }}
+          transition={{ duration: 0.6, delay: 0.2 }}
+          className="mx-auto grid max-w-5xl items-start gap-6 py-12 lg:grid-cols-3 lg:gap-12"
+        >
+          {images.map((image, index) => (
+            <div
+              key={index}
+              className={cn(
+                "relative overflow-hidden rounded-xl group aspect-video",
+                image.className
+              )}
+            >
+              <img
+                src={image.src}
+                alt={image.alt}
+                className="object-cover w-full h-full transition-transform duration-300 group-hover:scale-105"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-4">
+                <h3 className="text-lg font-semibold text-white">{image.alt}</h3>
+              </div>
+            </div>
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  );
+}

src/pages/HomePage.tsx

@@ -6,6 +6,7 @@ import HeroBillboardBrand from '@/components/sections/hero/HeroBillboardBrand';
 import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
 import ProductMediaCards from '@/components/sections/product/ProductMediaCards';
 import TestimonialMetricsCards from '@/components/sections/testimonial/TestimonialMetricsCards';
+import ImageBentoGallery from '@/components/custom/ImageBentoGallery';
 import { Cake, Timer, Users } from "lucide-react";
 import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
 
@@ -141,6 +142,23 @@ export default function HomePage() {
     </SectionErrorBoundary>
   </div>
 
+  <div id="gallery" data-section="gallery">
+    <SectionErrorBoundary name="gallery">
+      <ImageBentoGallery
+        title="Our Delicious Creations"
+        description="A glimpse into our world of freshly baked goods, crafted with passion and the finest ingredients."
+        images={[
+          { src: "https://storage.googleapis.com/webild/default/no-image.jpg?id=f3s2fy", alt: "Fluffy Croissants", className: "lg:col-span-2" },
+          { src: "https://storage.googleapis.com/webild/default/no-image.jpg?id=a8zwlk", alt: "Celebration Cakes" },
+          { src: "https://storage.googleapis.com/webild/default/no-image.jpg?id=dgyjgc", alt: "Artisan Sourdough" },
+          { src: "https://storage.googleapis.com/webild/default/no-image.jpg?id=wgync0", alt: "Gourmet Cupcakes", className: "lg:col-span-2" },
+          { src: "https://storage.googleapis.com/webild/default/no-image.jpg?id=w0a103", alt: "Signature Cookies" },
+          { src: "https://storage.googleapis.com/webild/default/no-image.jpg?id=dlchqp", alt: "Fruit Tarts" },
+        ]}
+      />
+    </SectionErrorBoundary>
+  </div>
+
   <div id="faq" data-section="faq">
     <SectionErrorBoundary name="faq">
           <FaqTwoColumn