AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-02-16 20:13:49 +00:00
Code Issues Packages Projects 1 Releases Wiki Activity

style: redo login page design

Browse Source
This commit is contained in:
Aaron William Po
2024-03-25 01:59:18 -04:00
parent f5d9a52572
commit ac89833a5d
5 changed files with 51 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/pages/index.tsx
View File

@@ -1,6 +1,6 @@
import { NextPage } from 'next';
import { CldImage } from 'next-cloudinary';
import Head from 'next/head';
import Image from 'next/image';
const keywords = [
'beer',
@@ -40,12 +40,12 @@ const Home: NextPage = () => {
<meta name="description" content={description} />
<meta name="keywords" content={keywords.join(', ')} />
</Head>
<div className="relative flex h-dvh w-full flex-col items-center justify-center">
<Image
alt=""
src="/background.jpg"
height={4015}
width={6035}
<div className="relative flex h-dvh w-full flex-col items-center justify-center bg-base-300">
<CldImage
src="https://res.cloudinary.com/dxie9b7na/image/upload/v1701056793/cloudinary-images/pexels-elevate-1267700_jrno3s.jpg"
alt="Login Image"
width={5000}
height={5000}
className="pointer-events-none absolute h-full w-full object-cover mix-blend-overlay"
/>
<div className="relative flex w-9/12 flex-col space-y-3 text-base-content">

52
src/pages/login/index.tsx
View File

@@ -18,34 +18,32 @@ const LoginPage: NextPage = () => {
<meta name="description" content="Login to your account" />
</Head>
<div className="flex h-screen flex-row">
<div className="hidden h-dvh flex-col items-center justify-center bg-base-100 lg:flex lg:w-[55%]">
<CldImage
src="https://res.cloudinary.com/dxie9b7na/image/upload/v1701056793/cloudinary-images/pexels-elevate-1267700_jrno3s.jpg"
alt="Login Image"
width={5000}
height={5000}
className="h-full w-full object-cover"
/>
</div>
<div className="flex min-h-dvh w-full flex-col items-center justify-center bg-base-100 lg:w-[45%]">
<div className="w-10/12 space-y-5 sm:w-9/12">
<div className=" flex flex-col items-center space-y-2">
<FaUserCircle className="text-3xl" />
<h1 className="text-4xl font-bold">Login</h1>
</div>
<div className="relative flex h-dvh w-full flex-col items-center justify-center bg-base-300">
<CldImage
src="https://res.cloudinary.com/dxie9b7na/image/upload/v1701056793/cloudinary-images/pexels-elevate-1267700_jrno3s.jpg"
alt="Login Image"
width={5000}
height={5000}
className="pointer-events-none absolute h-full w-full object-cover mix-blend-overlay"
/>
<div className="relative flex w-9/12 flex-col items-center text-center text-base-content lg:w-6/12">
<div className="flex w-full flex-col items-center space-y-2 text-center">
<FaUserCircle className="text-6xl text-primary-content" />
<h1 className="text-6xl font-extrabold">Login</h1>
</div>
<div className="w-full">
<LoginForm />
<div className="mt-3 flex flex-col items-center space-y-1">
<Link href="/register" className="text-primary-500 link-hover link italic">
Don&apos;t have an account?
</Link>
<Link
href="/users/forgot-password"
className="text-primary-500 link-hover link italic"
>
Forgot password?
</Link>
</div>
</div>
<div className="mt-5 flex w-full flex-col space-y-1 text-center font-bold italic">
<Link className="link-hover link text-lg" href="/register">
Don&apos;t have an account?
</Link>
<Link className="link-hover link text-lg" href="/users/forgot-password">
Forgot your password?{' '}
</Link>
</div>
</div>
</div>