Home page completed

app/(website)/_components/ServiceCard.tsx

@@ -0,0 +1,27 @@
+// 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;