Discount Popup with Product Quiz

Forms 3

About

Discount popup that asks one question before the offer: a spotlit studio stage of products beside a big offer line and a stack of answer pills. Hover an answer and its product steps into the beam; pick one to lock the light, take an email and reveal the code with a copy button. onPick and onClaim hand you the answer and the email. Presets for a gift shop, plant shop and coffee subscription.

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

Code

How Discount Popup with Product Quiz is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react"
import SpotlightOfferQuiz from "@/components/ui/spotlight-offer-quiz"

export default function SpotlightOfferQuizDemo() {
  const [open, setOpen] = React.useState(true)
  return (
    <div className="flex min-h-svh w-full flex-col items-center justify-center gap-4 bg-background p-6 text-center text-foreground">
      <p className="text-sm text-muted-foreground">Halden &amp; Co.</p>
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="rounded-full border border-border px-5 py-2.5 text-sm font-medium transition-transform active:scale-[0.97]"
      >
        Show the gift-finder offer
      </button>
      <SpotlightOfferQuiz
        open={open}
        onOpenChange={setOpen}
        onClaim={async ({ email, option }) => {
          await new Promise((r) => setTimeout(r, 900))
          console.log("claimed", email, option.pick)
        }}
      />
    </div>
  )
}