adarsh-priydarshi-5646 opened a new issue, #1961:
URL: https://github.com/apache/apisix-website/issues/1961
### 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:**
<img width="1512" height="817" alt="Image"
src="https://github.com/user-attachments/assets/48839bb0-9557-4842-8ef6-26d9144f86a1";
/>
<img width="621" height="824" alt="Image"
src="https://github.com/user-attachments/assets/7839b87b-0b31-4adb-ba34-19a63337927c";
/>
<img width="621" height="578" alt="Image"
src="https://github.com/user-attachments/assets/c6aef915-edef-42c2-98db-bd4ef9e35534";
/>
<img width="621" height="578" alt="Image"
src="https://github.com/user-attachments/assets/eeb52ae6-eba3-4155-985d-370996d1c524";
/>
---
**After (Fix Preview):**
<img width="1512" height="818" alt="Image"
src="https://github.com/user-attachments/assets/9dd5330b-f7a7-411d-ad20-fef90e769a4b";
/>
<img width="621" height="824" alt="Image"
src="https://github.com/user-attachments/assets/f04ac39b-8ec2-4725-9c9b-b5b40570d3b2";
/>
<img width="621" height="578" alt="Image"
src="https://github.com/user-attachments/assets/aca9f1a3-b11b-4b70-91f3-28ba614b30a5";
/>
<img width="621" height="578" alt="Image"
src="https://github.com/user-attachments/assets/56eedb20-c0e3-46c4-928d-53fdfb34cc36";
/>
### 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
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
