[Enchancement] Better Landing Page Design

[suryanshsingh2001]

Problem Description

The current landing page could be improved to better engage users and present information more clearly. The existing pricing cards and feature sections do not provide the best user experience or visual appeal.

Example: "The pricing cards are too simplistic, and the feature sections could be better structured to highlight the product’s strengths."

Desired Enhancement

I would like the landing page to be redesigned with better pricing cards, a more engaging feature section (possibly using a bento grid layout), and an enhanced hero section that grabs user attention right away.

Alternatives Considered

I explored some alternatives with minimal design changes, but they didn’t significantly improve the page's visual impact or usability. A full redesign focusing on modern UI/UX principles would be more beneficial.

Possible Implementation

• [ ] Redesign pricing cards with clearer distinctions between tiers, benefits, and CTA buttons
• [ ] Use a bento grid layout for the feature section to create a more modern, visually appealing structure
• [ ] Revamp the hero section with a stronger headline, supporting text, and a CTA
• [ ] Ensure consistent design language and color scheme throughout the page

Additional Context

Reference websites that inspired the idea for the bento grid feature section:

https://magicui.design/docs/components/bento-grid https://magicui.design/docs/components/animated-list

Optional Sections:

• Priority: High
• Are you willing to submit a PR for this enhancement? Yes
• Does this enhancement require changes in documentation? No

[Ehm-Ehs]

Hi @suryanshsingh2001 i will like to pick up this issue, if you do not mind giving clarity to it

[suryanshsingh2001]

Hi @suryanshsingh2001 i will like to pick up this issue, if you do not mind giving clarity to it

Absolutely! Have a look at the current landing page at www.mockly.site. The feature section definitely has room for improvement. I was thinking of adding a bento grid layout—feel free to refer to the links provided in the issue description for that.

You can also enhance the pricing section's design to make it more visually appealing and informative. You’re welcome to submit separate PRs for the feature section and the pricing section, or combine them into a single PR—it’s up to you!

[kumariAnjali10]

Hi suryansh! I also want to take this issue. Can I ?

[suryanshsingh2001]

Hi suryansh! I also want to take this issue. Can I ?

@kumariAnjali10 These are some issues you can work on. You can add one of these as separate issue. And work on it.

• [ ] Redesign pricing cards with clearer distinctions between tiers, benefits, and CTA buttons
• [ ] Use a bento grid layout for the feature section to create a more modern, visually appealing structure
• [ ] Revamp the hero section with a stronger headline, supporting text, and a CTA
• [ ] Ensure consistent design language and color scheme throughout the page

[suryanshsingh2001]

Hey @Ehm-Ehs @kumariAnjali10, this issue has been broken down into two smaller issues #17 and #16. Feel free to comment on those issues, so I can assign you.