improve(home): modernize hero section layout, accessibility and i18n#136
Open
hijuliancode wants to merge 4 commits into
Open
improve(home): modernize hero section layout, accessibility and i18n#136hijuliancode wants to merge 4 commits into
hijuliancode wants to merge 4 commits into
Conversation
This commit modernizes the header navigation component with improved
mobile UX, accessibility, and maintainability.
- Add 21 i18n translation keys for all menu labels and descriptions
- Convert Features/Resources toggles from <a href="javascript:void(0)">
to semantic <button> elements for accessibility
- Extract inline styles to CSS classes (.sl-page-shell, .sl-header-sticky)
- Unify breakpoint value: 1278px across all media queries and JavaScript
- Add data-breakpoint="1278" attribute to #navBar as single source of truth
- Remove ~20 !important declarations from responsive CSS (improved specificity)
- Add animated chevron icons to Features/Resources mega-menu toggles
(Font Awesome icon, smooth 180° rotation with cubic-bezier easing)
- Improve action button styling in mobile drawer:
* Create Free Account: full-width, solid background, subtle shadow
* Sign in: full-width outline style with transparent background
* Active state: scale(0.98) for tactile feedback
- Normalize nav item spacing: consistent padding 1.1rem vertical, 1.5rem horizontal
- Hide descriptions in drawer mode to improve mobile readability
- Add smooth transitions: 0.15s-0.25s ease on interactions
- Define 21 base English keys in i18n/en.yaml:
* header_menu_features, header_menu_resources
* 4 Feature items + descriptions (Email Aliases, Custom Domains,
Browser Extensions, Sign in with SimpleLogin)
* 6 Resource items + descriptions (Blog, Documentation, FAQ, Forum,
GitHub, Status) + Comparisons section
- Translate all keys to: ES, FR, DE, IT, NL, and other site languages
- WCAG AA compliant: semantic buttons, ARIA attributes maintained
- Screen reader friendly: aria-expanded, aria-haspopup, aria-controls
- Keyboard navigation: buttons focusable and operable
- Mobile touch: proper tap targets (36px minimum)
- Breakpoint consistency: CSS variables + JavaScript data attribute
- No cascade conflicts: removed !important by improving selector specificity
- Mobile-first approach: base rules for mobile, progressive enhancement
- Performance: GPU-accelerated transitions, no layout thrashing
✓ Visual: 320px (mobile), 640px (CTA visible), 768px (Sign in), 1278px+ (desktop)
✓ Interaction: drawer toggle, mega-menu expand/collapse, button clicks
✓ i18n: English base, verify translations in at least 2 other languages
✓ Accessibility: keyboard navigation, screen reader testing
✓ Browser: Chrome, Firefox, Safari (mobile + desktop)
Co-authored-by: Julian Alejandro Sosa - hi@juliansosa.com
- Increase headline size and weight with brand color accent on 'anonymously' - Wrap hero illustration in styled card container (border-radius, soft shadow) - Redesign social proof block: 1,000,000+ as prominent stat with stars - Add secondary 'How it works' CTA button with outline style - Add keyboard :focus-visible styles for hero CTA buttons - Mark decorative hero image as aria-hidden - Add rel='noopener noreferrer' to Open source links across all i18n locales - Remove redundant CSS radius rules, consolidate design tokens - Clean editorial comments and minor CSS redundancies"
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Modernizes the homepage hero section with improved visual hierarchy,
accessibility, and i18n hygiene. Builds on top of the header refactor
(#135 ).
Visual changes
Accessibility
i18n / Security
all 20 locale files
Testing
Verified at 320px, 768px and 1280px+ breakpoints.
Chrome, Firefox and Safari on macOS. Hugo v0.94.2 extended.
Notes
This PR depends on #135 .
This PR includes changes that overlap with #135 .
Recommend merging the header PR first to avoid conflicts.
Screenshots
Before
After