New MeshMap section

[Shivam-AfA]

Signed-off-by: Shivam-AfA shivamsood634@gmail.com

Description

This PR modifies the MeshMap page here. https://layer5.io/cloud-native-management/meshmap/

Notes for Reviewers

Signed commits

• [x] Yes, I signed my commits.

[l5io]

🚀 Preview for commit 2d202c979c0e170b7d8c72337ed3a80b0369c0a7 at: https://63d3b5933a64e87d1de89314--layer5.netlify.app

[Shivam-AfA]

There are still many changes left to do including:

• setting up some CSS scroll animations.
• correct redirections on button clicks.
• Content for features.
• I have still to figure out a way to inculcate the previous designs.

All-in-all, this is just to create the design base and see how the new designs look. I'm working on improving the interactive animations.

[l5io]

🚀 Preview for commit 289e94b7b7cda01dac59b84e8898f4c6ba8a7595 at: https://63d3fd8486bbfd122702872c--layer5.netlify.app

[Chadha93]

This will be a vertical carousel, right?

[Shivam-AfA]

This will be a vertical carousel, right?

Yes. @Chadha93

[l5io]

🚀 Preview for commit 81f4078f61821d3706f32da94e39e708b2b35fd1 at: https://63dbadc41649be4ee2798229--layer5.netlify.app

[Shivam-AfA]

Uh oh... Seems like there's some issue with svg sizing. Never mind I'll fix that.

[leecalcote]

@Shivam-AfA mobile view has a few responsive issues.

[Shivam-AfA]

@Nikhil-Ladha @leecalcote I have refined the designs a bit and added mobile responsiveness. I also added the new SVGs and they seem to work fine.

[l5io]

🚀 Preview for commit 20d1159aff12240bb6c2a81dfea3dbf9a0a77cfd at: https://63e0c74680c560344370a95f--layer5.netlify.app

[Shivam-AfA]

Revert the changes under collections/integrations directory

Done.

[l5io]

🚀 Preview for commit 532d9d685b194fc5a56ec53d9843ebeff7420709 at: https://63e0d28c4a5cea3aca1f70cb--layer5.netlify.app

[l5io]

🚀 Preview for commit fff8051d27f78b415b8053087affd90e2daa758f at: https://63e0f6b7955c2d606eae0f05--layer5.netlify.app

[Shivam-AfA]

@leecalcote I guess the off-white doesn't look appealing.

And merging the modes animation with the top banner looks something like this.

If you feel that there is a lot of whitespace, reducing the text size and adding more content surely does help.

[leecalcote]

The font size must be reduced otherwise this single page doesn't fit into the consistent design that the other 1,000 or so pages use.

[Shivam-AfA]

The font size must be reduced otherwise this single page doesn't fit into the consistent design that the other 1,000 or so pages use.

Yes I know. And I did that in the last screenshot.

[Shivam-AfA]

@leecalcote I have added the new SVGs. I also made a few other changes that we discussed.

[l5io]

🚀 Preview for commit 69145b43ad02a66289d5996ea0d41aeca30729b4 at: https://63e3731ce6af300c67c2f7db--layer5.netlify.app

[l5io]

🚀 Preview for commit 366e0b320929165344e99f230e6968e913b721ef at: https://63e54f88d3531a079190aea7--layer5.netlify.app

[l5io]

🚀 Preview for commit 6cfdc6e8580a2d0625fafdee74284bc177a17349 at: https://63e560a5362e90183277e23e--layer5.netlify.app

[Shivam-AfA]

@leecalcote I have added SVGs for collaborate section and also changed some text content.

[l5io]

🚀 Preview for commit e39ce27f71687724b3f9e93e5c4dcdc64333c0d9 at: https://63e56576aa1d261ae2f34a53--layer5.netlify.app

[leecalcote]

@Shivam-AfA ok, this PR's title still warns off any possibility of a merge. is that still true?

[Shivam-AfA]

@Shivam-AfA ok, this PR's title still warns off any possibility of a merge. is that still true?

@leecalcote I've added the Design SVGs, collaborate SVGs and the texts that I saw fit for the three sections. The only concern left is for Visualize SVGs. Once that's done, it'll be good to merge, with improvements taking place on the go.

[leecalcote]

Excellent

[l5io]

🚀 Preview for commit b2ce0e04cfaa7fcd6b61fa20f075a71ee22480ca at: https://63e64e5f518d010094940d57--layer5.netlify.app

[leecalcote]

Stop using different font sizes than what are already on the page:

Also, the bottom section of this page doesn't have responsive fonts sizes.

[l5io]

🚀 Preview for commit 0776f07a7420e0668c84aa84f8d43c1ef288af46 at: https://63e8bb30fb18ad69b45c4c76--layer5.netlify.app

[l5io]

🚀 Preview for commit e127d2aaeac8511fcaf4a031b50775c7cc2605ea at: https://63e9265c8dc47b2995ae3707--layer5.netlify.app

[l5io]

🚀 Preview for commit 678eabd6ab85f6a7dac7ba153d09bb3ca45b070b at: https://63e9e20016ba542b51e66387--layer5.netlify.app

[l5io]

🚀 Preview for commit 415b8440b3737e178cc3a034043068d2884111e4 at: https://63ea2ca8f0c5e2056f7d492c--layer5.netlify.app

[Shivam-AfA]

@leecalcote @Nikhil-Ladha reviews on this?

[leecalcote]

@Shivam-AfA yes, give these sections of the page a single combined accordion effect. Have the background of the section titles be green and stay green. Always show the border, not just on focus. Include the "Save time with a pattern" in the accordion. Tie all the sections together in this way.

[l5io]

🚀 Preview for commit e675603bfb8ae21d28b7e6735a6180993ad90d1c at: https://63ebc8bfc2b8e510e5ea852a--layer5.netlify.app

[leecalcote]

Finish today?

[Shivam-AfA]

I have added the accordian effect, working on the scrolling thing.

[l5io]

🚀 Preview for commit ffac14830a1c16e3670fe7dad3ee574b152572b4 at: https://63ed34b0390800005778c463--layer5.netlify.app