Image Backdrop Hero

export default function HeroImageBackdrop() {
  const logos = [
    { name: "Northwind", glyph: <circle cx="12" cy="12" r="7" /> },
    { name: "Vertex", glyph: <path d="M12 4 20 19H4Z" /> },
    { name: "Lumen", glyph: <rect x="5" y="5" width="14" height="14" rx="3" /> },
    { name: "Cascade", glyph: <path d="M12 3l7 4v8l-7 4-7-4V7Z" /> },
    { name: "Orbit", glyph: <path d="M12 5a7 7 0 100 14 7 7 0 000-14zm0 4a3 3 0 100 6 3 3 0 000-6z" /> },
  ];

  return (
    <section className="relative isolate flex min-h-[38rem] flex-col justify-end overflow-hidden bg-zinc-900 px-6 py-16 dark:bg-black md:min-h-[44rem]">
      <div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-20">
        <div className="absolute inset-0 bg-gradient-to-br from-slate-800 via-zinc-900 to-black dark:from-slate-900 dark:via-black dark:to-black" />
        <div className="absolute -left-32 -top-24 h-[34rem] w-[34rem] rounded-full bg-gradient-to-br from-indigo-600 to-transparent opacity-40 blur-3xl dark:opacity-30" />
        <div className="absolute right-[-10%] top-1/4 h-[28rem] w-[28rem] rounded-full bg-gradient-to-bl from-amber-500 via-orange-500 to-transparent opacity-30 blur-3xl dark:opacity-25" />
        <div className="absolute bottom-[-15%] left-1/3 h-[30rem] w-[30rem] rounded-full bg-gradient-to-tr from-teal-500 to-transparent opacity-25 blur-3xl dark:opacity-20" />
      </div>

      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 -z-10 bg-gradient-to-t from-black via-black/50 to-transparent"
      />

      <div className="mx-auto w-full max-w-6xl">
        <div className="max-w-2xl">
          <span className="inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 text-xs font-medium uppercase tracking-widest text-white/80 ring-1 ring-inset ring-white/15 backdrop-blur">
            Built for modern teams
          </span>
          <h1 className="mt-6 text-4xl font-semibold tracking-tight text-white sm:text-6xl">
            Design that feels like it was made for you
          </h1>
          <p className="mt-5 max-w-lg text-lg leading-relaxed text-zinc-300">
            Bring your brand, your data and your workflow together in one beautifully organised space that adapts to how your team really works.
          </p>

          <div className="mt-9 flex flex-col gap-3 sm:flex-row">
            <a
              href="#"
              className="inline-flex items-center justify-center rounded-xl bg-white px-6 py-3 text-sm font-semibold text-zinc-900 shadow-lg shadow-black/20 transition hover:bg-zinc-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-900"
            >
              Get started
            </a>
            <a
              href="#"
              className="inline-flex items-center justify-center gap-2 rounded-xl border border-white/20 bg-white/5 px-6 py-3 text-sm font-semibold text-white backdrop-blur transition hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-900"
            >
              <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" className="h-4 w-4">
                <path d="M8 5v14l11-7z" />
              </svg>
              Watch the film
            </a>
          </div>
        </div>

        <div className="mt-14 border-t border-white/10 pt-8">
          <p className="text-xs font-medium uppercase tracking-widest text-zinc-400">Trusted by teams at</p>
          <ul className="mt-4 flex flex-wrap items-center gap-x-8 gap-y-4">
            {logos.map((logo) => (
              <li key={logo.name} className="flex items-center gap-2 text-zinc-400 transition hover:text-white">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.75} aria-hidden="true" className="h-5 w-5">
                  {logo.glyph}
                </svg>
                <span className="text-sm font-semibold tracking-wide">{logo.name}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}