[Enchancement] Improve Hero Section

suryanshsingh2001 commented 1 month ago

Enhancement Request: Improve Hero Section for Better Conversions

Is your enhancement request related to a problem? Please describe.

The current hero section lacks the visual impact necessary to captivate users and drive conversions. The hero image feels outdated and doesn't effectively communicate the value proposition or engage users in a compelling way.

Describe the enhancement you'd like

I would like the hero section to be redesigned with a more impactful and high-converting hero image. The image should:

Clearly reflect the brand's core message.
Be visually striking while maintaining a professional look.
Include a strong call to action (CTA) that encourages users to take the desired action (e.g., sign-up, learn more, explore services).

Describe alternatives you've considered

Using a simple background gradient or color without an image, but it doesn't provide the same level of engagement.
Adding a video background, but that might affect performance, especially on mobile devices.

Possible Implementation Details

Select a high-quality, high-resolution image or create custom visuals that align with the brand message.
Optimize the hero image for speed and responsiveness on different devices.
Add engaging text and a CTA button overlay with clear contrast to ensure readability.
Consider using animation or parallax scrolling effects to enhance the user's experience without overwhelming them.
Ensure the new hero section is optimized for conversions by strategically placing the CTA and making it visually distinct.

Task List:

[ ] Select or design a high-converting hero image that aligns with the brand.
[ ] Optimize the image for speed (compress and serve in modern formats like WebP).
[ ] Add a clear and engaging call to action (CTA) with a prominent button.
[ ] Ensure the hero section is fully responsive across all devices.
[ ] Test the hero section's performance to ensure it doesn't negatively affect load times.
[ ] Consider adding animations or parallax effects for a more dynamic experience.

Additional context

Make sure to consider accessibility guidelines (e.g., alt text for the hero image, button contrast).

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

Ehm-Ehs commented 1 month ago

@suryanshsingh2001 you can assign this to me

faresbouzayen commented 1 month ago

Hi @suryanshsingh2001! I’d love to contribute to the improvement of the Hero Section! 🎉

Enhancement Plan: Image Selection/Design: I’ll source or create a visually striking hero image that encapsulates our brand's core message. Optimization: Ensure the image is optimized for fast loading and responsiveness across devices, using formats like WebP. CTA Integration: Add a strong and engaging call to action (CTA) that stands out, encouraging users to take action. Responsiveness: Make sure the hero section is fully responsive and accessible, adhering to best practices for readability and usability. Dynamic Effects: Explore adding subtle animations or parallax scrolling to enhance the user experience without overwhelming them. Performance Testing: Test the new hero section to confirm it boosts conversions without sacrificing load times. Looking forward to making our hero section more impactful!

kumariAnjali10 commented 1 month ago

@suryanshsingh2001 Can you assign this to me?

suryanshsingh2001 commented 1 month ago

@faresbouzayen @Ehm-Ehs @kumariAnjali10, Assigned you all. Feel free to work together. You can also take a look at existing issues here

Ehm-Ehs commented 1 month ago

@suryanshsingh2001 ,@faresbouzayen, @kumariAnjali10, i would be working on the text. @suryanshsingh2001 i would like you to validate some of my ideas for the hero section and add your tweaks to it if need be.

For the headline can we change it to 'Bring Your Ideas to Life with Stunning Mockups' and subtitle be 'Create, customize, and collaborate effortlessly with our intuitive tools.'

For the CTA can it be Explore Our Features.

suryanshsingh2001 commented 1 month ago

@suryanshsingh2001 ,@faresbouzayen, @kumariAnjali10, i would be working on the text. @suryanshsingh2001 i would like you to validate some of my ideas for the hero section and add your tweaks to it if need be.

For the headline can we change it to 'Bring Your Ideas to Life with Stunning Mockups' and subtitle be 'Create, customize, and collaborate effortlessly with our intuitive tools.'

For the CTA can it be Explore Our Features.

The core idea behind Mockly is to be a fast and lightweight tool for developers, focusing on speed and efficiency—definitely not trying to compete with Canva or Figma. It's all about quick, hassle-free mockups rather than a full-blown design suite. So, for now I would like to keep the text the same. But, the overall appearance can be improved for hero section.

suryanshsingh2001 commented 1 month ago

@Ehm-Ehs @faresbouzayen @kumariAnjali10 Let me know your thoughts on how to proceed. I'll be making a discussion section, so we can all work together to make Mockly a well polished tool!.

suryanshsingh2001 commented 1 month ago

@Ehm-Ehs @faresbouzayen @kumariAnjali10 Let me know your thoughts on how to proceed. I'll be making a discussion section, so we can all work together to make Mockly a well polished tool!."

https://github.com/suryanshsingh2001/mockly/discussions/29

faresbouzayen commented 1 month ago

Go ahead!

suryanshsingh2001 commented 1 month ago

@faresbouzayen @kumariAnjali10 @Ehm-Ehs Any updates on this?

suryanshsingh2001 commented 1 month ago

Gentle Reminder ⏰

Hi! When you're assigned an issue, please note that if there's no activity for over 7 days, we may need to unassign it to ensure project progress. This helps keep things moving smoothly.

Thank you for your understanding! 🙏

suryanshsingh2001 / mockly