auth-1

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