Bob AI: change color theme to green and yellow

Merge version_3 into main

src/app/page.tsx

@@ -6,11 +6,11 @@ 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 TextAbout from '@/components/sections/about/TextAbout';
+import SplitAbout from '@/components/sections/about/SplitAbout';
 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() {
@@ -59,7 +59,7 @@ export default function LandingPage() {
           buttonAnimation="slide-up"
           carouselItems={[
             { id: "carousel-item-1", imageSrc: "https://img.b2bpic.net/free-photo/little-bouquet-peonies-stands-tall-vase-with-water_8353-762.jpg", imageAlt: "Elegant red rose arrangement" },
-            { id: "carousel-item-2", imageSrc: "https://img.b2bpic.net/free-photo/spring-composition-with-bouquet-flowers-vase-closeup_169016-29760.jpg?_wi=1", imageAlt: "Soft pastel floral centerpiece" },
+            { id: "carousel-item-2", videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3A47KqSdGj7sEG8mcGU4TIVm5ml/uploaded-1771850674704-2zcygfwe.mp4", imageAlt: "Soft pastel floral centerpiece" },
             { id: "carousel-item-3", imageSrc: "https://img.b2bpic.net/free-photo/view-delicate-white-roses-bouquet-vase_23-2150539964.jpg", imageAlt: "Vintage-style floral decor" },
             { id: "carousel-item-4", imageSrc: "https://img.b2bpic.net/free-photo/plant-nature-fresh-vase-color_1203-5016.jpg", imageAlt: "Modern minimalist bouquet" },
             { id: "carousel-item-5", imageSrc: "https://img.b2bpic.net/free-photo/view-flowers-transparent-glass-with-water-drops_23-2149478596.jpg", imageAlt: "Luxurious wedding floral setup" },
@@ -72,17 +72,50 @@ export default function LandingPage() {
       </div>
 
       <div id="about-section" data-section="about-section">
-        <TextAbout
+        <SplitAbout
-          tag="OUR STORY"
+          tag="ABOUT KLARK"
           tagIcon={Sparkles}
           tagAnimation="slide-up"
-          title="Crafting Timeless Beauty Since 2010"
+          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."
           buttons={[
-            { text: "Explore Our Collections", href: "#products-section" },
+            { label: "View Our Work", href: "#portfolio-section", dataWebildId: "btn_klark_portfolio" },
-            { text: "Meet Our Artisans", href: "#testimonials-section" },
+            { label: "Get In Touch", href: "#contact-section", dataWebildId: "btn_klark_contact" }
           ]}
           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>
 
@@ -149,37 +182,63 @@ export default function LandingPage() {
       </div>
 
       <div id="contact-section" data-section="contact-section">
-        <ContactFaq
+        <ContactSplitForm
-          faqs={[
+          title="Get in Touch with Klark"
-            { 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." },
+          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-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." },
+          inputs={[
-            { 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." },
+              name: "name",
+              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"
+            }
           ]}
-          ctaTitle="Ready to Bring Elegance to Your Event?"
+          textarea={{
-          ctaDescription="Let us craft the perfect floral experience for your special moments."
+            name: "message",
-          ctaButton={{ text: "Book a Consultation", href: "#about-section" }}
+            placeholder: "Tell us about your floral needs...",
-          ctaIcon={Heart}
+            rows: 5,
-          useInvertedBackground={false}
+            required: true,
-          animationType="slide-up"
+            className: "text-white"
-          accordionAnimationType="smooth"
+          }}
-          showCard={true}
+          useInvertedBackground={true}
-          ariaLabel="Contact and FAQ section"
+          imageSrc="https://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background_53876-120942.jpg"
-          className="py-16"
+          imageAlt="Klark Contact Section"
-          containerClassName="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"
+          mediaPosition="right"
-          ctaPanelClassName="bg-gradient-to-r from-gray-50 to-red-50 rounded-2xl p-8 shadow-lg mb-12"
+          mediaAnimation="fade-in"
-          ctaIconClassName="text-red-500 w-12 h-12 mb-4"
+          buttonText="Send Message"
-          ctaTitleClassName="text-3xl font-bold text-gray-900 mb-4"
+          ariaLabel="Contact form with image"
-          ctaDescriptionClassName="text-lg text-gray-700 mb-6"
+          className="py-20"
-          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"
+          containerClassName="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
-          faqsPanelClassName="bg-white rounded-xl shadow-md overflow-hidden"
+          contentClassName="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"
-          faqsContainerClassName="divide-y divide-gray-200"
+          formCardClassName="bg-black rounded-2xl p-8 shadow-2xl"
-          accordionClassName="transition-all duration-300"
+          titleClassName="text-4xl font-bold text-white mb-4"
-          accordionTitleClassName="text-lg font-semibold text-gray-900 flex justify-between items-center w-full py-4 px-6"
+          descriptionClassName="text-lg text-gray-300 mb-8"
-          accordionIconContainerClassName="flex-shrink-0 ml-4"
+          buttonClassName="bg-green-600 hover:bg-green-700 text-white px-8 py-3 rounded-lg font-semibold transition-colors"
-          accordionIconClassName="w-5 h-5 text-red-500 transition-transform duration-300"
+          buttonTextClassName="text-white font-semibold"
-          accordionContentClassName="px-6 pb-4 text-gray-600"
+          mediaWrapperClassName="rounded-2xl overflow-hidden shadow-2xl"
-          separatorClassName="border-t border-gray-200 my-4"
+          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: #ffffff;;
+  --card: #1a2d1a;;
-  --foreground: #250c0d;;
+  --foreground: #ffffff;;
-  --primary-cta: #b82b40;;
+  --primary-cta: #00ff00;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #ffff00;;
-  --accent: #b90941;;
+  --accent: #ffff00;;
-  --background-accent: #e8a8b6;; */
+  --background-accent: #003300;; */
 
-  --background: #f7f6f7;;
+  --background: #0d1a0d;;
-  --card: #ffffff;;
+  --card: #1a2d1a;;
-  --foreground: #250c0d;;
+  --foreground: #ffffff;;
-  --primary-cta: #b82b40;;
+  --primary-cta: #00ff00;;
   --primary-cta-text: #f7f6f7;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #ffff00;;
   --secondary-cta-text: #250c0d;;
-  --accent: #b90941;;
+  --accent: #ffff00;;
-  --background-accent: #e8a8b6;;
+  --background-accent: #003300;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);