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). |
Service unavailable state
Shown under the button when Supabase cannot be reached at the moment of sign-in (signInWithGoogle probes /auth/v1/health first and returns { error: "unavailable" }). Existing inline-error recipe (role="alert", text-xs text-destructive) with a LinkedIn contact link; text from serviceUnavailableCopy, follows the lang prop. Static replica here — the failure cannot be forced from a doc page.
Your account area is temporarily unavailable. Your data is safe. You can still take the interview without signing in. Message me on LinkedIn
| Prop | Type | Default | Description |
|---|---|---|---|
| lang | 'ua' | 'en' | 'ua' | Language of the unavailable-service message. AuthCTA forwards it; ResultsView passes the interview language. |
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. |
VoiceMock was built by one designer
I'm Sergiy, a product designer. I built this trainer myself — research, design system, code. On LinkedIn I show how products like this come together, and what it changes in a designer's work.
Product Designer · AI Design Engineer · Designer for Startups
See it on LinkedIn