Qlockify/qlockify-frontend-deployment
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

style(auth): integrate side visual in auth layout
Some checks failed
Frontend CI/CD / build (push) Has been cancelled
Details
Frontend CI/CD / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-06-23 10:04:14 +03:30
parent 37d7de7717
commit 51e698373c
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/pages/Auth.tsx
View File

@@ -3,30 +3,30 @@ import { Command } from "lucide-react"
import { SettingsMenu } from "../components/SettingsMenu" import { SettingsMenu } from "../components/SettingsMenu"
import { useTranslation } from "../hooks/useTranslation" import { useTranslation } from "../hooks/useTranslation"
import { AuthSideVisual } from "./auth/AuthSideVisual"
export default function Auth() { export default function Auth() {
const { t } = useTranslation() const { t } = useTranslation()
return ( return (
<div className="container relative min-h-screen grid flex-col items-center justify-center bg-white transition-colors lg:max-w-none lg:grid-cols-2 lg:px-0 dark:bg-slate-950"> <div className="container relative grid min-h-screen flex-col items-center justify-center bg-white transition-colors lg:h-screen lg:max-w-none lg:grid-cols-2 lg:overflow-hidden lg:px-0 dark:bg-slate-950">
<div className="absolute inset-e-4 top-4 z-50 md:inset-e-8 md:top-8"> <div className="absolute inset-e-4 top-4 z-50 md:inset-e-8 md:top-8">
<SettingsMenu /> <SettingsMenu />
</div> </div>
<div className="relative hidden h-full flex-col border-e border-slate-200 bg-slate-900 p-10 text-white dark:border-slate-800 dark:bg-slate-900/50 lg:flex"> <div className="relative hidden h-full overflow-hidden flex-col border-e border-slate-200 bg-slate-50 p-5 text-slate-950 dark:border-slate-800 dark:bg-slate-900/50 dark:text-white xl:p-6 2xl:p-10 lg:flex">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(59,130,246,0.16),transparent_30%),radial-gradient(circle_at_80%_65%,rgba(16,185,129,0.12),transparent_32%)] dark:bg-[radial-gradient(circle_at_20%_20%,rgba(96,165,250,0.13),transparent_30%),radial-gradient(circle_at_80%_65%,rgba(45,212,191,0.09),transparent_32%)]" />
<div className="absolute inset-0 bg-[linear-gradient(to_right,rgba(15,23,42,0.05)_1px,transparent_1px),linear-gradient(to_bottom,rgba(15,23,42,0.05)_1px,transparent_1px)] bg-[size:4rem_4rem] opacity-50 dark:bg-[linear-gradient(to_right,rgba(255,255,255,0.04)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.04)_1px,transparent_1px)]" />
<div className="relative z-20 flex items-center gap-2 text-lg font-medium"> <div className="relative z-20 flex items-center gap-2 text-lg font-medium">
<Command className="h-6 w-6" /> <Command className="h-6 w-6" />
{t.title || "Qlockify"} {t.title || "Qlockify"}
</div> </div>
<div className="relative z-20 mt-auto"> <AuthSideVisual />
<blockquote className="space-y-2">
<p className="text-lg">"{t.login.brandingQuote}"</p>
</blockquote>
</div>
</div> </div>
<div className="flex h-screen items-center justify-center p-8 lg:p-8"> <div className="flex h-screen items-center justify-center p-5 sm:p-6 lg:p-6 2xl:p-8">
<div className="mx-auto flex w-full max-w-[26rem] flex-col justify-center"> <div className="mx-auto flex w-full max-w-[26rem] flex-col justify-center">
<Outlet /> <Outlet />
</div> </div>