update: Hardcode changes and responsive design adjustments
This commit is contained in:
falendikategar
parent
26e64449f9
commit
50cdca1f1c
|
|
@ -97,98 +97,96 @@ export default function LoginPage() {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col lg:flex-row min-h-screen overflow-hidden">
|
<div className="flex flex-col w-screen h-screen 3xl:max-w-screen-2xl 3xl:mx-auto 3xl:px-4 overflow-hidden">
|
||||||
<div className="absolute top-6 left-7 text-base font-bold leading-5">
|
{/* Navbar */}
|
||||||
Amati
|
<nav className="flex w-full bg-transparent px-8 py-7 items-center justify-between">
|
||||||
</div>
|
<div className="text-base font-bold">Amati</div>
|
||||||
<div className="flex w-screen h-screen items-start lg:items-center justify-center lg:justify-end absolute -top-56 lg:top-0 overflow-hidden -z-20">
|
</nav>
|
||||||
<div className="flex absolute border border-slate-300 rounded-2xl w-[455px] h-[455px] lg:w-[45vw] lg:h-[45vw] items-center justify-center -rotate-[15deg]">
|
|
||||||
<div className="flex absolute border border-slate-400 rounded-2xl w-2/3 h-2/3 lg:w-4/5 lg:h-4/5 items-center justify-center">
|
{/* Background shapes */}
|
||||||
<div className="flex absolute border border-slate-500 rounded-2xl w-3/5 h-3/5 lg:w-3/4 lg:h-3/4 items-center justify-center">
|
<div className="absolute inset-0 flex -z-20 overflow-hidden">
|
||||||
<div className="hidden lg:flex absolute border border-slate-600 rounded-2xl w-2/3 h-2/3">
|
<div className="relative h-[50vw] lg:h-screen z-0">
|
||||||
</div>
|
<div className="-translate-y-[calc(40vw+2rem)] lg:translate-y-0 w-full lg:-translate-x-[calc(10vh-60vw)]">
|
||||||
</div>
|
<span className="absolute scale-50 lg:scale-50 -rotate-12 w-[100vw] h-[100vw] lg:w-[100vh] lg:h-[100vh] border border-gray-800 flex rounded-3xl"></span>
|
||||||
|
<span className="absolute scale-[85%] lg:scale-[70%] -rotate-12 w-[100vw] h-[100vw] lg:w-[100vh] lg:h-[100vh] border border-gray-400 flex rounded-3xl"></span>
|
||||||
|
<span className="absolute scale-[120%] lg:scale-90 -rotate-12 w-[100vw] h-[100vw] lg:w-[100vh] lg:h-[100vh] border border-gray-300 flex rounded-3xl"></span>
|
||||||
|
<span className="absolute scale-150 lg:scale-110 -rotate-12 w-[100vw] h-[100vw] lg:w-[100vh] lg:h-[100vh] border border-gray-200 hidden lg:flex rounded-3xl"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="w-screen h-screen flex ml-0 lg:ml-28 3xl:ml-96 4xl:ml-[48rem] justify-center lg:justify-start items-center">
|
|
||||||
<Card className="w-[19.125rem] sm:w-[26.063rem] lg:w-auto h-auto bg-transparent border-none shadow-none">
|
{/* Sign In form */}
|
||||||
<h1 className="mb-2 text-[2.625rem] font-bold leading-[3.177rem] tracking-tighter">Sign In</h1>
|
<div className="flex w-full min-h-screen ml-0 lg:ml-28 3xl:ml-40 -mt-16 justify-center lg:justify-start items-center">
|
||||||
<p className="text-sm mb-10 leading-4 text-muted-foreground">
|
<Card className="w-full sm:w-3/5 lg:w-2/6 px-8 sm:p-0 h-auto bg-transparent border-none shadow-none">
|
||||||
New to this app?{' '}
|
<h1 className="mb-2 text-4xl font-bold leading-10 tracking-tighter">Sign In</h1>
|
||||||
<a
|
<p className="text-sm mb-10 leading-4 text-muted-foreground">
|
||||||
href="/register"
|
New to this app?{' '}
|
||||||
className="text-blue-500 font-bold hover:text-blue-800"
|
<a href="/register" className="text-blue-600 font-bold hover:text-blue-800">
|
||||||
>
|
Register now
|
||||||
Register now
|
</a>
|
||||||
|
</p>
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(handleSubmit)}>
|
||||||
|
<div className="space-y-5">
|
||||||
|
{errorMessage && (
|
||||||
|
<Alert variant="destructive">
|
||||||
|
<p>{errorMessage}</p>
|
||||||
|
</Alert>
|
||||||
|
)}
|
||||||
|
<FormField
|
||||||
|
name="username"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="text-sm">
|
||||||
|
<FormLabel className="font-semibold leading-4">Email/Username</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
placeholder="eg; user@mail.com"
|
||||||
|
disabled={loginMutation.isPending}
|
||||||
|
className={form.formState.errors.username ? "border-red-500" : ""}
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
name="password"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="text-sm">
|
||||||
|
<FormLabel className="font-semibold leading-4">Password</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
type="password"
|
||||||
|
placeholder="*****"
|
||||||
|
disabled={loginMutation.isPending}
|
||||||
|
className={form.formState.errors.password ? "border-red-500" : ""}
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<p className="text-sm">
|
||||||
|
<a href="/forgot-password" className="text-blue-600 font-bold hover:text-blue-800 leading-4">
|
||||||
|
Forgot Password?
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
<Form {...form}>
|
</div>
|
||||||
<form onSubmit={form.handleSubmit(handleSubmit)}>
|
<div className="flex mt-10">
|
||||||
<div className="space-y-5">
|
<Button
|
||||||
{errorMessage && (
|
type="submit"
|
||||||
<Alert variant="destructive">
|
disabled={loginMutation.isPending}
|
||||||
<p>{errorMessage}</p>
|
variant="default"
|
||||||
</Alert>
|
className="flex w-full justify-between bg-blue-600 text-white hover:bg-blue-700"
|
||||||
)}
|
>
|
||||||
<FormField
|
<span className="leading-5">Sign In</span>
|
||||||
name="username"
|
<TbArrowNarrowRight className="h-5 w-5" />
|
||||||
render={({ field }) => (
|
</Button>
|
||||||
<FormItem className="text-sm">
|
</div>
|
||||||
<FormLabel className="font-semibold leading-4">Email/Username</FormLabel>
|
</form>
|
||||||
<FormControl>
|
</Form>
|
||||||
<Input
|
|
||||||
placeholder="eg; user@mail.com"
|
|
||||||
disabled={loginMutation.isPending}
|
|
||||||
className={form.formState.errors.username ? "border-red-500" : ""}
|
|
||||||
{...field}
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<FormField
|
|
||||||
name="password"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem className="text-sm">
|
|
||||||
<FormLabel className="font-semibold leading-4">Password</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input
|
|
||||||
type="password"
|
|
||||||
placeholder="*****"
|
|
||||||
disabled={loginMutation.isPending}
|
|
||||||
className={form.formState.errors.password ? "border-red-500" : ""}
|
|
||||||
{...field}
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<p className="text-sm">
|
|
||||||
<a
|
|
||||||
href="/forgot-password"
|
|
||||||
className="text-blue-500 font-bold hover:text-blue-800 leading-4"
|
|
||||||
>
|
|
||||||
Forgot Password?
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between mt-10">
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
disabled={loginMutation.isPending}
|
|
||||||
variant="default"
|
|
||||||
className="w-full flex items-center justify-center space-x-[13.125rem] sm:space-x-[20rem]
|
|
||||||
lg:space-x-[23.125rem] bg-[#2555FF] text-white hover:bg-[#1e4ae0]"
|
|
||||||
>
|
|
||||||
<span className="leading-5">Sign In</span>
|
|
||||||
<TbArrowNarrowRight className="h-5 w-5" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</Form>
|
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -78,8 +78,7 @@ module.exports = {
|
||||||
'lg': '1024px',
|
'lg': '1024px',
|
||||||
'xl': '1280px',
|
'xl': '1280px',
|
||||||
'2xl': '1536px',
|
'2xl': '1536px',
|
||||||
'3xl': '2048px',
|
'3xl': '1980px',
|
||||||
'4xl': '3060px',
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [require("tailwindcss-animate")],
|
plugins: [require("tailwindcss-animate")],
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user