Bob AI: add section with our worst products after hero

src/app/page.tsx

@@ -216,6 +216,37 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="product" data-section="product">
+        <ProductCardOne
+                  title="Our Notable iPhone Selection"
+                  description="Take a look at our selection of iPhones that might not be the latest, but still offer great value."
+                  tag="Previously Featured"
+                  tagIcon={Sparkles}
+                  textboxLayout="default"
+                  animationType="slide-up"
+                  useInvertedBackground="invertDefault"
+                  gridVariant="three-columns-all-equal-width"
+                  carouselMode="buttons"
+                  products={[
+                    {
+                      id: "1",              name: "iPhone 12",              price: "$699",              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",              imageAlt: "iPhone 12"
+                    },
+                    {
+                      id: "2",              name: "iPhone 11",              price: "$599",              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",              imageAlt: "iPhone 11"
+                    },
+                    {
+                      id: "3",              name: "iPhone XR",              price: "$499",              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",              imageAlt: "iPhone XR"
+                    },
+                    {
+                      id: "4",              name: "iPhone 8",              price: "$399",              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",              imageAlt: "iPhone 8"
+                    }
+                  ]}
+                  buttons={[
+                    { text: "View All Models", href: "#pricing" }
+                  ]}
+                />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterCard
           logoText="iPhone"

src/app/styles/variables.css

@@ -10,13 +10,13 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #2e3440;
+  --background: #f5c2c2;
-  --card: #4c566a;
+  --card: #f08080;
-  --foreground: #d8dee9;
+  --foreground: #ff1493;
-  --primary-cta: #d8dee9;
+  --primary-cta: #ff1493;
-  --secondary-cta: #4c566a;
+  --secondary-cta: #f08080;
-  --accent: #88c0d0;
+  --accent: #ffc0cb;
-  --background-accent: #88c0d0;
+  --background-accent: #ffc0cb;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);