Bob AI: change about section to another with image

src/app/page.tsx

@@ -6,7 +6,7 @@ import { Facebook, Heart, Instagram, Twitter, Sparkles, Star } from "lucide-reac
 
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
-import TextAbout from '@/components/sections/about/TextAbout';
+import MediaAbout from '@/components/sections/about/MediaAbout';
 import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
@@ -72,16 +72,19 @@ export default function LandingPage() {
       </div>
 
       <div id="about-section" data-section="about-section">
-        <TextAbout
+        <MediaAbout
           tag="OUR STORY"
           tagIcon={Sparkles}
           tagAnimation="slide-up"
           title="Crafting Timeless Beauty Since 2010"
+          description="Discover the artistry and dedication behind every piece. Our master craftsmen blend traditional techniques with modern innovation to create jewelry that tells your story."
           buttons={[
-            { text: "Explore Our Collections", href: "#products-section" },
-            { text: "Meet Our Artisans", href: "#testimonials-section" },
+            { text: "Explore Our Collections", href: "#products-section", dataWebildId: "btn_explore_collections" },
+            { text: "Meet Our Artisans", href: "#testimonials-section", dataWebildId: "btn_meet_artisans" },
           ]}
           buttonAnimation="slide-up"
+          imageSrc="https://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background_53876-120942.jpg"
+          imageAlt="Klark luxury jewelry craftsmanship"
           useInvertedBackground={false}
         />
       </div>
@@ -151,60 +154,54 @@ export default function LandingPage() {
       <div id="contact-section" data-section="contact-section">
         <ContactSplitForm
           title="Get in Touch with Klark"
-          description="Have questions about our floral arrangements or services? We'd love to hear from you. Fill out the form below and our team will respond within 24 hours."
+          description="Have questions about our floral arrangements or services? We'd love to hear from you. Fill out the form below and our team will respond promptly."
           inputs={[
             {
               name: "name",
               type: "text",
               placeholder: "Your Name",
-              required: true,
-              className: "text-white"
+              required: true
             },
             {
               name: "email",
               type: "email",
               placeholder: "Your Email",
-              required: true,
-              className: "text-white"
+              required: true
             },
             {
               name: "phone",
               type: "tel",
               placeholder: "Your Phone Number",
-              required: false,
-              className: "text-white"
+              required: false
             },
             {
               name: "subject",
               type: "text",
               placeholder: "Subject",
-              required: true,
-              className: "text-white"
+              required: true
             }
           ]}
           textarea={{
             name: "message",
-            placeholder: "Tell us about your floral needs...",
+            placeholder: "Tell us about your event or inquiry...",
             rows: 5,
-            required: true,
-            className: "text-white"
+            required: true
           }}
-          useInvertedBackground={true}
+          useInvertedBackground={false}
           imageSrc="https://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background_53876-120942.jpg"
           imageAlt="Klark Contact Section"
           mediaPosition="right"
           mediaAnimation="fade-in"
           buttonText="Send Message"
-          ariaLabel="Contact form with image"
+          ariaLabel="Contact form section"
           className="py-20"
-          containerClassName="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
+          containerClassName="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"
           contentClassName="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"
-          formCardClassName="bg-black rounded-2xl p-8 shadow-2xl"
-          titleClassName="text-4xl font-bold text-white mb-4"
-          descriptionClassName="text-lg text-gray-300 mb-8"
-          buttonClassName="bg-green-600 hover:bg-green-700 text-white px-8 py-3 rounded-lg font-semibold transition-colors"
-          buttonTextClassName="text-white font-semibold"
-          mediaWrapperClassName="rounded-2xl overflow-hidden shadow-2xl"
+          formCardClassName="bg-white rounded-2xl p-8 shadow-lg"
+          titleClassName="text-4xl font-bold text-gray-900 mb-4"
+          descriptionClassName="text-lg text-gray-600 mb-8"
+          buttonClassName="bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded-lg font-semibold transition-colors"
+          mediaWrapperClassName="rounded-2xl overflow-hidden shadow-xl"
           mediaClassName="w-full h-full object-cover"
         />
       </div>

src/app/styles/variables.css

@@ -3,22 +3,22 @@
   /* --vw is set by ThemeProvider */
 
   /* --background: #f7f6f7;;
-  --card: #1a1a1a;;
+  --card: #1a0d0d;;
   --foreground: #ffffff;;
-  --primary-cta: #cc0000;;
-  --secondary-cta: #ffffff;;
-  --accent: #00ff00;;
-  --background-accent: #006600;; */
+  --primary-cta: #ff0000;;
+  --secondary-cta: #cc0000;;
+  --accent: #ff0000;;
+  --background-accent: #330000;; */
 
   --background: #0d0d0d;;
-  --card: #1a1a1a;;
+  --card: #1a0d0d;;
   --foreground: #ffffff;;
-  --primary-cta: #cc0000;;
+  --primary-cta: #ff0000;;
   --primary-cta-text: #f7f6f7;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #cc0000;;
   --secondary-cta-text: #250c0d;;
-  --accent: #00ff00;;
-  --background-accent: #006600;;
+  --accent: #ff0000;;
+  --background-accent: #330000;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);