feat: Enhanced hero section background visibility and comprehensive mobile responsive design #1961#1962
Conversation
…obile responsive design ✨ Hero Section Enhancements: - Enhanced background image visibility with CSS filters (contrast 1.1, brightness 1.05, saturation 1.1) - Added subtle backdrop blur for better text readability - Improved visual hierarchy while maintaining text clarity - Enhanced button styling with proper hover effects 📱 Mobile Responsive Improvements: - Architecture section: Fixed text overflow with proper text wrapping and container constraints - Features section: Optimized text sizes and widths for all mobile devices - EndCTA section: Adjusted button sizes and text for better mobile experience - Added comprehensive breakpoint coverage (768px, 480px, 360px) 🎯 Button Enhancements: - Standardized button styling across all sections - Added proper hover effects with color transitions - Optimized button sizes for different screen sizes - Improved touch targets for mobile devices 🛠️ Technical Improvements: - Progressive text scaling for smooth responsive transitions - Proper CSS containment to prevent overflow issues - Optimized performance with efficient CSS properties - Cross-browser compatibility maintained 📊 Device Coverage: - Desktop: Enhanced background visibility and professional styling - Tablets (768px): Medium-sized optimizations - Mobile (480px): Compact layouts with readable text - Extra Small (360px): Ultra-compact designs for tiny screens All changes maintain backward compatibility and improve user experience across all devices.
|
Can you please add some screenshots to show the before-and-after effects? Just add them to this pull request's description. Thanks! |
@bzp2010 I’ve added all before-and-after screenshots in the PR description as requested. Please check once |
|
Hi @adarsh-priydarshi-5646, thank you for your contribution, we will review it as soon as possible. |
|
@Yilialinn Please review. |
There was a problem hiding this comment.
Pull request overview
This pull request implements comprehensive UI and responsive design improvements to the Apache APISIX website, focusing on the hero section's visual presentation and mobile experience across multiple breakpoints. The changes aim to enhance background visibility, improve text readability, and provide better responsive layouts for tablets and mobile devices.
Changes:
- Enhanced hero section with refined CSS filters, new animations, and repositioned layout with centered text over full-screen background
- Added comprehensive mobile responsive breakpoints (996px, 768px, 480px, 360px) across hero, features, architecture, and end-CTA sections
- Implemented dynamic navbar styling that changes appearance based on scroll position within hero section
- Modified button styling with fixed dimensions, gradient backgrounds, and improved hover states
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 19 comments.
Show a summary per file
| File | Description |
|---|---|
| website/src/css/landing-sections/hero.scss | Major redesign of hero section layout, button styling, and addition of multiple responsive breakpoints with extensive use of !important flags |
| website/src/css/landing-sections/features.module.scss | Added responsive typography adjustments for 768px and 480px breakpoints |
| website/src/css/landing-sections/endcta.module.scss | Added button styling overrides and responsive text sizing for multiple breakpoints |
| website/src/css/landing-sections/architecture.scss | Improved text wrapping and added responsive adjustments for architecture card captions |
| website/src/css/customTheme.scss | Added extensive navbar styling with 120+ !important overrides and hero-specific navbar variants |
| website/src/components/sections/HeroSection.tsx | Added scroll event listener to toggle navbar styling and restructured component layout |
| website/src/components/sections/Architecture.tsx | Removed Translate component, hardcoding English text with line breaks |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
@Yilialinn I’ve been waiting for the past two months. Could you please review the PR so I can continue contributing? |
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
UI & Responsiveness Improvements
Hero Section Enhancements
Mobile Responsiveness
Button Improvements
Technical Upgrades
📊 Device Coverage
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:
After:
Mobile Responsive Layouts
Before:
After:
Architecture Section—Text Wrapping Comparison
Before:
After:
Before:
After:
Detailed Change Log