This PR introduces a responsive NumberedCards component system for the CommunityRule marketing site.
It displays a 3-step process flow with numbered cards, titles, and descriptions, adapting across multiple breakpoints. The system includes four subcomponents (NumberedCards, NumberedCard, SectionNumber, SectionHeader) with Storybook documentation and SEO schema integration.
Changes
Implemented responsive layouts across breakpoints (xsm, sm, lg, xl)
Added SectionHeader with dynamic title (“How CommunityRule works” / “How CommunityRule helps”) and subtitle
Built NumberedCard subcomponent with step number, title, description, and PNG background icon
Created SectionNumber for number overlays with proper alt text
Added Storybook stories for responsive states and content variations
Screenshots
How to Test
Run Storybook and open NumberedCards stories.
Verify:
Layout adapts at xsm, sm, lg, xl breakpoints
SectionHeader titles/subtitles scale as expected
Numbered cards render steps 1–3 with correct text/icons
CTA button changes style and position per breakpoint
Keyboard navigation and screen readers correctly read numbered steps
Touch targets meet 44px+ guideline
Cross-check rendering in Chrome, Firefox, Safari, Edge.
Test on mobile to confirm responsive behavior and touch targets.
Notes
Dark mode support will be handled in a future PR.
Animation for card entry/hover may be added later.
Component is self-contained but reusable across other pages if needed.
# Add NumberedCards Component
## Overview
This PR introduces a responsive **NumberedCards** component system for the CommunityRule marketing site.
It displays a 3-step process flow with numbered cards, titles, and descriptions, adapting across multiple breakpoints. The system includes four subcomponents (NumberedCards, NumberedCard, SectionNumber, SectionHeader) with Storybook documentation and SEO schema integration.
## Changes
- Implemented **responsive layouts** across breakpoints (xsm, sm, lg, xl)
- Added **SectionHeader** with dynamic title (“How CommunityRule works” / “How CommunityRule helps”) and subtitle
- Built **NumberedCard** subcomponent with step number, title, description, and PNG background icon
- Created **SectionNumber** for number overlays with proper alt text
- Added **CTA button behavior**:
- Xsm/Sm → “Create CommunityRule” (default variant, centered)
- Lg/Xl → “See how it works” (outlined variant, centered)
- Applied **design tokens** for colors, spacing, typography
- Verified **accessibility** (WCAG 2.1 AA, semantic headings, ARIA labels, 44px+ touch targets)
- Integrated **SEO schema markup** for numbered steps
- Added **Storybook stories** for responsive states and content variations
## Screenshots
<img width="213" alt="Screenshot 2025-08-18 at 8.05.50 AM.png" src="attachments/409a5c67-3503-40bc-8f13-86bab89f5404">
<img width="495" alt="Screenshot 2025-08-18 at 8.03.45 AM.png" src="attachments/10fc64a3-d9cd-499a-a9bf-8ac8e8a5db03">
<img width="781" alt="Screenshot 2025-08-18 at 8.04.36 AM.png" src="attachments/aca62ebb-538a-40dd-b7a6-c3db56ca5cb4">
<img width="1250" alt="Screenshot 2025-08-18 at 8.05.03 AM.png" src="attachments/f41567aa-1c38-4d4d-9c2a-6f7b7679e9ef">
## How to Test
1. Run Storybook and open `NumberedCards` stories.
2. Verify:
- Layout adapts at xsm, sm, lg, xl breakpoints
- SectionHeader titles/subtitles scale as expected
- Numbered cards render steps 1–3 with correct text/icons
- CTA button changes style and position per breakpoint
- Keyboard navigation and screen readers correctly read numbered steps
- Touch targets meet 44px+ guideline
3. Cross-check rendering in Chrome, Firefox, Safari, Edge.
4. Test on mobile to confirm responsive behavior and touch targets.
## Notes
- Dark mode support will be handled in a future PR.
- Animation for card entry/hover may be added later.
- Component is self-contained but reusable across other pages if needed.
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 NumberedCards Component
Overview
This PR introduces a responsive NumberedCards component system for the CommunityRule marketing site.
It displays a 3-step process flow with numbered cards, titles, and descriptions, adapting across multiple breakpoints. The system includes four subcomponents (NumberedCards, NumberedCard, SectionNumber, SectionHeader) with Storybook documentation and SEO schema integration.
Changes
Screenshots
How to Test
NumberedCardsstories.Notes