Sign-in split screen
Split-screen sign-in page template with a full-bleed image left panel and a white auth panel on the right. Google, Apple, and email auth buttons with a legal footer. The standard sign-in layout for SaaS and web apps. Copy and paste into Bolt, Replit, Lovable, Claude Code, or Cursor.
About this vibe coding template
A split-screen sign-in page template built on the layout pattern used by most successful SaaS products. The left column fills with a full-bleed photo or gradient that adds visual depth to a screen that would otherwise be entirely functional. The right column is white and centered: a logo at the top, a short headline, one line of supporting text, and three stacked auth buttons. Google and Apple use neutral styling so they read as secondary options; the email button gets the primary blue and directs the eye to the main conversion action. A legal line with Terms and Privacy links closes the panel without adding visual noise. Paste into Bolt, Claude Code, Replit, or Lovable and ask the AI to update the logo, headline, button labels, and left panel image to match your product.
Common questions about this template
Why use a split-screen login layout instead of a centered sign-in form?
Split-screen login pages use the left panel to reinforce the brand or show product imagery while the right panel stays focused on the auth action. The visual weight on the left gives the screen purpose and reduces the blank-page feeling of a plain centered form, which builds perceived trust and increases completion rates.
How do I replace the image on the left panel?
Ask your vibe coding tool to change the background-image URL on the left column div. Give the AI the URL for your own photo or gradient, such as a product screenshot or brand illustration, and it will swap it in while keeping the full-bleed cover sizing intact.
How do I add or remove an auth button?
Ask Bolt, Claude Code, Replit, or Lovable to add a new button inside the button stack and style it to match the existing auth buttons. To remove a button, ask the AI to delete the corresponding button element and its icon SVG.
How do I change the logo in the sign-in panel?
Ask your vibe coding tool to replace the SVG inside the logo div with your own logo mark. If you have an image URL, tell the AI to replace the SVG with an img tag using your URL and the same 30px dimensions.
Use this AI coding template for
- ·Sign-in and login pages for SaaS products and web applications
- ·Auth flows that reinforce brand identity with a full-bleed image panel
- ·Signup pages for vibe-coded apps built with Bolt, Replit, Lovable, or Claude Code