Fix learn hub layout

[pettinarip]

Right now in the learn hub page we have a very narrow sidebar:

Description

This PR reuses the same layout components that we are using in the use-cases template to have a consistent layout between these pages. The use-cases template can be seen for example on the nft page.

[gatsby-cloud]

✅ ethereum-org-website-dev deploy preview ready

• Deploy preview
• Build logs · 43m build time

[minimalsm]

LGTM, thanks for putting up a fix Pablo ⚡

As this reduces the space for content a lot, I think we should either reduce the spacing in the grid or reduce the right margin of the table of contents (probably better):

Current:

16px spacing:

Reduced margin on toc:

cc: @konopkja

[konopkja]

the whole side navigation needs to have better UX, it has several flaws, one of them limiting the content on the right. A more comprehensive adjustments need to be in DS, I think @nloureiro may have looked into it or may not. But this would be good to prioritize too actually.

UX pains from my side to fix across the website:

1. reduce margin between the two sections as @minimalsm described
2. text in the sidebar aligned to the left, not right
3. remove underline
4. tweak sidebar text and headline sizes

[pettinarip]

@minimalsm @konopkja Fair points. Mostly agreed with you on all of them.

This PR just fixes the current problem in the learn hub page and uses the shared layout that we are using in the rest of the layouts.

So, any change in spacing will impact all the other templates as well.

I'll merge this PR now as it is and then, my proposal is to discuss this with Nuno and implement those changes on the DS. If either of you have strong opinions and prefer to implement them now, I could implement them as well in a different PR. Probably the spacing one is the simplest one, let me know.