Webflow Test

Thank you for your interest in this test.

TEST:
This is a Mock Podcast website project that uses Client-First guidelines and structure.

Your test involves completing the missing UI (refer to Figma design), adding CMS functionality, animations, and possibly some custom javascript functionality to complete the final touches.

Please complete as many of the following tasks as you wish.

Clone this project, make your edits, provide your Read-Only link and also the published live link in your questionnaire for us to review.

Thanks!

HOME PAGE
  • Set up the UI for the remaining sections in Webflow that are missing from the Figma design. Check if any components are used on other pages.
  • Add a Youtube video below the Testimonials Section and make it resizable in a fluid manner across device sizes. (This is not in the Figma file. You can add any Youtube video.)
  • Create a popup that activates after 3 seconds after the home page has loaded. Cookies will need to remain in the browser for 10 days, so the user won't see the popup again until then. The popup says "We safely store your cookies in a jar".
  • Set up the "Recent Episodes" section (from Figma) to the Home Page and the Podcast Page.
  • Add aria labels for social media links.
PODCAST PAGE
  • Set up the UI for the "All Podcasts" section that is missing from the Figma design.
CMS
  • In the CMS, add 3 Podcast Categories "Investing", "Philosophy", "Creative”. Assign each Podcast Episode a category.
  • Add a CMS filter to the "All Podcasts" section (refer to Figma design)
UI / UX
  • On the Host page, add an image mask to the podcast icon. (refer to Figma design)
ANIMATION
  • On the Host Page, add an On Scroll animation that makes the stats cards scroll into view with a 0.2 second delay. The initial state for the Y axis is 40px, with an opacity of 0%.
       
    The animation starts after a 0.2 second delay, changing the Y axis to 0px and the opacity to 100%, both with a duration of 0.7 seconds and 'Ease In' ease.

    The offset is 25%.
  • On the About Page, add an an open / close animation to each question in the FAQ section.
BONUS
  • In the Blog post "Should I raise money for my startup or not?", add a tool tip just at the bottom of this post, with some dummy text inside it when you hover on the word 'Tool Tip Here'.
  • Give the website a lift by adding a variety of animations of your choice.