1.6 KiB
1.6 KiB
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.