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

// components/ServiceCard.tsx
import React from "react";

type ServiceCardProps = {
  icon: React.ElementType; // Expect a component like FaCogs
  title: string;
  description: string;
};

const ServiceCard: React.FC<ServiceCardProps> = ({
  icon: Icon,
  title,
  description,
}) => {
  return (
    // Use semantic variables for background, text, border
    <div className="bg-card p-8 rounded-lg border border-border shadow-md hover:shadow-xl transition-shadow duration-300 text-left">
      <Icon className="text-primary text-4xl mb-4" />
      {/* Use semantic foreground for title */}
      <h3 className="text-xl font-semibold mb-3 text-foreground">{title}</h3>
      {/* Use semantic muted foreground for description */}
      <p className="text-muted-foreground">{description}</p>
    </div>
  );
};

export default ServiceCard;