Hero Banner #7

Merged
an.di merged 27 commits from adilallo/HeroBanner into main 2025-08-22 02:02:08 +00:00
Owner

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

Screenshot 2025-08-19 at 11.44.47 PM.png Screenshot 2025-08-19 at 11.45.11 PM.png Screenshot 2025-08-19 at 11.45.34 PM.png Screenshot 2025-08-19 at 11.45.57 PM.png

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.
# 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.
an.di added 9 commits 2025-08-20 05:25:27 +00:00
an.di self-assigned this 2025-08-20 05:46:28 +00:00
an.di added 4 commits 2025-08-20 19:29:39 +00:00
an.di added 13 commits 2025-08-21 23:09:20 +00:00
an.di added 1 commit 2025-08-21 23:21:47 +00:00
an.di merged commit 5f06b31428 into main 2025-08-22 02:02:08 +00:00
an.di deleted branch adilallo/HeroBanner 2025-08-22 02:03:02 +00:00
Sign in to join this conversation.
No Reviewers
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: CommunityRule/community-rule#7