Sign Up Two

1'use client'
2 
3import Link from 'next/link'
4import { Shader, FilmGrain, Swirl, WaveDistortion } from 'shaders/react'
5 
6import { Logo } from '@/components/brand-logo'
7import { Button } from '@/components/ui/button'
8import { Input } from '@/components/ui/input'
9import { Label } from '@/components/ui/label'
10import { SiGithub } from 'react-icons/si'
11 
12export default function SignUpTwo() {
13  return (
14    <section className="min-h-screen py-6 md:py-10">
15      <div className="grid min-h-[calc(100vh-5rem)] grid-cols-1 items-center gap-10 md:grid-cols-2 md:gap-16">
16        {/* Left side */}
17        <div className="flex w-full items-center justify-center px-4 md:h-170 md:pr-0 md:pl-8 lg:pl-16">
18          <form className="w-full max-w-md">
19            <div className="text-left">
20              <Link href="/" aria-label="Go home" className="inline-flex w-fit">
21                <Logo className="h-8 w-8 text-zinc-800 dark:text-zinc-100" />
22              </Link>
23 
24              <h1 className="mt-5 mb-1 text-2xl font-semibold tracking-tight">
25                Create a Hexora Account
26              </h1>
27 
28              <p className="text-sm text-muted-foreground">
29                Welcome! Create an account to get started.
30              </p>
31            </div>
32 
33            <div className="mt-8 space-y-6">
34              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
35                <div className="space-y-2">
36                  <Label htmlFor="firstname" className="block text-sm">
37                    First name
38                  </Label>
39                  <Input
40                    type="text"
41                    placeholder="John"
42                    required
43                    name="firstname"
44                    id="firstname"
45                    autoComplete="given-name"
46                  />
47                </div>
48 
49                <div className="space-y-2">
50                  <Label htmlFor="lastname" className="block text-sm">
51                    Last name
52                  </Label>
53                  <Input
54                    type="text"
55                    placeholder="Doe"
56                    required
57                    name="lastname"
58                    id="lastname"
59                    autoComplete="family-name"
60                  />
61                </div>
62              </div>
63 
64              <div className="space-y-2">
65                <Label htmlFor="email" className="block text-sm">
66                  Email
67                </Label>
68                <Input
69// … truncated