f67a0e04-3fa5-4a72-a89c-5c6bcb382667/src/app/services/page.tsx

"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Zap } from "lucide-react";

const navItems = [
  { name: "Home", id: "/" },
  { name: "About", id: "/about" },
  { name: "Services", id: "/services" },
  { name: "Portfolio", id: "/portfolio" },
  { name: "Pricing", id: "/pricing" },
];

export default function ServicesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="large"
      background="circleGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="MDX" navItems={navItems} />
      </div>

      {/* Main Services Section */}
      <div id="services-main" data-section="services-main">
        <FeatureCardThree
          title="Our Web Design Services"
          description="Comprehensive solutions designed to establish your digital presence and drive measurable business growth through strategic web design and optimization."
          features={[
            {
              id: "01",
              title: "Custom Website Design",
              description:
                "Fully bespoke websites built from the ground up to reflect your brand identity and achieve your specific business objectives.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/focus-concentrate-clarity-determine-inspiration-concept_53876-133862.jpg?_wi=3",
              imageAlt: "Custom website design",
            },
            {
              id: "02",
              title: "E-Commerce Solutions",
              description:
                "Complete online store setup with payment processing, inventory management, and conversion optimization for maximum sales.",
              imageSrc:
                "http://img.b2bpic.net/free-vector/landing-page-with-smartphone_23-2148373098.jpg",
              imageAlt: "E-commerce solutions",
            },
            {
              id: "03",
              title: "SEO Optimization",
              description:
                "On-page and technical SEO strategies to improve your search rankings, increase organic traffic, and attract qualified customers.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/business-scene-top-view_23-2147626514.jpg?_wi=3",
              imageAlt: "SEO optimization",
            },
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      {/* Additional Services Section */}
      <div id="additional-services" data-section="additional-services">
        <FeatureCardThree
          title="Advanced Features"
          description="Premium add-ons to enhance your website's functionality and user engagement capabilities."
          features={[
            {
              id: "01",
              title: "Booking System Integration",
              description:
                "Automated appointment scheduling, calendar management, and payment collection directly integrated into your website.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/business-meeting-office_1268-21517.jpg?_wi=2",
              imageAlt: "Booking system",
            },
            {
              id: "02",
              title: "Lead Management",
              description:
                "CRM integration, automated follow-ups, and lead scoring to maximize conversion rates and sales efficiency.",
              imageSrc:
                "http://img.b2bpic.net/free-vector/marketing-conversion-flat-background_23-2148000676.jpg?_wi=2",
              imageAlt: "Lead management",
            },
            {
              id: "03",
              title: "Performance Analytics",
              description:
                "Real-time tracking of visitor behavior, conversion funnels, and ROI metrics to continuously optimize your website.",
              imageSrc:
                "http://img.b2bpic.net/free-photo/programming-software-code-application-technology-concept_53876-123931.jpg?_wi=2",
              imageAlt: "Performance analytics",
            },
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      {/* Services CTA */}
      <div id="services-cta" data-section="services-cta">
        <ContactCTA
          tag="Get Started"
          tagIcon={Zap}
          title="Ready to Elevate Your Online Presence?"
          description="Let's discuss which services are perfect for your business and create a custom solution tailored to your goals."
          buttons={[
            { text: "Book a Strategy Call", href: "/booking" },
            { text: "View Pricing", href: "/pricing" },
          ]}
          background={{ variant: "circleGradient" }}
          useInvertedBackground={false}
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="MDX"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}