search

rishyym0927 / Affinity_frontend

Affinity is a web application designed to match individuals based on their intellectual compatibility. Users can create profiles, take quizzes, and find matches who share similar intellectual interests and capabilities. The project aims to foster meaningful connections through a sophisticated matching algorithm.
18 stars 36 forks source link

Implemented Custom 404 Error Page with Responsive Design and Animation #27

Closed pavithrakumar22 closed 1 month ago

pavithrakumar22 commented 1 month ago

Pull Request: Custom Error 404 Page Implementation

Related Issue:

This PR addresses issue #6 by implementing a custom 404 error page.

Summary of Changes:

New Component: Added a Error404.jsx component in the pages folder. Route Added: Configured a new route "*" in App.jsx to render the 404 page. whenever irrelevant pages are accessed.

Detailed Description:

  1. Created a new Error404 component using React.
  2. Integrated Tailwind CSS for a clean, responsive UI design.
  3. Added subtle animations using Framer Motion to enhance the user experience.
  4. The animated message features a slow, looped vertical movement, adding visual interest without overwhelming the user.
  5. The design is intentionally minimalist, adhering to the website's color palette and ensuring quick, clear communication of the error.
  6. The UI is fully responsive and optimized for both desktop and mobile viewing.

Design Considerations:

  1. Users typically spend very little time on a 404 error page, so the design is kept simple and distraction-free to avoid negative impact on user experience.
  2. The animations are deliberately subtle to maintain a smooth user experience without unnecessary load times or visual noise.

Screenshot in desktop:

desktop error404

Screenshot in mobile:

error404 mobile

pavithrakumar22 commented 1 month ago

@rishyym0927 is the custom404 page ok?

rishyym0927 commented 1 month ago

your pr is under review, we will update you soon