Home page completed

app/(website)/_components/ClientLogosSection.tsx

@@ -0,0 +1,84 @@
+// components/ClientLogosSection.tsx
+import React from "react";
+import Image from "next/image"; // For actual logos
+import { FaBuilding, FaCar, FaLaptopCode, FaUsers } from "react-icons/fa"; // For placeholders
+
+// Define structure for client data (adapt as needed)
+type Client = {
+  name: string;
+  logoUrl?: string; // URL to actual logo image
+  icon?: React.ElementType; // Placeholder icon component
+};
+
+type ClientLogosSectionProps = {
+  title: string;
+  description?: string;
+  clients: Client[];
+};
+
+const ClientLogosSection: React.FC<ClientLogosSectionProps> = ({
+  title,
+  description,
+  clients,
+}) => {
+  return (
+    // Use semantic background
+    <section className="py-16 md:py-20 bg-background">
+      <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-12 text-foreground">
+          {title}
+        </h2>
+        {/* TODO: Implement Auto-Sliding Panel (e.g., using Swiper.js or Embla Carousel) */}
+        <div className="flex flex-wrap justify-center items-center gap-10 md:gap-16 opacity-70 dark:opacity-60">
+          {" "}
+          {/* Adjust opacity */}
+          {clients.map((client, index) => (
+            <div
+              key={index}
+              title={client.name}
+              className="transition-opacity hover:opacity-100"
+            >
+              {client.logoUrl ? (
+                <Image
+                  src={client.logoUrl}
+                  alt={`${client.name} Logo`}
+                  width={120} // Adjust size as needed
+                  height={40} // Adjust size as needed
+                  objectFit="contain"
+                  className="dark:invert dark:filter" // Example: Invert logo colors in dark mode if needed
+                />
+              ) : client.icon ? (
+                // Use semantic muted foreground for icons, primary on hover
+                React.createElement(client.icon, {
+                  className:
+                    "text-5xl text-muted-foreground/80 hover:text-primary transition-colors",
+                })
+              ) : (
+                <span className="text-muted-foreground">{client.name}</span> // Fallback text
+              )}
+            </div>
+          ))}
+        </div>
+        {description && (
+          <p className="mt-8 text-muted-foreground italic text-sm">
+            {description}
+          </p>
+        )}
+      </div>
+    </section>
+  );
+};
+
+// Example default data matching the original page (using placeholders)
+export const defaultClients: Client[] = [
+  { name: "Financial Services Client", icon: FaBuilding },
+  { name: "Automotive Client", icon: FaCar },
+  { name: "Tech Industry Client", icon: FaLaptopCode },
+  { name: "Generic Client 1", icon: FaUsers },
+  { name: "Generic Client 2", icon: FaBuilding },
+];
+
+export default ClientLogosSection;