58 lines
1.6 KiB
Markdown
58 lines
1.6 KiB
Markdown
# 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.
|