Landing Page Redesign

[jjhampton]

Feature

Why is this feature being added?

This is a follow-up issue to #880, and it's one of the priorities on our front-end roadmap.

880 was the initial attempt at adding the YouTube video and Join/Donate links to the homepage. Let's add to that idea, but with a design that is more aesthetically appealing and offers a better UX.

What should your feature do?

Use the the design mockups from @lauraux that we will be basing this on:

Desktop (two alternatives here, press left/right arrows to swap between light and dark): https://projects.invisionapp.com/share/W4GAP27J79S#/screens/284569928

Mobile: https://projects.invisionapp.com/share/BVGB6BLAG7T#/screens/282720967

Please ensure that any style/color changes applied to the video section / navbar are applied consistently to the landing page content below, so it appears consistent.

[jjhampton]

@kylemh I've assigned this to you since you expressed interest on Slack in working on the initial implementation of the designs.

[kylemh]

Thanks for doing that! I realized that I should take a step back - this is a rarely well-documented issue complete with content and mock-ups. I'd like to leave this one up to the community 💯

[NestorSegura]

Hey There, I can jump in to this implementation. Would you assign this issue to me?

[apex-omontgomery]

Assigned myself as placeholder for you. As a reminder, please try and stick to the contributing guidelines

[NestorSegura]

all right @wimo7083 . I put my hands on it.

[NestorSegura]

Hi guys, do you know where can I change the global blue color (#249CBC to #191f39)?

I think I just need to change that color, and I am ready.

I left the topcoder banner the same, as if we set the background blue, we will need a tocoder logo with white letter, I add already some functionallity to the banner component to accept aditional styles

[apex-omontgomery]

The icon's get their style from here

There's a variable within the style sheet called currentColor for the .iconCard: color

In the folder public/images/icons/ there are four SVG files.

1. Flag-Icon.svg
2. Road-Icon.svg
3. Shared-Icon.svg
4. Suitcase-Icon.svg

With an attribute fill="#249CBC"

Before make any changes to color scheme, lets wait on @kylemh. That might be in the scope for another issue and would require changing the branding page, and many locations.

[kylemh]

@NestorSegura unfortunately we've assigned that color all over the place. It can also exist as rgb(65, 164, 192). You'll have to do a project-wide find+replace on every instance of that hash. Despite having the mocks for this, I didn't realize you'd follow them so perfectly and wasn't mentally prepared for the new color scheme.

I'm asking in the Slack team to see if we're actually going through with the new color scheme. If we are, we'll need to change the branding page's "Colors" section as well.

I didn't realize that CSS variables defined in any stylesheet are available application-wide, but this could be a prime opportunity to develop a variables.css file to define our theming in one spot.

body {
  --ocBlue: #191f39
}

...

.nav {
  background-color: var(--ocBlue);
}

[kylemh]

Lastly, if we DO change our theming, we can't do it half-assedly...

I'll just make a judgement call on this so you can keep working. Execute the mock without color changes. I'll make a separate issue on changing the color scheme on the website if it's decided that is the direction we should go.

[jjhampton]

I agree with @kylemh - let's keep the scope of this PR to implementing the mockup (even if some of the colors aren't exact). A project-wide change of the website's color scheme is a large branding change that deserves its own issue.

We'll need to be cognizant of things like this when we introduce new UI designs into the site.

[nellshamrell]

Hey all :) Let's bring @JennWeideman into here, as I know she played a big part in the design and made the executive decision on the darker design.

@JennWeideman - it sounds like it's going to be a much bigger job to implement the dark version of the site than expected. Because we are an all volunteer organization, and I know this change needs to happen in a timely fashion - how would you feel if we went with the light version for the sake of time and best use of resources?

We have 2 choices here 1) Stick with the dark design and go through the very large process of implementing it now (I'm unsure of the availability of our volunteers) - this will likely take a significant amount of time and delay the rollout of the new design 2) Go with the lighter design, which will be able to be delivered much quicker and at lower risk to the other areas of the site, though it does go against the original design decision I believe you made the call on. We can definitely add a follow up issue to change to the darker theme in the future.

What do you think?

[JennWeideman]

@nellshamrell Okay making a second issue to do darker design sounds like a good idea.