Hero Agency

// Agency hero: availability pill, bold headline with a highlighted word,
// two buttons and an endlessly scrolling strip of service tags.
// Pure Tailwind, no dependencies. Works with Tailwind v3 and v4.

type Props = {
  badge?: string;
  intro?: string;
  tags?: string[];
  primary?: { label: string; href: string };
  secondary?: { label: string; href: string };
};

const DEFAULT_TAGS = ["Brand strategy", "Web design", "Next.js", "Headless CMS", "SEO", "Copywriting", "Motion", "E-commerce"];

export default function HeroAgency({
  badge = "Open for new projects",
  intro = "A small studio designing and building fast, search-friendly websites for businesses that want more enquiries.",
  tags = DEFAULT_TAGS,
  primary = { label: "See our work", href: "#" },
  secondary = { label: "Book a call ↗", href: "#" },
}: Props) {
  const strip = (
    <div className="flex shrink-0 gap-3 pr-3">
      {tags.map((tag) => (
        <span key={tag} className="whitespace-nowrap rounded-full border border-neutral-200 px-4 py-2 font-mono text-xs uppercase tracking-widest text-neutral-500">
          {tag}
        </span>
      ))}
    </div>
  );

  return (
    <section className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-white font-sans antialiased">
      <style>{`@keyframes hero-agency-scroll { from { transform: translateX(0) } to { transform: translateX(-50%) } }`}</style>

      <div className="relative z-10 mx-auto mb-16 max-w-4xl px-6 text-center">
        <div className="mb-10 inline-flex items-center gap-2 rounded-full border border-lime-500/30 bg-lime-500/15 px-4 py-2 font-mono text-[11px] uppercase tracking-[0.2em] text-lime-800">
          <span className="h-1.5 w-1.5 rounded-full bg-lime-600" />
          {badge}
        </div>

        <h1 className="mb-8 text-[clamp(44px,7vw,88px)] font-black leading-[0.92] tracking-[-0.04em] text-black">
          We build <span className="text-lime-500">sites</span>
          <br />
          that rank &amp; convert.
        </h1>

        <p className="mx-auto mb-10 max-w-lg text-lg leading-relaxed text-neutral-500">{intro}</p>

        <div className="flex flex-col justify-center gap-3 sm:flex-row">
          <a href={primary.href} className="rounded-full bg-lime-400 px-8 py-4 text-sm font-bold uppercase tracking-wider text-black transition-colors duration-200 hover:bg-lime-300">
            {primary.label}
          </a>
          <a href={secondary.href} className="rounded-full border border-neutral-200 px-8 py-4 text-sm text-neutral-500 transition-all duration-200 hover:border-neutral-400 hover:text-black">
            {secondary.label}
          </a>
        </div>
      </div>

      {/* Scrolling tag strip (rendered twice for a seamless loop) */}
      <div className="w-full overflow-hidden">
        <div className="flex w-max motion-safe:animate-[hero-agency-scroll_30s_linear_infinite]">
          {strip}
          <div aria-hidden className="flex">
            {strip}
          </div>
        </div>
      </div>
    </section>
  );
}