Sign Up

1"use client";
2 
3import { Button } from "@/components/ui/button";
4import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
5import { Checkbox } from "@/components/ui/checkbox";
6import { Input } from "@/components/ui/input";
7import { Label } from "@/components/ui/label";
8import { Separator } from "@/components/ui/separator";
9 
10export function SignupBlock() {
11  return (
12    <div className="flex items-center justify-center min-h-screen p-6">
13      <Card className="w-full max-w-md text-foreground">
14        <CardHeader className="space-y-1">
15          <CardTitle className="text-2xl text-foreground">Create an account</CardTitle>
16          <CardDescription className="text-muted-foreground">Enter your information to get started</CardDescription>
17        </CardHeader>
18        <CardContent className="space-y-4">
19          <div className="grid grid-cols-2 gap-4">
20            <div className="space-y-2">
21              <Label htmlFor="firstName" className="text-foreground">
22                First Name
23              </Label>
24              <Input id="firstName" placeholder="John" className="text-foreground placeholder:text-muted-foreground" />
25            </div>
26            <div className="space-y-2">
27              <Label htmlFor="lastName" className="text-foreground">
28                Last Name
29              </Label>
30              <Input id="lastName" placeholder="Doe" className="text-foreground placeholder:text-muted-foreground" />
31            </div>
32          </div>
33          <div className="space-y-2">
34            <Label htmlFor="email" className="text-foreground">
35              Email
36            </Label>
37            <Input id="email" type="email" placeholder="name@example.com" className="text-foreground placeholder:text-muted-foreground" />
38          </div>
39          <div className="space-y-2">
40            <Label htmlFor="password" className="text-foreground">
41              Password
42            </Label>
43            <Input id="password" type="password" className="text-foreground placeholder:text-muted-foreground" />
44          </div>
45          <div className="space-y-2">
46            <Label htmlFor="confirmPassword" className="text-foreground">
47              Confirm Password
48            </Label>
49            <Input id="confirmPassword" type="password" className="text-foreground placeholder:text-muted-foreground" />
50          </div>
51          <div className="flex items-center gap-2">
52            <Checkbox id="terms" />
53// … truncated