Bob AI: change contact form 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 SplitAbout from '@/components/sections/about/SplitAbout';
+import TextAbout from '@/components/sections/about/TextAbout';
 import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
@@ -72,50 +72,17 @@ export default function LandingPage() {
       </div>
 
       <div id="about-section" data-section="about-section">
-        <SplitAbout
-          tag="ABOUT KLARK"
+        <TextAbout
+          tag="OUR STORY"
           tagIcon={Sparkles}
           tagAnimation="slide-up"
-          title="Redefining Modern Design Excellence"
-          titleSegments={[
-            { text: "Redefining", color: "text-green-500" },
-            { text: "Modern Design Excellence" }
-          ]}
-          description="At Klark, we believe exceptional design transforms spaces and elevates experiences. Since our founding, we've been committed to creating innovative solutions that blend aesthetics with functionality, delivering products that inspire and endure."
+          title="Crafting Timeless Beauty Since 2010"
           buttons={[
-            { label: "View Our Work", href: "#portfolio-section", dataWebildId: "btn_klark_portfolio" },
-            { label: "Get In Touch", href: "#contact-section", dataWebildId: "btn_klark_contact" }
+            { text: "Explore Our Collections", href: "#products-section" },
+            { text: "Meet Our Artisans", href: "#testimonials-section" },
           ]}
           buttonAnimation="slide-up"
-          bulletPoints={[
-            {
-              title: "Innovative Design",
-              description: "Cutting-edge solutions that push creative boundaries",
-              icon: Sparkles
-            },
-            {
-              title: "Quality Craftsmanship",
-              description: "Meticulous attention to detail in every creation",
-              icon: Sparkles
-            },
-            {
-              title: "Sustainable Practices",
-              description: "Environmentally conscious production methods",
-              icon: Sparkles
-            },
-            {
-              title: "Client-Focused",
-              description: "Your vision drives our creative process",
-              icon: Sparkles
-            }
-          ]}
-          imageSrc="https://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background_53876-120942.jpg"
-          imageAlt="Klark design showcase"
-          imagePosition="right"
-          mediaAnimation="slide-up"
-          textboxLayout="default"
           useInvertedBackground={false}
-          ariaLabel="About Klark design studio"
         />
       </div>
 
@@ -184,60 +151,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: #1a2d1a;;
+  --card: #1a0d0d;;
   --foreground: #ffffff;;
-  --primary-cta: #00ff00;;
-  --secondary-cta: #ffff00;;
-  --accent: #ffff00;;
-  --background-accent: #003300;; */
+  --primary-cta: #ff0000;;
+  --secondary-cta: #cc0000;;
+  --accent: #ff0000;;
+  --background-accent: #330000;; */
 
-  --background: #0d1a0d;;
-  --card: #1a2d1a;;
+  --background: #0d0d0d;;
+  --card: #1a0d0d;;
   --foreground: #ffffff;;
-  --primary-cta: #00ff00;;
+  --primary-cta: #ff0000;;
   --primary-cta-text: #f7f6f7;;
-  --secondary-cta: #ffff00;;
+  --secondary-cta: #cc0000;;
   --secondary-cta-text: #250c0d;;
-  --accent: #ffff00;;
-  --background-accent: #003300;;
+  --accent: #ff0000;;
+  --background-accent: #330000;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);