Add AskOrganizer Component with Analytics and Variant Support
Overview
This PR introduces the AskOrganizer component that provides clear pathways for user inquiries throughout the Community Rule platform. The component serves as a critical conversion point with prominent call-to-action elements and comprehensive analytics tracking.
Components Added/Modified
New Components
AskOrganizer - Main contact section component with responsive design and variant support
ContentLockup "ask" variant - Simplified content lockup for contact sections
Enhanced Components
ContentLockup - Added "ask" variant with alignment support and responsive typography
Personalized messaging: Context-aware content based on user type
A/B testing: Framework for testing different CTA messaging
Advanced analytics: Conversion tracking and user journey analysis
# Add AskOrganizer Component with Analytics and Variant Support
## Overview
This PR introduces the AskOrganizer component that provides clear pathways for user inquiries throughout the Community Rule platform. The component serves as a critical conversion point with prominent call-to-action elements and comprehensive analytics tracking.
## Components Added/Modified
### New Components
- **`AskOrganizer`** - Main contact section component with responsive design and variant support
- **ContentLockup "ask" variant** - Simplified content lockup for contact sections
### Enhanced Components
- **`ContentLockup`** - Added "ask" variant with alignment support and responsive typography
## Key Features
### AskOrganizer Component
- **Responsive layout**: 32px padding (mobile) → 96px/64px (md+)
- **Variant support**: Centered, left-aligned, and compact layouts
- **Analytics integration**: Comprehensive event tracking for contact interactions
- **Accessibility**: Full keyboard navigation and screen reader support
- **Interactive states**: Hover, focus, and active button states
### ContentLockup Ask Variant
- **Typography**: Bricolage 500 36px→44px→52px title, Inter 400 18px→24px subtitle
- **Alignment**: Support for center and left alignment
- **Simplified structure**: Title and subtitle only, no description or decorative elements
- **8px gap**: Consistent spacing between elements
### Analytics Tracking
- **Event data**: Component name, variant, button text, href, and timestamp
- **Google Analytics**: Automatic gtag event tracking (if available)
- **Custom callbacks**: Flexible analytics integration via onContactClick prop
## Screenshots
<img width="318" alt="Screenshot 2025-08-27 at 11.08.02 AM.png" src="attachments/4d5b453d-9971-4f6f-b178-96b227433d11">
<img width="633" alt="Screenshot 2025-08-27 at 11.08.25 AM.png" src="attachments/00cea634-3511-48d1-87f0-7e90e9e728ab">
<img width="1045" alt="Screenshot 2025-08-27 at 11.09.17 AM.png" src="attachments/4ad431ce-c57e-43e7-ac76-2001ed08a0a2">
## Technical Implementation
### Responsive Design
- **Mobile**: 32px padding, 40px gap, large button
- **Tablet (md)**: 96px top/bottom, 64px left/right padding, 40px gap
- **Desktop (xl)**: 52px title, xlarge button with enhanced padding
### Variant System
- **Centered**: Default layout with center-aligned text and button
- **Left-aligned**: Left-aligned text and button for different contexts
- **Compact**: Reduced padding (16px→32px) and gap (20px) for tighter layouts
### Accessibility Features
- **Semantic HTML**: Proper section, heading, and button structure
- **ARIA labels**: Enhanced button labels with context
- **Keyboard navigation**: Full tab and enter/space key support
- **Focus management**: Clear focus indicators with brand colors
- **Screen reader support**: Proper heading hierarchy and descriptions
## Testing
- **Component testing**: Responsive behavior across all breakpoints
- **Analytics testing**: Event tracking verification in Storybook
- **Accessibility testing**: Keyboard navigation and screen reader compatibility
- **Visual testing**: Variant differences and responsive typography
## Storybook Stories
- **Default**: Centered variant with analytics logging
- **LeftAligned**: Left-aligned text and button layout
- **Compact**: Reduced spacing variant
- **ContentLockup Ask**: Showcases the ask variant styling
## Future Enhancements
- **Contact form integration**: Direct form embedding within component
- **Multiple contact methods**: Email, chat, phone options
- **Personalized messaging**: Context-aware content based on user type
- **A/B testing**: Framework for testing different CTA messaging
- **Advanced analytics**: Conversion tracking and user journey analysis
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 AskOrganizer Component with Analytics and Variant Support
Overview
This PR introduces the AskOrganizer component that provides clear pathways for user inquiries throughout the Community Rule platform. The component serves as a critical conversion point with prominent call-to-action elements and comprehensive analytics tracking.
Components Added/Modified
New Components
AskOrganizer- Main contact section component with responsive design and variant supportEnhanced Components
ContentLockup- Added "ask" variant with alignment support and responsive typographyKey Features
AskOrganizer Component
ContentLockup Ask Variant
Analytics Tracking
Screenshots
Technical Implementation
Responsive Design
Variant System
Accessibility Features
Testing
Storybook Stories
Future Enhancements