feature/syasya/testlayout #7
@ -7,28 +7,57 @@ type Props = {}
|
||||
|
||||
const LoginPage = (props: Props) => {
|
||||
return (
|
||||
<div>
|
||||
<div className="absolute inset-0">
|
||||
<img src="/assets/images/auth/bg-gradient.png" alt="image" className="h-full w-full object-cover" />
|
||||
<div className="relative min-h-screen overflow-hidden bg-[#060818] text-white">
|
||||
{/* Background gradient layer */}
|
||||
<div className="absolute inset-0 -z-10">
|
||||
<img
|
||||
src="/assets/images/auth/bg-gradient.png"
|
||||
alt="background gradient"
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
|
||||
</div>
|
||||
|
||||
<div className="relative flex min-h-screen items-center justify-center bg-[linear-gradient(45deg,#ffffff_0%,#fcd913_100%)] bg-cover bg-center bg-no-repeat px-6 py-10 dark:bg-[#060818] sm:px-16">
|
||||
<img src="/assets/images/auth/coming-soon-object1.png" alt="image" className="absolute left-0 top-1/2 h-full max-h-[893px] -translate-y-1/2" />
|
||||
<img src="/assets/images/auth/coming-soon-object2.png" alt="image" className="absolute left-24 top-0 h-40 md:left-[30%]" />
|
||||
<img src="/assets/images/auth/coming-soon-object3.png" alt="image" className="absolute right-0 top-0 h-[300px]" />
|
||||
<img src="/assets/images/auth/polygon-object.svg" alt="image" className="absolute bottom-0 end-[28%]" />
|
||||
<div className="relative w-full max-w-[870px] rounded-md bg-[linear-gradient(45deg,#fff9f9_0%,rgba(255,255,255,0)_25%,rgba(255,255,255,0)_75%,_#fff9f9_100%)] p-2 dark:bg-[linear-gradient(52.22deg,#0E1726_0%,rgba(14,23,38,0)_18.66%,rgba(14,23,38,0)_51.04%,rgba(14,23,38,0)_80.07%,#0E1726_100%)]">
|
||||
<div className="relative flex flex-col justify-center rounded-md bg-white/60 px-6 py-20 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px]">
|
||||
<div className="mx-auto w-full max-w-[440px]">
|
||||
<div className="mb-10">
|
||||
<h1 className="text-3xl font-extrabold uppercase !leading-snug text-primary md:text-4xl">Sign in</h1>
|
||||
<p className="text-base font-bold leading-normal text-white-dark">Enter your email and password to login</p>
|
||||
</div>
|
||||
{/* Background decorative objects */}
|
||||
<img
|
||||
src="/assets/images/auth/coming-soon-object1.png"
|
||||
alt="left decor"
|
||||
className="absolute left-0 top-1/2 hidden h-full max-h-[893px] -translate-y-1/2 brightness-125 md:block"
|
||||
/>
|
||||
<img
|
||||
src="/assets/images/auth/coming-soon-object3.png"
|
||||
alt="right decor"
|
||||
className="absolute right-0 top-0 hidden h-[300px] brightness-125 md:block"
|
||||
/>
|
||||
|
||||
{/* Centered card wrapper */}
|
||||
<div className="relative flex min-h-screen items-center justify-center px-6 py-10 sm:px-16">
|
||||
<div
|
||||
className="relative w-full max-w-[870px] rounded-2xl p-1
|
||||
bg-[linear-gradient(45deg,#fffbe6_0%,rgba(255,251,230,0)_25%,rgba(255,251,230,0)_75%,#fffbe6_100%)]
|
||||
dark:bg-[linear-gradient(52.22deg,#facc15_0%,rgba(250,204,21,0)_20%,rgba(250,204,21,0)_80%,#facc15_100%)]"
|
||||
>
|
||||
{/* Inner card (glassmorphic effect) */}
|
||||
<div className="relative z-10 rounded-2xl bg-white/10 px-8 py-16 backdrop-blur-lg dark:bg-white/10 lg:min-h-[600px]">
|
||||
<div className="mx-auto w-full max-w-[440px] text-center">
|
||||
{/* Header */}
|
||||
<h1 className="text-4xl font-extrabold uppercase tracking-wide text-yellow-400 mb-2">
|
||||
Sign In
|
||||
</h1>
|
||||
<p className="text-base font-medium text-gray-200 dark:text-gray-300 mb-8">
|
||||
Enter your email and password to access your account.
|
||||
</p>
|
||||
|
||||
{/* Login form */}
|
||||
<ComponentsAuthLoginForm />
|
||||
|
||||
<div className="text-center dark:text-white">
|
||||
Don't have an account ?
|
||||
<Link href="/register" className="uppercase text-primary underline transition hover:text-black dark:hover:text-white">
|
||||
{/* Footer link */}
|
||||
<div className="mt-6 text-sm text-gray-200 dark:text-gray-300">
|
||||
Don’t have an account?{" "}
|
||||
<Link
|
||||
href="/register"
|
||||
className="text-yellow-400 font-semibold underline transition hover:text-white"
|
||||
>
|
||||
SIGN UP
|
||||
</Link>
|
||||
</div>
|
||||
@ -37,7 +66,8 @@ const LoginPage = (props: Props) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export default LoginPage
|
||||
|
||||
@ -7,29 +7,57 @@ type Props = {}
|
||||
|
||||
const RegisterPage = (props: Props) => {
|
||||
return (
|
||||
<div>
|
||||
<div className="absolute inset-0">
|
||||
<img src="/assets/images/auth/bg-gradient.png" alt="image" className="h-full w-full object-cover" />
|
||||
<div className="relative min-h-screen overflow-hidden bg-[#060818] text-white">
|
||||
{/* Background gradient layer */}
|
||||
<div className="absolute inset-0 -z-10">
|
||||
<img
|
||||
src="/assets/images/auth/bg-gradient.png"
|
||||
alt="background gradient"
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
|
||||
</div>
|
||||
|
||||
<div className="relative flex min-h-screen items-center justify-center bg-[linear-gradient(45deg,#ffffff_0%,#fcd913_100%)] bg-cover bg-center bg-no-repeat px-6 py-10 dark:bg-[#060818] sm:px-16">
|
||||
<img src="/assets/images/auth/coming-soon-object1.png" alt="image" className="absolute left-0 top-1/2 h-full max-h-[893px] -translate-y-1/2" />
|
||||
<img src="/assets/images/auth/coming-soon-object2.png" alt="image" className="absolute left-24 top-0 h-40 md:left-[30%]" />
|
||||
<img src="/assets/images/auth/coming-soon-object3.png" alt="image" className="absolute right-0 top-0 h-[300px]" />
|
||||
<img src="/assets/images/auth/polygon-object.svg" alt="image" className="absolute bottom-0 end-[28%]" />
|
||||
<div className="relative w-full max-w-[870px] rounded-md bg-[linear-gradient(45deg,#fff9f9_0%,rgba(255,255,255,0)_25%,rgba(255,255,255,0)_75%,_#fff9f9_100%)] p-2 dark:bg-[linear-gradient(52.22deg,#0E1726_0%,rgba(14,23,38,0)_18.66%,rgba(14,23,38,0)_51.04%,rgba(14,23,38,0)_80.07%,#0E1726_100%)]">
|
||||
<div className="relative flex flex-col justify-center rounded-md bg-white/60 px-6 py-20 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px]">
|
||||
{/* Background decorative objects */}
|
||||
<img
|
||||
src="/assets/images/auth/coming-soon-object1.png"
|
||||
alt="left decor"
|
||||
className="absolute left-0 top-1/2 hidden h-full max-h-[893px] -translate-y-1/2 brightness-125 md:block"
|
||||
/>
|
||||
<img
|
||||
src="/assets/images/auth/coming-soon-object3.png"
|
||||
alt="right decor"
|
||||
className="absolute right-0 top-0 hidden h-[300px] brightness-125 md:block"
|
||||
/>
|
||||
|
||||
<div className="mx-auto w-full max-w-[440px]">
|
||||
<div className="mb-10">
|
||||
<h1 className="text-3xl font-extrabold uppercase !leading-snug text-primary md:text-4xl">Sign Up</h1>
|
||||
<p className="text-base font-bold leading-normal text-white-dark">Enter your email and password to register</p>
|
||||
</div>
|
||||
{/* Centered card wrapper */}
|
||||
<div className="relative flex min-h-screen items-center justify-center px-6 py-10 sm:px-16">
|
||||
<div
|
||||
className="relative w-full max-w-[870px] rounded-2xl p-1
|
||||
bg-[linear-gradient(45deg,#fffbe6_0%,rgba(255,251,230,0)_25%,rgba(255,251,230,0)_75%,#fffbe6_100%)]
|
||||
dark:bg-[linear-gradient(52.22deg,#facc15_0%,rgba(250,204,21,0)_20%,rgba(250,204,21,0)_80%,#facc15_100%)]"
|
||||
>
|
||||
{/* Inner card (glassmorphic effect) */}
|
||||
<div className="relative z-10 rounded-2xl bg-white/10 px-8 py-16 backdrop-blur-lg dark:bg-white/10 lg:min-h-[600px]">
|
||||
<div className="mx-auto w-full max-w-[440px] text-center">
|
||||
{/* Header */}
|
||||
<h1 className="text-4xl font-extrabold uppercase tracking-wide text-yellow-400 mb-2">
|
||||
Sign Up
|
||||
</h1>
|
||||
<p className="text-base font-medium text-gray-200 dark:text-gray-300 mb-8">
|
||||
Enter your email and password to register
|
||||
</p>
|
||||
|
||||
{/* Login form */}
|
||||
<ComponentsAuthRegisterForm />
|
||||
|
||||
<div className="text-center dark:text-white">
|
||||
Already have an account ?
|
||||
<Link href="/login" className="uppercase text-primary underline transition hover:text-black dark:hover:text-white">
|
||||
{/* Footer link */}
|
||||
<div className="mt-6 text-sm text-gray-200 dark:text-gray-300">
|
||||
Already have an account ?{" "}
|
||||
<Link
|
||||
href="/register"
|
||||
className="text-yellow-400 font-semibold underline transition hover:text-white"
|
||||
>
|
||||
SIGN IN
|
||||
</Link>
|
||||
</div>
|
||||
@ -38,7 +66,7 @@ const RegisterPage = (props: Props) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default RegisterPage
|
||||
|
||||
@ -35,9 +35,9 @@ const ComponentsAuthLoginForm = () => {
|
||||
}
|
||||
|
||||
return (
|
||||
<form className="space-y-5 dark:text-white" onSubmit={submitForm}>
|
||||
<form className="space-y-3 dark:text-white" onSubmit={submitForm}>
|
||||
<div>
|
||||
<label htmlFor="Email">Email</label>
|
||||
<label htmlFor="Email" className='text-yellow-400 text-left'>Email</label>
|
||||
<div className="relative text-white-dark">
|
||||
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Enter Email" className="form-input ps-10 placeholder:text-white-dark" />
|
||||
<span className="absolute start-4 top-1/2 -translate-y-1/2">
|
||||
@ -45,8 +45,8 @@ const ComponentsAuthLoginForm = () => {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="Password">Password</label>
|
||||
<div className= "pb-2">
|
||||
<label htmlFor="Password" className='text-yellow-400 text-left'>Password</label>
|
||||
<div className="relative text-white-dark">
|
||||
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required placeholder="Enter Password" className="form-input ps-10 placeholder:text-white-dark" />
|
||||
<span className="absolute start-4 top-1/2 -translate-y-1/2">
|
||||
@ -54,7 +54,11 @@ const ComponentsAuthLoginForm = () => {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" disabled={loading} className="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className=" w-full uppercase border-0 rounded-md bg-[#fcd913] text-black font-semibold py-2 hover:bg-[#E6C812] transition disabled:opacity-70"
|
||||
>
|
||||
{loading ? "Logging in..." : "Sign In"}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@ -47,24 +47,24 @@ const ComponentsAuthRegisterForm = () => {
|
||||
</div>
|
||||
</div> */}
|
||||
<div>
|
||||
<label htmlFor="Email">Email</label>
|
||||
<label htmlFor="Email" className='text-yellow-400 text-left'>Email</label>
|
||||
<div className="relative text-white-dark">
|
||||
<input value={email} onChange={(e) => setEmail(e.target.value)} type="email" placeholder="Enter Email" className="form-input ps-10 placeholder:text-white-dark" />
|
||||
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Enter Email" className="form-input ps-10 placeholder:text-white-dark" />
|
||||
<span className="absolute start-4 top-1/2 -translate-y-1/2">
|
||||
<IconMail fill={true} />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="Password">Password</label>
|
||||
<div className= "pb-2">
|
||||
<label htmlFor="Password" className='text-yellow-400 text-left'>Password</label>
|
||||
<div className="relative text-white-dark">
|
||||
<input value={password} onChange={(e) => setPassword(e.target.value)} type="password" placeholder="Enter Password" className="form-input ps-10 placeholder:text-white-dark" />
|
||||
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required placeholder="Enter Password" className="form-input ps-10 placeholder:text-white-dark" />
|
||||
<span className="absolute start-4 top-1/2 -translate-y-1/2">
|
||||
<IconLockDots fill={true} />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" disabled={loading} className="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]">
|
||||
<button type="submit" disabled={loading} className=" w-full uppercase border-0 rounded-md bg-[#fcd913] text-black font-semibold py-2 hover:bg-[#E6C812] transition disabled:opacity-70">
|
||||
{loading ? "Creating account..." : "Register"}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@ -50,7 +50,7 @@ const MonthlyBarChart: React.FC<MonthlyBarChartProps> = ({ siteData }) => {
|
||||
}
|
||||
}
|
||||
|
||||
// ✅ Only return the last 3 months
|
||||
// ✅ Only return the last 6 months
|
||||
return monthlyData.slice(-6);
|
||||
|
||||
}, [siteData]);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user