oms-website-nextjs/app/(website)/_components/CoreServicesSection.tsx

// components/CoreServicesSection.tsx
import React from "react";
import ServiceCard from "./ServiceCard";
import { FaCogs, FaProjectDiagram, FaCode } from "react-icons/fa"; // Example icons

// Define the structure for a service item
type ServiceItem = {
  icon: React.ElementType;
  title: string;
  description: string;
};

// Define props for the section
type CoreServicesSectionProps = {
  title: string;
  subtitle: string;
  services: ServiceItem[];
};

const CoreServicesSection: React.FC<CoreServicesSectionProps> = ({
  title,
  subtitle,
  services,
}) => {
  return (
    // Use semantic secondary background
    <section className="py-20 md:py-28 bg-secondary">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
        {" "}
        {/* Use container */}
        {/* Use semantic foreground */}
        <h2 className="text-3xl md:text-4xl font-bold mb-4 text-foreground">
          {title}
        </h2>
        {/* Use semantic muted foreground */}
        <p className="text-lg text-muted-foreground mb-12 md:mb-16 max-w-2xl mx-auto">
          {subtitle}
        </p>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
          {services.map((service, index) => (
            <ServiceCard
              key={index}
              icon={service.icon}
              title={service.title}
              description={service.description}
            />
          ))}
        </div>
      </div>
    </section>
  );
};

// Example default data matching the original page
export const defaultCoreServices: ServiceItem[] = [
  {
    icon: FaCogs,
    title: "Resource Augmentation",
    description:
      "Access top-tier IT talent seamlessly integrated with your team. Skilled professionals for short-term projects or long-term engagements.",
  },
  {
    icon: FaProjectDiagram,
    title: "Project Management",
    description:
      "Expert management ensuring on-time, within-budget delivery with superior results, risk mitigation, and maximum efficiency.",
  },
  {
    icon: FaCode,
    title: "Product Development",
    description:
      "Creating innovative, scalable digital products from concept to deployment to enhance efficiency and foster business growth.",
  },
];

export default CoreServicesSection;