auth-1

1import { GithubIcon } from "@/components/icons/github-icon";
2import { GoogleIcon } from "@/components/icons/google-icon";
3import { Logo } from "@/components/logo";
4import { Particles } from "@/components/ui/particles";
5import { Button } from "@/components/ui/button";
6 
7export function AuthPage() {
8	return (
9		<div className="relative w-full md:h-screen md:overflow-hidden">
10			<Particles
11				className="absolute inset-0"
12				color="#666666"
13				ease={20}
14				quantity={120}
15			/>
16			<div className="relative mx-auto flex min-h-screen max-w-5xl flex-col justify-center px-8">
17				<Button asChild className="absolute top-4 left-4" variant="ghost">
18					<a href="#">
19						<IconPlaceholder
20							data-icon="inline-start"
21							hugeicons="ArrowLeft01Icon"
22							lucide="ChevronLeftIcon"
23							phosphor="CaretLeftIcon"
24							remixicon="RiArrowLeftSLine"
25							tabler="IconChevronLeft"
26						/>
27						Home
28					</a>
29				</Button>
30 
31				<div className="mx-auto space-y-4 sm:w-sm">
32					<Logo className="h-5" />
33					<div className="flex flex-col space-y-1">
34						<h1 className="font-bold text-2xl tracking-wide">
35							Sign In or Join Now!
36						</h1>
37						<p className="text-base text-muted-foreground">
38							login or create your efferd account.
39						</p>
40					</div>
41					<div className="space-y-2">
42						<Button className="w-full" type="button">
43							<GoogleIcon data-icon="inline-start" />
44							Continue with Google
45						</Button>
46						<Button className="w-full" type="button">
47							<GithubIcon data-icon="inline-start" />
48							Continue with GitHub
49						</Button>
50					</div>
51					<p className="mt-8 text-muted-foreground text-sm">
52						By clicking continue, you agree to our{" "}
53						<a
54							className="underline underline-offset-4 hover:text-primary"
55							href="#"
56						>
57							Terms of Service
58						</a>{" "}
59						and{" "}
60						<a
61							className="underline underline-offset-4 hover:text-primary"
62							href="#"
63						>
64							Privacy Policy
65						</a>
66						.
67					</p>
68				</div>
69			</div>
70		</div>
71	);
72}