auth-9

1"use client";
2 
3import { CheckIcon } from "lucide-react";
4import { LogoIcon } from "@/components/logo";
5import { Button } from "@/components/ui/button";
6import { Input } from "@/components/ui/input";
7import { Label } from "@/components/ui/label";
8 
9export function CompactSignupForm() {
10  return (
11    <div className="relative w-full max-w-sm rounded-3xl border bg-background p-6 shadow-2xl">
12      <div className="-top-3 -right-3 -rotate-12 absolute flex size-12 items-center justify-center rounded-2xl bg-primary shadow-lg transition-transform group-hover:rotate-0">
13        <CheckIcon className="size-6 text-primary-foreground" />
14      </div>
15 
16      <div className="mb-8">
17        <LogoIcon className="mb-4 size-6" />
18        <h2 className="font-bold text-2xl tracking-tight">Join Freddy</h2>
19        <p className="text-muted-foreground text-sm">
20          Start building beautiful interfaces today.
21        </p>
22      </div>
23 
24      <form className="space-y-4" onSubmit={(e) => e.preventDefault()}>
25        <div className="grid gap-3">
26          <div className="grid gap-1.5">
27            <Label htmlFor="signup-email-compact">Email</Label>
28            <Input
29              className="h-11 rounded-xl"
30              id="signup-email-compact"
31              placeholder="you@example.com"
32              type="email"
33            />
34          </div>
35          <div className="grid gap-1.5">
36            <Label htmlFor="signup-password-compact">Secure Password</Label>
37            <Input
38              className="h-11 rounded-xl"
39              id="signup-password-compact"
40              placeholder="••••••••"
41              type="password"
42            />
43          </div>
44        </div>
45 
46        <Button
47          className="mt-2 h-11 w-full rounded-xl font-semibold shadow-md transition-all active:scale-[0.98]"
48          type="submit"
49        >
50          Create Account
51        </Button>
52 
53        <div className="mt-4 flex items-center gap-2 px-1 text-[10px] text-muted-foreground/60">
54          <div className="size-1 rounded-full bg-primary" />
55          <p>By creating an account, you agree to our Terms of Service.</p>
56        </div>
57 
58        <p className="mt-4 border-t border-dashed pt-4 text-center text-muted-foreground text-xs">
59          Already a member?{" "}
60          <a className="font-bold text-primary hover:underline" href="#">
61            Sign In
62          </a>
63        </p>
64      </form>
65    </div>
66  );
67}