Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -6,7 +6,7 @@ import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleC
 import SplitAbout from "@/components/sections/about/SplitAbout";
 import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
 import TeamCardTwo from "@/components/sections/team/TeamCardTwo";
-import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
 import FooterSimple from "@/components/sections/footer/FooterSimple";
 import { Award, BarChart3, Brain, Github, Linkedin, Mail, Sparkles, Target, Users, Zap } from "lucide-react";
 
@@ -128,30 +128,29 @@ export default function LandingPage() {
           members={[
             { id: "1", name: "Alex Thompson", role: "Creative Director", description: "10+ years of experience in brand strategy and luxury design. Obsessed with positioning and visual storytelling.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB1UWtLhV4bdAZs5YAnJqZZmEU/professional-headshot-of-a-talented-desi-1774031217802-8e82cb96.png", imageAlt: "Professional headshot of a talented designer or developer. Modern office environment with tech eleme", socialLinks: [{ icon: Linkedin, url: "https://linkedin.com" }, { icon: Mail, url: "mailto:alex@example.com" }] }
           ]}
-          buttons={[
-            { text: "Join Our Team", href: "#contact" }
-          ]}
           buttonAnimation="slide-up"
           ariaLabel="Team members section"
         />
       </div>
 
       <div id="contact" data-section="contact">
-        <ContactSplitForm
+        <HeroBillboardCarousel
           title="Ready to Elevate Your Brand?"
-          description="Let's discuss your project. Fill out the form below and our team will reach out within 24 hours."
-          useInvertedBackground={true}
-          mediaAnimation="slide-up"
-          mediaPosition="right"
-          inputs={[
-            { name: "fullName", type: "text", placeholder: "Your Name", required: true },
-            { name: "email", type: "email", placeholder: "your@email.com", required: true },
-            { name: "company", type: "text", placeholder: "Company Name", required: false },
-            { name: "phone", type: "tel", placeholder: "Phone Number", required: false }
+          description="Let's discuss your project. Get in touch with our team to learn how we can transform your vision into reality."
+          tag="Get Started"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          buttons={[
+            { text: "Schedule Call", href: "mailto:hello@webild.com" },
+            { text: "View Portfolio", href: "#features" }
           ]}
-          textarea={{ name: "message", placeholder: "Tell us about your project...", rows: 5, required: true }}
-          buttonText="Send Message"
-          ariaLabel="Contact form section"
+          buttonAnimation="slide-up"
+          background={{ variant: "radial-gradient" }}
+          mediaItems={[
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB1UWtLhV4bdAZs5YAnJqZZmEU/a-sleek-modern-web-design-interface-disp-1774031218288-878bcd07.png?_wi=1", imageAlt: "Professional contact section imagery" },
+            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BB1UWtLhV4bdAZs5YAnJqZZmEU/a-creative-agency-workspace-with-modern--1774031218049-f5713d8d.png?_wi=1", imageAlt: "Creative workspace for contact section" }
+          ]}
+          ariaLabel="Contact section with hero layout"
         />
       </div>