Bob AI: add background image for the whole hero section

src/app/page.tsx

@@ -11,6 +11,7 @@ import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCar
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
 import { Sparkles, Phone, Zap, Gift, TrendingUp, Users, Award, Shield, Star, Heart } from "lucide-react";
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 
 export default function LandingPage() {
   return (
@@ -55,31 +56,60 @@ export default function LandingPage() {
           imagePosition="right"
         />
       </div>
-
       <div id="products" data-section="products">
-        <ProductCardOne
+        <ProductCardTwo
-          title="Our iPhone Collection"
+            title="Explore Our Latest Smartphones"
-          description="Discover the perfect iPhone for your lifestyle. From cutting-edge Pro models to accessible core options, find your match."
+            description="Experience the latest in smartphone technology with our cutting-edge devices. From powerful processors to stunning displays, find your perfect match."
-          tag="Premium Selection"
+            tag="Latest Models"
-          tagIcon={Phone}
+            tagIcon={Star}
-          textboxLayout="default"
+            textboxLayout="default"
-          products={[
+            products={[
-            {
+                {
-              id: "1",              name: "iPhone 15 Pro Max",              price: "$1,199",              imageSrc: "https://img.b2bpic.net/free-photo/still-life-tech-device_23-2150722629.jpg",              imageAlt: "iPhone 15 Pro Max"
+                    id: "1",
-            },
+                    name: "Samsung Galaxy S23 Ultra",
-            {
+                    price: "$1,299",
-              id: "2",              name: "iPhone 15 Pro",              price: "$999",              imageSrc: "https://img.b2bpic.net/free-psd/new-smartphone-16-pro-social-media-cover-design-template_47987-25428.jpg",              imageAlt: "iPhone 15 Pro"
+                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
-            },
+                    imageAlt: "Samsung Galaxy S23 Ultra",
-            {
+                    brand: "Samsung",
-              id: "3",              name: "iPhone 15",              price: "$799",              imageSrc: "https://img.b2bpic.net/free-psd/new-smartphone-a18-bionic-social-media-banner-design-template_47987-33085.jpg",              imageAlt: "iPhone 15"
+                    rating: 4.8,
-            }
+                    reviewCount: "1,200"
-          ]}
+                },
-          gridVariant="three-columns-all-equal-width"
+                {
-          animationType="slide-up"
+                    id: "2",
-          useInvertedBackground="invertDefault"
+                    name: "Google Pixel 7 Pro",
+                    price: "$899",
+                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+                    imageAlt: "Google Pixel 7 Pro",
+                    brand: "Google",
+                    rating: 4.7,
+                    reviewCount: "950"
+                },
+                {
+                    id: "3",
+                    name: "OnePlus 10T",
+                    price: "$799",
+                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+                    imageAlt: "OnePlus 10T",
+                    brand: "OnePlus",
+                    rating: 4.6,
+                    reviewCount: "800"
+                },
+                {
+                    id: "4",
+                    name: "Xiaomi 13 Pro",
+                    price: "$699",
+                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+                    imageAlt: "Xiaomi 13 Pro",
+                    brand: "Xiaomi",
+                    rating: 4.5,
+                    reviewCount: "750"
+                }
+            ]}
+            gridVariant="three-columns-all-equal-width"
+            animationType="slide-up"
+            useInvertedBackground="invertDefault"
         />
       </div>
-
       <div id="features" data-section="features">
         <FeatureCardSix
           title="Engineered to Perfection"
@@ -247,6 +277,49 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="product" data-section="product">
+        <ProductCardOne
+          title="Our Bestsellers"
+          description="Explore our top-selling iPhone models that customers love."
+          tag="Bestsellers"
+          tagIcon={Phone}
+          textboxLayout="default"
+          products={[
+            {
+              id: "1",
+              name: "iPhone 15 Pro Max",
+              price: "$1,199",
+              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+              imageAlt: "iPhone 15 Pro Max"
+            },
+            {
+              id: "2",
+              name: "iPhone 15 Pro",
+              price: "$999",
+              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+              imageAlt: "iPhone 15 Pro"
+            },
+            {
+              id: "3",
+              name: "iPhone 15",
+              price: "$799",
+              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+              imageAlt: "iPhone 15"
+            },
+            {
+              id: "4",
+              name: "iPhone 15 Plus",
+              price: "$899",
+              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+              imageAlt: "iPhone 15 Plus"
+            }
+          ]}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          useInvertedBackground="invertDefault"
+        />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterLogoReveal
           logoText="iPhone"

src/app/styles/variables.css

@@ -3,20 +3,20 @@
   /* --vw is set by ThemeProvider */
 
   /* --background: #f5f4ef;
-  --card: #dad6cd;
+  --card: #2c3e2f;
-  --foreground: #2a2928;
+  --foreground: #ecf0f1;
-  --primary-cta: #2a2928;
+  --primary-cta: #27ae60;
-  --secondary-cta: #ecebea;
+  --secondary-cta: #2ecc71;
-  --accent: #ffffff;
+  --accent: #34495e;
-  --background-accent: #ffffff; */
+  --background-accent: #2c3e50; */
 
-  --background: #fcf6ec;
+  --background: #1a1a1a;
-  --card: #f3ede2;
+  --card: #2c3e2f;
-  --foreground: #2e2521;
+  --foreground: #ecf0f1;
-  --primary-cta: #2e2521;
+  --primary-cta: #27ae60;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #2ecc71;
-  --accent: #b2a28b;
+  --accent: #34495e;
-  --background-accent: #b2a28b;
+  --background-accent: #2c3e50;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/components/sections/hero/HeroSplit.tsx

@@ -126,6 +126,7 @@ const HeroSplit = ({
     <section
       aria-label={ariaLabel}
       className={cls("relative w-full h-fit py-hero-page-padding md:py-0 md:h-svh flex items-center", className)}
+      style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1920&q=80)', backgroundSize: 'cover', backgroundPosition: 'center' }}
     >
       <HeroBackgrounds {...background} />
       <div className={cls("w-content-width mx-auto flex flex-col md:flex-row gap-13 md:gap-15 items-center relative z-10", containerClassName)}>