fix: tabs bar fixed and solid icons

[harshbutfairx]

before:

https://github.com/SigNoz/signoz-web/assets/170525115/c9db32fa-dff6-4a48-8909-ce74d541be83

after:

https://github.com/SigNoz/signoz-web/assets/170525115/07e3bf58-bf05-48c6-a9e1-3955ca76692a

before:

after:

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
signoz-web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 21, 2024 6:35pm

[pranay01]

@ankit01-oss @GeekBoySupreme Should these tabs be aligned to left or be in center as in the current website?

[GeekBoySupreme]

@harshbutfairx a few issues that I found here. Take a look 👇🏼

• The keylines for the header, tabs, content, and footer all have different keylines ⎯ please check the designs; all of these components have a max-width of 1200px and the same keylines.

Design reference -

• There is a 1px gap between the bottom of the tab element and the border-bottom of the section - this needs to be reduced to 0px.
  

• On mobile layouts, they should remain on the same line and not overflow to the next one - this is wrong 👇🏼
  Here is an example of horizontally overflowing tabs on mobile - https://github.com/SigNoz/signoz-web/assets/15321738/c539b704-4457-4f5e-892a-1e2d33ef4cb3

• Also, add a hover state to the tab item texts - white on hover and transition : all 0.1s ease; to the tab item element.

• The hierarchy of the menu on clicking the hamburger in mobile menu is greater than the tab bar and should render above it (should have a higher z-index) - Also it should be contained in a defined div - not covering the entire viewport height. Take a look at the hamburger header menu of liveblocks.com

  

• The scrollbar is still persistent, and the website content does not go from edge to edge. The scrollbar should disappear and only be visible when the user is scrolling. If you're on macOS, take a look at how the scrollbar renders for github and vercel.

• Resources is supposed to be rendered in a monospaced font - ideally Geist Mono

  

• The gap between the Featured Blog Posts and the blog post cards is 20px. It is currently at 36px.

• The gap between All posts and the card stack above it is supposed to be 60px. We're supposed to have a gap of 16px between All Posts and the filter pills and another 20px below that before the card stack.

• In the Comparisons page - there is supposed to be a gap of 100px between where the card stack ends and the footer starts.

• In the footer, the gap between the solid icons can remain the same but their structure is weird. In the design, they're structured to be transparent buttons with a 32x32 size and the icon inside to be 20x20 so the click area is sufficient. Also they need a hover state where the icons turn white on hover.

• The search and github button on the top right need hover states. https://github.com/SigNoz/signoz-web/assets/15321738/08f2ea65-ee5d-4d46-9240-6b5562a01258

• Left padding on the github icon button on the header should be 8px instead of 12.

• Spacing between the 3 buttons on the right is inconsistent. They should be uniformly spaced 12px apart.

  

[GeekBoySupreme]

@harshbutfairx also feel free to address the tab bar and solid icon specific feedback in this PR and address the rest in a different one.