Topcoder Marketing 3.0 New Pages UI Prototype Challenge

Update the provided prototype and create additional 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 pages outlined below 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. Re-use Footer
3. It is important to follow the correct spacing and typography.
4. You MUST match the designs! We are looking for as close to pixel perfect as you can get
5. Follow existing code structure
6. Re-use existing styles and create a new one if they are not existing
7. Implement the transition animation when the user scrolls down the page, this feature and functionality is already existing in the provided prototype.
8. Treat the images and client logos as content and not as style (ex. CSS background)

Page Requirements

1. Company / Community
   - The video embed should work similar to how it works in jobs.html, including how it works in mobile
   - Map is just an image content including the labels
   - “Unrivaled Talent”
   -- In mobile, this section will become carousel
   -- The thumb images should be masked, see how it is done in type-selected.html
    
2. Company / Topcoder Open 
   - The video embed should work similar to how it works in jobs.html, including how it works in mobile
   - “Join us at the Tournament Finals...”
   -- Only 1 version of image will be used for both desktop and mobile screens
   -- There should be 2 different version of SVG masked that will be used for desktop and mobile screens
    
3. Enterprise / Security 
   - Hero section
   -- Image should be treated as content and not as CSS background
   -- See if you can find existing code structure that implement this
   - The shape that says “Platform, Customer, Member” can be an image
    
4. Public Sector 
   - Use only single image in the Hero section for both desktop and mobile
   - “Public Sector case studies” section
   -- Use SVG masking for the image thumbs
   -- In mobile, this will be in carousel
    
5. FAQs 
   - Collapsible items
   -- By default, all are collapse / closed
   -- User should be able to open more than one item at the same time

 

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.