Update src/app/page.tsx

src/app/page.tsx

@@ -4,7 +4,7 @@ import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleAp
 import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
 import SplitAbout from '@/components/sections/about/SplitAbout';
 import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
@@ -87,21 +87,22 @@ export default function LandingPage() {
         />
       </div>
       <div id="products" data-section="products">
-        <ProductCardFour
+        <ProductCardThree
           title="Discover Your Perfect Keystroke"
           description="Browse our diverse selection of switches, from smooth linears to crisp tactiles, each crafted to meet the demands of discerning users."
           products={[
-            { id: "linear-crimson", name: "Crimson Glide", price: "$0.65/switch", variant: "Linear", imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-black-lamp_1203-980.jpg", imageAlt: "Crimson Glide Linear Switch" },
+            { id: "linear-crimson", name: "Crimson Glide Linear", price: "$0.65/switch", imageSrc: "http://img.b2bpic.net/free-photo/close-up-elegant-black-lamp_1203-980.jpg", imageAlt: "Crimson Glide Linear Switch", initialQuantity: 1, onQuantityChange: (quantity) => console.log('Crimson Glide quantity:', quantity) },
-            { id: "tactile-emerald", name: "Emerald Tact", price: "$0.70/switch", variant: "Tactile", imageSrc: "http://img.b2bpic.net/free-photo/closeup-black-computer-keyboard_53876-42525.jpg", imageAlt: "Emerald Tact Tactile Switch" },
+            { id: "tactile-emerald", name: "Emerald Tact Tactile", price: "$0.70/switch", imageSrc: "http://img.b2bpic.net/free-photo/closeup-black-computer-keyboard_53876-42525.jpg", imageAlt: "Emerald Tact Tactile Switch", initialQuantity: 1, onQuantityChange: (quantity) => console.log('Emerald Tact quantity:', quantity) },
-            { id: "clicky-sapphire", name: "Sapphire Click", price: "$0.75/switch", variant: "Clicky", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-arrangement-colorful-condoms-with-copy-space_23-2148495965.jpg", imageAlt: "Sapphire Click Clicky Switch" },
+            { id: "clicky-sapphire", name: "Sapphire Click Clicky", price: "$0.75/switch", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-arrangement-colorful-condoms-with-copy-space_23-2148495965.jpg", imageAlt: "Sapphire Click Clicky Switch", initialQuantity: 1, onQuantityChange: (quantity) => console.log('Sapphire Click quantity:', quantity) },
-            { id: "silent-onyx", name: "Onyx Silent", price: "$0.80/switch", variant: "Silent Linear", imageSrc: "http://img.b2bpic.net/free-photo/concept-creativity-organized-colorful-domino-blocks_181624-60191.jpg", imageAlt: "Onyx Silent Switch" },
+            { id: "silent-onyx", name: "Onyx Silent Linear", price: "$0.80/switch", imageSrc: "http://img.b2bpic.net/free-photo/concept-creativity-organized-colorful-domino-blocks_181624-60191.jpg", imageAlt: "Onyx Silent Switch", initialQuantity: 1, onQuantityChange: (quantity) => console.log('Onyx Silent quantity:', quantity) },
-            { id: "pro-gold", name: "Pro Gold Tactile", price: "$0.85/switch", variant: "Heavy Tactile", imageSrc: "http://img.b2bpic.net/free-photo/brunette-blogger-writing-laptop_23-2148192346.jpg", imageAlt: "Pro Gold Tactile Switch" },
+            { id: "pro-gold", name: "Pro Gold Heavy Tactile", price: "$0.85/switch", imageSrc: "http://img.b2bpic.net/free-photo/brunette-blogger-writing-laptop_23-2148192346.jpg", imageAlt: "Pro Gold Tactile Switch", initialQuantity: 1, onQuantityChange: (quantity) => console.log('Pro Gold quantity:', quantity) },
-            { id: "speed-silver", name: "Silver Speed", price: "$0.68/switch", variant: "Speed Linear", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-pink-keyboard-with-lights_23-2149680252.jpg", imageAlt: "Silver Speed Linear Switch" }
+            { id: "speed-silver", name: "Silver Speed Linear", price: "$0.68/switch", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-pink-keyboard-with-lights_23-2149680252.jpg", imageAlt: "Silver Speed Linear Switch", initialQuantity: 1, onQuantityChange: (quantity) => console.log('Silver Speed quantity:', quantity) }
           ]}
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={true}
+          carouselMode="buttons"
         />
       </div>
       <div id="metrics" data-section="metrics">
@@ -176,4 +177,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}