auth-1

1import type React from "react";
2import { LogoIcon } from "@/components/logo";
3import { Button } from "@/components/ui/button";
4// https://magicui.design/docs/components/particles
5import { Particles } from "@/components/ui/particles";
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 
17      {/* Centered auth card */}
18      <div className="relative flex min-h-screen items-center justify-center px-4 py-20">
19        <div className="w-full max-w-sm rounded-2xl border border-border/50 bg-background/60 p-8 shadow-2xl shadow-black/10 backdrop-blur-xl">
20          {/* Logo + heading */}
21          <div className="mb-8 space-y-3">
22            <LogoIcon className="size-8" />
23            <div>
24              <h1 className="font-bold text-2xl text-foreground tracking-tight">
25                Welcome back
26              </h1>
27              <p className="mt-1 text-muted-foreground text-sm">
28                Sign in to your account or create a new one.
29              </p>
30            </div>
31          </div>
32 
33          {/* OAuth buttons */}
34          <div className="space-y-3">
35            <Button
36              className="w-full gap-2.5 transition-all hover:shadow-md"
37              size="lg"
38              type="button"
39              variant="outline"
40            >
41              <GoogleIcon className="size-4 shrink-0" />
42              <span>Continue with Google</span>
43            </Button>
44            <Button
45              className="w-full gap-2.5 transition-all hover:shadow-md"
46              size="lg"
47              type="button"
48              variant="outline"
49            >
50              <GithubIcon className="size-4 shrink-0" />
51              <span>Continue with GitHub</span>
52            </Button>
53          </div>
54 
55          {/* Divider */}
56          <div className="my-6 flex items-center gap-3">
57            <div className="h-px flex-1 bg-border" />
58            <span className="font-medium text-[11px] text-muted-foreground/60 uppercase tracking-wider">
59              or
60            </span>
61            <div className="h-px flex-1 bg-border" />
62          </div>
63 
64          {/* Email CTA */}
65          <Button className="w-full" size="lg" type="button">
66            Continue with Email
67          </Button>
68 
69          {/* Terms */}
70// … truncated