# Login Page Two-Panel Pattern

Built for IT Pro Partner portal. Served at `/portal/login.html`.

## Layout

Two-column layout at desktop (`md:grid-cols-2`), stacks vertically on mobile.

### Left panel — Existing Customer Login

Blue accent (`#2563eb`). Elements:

- User icon in blue circle
- "Customer Login" heading
- "Access your dashboard..." subtitle
- Email field + password field
- Remember me checkbox + forgot password link
- Sign In button (blue)
- Divider with "or"
- Google SSO button

### Right panel — New Customer Inquiry

Green accent (`#16a34a`). No sign-in — lead capture form. Elements:

- Plus icon in green circle
- "New Customer" heading
- "Tell us what you need..." subtitle
- First name + last name (side by side, `grid grid-cols-2 gap-3`)
- Email field
- Company field
- Service interest checkboxes (8 options in 2x4 grid):
  - Internet / WISP, Business VoIP, DNS / Domain, Email Hosting
  - Web Hosting, Network Setup, Backup / DR, Other
- Cloudflare Turnstile badge (invisible, text: "Protected by Cloudflare Turnstile")
- Submit Inquiry button (green)
- "We'll review your request and contact you within 1 business day" note

## Mobile responsive

- Stacks right panel below left panel
- Full-width inputs
- Service checkboxes collapse from 2->1 columns on small screens

## Color signals

- Blue = existing customer flow (login, familiarity)
- Green = new customer flow (growth, action)
- No blue/green mixing within same panel

## Top nav

Minimal: logo + Services · About · Contact links. Drops to logo-only on mobile.

## Footer

"IT Pro Partner © 2026 · Privacy · Terms". Centered, border-top, small text.