Bob AI: Move contact-section section to /with page

Merge version_3 into main

src/app/page.tsx

@@ -4,11 +4,9 @@ import React from 'react';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
-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 FooterMedia from '@/components/sections/footer/FooterMedia';
 import { Award, Guitar, Hammer, MessageCircle, Mic, Music, Sparkles, Star } from "lucide-react";
 
@@ -54,27 +52,12 @@ export default function LandingPage() {
               { text: "Learn More", href: "#about-section" },
             ]}
             buttonAnimation="slide-up"
-            imageSrc="https://img.b2bpic.net/free-photo/electronic-piano-guitar-room-interior_169016-20867.jpg"
+            videoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A47KqSdGj7sEG8mcGU4TIVm5ml/uploaded-1771860987566-afmvzen0.mp4"
             imageAlt="Premium musical instruments displayed elegantly"
             ariaLabel="Hero section featuring premium musical instruments"
           />
         </div>
 
-        <div id="about-section" data-section="about-section" className="w-full">
-          <TextAbout
-            tag="OUR STORY"
-            tagIcon={Music}
-            tagAnimation="slide-up"
-            title="Crafted for Passionate Musicians"
-            buttons={[
-              { text: "Explore Instruments", href: "#products-section" },
-              { text: "Learn More", href: "#features-section" },
-            ]}
-            buttonAnimation="slide-up"
-            useInvertedBackground={true}
-          />
-        </div>
-
         <div id="features-section" data-section="features-section" className="w-full">
           <FeatureCardTwentyFive
             features={[
@@ -170,41 +153,6 @@ 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." },
-            ]}
-            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"
-            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"
-          />
-        </div>
-
         <div id="footer-section" data-section="footer-section" className="w-full">
           <FooterMedia
             imageSrc="https://img.b2bpic.net/free-photo/acoustic-guitar-recording-studio-room-musicians-rehearsals_169016-3805.jpg"

src/app/with/page.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+
+export default function WithPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="expand-hover"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="compact"
+      sizing="largeSmallSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="layered"
+      headingFontWeight="light">
+      <main>
+        <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"
+              }
+            ]}
+            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"
+            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>
+      </main>
+    </ThemeProvider>
+  );
+}