adarsh-priydarshi-5646 opened a new pull request, #1962: URL: https://github.com/apache/apisix-website/pull/1962
# UI & Responsiveness Improvements ## Hero Section Enhancements - Improved background image visibility using refined CSS filters *(contrast 1.1, brightness 1.05, saturation 1.1)* for a more vivid and balanced look. - Enhanced overall visual hierarchy while keeping the text crisp and clear. - Refined button styling with smooth hover transitions for a more interactive experience. --- ## Mobile Responsiveness - **Architecture Section:** Fixed text overflow issues with proper wrapping and better container spacing. - **Features Section:** Optimized font sizes, spacing, and layout for all mobile breakpoints. - **End CTA Section:** Adjusted button sizes, padding, and text for an improved mobile touch experience. - Added complete breakpoint coverage—768px, 480px, and 360px**—for tablets, mobiles, and compact screens. --- ## Button Improvements - Unified button design across all sections for a consistent look and feel. - Added subtle hover animations and smooth color transitions. - Optimized button dimensions and spacing for different devices. - Ensured touch targets meet mobile accessibility standards. --- ## Technical Upgrades - Implemented **progressive text scaling** for smooth transitions across screen sizes. - Used proper **CSS containment** to eliminate overflow and layout issues. - Optimized performance by refining CSS rules for faster rendering. - Maintained **cross-browser compatibility** for consistent visuals everywhere. --- ## 📊 Device Coverage | Device | Enhancements | |--------|---------------| | **Desktop** | Enhanced visuals and polished design | | **Tablets (768px)** | Medium layout refinements | | **Mobile (480px)** | Compact yet readable design | | **Extra Small (360px)** | Optimized ultra-compact layouts | All updates are **fully backward-compatible** and designed to deliver a smoother user experience across every device. --- ## Fixes: #1961 --- ## Before & After Screenshots - Desktop hero section—before <img width="1512" height="817" alt="hero_before" src="https://github.com/user-attachments/assets/cb3661e3-4d6a-46b0-bc21-378dd8c8179f"; /> - Desktop hero section—After <img width="1512" height="818" alt="hero_after" src="https://github.com/user-attachments/assets/4db89914-451b-4f7b-bd22-fcf679e8f1b8"; /> - Mobile responsive layouts—different screen sizes - Before <img width="621" height="824" alt="Screenshot 2025-10-21 at 6 48 53 PM" src="https://github.com/user-attachments/assets/f3dca660-ca9d-4cfc-bba6-808b780482fd"; /> - After <img width="621" height="824" alt="Screenshot 2025-10-21 at 6 49 01 PM" src="https://github.com/user-attachments/assets/75a8d2a2-7165-4743-ba43-ecdc6bb8316a"; /> - Architecture section—text wrapping comparison - Before <img width="621" height="578" alt="Screenshot 2025-10-21 at 6 49 19 PM" src="https://github.com/user-attachments/assets/abe07195-0295-4d77-876f-835b72484729"; /> - After <img width="621" height="578" alt="Screenshot 2025-10-21 at 6 49 31 PM" src="https://github.com/user-attachments/assets/67eb9d01-d9fc-4b08-9f3e-8ff0a6b4ca7f"; /> - Before <img width="621" height="578" alt="Screenshot 2025-10-21 at 6 49 41 PM" src="https://github.com/user-attachments/assets/046beec9-80a9-4aea-a367-ea4688ce2f9b"; /> - After <img width="621" height="578" alt="Screenshot 2025-10-21 at 6 49 50 PM" src="https://github.com/user-attachments/assets/c3470b9e-068b-4646-8dbf-144fbcbd10a8"; /> ## Detailed Change Log - Updated all major sections - Added performance and accessibility improvements - Enhanced responsiveness and interactivity - Achieved full device coverage --- -- 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]
