Full-Bleed Image CTA

// Full-bleed photo with a centred invitation and two buttons.
// Pure Tailwind, no dependencies. Works with Tailwind v3 and v4.

type Props = {
  heading?: string[];
  text?: string;
  image?: string;
  imageAlt?: string;
  primary?: { label: string; href: string };
  secondary?: { label: string; href: string };
};

export default function FullBleedImageCta({
  heading = ["Where would you", "like to wake up?"],
  text = "Tell us the season and the company, and we will propose three yachts and an itinerary within the day.",
  image = "https://images.unsplash.com/photo-1628029338883-61644ec68475?w=2400&q=80&auto=format&fit=crop",
  imageAlt = "A yacht at sea beneath a red sunset",
  primary = { label: "Plan a voyage", href: "#" },
  secondary = { label: "View the fleet", href: "#" },
}: Props) {
  return (
    <section className="relative isolate overflow-hidden bg-[#060b10] px-4 py-36 text-center font-['Helvetica_Neue',Helvetica,Arial,sans-serif] text-white antialiased md:py-52">
      <img src={image} alt={imageAlt} loading="lazy" className="absolute inset-0 -z-10 h-full w-full object-cover" />
      <div className="absolute inset-0 -z-10 bg-[#060b10]/50" />

      <div className="mx-auto flex max-w-4xl flex-col items-center gap-9">
        <h2 className="text-[clamp(2.75rem,6.2vw,6.5rem)] font-normal leading-[0.95] tracking-[-0.04em]">
          {heading.map((line, i) => (
            <span key={i} className="block">
              {line}
            </span>
          ))}
        </h2>
        {text && <p className="max-w-xl text-base leading-relaxed text-white/80 md:text-lg">{text}</p>}
        <div className="flex flex-wrap justify-center gap-3 pt-2">
          <a
            href={primary.href}
            className="group relative isolate inline-flex h-14 items-center gap-4 overflow-hidden bg-white px-8 text-xs font-medium uppercase tracking-[0.08em] text-[#0d1114] transition-colors duration-700 hover:text-white"
          >
            <span className="absolute inset-0 -z-10 origin-bottom scale-y-0 bg-[#111c25] transition-transform duration-700 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:scale-y-100" />
            {primary.label}
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.1} aria-hidden className="h-4 w-4 transition-transform duration-700 group-hover:translate-x-1">
              <path d="M3 12h17M14 6l6 6-6 6" />
            </svg>
          </a>
          <a
            href={secondary.href}
            className="group relative isolate inline-flex h-14 items-center overflow-hidden border border-white/40 px-8 text-xs font-medium uppercase tracking-[0.08em] text-white transition-colors duration-700 hover:border-white hover:text-[#0d1114]"
          >
            <span className="absolute inset-0 -z-10 origin-bottom scale-y-0 bg-white transition-transform duration-700 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:scale-y-100" />
            {secondary.label}
          </a>
        </div>
      </div>
    </section>
  );
}