feat: upgrade login page to split-screen layout with branding
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate } from 'react-router';
|
||||
import { FiEye, FiEyeOff } from 'react-icons/fi';
|
||||
import { FiEye, FiEyeOff, FiActivity, FiUserCheck, FiFileText } from 'react-icons/fi';
|
||||
import { BsStars } from 'react-icons/bs';
|
||||
|
||||
const LoginPage = () => {
|
||||
const [credentials, setCredentials] = useState({ email: '', password: '' });
|
||||
@@ -26,15 +27,81 @@ const LoginPage = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-[#0a0a0a] via-[#1a1a24] to-[#2a0810] flex items-center justify-center p-4 font-sans relative overflow-hidden">
|
||||
<div className="min-h-screen bg-[#0a0a0a] font-sans flex overflow-hidden">
|
||||
|
||||
{/* LEFT COLUMN: Branding & Features */}
|
||||
<div className="hidden lg:flex w-3/5 relative flex-col justify-between p-12 overflow-hidden border-r border-white/5">
|
||||
{/* Background Ambient Glows */}
|
||||
<div className="absolute top-0 left-0 w-[500px] h-[500px] bg-limelite-red/20 rounded-full blur-[120px] -translate-x-1/2 -translate-y-1/2"></div>
|
||||
<div className="absolute bottom-0 right-0 w-[500px] h-[500px] bg-limelite-maroon/20 rounded-full blur-[120px] translate-x-1/2 translate-y-1/2"></div>
|
||||
<div className="absolute top-0 left-0 w-[600px] h-[600px] bg-limelite-red/20 rounded-full blur-[150px] -translate-x-1/4 -translate-y-1/4"></div>
|
||||
<div className="absolute bottom-0 right-0 w-[600px] h-[600px] bg-limelite-maroon/20 rounded-full blur-[150px] translate-x-1/4 translate-y-1/4"></div>
|
||||
|
||||
{/* Hexagon Grid Pattern Overlay */}
|
||||
<div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-[0.03]"></div>
|
||||
|
||||
{/* Header / Logo */}
|
||||
<div className="relative z-10 flex items-center gap-4 animate-[fadeIn_0.5s_ease-out]">
|
||||
<div className="bg-gradient-to-tr from-limelite-maroon to-limelite-red p-1 rounded-2xl shadow-lg shadow-limelite-red/20">
|
||||
<div className="bg-black/60 backdrop-blur-md p-3 rounded-xl">
|
||||
<img src={process.env.PUBLIC_URL + '/assets/images/logo.jpg'} alt="Limelite" className="h-6 brightness-0 invert opacity-90" />
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-white text-xl font-serif italic tracking-wider">Limelite</span>
|
||||
</div>
|
||||
|
||||
{/* Main Value Proposition */}
|
||||
<div className="relative z-10 max-w-2xl my-auto animate-[fadeIn_0.7s_ease-out]">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-limelite-red/10 border border-limelite-red/20 text-limelite-red text-sm font-semibold tracking-widest uppercase mb-8">
|
||||
<BsStars className="animate-pulse" />
|
||||
Powered by AI
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl xl:text-7xl font-light text-white leading-tight mb-6">
|
||||
Intelligent <br />
|
||||
<span className="font-serif italic text-transparent bg-clip-text bg-gradient-to-r from-limelite-red to-rose-400">
|
||||
Face Analysis
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-gray-400 text-lg xl:text-xl font-light leading-relaxed mb-12 max-w-xl">
|
||||
The next generation of aesthetic intelligence. Deeply analyze facial structures, map skin conditions with precision, and generate automated, tailored client reports in seconds.
|
||||
</p>
|
||||
|
||||
{/* Feature Cards Grid */}
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="bg-white/5 border border-white/10 backdrop-blur-sm p-6 rounded-2xl hover:bg-white/10 transition-colors group">
|
||||
<FiActivity className="text-limelite-red text-3xl mb-4 group-hover:scale-110 transition-transform" />
|
||||
<h3 className="text-white font-semibold mb-2">Precision Mapping</h3>
|
||||
<p className="text-gray-500 text-sm">Advanced AI models to detect and map subtle skin features.</p>
|
||||
</div>
|
||||
<div className="bg-white/5 border border-white/10 backdrop-blur-sm p-6 rounded-2xl hover:bg-white/10 transition-colors group">
|
||||
<FiFileText className="text-limelite-red text-3xl mb-4 group-hover:scale-110 transition-transform" />
|
||||
<h3 className="text-white font-semibold mb-2">Automated Reports</h3>
|
||||
<p className="text-gray-500 text-sm">Generate beautiful PDF reports instantly for your clients.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer info */}
|
||||
<div className="relative z-10 text-gray-500 text-sm flex items-center justify-between">
|
||||
<p>© 2026 Limelite Smart Mirror. All rights reserved.</p>
|
||||
<p>System Version 3.1.0</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* RIGHT COLUMN: Login Form */}
|
||||
<div className="w-full lg:w-2/5 relative flex items-center justify-center p-4 bg-[#111115]">
|
||||
{/* Mobile ambient glow */}
|
||||
<div className="lg:hidden absolute top-0 left-0 w-[400px] h-[400px] bg-limelite-red/20 rounded-full blur-[100px] -translate-x-1/2 -translate-y-1/2"></div>
|
||||
|
||||
<div className="w-full max-w-md relative z-10 animate-[fadeIn_0.5s_ease-out]">
|
||||
<div className="backdrop-blur-xl bg-white/5 border border-white/10 p-10 shadow-2xl rounded-2xl">
|
||||
<div className="backdrop-blur-xl bg-black/40 border border-white/10 p-10 shadow-2xl rounded-2xl relative overflow-hidden">
|
||||
|
||||
{/* Subtle top border gradient */}
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-limelite-red to-transparent opacity-50"></div>
|
||||
|
||||
<div className="flex flex-col items-center mb-10">
|
||||
<div className="bg-gradient-to-tr from-limelite-maroon to-limelite-red p-1 rounded-2xl mb-6 shadow-lg shadow-limelite-red/30">
|
||||
{/* Mobile Logo */}
|
||||
<div className="lg:hidden bg-gradient-to-tr from-limelite-maroon to-limelite-red p-1 rounded-2xl mb-6 shadow-lg shadow-limelite-red/30">
|
||||
<div className="bg-black/40 backdrop-blur-md p-4 rounded-xl">
|
||||
<img src={process.env.PUBLIC_URL + '/assets/images/logo.jpg'} alt="Limelite" className="h-8 brightness-0 invert opacity-90" />
|
||||
</div>
|
||||
@@ -55,7 +122,7 @@ const LoginPage = () => {
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg py-3 px-4 text-white placeholder-gray-500 focus:outline-none focus:border-limelite-red focus:bg-white/10 transition-all"
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg py-3 px-4 text-white placeholder-gray-600 focus:outline-none focus:border-limelite-red focus:bg-white/10 transition-all"
|
||||
placeholder="admin@limelite.com"
|
||||
value={credentials.email}
|
||||
onChange={(e) => setCredentials({ ...credentials, email: e.target.value })}
|
||||
@@ -67,7 +134,7 @@ const LoginPage = () => {
|
||||
<input
|
||||
type={showPassword ? "text" : "password"}
|
||||
required
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg py-3 pl-4 pr-12 text-white placeholder-gray-500 focus:outline-none focus:border-limelite-red focus:bg-white/10 transition-all"
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg py-3 pl-4 pr-12 text-white placeholder-gray-600 focus:outline-none focus:border-limelite-red focus:bg-white/10 transition-all"
|
||||
placeholder="••••••••"
|
||||
value={credentials.password}
|
||||
onChange={(e) => setCredentials({ ...credentials, password: e.target.value })}
|
||||
@@ -97,13 +164,18 @@ const LoginPage = () => {
|
||||
</svg>
|
||||
Authenticating...
|
||||
</>
|
||||
) : 'Login to Admin'}
|
||||
) : (
|
||||
<>
|
||||
Login to Admin <FiUserCheck className="ml-1" />
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user