Update src/app/page.tsx

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 ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import ContactFaq from '@/components/sections/contact/ContactFaq';
 import FooterCard from '@/components/sections/footer/FooterCard';
 
 export default function LandingPage() {
@@ -149,63 +149,37 @@ export default function LandingPage() {
       </div>
 
       <div id="contact-section" data-section="contact-section">
-        <ContactSplitForm
+        <ContactFaq
-          title="Get in Touch with Klark"
+          faqs={[
-          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."
+            { 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." },
-          inputs={[
+            { 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." },
-              name: "name",
+            { 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." },
-              type: "text",
-              placeholder: "Your Name",
-              required: true,
-              className: "text-white"
-            },
-            {
-              name: "email",
-              type: "email",
-              placeholder: "Your Email",
-              required: true,
-              className: "text-white"
-            },
-            {
-              name: "phone",
-              type: "tel",
-              placeholder: "Your Phone Number",
-              required: false,
-              className: "text-white"
-            },
-            {
-              name: "subject",
-              type: "text",
-              placeholder: "Subject",
-              required: true,
-              className: "text-white"
-            }
           ]}
-          textarea={{
+          ctaTitle="Ready to Bring Elegance to Your Event?"
-            name: "message",
+          ctaDescription="Let us craft the perfect floral experience for your special moments."
-            placeholder: "Tell us about your floral needs...",
+          ctaButton={{ text: "Book a Consultation", href: "#about-section" }}
-            rows: 5,
+          ctaIcon={Heart}
-            required: true,
+          useInvertedBackground={false}
-            className: "text-white"
+          animationType="slide-up"
-          }}
+          accordionAnimationType="smooth"
-          useInvertedBackground={true}
+          showCard={true}
-          imageSrc="https://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background_53876-120942.jpg"
+          ariaLabel="Contact and FAQ section"
-          imageAlt="Klark Contact Section"
+          className="py-16"
-          mediaPosition="right"
+          containerClassName="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"
-          mediaAnimation="fade-in"
+          ctaPanelClassName="bg-gradient-to-r from-gray-50 to-red-50 rounded-2xl p-8 shadow-lg mb-12"
-          buttonText="Send Message"
+          ctaIconClassName="text-red-500 w-12 h-12 mb-4"
-          ariaLabel="Contact form with image"
+          ctaTitleClassName="text-3xl font-bold text-gray-900 mb-4"
-          className="py-20"
+          ctaDescriptionClassName="text-lg text-gray-700 mb-6"
-          containerClassName="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
+          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"
-          contentClassName="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"
+          faqsPanelClassName="bg-white rounded-xl shadow-md overflow-hidden"
-          formCardClassName="bg-black rounded-2xl p-8 shadow-2xl"
+          faqsContainerClassName="divide-y divide-gray-200"
-          titleClassName="text-4xl font-bold text-white mb-4"
+          accordionClassName="transition-all duration-300"
-          descriptionClassName="text-lg text-gray-300 mb-8"
+          accordionTitleClassName="text-lg font-semibold text-gray-900 flex justify-between items-center w-full py-4 px-6"
-          buttonClassName="bg-green-600 hover:bg-green-700 text-white px-8 py-3 rounded-lg font-semibold transition-colors"
+          accordionIconContainerClassName="flex-shrink-0 ml-4"
-          buttonTextClassName="text-white font-semibold"
+          accordionIconClassName="w-5 h-5 text-red-500 transition-transform duration-300"
-          mediaWrapperClassName="rounded-2xl overflow-hidden shadow-2xl"
+          accordionContentClassName="px-6 pb-4 text-gray-600"
-          mediaClassName="w-full h-full object-cover"
+          separatorClassName="border-t border-gray-200 my-4"
         />
       </div>
 

src/app/styles/variables.css

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