src/app/page.tsx

@@ -2,15 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
-import FaqBase from '@/components/sections/faq/FaqBase';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
 import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
-import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
-import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
 import TextAbout from '@/components/sections/about/TextAbout';
 import { CheckCircle, Server, Users, Shield, Lock, Zap, Gauge } from "lucide-react";
 
@@ -93,14 +93,15 @@ export default function LandingPage() {
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardThree
+      <MetricCardOne
       animationType="depth-3d"
       textboxLayout="default"
+      gridVariant="bento-grid"
       useInvertedBackground={false}
       metrics={[
-        { id: "1", title: "Apps Delivered", value: "150+", icon: CheckCircle },
-        { id: "2", title: "System Uptime", value: "99.99%", icon: Server },
-        { id: "3", title: "Global Users", value: "2.5M+", icon: Users },
+        { id: "1", title: "Apps Delivered", description: "Custom software solutions built for scale.", value: "150+", icon: CheckCircle },
+        { id: "2", title: "System Uptime", description: "Reliable performance for enterprise apps.", value: "99.99%", icon: Server },
+        { id: "3", title: "Global Users", description: "Empowering millions across the globe.", value: "2.5M+", icon: Users },
       ]}
       title="Engineered for Results"
       description="The impact of our work is measured by the growth of our partners."
@@ -108,21 +109,21 @@ export default function LandingPage() {
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwelve
-      cardAnimation="slide-up"
+      <TestimonialCardTwo
+      animationType="depth-3d"
+      textboxLayout="split"
       useInvertedBackground={false}
-      cardTitle="Partner Feedback"
-      cardTag="Testimonials"
+      title="Partner Feedback"
       testimonials={[
-        { id: "1", name: "Elena Ross", imageSrc: "http://img.b2bpic.net/free-photo/financial-department-team-leader-researching-marketing-ideas-while-analyzing-company-expenses-report-startup-project-manager-developing-budget-growth-solutions-while-brainstorming-promoting-strategy_482257-38904.jpg" },
-        { id: "2", name: "Mark Chen", imageSrc: "http://img.b2bpic.net/free-photo/serious-father-posing-with-arms-crossed_23-2148414861.jpg" },
-        { id: "3", name: "Sophia V", imageSrc: "http://img.b2bpic.net/free-photo/videographer-smiling-camera-working-computer-editing-video-footage-audio-app-sitting-mo_482257-2649.jpg" },
+        { id: "1", name: "Elena Ross", role: "CTO", testimonial: "The engineering depth and 3D design integration exceeded all expectations.", imageSrc: "http://img.b2bpic.net/free-photo/financial-department-team-leader-researching-marketing-ideas-while-analyzing-company-expenses-report-startup-project-manager-developing-budget-growth-solutions-while-brainstorming-promoting-strategy_482257-38904.jpg" },
+        { id: "2", name: "Mark Chen", role: "Product Manager", testimonial: "Seamless communication and high-performance delivery at every stage.", imageSrc: "http://img.b2bpic.net/free-photo/serious-father-posing-with-arms-crossed_23-2148414861.jpg" },
+        { id: "3", name: "Sophia V", role: "Founder", testimonial: "Truly transformative technology that helped our business pivot and scale.", imageSrc: "http://img.b2bpic.net/free-photo/videographer-smiling-camera-working-computer-editing-video-footage-audio-app-sitting-mo_482257-2649.jpg" },
       ]}
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqBase
+      <FaqSplitMedia
       faqs={[
         { id: "1", title: "How do you handle project timelines?", content: "We follow agile methodologies to ensure clear milestones and rapid delivery." },
         { id: "2", title: "Can you scale existing applications?", content: "Absolutely, optimization and scaling is one of our primary core competencies." },
@@ -133,14 +134,16 @@ export default function LandingPage() {
       faqsAnimation="blur-reveal"
       textboxLayout="split"
       useInvertedBackground={false}
+      imageSrc="http://img.b2bpic.net/free-photo/data-center-programmers-doing-brainstorming-setting-up-machine-learning-systems_482257-126248.jpg"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
-      text="Let's Engineer Your Vision - Get in touch with us today."
+      <ContactSplit
+      tag="Contact"
+      title="Let's Engineer Your Vision"
+      description="Get in touch with us today to start your digital journey."
       background={{ variant: "rotated-rays-animated" }}
-      buttons={[{ text: "Contact Our Team", href: "#" }]}
       useInvertedBackground={false}
     />
   </div>
@@ -157,4 +160,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -13,12 +13,12 @@
   --background: #000000;
   --card: #0c0c0c;
   --foreground: #ffffff;
-  --primary-cta: #cee7ff;
+  --primary-cta: #106EFB;
   --primary-cta-text: #000000;
   --secondary-cta: #000000;
   --secondary-cta-text: #ffffff;
   --accent: #535353;
-  --background-accent: #CEE7FF;
+  --background-accent: #106EFB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);