upload

DOCS/STYLE_PREVIEW_IMAGES.md

@@ -0,0 +1,101 @@
+# 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