CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hero Banner #7

Merged
an.di merged 27 commits from adilallo/HeroBanner into main 2025-08-22 02:02:08 +00:00
Conversation 0 Commits 27 Files Changed 137
+93776 -241
an.di commented 2025-08-20 05:25:26 +00:00
Owner
Copy Link
Copy Source

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.
Screenshot 2025-08-19 at 11.44.47 PM.png
333 KiB
Screenshot 2025-08-19 at 11.45.11 PM.png
540 KiB
Screenshot 2025-08-19 at 11.45.34 PM.png
763 KiB
Screenshot 2025-08-19 at 11.45.57 PM.png
1.4 MiB
an.di added 9 commits 2025-08-20 05:25:27 +00:00
Hero Banner xsm breakpoint a04a5a6eeb
Hero Banner sm breakpoint 968d687bad
Hero Banner md breakpoint 1a9339479d
Hero Banner lg breakpoint a5352d98ef
Hero Banner xl breakpoint af986c9ba3
Fix button md breakpoint sizing issue 2910631d56
Fix xl breakpoint header + footer 452603f4f6
Hero Banner Storybook added 445e812e9c
Content Lockup button fixed 6e274124c3
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
Replace absolute image paths e871c9de4b
Base name reconfiguration f3b0daa2c0
More absolute image paths eae99c7cdf
Merge pull request 'Storybook Deployment Fix' (#8) from adilallo/bugfix/StorybookImageFix into adilallo/HeroBanner e483175c35 
Reviewed-on: #8
an.di added 13 commits 2025-08-21 23:09:20 +00:00
Logo Wall xsm breakpoint c903821b57
Logo Wall sm breakpoint cb466a87b3
Logo Wall md breakpoint 93b5c0ac1a
Logo Wall lg breakpoint eaae6309e1
Logo Wall xl breakpoint b98fb11833
Update Storybook configuration and readme b284cbd385
Create pull_request_template.md b998ea50d2
Add logo wall transitions b22b22e205
Image warning fix 52fa98ef67
Fix storybook image paths 5d873efe21
Update github storybook 318ae5a32f
More storybook updates for github pages 12ad54167b
Merge pull request 'Logo Wall' (#9) from adilallo/component/LogoWall into adilallo/HeroBanner d430ec0552 
Reviewed-on: #9
an.di added 1 commit 2025-08-21 23:21:47 +00:00
Fix Hero Banner fonts b486022c3b
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.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
an.di (Andy DiLallo) ntnsndr (Nathan Schneider)
No Assignees an.di
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: CommunityRule/community-rule#7
Delete Branch "adilallo/HeroBanner"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?