Create SignUp Page

[fabiorodriguesdev]

Description

Create the SignUpPage using PublicLayout. The page displays a registration form with first name, last name, email, password, and repeat password fields.

Use ZOD for form validation.

Page Structure

PublicLayout (navText="Already have an account?", navLinkLabel="SIGN IN", navLinkHref="/login")
└── Form Container (max-width constrained, centered)
    ├── Heading: "Get started for free"
    ├── Subheading: "Enter your details below."
    ├── InputField (label="First Name*", type="text", required)
    ├── InputField (label="Last Name*", type="text", required)
    ├── InputField (label="E-mail*", type="email", placeholder="Enter your e-mail", required)
    ├── InputField (label="Password*", type="password", showPasswordToggle=true, required)
    ├── InputField (label="Repeat Password*", type="password", showPasswordToggle=true, required)
    └── Button

Acceptance Criteria

• Uses PublicLayout with "Already have an account? SIGN IN" nav link in top-right
• Heading "Get started for free" + subheading "Enter your details below."
• All 5 fields rendered with labels and red asterisk (*) for required
• Both password fields have eye icon toggle for visibility
• "SIGN IN" button in teal triggers onSubmit with all field values
• Validation states:
  • Empty required fields → show error on each empty field
  • Invalid email format → show error on email field
  • Password too short / weak → show error on password field
  • Passwords don't match → show error on "Repeat Password" field
  • Server error (e.g., email taken) → show InfoText (variant="error")
• Loading state: Button shows loading indicator, all fields disabled
• Form submits on Enter key press
• Right column scrolls if viewport is short (more fields than Login)
• Storybook stories:
  • Default (empty form)
  • Filled form
  • With field validation errors
  • Passwords don't match error
  • With server error message
  • Loading state
• Accessible: proper form labels, focus management, error announcements