feat: replace gallery carousel with bento grid

Merge version_10_1778189641211 into main

src/components/custom/GalleryBento.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+
+type GalleryItem = {
+  imageSrc: string;
+  title: string;
+  description: string;
+  className?: string;
+};
+
+const GalleryBento = ({
+  tag,
+  title,
+  description,
+  items,
+}: {
+  tag: string;
+  title:string;
+  description: string;
+  items: GalleryItem[];
+}) => {
+  return (
+    <section className="py-20">
+      <div className="container mx-auto px-4">
+        <div className="text-center mb-12">
+          <span className="text-sm font-semibold text-primary uppercase tracking-wider">{tag}</span>
+          <h2 className="text-4xl font-bold text-gray-900 dark:text-white mt-2">{title}</h2>
+          <p className="text-lg text-gray-600 dark:text-gray-300 mt-4 max-w-2xl mx-auto">{description}</p>
+        </div>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          {items.map((item, index) => (
+            <div
+              key={index}
+              className={`relative overflow-hidden rounded-lg group fade-in ${item.className}`}
+            >
+              <img src={item.imageSrc} alt={item.title} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
+              <div className="absolute inset-0 bg-black bg-opacity-50 flex flex-col justify-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
+                <h3 className="text-white text-lg font-semibold">{item.title}</h3>
+                <p className="text-gray-300 text-sm">{item.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default GalleryBento;

src/index.css

@@ -186,3 +186,17 @@ h6 {
     2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 10%, transparent);
   border: 1px solid var(--color-secondary-cta);
 }
+
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.fade-in {
+  animation: fadeIn 0.5s ease-in-out;
+}

src/pages/HomePage.tsx

@@ -2,7 +2,7 @@ import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FeaturesIconCards from '@/components/sections/features/FeaturesIconCards';
-import FeaturesMediaCarousel from '@/components/sections/features/FeaturesMediaCarousel';
+import GalleryBento from '@/components/custom/GalleryBento';
 import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
 import MetricsGradientCards from '@/components/sections/metrics/MetricsGradientCards';
 import ProductRatingCards from '@/components/sections/product/ProductRatingCards';
@@ -219,7 +219,7 @@ export default function HomePage() {
   </div>
 
   <div id="gallery" data-section="gallery">
-      <FeaturesMediaCarousel
+      <GalleryBento
         tag="Vineyard Moments"
         title="Capturing the Spirit of Vine & Barrel"
         description="Explore memorable moments from our vineyard, where guests enjoy the beauty of our estate and the pleasure of our wines."
@@ -228,6 +228,7 @@ export default function HomePage() {
             imageSrc: "http://img.b2bpic.net/free-photo/group-friends-celebrating-together_23-2149872337.jpg",
             title: "Toasting to Friendship",
             description: "Guests raising a glass amidst the scenic beauty of our vineyard.",
+            className: "col-span-2 row-span-2",
           },
           {
             imageSrc: "http://img.b2bpic.net/free-photo/happy-friends-having-fun-outdoors_23-2148952039.jpg",
@@ -243,11 +244,13 @@ export default function HomePage() {
             imageSrc: "http://img.b2bpic.net/free-photo/group-people-sitting-table-eating-drinking-wine_1303-28963.jpg",
             title: "Harvest Celebrations",
             description: "A joyful gathering celebrating the harvest season with good food and great wine.",
+            className: "col-span-2",
           },
           {
             imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-friends-clinking-wine-glasses-while-having-picnic-vineyard_23-2148179259.jpg",
             title: "Picnics and Pairings",
             description: "Friends enjoying a delightful picnic, perfectly paired with our signature wines.",
+            className: "col-span-2",
           },
         ]}
       />