Topcoder Marketing 3.0 Case Study Pages UI Prototype Challenge

Update the provided prototype and create the Case Study pages of the new Topcoder Marketing website based on the provided UI designs and details outlined below.

Final Submission Guidelines

Project Background

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 Case Study pages using HTML5/SCSS/JS.

Build the pages (both desktop and mobile) based on the provided design. Existing prototype code and MarvelApp project link will be provided in the challenge forum.

Overall Requirements:

1. Headers (navigation and sub-navigation) will be just a static image.

2. It is important to follow the correct spacing and typography.

3. You MUST match the designs! We are looking for as close to pixel perfect as you can get

4. Follow existing code structure

5. Re-use existing styles and create a new one if they are not existing

6. Implement the transition animation when the user scrolls down the page, this feature and functionality is already existing in the provided prototype.

7. Treat the images and client logos as content and not as style (ex. CSS background)

 

Page Requirements

1. All Case Studies page
   • ������This will be the default page of the case studies
   • Simulate the “Load More” button functionality by using a dummy json file
   • The “Type” and “Industry” links in the “View Case Studies By” leads to the “View by Type” page
   • “View Case Study” buttons leads to the “Type Selected” page
   • Doing a search leads to the “Search Result” page
      
2. View by Type page
   • “View All” link leads to the “Type Selected” page
   • Cards will have dead links for now
   • The “New” label floating in the card should be set in HTML and not part of the image.
   • In mobile, user should be able to slide the cards horizontally without showing scroll bar
   • See the Toolbar Spec screen for the hover style and animation of the cards
   • Doing a search leads to the “Search Result” page
      
3. View by Industry page
   • Card’s style including hover functionality will be similar to the cards found in the “View by Type” page.
   • Each card leads to the “Type Selected” page.
   • Doing a search leads to the “Search Result” page
      
4. Type Selected page
   • See the Toolbar Spec screen for the default state of the toolbar (filter, list view, and card view)
   • Implement the Filter dropdown
     • Selection Indicator icon will appear when an item/filter is selected, see “Filter: Item Selected”
     • Use “Filter Default” when nothing is selected
   • Implement the switching of views from List view to Card view and vice-versa
     • Respective icons should also get updated to show active state
   • Simulate the “Load More” button functionality by using a dummy json file
   • The list view will be the same as the “All” view
      
5. Search Result
   • Prototype as in the provided design
   • Basically this has the same layout/design as in the All Case Study pages

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.