Welcome to The Design Trip front-end developer test. This assignment is designed to assess your proficiency in creating responsive web pages. The evaluation will focus on

• Layout Implementation
• Responsive Design
• Semantic HTML
• Code Organization and Separation of Concerns
• SVG Techniques
• Scroll-Based Animation Handling

Link to figma file containing reference web page and mobile design

Link to prototype video

1. Layout Implementation
   • Replicate the layout based on the provided designs.
   • Ensure the design is fully responsive.
2. Scroll-driven animation
   • Implement the section animations (reference in the figma file, PROTOTYPE section) using any library/technology of your choice (only for desktops, handle in mobile gracefully). NOTE - the animations are supposed to be scroll based, they are triggered on click in prototype due to figma limitations.
   • Implement button hover effects, provided in the figma file as a component (only icon button hover animation is required).
3. Special requirements
   • SVG Masks or Clip-Paths: Demonstrate understanding of SVGs by creating the curved borders for the cards using these techniques or any other appropriate methods. Avoid using plain images for this purpose

Your submission will be evaluated based on the following key factors:

1. Layout Understanding:

   • Accurate replication of the provided design.
   • Proper alignment and spacing of elements.

2. Responsive Designs:

   • The web page should be fully responsive.
   • Proper use of CSS (or CSS-in-JS) to handle different screen sizes.

3. Semantic Code:

   • Use of semantic HTML5 elements.
   • Accessibility considerations.

4. Separation of Concerns:

   • Clear separation of logic, presentation, and styles.
   • Component-based architecture. (if applicable)

5. SVG Masks and Clip-Paths:

   • Use of SVGs to create curved borders for the cards.
   • We might ask for your explanation of the approach used for this task.

6. Scroll-Based Animation:

   • Smooth and performant animations.
   • Handling of edge cases and ensuring a seamless user experience.

1. Create a new branch for your work
2. Implement the solution
3. Push changes to your branch
4. Create a pull request for review
5. Write documentation explaining your approach, any challenges you faced, and how you solved them.