Initial skills documentation — 25 categories, all SKILL.md + references + scripts

skills/software-development/portal-ui-mockups/references/login-pattern.md

@@ -0,0 +1,57 @@
+# 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.