style(gas-station): design fixes

[DiogoSoaress]

Addresses the following style fixes:

• Center text block in Hero section
• Smooth the edges of the video + slider
• Have the Slider occupy the container full width
• Between sections spacing

[github-actions]

Branch preview

✅ Deployed successfully in branch deployment:

https://gas_station_design_fixes--homepage.review.5afe.dev

[iamacook]

Everything looks good but two things I noticed on the deployment:

The video and carousel "end" abruptly. Can they transition into the background instead?

---

The doc-related cards stack. I think they should either span the entire width of the container, or be positioned horizontally:

[DiogoSoaress]

The video and carousel "end" abruptly. Can they transition into the background instead?

I've allowed the background blobs to overlap the slider giving it a really nice and smooth effect. Also added a gradient to the right side of the video.

The doc-related cards stack. I think they should either span the entire width of the container, or be positioned horizontally

I would prefer to not apply this suggestion and stick with the Figma design

[iamacook]

I've allowed the background blobs to overlap the slider giving it a really nice and smooth effect. Also added a gradient to the right side of the video.

There is still the issue that the video ends "abruptly" and carousel doesn't span the entire width. The designs depict them spanning the entire page. cc @TanyaEfremova

[DiogoSoaress]

The page content is limited to max-width: 1630px; because of

safe-homepage/src/components/common/PageLayout/styles.module.css

Line 2 in c2a5299

max-width: 1630px;

which impacts the video and the carrousel, so the video will need to be cut in larger viewports eventually.

What could be a elegant way to handle it?

[iamacook]

What could be a elegant way to handle it?

You could blur to both sides of the video/carousel but maybe @TanyaEfremova has a better idea.

[DiogoSoaress]

I've added gradients on both sides and I think it looks much better now! Thanks for making a point. I will ping Tanya to give her opinion

[TanyaEfremova]

I like the suggestion, and I think, we should proceed with that, however, on the link above I cannot see the gradient within the ribbons.
Possible to make something like this? I replicated it in design. If we can use a different color for the gradient, like in the video itself #030D02, it would look even better and more "natural".

[DiogoSoaress]

Can you include this blob in the design? I think that's what emphasized so much the edges of the video + slider container. I suggest we move it to a new issue as an improvement