/Thence-Figma-Assignment

Primary LanguageJavaScript

Thence-Assignment

Live Project https://appbrunel.netlify.app/

Project Description:

Welcome to our React website built with Tailwind CSS, React Icons, and deployed on Netlify! This project aims to provide users with a seamless and visually appealing experience while browsing and interacting with our website.

Key Features:

  1. Tailwind CSS Styling: I have utilized Tailwind CSS to create a modern and responsive design for the website. Tailwind CSS offers a utility-first approach, allowing for quick styling of components and maintaining consistency throughout the site.

  2. React Icons Integration: To enhance the user interface, I have incorporated React Icons, a library that provides a wide range of customizable icons. These icons are used to improve visual elements such as buttons, navigation menus, and forms.

  3. Netlify Deployment: The website is deployed on Netlify, a cloud platform that offers continuous deployment, hosting, and serverless backend services. This ensures that the website is accessible to users worldwide with high reliability and scalability.

  4. Interactive Hover Effects: To provide users with an engaging experience, I have implemented hover effects on various elements throughout the website. These effects add an extra layer of delight and interactivity, enhancing the overall user experience.

  5. User Registration Flow:

    • Upon clicking the "Get projects" call-to-action (CTA) button, users are redirected to a new page, not a pop-up.
    • The "Submit" button is disabled until the user has entered information in both input fields.
    • If the email input field does not contain a valid email address format (e.g., xyz@abc.com), an error message is displayed when the user submits the form.
    • Upon successful submission of the form, users are directed to a confirmation screen. This screen automatically redirects the user back to the homepage after 5 seconds.
    • Users have the option to close the signup page by clicking the "X" button icon, which redirects them back to the homepage.

Command to Start the Project:

npm start

Conclusion:

With a combination of Tailwind CSS, React Icons, and Netlify deployment, my React website offers a visually appealing and user-friendly experience. The integration of hover effects and thoughtful user registration flow adds to the overall delight and functionality of the website, making it a compelling destination for users.