Bob AI: Add product details section with colors and sizes

Merge version_2_1781384088095 into main

src/index.css

@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #0a0a0a;
-  --card: #1a1a1a;
-  --foreground: #ffffff;
-  --primary-cta: #ffffff;
-  --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
-  --secondary-cta-text: #ffffff;
-  --accent: #333333;
-  --background-accent: #333333;
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #0a0a0a;
+  --primary-cta: #0a0a0a;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #ffffff;
+  --secondary-cta-text: #0a0a0a;
+  --accent: #e5e5e5;
+  --background-accent: #e5e5e5;
 
   /* @layout/border-radius/rounded */
   --radius: 1.5rem;

src/pages/HomePage.tsx

@@ -10,10 +10,12 @@ import TestimonialsSection from './HomePage/sections/Testimonials';
 import FaqSectionSection from './HomePage/sections/FaqSection';
 import ContactCtaSection from './HomePage/sections/ContactCta';
 
-export default function HomePage(): React.JSX.Element {
+
+import ProductDetailsSection from './HomePage/sections/ProductDetails';export default function HomePage(): React.JSX.Element {
   return (
 <>
   <HeroSection />
+      <ProductDetailsSection />
 
   <FeaturedSection />
 

src/pages/HomePage/sections/Featured.tsx

@@ -10,11 +10,47 @@ export default function FeaturedSection(): React.JSX.Element {
     <div id="featured" data-section="featured">
         <SectionErrorBoundary name="featured">
               <FeaturesImageBento
-        tag="Collection"
-        title="Built for Performance"
-        description="Engineered with four-way stretch fabric and sweat-wicking technology to keep you moving. Featuring a 5-inch inseam and hidden zipper pockets."
-        items={[{"title":"5-Inch Inseam","imageSrc":"https://ae01.alicdn.com/kf/S5502a39b359f4f358645d94726487e41q/Pantalones-cortos-deportivos-de-secado-r-pido-para-hombre-Shorts-de-entrenamiento-para-correr-Fitness-gimnasio.jpg","description":"Designed for range of motion."},{"title":"Sweat-Wicking","imageSrc":"https://ae01.alicdn.com/kf/S5502a39b359f4f358645d94726487e41q/Pantalones-cortos-deportivos-de-secado-r-pido-para-hombre-Shorts-de-entrenamiento-para-correr-Fitness-gimnasio.jpg","description":"Stay dry during intense sessions."},{"description":"Secure storage for your essentials.","title":"Hidden Pockets","imageSrc":"https://ae01.alicdn.com/kf/S5502a39b359f4f358645d94726487e41q/Pantalones-cortos-deportivos-de-secado-r-pido-para-hombre-Shorts-de-entrenamiento-para-correr-Fitness-gimnasio.jpg"},{"title":"Precision Fit","imageSrc":"https://ae01.alicdn.com/kf/S5502a39b359f4f358645d94726487e41q/Pantalones-cortos-deportivos-de-secado-r-pido-para-hombre-Shorts-de-entrenamiento-para-correr-Fitness-gimnasio.jpg","description":"Contours to your physique."},{"description":"Lightweight and durable.","imageSrc":"https://ae01.alicdn.com/kf/S5502a39b359f4f358645d94726487e41q/Pantalones-cortos-deportivos-de-secado-r-pido-para-hombre-Shorts-de-entrenamiento-para-correr-Fitness-gimnasio.jpg","title":"Performance Fabric"},{"description":"Ultimate mobility in every move.","imageSrc":"https://ae01.alicdn.com/kf/S5502a39b359f4f358645d94726487e41q/Pantalones-cortos-deportivos-de-secado-r-pido-para-hombre-Shorts-de-entrenamiento-para-correr-Fitness-gimnasio.jpg","title":"Four-Way Stretch"},{"imageSrc":"https://ae01.alicdn.com/kf/S5502a39b359f4f358645d94726487e41q/Pantalones-cortos-deportivos-de-secado-r-pido-para-hombre-Shorts-de-entrenamiento-para-correr-Fitness-gimnasio.jpg","title":"Everyday Comfort","description":"From gym to the street."}]}
-      />
+          tag="Collection"
+          title="Built for Performance"
+          description="Engineered with four-way stretch fabric and sweat-wicking technology to keep you moving."
+          items={[
+            {
+              title: "5-Inch Inseam",
+              description: "Designed for range of motion.",
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-wool-texture-details_23-2149620438.jpg",
+            },
+            {
+              title: "Sweat-Wicking",
+              description: "Stay dry during intense sessions.",
+              imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-lifting-dumbbells-road_23-2147775512.jpg",
+            },
+            {
+              title: "Hidden Pockets",
+              description: "Secure storage for your essentials.",
+              imageSrc: "http://img.b2bpic.net/free-photo/tablet-near-shorts-fruits_23-2147750737.jpg",
+            },
+            {
+              title: "Precision Fit",
+              description: "Contours to your physique.",
+              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-posing-with-closed-eyes_176420-3995.jpg",
+            },
+            {
+              title: "Performance Fabric",
+              description: "Lightweight and durable.",
+              imageSrc: "http://img.b2bpic.net/free-photo/sportswoman_23-2148023661.jpg",
+            },
+            {
+              title: "Four-Way Stretch",
+              description: "Ultimate mobility in every move.",
+              imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-gym-suit-indoors_23-2148267255.jpg",
+            },
+            {
+              title: "Everyday Comfort",
+              description: "From gym to the street.",
+              imageSrc: "http://img.b2bpic.net/free-photo/fruits-near-shorts_23-2147750735.jpg",
+            },
+          ]}
+        />
         </SectionErrorBoundary>
       </div>
   );

src/pages/HomePage/sections/Hero.tsx

@@ -10,18 +10,18 @@ export default function HeroSection(): React.JSX.Element {
     <div id="hero" data-section="hero">
         <SectionErrorBoundary name="hero">
               <HeroBrand
-        brand="Apex Athletics"
-        description="Built for Performance. Designed for Everyday."
-        primaryButton={{
+          brand="Apex Athletics"
+          description="Built for Performance. Designed for Everyday."
+          primaryButton={{
             text: "Shop Shorts",
             href: "/shop",
           }}
-        secondaryButton={{
+          secondaryButton={{
             text: "Learn More",
             href: "/about",
           }}
-        imageSrc="https://ae01.alicdn.com/kf/S5502a39b359f4f358645d94726487e41q/Pantalones-cortos-deportivos-de-secado-r-pido-para-hombre-Shorts-de-entrenamiento-para-correr-Fitness-gimnasio.jpg"
-      />
+          imageSrc="http://img.b2bpic.net/free-photo/man-athletic-wear-posing-stairs-outdoors_23-2148773867.jpg"
+        />
         </SectionErrorBoundary>
       </div>
   );

src/pages/HomePage/sections/ProductDetails.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import Button from '@/components/ui/Button';
+import { Check } from 'lucide-react';
+
+export default function ProductDetailsSection() {
+  return (
+    <div data-webild-section="product-details" id="product-details" className="py-24 bg-background">
+      <div className="max-w-6xl mx-auto px-6 grid grid-cols-1 md:grid-cols-2 gap-12">
+        <div className="space-y-4">
+          <div className="aspect-[4/5] bg-card rounded-lg overflow-hidden">
+            <img src="http://img.b2bpic.net/free-photo/man-athletic-wear-posing-stairs-outdoors_23-2148773867.jpg" alt="Gym Shorts" className="w-full h-full object-cover" />
+          </div>
+        </div>
+        <div className="flex flex-col justify-center">
+          <h2 className="text-4xl font-bold text-foreground mb-2">Premium Performance Shorts</h2>
+          <p className="text-2xl text-muted-foreground mb-6">$45.00</p>
+          <p className="text-base text-muted-foreground mb-8">
+            Engineered for maximum performance and everyday comfort. Featuring a 5-inch inseam, four-way stretch fabric, and hidden zipper pockets.
+          </p>
+          <div className="mb-6">
+            <h3 className="text-sm font-semibold text-foreground mb-3 uppercase tracking-wider">Color</h3>
+            <div className="flex gap-3">
+              <button className="w-10 h-10 rounded-full border-2 flex items-center justify-center border-foreground">
+                <span className="w-8 h-8 rounded-full bg-black border border-border" />
+              </button>
+              <button className="w-10 h-10 rounded-full border-2 flex items-center justify-center border-transparent">
+                <span className="w-8 h-8 rounded-full bg-gray-500 border border-border" />
+              </button>
+              <button className="w-10 h-10 rounded-full border-2 flex items-center justify-center border-transparent">
+                <span className="w-8 h-8 rounded-full bg-blue-600 border border-border" />
+              </button>
+              <button className="w-10 h-10 rounded-full border-2 flex items-center justify-center border-transparent">
+                <span className="w-8 h-8 rounded-full bg-green-700 border border-border" />
+              </button>
+            </div>
+          </div>
+          <div className="mb-8">
+            <div className="flex justify-between items-center mb-3">
+              <h3 className="text-sm font-semibold text-foreground uppercase tracking-wider">Size</h3>
+              <button className="text-sm text-muted-foreground underline">Size Guide</button>
+            </div>
+            <div className="grid grid-cols-5 gap-2">
+              {["M", "L", "XL", "2XL", "3XL", "4XL", "5XL", "6XL", "7XL", "8XL"].map((size, i) => (
+                <button
+                  key={size}
+                  className={`py-2 text-sm font-medium rounded-md border transition-colors ${i === 1 ? 'bg-foreground text-background border-foreground' : 'bg-card text-foreground border-border hover:border-foreground'}`}
+                >
+                  {size}
+                </button>
+              ))}
+            </div>
+          </div>
+          <Button text="Add to Cart" variant="primary" className="w-full py-4 text-lg mb-4" />
+          <ul className="space-y-2 mt-6">
+            {["5-inch inseam", "Lightweight performance fabric", "Sweat-wicking technology", "Hidden zipper pockets"].map((feature, idx) => (
+              <li key={idx} className="flex items-center text-sm text-muted-foreground">
+                <Check className="w-4 h-4 mr-2 text-foreground" />
+                {feature}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}