Bob AI: add section of our WORST products

src/app/page.tsx

@@ -174,6 +174,56 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="product" data-section="product">
+        <ProductCardFour
+          title="Shop Our WORST Products"
+          description="These are our least popular models, but they still come with a warranty. Maybe you'll find a hidden gem!"
+          tag="Available Now"
+          textboxLayout="default"
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          useInvertedBackground="noInvert"
+          products={[
+            {
+              id: "iphone-4s",
+              name: "iPhone 4S",
+              price: "$50",
+              variant: "4-inch Display, 2 Colors",
+              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+              imageAlt: "iPhone 4S retro model",
+              isFavorited: false
+            },
+            {
+              id: "iphone-5",
+              name: "iPhone 5",
+              price: "$60",
+              variant: "4-inch Display, 2 Colors",
+              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+              imageAlt: "iPhone 5 older model",
+              isFavorited: false
+            },
+            {
+              id: "iphone-5s",
+              name: "iPhone 5S",
+              price: "$70",
+              variant: "4-inch Display, 3 Colors",
+              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+              imageAlt: "iPhone 5S slightly better model",
+              isFavorited: false
+            },
+            {
+              id: "iphone-6",
+              name: "iPhone 6",
+              price: "$80",
+              variant: "4.7-inch Display, 2 Colors",
+              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+              imageAlt: "iPhone 6 first large display model",
+              isFavorited: false
+            }
+          ]}
+        />
+      </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: #f2f2f2;
+  --card: #ffffff;
-  --foreground: #333333;
+  --foreground: #000000;
-  --primary-cta: #e54e53;
+  --primary-cta: #ff0000;
-  --secondary-cta: #666666;
+  --secondary-cta: #999999;
-  --accent: #9b59b6;
+  --accent: #ff69b4;
-  --background-accent: #ecf0f1; */
+  --background-accent: #f0f8ff; */
 
   --background: #ffffff;
-  --card: #f2f2f2;
+  --card: #ffffff;
-  --foreground: #333333;
+  --foreground: #000000;
-  --primary-cta: #e54e53;
+  --primary-cta: #ff0000;
-  --secondary-cta: #666666;
+  --secondary-cta: #999999;
-  --accent: #9b59b6;
+  --accent: #ff69b4;
-  --background-accent: #ecf0f1;
+  --background-accent: #f0f8ff;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);