Logo Wall #9

2025-08-21T15:50:12Z

an.di commented

2025-08-21 15:50:12 +00:00

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

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

Screenshot 2025-08-21 at 9.48.15 AM.png

32 KiB

Screenshot 2025-08-21 at 9.48.48 AM.png

22 KiB

Screenshot 2025-08-21 at 9.49.16 AM.png

20 KiB

Screenshot 2025-08-21 at 9.49.42 AM.png

31 KiB

an.di added 8 commits 2025-08-21 15:50:12 +00:00

Logo Wall xsm breakpoint c903821b57

Logo Wall sm breakpoint cb466a87b3

Logo Wall md breakpoint 93b5c0ac1a