"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

const logos = [
  { name: "Acme Corp", abbr: "AC" },
  { name: "Globex", abbr: "GX" },
  { name: "Initech", abbr: "IT" },
  { name: "Umbrella", abbr: "UB" },
  { name: "Hooli", abbr: "HO" },
  { name: "Massive Dynamic", abbr: "MD" },
  { name: "Soylent", abbr: "SY" },
  { name: "Stark Industries", abbr: "SI" },
];

function LogoTile({ name, abbr }: { name: string; abbr: string }) {
  return (
    <div
      className={cn(
        "group relative flex h-20 items-center justify-center rounded-2xl border border-border bg-card px-6 transition-all duration-300",
        "hover:border-primary/40 hover:bg-primary/5 hover:shadow-lg hover:shadow-primary/10"
      )}
    >
      <div className="flex items-center gap-3">
        {/* Abstract logo mark */}
        <svg
          viewBox="0 0 32 32"
          fill="none"
          className="h-8 w-8 text-muted-foreground transition-colors duration-300 group-hover:text-primary"
          aria-hidden="true"
        >
          <rect
            x="4"
            y="4"
            width="24"
            height="24"
            rx="6"
            stroke="currentColor"
            strokeWidth="2"
          />
          <circle cx="16" cy="16" r="6" fill="currentColor" fillOpacity="0.3" />
          <path
            d="M12 16h8M16 12v8"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
          />
        </svg>
        <div className="flex flex-col">
          <span className="text-sm font-semibold text-foreground transition-colors duration-300 group-hover:text-primary">
            {abbr}
          </span>
          <span className="text-xs text-muted-foreground">{name}</span>
        </div>
      </div>
      {/* Hover glow effect */}
      <div className="pointer-events-none absolute inset-0 rounded-2xl bg-gradient-to-br from-primary/0 to-primary/0 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:from-primary/5 group-hover:to-transparent" />
    </div>
  );
}

export function LogoCloud() {
  return (
    <section className="relative overflow-hidden rounded-3xl border border-border bg-card px-6 py-14">
      {/* Background glow */}
      <div className="pointer-events-none absolute inset-0">
        <div className="absolute -left-20 top-0 h-64 w-64 rounded-full bg-primary/10 blur-3xl" />
        <div className="absolute -bottom-24 right-0 h-72 w-72 rounded-full bg-secondary/10 blur-3xl" />
      </div>

      <div className="relative space-y-10">
        <div className="space-y-4 text-center">
          <p className="text-xs font-semibold uppercase tracking-[0.3em] text-primary">
            Our partners
          </p>
          <h2 className="text-3xl font-semibold text-foreground md:text-4xl">
            Trusted by industry leaders
          </h2>
          <p className="mx-auto max-w-2xl text-sm text-muted-foreground md:text-base">
            Join thousands of companies using our platform to build better
            products and scale their business.
          </p>
        </div>

        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
          {logos.map((logo) => (
            <LogoTile key={logo.name} name={logo.name} abbr={logo.abbr} />
          ))}
        </div>
      </div>
    </section>
  );
}
Logo Cloud

Preview

Trusted by industry leaders

Installation
