// "Pill stagger scale-in + hover shadow lift" animation identity — scoped
// with a unique `al-logos13-*` 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 every pill
// already renders at its final, fully visible state.
import "./Logos13.tailwind.css";
const ROW_ONE = [
    { name: "AlexyBlox", color: "#65a30d", glyph: "bag" },
    { name: "FlowCore", color: "#ec4899", glyph: "ring" },
    { name: "PixelGrid", color: "#18181b", glyph: "hash" },
    { name: "CoreStack", color: "#2563eb", glyph: "drop" },
    { name: "SignalOS", color: "#ef4444", glyph: "wave" },
];
const ROW_TWO = [
    { name: "NovaSync", color: "#7c3aed", glyph: "gem" },
    { name: "AppFlow", color: "#f43f5e", glyph: "bolt" },
    { name: "BrightOps", color: "#18181b", glyph: "play" },
    { name: "SyncHive", color: "#0ea5e9", glyph: "ring" },
];
/** A small abstract geometric glyph — never a real company's logo. */
function ColorGlyph({ glyph }) {
    const common = { viewBox: "0 0 24 24", className: "size-3", "aria-hidden": true };
    switch (glyph) {
        case "bag":
            return (<svg {...common} fill="none" stroke="white" strokeWidth={2} 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={2} 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={2} 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={2}>
          <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 13 — a centered headline and copy above two neatly centered rows
 * of small colorful pill chips. Deliberately understated: generous
 * whitespace, no cards, no scattering — every pill scales in from the
 * center in sequence and lifts with a soft shadow on hover.
 */
function Logos13() {
    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 max-w-lg text-center">
        <h2 className="text-2xl font-bold tracking-tight text-neutral-900 sm:text-3xl lg:text-4xl">
          Connect with 1000+ Apps Seamlessly
        </h2>
        <p className="mx-auto mt-3 max-w-sm text-sm leading-relaxed text-neutral-500">
          Effortlessly integrate with your favorite tools, from CRMs and analytics to marketing and automation
          platforms.
        </p>

        <div className="mt-8 flex flex-wrap items-center justify-center gap-2.5 lg:mt-10">
          {ROW_ONE.map((brand, index) => (<span key={`${brand.name}-${index}`} style={{ animationDelay: `${index * 60}ms` }} className="al-logos13-pill inline-flex items-center gap-2 rounded-full bg-neutral-100 py-2 pr-4 pl-1.5 text-sm font-semibold text-neutral-700">
              <span style={{ backgroundColor: brand.color }} className="flex size-5 items-center justify-center rounded-full">
                <ColorGlyph glyph={brand.glyph}/>
              </span>
              {brand.name}
            </span>))}
        </div>
        <div className="mt-2.5 flex flex-wrap items-center justify-center gap-2.5">
          {ROW_TWO.map((brand, index) => (<span key={`${brand.name}-${index}`} style={{ animationDelay: `${(index + 5) * 60}ms` }} className="al-logos13-pill inline-flex items-center gap-2 rounded-full bg-neutral-100 py-2 pr-4 pl-1.5 text-sm font-semibold text-neutral-700">
              <span style={{ backgroundColor: brand.color }} className="flex size-5 items-center justify-center rounded-full">
                <ColorGlyph glyph={brand.glyph}/>
              </span>
              {brand.name}
            </span>))}
        </div>
      </div>
    </section>);
}
export { Logos13 };
Logos 13

Requirements

Dependencies

Usage
