[feature] create contact us section (Form UI)

[devKiratu]

Fixes Issue

Closes #82

Changes proposed

The following requirements are fulfilled by this PR:

• [x] Create a component named ContactUs in the components folder that implements the screenshots below.
• [x] It should render a section tag with an id of contact-us.
• [x] Include the component in index.page.tsx
• [x] The form should not have any logic, this ticket is only concerned with the presentation.
• [ ] Reuse the Button component.
• [x] The form should be accessible with proper labels linked to the inputs.
• [x] Both the name, email and message fields should have the required attribute.
• [x] The implementation should match the design - text content, typography, capitalization and spacing.
• [x] The UI should be responsive and work well on both desktop and mobile viewports.

Check List (Check all the applicable boxes)

• [x] My code follows the code style of this project.
• [ ] My change requires changes to the documentation.
• [ ] I have updated the documentation accordingly.
• [ ] All new and existing tests passed.
• [x] This PR does not contain plagiarized content.
• [x] The title of my pull request is a short description of the requested changes.

Screenshots

Desktop version

Mobile version

Note to reviewers

• In the mobile version of the form, the Name field does not have an icon like the other input fields. Is this the design or was it an omission?
• The button used is a dummy one and will be replaced once the reusable button (issue #85 ) is ready
• In my view, there are quite significant differences between the mobile and the desktop version of the form, such that creating a single component and modifying it with media queries alone did not produce clean code, and some features were difficult to implement. I therefore created two versions (mobile and desktop) and rendered them conditionally. I would like to hear your thoughts on this approach

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
reactdevske-website	✅ Ready (Inspect)	Visit Preview	Oct 24, 2022 at 6:47PM (UTC)

[antosan]

• In the mobile version of the form, the Name field does not have an icon like the other input fields. Is this the design or was it an omission?

This is the design.

• The button used is a dummy one and will be replaced once the reusable button (issue Implement the Button Component #85 ) is ready

✅

• In my view, there are quite significant differences between the mobile and the desktop version of the form, such that creating a single component and modifying it with media queries alone did not produce clean code, and some features were difficult to implement. I therefore created two versions (mobile and desktop) and rendered them conditionally. I would like to hear your thoughts on this approach

You handled it really well. Thanks.

[devKiratu]

• In the mobile version of the form, the Name field does not have an icon like the other input fields. Is this the design or was it an omission?

This is the design.

• The button used is a dummy one and will be replaced once the reusable button (issue Implement the Button Component #85 ) is ready

✅

• In my view, there are quite significant differences between the mobile and the desktop version of the form, such that creating a single component and modifying it with media queries alone did not produce clean code, and some features were difficult to implement. I therefore created two versions (mobile and desktop) and rendered them conditionally. I would like to hear your thoughts on this approach

You handled it really well. Thanks.

Thank you!