Sign Up One

1import { Logo } from '@/components/brand-logo'
2import { Button } from '@/components/ui/button'
3import { Input } from '@/components/ui/input'
4import { Label } from '@/components/ui/label'
5import Link from 'next/link'
6 
7export default function SignUpOne() {
8  return (
9    <section className="flex min-h-screen px-4 py-16 md:py-32">
10      <div className="fixed inset-0 -bg-linear-16 from-zinc-50 from-50% to-white to-50%"></div>
11      <form className="z-10 m-auto h-fit w-full max-w-sm overflow-hidden rounded-xl border shadow-md shadow-zinc-950/5 dark:[--color-muted:var(--color-zinc-900)]">
12        <div className="-m-px border bg-card p-8 pb-6">
13          <div className="text-center">
14            <Link href="/" aria-label="go home" className="mx-auto block w-fit">
15              <Logo className="h-8 w-8 text-zinc-800 dark:text-zinc-100" />
16            </Link>
17            <h1 className="mt-4 mb-1 text-xl font-semibold">Create a Hexora Account</h1>
18            <p className="text-sm">Welcome! Create an account to get started</p>
19          </div>
20 
21          <div className="mt-6 space-y-6">
22            <div className="grid grid-cols-2 gap-3">
23              <div className="space-y-2">
24                <Label htmlFor="firstname" className="block text-sm">
25                  Firstname
26                </Label>
27                <Input
28                  type="text"
29                  placeholder="Navdeep"
30                  required
31                  name="firstname"
32                  id="firstname"
33                  autoComplete="given-name"
34                  className=""
35                />
36              </div>
37              <div className="space-y-2">
38                <Label htmlFor="lastname" className="block text-sm">
39                  Lastname
40                </Label>
41                <Input
42                  type="text"
43                  placeholder="Singh"
44                  required
45                  name="lastname"
46                  id="lastname"
47                  autoComplete="family-name"
48                />
49              </div>
50            </div>
51 
52            <div className="space-y-2">
53              <Label htmlFor="email" className="block text-sm">
54                Email
55              </Label>
56              <Input
57                type="email"
58                placeholder="youremail@domain.com"
59                required
60                name="email"
61                id="email"
62                autoComplete="email"
63              />
64            </div>
65 
66// … truncated