Bob AI: add section with our best selling products

src/app/page.tsx

@@ -249,6 +249,50 @@ export default function iPhoneSalesPage() {
         />
       </div>
 
+      <div id="product" data-section="product">
+        <ProductCardOne
+          products={[
+            {
+              id: "1",
+              name: "iPhone 15 Pro",
+              price: "$999",
+              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+              imageAlt: "iPhone 15 Pro with premium titanium design"
+            },
+            {
+              id: "2",
+              name: "iPhone 15 Pro Max",
+              price: "$1,099",
+              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+              imageAlt: "iPhone 15 Pro Max in multiple colors"
+            },
+            {
+              id: "3",
+              name: "iPhone 15",
+              price: "$799",
+              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+              imageAlt: "iPhone 15 with stunning display"
+            },
+            {
+              id: "4",
+              name: "iPhone 15 Plus",
+              price: "$899",
+              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+              imageAlt: "iPhone 15 Plus with powerful performance"
+            }
+          ]}
+          title="Our Best Selling Products"
+          description="Discover the top picks from our iPhone lineup, designed to meet your every need."
+          tag="Best Sellers"
+          tagIcon={Star}
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground="noInvert"
+          gridVariant="three-columns-all-equal-width"
+          carouselMode="buttons"
+        />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterBase
           logoText="iPhone"

src/app/styles/variables.css

@@ -3,20 +3,20 @@
   /* --vw is set by ThemeProvider */
 
   /* --background: #f5f4ef;
-  --card: #dad6cd;
-  --foreground: #2a2928;
-  --primary-cta: #2a2928;
-  --secondary-cta: #ecebea;
-  --accent: #ffffff;
-  --background-accent: #ffffff; */
+  --card: #3c2f41;
+  --foreground: #ffffff;
+  --primary-cta: #c64756;
+  --secondary-cta: #4a235a;
+  --accent: #ffdead;
+  --background-accent: #ffdead; */
 
-  --background: #fcf6ec;
-  --card: #f3ede2;
-  --foreground: #2e2521;
-  --primary-cta: #2e2521;
-  --secondary-cta: #ffffff;
-  --accent: #b2a28b;
-  --background-accent: #b2a28b;
+  --background: #1c1428;
+  --card: #3c2f41;
+  --foreground: #ffffff;
+  --primary-cta: #c64756;
+  --secondary-cta: #4a235a;
+  --accent: #ffdead;
+  --background-accent: #ffdead;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);