// "Synchronized cluster sway + hover spotlight" animation identity —
// scoped with a unique `al-logos10-*` prefix so this never collides with
// another Resource's own animation layer when copied standalone. This is
// the same canonical source shown in the Code tab's Tailwind CSS view.
// Disabled entirely under reduced motion: outside its `@media` query the
// cluster sits perfectly still.
import "./Logos10.tailwind.css";
const SIZE_CLASSES = {
    sm: "size-9",
    md: "size-11",
    lg: "size-13",
};
const BRANDS = [
    { name: "AlexyBlox", color: "#65a30d", glyph: "bag", size: "md", top: "6%", left: "36%" },
    { name: "FlowCore", color: "#2563eb", glyph: "drop", size: "lg", top: "20%", left: "6%" },
    { name: "PixelGrid", color: "#ec4899", glyph: "ring", size: "sm", top: "8%", left: "72%" },
    { name: "CoreStack", color: "#7c3aed", glyph: "bolt", size: "md", top: "42%", left: "42%" },
    { name: "SignalOS", color: "#ef4444", glyph: "wave", size: "sm", top: "50%", left: "10%" },
    { name: "NovaSync", color: "#0ea5e9", glyph: "hash", size: "md", top: "58%", left: "76%" },
    { name: "AppFlow", color: "#18181b", glyph: "play", size: "sm", top: "82%", left: "34%" },
    { name: "BrightOps", color: "#f59e0b", glyph: "gem", size: "sm", top: "78%", left: "66%" },
];
/** A small abstract geometric glyph — never a real company's logo. */
function ColorGlyph({ glyph }) {
    const common = { viewBox: "0 0 24 24", className: "size-1/2", "aria-hidden": true };
    switch (glyph) {
        case "bag":
            return (<svg {...common} fill="none" stroke="white" strokeWidth={1.75} strokeLinecap="round" strokeLinejoin="round">
          <path d="M7 8h10l1 12H6z"/>
          <path d="M9 8a3 3 0 0 1 6 0"/>
        </svg>);
        case "drop":
            return (<svg {...common} fill="white">
          <path d="M12 3c4 5 6 8 6 11a6 6 0 0 1-12 0c0-3 2-6 6-11z"/>
        </svg>);
        case "bolt":
            return (<svg {...common} fill="white">
          <path d="M13 2 4 14h6l-1 8 9-12h-6z"/>
        </svg>);
        case "wave":
            return (<svg {...common} fill="none" stroke="white" strokeWidth={1.75} strokeLinecap="round">
          <path d="M3 13c2-4 4-4 6 0s4 4 6 0 4-4 6 0"/>
        </svg>);
        case "hash":
            return (<svg {...common} fill="none" stroke="white" strokeWidth={1.75} strokeLinecap="round">
          <path d="M4 9h16M4 15h16M9.5 4l-3 16M17.5 4l-3 16"/>
        </svg>);
        case "ring":
            return (<svg {...common} fill="none" stroke="white" strokeWidth={1.75}>
          <circle cx="12" cy="12" r="6"/>
        </svg>);
        case "play":
            return (<svg {...common} fill="white">
          <path d="M8 5.5v13l11-6.5z"/>
        </svg>);
        case "gem":
            return (<svg {...common} fill="white">
          <path d="M12 3l7 6-7 12-7-12z"/>
        </svg>);
    }
}
/**
 * Logos 10 — a left-aligned headline and copy paired with a tight, packed
 * cluster of colorful icons on the right, varied in size rather than laid
 * out on a grid. The whole cluster sways gently as one group, and hovering
 * any single icon spotlights it.
 */
function Logos10() {
    return (<section aria-label="Integrations" className="bg-white px-4 py-16 sm:px-6 sm:py-20 lg:px-8 lg:py-24">
      <div className="mx-auto flex max-w-4xl flex-col items-center gap-10 lg:flex-row lg:items-center lg:justify-between lg:gap-12">
        <div className="max-w-sm text-center lg:text-left">
          <h2 className="text-2xl font-bold tracking-tight text-neutral-900 sm:text-3xl">
            Connect with 1000+ Apps Seamlessly
          </h2>
          <p className="mt-3 text-sm leading-relaxed text-neutral-500">
            Effortlessly integrate with your favorite tools, from CRMs and analytics to marketing and automation
            platforms.
          </p>
        </div>

        <div className="al-logos10-cluster relative size-56 shrink-0 sm:size-64">
          {BRANDS.map((brand, index) => (<span key={`${brand.name}-${index}`} style={{ top: brand.top, left: brand.left, backgroundColor: brand.color }} className={`al-logos10-icon absolute flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-2xl shadow-md ${SIZE_CLASSES[brand.size]}`} title={brand.name}>
              <ColorGlyph glyph={brand.glyph}/>
            </span>))}
        </div>
      </div>
    </section>);
}
export { Logos10 };
Logos 10

Requirements

Dependencies

Usage
