// "Diagonal wave entrance + hover invert" animation identity — scoped with
// a unique `al-logos03-*` 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 cell
// already renders at its final, fully visible state.
import "./Logos03.tailwind.css";
const BRANDS = [
    { name: "AlexyBlox", glyph: "ring", row: 0, col: 0 },
    { name: "FlowCore", glyph: "toggle", row: 0, col: 1 },
    { name: "PixelGrid", glyph: "half", row: 1, col: 0 },
    { name: "CoreStack", glyph: "chevrons", row: 1, col: 1 },
    { name: "SignalOS", glyph: "hourglass", row: 2, col: 0 },
    { name: "NovaSync", glyph: "diamond", row: 2, col: 1 },
];
/** A small abstract geometric mark — never a real company's logo. */
function MonoGlyph({ glyph }) {
    switch (glyph) {
        case "ring":
            return (<svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth={1.75} aria-hidden="true">
          <circle cx="12" cy="12" r="7"/>
        </svg>);
        case "toggle":
            return (<svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth={1.75} aria-hidden="true">
          <rect x="2" y="8" width="20" height="8" rx="4"/>
          <circle cx="16" cy="12" r="2.5" fill="currentColor" stroke="none"/>
        </svg>);
        case "half":
            return (<svg viewBox="0 0 24 24" className="size-4" aria-hidden="true">
          <circle cx="12" cy="12" r="7" fill="none" stroke="currentColor" strokeWidth={1.75}/>
          <path d="M12 5a7 7 0 0 1 0 14z" fill="currentColor"/>
        </svg>);
        case "chevrons":
            return (<svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth={1.75} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M6 6l5 6-5 6"/>
          <path d="M13 6l5 6-5 6"/>
        </svg>);
        case "hourglass":
            return (<svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth={1.75} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M6 4h12M6 20h12M7 4c0 4.5 4.5 6 5 8-.5 2-5 3.5-5 8M17 4c0 4.5-4.5 6-5 8 .5 2 5 3.5 5 8"/>
        </svg>);
        case "diamond":
            return (<svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth={1.75} strokeLinejoin="round" aria-hidden="true">
          <path d="M12 3l7 7-7 11-7-11z"/>
        </svg>);
    }
}
/**
 * Logos 03 — an editorial trusted-by layout: a left-aligned heading and
 * copy paired with a structured two-column grid of bordered brand cells on
 * the right, each one a distinct outlined box. The reveal sweeps
 * diagonally across the grid (delay driven by row + column) and hovering
 * any cell inverts it to a solid dark chip.
 */
function Logos03() {
    return (<section aria-label="Trusted by" 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-start gap-10 lg:flex-row lg:items-center lg:justify-between lg:gap-16">
        <div className="al-logos03-text max-w-xs shrink-0">
          <h2 className="text-2xl font-bold tracking-tight text-neutral-900 sm:text-3xl">Trusted by</h2>
          <p className="mt-3 text-sm leading-relaxed text-neutral-500">
            Join 1,000+ companies already building their websites with AlexyBlox.
          </p>
        </div>

        <div className="grid w-full grid-cols-2 gap-3 sm:w-auto">
          {BRANDS.map((brand) => (<div key={`${brand.name}-${brand.row}-${brand.col}`} style={{ animationDelay: `${80 + (brand.row + brand.col) * 90}ms` }} className="al-logos03-reveal al-logos03-cell flex items-center gap-2 rounded-lg border border-neutral-200 px-4 py-3 text-sm font-semibold text-neutral-600 sm:w-44">
              <MonoGlyph glyph={brand.glyph}/>
              {brand.name}
            </div>))}
        </div>
      </div>
    </section>);
}
export { Logos03 };
Logos 03

Requirements

Dependencies

Usage
