From 590c04446c18163c2d09ef78154bdbcce249cd7d Mon Sep 17 00:00:00 2001
From: kudindmitriy <kudin.dima@gmail.com>
Date: Tue, 24 Feb 2026 15:56:12 +0000
Subject: [PATCH] Bob AI: change contact form to another with image

---
 src/app/page.tsx | 78 ++++++++++++++++++++++++++++++------------------
 1 file changed, 49 insertions(+), 29 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9445fb6..274b5e4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,7 +10,7 @@ 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';
-import ContactFaq from '@/components/sections/contact/ContactFaq';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterCard from '@/components/sections/footer/FooterCard';
 
 export default function LandingPage() {
@@ -149,37 +149,57 @@ export default function LandingPage() {
       </div>
 
       <div id="contact-section" data-section="contact-section">
-        <ContactFaq
-          faqs={[
-            { id: "faq-1", title: "How do I place an order for custom floral arrangements?", content: "Simply browse our collection, select your preferred arrangements, and customize them according to your event needs. Our team will work closely with you to ensure every detail aligns with your vision." },
-            { id: "faq-2", title: "What is your delivery policy?", content: "We offer nationwide delivery services with flexible scheduling options. Our delivery team ensures your arrangements arrive fresh and beautifully packaged, ready to impress." },
-            { id: "faq-3", title: "Can I request a specific flower type or color scheme?", content: "Absolutely! We specialize in custom arrangements. Just let us know your preferences, and we'll source the finest blooms to match your unique style and occasion." },
-            { id: "faq-4", title: "Do you provide arrangements for corporate events?", content: "Yes, we design stunning floral installations tailored for corporate settings. From boardroom decorations to grand openings, our arrangements elevate any professional environment." },
+        <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 promptly."
+          inputs={[
+            {
+              name: "name",
+              type: "text",
+              placeholder: "Your Name",
+              required: true
+            },
+            {
+              name: "email",
+              type: "email",
+              placeholder: "Your Email",
+              required: true
+            },
+            {
+              name: "phone",
+              type: "tel",
+              placeholder: "Your Phone Number",
+              required: false
+            },
+            {
+              name: "subject",
+              type: "text",
+              placeholder: "Subject",
+              required: true
+            }
           ]}
-          ctaTitle="Ready to Bring Elegance to Your Event?"
-          ctaDescription="Let us craft the perfect floral experience for your special moments."
-          ctaButton={{ text: "Book a Consultation", href: "#about-section" }}
-          ctaIcon={Heart}
+          textarea={{
+            name: "message",
+            placeholder: "Tell us about your event or inquiry...",
+            rows: 5,
+            required: true
+          }}
           useInvertedBackground={false}
-          animationType="slide-up"
-          accordionAnimationType="smooth"
-          showCard={true}
-          ariaLabel="Contact and FAQ section"
-          className="py-16"
+          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 section"
+          className="py-20"
           containerClassName="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"
-          ctaPanelClassName="bg-gradient-to-r from-gray-50 to-red-50 rounded-2xl p-8 shadow-lg mb-12"
-          ctaIconClassName="text-red-500 w-12 h-12 mb-4"
-          ctaTitleClassName="text-3xl font-bold text-gray-900 mb-4"
-          ctaDescriptionClassName="text-lg text-gray-700 mb-6"
-          ctaButtonClassName="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-red-600 hover:bg-red-700 transition-colors duration-300"
-          faqsPanelClassName="bg-white rounded-xl shadow-md overflow-hidden"
-          faqsContainerClassName="divide-y divide-gray-200"
-          accordionClassName="transition-all duration-300"
-          accordionTitleClassName="text-lg font-semibold text-gray-900 flex justify-between items-center w-full py-4 px-6"
-          accordionIconContainerClassName="flex-shrink-0 ml-4"
-          accordionIconClassName="w-5 h-5 text-red-500 transition-transform duration-300"
-          accordionContentClassName="px-6 pb-4 text-gray-600"
-          separatorClassName="border-t border-gray-200 my-4"
+          contentClassName="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"
+          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>