auth-5

1"use client";
2 
3import { AppleIcon } from "@/components/icons/apple-icon";
4import { GithubIcon } from "@/components/icons/github-icon";
5import { GoogleIcon } from "@/components/icons/google-icon";
6import { Logo } from "@/components/logo";
7import { Button } from "@/components/ui/button";
8import {
9	InputGroup,
10	InputGroupAddon,
11	InputGroupInput,
12} from "@/components/ui/input-group";
13import { AuthDivider } from "@/components/auth-divider";
14import { FloatingPaths } from "@/components/floating-paths";
15 
16export function AuthPage() {
17	return (
18		<main className="relative md:h-screen md:overflow-hidden lg:grid lg:grid-cols-2">
19			<div className="relative hidden h-full flex-col border-r bg-secondary p-10 lg:flex dark:bg-secondary/20">
20				<div className="absolute inset-0 bg-linear-to-b from-transparent via-transparent to-background" />
21				<Logo className="mr-auto h-4.5" />
22 
23				<div className="z-10 mt-auto">
24					<blockquote className="space-y-2">
25						<p className="text-xl">
26							&ldquo;This Platform has helped me to save time and serve my
27							clients faster than ever before.&rdquo;
28						</p>
29						<footer className="font-mono font-semibold text-sm">
30							~ Ali Hassan
31						</footer>
32					</blockquote>
33				</div>
34				<div className="absolute inset-0">
35					<FloatingPaths position={1} />
36					<FloatingPaths position={-1} />
37				</div>
38			</div>
39			<div className="relative flex min-h-screen flex-col justify-center px-8">
40				{/* Top Shades */}
41				<div
42					aria-hidden
43					className="absolute inset-0 isolate -z-10 opacity-60 contain-strict"
44				>
45					<div className="absolute top-0 right-0 h-320 w-140 -translate-y-87.5 rounded-full bg-[radial-gradient(68.54%_68.72%_at_55.02%_31.46%,--theme(--color-foreground/.06)_0,hsla(0,0%,55%,.02)_50%,--theme(--color-foreground/.01)_80%)]" />
46					<div className="absolute top-0 right-0 h-320 w-60 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,--theme(--color-foreground/.04)_0,--theme(--color-foreground/.01)_80%,transparent_100%)] [translate:5%_-50%]" />
47					<div className="absolute top-0 right-0 h-320 w-60 -translate-y-87.5 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,--theme(--color-foreground/.04)_0,--theme(--color-foreground/.01)_80%,transparent_100%)]" />
48				</div>
49				<Button asChild className="absolute top-7 left-5" variant="ghost">
50					<a href="#">
51						<IconPlaceholder
52							data-icon="inline-start"
53							hugeicons="ArrowLeft01Icon"
54							lucide="ChevronLeftIcon"
55// … truncated