# Blog Carousel Implementation

## Overview
An auto-rotating blog carousel component that displays 5 recent blog posts in the hero section with smooth transitions and enhanced UX features.

## Features

### 1. Auto-Rotation
- Automatically cycles through 5 recent blog posts
- 5-second interval between transitions
- Configurable rotation interval via `autoRotateInterval` prop

### 2. Smooth Transitions
- 700ms fade transition between blog posts
- Smooth opacity changes for both images and content
- CSS transitions with ease-in-out timing function

### 3. Pause on Hover
- Carousel pauses when user hovers over it
- Resumes auto-rotation when mouse leaves
- Improves user experience by allowing time to read content

### 4. Navigation Indicators
- Dot indicators show current position in carousel
- Clickable dots allow manual navigation
- Active dot is highlighted in crimson red (#E60023)
- Inactive dots are gray with hover effect

### 5. Responsive Design
- Maintains 16:9 aspect ratio for images
- Responsive text sizing (2xl → 3xl → 4xl)
- Responsive padding (6 → 8)
- Mobile-friendly touch interactions

### 6. Design System Compliance
- Uses existing color scheme:
  - Background: #202026
  - Hover glow: rgba(230,0,35,0.3)
  - Accent: #E60023
  - Text: white and #B8B8C0
- Follows existing card styling patterns
- Consistent with ArticleCard component design

## Component Structure

### BlogCarousel.tsx
Main carousel component with:
- State management for current index and pause state
- Auto-rotation logic with useEffect
- Image error handling
- Smooth fade transitions
- Navigation dots

### HeroSection.tsx
Updated to use BlogCarousel:
- Simplified props (now accepts `recentArticles` array)
- Removed old featured article logic
- Cleaner component structure

### app/page.tsx
Updated data fetching:
- Fetches 5 recent articles using `getLatestArticles(5)`
- Passes articles to HeroSection component

## Usage

```tsx
import { BlogCarousel } from '@/components/home/BlogCarousel';

// Basic usage with default 5-second interval
<BlogCarousel articles={recentArticles} />

// Custom interval (e.g., 3 seconds)
<BlogCarousel articles={recentArticles} autoRotateInterval={3000} />
```

## Technical Details

### State Management
- `currentIndex`: Tracks which article is currently displayed
- `isPaused`: Controls auto-rotation pause state
- `imageErrors`: Tracks image loading errors per article
- `intervalRef`: Manages the auto-rotation interval

### Performance Optimizations
- First image loads with `priority` flag for LCP optimization
- Subsequent images load lazily
- Interval cleanup on component unmount
- Efficient re-renders with proper dependency arrays

### Accessibility
- Semantic HTML structure
- ARIA labels on navigation buttons
- Keyboard-accessible dot navigation
- Alt text on images

## Browser Compatibility
- Modern browsers with CSS transitions support
- Graceful degradation for older browsers
- No external dependencies beyond React and Next.js

## Future Enhancements
Potential improvements:
- Swipe gestures for mobile devices
- Keyboard arrow navigation
- Progress bar showing time until next rotation
- Animation direction control (left/right slide)
- Preloading next image for smoother transitions
