src/app/page.tsx

@@ -2,14 +2,14 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import HeroLogo from '@/components/sections/hero/HeroLogo';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
-import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
+import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
 import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
-import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterCard from '@/components/sections/footer/FooterCard';
 import { ArrowRight, Twitter, Linkedin, Dribbble, Github } from 'lucide-react';
 
@@ -43,9 +43,14 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroLogo
-          logoText="WPS Media"
+        <HeroSplitKpi
+          title="WPS Media"
           description="Transforming ideas into stunning digital experiences. We design websites that captivate, engage, and convert."
+          kpiItems={[
+            { value: "150+", label: "Projects Completed" },
+            { value: "98%", label: "Client Satisfaction" },
+            { value: "8+", label: "Years Experience" }
+          ]}
           buttons={[
             { text: "Start Your Project", href: "contact" },
             { text: "View Our Work", href: "portfolio" }
@@ -76,7 +81,7 @@ export default function LandingPage() {
 
       <div id="services" data-section="services" className="py-20 md:py-32">
         <div className="max-w-7xl mx-auto px-6">
-          <FeatureCardTwentySix
+          <FeatureCardTen
             title="Our Design Services"
             description="Comprehensive solutions tailored to elevate your digital presence and drive business growth."
             features={[
@@ -127,7 +132,7 @@ export default function LandingPage() {
 
       <div id="testimonials" data-section="testimonials" className="py-20 md:py-32">
         <div className="max-w-7xl mx-auto px-6">
-          <TestimonialCardSixteen
+          <TestimonialCardThirteen
             title="What Our Clients Say"
             description="Hear from businesses we've helped transform their digital presence."
             testimonials={[
@@ -156,14 +161,9 @@ export default function LandingPage() {
                 imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=4",                imageAlt: "Robert Thompson"
               }
             ]}
-            kpiItems={[
-              { value: "150+", label: "Projects Completed" },
-              { value: "98%", label: "Client Satisfaction" },
-              { value: "8+", label: "Years Experience" }
-            ]}
+            animationType="slide-up"
             textboxLayout="default"
             useInvertedBackground={true}
-            animationType="slide-up"
             tag="Client Success"
             tagAnimation="slide-up"
             buttonAnimation="slide-up"
@@ -229,15 +229,24 @@ export default function LandingPage() {
 
       <div id="cta" data-section="cta" className="py-20 md:py-32">
         <div className="max-w-7xl mx-auto px-6">
-          <ContactText
-            text="Ready to transform your digital presence? Let's create something extraordinary together."
-            buttons={[
-              { text: "Get In Touch", href: "contact" },
-              { text: "Schedule Consultation", href: "#" }
+          <ContactSplitForm
+            title="Get In Touch"
+            description="We'd love to hear from you. Send us a message and we'll respond as soon as possible."
+            inputs={[
+              { name: "name", type: "text", placeholder: "Your Name", required: true },
+              { name: "email", type: "email", placeholder: "Your Email", required: true }
             ]}
-            animationType="entrance-slide"
-            background={{ variant: "plain" }}
+            textarea={{
+              name: "message",              placeholder: "Tell us about your project...",              rows: 5,
+              required: true
+            }}
             useInvertedBackground={true}
+            imageSrc="http://img.b2bpic.net/free-photo/sales-assistant-being-employed-customer-care-support-job-working-telemarketing-call-center-helpdesk-female-receptionist-with-helpline-service-helping-clients-remote-communication_482257-43021.jpg"
+            imageAlt="Contact Us"
+            mediaAnimation="slide-up"
+            mediaPosition="right"
+            buttonText="Send Message"
+            onSubmit={(data) => console.log('Form submitted:', data)}
           />
         </div>
       </div>