Bob AI: i want to add a cool section

Merge version_3 into main

src/app/page.tsx

@@ -9,6 +9,7 @@ import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterBase from '@/components/sections/footer/FooterBase';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
 
 export default function LandingPage() {
   return (
@@ -167,6 +168,40 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="feature" data-section="feature">
+        <FeatureCardOne
+          features={[
+            {
+              title: "Fresh Ingredients",
+              description: "We source the freshest ingredients from local farmers to ensure every dish is bursting with flavor.",
+              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+            },
+            {
+              title: "Crafted Cuisine",
+              description: "Our chefs are passionate about crafting each dish with care, using traditional techniques and modern flavors.",
+              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+            },
+            {
+              title: "Warm Ambiance",
+              description: "Experience the cozy and inviting atmosphere of Buona Tavola, perfect for any occasion.",
+              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+            },
+            {
+              title: "Dine in Style",
+              description: "Our elegant dining room offers a sophisticated setting for a memorable meal with friends and family.",
+              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+            },
+          ]}
+          carouselMode="buttons"
+          gridVariant="three"
+          animationType="slide"
+          title="Why Choose Buona Tavola?"
+          description="Discover the reasons behind our reputation for excellence in dining."
+          textboxLayout="left"
+          useInvertedBackground="none"
+        />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterBase
           logoText="Buona Tavola"

src/app/styles/variables.css

@@ -3,20 +3,20 @@
   /* --vw is set by ThemeProvider */
 
   /* --background: #f5f5f5;;
-  --card: #ffffff;;
-  --foreground: #1c1c1c;;
-  --primary-cta: #341f51;;
+  --card: #f3e5f5;;
+  --foreground: #4a148c;;
+  --primary-cta: #7b1fa2;;
   --secondary-cta: #ffffff;;
-  --accent: #6139e6;;
-  --background-accent: #b3a8e8;; */
+  --accent: #ffc107;;
+  --background-accent: #ffe0b2;; */
 
-  --background: #f5f5f5;;
-  --card: #ffffff;;
-  --foreground: #1c1c1c;;
-  --primary-cta: #341f51;;
+  --background: #fce4ec;;
+  --card: #f3e5f5;;
+  --foreground: #4a148c;;
+  --primary-cta: #7b1fa2;;
   --secondary-cta: #ffffff;;
-  --accent: #6139e6;;
-  --background-accent: #b3a8e8;;
+  --accent: #ffc107;;
+  --background-accent: #ffe0b2;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);