feat: add ScrollCTA.tsx

FOLLOW_SYSTEM.md

@@ -0,0 +1,230 @@
+# Follow System Implementation
+
+## Overview
+
+A comprehensive follow functionality system for the AlienFlowSpace DAO platform, featuring modern design with accessibility compliance and modular architecture.
+
+## Design Specifications
+
+### Typography
+- **Headers**: Orbitron font for techno-style aesthetics
+- **Body Text**: Exo font for readability
+- **Special Elements**: Nasalization font for buttons and UI elements
+
+### Color Palette (WCAG AA Compliant)
+- **Primary**: Gold (`#F0D882`) - Follow actions
+- **Secondary**: Green (`#22C55E`) - Following status
+- **Accent**: Blue (`#3B82F6`) - Information and badges
+- **Warning**: Orange (`#F59E0B`) - Alerts
+- **Error**: Red (`#EF4444`) - Unfollow actions
+- **Success**: Success Green (`#10B981`) - Verified status
+- **Info**: Info Blue (`#3B82F6`) - Additional information
+
+### Modular Scale
+- **xs**: 0.75rem (12px)
+- **sm**: 0.875rem (14px)
+- **base**: 1rem (16px)
+- **lg**: 1.125rem (18px)
+- **xl**: 1.25rem (20px)
+- **2xl**: 1.5rem (24px)
+- **3xl**: 1.875rem (30px)
+- **4xl**: 2.25rem (36px)
+- **5xl**: 3rem (48px)
+- **6xl**: 3.75rem (60px)
+
+## Components
+
+### 1. FollowButton
+Interactive button component for follow/unfollow actions.
+
+**Features:**
+- Optimistic updates
+- Loading states
+- Multiple variants (default, compact, outline)
+- Multiple sizes (sm, md, lg)
+- Smooth animations
+- Accessibility compliant
+
+**Usage:**
+```tsx
+import FollowButton from '@/components/FollowButton';
+
+<FollowButton
+  user={user}
+  variant="default"
+  size="md"
+  onFollowChange={(isFollowing) => console.log('Follow status:', isFollowing)}
+/>
+```
+
+### 2. UserCard
+Display component for user profiles with follow functionality.
+
+**Features:**
+- Multiple variants (default, compact, detailed)
+- Avatar with fallback
+- Verification badges
+- Social links
+- Follow statistics
+- Responsive design
+
+**Usage:**
+```tsx
+import UserCard from '@/components/UserCard';
+
+<UserCard
+  user={user}
+  variant="detailed"
+  showFollowButton={true}
+/>
+```
+
+### 3. FollowStats
+Statistics display component for follow metrics.
+
+**Features:**
+- Followers count
+- Following count
+- Mutual connections
+- Progress indicators
+- Multiple variants
+
+**Usage:**
+```tsx
+import FollowStats from '@/components/FollowStats';
+
+<FollowStats
+  stats={followStats}
+  variant="detailed"
+/>
+```
+
+## Hooks
+
+### useFollow
+Custom hook for managing follow state and actions.
+
+**Features:**
+- State management
+- Optimistic updates
+- Error handling
+- Loading states
+
+**Usage:**
+```tsx
+import { useFollow } from '@/hooks/useFollow';
+
+const { isFollowing, isLoading, toggleFollow } = useFollow(initialFollowing);
+```
+
+## Types
+
+### User Interface
+```typescript
+interface User {
+  id: string;
+  username: string;
+  displayName: string;
+  avatar?: string;
+  bio?: string;
+  location?: string;
+  website?: string;
+  joinedAt: Date;
+  followersCount: number;
+  followingCount: number;
+  isVerified: boolean;
+  badges: Badge[];
+  socialLinks: SocialLink[];
+}
+```
+
+### Follow Statistics
+```typescript
+interface FollowStats {
+  followersCount: number;
+  followingCount: number;
+  mutualCount: number;
+}
+```
+
+## Demo Page
+
+Access the demo at `/follow-demo` to see all components in action with sample data.
+
+**Features:**
+- Interactive controls
+- Multiple card variants
+- Statistics overview
+- Design features showcase
+- Responsive layout
+
+## Accessibility Features
+
+1. **WCAG AA Compliance**: All colors meet contrast requirements
+2. **Keyboard Navigation**: Full keyboard support
+3. **Screen Reader Support**: Proper ARIA labels and semantic HTML
+4. **Focus Management**: Clear focus indicators
+5. **Loading States**: Clear feedback for async operations
+
+## Performance Optimizations
+
+1. **Optimistic Updates**: Immediate UI feedback
+2. **Debounced Actions**: Prevent rapid-fire requests
+3. **Lazy Loading**: Components load on demand
+4. **Memoization**: React.memo for expensive components
+5. **Efficient Re-renders**: Minimal state updates
+
+## Future Enhancements
+
+1. **Real-time Updates**: WebSocket integration
+2. **Follow Suggestions**: AI-powered recommendations
+3. **Follow Lists**: Curated lists and categories
+4. **Analytics**: Follow engagement metrics
+5. **Notifications**: Follow event notifications
+
+## Installation
+
+The follow system is already integrated into the AlienFlowSpace DAO platform. No additional installation required.
+
+## Usage Examples
+
+### Basic Follow Button
+```tsx
+<FollowButton user={user} />
+```
+
+### Compact User Card
+```tsx
+<UserCard user={user} variant="compact" />
+```
+
+### Detailed Statistics
+```tsx
+<FollowStats stats={stats} variant="detailed" />
+```
+
+### Custom Styling
+```tsx
+<FollowButton
+  user={user}
+  className="custom-follow-button"
+  variant="outline"
+  size="lg"
+/>
+```
+
+## Contributing
+
+When contributing to the follow system:
+
+1. Maintain WCAG AA compliance
+2. Follow the established modular scale
+3. Use Orbitron for headers
+4. Test with screen readers
+5. Ensure responsive design
+6. Add proper TypeScript types
+7. Include accessibility tests
+
+## License
+
+This follow system is part of the AlienFlowSpace DAO platform and follows the same licensing terms.