// "Icon-row scale-in stagger + hover lift" animation identity — scoped
// with a unique `al-logos08-*` 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 icon
// already renders at its final, fully visible state.
import "./Logos08.tailwind.css";
const BRANDS = [
    { name: "AlexyBlox", color: "#65a30d", glyph: "bag" },
    { name: "FlowCore", color: "#2563eb", glyph: "drop" },
    { name: "PixelGrid", color: "#ec4899", glyph: "ring" },
    { name: "CoreStack", color: "#7c3aed", glyph: "bolt" },
    { name: "SignalOS", color: "#ef4444", glyph: "wave" },
    { name: "NovaSync", color: "#0ea5e9", glyph: "hash" },
];
/** A small abstract geometric glyph — never a real company's logo. */
function ColorGlyph({ glyph }) {
    const common = { viewBox: "0 0 24 24", className: "size-4", "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 08 — a compact, centered composition: a small row of colorful
 * integration icons sits above the headline and its supporting copy. Every
 * icon scales in from the center in quick sequence, then lifts on hover.
 */
function Logos08() {
    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">
        <div className="flex flex-wrap items-center justify-center gap-2.5">
          {BRANDS.map((brand, index) => (<span key={`${brand.name}-${index}`} style={{ animationDelay: `${index * 60}ms` }} className="al-logos08-reveal">
              <span style={{ backgroundColor: brand.color }} className="al-logos08-icon flex size-9 shrink-0 items-center justify-center rounded-xl shadow-sm" title={brand.name}>
                <ColorGlyph glyph={brand.glyph}/>
              </span>
            </span>))}
        </div>

        <h2 className="al-logos08-text mt-6 text-2xl font-bold tracking-tight text-neutral-900 sm:text-3xl lg:text-4xl">
          Connect with 1000+ Apps Seamlessly
        </h2>
        <p className="al-logos08-text mt-3 text-sm leading-relaxed text-neutral-500" style={{ animationDelay: "80ms" }}>
          Effortlessly integrate with your favorite tools, from CRMs and analytics to marketing and automation
          platforms.
        </p>
      </div>
    </section>);
}
export { Logos08 };
Logos 08

Requirements

Dependencies

Usage
