Current State

Description of the current state/issue:

Currently, several sections of the website show inconsistent UI behavior and responsiveness issues across devices.

• The hero section background and text readability are slightly unbalanced due to low contrast.
• Architecture section text overflows on smaller screens.
• Features and CTA sections have inconsistent font sizing and button spacing.
• Buttons lack consistent hover effects and touch optimization on mobile devices.

These issues impact user experience and visual consistency on both desktop and mobile views.

Link to the page:
https://apisix.apache.org/

Screenshots (if relevant):

Before:

After (Fix Preview):

Desired State

Description of the change you are proposing:

This update focuses on improving the overall user interface consistency and mobile responsiveness of the Apache APISIX website. The goal is to make the design more balanced, readable, and responsive across all devices.

Hero Section

Enhanced the background visibility by applying refined CSS filters for better contrast, brightness, and saturation.
Added a subtle backdrop blur to improve text readability and maintain clarity.
Adjusted button styling and layout to create a better visual hierarchy.

Architecture Section

Fixed text overflow issues by adding proper wrapping and container constraints.
Improved spacing and alignment for smaller screens.

Features Section

Adjusted typography, font sizes, and layout structure to improve readability on tablets and mobile devices.

End CTA Section

Optimized button size, padding, and spacing for a smoother mobile experience.

Button Improvements

Standardized button design across all sections.
Added consistent hover transitions and color effects.
Improved button sizing and touch targets for mobile accessibility.

Technical Enhancements

Implemented progressive text scaling for smooth, responsive transitions.
Ensured proper CSS containment to prevent overflow issues.
Optimized CSS for better performance and rendering.
Maintained full cross-browser compatibility.

Device Coverage

• Desktop: Improved background visibility and balanced layout.
• Tablet (768px): Refined spacing and text sizing.
• Mobile (480px): Compact, readable, and user-friendly layout.
• Extra Small (360px): Optimized ultra-compact adjustments for small screens.

All improvements are backward-compatible and enhance the overall user experience across devices.

Would you like to fix this issue?

Yes! Count me in