"use client";
import { useEffect, useRef } from "react";
// "Scroll-triggered reveal" animation identity — scoped with a unique
// `al-logos15-*` 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 photo and every
// card render directly at their final, fully visible state.
import "./Logos15.tailwind.css";
const CARDS = [
    { name: "AlexyBlox", color: "#65a30d", glyph: "bag", description: "Power your eCommerce store with seamless product management and sales tools." },
    { name: "FlowCore", color: "#2563eb", glyph: "drop", description: "Securely store, share, and collaborate on files in the cloud." },
    { name: "PixelGrid", color: "#ef4444", glyph: "wave", description: "Manage bookings and enhance guest experiences with intuitive tools." },
    { name: "CoreStack", color: "#ec4899", glyph: "ring", description: "Sell digital products effortlessly with a creator-friendly platform." },
];
/** 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 15 — a strong asymmetric split: a headline, copy, and a large
 * lifestyle photo on the left; a two-by-two grid of bordered integration
 * cards on the right. The photo and each card reveal themselves once, the
 * first time they scroll into view, via an `IntersectionObserver` rather
 * than firing on mount — this is the only Logos section whose entrance is
 * scroll-driven instead of load-driven.
 */
function Logos15() {
    const revealRefs = useRef([]);
    useEffect(() => {
        const elements = revealRefs.current.filter((el) => Boolean(el));
        if (elements.length === 0)
            return;
        const observer = new IntersectionObserver((entries) => {
            for (const entry of entries) {
                if (entry.isIntersecting) {
                    entry.target.classList.add("is-visible");
                    observer.unobserve(entry.target);
                }
            }
        }, { threshold: 0.15 });
        elements.forEach((el) => observer.observe(el));
        return () => observer.disconnect();
    }, []);
    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 grid max-w-5xl grid-cols-1 gap-10 lg:grid-cols-2 lg:gap-14">
        <div>
          <h2 className="text-2xl font-bold tracking-tight text-neutral-900 sm:text-3xl">
            Connect with 1000+ Apps Seamlessly
          </h2>
          <p className="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>

          <img ref={(el) => {
            if (el)
                revealRefs.current[0] = el;
        }} src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?q=80&w=900&auto=format&fit=crop" alt="A person relaxing on a bean bag chair while working on a laptop" className="al-logos15-reveal mt-8 aspect-4/3 w-full rounded-2xl object-cover"/>
        </div>

        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          {CARDS.map((card, index) => (<div key={`${card.name}-${index}`} ref={(el) => {
                if (el)
                    revealRefs.current[index + 1] = el;
            }} style={{ transitionDelay: `${index * 90}ms` }} className="al-logos15-reveal al-logos15-card rounded-2xl border border-neutral-200 p-5">
              <span style={{ backgroundColor: card.color }} className="flex size-10 items-center justify-center rounded-xl shadow-sm">
                <ColorGlyph glyph={card.glyph}/>
              </span>
              <p className="mt-3.5 text-sm font-semibold text-neutral-900">{card.name}</p>
              <p className="mt-1 text-sm leading-relaxed text-neutral-500">{card.description}</p>
            </div>))}
        </div>
      </div>
    </section>);
}
export { Logos15 };
Logos 15

Requirements

Dependencies

Usage
