Tideline CTA

CTAs 8

About

A full-width closing call-to-action section for an event page where a tide visually rises to the real percentage of seats taken as it scrolls into view, inverting the headline exactly along the wave, with the action button floating on the waterline.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tideline CTA to your project and fits it to your theme.

Code

How Tideline CTA is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { TidelineCta } from "@/components/ui/tideline-cta";

export default function Demo({ variant = "night" }: { variant?: string }) {
  return (
    <div className="flex min-h-full w-full">
      <TidelineCta
        theme={variant === "paper" ? "paper" : "night"}
        eyebrow="Muscat Design Week · 14 – 16 Feb"
        headline="The hall is filling up."
        sub="Three days of talks and workshops at the Royal Opera House. Members get early entry and a seat on the front rows."
        details={[
          "Royal Opera House Muscat",
          "OMR 35 · members OMR 20",
          "Talks in Arabic & English",
        ]}
        taken={0.73}
        action="Reserve a seat"
      />
    </div>
  );
}