dikshantp/ar-test
1
0
Fork 0
forked from rajun/ar-test
Code Pull Requests Activity

feat: add auth brand panel with AR illustration

Browse Source
This commit is contained in:
rajun 2026-10-09 15:11:51 +05:30
parent c9c36d5fa3
commit ed11c520bd
1 changed files with 36 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
app/components/auth/auth-brand-panel.tsx Normal file
View File

@ -0,0 +1,36 @@
import { LogoMark } from '~/components/logo-mark';
import { ArIllustration } from '~/components/auth/ar-illustration';
export function AuthBrandPanel() {
return (
<aside className="relative hidden overflow-hidden border-r border-neutral-900 bg-[#0A0A0A] p-12 lg:flex lg:flex-col lg:justify-between">
<div className="pointer-events-none absolute top-1/3 left-1/2 h-[520px] w-[520px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-orange-500/10 blur-[140px]" />
{/* Real-world floor grid */}
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-1/2 [perspective:600px]">
<div
className="absolute inset-0 origin-bottom [transform:rotateX(60deg)] opacity-30"
style={{
backgroundImage:
'linear-gradient(to right, rgba(249,115,22,0.25) 1px, transparent 1px), linear-gradient(to bottom, rgba(249,115,22,0.25) 1px, transparent 1px)',
backgroundSize: '48px 48px',
maskImage: 'linear-gradient(to top, black 10%, transparent 90%)',
WebkitMaskImage: 'linear-gradient(to top, black 10%, transparent 90%)',
}}
/>
</div>
<div className="relative z-10">
<LogoMark className="h-10 w-10 text-2xl" />
</div>
<div className="relative z-10 flex flex-1 items-center justify-center py-8">
<ArIllustration />
</div>
<p className="relative z-10 text-2xl font-semibold tracking-tight text-white">
Step into <span className="text-orange-500">augmented reality.</span>
</p>
</aside>
);
}