Hero — Video with an explanatory sidebar

export default function HeroVideoCaptionSidebar() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <p className="text-sm font-medium text-neutral-500">Eyebrow</p>
        <h1 className="text-4xl font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl mt-4 max-w-4xl">
          Headline that introduces a visual walkthrough
        </h1>
        <div className="mt-10 grid gap-8 lg:grid-cols-[2fr_1fr]">
          <figure className="space-y-3">
            <div
              role="img"
              aria-label="Video placeholder: visual walkthrough"
              className="flex aspect-[4/3] items-center justify-center rounded-lg bg-neutral-100 text-neutral-400 aspect-video"
            >
              <svg
                aria-hidden="true"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="size-10"
              >
                <rect x="3" y="3" width="18" height="18" rx="2" />
                <path d="m10 8 6 4-6 4Z" />
              </svg>
            </div>
            <figcaption className="text-sm text-neutral-500">
              Video caption and duration: 2:14
            </figcaption>
          </figure>
          <aside className="flex flex-col justify-between gap-8 border-t border-neutral-200 pt-6 lg:border-t-0 lg:border-l lg:pl-8 lg:pt-0">
            <div>
              <h3 className="text-lg font-semibold">
                What the walkthrough covers
              </h3>
              <p className="text-lg text-pretty text-neutral-600 mt-4">
                A short explanation of the outcome demonstrated in the video.
              </p>
            </div>
            <div className="flex flex-wrap items-center gap-3">
              <a
                href="#"
                className="inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
              >
                Primary action
              </a>
            </div>
          </aside>
        </div>
      </div>
    </section>
  )
}