Md layouts tw migration & unification

[pettinarip]

Description

Effort to consolidate similar looking layouts.

• Created a new base layout called ContentLayout that uses the ContentHero
• Updated the following layouts to use ContentLayout: Upgrade, Roadmap, Staking, Translatathon, and UseCases

Layout	Production Link	Preview Link
Upgrade	prod	pr
Staking - Pools	prod	pr
Roadmap - Index	prod	pr
Roadmap - Security	prod	pr
Translatathon	prod	pr
Use Cases	prod	pr

TODO

• Run initial round of testing and feedback
• Complete migration of internal components (used in the layouts) to Tailwind
• Migrate UseCases layout
• Add story for ContentLayout
• Remove build command for testing
• Add banner in use-cases layout

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	3c58b42
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/66e446cb716d1400084d6827
😎 Deploy Preview	https://deploy-preview-13843--ethereumorg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 43 (🔴 down 5 from production) Accessibility: 93 (no change from production) Best Practices: 83 (🔴 down 9 from production) SEO: 92 (🔴 down 1 from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[nloureiro]

For the heroes, I made this comparison on Figma.

All looks very good! Great improvement on the UX of different pages

Only 2 points:

• the hub hero
• on the use cases all the use cases should use "uses cases" on top of the title to follow the menu structure.

[nloureiro]

@pettinarip does this ones fall under a different template?

my take is that all should follow the DS heroes, and these ones are still different.
@konopkja, any pushback on updating this one to the same hero template? With the gradient background?

[pettinarip]

@pettinarip does this ones fall under a different template?

They do, they are different layouts. You can see that the ones that we changed have the left sidenav and the content on the right.

However, we could create a different PR to update the heros for those pages if we all agree. But I wouldn't include that in this PR.

[pettinarip]

Cool! thanks for the early feedback @nloureiro.

• the hub hero

Ok, let me see how we can keep this.

• on the use cases all the use cases should use "uses cases" on top of the title to follow the menu structure.

Hmm ok. Got the idea but this section is used for the breadcrumbs and they are supposed to be links. But we don't have a page under /use-cases to make the connection. Personally, I wouldn't like to add a hack to make a section of the breadcrumbs not clickable, just for this case. Let me think more about it.

[konopkja]

lgtm what pablo did, regarding nuno's question about merging all headers according to the template: maybe just worried how the ETH page would look like with gradient, not a very strong stance here.

Personally i think the design without gradient looks clearer and simpler and less corporate, but that is a different conversation.

[nloureiro]

Cool! thanks for the early feedback @nloureiro.

• the hub hero

Ok, let me see how we can keep this.

• on the use cases all the use cases should use "uses cases" on top of the title to follow the menu structure.

Hmm ok. Got the idea but this section is used for the breadcrumbs and they are supposed to be links. But we don't have a page under /use-cases to make the connection. Personally, I wouldn't like to add a hack to make a section of the breadcrumbs not clickable, just for this case. Let me think more about it.

True, they are supposed to be breadcrumbs but:

1. we don´t follow the navigation. If they are supposed to be breadcrumbs "usecase", it's the right work to be there :)
2. I wanted to avoid this...
   

this falls out of scope for this PR, but we need to think how to make the navigation and breadcrumbs match.

[nloureiro]

lgtm what pablo did, regarding nuno's question about merging all headers according to the template: maybe just worried how the ETH page would look like with gradient, not a very strong stance here.

Personally i think the design without gradient looks clearer and simpler and less corporate, but that is a different conversation.

Yes, we need to be careful about that one, need some design work to make it work

Regarding removing the gradient, is this what you have in mind?

[konopkja]

lgtm what pablo did, regarding nuno's question about merging all headers according to the template: maybe just worried how the ETH page would look like with gradient, not a very strong stance here.
Personally i think the design without gradient looks clearer and simpler and less corporate, but that is a different conversation.

Yes, we need to be careful about that one, need some design work to make it work

Regarding removing the gradient, is this what you have in mind?

yes but not for this sidebar template, that one looks terrible without further adjustements

[nloureiro]

lgtm what pablo did, regarding nuno's question about merging all headers according to the template: maybe just worried how the ETH page would look like with gradient, not a very strong stance here.
Personally i think the design without gradient looks clearer and simpler and less corporate, but that is a different conversation.

Yes, we need to be careful about that one, need some design work to make it work
Regarding removing the gradient, is this what you have in mind?

yes but not for this sidebar template, that one looks terrible without further adjustements

😅 like you said, another conversation...

I was trying to see if we could pull a quick hack, but no

[wackerow]

Let's go!! 🔥 💪
Thanks for this, nice job @pettinarip!