fix(container): Adjust grid to align with design + adjust button hover effects

[proeung]

Issue

Fixes - https://jira.sdlc.merative.com/browse/MERATIVE-787

Description

Changed

• This PR adds max-width value to the section/container so that it's fluid instead of having fixed width of each breakpoint that we currently have right now.
• In addition, this PR fixes design QA issues seen on the current version of the homepage.
• Adds easing effect to button styles
• Overall, this PR addresses some of the design QA issues that did not get addressed when we launched the version of the homepage in Franklin.

Design Specs

• Figma Link - https://www.figma.com/file/FSqQ1LYrVSssEFOZuOnMIE/Final-page-layouts-for-Merative.com?type=design&node-id=202%3A40370&mode=design&t=0pO1gDaVFwT9c9qo-1

Test URLs

• Before (Changes from main): https://main--merative2--hlxsites.hlx.page/
• After (Changes from this PR): https://fix-grid-container--merative2--proeung.hlx.page/

https://github.com/hlxsites/merative2/assets/1815714/e0e74ae1-deed-4921-929c-27f3c9333208

Testing Instruction

• Visit the homepage (https://fix-grid-container--merative2--proeung.hlx.page/) and pages that are routed over to Franklin (see - https://confluence.sdlc.merative.com/display/MERATIVE/CDN+Routing+Rules)
• Ensure that the container is fluid and matches the design specs.

[aem-code-sync[bot]]

Hello, I'm Franklin Bot and I will run some test suites that validate the page speed. In case there are problems, just click the checkbox below to rerun the respective action.

• [ ] Re-run PSI Checks

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/

[sachinmesh]

HI @proeung

Layout fluidity is good, hover animations are smooth, tab highlighter line animation is also great.

Some observations

1. The scroll line is crossing the curve

2. Layout at particular resolution the second heading crosses the curve see here

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/

[proeung]

@sachinmesh Thanks for testing this PR! I've addressed the issues that you mentioned above, however, please note that 1199px is just a size in between tablet 768px and desktop 1200px. The text/heading container is going to resize and sits slightly within the white curve.

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/

[aavilamer]

@proeung this looks great! So happy to see this come to life.

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/