Gsap Card Flip

"use client";

import GsapFlipCard from "@/components/ui/gsap-card-flip";

const R2 = (name: string) =>
  `https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/gsap-flip-card/${name}`;

const campaignFrames = [
  {
    id: "tennis",
    image: R2("img01.png"),
    alt: "Tennis player mid-backhand against a red studio backdrop",
    caption: "The racquet blurs through the frame while the ball hangs still.",
  },
  {
    id: "basketball",
    image: R2("img02.png"),
    alt: "Basketball dropping through an orange rim on a deep blue background",
    caption: "Backlit and off the rim, shot for the season's biggest opener.",
  },
  {
    id: "runner",
    image: R2("img03.png"),
    alt: "Runner suspended mid-stride against a clear blue sky",
    caption: "Caught mid-stride, one foot still deciding where the ground is.",
  },
  {
    id: "cyclist",
    image: R2("img04.png"),
    alt: "Cyclist in a black suit holding a road bike against a lime backdrop",
    caption: "Tailoring and torque, framed for the road bike's studio debut.",
  },
  {
    id: "portrait",
    image: R2("img05.png"),
    alt: "Profile of an athlete wearing white shield sunglasses in low light",
    caption: "Side light only, letting the frame carry the whole story.",
  },
];

export default function GsapFlipCardDemo() {
  return (
    <div className="relative h-screen w-full overflow-y-auto bg-background">
      <GsapFlipCard
        items={campaignFrames}
        title="Campaign Frames"
        meta="Editorial / Sports Campaign"
        description="Five frames from a season's ad campaign. Tap one to bring it forward."
        rounded={16}
        stackRotation={2}
      />

      <div className="pointer-events-none absolute inset-x-0 bottom-6 z-50 hidden justify-center lg:flex">
        <p className="rounded-full border border-white/10 bg-black/40 px-4 py-1.5 text-xs text-white/70 backdrop-blur-sm">
          Click the stack to spread it out, then any frame to swap it in
        </p>
      </div>
    </div>
  );
}