Is your feature request related to a problem? Please describe.
Yes. I noticed that the current Hero section on the landing page (templates/index.html) suffers from a few accessibility and UI/UX issues. The screen reader flow is somewhat disorganized due to improper semantic grouping, and the layout shifts unexpectedly during the typewriter effect. Additionally, the vertical rhythm and visual hierarchy between the heading, description, and Call to Action (CTA) buttons could be improved to provide a more polished first impression.
Describe the solution you'd like
I'd like to implement a comprehensive redesign of the Hero section, focusing on proper markup, typography, and responsive spacing. The solution involves:
- Markup Hierarchy: Adding semantic grouping for CTAs and trust indicators, and ensuring screen readers follow a logical order (
H1 -> Description -> CTAs -> Trust Indicators). Non-essential visual elements will be hidden from screen readers using aria-hidden="true".
- Typography & Spacing: Strengthening the visual hierarchy in
static/css/style.css, tuning max-width, line-height, and stabilizing the layout to prevent shifts from the typewriter effect.
- Responsiveness & Accessibility: Improving mobile stacking for CTA buttons, cleaning up the jittering on the trust strip, respecting
prefers-reduced-motion for animations, and adding strong :focus-visible styles for better keyboard navigation.
Describe alternatives you've considered
An alternative would be to simply tweak the CSS to patch the visual bugs without modifying the HTML template. However, this wouldn't solve the core accessibility issues related to semantic HTML grouping and screen-reader flow, nor would it establish a solid foundation for future UI additions in the hero section.
Additional context
This feature aligns directly with the pending tasks outlined in the project's TODO_HERO_REDESIGN.md.
Hi maintainers! 👋 I would love to work on this issue for GSSoC '26. Could you please assign it to me? 🚀
Is your feature request related to a problem? Please describe.
Yes. I noticed that the current Hero section on the landing page (
templates/index.html) suffers from a few accessibility and UI/UX issues. The screen reader flow is somewhat disorganized due to improper semantic grouping, and the layout shifts unexpectedly during the typewriter effect. Additionally, the vertical rhythm and visual hierarchy between the heading, description, and Call to Action (CTA) buttons could be improved to provide a more polished first impression.Describe the solution you'd like
I'd like to implement a comprehensive redesign of the Hero section, focusing on proper markup, typography, and responsive spacing. The solution involves:
H1->Description->CTAs->Trust Indicators). Non-essential visual elements will be hidden from screen readers usingaria-hidden="true".static/css/style.css, tuningmax-width,line-height, and stabilizing the layout to prevent shifts from the typewriter effect.prefers-reduced-motionfor animations, and adding strong:focus-visiblestyles for better keyboard navigation.Describe alternatives you've considered
An alternative would be to simply tweak the CSS to patch the visual bugs without modifying the HTML template. However, this wouldn't solve the core accessibility issues related to semantic HTML grouping and screen-reader flow, nor would it establish a solid foundation for future UI additions in the hero section.
Additional context
This feature aligns directly with the pending tasks outlined in the project's
TODO_HERO_REDESIGN.md.Hi maintainers! 👋 I would love to work on this issue for GSSoC '26. Could you please assign it to me? 🚀