Update src/app/page.tsx

Merge version_1 into main

src/app/client/welcome/page.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Layout, Palette, Globe, Search, Package } from "lucide-react";
+
+export default function ClientWelcomePage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="elastic-effect"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        contentWidth="mediumLarge"
+        sizing="largeSmallSizeMediumTitles"
+        background="circleGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Services", id: "/services" },
+              { name: "Packages", id: "/packages" },
+              { name: "Contact", id: "/contact" },
+              { name: "Client Area", id: "/client/welcome" },
+            ]}
+            brandName="eXpand AD"
+            button={{ text: "Get a Quote", href: "/contact" }}
+          />
+        </div>
+
+        <div id="welcome-hero" data-section="welcome-hero">
+          <HeroLogo
+            logoText="Welcome, Valued Client!"
+            description="Manage your services, track progress, and easily request new projects. Your digital success journey continues here."
+            buttons={[
+              { text: "Request New Service", href: "#quick-actions" },
+              { text: "View My Packages", href: "/packages" }
+            ]}
+            buttonAnimation="opacity"
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EGGCvVCm4u8utjw85nJMComrpQ/uploaded-1779798279956-g5hmrms3.png?_wi=2"
+            imageAlt="Abstract digital network illustration"
+            showDimOverlay={true}
+          />
+        </div>
+
+        <div id="quick-actions" data-section="quick-actions">
+          <FeatureCardTwentySix
+            textboxLayout="default"
+            useInvertedBackground={false}
+            features={[
+              {
+                title: "Branding Service Request",                description: "Initiate a new branding project or request updates to your existing brand assets.",                imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345450.jpg?_wi=3",                imageAlt: "Graphic design workspace with brand guideline document",                buttonIcon: Palette,
+                buttonHref: "/client/request/branding"
+              },
+              {
+                title: "Website Service Request",                description: "Submit a request for a new website design, development, or updates to your current site.",                imageSrc: "http://img.b2bpic.net/free-photo/digital-transformation-concept-made-with-digital-tablet_23-2149176461.jpg",                imageAlt: "Digital tablet showing website transformation",                buttonIcon: Globe,
+                buttonHref: "/client/request/website"
+              },
+              {
+                title: "SEO Service Request",                description: "Improve your search engine rankings and online visibility with a new SEO project.",                imageSrc: "http://img.b2bpic.net/free-photo/tablet-with-graphics-blue-tones_1134-384.jpg?_wi=2",                imageAlt: "Digital analytics dashboard showing SEO insights",                buttonIcon: Search,
+                buttonHref: "/client/request/seo"
+              },
+              {
+                title: "View Current Packages",                description: "Review details of your subscribed packages and explore available upgrades or add-ons.",                imageSrc: "http://img.b2bpic.net/free-photo/online-marketing_53876-176744.jpg",                imageAlt: "Online marketing strategy illustration",                buttonIcon: Package,
+                buttonHref: "/packages"
+              }
+            ]}
+            title="Your Service Hub"
+            description="Quickly access common actions and manage your digital marketing needs."
+            tag="Quick Actions"
+            tagIcon={Layout}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="eXpand AD"
+            columns={[
+              {
+                title: "Company",                items: [
+                  { label: "About Us", href: "/#about" },
+                  { label: "Services", href: "/services" },
+                  { label: "Packages", href: "/packages" },
+                  { label: "Contact", href: "/contact" },
+                ],
+              },
+              {
+                title: "Resources",                items: [
+                  { label: "Client Area", href: "/client/welcome" },
+                  { label: "FAQ", href: "/contact#faq" },
+                  { label: "Blog", href: "/blog" },
+                ],
+              },
+              {
+                title: "Legal",                items: [
+                  { label: "Privacy Policy", href: "#" },
+                  { label: "Terms of Service", href: "#" },
+                ],
+              },
+            ]}
+            copyrightText="© 2024 eXpand AD. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -2,13 +2,12 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import { Sparkles } from "lucide-react";
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Mail } from 'lucide-react';
 
-export default function LandingPage() {
+export default function ContactPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="elastic-effect"
@@ -23,152 +22,75 @@ export default function LandingPage() {
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
+          <NavbarLayoutFloatingOverlay
-      navItems={[
+            navItems={[
-        {
+              { name: "Home", id: "/" },
-          name: "Home",
+              { name: "Services", id: "/services" },
-          id: "/",
+              { name: "Packages", id: "/packages" },
-        },
+              { name: "Contact", id: "/contact" },
-        {
+              { name: "Client Login", id: "/login" }
-          name: "Services",
+            ]}
-          id: "/services",
+            brandName="eXpand AD"
-        },
+            button={{ text: "Get a Quote", href: "/contact" }}
-        {
+          />
-          name: "Packages",
+        </div>
-          id: "/packages",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
-        {
-          name: "Client Login",
-          id: "/login",
-        },
-      ]}
-      brandName="eXpand AD"
-      button={{
-        text: "Get a Quote",
-        href: "/contact",
-      }}
-    />
-  </div>
 
-  <div id="faq" data-section="faq">
+        <div id="contact-form" data-section="contact-form">
-      <FaqSplitText
+          <ContactSplitForm
-      useInvertedBackground={true}
+            useInvertedBackground={false}
-      faqs={[
+            title="Request a Custom Quote"
-        {
+            description="Tell us about your project and specific needs. Our team will get back to you with a tailored solution."
-          id: "q1",
+            inputs={[
-          title: "What social media platforms do you manage?",
+              { name: "name", type: "text", placeholder: "Your Name", required: true },
-          content: "We manage a wide range of platforms including Facebook, Instagram, LinkedIn, X (formerly Twitter), TikTok, and Pinterest. We tailor our strategy based on your target audience and business goals.",
+              { name: "email", type: "email", placeholder: "Your Email", required: true },
-        },
+              { name: "company", type: "text", placeholder: "Company Name" },
-        {
+              { name: "phone", type: "tel", placeholder: "Phone Number" }
-          id: "q2",
+            ]}
-          title: "How do your pricing packages work?",
+            multiSelect={{
-          content: "Our pricing is tiered, offering Starter, Growth, and Enterprise solutions. Each package includes different levels of service, platforms, and reporting. Custom quotes are available for specific needs.",
+              name: "services",              label: "Interested Services",              options: ["Social Media Management", "Influencer Marketing", "Brand Design", "Performance Analytics", "Custom Campaign"]
-        },
+            }}
-        {
+            textarea={{
-          id: "q3",
+              name: "message",              placeholder: "Tell us more about your project...",              rows: 5
-          title: "Can I integrate my existing tools?",
+            }}
-          content: "Yes, we aim for seamless integration with your existing marketing stack where possible. We'll discuss compatibility during the onboarding process to ensure smooth operations.",
+            buttonText="Submit Quote Request"
-        },
+            imageSrc="http://img.b2bpic.net/free-photo/side-view-man-writing-notes-working_23-2148767930.jpg"
-        {
+            imageAlt="Person working on a laptop, requesting a quote"
-          id: "q4",
+            mediaPosition="right"
-          title: "What is the onboarding process like?",
+            mediaAnimation="slide-up"
-          content: "Our onboarding is streamlined. Once you choose a package, we'll schedule an initial consultation to understand your brand, goals, and audience. We'll then set up your accounts and launch within days.",
+            onSubmit={(data) => console.log('Quote Request Form Data:', data)}
-        },
+          />
-        {
+        </div>
-          id: "q5",
-          title: "Do you offer custom brand design services?",
-          content: "Absolutely! Beyond our standard packages, we provide bespoke brand design services, including logo creation, visual identity guidelines, and comprehensive brand strategy development.",
-        },
-      ]}
-      sideTitle="Frequently Asked Questions"
-      sideDescription="Find answers to common questions about our services, pricing, and onboarding process."
-      faqsAnimation="slide-up"
-      textPosition="left"
-      showCard={true}
-    />
-  </div>
 
-  <div id="contact-page" data-section="contact-page">
+        <div id="footer" data-section="footer">
-      <ContactCenter
+          <FooterBaseCard
-      useInvertedBackground={false}
+            logoText="eXpand AD"
-      background={{
+            columns={[
-        variant: "downward-rays-static",
+              {
-      }}
+                title: "Company",                items: [
-      tag="Get in Touch"
+                  { label: "About Us", href: "/#about" },
-      title="We'd Love to Hear From You"
+                  { label: "Services", href: "/services" },
-      description="Have questions about our services or need a custom quote? Fill out the form below, and our team will get back to you promptly."
+                  { label: "Packages", href: "/packages" },
-      tagIcon={Sparkles}
+                  { label: "Contact", href: "/contact" }
-      inputPlaceholder="Your Name"
+                ]
-      buttonText="Send Message"
+              },
-      termsText="By submitting this form, you agree to our Privacy Policy and Terms of Service."
+              {
-    />
+                title: "Resources",                items: [
-  </div>
+                  { label: "Client Login", href: "/login" },
-
+                  { label: "FAQ", href: "/contact#faq" }
-  <div id="footer" data-section="footer">
+                ]
-      <FooterBaseCard
+              },
-      logoText="eXpand AD"
+              {
-      columns={[
+                title: "Legal",                items: [
-        {
+                  { label: "Privacy Policy", href: "#" },
-          title: "Company",
+                  { label: "Terms of Service", href: "#" }
-          items: [
+                ]
-            {
+              }
-              label: "About Us",
+            ]}
-              href: "/#about",
+            copyrightText="© 2024 eXpand AD. All rights reserved."
-            },
+          />
-            {
+        </div>
-              label: "Services",
-              href: "/services",
-            },
-            {
-              label: "Packages",
-              href: "/packages",
-            },
-            {
-              label: "Contact",
-              href: "/contact",
-            },
-          ],
-        },
-        {
-          title: "Resources",
-          items: [
-            {
-              label: "Client Login",
-              href: "/login",
-            },
-            {
-              label: "FAQ",
-              href: "/contact#faq",
-            },
-            {
-              label: "Blog",
-              href: "/blog",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-            {
-              label: "Terms of Service",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      copyrightText="© 2024 eXpand AD. All rights reserved."
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/handover/page.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import LegalSection from '@/components/legal/LegalSection';
+
+export default function HandoverPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="elastic-effect"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        contentWidth="mediumLarge"
+        sizing="largeSmallSizeMediumTitles"
+        background="circleGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Services", id: "/services" },
+              { name: "Packages", id: "/packages" },
+              { name: "Contact", id: "/contact" },
+              { name: "Client Login", id: "/login" },
+              { name: "Handover", id: "/handover" }
+            ]}
+            brandName="eXpand AD"
+            button={{ text: "Get a Quote", href: "/contact" }}
+          />
+        </div>
+
+        <div id="handover-documentation" data-section="handover-documentation">
+          <LegalSection
+            layout="page"
+            title="Handover Documentation for eXpand AD"
+            subtitle="Comprehensive guide for managing the eXpand AD website and backend operations."
+            sections={[
+              {
+                heading: "Content Updates",                content: [
+                  { type: "paragraph", text: "This section details the process for updating content across the eXpand AD website, including text, images, and multimedia elements. Regular content audits and updates are crucial for maintaining relevance and engagement." },
+                  { type: "numbered-list", items: ["Accessing the content management system (CMS) via the provided credentials.", "Navigating to specific pages or sections to edit their content.", "Uploading and managing media files such as images and videos.", "Reviewing and publishing changes to make them live on the website.", "Best practices for SEO-friendly content creation and optimization."]}
+                ]
+              },
+              {
+                heading: "Package Modifications",                content: [
+                  { type: "paragraph", text: "Instructions for modifying existing service packages and adding new ones, ensuring all offerings are current and competitive. This includes updating descriptions, features, and pricing models."}, 
+                  { type: "numbered-list", items: ["Locating the service packages configuration within the backend system.", "Updating package descriptions to reflect new features or changes in scope.", "Adjusting pricing structures for individual packages or bundles.", "Configuring the availability and visibility of packages on the website.", "Procedures for archiving or deprecating old packages."]}
+                ]
+              },
+              {
+                heading: "Pricing Adjustments",                content: [
+                  { type: "paragraph", text: "Detailed procedures for making changes to service pricing, including applying discounts, managing promotions, and updating price tiers. Accurate pricing is key to revenue management."}, 
+                  { type: "numbered-list", items: ["Identifying the relevant pricing configurations for different services.", "Implementing temporary or permanent discounts and promotional offers.", "Updating price points for various service tiers or subscription levels.", "Ensuring consistency in pricing across all platforms and documentation.", "Analyzing the impact of pricing changes on customer acquisition and retention."]}
+                ]
+              },
+              {
+                heading: "Stripe Payment Management",                content: [
+                  { type: "paragraph", text: "An overview of the Stripe integration for payment processing, including monitoring transactions, handling refunds, and managing subscriptions. Proper payment management is vital for financial operations."}, 
+                  { type: "numbered-list", items: ["Accessing the Stripe Dashboard for transaction monitoring and reporting.", "Processing refunds for customer payments in accordance with company policy.", "Managing customer subscriptions, including upgrades, downgrades, and cancellations.", "Reconciling Stripe transactions with internal accounting records.", "Troubleshooting common payment processing issues and fraud prevention measures."]}
+                ]
+              }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="eXpand AD"
+            columns={[
+              {
+                title: "Company",                items: [
+                  { label: "About Us", href: "/#about" },
+                  { label: "Services", href: "/services" },
+                  { label: "Packages", href: "/packages" },
+                  { label: "Contact", href: "/contact" }
+                ]
+              },
+              {
+                title: "Resources",                items: [
+                  { label: "Client Login", href: "/login" },
+                  { label: "FAQ", href: "/contact#faq" },
+                  { label: "Blog", href: "/blog" }
+                ]
+              },
+              {
+                title: "Legal",                items: [
+                  { label: "Privacy Policy", href: "#" },
+                  { label: "Terms of Service", href: "#" },
+                  { label: "Handover Docs", href: "/handover"}
+                ]
+              }
+            ]}
+            copyrightText="© 2024 eXpand AD. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/login/page.tsx

@@ -2,13 +2,12 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import HeroLogo from '@/components/sections/hero/HeroLogo';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import { HelpCircle } from "lucide-react";
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { LogIn } from 'lucide-react';
 
-export default function LandingPage() {
+export default function LoginPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="elastic-effect"
@@ -23,129 +22,64 @@ export default function LandingPage() {
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
+          <NavbarLayoutFloatingOverlay
-      navItems={[
+            navItems={[
-        {
+              { name: "Home", id: "/" },
-          name: "Home",
+              { name: "Services", id: "/services" },
-          id: "/",
+              { name: "Packages", id: "/packages" },
-        },
+              { name: "Contact", id: "/contact" },
-        {
+              { name: "Client Login", id: "/login" }
-          name: "Services",
+            ]}
-          id: "/services",
+            brandName="eXpand AD"
-        },
+            button={{ text: "Get a Quote", href: "/contact" }}
-        {
+          />
-          name: "Packages",
+        </div>
-          id: "/packages",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
-        {
-          name: "Client Login",
-          id: "/login",
-        },
-      ]}
-      brandName="eXpand AD"
-      button={{
-        text: "Get a Quote",
-        href: "/contact",
-      }}
-    />
-  </div>
 
-  <div id="hero" data-section="hero">
+        <div id="login-hero" data-section="login-hero">
-      <HeroLogo
+          <HeroLogo
-      logoText="eXpand AD"
+            logoText="Client Login"
-      description="Welcome back! Access your personalized dashboard, project updates, and resources. Securely manage your campaigns."
+            description="Access your personalized dashboard and manage your services."
-      buttons={[
+            buttons={[
-        {
+              { text: "Go to Dashboard", href: "#" },
-          text: "Login to Account",
+              { text: "Register Now", href: "#" }
-          href: "#login-form",
+            ]}
-        },
+            buttonAnimation="opacity"
-      ]}
+            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EGGCvVCm4u8utjw85nJMComrpQ/uploaded-1779798279956-g5hmrms3.png?_wi=1"
-      imageSrc="http://img.b2bpic.net/free-photo/two-factor-authentication-enabled_23-2152004089.jpg"
+            imageAlt="Login page background image"
-      imageAlt="A person logging into a secure digital portal"
+            showDimOverlay={true}
-    />
+          />
-  </div>
+        </div>
 
-  <div id="contact" data-section="contact">
+        <div id="footer" data-section="footer">
-      <ContactCenter
+          <FooterBaseCard
-      useInvertedBackground={false}
+            logoText="eXpand AD"
-      background={{
+            columns={[
-        variant: "plain",
+              {
-      }}
+                title: "Company",                items: [
-      tag="Account Help"
+                  { label: "About Us", href: "/#about" },
-      title="Trouble Logging In?"
+                  { label: "Services", href: "/services" },
-      description="If you've forgotten your password, enter your email below to receive a reset link."
+                  { label: "Packages", href: "/packages" },
-      tagIcon={HelpCircle}
+                  { label: "Contact", href: "/contact" }
-      inputPlaceholder="Your email address"
+                ]
-      buttonText="Send Reset Link"
+              },
-      termsText="By clicking Send Reset Link, you agree to our Privacy Policy."
+              {
-    />
+                title: "Resources",                items: [
-  </div>
+                  { label: "Client Login", href: "/login" },
-
+                  { label: "FAQ", href: "/contact#faq" }
-  <div id="footer" data-section="footer">
+                ]
-      <FooterBaseCard
+              },
-      logoText="eXpand AD"
+              {
-      columns={[
+                title: "Legal",                items: [
-        {
+                  { label: "Privacy Policy", href: "#" },
-          title: "Company",
+                  { label: "Terms of Service", href: "#" }
-          items: [
+                ]
-            {
+              }
-              label: "About Us",
+            ]}
-              href: "/#about",
+            copyrightText="© 2024 eXpand AD. All rights reserved."
-            },
+          />
-            {
+        </div>
-              label: "Services",
-              href: "/services",
-            },
-            {
-              label: "Packages",
-              href: "/packages",
-            },
-            {
-              label: "Contact",
-              href: "/contact",
-            },
-          ],
-        },
-        {
-          title: "Resources",
-          items: [
-            {
-              label: "Client Login",
-              href: "/login",
-            },
-            {
-              label: "FAQ",
-              href: "/contact#faq",
-            },
-            {
-              label: "Blog",
-              href: "/blog",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-            {
-              label: "Terms of Service",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      copyrightText="© 2024 eXpand AD. All rights reserved."
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/packages/page.tsx

@@ -2,13 +2,12 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
+import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import { Award, CheckCircle, ShoppingCart, Sparkles, Star } from "lucide-react";
+import { CheckCircle, Package } from 'lucide-react';
 
-export default function LandingPage() {
+export default function PackagesPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="elastic-effect"
@@ -23,233 +22,84 @@ export default function LandingPage() {
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
+          <NavbarLayoutFloatingOverlay
-      navItems={[
+            navItems={[
-        {
+              { name: "Home", id: "/" },
-          name: "Home",
+              { name: "Services", id: "/services" },
-          id: "/",
+              { name: "Packages", id: "/packages" },
-        },
+              { name: "Contact", id: "/contact" },
-        {
+              { name: "Client Login", id: "/login" }
-          name: "Services",
+            ]}
-          id: "/services",
+            brandName="eXpand AD"
-        },
+            button={{ text: "Get a Quote", href: "/contact" }}
-        {
+          />
-          name: "Packages",
+        </div>
-          id: "/packages",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
-        {
-          name: "Client Login",
-          id: "/login",
-        },
-      ]}
-      brandName="eXpand AD"
-      button={{
-        text: "Get a Quote",
-        href: "/contact",
-      }}
-    />
-  </div>
 
-  <div id="pricing" data-section="pricing">
+        <div id="pricing-packages" data-section="pricing-packages">
-      <PricingCardThree
+          <PricingCardOne
-      animationType="slide-up"
+            animationType="slide-up"
-      textboxLayout="default"
+            textboxLayout="default"
-      useInvertedBackground={true}
+            useInvertedBackground={false}
-      plans={[
+            title="Social Media Management Packages"
-        {
+            description="Choose the perfect plan to boost your online presence and engage your audience."
-          id: "starter",
+            tag="Our Packages"
-          badge: "Value",
+            tagIcon={Package}
-          badgeIcon: Sparkles,
+            plans={[
-          price: "$500/mo",
+              {
-          name: "Starter Boost",
+                id: "basic",                badge: "Starter",                badgeIcon: CheckCircle,
-          buttons: [
+                price: "$499/month",                subtitle: "Essential Social Media Presence",                features: [
-            {
+                  "2 platforms managed",                  "8 posts/month",                  "Basic content creation",                  "Monthly performance report",                  "Email support"
-              text: "Get Started",
+                ]
-              href: "#",
+              },
-            },
+              {
-          ],
+                id: "pro",                badge: "Professional",                badgeIcon: CheckCircle,
-          features: [
+                price: "$999/month",                subtitle: "Advanced Growth & Engagement",                features: [
-            "2 Social Platforms",
+                  "3 platforms managed",                  "15 posts/month",                  "Advanced content creation",                  "Bi-weekly performance report",                  "Priority email & chat support",                  "Influencer outreach (basic)"
-            "8 Posts/Month",
+                ]
-            "Basic Content Strategy",
+              },
-            "Community Engagement (Limited)",
+              {
-            "Monthly Performance Report",
+                id: "enterprise",                badge: "Enterprise",                badgeIcon: CheckCircle,
-          ],
+                price: "$1999/month",                subtitle: "Customized & Comprehensive Solution",                features: [
-        },
+                  "4+ platforms managed",                  "30+ posts/month",                  "Premium content creation",                  "Weekly performance report",                  "Dedicated account manager",                  "Full influencer campaign management",                  "Paid ad campaign setup & management"
-        {
+                ]
-          id: "growth",
+              }
-          badge: "Most Popular",
+            ]}
-          badgeIcon: Star,
+            buttons={[
-          price: "$1200/mo",
+                { text: "Get Started", href: "/checkout" }
-          name: "Growth Accelerator",
+            ]}
-          buttons: [
+          />
-            {
+        </div>
-              text: "Choose Plan",
-              href: "#",
-            },
-          ],
-          features: [
-            "4 Social Platforms",
-            "16 Posts/Month",
-            "Advanced Content Strategy",
-            "Proactive Community Management",
-            "Influencer Outreach (Basic)",
-            "Bi-Weekly Performance Report",
-            "A/B Testing",
-          ],
-        },
-        {
-          id: "enterprise",
-          badge: "Custom",
-          badgeIcon: Award,
-          price: "Custom Quote",
-          name: "Enterprise Solution",
-          buttons: [
-            {
-              text: "Contact Sales",
-              href: "/contact",
-            },
-          ],
-          features: [
-            "Unlimited Platforms",
-            "Custom Post Volume",
-            "Dedicated Brand Strategist",
-            "Full Influencer Campaign Management",
-            "Complete Brand Design Services",
-            "Weekly Performance Meetings",
-            "24/7 Priority Support",
-          ],
-        },
-      ]}
-      title="Flexible Pricing Packages"
-      description="Choose the perfect plan for your business needs, from essential social media management to full-scale brand development."
-      tag="Our Packages"
-      tagIcon={ShoppingCart}
-    />
-  </div>
 
-  <div id="products" data-section="products">
+        <div id="footer" data-section="footer">
-      <ProductCardOne
+          <FooterBaseCard
-      animationType="slide-up"
+            logoText="eXpand AD"
-      textboxLayout="default"
+            columns={[
-      gridVariant="three-columns-all-equal-width"
+              {
-      useInvertedBackground={false}
+                title: "Company",                items: [
-      products={[
+                  { label: "About Us", href: "/#about" },
-        {
+                  { label: "Services", href: "/services" },
-          id: "product1",
+                  { label: "Packages", href: "/packages" },
-          name: "Social Media Audit",
+                  { label: "Contact", href: "/contact" }
-          price: "$299",
+                ]
-          imageSrc: "http://img.b2bpic.net/free-photo/online-marketing_53876-176744.jpg",
+              },
-          imageAlt: "Social media icons merging into a sphere",
+              {
-        },
+                title: "Resources",                items: [
-        {
+                  { label: "Client Login", href: "/login" },
-          id: "product2",
+                  { label: "FAQ", href: "/contact#faq" }
-          name: "Micro-Influencer Campaign",
+                ]
-          price: "$750",
+              },
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-holding-smartphone_23-2150208258.jpg",
+              {
-          imageAlt: "Hands reaching for a glowing orb",
+                title: "Legal",                items: [
-        },
+                  { label: "Privacy Policy", href: "#" },
-        {
+                  { label: "Terms of Service", href: "#" }
-          id: "product3",
+                ]
-          name: "Logo Redesign",
+              }
-          price: "$500",
+            ]}
-          imageSrc: "http://img.b2bpic.net/free-photo/designers-working-project_53876-94884.jpg",
+            copyrightText="© 2024 eXpand AD. All rights reserved."
-          imageAlt: "Logo being designed on a tablet",
+          />
-        },
+        </div>
-        {
-          id: "product4",
-          name: "Content Calendar Planning",
-          price: "$350",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-office-desk-composition-with-technological-device_23-2147915885.jpg",
-          imageAlt: "Calendar with scheduled social media content",
-        },
-        {
-          id: "product5",
-          name: "Ad Campaign Ideation",
-          price: "$400",
-          imageSrc: "http://img.b2bpic.net/free-photo/digital-art-style-illustration-graphic-designer_23-2151536940.jpg",
-          imageAlt: "Thought cloud with campaign slogans",
-        },
-        {
-          id: "product6",
-          name: "Monthly Analytics Report",
-          price: "$150",
-          imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-flat-design-business-strategy-concept_23-2149190169.jpg",
-          imageAlt: "Upward trending graphs and analytics",
-        },
-      ]}
-      title="Individual Service Add-ons"
-      description="Enhance your chosen package or select standalone services to meet specific project needs."
-      tag="Flexible Services"
-      tagIcon={CheckCircle}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterBaseCard
-      logoText="eXpand AD"
-      columns={[
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "/#about",
-            },
-            {
-              label: "Services",
-              href: "/services",
-            },
-            {
-              label: "Packages",
-              href: "/packages",
-            },
-            {
-              label: "Contact",
-              href: "/contact",
-            },
-          ],
-        },
-        {
-          title: "Resources",
-          items: [
-            {
-              label: "Client Login",
-              href: "/login",
-            },
-            {
-              label: "FAQ",
-              href: "/contact#faq",
-            },
-            {
-              label: "Blog",
-              href: "/blog",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-            {
-              label: "Terms of Service",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      copyrightText="© 2024 eXpand AD. All rights reserved."
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/page.tsx

@@ -41,6 +41,8 @@ export default function LandingPage() {
           name: "Contact",          id: "/contact"},
         {
           name: "Client Login",          id: "/login"},
+        {
+          name: "Handover",          id: "/handover"},
       ]}
       brandName="eXpand AD"
       button={{
@@ -57,7 +59,7 @@ export default function LandingPage() {
           text: "View Packages",          href: "/packages"},
       ]}
       buttonAnimation="opacity"
-      imageSrc="http://img.b2bpic.net/free-photo/graphic-designers-discussing-laptop_1170-1863.jpg"
+      imageSrc="http://img.b2bpic.net/free-photo/graphic-designers-discussing-laptop_1170-1863.jpg?_wi=1"
       imageAlt="Dynamic team collaborating on social media strategy"
       showDimOverlay={true}
     />
@@ -72,7 +74,7 @@ export default function LandingPage() {
       description="At eXpand AD, we believe in unlocking the full potential of your brand online. Our tailored social media strategies, impactful influencer campaigns, and bespoke brand designs are crafted to drive measurable results."
       subdescription="We specialize in empowering businesses of all sizes to navigate the complexities of the digital landscape, ensuring a strong, consistent, and engaging presence."
       icon={Rocket}
-      imageSrc="http://img.b2bpic.net/free-photo/smiling-corporate-employee-talking-with-remote-friend-videocall_482257-77679.jpg"
+      imageSrc="http://img.b2bpic.net/free-photo/smiling-corporate-employee-talking-with-remote-friend-videocall_482257-77679.jpg?_wi=1"
       imageAlt="Marketing professional overseeing social media strategy"
       mediaAnimation="slide-up"
     />
@@ -84,16 +86,16 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          title: "Social Media Management",          description: "Engage your audience and build your brand with expert content strategy, scheduling, and community management.",          imageSrc: "http://img.b2bpic.net/free-photo/dynamic-data-visualization-3d_23-2151904330.jpg",          imageAlt: "Phone showing social media app icons and dashboard",          buttonIcon: Globe,
+          title: "Social Media Management",          description: "Engage your audience and build your brand with expert content strategy, scheduling, and community management.",          imageSrc: "http://img.b2bpic.net/free-photo/dynamic-data-visualization-3d_23-2151904330.jpg?_wi=1",          imageAlt: "Phone showing social media app icons and dashboard",          buttonIcon: Globe,
           buttonHref: "/services"},
         {
-          title: "Influencer Marketing",          description: "Amplify your reach and boost credibility through authentic collaborations with key industry influencers.",          imageSrc: "http://img.b2bpic.net/free-photo/blogger-filming-herself-with-mobile-phone_23-2148586378.jpg",          imageAlt: "Collage of diverse influencers interacting online",          buttonIcon: Zap,
+          title: "Influencer Marketing",          description: "Amplify your reach and boost credibility through authentic collaborations with key industry influencers.",          imageSrc: "http://img.b2bpic.net/free-photo/blogger-filming-herself-with-mobile-phone_23-2148586378.jpg?_wi=1",          imageAlt: "Collage of diverse influencers interacting online",          buttonIcon: Zap,
           buttonHref: "/services"},
         {
-          title: "Brand Design & Strategy",          description: "Craft a memorable brand identity from logo to visual guidelines that resonates with your target market.",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345450.jpg",          imageAlt: "Graphic design workspace with brand guideline document",          buttonIcon: Palette,
+          title: "Brand Design & Strategy",          description: "Craft a memorable brand identity from logo to visual guidelines that resonates with your target market.",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345450.jpg?_wi=1",          imageAlt: "Graphic design workspace with brand guideline document",          buttonIcon: Palette,
           buttonHref: "/services"},
         {
-          title: "Performance Analytics",          description: "Gain deep insights into your campaign performance with advanced analytics and regular, actionable reports.",          imageSrc: "http://img.b2bpic.net/free-photo/tablet-with-graphics-blue-tones_1134-384.jpg",          imageAlt: "Digital analytics dashboard showing growth and insights",          buttonIcon: BarChart,
+          title: "Performance Analytics",          description: "Gain deep insights into your campaign performance with advanced analytics and regular, actionable reports.",          imageSrc: "http://img.b2bpic.net/free-photo/tablet-with-graphics-blue-tones_1134-384.jpg?_wi=1",          imageAlt: "Digital analytics dashboard showing growth and insights",          buttonIcon: BarChart,
           buttonHref: "/services"},
       ]}
       title="Our Core Services"
@@ -150,15 +152,15 @@ export default function LandingPage() {
       useInvertedBackground={true}
       testimonials={[
         {
-          id: "t1",          name: "Sarah Johnson",          date: "May 10, 2024",          title: "Outstanding Social Media Growth",          quote: "eXpand AD revolutionized our social media presence. Their strategic approach led to a significant increase in engagement and followers. Truly impressive results!",          tag: "Social Media",          avatarSrc: "http://img.b2bpic.net/free-photo/inspiring-new-boss_1098-93.jpg",          avatarAlt: "Sarah Johnson",          imageSrc: "http://img.b2bpic.net/free-photo/graphic-designers-discussing-laptop_1170-1863.jpg",          imageAlt: "female CEO headshot smiling"},
+          id: "t1",          name: "Sarah Johnson",          date: "May 10, 2024",          title: "Outstanding Social Media Growth",          quote: "eXpand AD revolutionized our social media presence. Their strategic approach led to a significant increase in engagement and followers. Truly impressive results!",          tag: "Social Media",          avatarSrc: "http://img.b2bpic.net/free-photo/inspiring-new-boss_1098-93.jpg",          avatarAlt: "Sarah Johnson",          imageSrc: "http://img.b2bpic.net/free-photo/graphic-designers-discussing-laptop_1170-1863.jpg?_wi=2",          imageAlt: "female CEO headshot smiling"},
         {
-          id: "t2",          name: "Michael Chen",          date: "April 22, 2024",          title: "Effective Influencer Campaigns",          quote: "The influencer campaigns crafted by eXpand AD were incredibly effective. We saw a massive uplift in brand awareness and conversions. Highly recommend!",          tag: "Influencer",          avatarSrc: "http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",          avatarAlt: "Michael Chen",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-corporate-employee-talking-with-remote-friend-videocall_482257-77679.jpg",          imageAlt: "female CEO headshot smiling"},
+          id: "t2",          name: "Michael Chen",          date: "April 22, 2024",          title: "Effective Influencer Campaigns",          quote: "The influencer campaigns crafted by eXpand AD were incredibly effective. We saw a massive uplift in brand awareness and conversions. Highly recommend!",          tag: "Influencer",          avatarSrc: "http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",          avatarAlt: "Michael Chen",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-corporate-employee-talking-with-remote-friend-videocall_482257-77679.jpg?_wi=2",          imageAlt: "female CEO headshot smiling"},
         {
-          id: "t3",          name: "Emily Rodriguez",          date: "March 15, 2024",          title: "Impeccable Brand Design",          quote: "Our new brand identity developed by eXpand AD perfectly captures our vision. It's fresh, modern, and consistently receives positive feedback.",          tag: "Brand Design",          avatarSrc: "http://img.b2bpic.net/free-photo/happy-smiling-man-winter-sweater-is-posing-photographer-studio_613910-13711.jpg",          avatarAlt: "Emily Rodriguez",          imageSrc: "http://img.b2bpic.net/free-photo/dynamic-data-visualization-3d_23-2151904330.jpg",          imageAlt: "female CEO headshot smiling"},
+          id: "t3",          name: "Emily Rodriguez",          date: "March 15, 2024",          title: "Impeccable Brand Design",          quote: "Our new brand identity developed by eXpand AD perfectly captures our vision. It's fresh, modern, and consistently receives positive feedback.",          tag: "Brand Design",          avatarSrc: "http://img.b2bpic.net/free-photo/happy-smiling-man-winter-sweater-is-posing-photographer-studio_613910-13711.jpg",          avatarAlt: "Emily Rodriguez",          imageSrc: "http://img.b2bpic.net/free-photo/dynamic-data-visualization-3d_23-2151904330.jpg?_wi=2",          imageAlt: "female CEO headshot smiling"},
         {
-          id: "t4",          name: "David Kim",          date: "February 28, 2024",          title: "Seamless Digital Strategy",          quote: "From content creation to performance tracking, eXpand AD managed our digital strategy flawlessly. Their team is professional and results-oriented.",          tag: "Strategy",          avatarSrc: "http://img.b2bpic.net/free-photo/close-up-bored-man-sitting-couch-flipping-though-tv-channels_482257-126574.jpg",          avatarAlt: "David Kim",          imageSrc: "http://img.b2bpic.net/free-photo/blogger-filming-herself-with-mobile-phone_23-2148586378.jpg",          imageAlt: "female CEO headshot smiling"},
+          id: "t4",          name: "David Kim",          date: "February 28, 2024",          title: "Seamless Digital Strategy",          quote: "From content creation to performance tracking, eXpand AD managed our digital strategy flawlessly. Their team is professional and results-oriented.",          tag: "Strategy",          avatarSrc: "http://img.b2bpic.net/free-photo/close-up-bored-man-sitting-couch-flipping-though-tv-channels_482257-126574.jpg",          avatarAlt: "David Kim",          imageSrc: "http://img.b2bpic.net/free-photo/blogger-filming-herself-with-mobile-phone_23-2148586378.jpg?_wi=2",          imageAlt: "female CEO headshot smiling"},
         {
-          id: "t5",          name: "Jessica Lee",          date: "January 19, 2024",          title: "Exceptional Customer Service",          quote: "Beyond their technical expertise, the eXpand AD team provides exceptional support. They truly listen and adapt to our needs, making them a valued partner.",          tag: "Support",          avatarSrc: "http://img.b2bpic.net/free-photo/blond-businessman-surprised-expression_1194-3809.jpg",          avatarAlt: "Jessica Lee",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345450.jpg",          imageAlt: "female CEO headshot smiling"},
+          id: "t5",          name: "Jessica Lee",          date: "January 19, 2024",          title: "Exceptional Customer Service",          quote: "Beyond their technical expertise, the eXpand AD team provides exceptional support. They truly listen and adapt to our needs, making them a valued partner.",          tag: "Support",          avatarSrc: "http://img.b2bpic.net/free-photo/blond-businessman-surprised-expression_1194-3809.jpg",          avatarAlt: "Jessica Lee",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345450.jpg?_wi=2",          imageAlt: "female CEO headshot smiling"},
       ]}
       title="What Our Clients Say"
       description="Hear directly from businesses who have transformed their digital presence with eXpand AD."
@@ -223,4 +225,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/services/page.tsx

@@ -1,112 +1,107 @@
 "use client";
 
-import { ThemeProvider, ThemeProviderProps } from "@/providers/themeProvider/ThemeProvider";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import FeatureCardTwentySix, { FeatureCardTwentySixProps } from '@/components/sections/feature/FeatureCardTwentySix';
+import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
-import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-
+import { BarChart, Briefcase, Globe, Megaphone, Palette, Users } from 'lucide-react';
-// Import all necessary LucideIcons
-import { Globe, Zap, Palette, BarChart, Layers, TrendingUp, Rocket, Award } from "lucide-react";
 
 export default function ServicesPage() {
-  const navItems = [
-    { name: "Home", id: "/" },
-    { name: "Services", id: "/services" },
-    { name: "Packages", id: "/packages" },
-    { name: "Contact", id: "/contact" },
-    { name: "Client Login", id: "/login" },
-  ];
-
-  const themeProps: ThemeProviderProps = {
-    defaultButtonVariant: "elastic-effect",    defaultTextAnimation: "reveal-blur",    borderRadius: "pill",    contentWidth: "mediumLarge",    sizing: "largeSmallSizeMediumTitles",    background: "circleGradient",    cardStyle: "glass-elevated",    primaryButtonStyle: "diagonal-gradient",    secondaryButtonStyle: "radial-glow",    headingFontWeight: "extrabold"
-  };
-
-  const pageSections = [
-    {
-      id: "detailed-services",      Component: FeatureCardTwentySix,
-      props: {
-        textboxLayout: "default",        useInvertedBackground: true,
-        features: [
-          {
-            title: "Social Media Management",            description: "From content creation and scheduling to community engagement and analytics, we manage your social platforms for maximum impact. Includes platform-specific strategies for Facebook, Instagram, LinkedIn, and more.",            imageSrc: "http://img.b2bpic.net/free-photo/social-media-communication-networking-online-concept_53876-133812.jpg",            imageAlt: "Data flow and insights for social media analytics",            buttonIcon: Globe,
-          },
-          {
-            title: "Influencer Marketing Campaigns",            description: "Connect with your target audience through authentic voices. We identify, vet, and manage collaborations with influencers who resonate with your brand values. Includes campaign strategy, execution, and ROI reporting.",            imageSrc: "http://img.b2bpic.net/free-photo/webinar-innovation-web-design-technology-concept_53876-133851.jpg",            imageAlt: "Diverse micro-influencers collaborating",            buttonIcon: Zap,
-          },
-          {
-            title: "Brand Design & Development",            description: "Build a distinctive and memorable brand identity. Our services cover logo design, visual guidelines, typography, and color palettes to ensure a cohesive brand image across all touchpoints.",            imageSrc: "http://img.b2bpic.net/free-photo/stationery-ice-cream-concept_23-2147803277.jpg",            imageAlt: "Brand visual identity showcasing logo and color palette",            buttonIcon: Palette,
-          },
-          {
-            title: "SEO & Content Strategy",            description: "Improve your visibility on search engines and attract organic traffic with keyword-rich content and technical SEO optimizations. Our strategies ensure your brand is found by the right audience.",            imageSrc: "http://img.b2bpic.net/free-photo/close-up-business-woman-analysis-process_23-2148411851.jpg",            imageAlt: "SEO analytics and content strategy",            buttonIcon: BarChart,
-          },
-        ],
-        title: "Comprehensive Digital Marketing Solutions",        description: "eXpand AD provides a full spectrum of services designed to enhance your online presence and achieve your business objectives.",        tag: "Our Expertise",        tagIcon: Layers,
-      } as FeatureCardTwentySixProps,
-    },
-    {
-      id: "performance-insights",      Component: MetricCardThree,
-      props: {
-        animationType: "slide-up",        textboxLayout: "default",        useInvertedBackground: false,
-        metrics: [
-          { id: "m1", icon: BarChart, title: "Engagement Growth", value: "+35%" },
-          { id: "m2", icon: TrendingUp, title: "Lead Generation", value: "+25%" },
-          { id: "m3", icon: Rocket, title: "Brand Reach", value: "+60%" },
-        ],
-        title: "Proven Performance, Guaranteed Results",        description: "Our commitment to excellence translates into measurable success for every client, every campaign.",        tag: "Impact",        tagIcon: Award,
-      },
-    },
-    {
-      id: "footer",      Component: FooterBaseCard,
-      props: {
-        logoText: "eXpand AD",        columns: [
-          {
-            title: "Company",            items: [
-              { label: "About Us", href: "/#about" },
-              { label: "Services", href: "/services" },
-              { label: "Packages", href: "/packages" },
-              { label: "Contact", href: "/contact" },
-            ],
-          },
-          {
-            title: "Resources",            items: [
-              { label: "Client Login", href: "/login" },
-              { label: "FAQ", href: "/contact#faq" },
-              { label: "Blog", href: "/blog" },
-            ],
-          },
-          {
-            title: "Legal",            items: [
-              { label: "Privacy Policy", href: "#" },
-              { label: "Terms of Service", href: "#" },
-            ],
-          },
-        ],
-        copyrightText: "© 2024 eXpand AD. All rights reserved."
-      },
-    },
-  ];
-
   return (
-    <ThemeProvider {...themeProps}>
+    <ThemeProvider
+        defaultButtonVariant="elastic-effect"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        contentWidth="mediumLarge"
+        sizing="largeSmallSizeMediumTitles"
+        background="circleGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="extrabold"
+    >
       <ReactLenis root>
         <div id="nav" data-section="nav">
           <NavbarLayoutFloatingOverlay
-            navItems={navItems}
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Services", id: "/services" },
+              { name: "Packages", id: "/packages" },
+              { name: "Contact", id: "/contact" },
+              { name: "Client Login", id: "/login" }
+            ]}
             brandName="eXpand AD"
-            button={{
+            button={{ text: "Get a Quote", href: "/contact" }}
-              text: "Get a Quote",              href: "/contact"
-            }}
           />
         </div>
 
-        {pageSections.map((section) => (
+        <div id="services-list" data-section="services-list">
-          <div id={section.id} key={section.id} data-section={section.id}>
+          <FeatureHoverPattern
-            <section.Component {...section.props} />
+            animationType="slide-up"
-          </div>
+            textboxLayout="default"
-        ))}
+            useInvertedBackground={true}
+            title="Our Comprehensive Services"
+            description="From initial strategy to ongoing optimization, we provide end-to-end digital solutions."
+            tag="What We Offer"
+            features={[
+              {
+                icon: Globe,
+                title: "Social Media Strategy",                description: "Develop a robust social media roadmap tailored to your brand's goals.",                button: { text: "Learn More", href: "/contact" }
+              },
+              {
+                icon: Megaphone,
+                title: "Content Creation & Curation",                description: "Craft engaging posts, visuals, and videos to captivate your audience.",                button: { text: "Learn More", href: "/contact" }
+              },
+              {
+                icon: Users,
+                title: "Community Management",                description: "Actively engage with your followers, respond to inquiries, and build loyalty.",                button: { text: "Learn More", href: "/contact" }
+              },
+              {
+                icon: Briefcase,
+                title: "Influencer Campaign Management",                description: "Connect with key influencers to amplify your brand message and reach new audiences.",                button: { text: "Learn More", href: "/contact" }
+              },
+              {
+                icon: Palette,
+                title: "Brand Identity & Design",                description: "Create a cohesive and memorable brand aesthetic across all digital touchpoints.",                button: { text: "Learn More", href: "/contact" }
+              },
+              {
+                icon: BarChart,
+                title: "Performance Analytics & Reporting",                description: "Gain actionable insights with detailed reports and continuous optimization.",                button: { text: "Learn More", href: "/contact" }
+              }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="eXpand AD"
+            columns={[
+              {
+                title: "Company",                items: [
+                  { label: "About Us", href: "/#about" },
+                  { label: "Services", href: "/services" },
+                  { label: "Packages", href: "/packages" },
+                  { label: "Contact", href: "/contact" }
+                ]
+              },
+              {
+                title: "Resources",                items: [
+                  { label: "Client Login", href: "/login" },
+                  { label: "FAQ", href: "/contact#faq" }
+                ]
+              },
+              {
+                title: "Legal",                items: [
+                  { label: "Privacy Policy", href: "#" },
+                  { label: "Terms of Service", href: "#" }
+                ]
+              }
+            ]}
+            copyrightText="© 2024 eXpand AD. All rights reserved."
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f6f0e9;
+  --background: #0a0a0a;
-  --card: #efe7dd;
+  --card: #1a1a1a;
-  --foreground: #2b180a;
+  --foreground: #ffffff;
-  --primary-cta: #2b180a;
+  --primary-cta: #1f7cff;
-  --primary-cta-text: #f6f0e9;
+  --primary-cta-text: #ffffff;
-  --secondary-cta: #efe7dd;
+  --secondary-cta: #010101;
-  --secondary-cta-text: #2b180a;
+  --secondary-cta-text: #ffffff;
-  --accent: #94877c;
+  --accent: #1f7cff;
-  --background-accent: #afa094;
+  --background-accent: #f96b2f;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);