# Blog Slider - Clean Card Design - Quick Reference

## 🎨 Visual Design

### Card Layout (Top to Bottom)
```
Image (200px height)
    ↓
Date Badge (top-right corner)
    ↓
Title
    ↓
Excerpt (2 lines max)
    ↓
Author + Comments (meta)
    ↓
Read More Button
```

### Color Scheme
- **Background**: Dark navy gradient
- **Cards**: Semi-transparent white with blur effect
- **Primary Color**: Orange (#ff5e14)
- **Text**: White and light gray
- **Accents**: Orange gradients

## 📱 Responsive Breakpoints

| Screen Size | Cards Shown | Container | Padding |
|-------------|------------|-----------|---------|
| 1200px+ | 3 cards | Full width | 24px gap |
| 768-1199px | 2 cards | Full width | 20px gap |
| 480-767px | 1 card | Full width | 16px gap |
| <480px | 1 card | Full width | 16px gap |

## 🎯 CSS Classes

### Card Component
```css
.blog-showcase-section      /* Main container */
.blog-card                  /* Individual card */
.blog-card-image            /* Image wrapper */
.blog-card-content          /* Content wrapper */
.blog-card-title            /* Title styling */
.blog-card-excerpt          /* Excerpt text */
.blog-card-meta             /* Author/comments info */
.blog-card-link             /* Read More button */
.blog-card-date             /* Date badge */
```

### Swiper Classes
```css
.blog-slider-full           /* Swiper container */
.blog-cards-wrapper         /* Wrapper container */
.swiper-slide               /* Individual slides */
.swiper-button-prev/next    /* Navigation arrows */
.swiper-pagination-bullet   /* Pagination dots */
```

## ⚙️ Customization Guide

### Change Card Height
```css
.blog-card-image {
    height: 200px; /* Change this value */
}
```

### Change Hover Animation
```css
.blog-card:hover {
    transform: translateY(-8px); /* Adjust lift distance */
}
```

### Change Autoplay Speed
Find in JavaScript and modify:
```javascript
autoplay: {
    delay: 5000, // milliseconds (5 seconds)
}
```

### Change Cards Per Row
In JavaScript breakpoints:
```javascript
1200: {
    slidesPerView: 3, /* Change this number */
}
```

### Change Primary Color
Update CSS variables:
```css
:root {
    --primary: #ff5e14; /* Change orange color */
}
```

## 📊 Card Display Settings

### Image Aspect Ratio
Currently set to 200px fixed height with cover fit.
To change: Modify `.blog-card-image { height: XXpx; }`

### Excerpt Length
Currently shows first 100 characters.
To change in PHP: `substr(..., 0, 100)` → change 100 to desired length

### Number of Cards Shown
Currently shows 10 latest blog posts.
To change in PHP: `LIMIT 10` → change 10 to desired number

### Autoplay Duration
Currently 5 seconds.
To change: Modify `delay: 5000` in JavaScript

## 🔧 Features

### ✅ Enabled
- Autoplay carousel (5-second rotation)
- Navigation arrows (prev/next buttons)
- Pagination dots (clickable indicators)
- Touch swipe support (mobile)
- Keyboard arrow navigation
- Hover pause (desktop only)
- Smooth animations (0.3-0.4s duration)
- Database dynamic content
- Responsive design (all devices)
- XSS protection (htmlspecialchars)

### ❌ Disabled
- 3D flip animation (removed)
- Mobile click-to-flip (removed)
- Complex hover transforms (removed)

## 🚀 Performance Notes

- CSS: Self-contained (no external files)
- JavaScript: Minimal overhead
- Images: Optimized with object-fit: cover
- Animations: GPU-accelerated (transform + opacity)
- Load Time: ~2-3 seconds for 10 blog images

## 🐛 Troubleshooting

### Cards not showing
- Check database connection in includes/db.php
- Verify blog_posts table exists and has published records
- Check featured_image paths are correct

### Images not displaying
- Verify featured_image column contains valid file paths
- Check assets/images/default-blog.png exists
- Inspect browser console for 404 errors

### Autoplay not working
- Check JavaScript is loaded (assets/vendor/swiper files)
- Verify Swiper.js version compatibility
- Check disableOnInteraction is set to false

### Cards overlapping
- Check .blog-card has proper width set
- Verify swiper-slide width calculation
- Check container has enough width

### Navigation buttons not visible
- Verify .swiper-button-prev/next have correct positioning
- Check z-index is sufficient (z-index: 10)
- Ensure buttons aren't hidden by parent overflow

## 📋 Admin Dashboard Integration

### Adding New Blog Post
1. Go to Admin Dashboard
2. Navigate to Blog Management
3. Click "Add New Post"
4. Fill in: Title, Content, Featured Image, Author
5. Set Status to "Published"
6. Click Save

Changes appear automatically on homepage!

### Editing Blog Post
1. Find post in Blog Management
2. Update desired fields
3. Status must be "Published" to display
4. Changes appear immediately

### Setting Featured Image
- Image appears at top of card
- Recommended size: 600x400px or larger
- Formats: JPG, PNG, WebP
- If not set: Uses default-blog.png

### Comment Count
- Displays in meta information
- Source: comments_count field in database
- Updates automatically when comments added

## 🎓 Code Examples

### Custom Excerpt Length
```php
$maxChars = 150; // Change to desired length
$blogExcerpt = strlen($blog['content']) > $maxChars 
    ? substr(htmlspecialchars(strip_tags($blog['content'])), 0, $maxChars) . '...' 
    : htmlspecialchars(strip_tags($blog['content']));
```

### Custom Card Styling
```css
.blog-card {
    background: YOUR_COLOR;
    border: YOUR_BORDER;
    border-radius: YOUR_RADIUS;
}

.blog-card:hover {
    transform: translateY(-YOUR_DISTANCE);
    box-shadow: YOUR_SHADOW;
}
```

### Custom Autoplay Speed
```javascript
autoplay: {
    delay: 3000, // 3 seconds instead of 5
    disableOnInteraction: false
}
```

## 📚 Related Files

- Main: `/index.php` (lines 2318-3708)
- Database: `/includes/db.php`
- Blog Table: `blog_posts`
- Documentation: `/BLOG_REDESIGN_SUMMARY.md`
- Previous Design: See Git history (flip card version)

## ✨ Next Steps

1. **Test on all devices** - Desktop, tablet, mobile
2. **Verify database content** - Add a test blog post
3. **Check images** - Ensure all featured images display
4. **Monitor performance** - Check load time and animations
5. **Gather feedback** - Ask users if they like the new design

---

**Status**: ✅ Ready to Deploy
**Last Updated**: 2024
**Version**: 2.0 (Clean Card Design)
