Sign in to Verdant — Classic Split (Emerald)
A full-bleed classic split sign-in page: white emerald-accented auth form on the left (social + email login, gradient Sign in CTA), a dark slate brand panel with ambient glows and a floating showcase card on the right, and a sticky nav above both.
Summary
A full-bleed, two-column 'classic split' sign-in page on a clean white canvas. Left column holds the auth form (brand mark, 'Welcome back' heading, Google + GitHub social buttons, an 'or with email' divider, email + password fields, a keep-me-signed-in checkbox, and a gradient emerald 'Sign in' button); right column is a dark slate brand panel with ambient emerald glows, a faint grid, a product quote, a floating 'Generating layout' showcase card, and a social-proof trust row. A sticky translucent top nav spans both columns. Collapses to a single column (form only) on mobile.
Style
Crisp, modern SaaS auth aesthetic. White form side, deep slate brand side, a single emerald accent for the logo, primary button, links and focus rings. Inter typeface throughout, rounded-xl controls, soft inset fields, and a glowing gradient CTA. The dark panel adds depth with blurred emerald radial glows, a subtle dot + line grid masked by a radial fade, and a frosted-glass floating card.
Layout & Structure
A sticky full-bleed top nav above a two-column main grid (lg:grid-cols-[1.05fr_1fr], min-height = viewport minus nav). Left column: a centered max-w-[400px] auth form. Right column (hidden below lg): a dark slate brand panel laid out top/middle/bottom (eyebrow badge, quote + floating card, trust row). On mobile the right panel is hidden and only the form column shows, full width.
Sticky nav (full-bleed)
Left form column
Social auth row
Divider
Email + password form
Keep me signed in
Submit + sign-up link
Right brand panel (slate)
Panel eyebrow
Panel quote + floating card
Panel trust row
Special Notes
Single emerald accent on slate/white neutrals only; do not introduce other hues. The layout is a true full-bleed split (no centered card) with the form on the left and the dark brand panel on the right, and a sticky nav above both. Below the lg breakpoint the right panel is hidden and the form column goes full width. Keep the exact field focus treatment (emerald-500 border + 4px emerald ring) and the CTA gradient + glow shadow. Inter throughout, rounded-xl controls. No em-dashes in copy.