src/app/page.tsx

@@ -2,10 +2,10 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
-import FooterCard from '@/components/sections/footer/FooterCard';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
 import HeroLogo from '@/components/sections/hero/HeroLogo';
 import MediaAbout from '@/components/sections/about/MediaAbout';
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
@@ -13,7 +13,7 @@ import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleAp
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TeamCardTen from '@/components/sections/team/TeamCardTen';
 import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
-import { Award, CheckCircle, TrendingUp } from "lucide-react";
+import { Award, CheckCircle, TrendingUp, Mail } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -151,43 +151,41 @@ export default function LandingPage() {
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="split"
-      useInvertedBackground={true}
+      <FaqSplitText
+      sideTitle="Frequently Asked Questions"
+      sideDescription="Get answers to everything you need to know."
       faqs={[
         { id: "q1", title: "How do we start?", content: "Just schedule a call via our contact form." },
         { id: "q2", title: "What is the timeline?", content: "Depends on scope, typically 4-8 weeks." },
         { id: "q3", title: "Do you offer maintenance?", content: "Yes, we offer ongoing support packages." }
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/vivid-blurred-colorful-wallpaper-background_58702-3920.jpg"
-      mediaAnimation="slide-up"
-      title="Frequently Asked Questions"
-      description="Get answers to everything you need to know."
       faqsAnimation="blur-reveal"
+      useInvertedBackground={true}
+      animationType="smooth"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplit
-      useInvertedBackground={false}
-      background={{ variant: "canvas-reveal" }}
+      <ContactCTA
       tag="Contact"
       title="Let's Build Together"
       description="Ready to launch your project? Let's discuss your vision today."
-      buttonText="Get Started"
-      imageSrc="http://img.b2bpic.net/free-photo/abstract-technology-background-concept_1194-617406.jpg"
-      imageAlt="abstract technology background concept"
-      mediaAnimation="slide-up"
+      buttons={[{ text: "Get Started", href: "#" }]}
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterCard
-      logoText="Vortex"
-      copyrightText="© 2025 Vortex Agency. All rights reserved."
+      <FooterSimple
+      columns={[
+          { title: "Agency", items: [{ label: "About" }, { label: "Team" }] },
+          { title: "Support", items: [{ label: "FAQ" }, { label: "Contact" }] }
+      ]}
+      bottomLeftText="© 2025 Vortex Agency"
+      bottomRightText="Built with passion"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #030128;
-  --card: #241f48;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
   --foreground: #ffffff;
-  --primary-cta: #ffffff;
+  --primary-cta: #1f7cff;
   --primary-cta-text: #030128;
-  --secondary-cta: #131136;
+  --secondary-cta: #010101;
   --secondary-cta-text: #d5d4f6;
-  --accent: #44358a;
-  --background-accent: #b597fe;
+  --accent: #1f7cff;
+  --background-accent: #f96b2f;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);