In this challenge, the goal is to build a responsive contact section that allows users to submit their name, email, and message. This section incorporates detailed interactive states and validation features to enhance user experience.
- Follow the design as closely as possible.
- Ensure all elements in the design are present, using the specified text color, font size, font weight, spacing, dimensions, etc.
- Email Link: Lead to
mailto:hello@abstractly.com
. - Button States: Implement and style buttons to reflect different states - normal, hover, focus, and disabled.
- Input Field States: Implement and style input fields to reflect different states - normal, focused, filled, disabled, error, error filled, error focused.
- Real-time Character Counter: Develop a textarea input field with a real-time character counter and provide a warning cue when the character limit is exceeded.
- Format Check: Validate that the email entered matches the standard email format (e.g., name@domain.com). Provide immediate browser feedback if the format is incorrect.
- Required Field: Ensure the email field is not left blank upon submission attempt. Provide immediate browser feedback if the field is empty.
- Error Messages:
- Format Check: "Please enter a valid email address."
- Required: "Email address is required."
- Success Feedback: After API submission, parse the successful response and confirm submission to the user with "Submission successful! We will get back to you in 3-5 days via email."
- API Error Response: Handle any API error responses (e.g., 400 Bad Request, 500 Internal Server Error) by displaying an appropriate message such as "Failed to submit. Please ensure your details are correct or try again later." or displaying the error message from the server.
- Text Size: Should be responsive; font size is larger for wider devices, smaller for narrow devices.
- Responsive Layout: The layout should reorganize responsively. The content should stack vertically on smaller screens and align horizontally as the screen width increases.
- Placeholders: You may leave the redirection links empty for any unspecified buttons or links.
- Cross-browser Compatibility: Ensure the solution works for major browsers including Chrome, Firefox, and Safari.
- Follow best practices for web accessibility to ensure that all form elements are labeled correctly and are navigable using keyboard controls.
- Provide appropriate ARIA labels for screen readers.
- TypeScript: For type-safe JavaScript development.
- React: For building the user interface.
- Tailwind CSS: For utility-first CSS styling.
- Vite: For fast and optimized project setup and development.
-
Clone the repository:
git clone https://github.com/guizzettic/about_us_page.git cd about_us_page
-
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Build the project for production:
npm run build
-
Preview the production build:
npm run serve
Feel free to fork this repository and make your contributions. Ensure to follow the code style and write meaningful commit messages.
This project is licensed under the MIT License. See the LICENSE file for more details.