This PR introduces a responsive HeroBanner system aligned with the CommunityRule design system.
It includes three modular subcomponents:
HeroBanner: Main container with responsive frame
ContentLockup: Title, subtitle, description, and CTA button
HeroDecor: SVG background decoration with grain effect
Changes
Implemented responsive layout across xsm, sm, md, lg, xl breakpoints
Added responsive typography for title, subtitle, and description
Integrated button sizing across breakpoints (small → large → xlarge)
Applied design tokens for spacing, colors, and typography
Implemented SVG decoration with subtle grain effect
Added Storybook stories for default, custom content, and breakpoint testing
Screenshots
How to Test
Run Storybook and open the HeroBanner stories.
Verify:
Layout transitions correctly at each breakpoint
Buttons retain width and scale properly
Decoration stays behind content with grain effect
Headings, alt text, and color contrast meet accessibility requirements
Check that component works within the app’s main layout.
Notes
Dark mode and RTL/i18n support planned for a future PR.
Animations (e.g., smooth transitions) will be added later.
# Add HeroBanner Component System
## Overview
This PR introduces a responsive **HeroBanner** system aligned with the CommunityRule design system.
It includes three modular subcomponents:
- **HeroBanner**: Main container with responsive frame
- **ContentLockup**: Title, subtitle, description, and CTA button
- **HeroDecor**: SVG background decoration with grain effect
## Changes
- Implemented responsive layout across **xsm, sm, md, lg, xl** breakpoints
- Added **responsive typography** for title, subtitle, and description
- Integrated **button sizing** across breakpoints (small → large → xlarge)
- Applied **design tokens** for spacing, colors, and typography
- Implemented **SVG decoration** with subtle grain effect
- Added **Storybook stories** for default, custom content, and breakpoint testing
## Screenshots
<img width="322" alt="Screenshot 2025-08-19 at 11.44.47 PM.png" src="attachments/0d145ffb-d837-4891-839e-4fded4aed08a">
<img width="431" alt="Screenshot 2025-08-19 at 11.45.11 PM.png" src="attachments/2e9620c4-a540-4e34-9233-78c8d20af5f6">
<img width="640" alt="Screenshot 2025-08-19 at 11.45.34 PM.png" src="attachments/b35bde8f-0f3c-46bc-8f0d-8bd8ece620d5">
<img width="1026" alt="Screenshot 2025-08-19 at 11.45.57 PM.png" src="attachments/30c3920c-e39f-4b0d-a5e5-400a2378830c">
## How to Test
1. Run Storybook and open the `HeroBanner` stories.
2. Verify:
- Layout transitions correctly at each breakpoint
- Buttons retain width and scale properly
- Decoration stays behind content with grain effect
- Headings, alt text, and color contrast meet accessibility requirements
3. Check that component works within the app’s main layout.
## Notes
- Dark mode and RTL/i18n support planned for a future PR.
- Animations (e.g., smooth transitions) will be added later.
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Add HeroBanner Component System
Overview
This PR introduces a responsive HeroBanner system aligned with the CommunityRule design system.
It includes three modular subcomponents:
Changes
Screenshots
How to Test
HeroBannerstories.Notes