flora is a fast and secure runtime that lets you write discord bots for your servers, with a rich TypeScript SDK, without worrying about running infrastructure. [mirror]
feat: redesign login page with fullscreen cover image
Session-Id: b3dbcd25-5018-4175-b4c1-9e2b62517abd
+16
-15
apps/frontend/public/login.jpg
apps/frontend/public/login.jpg
This is a binary file and will not be displayed.
apps/frontend/public/login.png
apps/frontend/public/login.png
This is a binary file and will not be displayed.
+16
-15
apps/frontend/src/components/login-page.tsx
+16
-15
apps/frontend/src/components/login-page.tsx
···
42
42
path='/login'
43
43
noindex
44
44
/>
45
-
<div className='flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10'>
46
-
<div className='w-full max-w-sm md:max-w-4xl'>
47
-
<LoginForm />
45
+
<div className='relative min-h-svh overflow-hidden'>
46
+
<img
47
+
src='/login.png'
48
+
alt='Login background artwork'
49
+
className='absolute inset-0 h-full w-full object-cover'
50
+
/>
51
+
<div className='absolute inset-0 bg-black/40' />
52
+
<div className='relative flex min-h-svh items-center justify-center p-6 md:p-10'>
53
+
<div className='w-full max-w-sm'>
54
+
<LoginForm />
55
+
</div>
48
56
</div>
49
57
</div>
50
58
</>
···
59
67
60
68
return (
61
69
<div className={cn('flex flex-col gap-6', className)} {...props}>
62
-
<Card className='overflow-hidden p-0'>
63
-
<CardContent className='grid p-0 md:grid-cols-2'>
64
-
<form className='p-6 md:p-8'>
70
+
<Card className='border-white/20 bg-background/90 shadow-xl backdrop-blur supports-[backdrop-filter]:bg-background/80'>
71
+
<CardContent className='p-6 md:p-8'>
72
+
<form>
65
73
<FieldGroup>
66
74
<div className='flex flex-col items-center gap-2 text-center'>
67
75
<h1 className='text-2xl font-bold'>Welcome back</h1>
···
73
81
<Button
74
82
type='button'
75
83
variant='outline'
76
-
className='w-full max-w-xs'
84
+
className='w-full'
77
85
onClick={redirectToLogin}
78
86
>
79
87
<svg
···
89
97
</div>
90
98
</FieldGroup>
91
99
</form>
92
-
<div className='hidden bg-muted md:block'>
93
-
<img
94
-
src='/login.jpg'
95
-
alt='Login artwork'
96
-
className='block h-auto w-full'
97
-
/>
98
-
</div>
99
100
</CardContent>
100
101
</Card>
101
-
<FieldDescription className='px-6 text-center'>
102
+
<FieldDescription className='px-6 text-center text-white/90 [&_a]:underline [&_a]:underline-offset-2'>
102
103
By clicking continue, you agree to our <a href='/terms-of-service'>Terms of Service</a> and
103
104
{' '}
104
105
<a href='/privacy-policy'>Privacy Policy</a>.