Auth CTA
Free Google login trigger, standalone and composed into the lead-capture CTA card used by the Results login gate (Bunch D). Never mentions payment — this is a lead-gen unlock, not a paywall.
GoogleSignInButton
Wraps the signInWithGoogle server action. Default variant is "outline", matching DESIGN.md's secondary button recipe. Renders the official 4-color Google mark plus label text.
| Prop | Type | Default | Description |
|---|---|---|---|
| next | string | '/results' | Where /auth/callback redirects after a successful login. |
| variant | ButtonProps["variant"] | 'outline' | Any Button variant — outline matches DESIGN.md secondary button. |
| className | string | — | Extra classes merged onto the underlying Button. |
| children | ReactNode | 'Sign in with Google' | Button label — override per context (e.g. AuthCTA passes a localized label). |
AuthCTA card
Opaque, bordered card (bg-card, border-border, shadow-md) — deliberately not a translucent/backdrop-blur panel. Meant to sit on top of a LockedOverlay fade.
Unlock your full feedback
Sign in with Google (free) to save your result and see detailed recommendations plus matched Product Designer job openings.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Headline — what unlocking gives the user. |
| description | string | — | One or two sentences, never mentions price/payment (lead-gen, not paywall). |
| buttonLabel | string | — | Passed through to GoogleSignInButton as children. |
| next | string | '/results' | OAuth return path — usually the current Results URL (with ?id= if present). |
| className | string | — | Extra classes on the card wrapper. |
Need a design system like this?
I design and build products end‑to‑end — from first idea and design system to production‑ready code, ready to hand off to your development team.
Product Designer | AI Design Engineer | Designer for Startups | Mobile & Complex SaaS | from Idea to Product | Framer Developer