Split Screen Layout
Splits the viewport into two equal halves with distinct visual identities, forcing a clear choice or presenting a strong contrast between two ideas.
AI Prompt
Create a split-screen login/signup page in Next.js with Tailwind CSS. Left half: full-height dark panel (`bg-slate-900`) with a large decorative element — a grid of dots or abstract shape in `indigo-800/30`, a product logo, a bold tagline in white, and 3 customer testimonial snippets with star ratings at the bottom. Right half: white panel with a centered form (max-width 380px). Form includes a heading ("Welcome back"), Google OAuth button (icon + "Continue with Google", full-width, border style), an "or" divider with horizontal lines, email input, password input with show/hide toggle icon, a "Forgot password?" link, and a primary submit button. Below the form: "Don't have an account? Sign up" link. Both halves should be `min-h-screen` and flex-centered. The left panel should be hidden on mobile. Use `framer-motion` for a subtle fade-in on the right panel form elements. All inputs must have proper focus rings (`ring-2 ring-indigo-500`).