Echo Reel: Audiences

import { EchoReel } from "@/components/ui/echo-reel";

const AUDIENCES = ["Creators", "Podcasters", "Studios", "Brands"];

export function EchoReelDemo() {
  return (
    <section className="w-full max-w-4xl overflow-hidden rounded-3xl border border-[#0b0b0d]/10 bg-white px-5 pt-10 pb-12 text-[#0b0b0d] sm:px-10 sm:pt-12 dark:border-white/10 dark:bg-[#05060d] dark:text-[#f4f4f6]">
      <h2 className="sr-only">Cutline is made for creators, podcasters, studios and brands</h2>
      <p aria-hidden className="text-center text-sm font-semibold tracking-tight sm:text-base">
        Cutline is made for
      </p>
      <EchoReel words={AUDIENCES} className="mt-2 text-[#2f3cff] dark:text-[#7b86ff]" />
      <p className="mx-auto mt-5 max-w-[22rem] text-center text-[15px] leading-relaxed text-[#0b0b0d]/65 dark:text-[#f4f4f6]/65">
        One long recording in. Clips, captions and dubs for every channel out, cut while you sleep.
      </p>
      <div className="mt-6 flex justify-center">
        <a
          href="#start"
          className="rounded-full bg-[#2f3cff] px-5 py-2.5 text-sm font-semibold text-white transition-colors duration-150 hover:bg-[#1f2be6] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#2f3cff] dark:bg-[#5b68ff] dark:hover:bg-[#6d79ff] dark:focus-visible:outline-[#7b86ff]"
        >
          Start cutting free
        </a>
      </div>
    </section>
  );
}