# Split Sign-in

> A split-screen sign-in page: an aurora brand panel with a testimonial next to a validated form with social providers.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/templates/sign-in-split
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/sign-in-split.json
```

Adds the page at `app/sign-in-split/page.tsx` together with the components below. Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Components

- [Aurora Background](https://chromotion.dev/r/aurora-background.md): `@/components/aurora-background`
- [Sign-in Form](https://chromotion.dev/r/sign-in-form.md): `@/components/sign-in-form`

## Dependencies

```bash
npm install lucide-react
```

## Source

```tsx title="app/sign-in-split/page.tsx"
"use client"

import { Hexagon, Quote } from "lucide-react"

import { AuroraBackground } from "@/components/aurora-background"
import { SignInForm } from "@/components/sign-in-form"

function GitHubIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className={className}>
      <path d="M12 .5a11.5 11.5 0 0 0-3.64 22.41c.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.37-3.88-1.37-.52-1.33-1.28-1.69-1.28-1.69-1.04-.71.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.76 2.7 1.25 3.36.96.1-.75.4-1.25.73-1.54-2.56-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.17 1.18a11 11 0 0 1 5.77 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.11 3.05.74.81 1.19 1.84 1.19 3.1 0 4.42-2.69 5.39-5.25 5.68.41.36.78 1.06.78 2.14v3.17c0 .31.21.67.8.56A11.5 11.5 0 0 0 12 .5Z" />
    </svg>
  )
}

function GoogleIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 24 24" aria-hidden className={className}>
      <path fill="#4285F4" d="M23.5 12.27c0-.85-.08-1.67-.22-2.45H12v4.64h6.46a5.52 5.52 0 0 1-2.4 3.62v3h3.88c2.27-2.09 3.56-5.17 3.56-8.81Z" />
      <path fill="#34A853" d="M12 24c3.24 0 5.96-1.07 7.94-2.92l-3.88-3c-1.07.72-2.45 1.15-4.06 1.15-3.12 0-5.77-2.11-6.71-4.95H1.28v3.1A12 12 0 0 0 12 24Z" />
      <path fill="#FBBC05" d="M5.29 14.28a7.2 7.2 0 0 1 0-4.56v-3.1H1.28a12 12 0 0 0 0 10.76l4.01-3.1Z" />
      <path fill="#EA4335" d="M12 4.77c1.76 0 3.34.61 4.59 1.8l3.44-3.44A11.5 11.5 0 0 0 12 0 12 12 0 0 0 1.28 6.62l4.01 3.1C6.23 6.88 8.88 4.77 12 4.77Z" />
    </svg>
  )
}

const wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms))

export default function SignInSplit() {
  return (
    <div className="grid min-h-svh bg-background text-foreground lg:grid-cols-2">
      <AuroraBackground
        colors={["var(--ring)", "#a855f7", "#06b6d4"]}
        className="hidden flex-col justify-between border-r p-10 lg:flex"
      >
        <a href="#" className="flex items-center gap-2 font-semibold">
          <Hexagon className="size-5 fill-primary text-primary" /> Hexa
        </a>
        <figure className="flex max-w-md flex-col gap-4">
          <Quote className="size-6 text-muted-foreground" />
          <blockquote className="text-2xl leading-snug font-medium tracking-tight text-balance">
            We moved our whole platform in a week. Deploys went from twenty minutes to twenty seconds.
          </blockquote>
          <figcaption className="text-sm text-muted-foreground">Lena Park · Design Engineer, Nimbus</figcaption>
        </figure>
      </AuroraBackground>

      <main className="flex flex-col items-center justify-center gap-6 p-6">
        <a href="#" className="flex items-center gap-2 font-semibold lg:hidden">
          <Hexagon className="size-5 fill-primary text-primary" /> Hexa
        </a>
        <SignInForm
          className="border-0 shadow-none sm:border sm:shadow-sm"
          providers={[
            { id: "github", label: "GitHub", icon: GitHubIcon },
            { id: "google", label: "Google", icon: GoogleIcon },
          ]}
          onSubmit={async ({ password }) => {
            await wait(1000)
            if (password !== "password123") throw new Error("Wrong email or password. Hint: password123")
          }}
        />
        <p className="max-w-sm text-center text-xs text-muted-foreground">
          By continuing you agree to our{" "}
          <a href="#" className="underline underline-offset-4 hover:text-foreground">
            Terms
          </a>{" "}
          and{" "}
          <a href="#" className="underline underline-offset-4 hover:text-foreground">
            Privacy Policy
          </a>
          .
        </p>
      </main>
    </div>
  )
}
```