# Portal Login Page Design

## Two-Audience Layout

The portal login page serves two distinct users side by side:

### Left: Existing Customer Login
- Blue accent theme
- Email + password fields
- Remember me checkbox
- Forgot password link
- Google SSO button
- Purpose: "Access your dashboard, view services, manage your account"

### Right: New Customer Lead Capture
- Green accent theme (differentiation)
- **First name + Last name fields** (separate, 2-column grid — NOT "Full name" single field)
- Email + Company fields
- Service interest checkboxes (grid 2-column layout with 8 options):
  - Internet / WISP
  - Business VoIP
  - DNS / Domain
  - Email Hosting
  - Web Hosting
  - Network Setup
  - Backup / DR
  - Other
- **Cloudflare Turnstile** shield icon + "Protected by Cloudflare Turnstile" text above submit button
- Submit labeled "Submit Inquiry" with caption "We'll review your request and contact you within 1 business day."
- Purpose: "Tell us what you need and we'll reach out with a custom solution"

## Captcha Protection

Public-facing forms require bot protection. Options ranked:

| Option | UX | Best for |
|---|---|---|
| **Cloudflare Turnstile** ✅ | Invisible — no checkbox | Privacy-focused, free, simple |
| reCAPTCHA v3 (invisible) | No click, score-based | Fine, but Google-owned |
| reCAPTCHA v2 checkbox | "I'm not a robot" click | Works, but dated UX |
| Honeypot field | Hidden field, zero UX impact | Good 2nd layer, not enough alone |

**Turnstile is the recommended choice** — free, no Google tracking required, invisible to users, one line of JS + one widget key.

## Responsive Breakpoints
- Mobile (< 640px): Single column, panels stack vertically, service checkboxes collapse to single column
- Tablet (640-1024px): 2-column grid, reduced padding
- Desktop (> 1024px): Side-by-side panels with full padding