feat: implement LoginClient component and add institutional landing page layout

This commit is contained in:
2569718930@qq.com
2026-05-26 02:32:15 +08:00
parent 98458c0c05
commit 58cc82f520
2 changed files with 21 additions and 18 deletions
+6 -6
View File
@@ -386,7 +386,7 @@ export function LoginClient({ nextPath, initialMode }: LoginClientProps) {
{/* Right Column (Forms) */}
<div className="flex flex-1 flex-col justify-between p-6 sm:p-10 bg-gradient-to-br from-[#f8fafc] via-[#ffffff] to-[#eff4f9] min-h-screen relative overflow-hidden">
{/* Subtle mesh background */}
<div className="absolute inset-0 bg-[linear-gradient(to_right,rgba(15,23,42,0.01)_1px,transparent_1px),linear-gradient(to_bottom,rgba(15,23,42,0.01)_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none" />
<div className="absolute inset-0 bg-[linear-gradient(to_right,rgba(15,23,42,0.01)_1px,transparent_1px),linear-gradient(to_bottom,rgba(15,23,42,0.01)_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none animate-pulse" style={{ animationDuration: '4s' }} />
{/* Top Header Switch */}
<div className="relative z-10 flex justify-between lg:justify-end items-center gap-3">
@@ -415,7 +415,7 @@ export function LoginClient({ nextPath, initialMode }: LoginClientProps) {
{/* Center Form Card */}
<div className="relative z-10 flex flex-1 items-center justify-center my-10">
<div className="w-full max-w-[440px] bg-white/90 backdrop-blur-xl border border-slate-200/50 rounded-2xl p-6 sm:p-10 shadow-[0_24px_60px_rgba(8,16,36,0.06)]">
<div className="w-full max-w-[440px] bg-white/90 backdrop-blur-xl border border-slate-200/50 rounded-2xl p-6 sm:p-10 shadow-[0_24px_60px_rgba(8,16,36,0.06)] animate-fade-up [animation-delay:200ms] opacity-0 transition-transform hover:-translate-y-1 hover:shadow-[0_32px_80px_rgba(8,16,36,0.08)] duration-500">
<div className="mb-6">
<h1 className="text-2xl font-black tracking-tight text-slate-900 mb-2">
{isLogin ? copy.welcomeBack : copy.signUpTitle}
@@ -426,7 +426,7 @@ export function LoginClient({ nextPath, initialMode }: LoginClientProps) {
</div>
<form onSubmit={(event) => void onEmailSubmit(event)} className="space-y-5">
<div className="space-y-2">
<div className="space-y-2 animate-fade-up [animation-delay:350ms] opacity-0">
<label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">
{copy.workEmail}
</label>
@@ -443,7 +443,7 @@ export function LoginClient({ nextPath, initialMode }: LoginClientProps) {
</div>
</div>
<div className="space-y-2">
<div className="space-y-2 animate-fade-up [animation-delay:450ms] opacity-0">
<div className="flex justify-between items-center">
<label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">
{copy.password}
@@ -489,10 +489,10 @@ export function LoginClient({ nextPath, initialMode }: LoginClientProps) {
<button
type="submit"
disabled={loading}
className="w-full py-3.5 px-4 rounded-xl bg-gradient-to-r from-slate-900 to-slate-800 hover:from-slate-950 hover:to-slate-900 text-sm font-bold text-white shadow-lg shadow-slate-950/10 hover:shadow-slate-950/20 active:scale-[0.98] transition-all duration-200 disabled:opacity-50 mt-8 flex items-center justify-center gap-2"
className="w-full py-3.5 px-4 rounded-xl bg-gradient-to-r from-slate-900 to-slate-800 hover:from-blue-600 hover:to-indigo-600 text-sm font-bold text-white shadow-lg shadow-slate-950/10 hover:shadow-blue-600/25 active:scale-[0.98] transition-all duration-300 disabled:opacity-50 mt-8 flex items-center justify-center gap-2 group animate-fade-up [animation-delay:550ms] opacity-0"
>
<span>{isLogin ? copy.loginSubmit : copy.signupSubmit}</span>
<ArrowRight size={16} />
<ArrowRight size={16} className="transition-transform group-hover:translate-x-1" />
</button>
</form>