Add LogoWall Component with Responsive Design and Animations
Overview
This PR implements a comprehensive LogoWall component system for the Community Rule marketing website. The component displays partner organization logos in a responsive grid layout that adapts across all breakpoints, with smooth animations and proper loading states. This component is essential for building trust and credibility by showcasing partner organizations, cooperatives, mutual aid groups, and other community organizations that use or endorse Community Rule.
Changes
New LogoWall Component (app/components/LogoWall.js)
Comprehensive documentation with responsive behavior details
Animation and transition specifications
Usage examples and props documentation
Single story showcasing all features
Project Configuration Updates
Added Storybook local development workflow with dual configuration support
Updated .gitignore to prevent configuration file changes during development
Added PR template for consistent documentation
Updated README with Storybook development and deployment instructions
Design System Integration
Uses design system tokens for spacing (--spacing-scale-*)
Consistent color tokens (--color-content-default-secondary)
Tailwind CSS utility classes only (no custom CSS)
500ms transition timing for all animations
Screenshots
How to Test
Local Development:
npm run dev
# Visit http://localhost:3000 to see LogoWall on main page
Storybook Testing:
npm run storybook:local
# Visit http://localhost:6006 and navigate to Components/LogoWall
Responsive Testing:
Resize browser window to test all breakpoints
Mobile (320-429px): 3×2 grid layout
SM (430-639px): 2×3 grid with 48px row gap
MD (640-1023px): Single row with space-between
LG (1024-1440px): Larger logos with 64px horizontal padding
XL (1440px+): Largest logos with 160px horizontal padding
Animation Testing:
Verify fade-in effect on component mount
Test hover interactions on individual logos
Check smooth transitions (500ms duration)
Accessibility Testing:
Verify alt text for all logos
Test keyboard navigation
Check screen reader compatibility
Notes
Image Optimization: Uses Next.js Image component with unoptimized prop for local images
Performance: Implements lazy loading and priority loading for above-the-fold content
Browser Support: Modern browsers with CSS Grid support
Future Enhancements: Ready for CMS integration and dynamic logo management
Storybook Workflow: Dual configuration supports both local development and GitHub Pages deployment
No Breaking Changes: Component is additive and doesn't affect existing functionality
# Add LogoWall Component with Responsive Design and Animations
## Overview
This PR implements a comprehensive LogoWall component system for the Community Rule marketing website. The component displays partner organization logos in a responsive grid layout that adapts across all breakpoints, with smooth animations and proper loading states. This component is essential for building trust and credibility by showcasing partner organizations, cooperatives, mutual aid groups, and other community organizations that use or endorse Community Rule.
## Changes
- **New LogoWall Component** (`app/components/LogoWall.js`)
- Responsive grid layout with 5 breakpoints (Mobile, SM, MD, LG, XL)
- Dynamic logo sizing and ordering for optimal visual balance
- Next.js Image component integration for performance optimization
- Smooth fade-in animations and hover interactions
- Loading states with fallback timer for reliable display
- **Storybook Integration** (`stories/LogoWall.stories.js`)
- Comprehensive documentation with responsive behavior details
- Animation and transition specifications
- Usage examples and props documentation
- Single story showcasing all features
- **Project Configuration Updates**
- Added Storybook local development workflow with dual configuration support
- Updated `.gitignore` to prevent configuration file changes during development
- Added PR template for consistent documentation
- Updated README with Storybook development and deployment instructions
- **Design System Integration**
- Uses design system tokens for spacing (`--spacing-scale-*`)
- Consistent color tokens (`--color-content-default-secondary`)
- Tailwind CSS utility classes only (no custom CSS)
- 500ms transition timing for all animations
## Screenshots
<img width="489" alt="Screenshot 2025-08-21 at 9.48.15 AM.png" src="attachments/01810f0e-a49c-4e71-943f-8623056862dc">
<img width="195" alt="Screenshot 2025-08-21 at 9.48.48 AM.png" src="attachments/f183768c-1c3d-46c7-8d74-9e79a845284b">
<img width="222" alt="Screenshot 2025-08-21 at 9.49.16 AM.png" src="attachments/a0bc90bf-d408-4a85-b73f-e5af3aa7fc11"><img width="533" alt="Screenshot 2025-08-21 at 9.49.42 AM.png" src="attachments/da88880a-925f-419e-b977-cbed819820f0">
## How to Test
1. **Local Development:**
```bash
npm run dev
# Visit http://localhost:3000 to see LogoWall on main page
```
2. **Storybook Testing:**
```bash
npm run storybook:local
# Visit http://localhost:6006 and navigate to Components/LogoWall
```
3. **Responsive Testing:**
- Resize browser window to test all breakpoints
- Mobile (320-429px): 3×2 grid layout
- SM (430-639px): 2×3 grid with 48px row gap
- MD (640-1023px): Single row with space-between
- LG (1024-1440px): Larger logos with 64px horizontal padding
- XL (1440px+): Largest logos with 160px horizontal padding
4. **Animation Testing:**
- Verify fade-in effect on component mount
- Test hover interactions on individual logos
- Check smooth transitions (500ms duration)
5. **Accessibility Testing:**
- Verify alt text for all logos
- Test keyboard navigation
- Check screen reader compatibility
## Notes
- **Image Optimization**: Uses Next.js Image component with `unoptimized` prop for local images
- **Performance**: Implements lazy loading and priority loading for above-the-fold content
- **Browser Support**: Modern browsers with CSS Grid support
- **Future Enhancements**: Ready for CMS integration and dynamic logo management
- **Storybook Workflow**: Dual configuration supports both local development and GitHub Pages deployment
- **No Breaking Changes**: Component is additive and doesn't affect existing functionality
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 LogoWall Component with Responsive Design and Animations
Overview
This PR implements a comprehensive LogoWall component system for the Community Rule marketing website. The component displays partner organization logos in a responsive grid layout that adapts across all breakpoints, with smooth animations and proper loading states. This component is essential for building trust and credibility by showcasing partner organizations, cooperatives, mutual aid groups, and other community organizations that use or endorse Community Rule.
Changes
New LogoWall Component (
app/components/LogoWall.js)Storybook Integration (
stories/LogoWall.stories.js)Project Configuration Updates
.gitignoreto prevent configuration file changes during developmentDesign System Integration
--spacing-scale-*)--color-content-default-secondary)Screenshots
How to Test
Local Development:
Storybook Testing:
Responsive Testing:
Animation Testing:
Accessibility Testing:
Notes
unoptimizedprop for local images