redesign nav getting started CTA

[spgandhi]

This PR replaces the "Try Neo4j" with a "Get Started CTA" like on neo4j.com and styles as close as possible with as minimal additional CSS as possible

[netlify[bot]]

✔️ Deploy Preview for neo4j-docs-ui ready!

🔨 Explore the source changes: b9bb52441974e2c639fa07664d8e82fe28fdce40

🔍 Inspect the deploy log: https://app.netlify.com/sites/neo4j-docs-ui/deploys/61dd7ad4d9d2f30008ba3d81

😎 Browse the preview: https://deploy-preview-85--neo4j-docs-ui.netlify.app

[spgandhi]

These are some screenshots of what they look like in different themes

[adam-cowley]

Looks good to me, but could do with the caret added to the dropdown.

- <div class="navbar-item has-dropdown getting-started-cta">
+ <div class="navbar-item has-dropdown is-hoverable getting-started-cta">

.navbar-item.has-dropdown.getting-started-cta:hover::before {
    border-bottom-color: var(--navbar-menu-border-color);
}

[spgandhi]

@adam-cowley I agree that a caret would be nice. I tried your code, but did not get the desired results. For example in the labs section - this is what it looks like.

If its alright, let's merge this for now and we can look for more changes in the future

[adam-cowley]

It looks like --color-grey-600 instead of --navbar-menu-border-color

.navbar-item.has-dropdown.getting-started-cta:hover::before {
    border-bottom-color: var(--color-grey-600);
}

[spgandhi]

@adam-cowley that worked great. I removed the down icon from the button itself for consistency with neo4j.com. But otherwise it's looking good now

[adam-cowley]

Perfect. Are you also happy with this @recrwplay?

[recrwplay]

Just a few minor points.

The position of the caret (assuming that's referring to the triangle above the top border of the drop-down on hover) looks wrong - the other menus have it centered below the menu title.

And because the Get Started menu has a filled background, there's no whitespace between the background and the caret.

I don't know that it matters but the font size for Start Free has font-weight: 600 and font-size: 13px, which is just over 1px less than the text next to it, whereas the equivalent drop-down elsewhere on the site gets relatively sized down to 12px, and has font-weight: 400. I know these menus don't precisely match because they're independently generated, but we could get them as close as possible.

[adam-cowley]

@spgandhi One point raised from our sync call today is the Start free label. I know this reflects the site but it implies that Sandbox and Desktop are somehow paid. I understand that this is to highlight that Aura is our preferred option for the user but there may be a better option across the site. Has the phrase been A/B tested?

[adam-cowley]

Better positioning of the caret:

.navbar-item.has-dropdown.getting-started-cta:hover::before {
  left: auto;
  right: 50px;
  border-bottom-color: var(--color-grey-600);
}

[spgandhi]

@adam-cowley I think you are right. There are ways to misinterpret "Start Free". Let's roll out with this for now, but I am going to bring this up in the Web team and have this changed. After which we can change it here as well. I am thinking "Start here" as an alternative. If you guys have other suggestions, please let me know.

@recrwplay thanks for the feedback. I updated the caret positioning and made the fonts more consistent with the other menu items.

For the white space between the item, I have levelled all the dropdown to the end of the header. That ways we can get some whitespace in the the Get Started dropdown, but also have all the dropdown at the same level. Otherwise it would look odd if you move from left to right and the Get Started dropdown is little bit lower than other items. This is what it now looks like - https://recordit.co/jP5ted1wT4

[recrwplay]

Looks great, thanks for making those changes @spgandhi - I'm conscious of the fact that they weren't all exactly critical!