Topcoder Marketing 3.0 Solutions Pages UI Prototype Challenge

Update the provided prototype and create the Solutions pages of the new Topcoder Marketing website based on the provided UI designs.

Final Submission Guidelines

We are in the process of updating the Topcoder Marketing website to have a fresh look and updated structure.

The Topcoder marketing website is using Wordpress, and we would like this new theme to use the new Gutenberg editor, where each section are created as a “block”. Each element/section styles should not be dependent on its page.

Technology Stack

• HTML
• JavaScript
• SCSS

Detailed Requirements

As part of this challenge, you need to use the provided UI Prototype to create the Solutions pages using HTML5/SCSS/JS.

Build the pages (both desktop and mobile) based on the provided design. Re-use existing styles and create a new one if they are not existing. Do implement also the transition animation when the user scrolls down the page.

Existing prototype code and MarvelApp project link will be provided in the challenge forum.

 

Page Requirements

Note: Headers (navigation and sub-navigation) will be just a static image. It is important to follow the correct spacing and typography.

1. Landing page

• Hero section
  • Right side image can be a background image, the other gray shapes are background image too but separate from the big image
     
• ���"What we do best” section
  • ���The whole background gradient color in "What we do best” section should be set in CSS and can be changed anytime without a problem. The wavy part can be masked
  • “Learn More” more button links to their respective pages (ex. Apps page, Websites page, etc..), others can be dead links.
     
• “Why Topcoder” section
  • The image on the right side overlaps on the previous section
     
• ���“Topcoder Solutions” section
  • Thumbnails should be masked
  • In mobile, the cards are in a carousel format
     
• Use horizontal rule (hr) tag to the “wavy” separators

2. Apps page

• “Configure Your App” section
  • The “i” icon when click will display a popover window, see the design in Websites page.
  • Clicking again outside the popover window will close that window
  • “Start Your App” button will be a dead link
  • The icons (example: above the “Build a better app”) are configurable and will be re-usable across many pages
    • Shapes can be changed
    • Background gradient color can be changed as well via CSS
    • The icon itself can be an image.

3. Websites page

• Layout and some styles are almost similar to the Apps page
• The user thumb in the testimonial section will be like how the shaped icon works

4. QA Testing page

• “Select a QA Solution below to get started” section
• The content of this section works like a tab
  • Tab content will show without reloading the page
  • In mobile, the tab button will be a dropdown
  • In switching between mobile and desktop, make sure the active tab will be retained
  • The cards in mobile will be in a carousel format

Targeted Devices

• Desktop
• Mobile

Important Notes

• Use SCSS variables instead of hardcoding colors/paddings etc.
• Your code should be as clean, well-structured and well-documented as possible. The goal is to take your code and convert it into different forms (eg WordPress/React/Angular) to be able to use it in our various applications.
• Use a fluid layout.

What to Submit

• Submit your full source code in a zip file.