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/components/sections/hero/HeroOverlayTestimonial.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { Star } from "lucide-react";
-import { motion, AnimatePresence } from "motion/react";
+
 import { cls } from "@/lib/utils";
 import Button from "@/components/ui/Button";
 import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
@@ -92,14 +92,10 @@ const HeroOverlayTestimonial = ({
         </div>
       </div>
 
-      <AnimatePresence mode="wait">
-        <motion.div
+      
+        <div
           key={currentIndex}
-          initial={{ opacity: 0, y: 10 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: -10 }}
-          transition={{ duration: 0.3 }}
-          className="absolute z-10 bottom-3 left-3 right-3 p-3 xl:p-4 2xl:p-5 card rounded flex flex-col gap-3 xl:gap-4 2xl:gap-5 md:left-auto md:bottom-8 md:right-8 md:max-w-25/100 2xl:max-w-2/10"
+          className="absolute z-10 bottom-3 left-3 right-3 p-3 xl:p-4 2xl:p-5 card rounded flex flex-col gap-3 xl:gap-4 2xl:gap-5 md:left-auto md:bottom-8 md:right-8 md:max-w-25/100 2xl:max-w-2/10 bg-white/20 backdrop-blur-lg border border-white/30"
         >
           <div className="flex gap-1">
             {Array.from({ length: 5 }).map((_, index) => (
@@ -124,8 +120,8 @@ const HeroOverlayTestimonial = ({
               <span className="text-sm text-foreground/60">{testimonial.handle}</span>
             </div>
           </div>
-        </motion.div>
-      </AnimatePresence>
+        </div>
+      
     </section>
   );
 };

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,47 +2,55 @@ 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 HeroSplitMediaGrid from '@/components/sections/hero/HeroSplitMediaGrid';
+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';
-import TestimonialMarqueeCards from '@/components/sections/testimonial/TestimonialMarqueeCards';
+
 import { Award, BarChart, Database, Droplet, Droplets, Grape, Leaf, Mountain, Star } from "lucide-react";
 
 export default function HomePage() {
   return (
     <>
   <div id="hero" data-section="hero">
-      <HeroSplitMediaGrid
-      brand="Vine & Barrel"
-      description="Crafting exceptional wines for generations, embodying the spirit of our land and the passion of our winemakers. Experience the artistry in every bottle."
-      primaryButton={{
-        text: "Explore Our Wines",
-        href: "#wines",
-      }}
-      secondaryButton={{
-        text: "Book a Tasting",
-        href: "#contact",
-      }}
-      images={[
-        {
-          src: 'http://img.b2bpic.net/free-photo/person-picking-grapes-spending-time-vineyard_23-2151638420.jpg',
-          alt: 'Vineyard',
-        },
-        {
-          src: 'http://img.b2bpic.net/free-photo/man-pouring-red-wine-from-wood-bottle-into-glass_140725-646.jpg',
-          alt: 'Wine Pour',
-        },
-        {
-          src: 'http://img.b2bpic.net/free-photo/red-wine-glass-bottle-marble-table-with-red-apple_114579-20986.jpg',
-          alt: 'Wine Bottle',
-        },
-        {
-          src: 'http://img.b2bpic.net/free-photo/sauvignon-blanc-white-wine-grapes-vineyard-bordeaux-france-closeup_1101-3001.jpg',
-          alt: 'Grapes',
-        },
-      ]}
-    />
-  </div>
+      <HeroOverlayTestimonial
+        tag="What Our Patrons Say"
+        title="Vine & Barrel"
+        description="Crafting exceptional wines for generations, embodying the spirit of our land and the passion of our winemakers. Experience the artistry in every bottle."
+        primaryButton={{
+          text: "Explore Our Wines",
+          href: "#wines",
+        }}
+        secondaryButton={{
+          text: "Book a Tasting",
+          href: "#contact",
+        }}
+        imageSrc="http://img.b2bpic.net/free-photo/person-picking-grapes-spending-time-vineyard_23-2151638420.jpg"
+        testimonials={[
+          {
+            name: "Eleanor Vance",
+            handle: "Wine Enthusiast",
+            text: "The Heritage Cabernet Sauvignon is a masterpiece. Rich, complex, and absolutely unforgettable. Vine & Barrel truly sets the standard for quality.",
+            rating: 5,
+            imageSrc: "http://img.b2bpic.net/free-photo/lady-with-wine_1157-7318.jpg",
+          },
+          {
+            name: "Marcus Thorne",
+            handle: "Sommelier",
+            text: "I'm consistently impressed by the depth and character of Vine & Barrel's portfolio. Their Estate Chardonnay is particularly remarkable, a true gem.",
+            rating: 5,
+            imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-holding-wine-glass_23-2149428826.jpg",
+          },
+          {
+            name: "Isabelle Dubois",
+            handle: "Restaurateur",
+            text: "Serving Vine & Barrel wines has elevated our dining experience. Our guests frequently commend the exceptional quality and unique flavors.",
+            rating: 5,
+            imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-with-red-hair-green-dress-smiling-holding-glass-sitting-with-positive-girl-t-shirt-skirt-outdoor_197531-24721.jpg",
+          },
+        ]}
+      />
+    </div>
 
   <div id="about" data-section="about">
       <AboutFeaturesSplit
@@ -181,45 +189,7 @@ export default function HomePage() {
     />
   </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialMarqueeCards
-      tag="What Our Patrons Say"
-      title="Voices of Delight"
-      description="Our wines have touched hearts and enriched palates. Read what our cherished customers have to say about their Vine & Barrel experience."
-      testimonials={[
-        {
-          name: "Eleanor Vance",
-          role: "Wine Enthusiast",
-          quote: "The Heritage Cabernet Sauvignon is a masterpiece. Rich, complex, and absolutely unforgettable. Vine & Barrel truly sets the standard for quality.",
-          imageSrc: "http://img.b2bpic.net/free-photo/lady-with-wine_1157-7318.jpg",
-        },
-        {
-          name: "Marcus Thorne",
-          role: "Sommelier",
-          quote: "I'm consistently impressed by the depth and character of Vine & Barrel's portfolio. Their Estate Chardonnay is particularly remarkable, a true gem.",
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-holding-wine-glass_23-2149428826.jpg",
-        },
-        {
-          name: "Isabelle Dubois",
-          role: "Restaurateur",
-          quote: "Serving Vine & Barrel wines has elevated our dining experience. Our guests frequently commend the exceptional quality and unique flavors.",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-with-red-hair-green-dress-smiling-holding-glass-sitting-with-positive-girl-t-shirt-skirt-outdoor_197531-24721.jpg",
-        },
-        {
-          name: "David Sterling",
-          role: "Collector",
-          quote: "Vine & Barrel's commitment to sustainable practices and their nuanced approach to winemaking shines through. Every bottle is a testament to their passion.",
-          imageSrc: "http://img.b2bpic.net/free-photo/new-year-spend-with-friends-celebrating_23-2149196973.jpg",
-        },
-        {
-          name: "Sophia Rodriguez",
-          role: "Vineyard Visitor",
-          quote: "The tasting experience was delightful, and the staff were incredibly knowledgeable. Their Rosé is perfectly balanced for any occasion.",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiling-man-dinner_23-2148060592.jpg",
-        },
-      ]}
-    />
-  </div>
+
 
   <div id="tastings" data-section="tastings">
       <FaqSplitMedia
@@ -248,6 +218,44 @@ export default function HomePage() {
     />
   </div>
 
+  <div id="gallery" data-section="gallery">
+      <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."
+        items={[
+          {
+            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",
+            title: "Vineyard Explorations",
+            description: "A group of friends enjoying a sunny day exploring our lush vineyards.",
+          },
+          {
+            imageSrc: "http://img.b2bpic.net/free-photo/people-enjoying-calm-countryside_23-2150162019.jpg",
+            title: "Serene Tastings",
+            description: "Visitors savoring our finest wines while taking in the tranquil vineyard views.",
+          },
+          {
+            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",
+          },
+        ]}
+      />
+    </div>
+
   <div id="contact" data-section="contact">
       <ContactSplitForm
       tag="Connect With Us"