Split Screen Sign In

1'use client';
2
3import React, { useState } from 'react';
4import { Mail, Lock, Eye, EyeOff } from 'lucide-react';
5import { FaGithub } from 'react-icons/fa6';
6
7export default function SplitScreenLogin() {
8  const [showPassword, setShowPassword] = useState(false);
9
10  return (
11    <div className="w-full max-w-4xl overflow-hidden rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-2xl grid md:grid-cols-2">
12      <div className="relative hidden md:flex flex-col justify-between bg-gradient-to-br from-blue-900 via-slate-900 to-slate-950 p-8 lg:p-10 text-white">
13        <div className="spatial-grid absolute inset-0 opacity-20 pointer-events-none" />
14        <div className="relative z-10 font-bold text-xl tracking-wider">AURENZA</div>
15        <div className="relative z-10 space-y-3">
16          <h3 className="text-2xl lg:text-3xl font-extrabold leading-tight">Elevate your digital workflow.</h3>
17          <p className="text-xs lg:text-sm text-slate-300">Crafted with precision spatial elements and custom interactions.</p>
18        </div>
19        <div className="relative z-10 text-xs text-slate-400">© 2026 Aurenza UI. All rights reserved.</div>
20      </div>
21
22      <div className="p-6 sm:p-8 lg:p-10 flex flex-col justify-center">
23        <h2 className="text-xl sm:text-2xl font-bold text-slate-900 dark:text-slate-100">Access Account</h2>
24        <p className="text-xs text-slate-500 dark:text-slate-400 mt-1 mb-6">Enter your details to log into your workspace.</p>
25
26        <form onSubmit={(e) => e.preventDefault()} className="space-y-4">
27          <div>
28            <label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Email Address</label>
29            <div className="relative">
30              <Mail className="absolute left-3 top-2.5 h-4 w-4 text-slate-400" />
31              <input
32                type="email"
33                placeholder="name@domain.com"
34                className="w-full rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/60 py-2 pl-9 pr-3 text-sm text-slate-900 dark:text-slate-100 outline-none transition focus:border-blue-500"
35              />
36            </div>
37          </div>
38
39          <div>
40            <label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Password</label>
41            <div className="relative">
42              <Lock className="absolute left-3 top-2.5 h-4 w-4 text-slate-400" />
43              <input
44                type={showPassword ? 'text' : 'password'}
45                placeholder="Password"
46                className="w-full rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/60 py-2 pl-9 pr-10 text-sm text-slate-900 dark:text-slate-100 outline-none transition focus:border-blue-500"
47              />
48              <button
49                type="button"
50                onClick={() => setShowPassword(!showPassword)}
51                className="absolute right-3 top-2.5 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200"
52              >
53                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
54              </button>
55            </div>
56          </div>
57
58          <button className="w-full rounded-xl bg-blue-600 hover:bg-blue-700 active:scale-98 py-2.5 text-sm font-semibold text-white shadow-md transition">
59            Continue
60          </button>
61        </form>
62
63        <div className="relative my-6 text-center">
64          <div className="absolute inset-0 flex items-center">
65            <div className="w-full border-t border-slate-200 dark:border-slate-800" />
66          </div>
67          <span className="relative bg-white dark:bg-slate-900 px-2 text-[10px] uppercase text-slate-400 font-semibold">
68            Or continue with
69          </span>
70        </div>
71
72        <button className="flex w-full items-center justify-center gap-2 rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/60 py-2.5 text-xs font-semibold text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition">
73          <FaGithub className="h-4 w-4" />
74          GitHub Account
75        </button>
76      </div>
77    </div>
78  );
79}