src/components/RewardCard.tsx

type Props = {
  code: string;
  hint?: string;
};

export function RewardCard({ code, hint = 'single-use · save it for the bar' }: Props) {
  return (
    <div className="relative w-full overflow-hidden rounded-[24px] bg-ink px-6 py-7 text-center text-cream shadow-[0_20px_50px_rgba(42,37,32,0.25)]">

      <div

        className="pointer-events-none absolute -inset-[50%] animate-rotateBg"

        style={{

          background:

            'conic-gradient(from 0deg, transparent, rgba(184,201,168,0.15), transparent 25%)',

        }}

      />

      <div className="relative">

        <div className="text-eyebrow mb-3 text-sage">Your code</div>

        <div className="font-serif text-[42px] font-light tracking-[0.04em]">

          {code}

        </div>

        <div className="mt-2 text-xs opacity-60">{hint}</div>

      </div>

    </div>
  );
}