Aurora background

import { ArrowRight, Play, Star } from "lucide-react";
import { AuroraBackground } from "@/components/facade/aurora-background";

const initials = ["JM", "AR", "KT", "LS"];

export default function Demo() {
  return (
    <AuroraBackground className="w-full max-w-4xl rounded-2xl border border-border" contentClassName="px-6 py-16 text-center sm:px-12 sm:py-20">
      <span className="inline-flex items-center gap-2 rounded-full border border-foreground/10 bg-background/60 px-3 py-1 text-xs font-medium text-foreground/80 backdrop-blur">
        <span className="size-1.5 animate-ping-slow rounded-full bg-brand" aria-hidden />
        Booking Q1 website projects
      </span>
      <h2 className="mx-auto mt-6 max-w-2xl font-display text-4xl font-semibold leading-[1.04] tracking-[-0.03em] text-balance sm:text-6xl">
        Websites that turn Miami searches into booked jobs.
      </h2>
      <p className="mx-auto mt-5 max-w-lg text-base leading-relaxed text-muted-foreground sm:text-lg">
        Brightwater Studio designs fast, conversion focused sites for contractors, clinics and real estate teams. Live in three weeks.
      </p>
      <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
        <a
          href="#"
          className="group inline-flex h-11 items-center gap-2 rounded-full bg-primary px-6 text-sm font-medium text-primary-foreground shadow-[0_10px_30px_-10px_color-mix(in_oklch,var(--foreground)_50%,transparent)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
        >
          Get a free site audit
          <ArrowRight className="size-4 transition-transform duration-300 group-hover:translate-x-0.5" aria-hidden />
        </a>
        <a
          href="#"
          className="inline-flex h-11 items-center gap-2 rounded-full border border-foreground/10 bg-background/60 px-5 text-sm font-medium backdrop-blur transition-colors hover:bg-background/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
        >
          <Play className="size-3.5 fill-current" aria-hidden />
          Watch 2 min tour
        </a>
      </div>
      <div className="mt-10 flex items-center justify-center gap-3">
        <div className="flex -space-x-2">
          {initials.map((i) => (
            <span
              key={i}
              className="inline-flex size-8 items-center justify-center rounded-full border-2 border-background bg-muted text-[10px] font-semibold text-foreground/80"
            >
              {i}
            </span>
          ))}
        </div>
        <div className="text-left">
          <div className="flex items-center gap-0.5 text-warning" aria-hidden>
            {Array.from({ length: 5 }, (_, k) => (
              <Star key={k} className="size-3 fill-current" />
            ))}
          </div>
          <p className="mt-0.5 text-xs text-muted-foreground">Rated 5.0 by 120+ local businesses</p>
        </div>
      </div>
    </AuroraBackground>
  );
}