feat: Implement Login & Registration Screen with Password Validation

[drumondpucminas]

Description:
We need a responsive, user-friendly Login and Registration page. This task focuses purely on the Frontend implementation using React and Tailwind CSS.

For this task, the critical feature is the Password Creation Validation. When a user is in "Sign Up" mode, the password field must provide real-time feedback on the strength of the password.

Objectives:

• Create a visually appealing Login/Sign-up container.
• Implement state management to toggle between "Login" and "Create Account" modes.
• Implement strict validation logic for the password field during account creation.
• Ensure the layout is fully responsive (mobile-first).

Acceptance Criteria:

1. UI/UX:

• Centered card layout on screen.
• Fields: Email, Password.
• "Show/Hide Password" eye icon toggle.
• "Switch to Sign Up" / "Switch to Login" text link.
• Styled using Tailwind CSS (use ring or border colors for focus states).

2. Password Validation Logic (Sign-Up Mode only):

• Password must be at least 8 characters.
• Must contain at least one uppercase letter.
• Must contain at least one number.
• Must contain at least one special character (!@#$%^&*).
• Show real-time feedback (e.g., a checklist below the input that turns green as criteria are met, or a red error message if submitted while invalid).

3. Code Quality:

• Use React Hooks (useState or useReducer).
• Component should be modular.
• No hardcoded colors (use Tailwind config classes).

Technical Implementation:

• Framework: React
• Styling: Tailwind CSS
• Icons: Heroicons (or Lucide-React)

Learning Resources & References:
If you are new to these concepts, please review the following resources before starting:

• React Forms (Controlled Components):
  https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable

• Tailwind Forms (Styling Focus States):
  https://tailwindcss.com/docs/hover-focus-and-other-states#form-states

• Password Validation Logic (Regex Guide):
  https://www.w3schools.com/howto/howto_js_password_validation.asp