Feature Sign In

1'use client';
2import React, { useState } from 'react';
3import { Mail, Lock, Eye, EyeOff, ArrowRight, CheckCircle2 } from 'lucide-react';
4import { FaGoogle, FaGithub } from 'react-icons/fa6';
5
6export default function FeatureSignIn() {
7  const [showPass, setShowPass] = useState(false);
8  const features = ['Access all components instantly', 'Copy-paste ready code', 'Dark & light mode built-in', '100% free forever'];
9  return (
10    <div className="w-full max-w-3xl overflow-hidden rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-xl grid grid-cols-1 md:grid-cols-2">
11      {/* Feature panel */}
12      <div className="bg-blue-600 p-8 text-white flex flex-col justify-between">
13        <div>
14          <div className="text-xl font-black mb-6">Aurenza<span className="text-blue-200">UI</span></div>
15          <h3 className="text-2xl font-extrabold leading-tight mb-4">Everything you need to ship faster</h3>
16          <ul className="space-y-3">
17            {features.map((f) => (
18              <li key={f} className="flex items-center gap-3 text-sm text-blue-100">
19                <CheckCircle2 className="h-4 w-4 text-white shrink-0" />
20                {f}
21              </li>
22            ))}
23          </ul>
24        </div>
25        <div className="text-xs text-blue-200 mt-8">Join 50,000+ developers</div>
26      </div>
27
28      {/* Form */}
29      <div className="p-8 flex flex-col justify-center">
30        <h2 className="text-xl font-bold text-zinc-900 dark:text-zinc-100 mb-1">Sign in to continue</h2>
31        <p className="text-xs text-zinc-500 mb-6">Access your free account</p>
32
33        <div className="grid grid-cols-2 gap-2 mb-4">
34          <button className="flex items-center justify-center gap-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800 py-2.5 text-xs font-semibold text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 transition">
35            <FaGoogle className="h-3.5 w-3.5 text-rose-500" /> Google
36          </button>
37          <button className="flex items-center justify-center gap-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800 py-2.5 text-xs font-semibold text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 transition">
38            <FaGithub className="h-3.5 w-3.5" /> GitHub
39          </button>
40        </div>
41
42        <div className="relative mb-4">
43          <div className="absolute inset-0 flex items-center"><div className="w-full border-t border-zinc-200 dark:border-zinc-800" /></div>
44          <span className="relative mx-auto block w-fit bg-white dark:bg-zinc-900 px-3 text-[10px] uppercase tracking-wider text-zinc-400">or</span>
45        </div>
46
47        <form onSubmit={(e) => e.preventDefault()} className="space-y-3">
48          <div className="relative">
49            <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400" />
50            <input type="email" required placeholder="Email address" className="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800 py-2.5 pl-9 pr-3 text-sm text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 outline-none focus:border-blue-500 transition" />
51          </div>
52          <div className="relative">
53            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-400" />
54            <input type={showPass ? 'text' : 'password'} required placeholder="Password" className="w-full rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-800 py-2.5 pl-9 pr-10 text-sm text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 outline-none focus:border-blue-500 transition" />
55            <button type="button" onClick={() => setShowPass(!showPass)} className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200">
56              {showPass ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
57            </button>
58          </div>
59          <button type="submit" className="flex w-full items-center justify-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-700 py-2.5 text-sm font-semibold text-white transition">
60            Sign In <ArrowRight className="h-4 w-4" />
61          </button>
62        </form>
63        <p className="mt-4 text-xs text-zinc-500">No account? <a href="#" className="text-blue-600 dark:text-blue-400 font-semibold hover:underline">Sign up free</a></p>
64      </div>
65    </div>
66  );
67}