"use client"; import React, { useState } from "react"; import { motion, AnimatePresence, Variants } from "framer-motion"; import { Eye, EyeOff, Loader2, Mail, Lock, ArrowRight, Github } from "lucide-react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export interface SplitMinimalistLoginProps { brandName: string; welcomeHeadline: string; welcomeMessage: string; onLogin: (email: string, password: string) => Promise; onSocialLogin?: (provider: string) => void; className?: string; } const staggerVariants: Variants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, delayChildren: 0.2 }, }, }; const itemVariants: Variants = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 100, damping: 15 } }, }; export function SplitMinimalistLogin({ brandName, welcomeHeadline, welcomeMessage, onLogin, onSocialLogin, className, }: SplitMinimalistLoginProps) { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [showPassword, setShowPassword] = useState(false); const [isLoading, setIsLoading] = useState(false); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); if (!email || !password) return; setIsLoading(true); try { await onLogin(email, password); } finally { setIsLoading(false); } }; return (

{brandName}

{welcomeHeadline}

{welcomeMessage}

Sign in to your account

Enter your email and password to access the dashboard.

Email address

setEmail(e.target.value)} placeholder="name@company.com" required className="w-full pl-11 pr-4 py-3 bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl text-sm text-neutral-900 dark:text-white placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-amber-500/50 focus:border-amber-500 transition-all" />

Password

setPassword(e.target.value)} placeholder="••••••••" required className="w-full pl-11 pr-11 py-3 bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl text-sm text-neutral-900 dark:text-white placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-amber-500/50 focus:border-amber-500 transition-all" />

Or continue with

Don't have an account?{" "}

); } export default function SplitMinimalistLoginDemo() { const handleLogin = async (email: string) => { return new Promise((resolve) => { setTimeout(() => { console.log("Logged in with:", email); resolve(); }, 1500); }); }; return (

); }