Frontend Captcha

Unified demo interface for three providers

CAP Demo

CAP shares the same presentation layer as every other captcha demo.

This route now embeds the CAP widget, captures the token from the shared form flow and submits it to a local Next.js verification endpoint.

Shared design baseline

Provider

CAP

The CAP demo uses the real widget endpoint from the environment configuration and verifies the solved token through a server route.

Shared page anatomy

All demo pages reuse the same hero, plan cards and call-to-action structure.

Responsive spacing

The layout scales from compact mobile cards to wider desktop columns without changing hierarchy.

Prepared integration slot

The future captcha widget is intentionally reserved in the Compare plan area from the start.

Compare plan

Reserved Captcha Area

Ready for submission

Fill out the form, complete the captcha and submit the demo request.

Flow

Common Demo Structure

  1. 1. A visitor opens the provider page and sees the same presentation pattern on every route.
  2. 2. The captcha widget will live in the reserved Compare plan panel without altering the outer layout.
  3. 3. Validation results and provider-specific form behavior can later be added in a consistent way.