# Style Preview Images

## Overview
The StylePreviewPage requires preview images for each of the 4 website styles. These images will be displayed as screenshots showing what each style looks like.

## Required Images

Create the following image files and place them in: `frontend/public/dist/img/`

### 1. **style-preview-unified.jpg**
- **Path:** `/dist/img/style-preview-unified.jpg`
- **Description:** Screenshot of the Unified style homepage
- **Recommended size:** 1920x1080 pixels (16:9 aspect ratio)
- **What to show:**
  - Grid layout for articles
  - Next match panel
  - Three-column content layout
  - Sponsors section
  - Use FC Bizoni UH data for the screenshot

### 2. **style-preview-magazine.jpg**
- **Path:** `/dist/img/style-preview-magazine.jpg`
- **Description:** Screenshot of the Magazine style homepage
- **Recommended size:** 1920x1080 pixels (16:9 aspect ratio)
- **What to show:**
  - Colorful club stripes at the top
  - Magazine-style header
  - Cards with varying sizes
  - Modern navigation
  - Use FC Bizoni UH data for the screenshot

### 3. **style-preview-pro.jpg**
- **Path:** `/dist/img/style-preview-pro.jpg`
- **Description:** Screenshot of the Pro style homepage
- **Recommended size:** 1920x1080 pixels (16:9 aspect ratio)
- **What to show:**
  - Fullscreen hero image/slideshow
  - Premium aesthetic
  - Horizontal scrollers for content
  - Large visual elements
  - Use FC Bizoni UH data for the screenshot

### 4. **style-preview-edge.jpg**
- **Path:** `/dist/img/style-preview-edge.jpg`
- **Description:** Screenshot of the Edge style homepage
- **Recommended size:** 1920x1080 pixels (16:9 aspect ratio)
- **What to show:**
  - Full-width layout
  - Minimalist design
  - Modern tiles/cards
  - Sticky navigation elements
  - Use FC Bizoni UH data for the screenshot

## How to Create These Images

### Option 1: Manual Screenshots
1. Set up your local development environment with FC Bizoni UH club data:
   - Club ID: `441d3783-06aa-436a-b438-359300ee0371`
   - Club Name: FC Bizoni UH
   - Social links: YouTube, Instagram, Facebook, Zonerama (see StylePreviewPage.tsx for links)

2. For each style:
   - Go to Settings Admin Page
   - Change the frontpage style to the target style (unified/magazine/pro/edge)
   - Save settings
   - Navigate to homepage
   - Take a full-page screenshot (use browser DevTools or tools like Fireshot)
   - Resize/crop to 1920x1080 pixels
   - Save with appropriate filename

### Option 2: Design Mockups
- Create design mockups in Figma/Photoshop showing each style
- Export as JPG images at 1920x1080 pixels
- Ensure they accurately represent the actual style's key features

## Fallback Behavior
If images are not available, the StylePreviewPage will show:
- A gray placeholder box
- The style name in large text
- "Náhled bude přidán" message

Users can still use the "Živý náhled" button to see the actual styles in action.

## File Format
- Format: JPG or PNG
- JPG recommended for smaller file sizes
- Quality: 80-90% for JPG to balance quality and size
- Max file size: ~500KB per image recommended

## Testing
After adding the images:
1. Navigate to `/setup/styl` or click "Náhled stylů" button
2. Verify all 4 preview images load correctly
3. Check aspect ratio and clarity
4. Test on mobile to ensure responsive display

## Notes
- Images should use actual FC Bizoni UH branding colors
- Include realistic content (articles, matches, etc.)
- Make sure navigation and key elements are visible
- Images will be displayed in a 16:9 aspect ratio box with object-fit cover