Sign Up

1import * as React from "react";
2import { ArrowRight, Check, Sparkles } from "lucide-react";
3 
4import { Button } from "@/components/ui/button";
5import { Checkbox } from "@/components/ui/checkbox";
6import { Input } from "@/components/ui/input";
7import { Label } from "@/components/ui/label";
8import { cn } from "@/lib/utils";
9 
10function Signup01({ className, ...props }: React.ComponentProps<"section">) {
11  return (
12    <section
13      className={cn(
14        "grid min-h-[680px] overflow-hidden rounded-[2rem] border border-foreground/10 bg-[radial-gradient(circle_at_top_left,color-mix(in_oklch,var(--primary)_13%,transparent),transparent_36%),var(--background)] lg:grid-cols-2",
15        className,
16      )}
17      {...props}
18    >
19      <div className="flex items-center justify-center p-7 sm:p-12">
20        <div className="w-full max-w-md">
21          <div className="mb-8 flex items-center gap-2 text-sm font-semibold">
22            <span className="grid size-8 place-items-center rounded-xl bg-primary text-primary-foreground">
23              <Sparkles className="size-4" />
24            </span>
25            Rivelle
26          </div>
27          <h1 className="text-3xl font-semibold tracking-[-.04em]">
28            Create your workspace
29          </h1>
30          <p className="mt-2 text-sm text-muted-foreground">
31            Start building your next product in a few seconds.
32          </p>
33          <form className="mt-8 grid gap-5">
34            <div className="grid gap-5 sm:grid-cols-2">
35              <div className="space-y-2">
36                <Label htmlFor="first-name">First name</Label>
37                <Input id="first-name" placeholder="Maya" />
38              </div>
39              <div className="space-y-2">
40                <Label htmlFor="last-name">Last name</Label>
41                <Input id="last-name" placeholder="Chen" />
42              </div>
43            </div>
44            <div className="space-y-2">
45              <Label htmlFor="signup-email">Work email</Label>
46              <Input
47                id="signup-email"
48                placeholder="maya@company.com"
49                type="email"
50              />
51            </div>
52            <div className="space-y-2">
53              <Label htmlFor="signup-password">Password</Label>
54              <Input id="signup-password" type="password" />
55            </div>
56            <div className="flex items-start gap-3">
57              <Checkbox id="terms" />
58              <Label
59// … truncated