@@ -14,7 +14,7 @@ const Signin = () => {
1414 register,
1515 handleSubmit,
1616 formState : { errors, isSubmitting, isValid } ,
17- } = useForm ( { mode : "onChange" } ) ;
17+ } = useForm ( { mode : "onChange" , defaultValues : { role : "client" } } ) ;
1818
1919 useEffect ( ( ) => {
2020 if ( user ) {
@@ -27,46 +27,32 @@ const Signin = () => {
2727 } ;
2828
2929 return (
30- < div className = "min-h-screen w-full flex items-center justify-center bg-[url(https://images.unsplash.com/photo-1644394969490-a0722932071a?q=80& w = 1986 & auto = format & fit = crop & ixlib = rb - 4.1 .0 & ixid = M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA % 3 D % 3 D ) ] bg - center bg - cover relative overflow - hidden ">
31- < div className = "absolute inset-0 bg-black/60" > </ div >
32- < div className = "relative z-10 w-full max-w-5xl mx-auto px-4" >
33- < div className = "flex w-full bg-black/35 backdrop-blur-xl rounded-2xl shadow-2xl overflow-hidden border border-white/10" >
30+ < div className = "min-h-screen w-full flex items-center justify-center bg-[#0b0b0b] relative overflow-hidden" >
31+ < div className = "w-full max-w-5xl mx-auto px-4" >
32+ < div className = "flex w-full bg-slate-900/70 rounded-3xl shadow-[0_24px_60px_-24px_rgba(0,0,0,0.7)] overflow-hidden border border-white/10" >
3433 { /* Left Side - Brand */ }
35- < div className = "hidden lg:flex lg:w-1/2 p-12 flex-col justify-between relative text-white" >
34+ < div className = "hidden lg:flex lg:w-1/2 p-12 flex-col justify-between relative text-slate-100 border-r border- white/10 " >
3635 < div >
3736 < div className = "flex items-center mb-8" >
38- < div className = "w-8 h-8 bg-white/30 rounded transform rotate-45 mr-3" > </ div >
39- < h1 className = "text-3xl font-bold tracking-wide" > ÉLITE</ h1 >
37+ < div className = "w-8 h-8 bg-teal-400/20 rounded-lg mr-3" > </ div >
38+ < h1 className = "text-3xl font-semibold tracking-wide" > ÉLITE</ h1 >
4039 </ div >
4140
4241 < div >
4342 < h2 className = "text-5xl font-bold mb-4 leading-tight" >
44- < br /> COLLECTION
43+ DIGITAL < br /> WORKSPACE
4544 </ h2 >
46- < p className = "text-white/80 text-lg leading-relaxed" >
47- Sign in to access all the features of our service.
48- < br />
49- Manage your lifestyle in one place.
45+ < p className = "text-slate-300 text-lg leading-relaxed" >
46+ Sign in to manage projects, track milestones, and collaborate in real time.
5047 </ p >
5148 </ div >
5249 </ div >
53-
54- < div className = "absolute bottom-12 right-10 w-64 h-64 opacity-30" >
55- < svg viewBox = "0 0 200 200" className = "w-full h-full" >
56- < path
57- d = "M100 20 C120 30, 140 50, 140 80 L140 120 C140 140, 130 160, 100 180 C70 160, 60 140, 60 120 L60 80 C60 50, 80 30, 100 20 Z"
58- fill = "white"
59- opacity = "0.6"
60- />
61- < circle cx = "100" cy = "40" r = "15" fill = "white" opacity = "0.8" />
62- </ svg >
63- </ div >
6450 </ div >
6551
6652 { /* Right Side - Signin Form */ }
6753 < div className = "w-full lg:w-1/2 p-8 lg:p-12 bg-white/5" >
6854 < div className = "max-w-md mx-auto" >
69- < h2 className = "text-white text-4xl font-bold " > Welcome back</ h2 >
55+ < h2 className = "text-white text-4xl font-semibold " > Welcome back</ h2 >
7056 < p className = "text-white/70 mt-2 mb-8" >
7157 Please enter your details to continue.
7258 </ p >
@@ -88,7 +74,7 @@ const Signin = () => {
8874 } ,
8975 } ) }
9076 aria-invalid = { errors . email ? "true" : "false" }
91- className = "w-full text-white placeholder-white/60 bg-white/10 border border-white/10 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-white /60 focus:border-transparent transition-all"
77+ className = "w-full text-white placeholder-white/60 bg-slate-800/60 border border-white/10 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-teal-400 /60 focus:border-transparent transition-all"
9278 placeholder = "john@doe.example"
9379 />
9480 { errors . email && (
@@ -110,7 +96,7 @@ const Signin = () => {
11096 minLength : { value : 8 , message : "Minimum 8 characters" } ,
11197 } ) }
11298 aria-invalid = { errors . password ? "true" : "false" }
113- className = "w-full text-white placeholder-white/60 bg-white/10 border border-white/10 rounded-lg px-4 py-3 pr-16 focus:outline-none focus:ring-2 focus:ring-white /60 focus:border-transparent transition-all"
99+ className = "w-full text-white placeholder-white/60 bg-slate-800/60 border border-white/10 rounded-lg px-4 py-3 pr-16 focus:outline-none focus:ring-2 focus:ring-teal-400 /60 focus:border-transparent transition-all"
114100 placeholder = "••••••••"
115101 />
116102 < button
@@ -126,13 +112,31 @@ const Signin = () => {
126112 ) }
127113 </ div >
128114
115+ < div className = "space-y-2" >
116+ < label htmlFor = "signin-role" className = "text-white/80 text-sm font-medium" >
117+ Account type
118+ </ label >
119+ < select
120+ id = "signin-role"
121+ { ...register ( "role" ) }
122+ className = "w-full text-white bg-slate-800/60 border border-white/10 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-teal-400/60 focus:border-transparent transition-all"
123+ >
124+ < option value = "client" className = "text-gray-900" >
125+ Client
126+ </ option >
127+ < option value = "developer" className = "text-gray-900" >
128+ Developer
129+ </ option >
130+ </ select >
131+ </ div >
132+
129133 < div className = "flex items-center justify-between" >
130134 < label className = "flex items-center gap-2 text-sm text-white/80" >
131135 < input
132136 type = "checkbox"
133137 { ...register ( "rememberMe" ) }
134- className = "w-4 h-4 bg-white/10 border-white/20 rounded focus:ring-white /60 focus:ring-2"
135- />
138+ className = "w-4 h-4 bg-slate-800/60 border-white/20 rounded focus:ring-teal-400 /60 focus:ring-2"
139+ />
136140 Remember me
137141 </ label >
138142 < Link
@@ -146,7 +150,7 @@ const Signin = () => {
146150 < button
147151 type = "submit"
148152 disabled = { isSubmitting || ! isValid }
149- className = "w-full rounded-tr-2xl bg-white text-gray -900 font-semibold py-3 px-6 border-2 border-white/70 hover:border-white hover: bg-white/90 transition-all duration-300 text-base uppercase tracking-wide disabled:opacity-50 disabled:cursor-not-allowed"
153+ className = "w-full rounded-xl bg-teal-400 text-slate -900 font-semibold py-3 px-6 hover:bg-teal-300 transition-all duration-300 text-base uppercase tracking-wide disabled:opacity-50 disabled:cursor-not-allowed"
150154 >
151155 { isSubmitting ? "Signing in..." : "Sign in" }
152156 </ button >
0 commit comments