From 67ef63e364555ed522e5e6b3d8a1921f404f8990 Mon Sep 17 00:00:00 2001
From: kudindmitriy <kudin.dima@gmail.com>
Date: Tue, 24 Feb 2026 16:13:11 +0000
Subject: [PATCH] Bob AI: change contact form to another with image

---
 src/app/page.tsx | 74 ++++++++++++++++++++++++++++--------------------
 1 file changed, 44 insertions(+), 30 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 991d9c3..f239902 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -8,7 +8,7 @@ import TextAbout from '@/components/sections/about/TextAbout';
 import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
-import ContactFaq from '@/components/sections/contact/ContactFaq';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 import { Award, Guitar, Hammer, MessageCircle, Mic, Music, Sparkles, Star } from "lucide-react";
 
@@ -170,38 +170,52 @@ export default function LandingPage() {
           />
         </div>
 
-        <div id="contact-section" data-section="contact-section" className="w-full">
-          <ContactFaq
-            faqs={[
-              { id: "faq-1", title: "What payment methods do you accept?", content: "We accept all major credit cards, PayPal, and bank transfers for larger purchases. All transactions are secured with 256-bit SSL encryption." },
-              { id: "faq-2", title: "Do you offer international shipping?", content: "Yes, we ship worldwide. Shipping times vary by destination, but most international orders arrive within 5-10 business days." },
-              { id: "faq-3", title: "What is your return policy?", content: "We offer a 30-day money-back guarantee on all instruments. Items must be returned in original condition with all accessories included." },
-              { id: "faq-4", title: "How can I schedule an in-store consultation?", content: "Visit our store or call us to book a personalized session with one of our expert technicians. We recommend scheduling at least 24 hours in advance." },
+        <div id="contact-section" data-section="contact-section">
+          <ContactSplitForm
+            title="Get in Touch with No Song"
+            description="Have questions about our instruments or need expert advice? Our team is here to help you find the perfect sound for your musical journey."
+            inputs={[
+              {
+                name: "name",
+                type: "text",
+                placeholder: "Your Name",
+                required: true
+              },
+              {
+                name: "email",
+                type: "email",
+                placeholder: "Your Email",
+                required: true
+              },
+              {
+                name: "phone",
+                type: "tel",
+                placeholder: "Phone Number"
+              }
             ]}
-            ctaTitle="Have questions about our instruments?"
-            ctaDescription="Our team of experts is ready to help you find the perfect instrument for your musical journey."
-            ctaButton={{ text: "Contact Us Now", href: "#contact-section" }}
-            ctaIcon={MessageCircle}
-            useInvertedBackground={true}
-            animationType="slide-up"
-            accordionAnimationType="smooth"
-            showCard={true}
-            ariaLabel="Contact and FAQ section"
+            textarea={{
+              name: "message",
+              placeholder: "Tell us about your musical interests and how we can help...",
+              rows: 5,
+              required: true
+            }}
+            useInvertedBackground={false}
+            imageSrc="https://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background_53876-120942.jpg"
+            imageAlt="No Song Musical Instruments Store"
+            mediaPosition="right"
+            mediaAnimation="fade-in"
+            buttonText="Send Message"
+            ariaLabel="Contact form for No Song musical instruments store"
             className="py-16"
             containerClassName="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"
-            ctaPanelClassName="bg-red-50 rounded-xl p-8 text-center mb-12"
-            ctaIconClassName="w-12 h-12 text-red-600 mx-auto mb-4"
-            ctaTitleClassName="text-2xl font-bold text-gray-900 mb-2"
-            ctaDescriptionClassName="text-gray-600 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-200"
-            faqsPanelClassName="bg-white rounded-lg shadow-sm overflow-hidden"
-            faqsContainerClassName="divide-y divide-gray-200"
-            accordionClassName="transition-all duration-200"
-            accordionTitleClassName="text-lg font-semibold text-gray-900 flex items-center justify-between w-full py-4"
-            accordionIconContainerClassName="flex-shrink-0 ml-4"
-            accordionIconClassName="w-5 h-5 text-red-600 transition-transform duration-200"
-            accordionContentClassName="pb-4 text-gray-600"
-            separatorClassName="border-t border-gray-200"
+            contentClassName="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"
+            formCardClassName="bg-white rounded-lg shadow-lg p-8"
+            titleClassName="text-3xl font-bold text-gray-900 mb-4"
+            descriptionClassName="text-gray-600 mb-8"
+            buttonClassName="w-full bg-red-600 hover:bg-red-700 text-white font-semibold py-3 px-6 rounded-lg transition-colors"
+            buttonTextClassName="text-white"
+            mediaWrapperClassName="rounded-lg overflow-hidden shadow-lg"
+            mediaClassName="w-full h-auto object-cover"
           />
         </div>