174 lines
4.6 KiB
Markdown
174 lines
4.6 KiB
Markdown
# Social Connect Section - Documentation
|
|
|
|
## Overview
|
|
A highly creative and interactive section showcasing social media platform integration with advanced animations and user interactions.
|
|
|
|
## Features
|
|
|
|
### 🎨 Visual Design
|
|
- **Pink-to-Blue Gradient Theme**: Consistent with the new brand colors
|
|
- **Floating Animated Orbs**: Three gradient orbs floating in the background
|
|
- **Glassmorphism Effects**: Modern card design with blur effects
|
|
- **Connection Line Animations**: Animated SVG paths showing connectivity
|
|
|
|
### ✨ Animations & Effects
|
|
|
|
#### Card Animations
|
|
1. **Reveal Animation**: Cards appear with staggered timing (0-1s delays)
|
|
2. **Hover Effects**:
|
|
- Lift up 10px with scale 1.05
|
|
- Pink border highlight
|
|
- Gradient background reveal
|
|
- Icon rotation and scale
|
|
3. **Selection State**:
|
|
- Pink-to-blue gradient background
|
|
- Checkmark badge with pop animation
|
|
- Glowing border effect with pulse
|
|
- Persistent scale increase
|
|
|
|
#### Background Animations
|
|
- **Floating Orbs**: Three orbs moving in infinite loops (20s duration)
|
|
- **Badge Shine**: Shimmer effect across the badge (3s loop)
|
|
- **Rotating Icon**: Connection icon rotates continuously
|
|
- **Shimmer Effect**: Stats bar has a moving shine effect
|
|
|
|
#### Interactive Elements
|
|
- **Ripple Effect**: Click creates expanding ripple
|
|
- **Glow Pulse**: Selected cards have pulsing glow
|
|
- **Stats Counter**: Real-time update when platforms are selected
|
|
|
|
### 🔧 Technical Implementation
|
|
|
|
#### Component Structure
|
|
```
|
|
SocialConnect/
|
|
├── Header (Badge, Title, Subtitle)
|
|
├── Platforms Container
|
|
│ ├── Connect Text
|
|
│ └── Platform Grid (11 cards)
|
|
├── Stats Bar (3 stats)
|
|
└── CTA Section
|
|
```
|
|
|
|
#### State Management
|
|
- `hoveredIndex`: Tracks which card is being hovered
|
|
- `selectedPlatforms`: Array of selected platform indices
|
|
- Click handler toggles selection state
|
|
|
|
#### Platform Data
|
|
11 social platforms supported:
|
|
- Bluesky, Facebook, Google Business
|
|
- Instagram, LinkedIn, Mastodon
|
|
- Pinterest, Threads, TikTok
|
|
- X (Twitter), YouTube
|
|
|
|
### 🎯 Interactive Features
|
|
|
|
#### Click to Select
|
|
- Click any platform card to select/deselect
|
|
- Selected cards show gradient background
|
|
- Checkmark appears in top-right corner
|
|
- Stats counter updates in real-time
|
|
|
|
#### Hover States
|
|
- Cards lift and scale on hover
|
|
- Border changes to primary pink
|
|
- Icon scales and rotates slightly
|
|
- Gradient background fades in
|
|
|
|
#### Real-time Stats
|
|
- **Platforms Supported**: Shows 11+
|
|
- **Selected Networks**: Updates dynamically based on user selection
|
|
- **Easy Integration**: Shows "1-Click"
|
|
|
|
### 📱 Responsive Design
|
|
|
|
#### Desktop (>768px)
|
|
- 5 columns grid layout
|
|
- Full animations enabled
|
|
- Horizontal stats bar
|
|
- Side-by-side CTA layout
|
|
|
|
#### Mobile (<768px)
|
|
- 3 columns grid layout
|
|
- Reduced padding
|
|
- Vertical stats bar
|
|
- Stacked CTA buttons
|
|
|
|
### 🎨 Color Scheme
|
|
|
|
#### Gradients Used
|
|
1. **Primary**: `#ec4899 → #3b82f6` (Pink to Blue)
|
|
2. **Background Orbs**: Radial gradients with pink, blue, purple
|
|
3. **Card Selection**: Linear gradient pink to blue
|
|
4. **Stats Numbers**: Gradient text effect
|
|
|
|
#### Hover Colors
|
|
- Border: `var(--primary)` (#ec4899)
|
|
- Shadow: `rgba(236, 72, 153, 0.2)`
|
|
- Glow: Pink-blue gradient with blur
|
|
|
|
### 🚀 Performance Optimizations
|
|
|
|
1. **CSS Animations**: Hardware-accelerated transforms
|
|
2. **Staggered Reveals**: Prevents layout shift
|
|
3. **Conditional Rendering**: Checkmarks only when selected
|
|
4. **Optimized SVG**: Minimal path complexity
|
|
|
|
### 📊 User Engagement Features
|
|
|
|
1. **Visual Feedback**: Immediate response to all interactions
|
|
2. **Progress Tracking**: Stats show selection count
|
|
3. **Clear CTAs**: Prominent action buttons
|
|
4. **Social Proof**: Platform count badge
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import SocialConnect from '@/components/SocialConnect';
|
|
|
|
// In your page
|
|
<SocialConnect />
|
|
```
|
|
|
|
## Customization
|
|
|
|
### Adding New Platforms
|
|
Edit the `socialPlatforms` array in `SocialConnect.tsx`:
|
|
|
|
```tsx
|
|
{
|
|
name: 'Platform Name',
|
|
icon: '🎯',
|
|
color: '#hexcolor',
|
|
delay: 1.1
|
|
}
|
|
```
|
|
|
|
### Adjusting Animations
|
|
Modify animation durations in `SocialConnect.module.css`:
|
|
- `floatOrb`: 20s (background orbs)
|
|
- `cardReveal`: 0.6s (card appearance)
|
|
- `glowPulse`: 2s (selection glow)
|
|
|
|
### Changing Colors
|
|
Update CSS variables in the component or use theme colors:
|
|
- `--primary`: Main pink color
|
|
- `--secondary`: Main blue color
|
|
- `--platform-color`: Individual platform colors
|
|
|
|
## Browser Compatibility
|
|
|
|
✅ Chrome/Edge (latest)
|
|
✅ Firefox (latest)
|
|
✅ Safari (latest)
|
|
✅ Mobile browsers
|
|
|
|
**Note**: Uses modern CSS features like `backdrop-filter`, CSS Grid, and CSS animations.
|
|
|
|
---
|
|
|
|
**Created**: December 11, 2025
|
|
**Version**: 1.0
|
|
**Theme**: Pink & Blue Gradient
|