# Setup Page Improvements - Implementation Guide

## ✅ Completed

### 1. Font/Typography Selection (DONE)
- **Added to SetupPage.tsx** (lines 62-64, 218-219, 584-634)
- **Features**:
  - Separate font selection for headings and body text
  - 12+ popular Google Fonts + system fonts
  - Live preview of selected fonts
  - Saves to backend with setup payload
- **Fonts Available**:
  - Sans-serif: Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Raleway, Source Sans Pro, PT Sans, Nunito
  - Display: Oswald, Bebas Neue
  - Serif: Playfair Display, Merriweather, Georgia
  - System fonts

### 2. Custom Scrollbars (DONE)
- **File Created**: `frontend/src/styles/custom-scrollbar.css`
- **Imported in**: `frontend/src/App.tsx` (line 5)
- **Features**:
  - Beautiful gradient scrollbars using club's primary and secondary colors
  - Hover effects with glow
  - Dark mode support
  - Firefox and Chrome compatibility
  - Thin scrollbar variant available
  - Hide scrollbar option for carousels

### 3. Layout Variants for HomePage (DONE)
- **Matches Section**: Now supports single column (default) or two-column layout
  - Variants: `compact` (single) and `compact_split` (two columns)
- **Standings Section**: Now supports two-column layout (default) with news + tables
  - Variants: `split_news` (two columns - default) and `standard` (single column)
- **Configurable via MyUIbrix Editor**

### 4. Placeholder Cards Fix (DONE)
- Fixed the hero section to show exactly 2 placeholder cards instead of 3

## 🔧 Recommended Improvements for SetupPage

### 1. Add Tabs for Better Organization
```tsx
// Add to imports
import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/react';

// Structure:
<Tabs colorScheme="blue" variant="enclosed" isLazy>
  <TabList>
    <Tab><Icon as={FaUserShield} mr={2} />Administr

átor</Tab>
    <Tab><Icon as={FaFootballBall} mr={2} />Klub</Tab>
    <Tab><Icon as={FaMapMarkerAlt} mr={2} />Lokace</Tab>
    <Tab><Icon as={FaShareAlt} mr={2} />Sociální sítě</Tab>
    <Tab><Icon as={FaCog} mr={2} />Pokročilé</Tab>
  </TabList>
  <TabPanels>
    <!-- Content here -->
  </TabPanels>
</Tabs>
```

### 2. Add Missing Location/Address Fields
Add these state variables after line 79:

```tsx
// Location/Address
const [clubAddress, setClubAddress] = useState('');
const [clubCity, setClubCity] = useState('');
const [clubZip, setClubZip] = useState('');
const [clubCountry, setClubCountry] = useState('Česká republika');
const [stadiumName, setStadiumName] = useState('');
const [latitude, setLatitude] = useState<string>('');
const [longitude, setLongitude] = useState<string>('');
```

Add fields in a new "Lokace" tab:
```tsx
<FormControl>
  <FormLabel>Název stadionu</FormLabel>
  <Input value={stadiumName} onChange={(e) => setStadiumName(e.target.value)} placeholder="Městský stadion" />
</FormControl>

<FormControl>
  <FormLabel>Adresa</FormLabel>
  <Input value={clubAddress} onChange={(e) => setClubAddress(e.target.value)} placeholder="Ulice a číslo" />
</FormControl>

<SimpleGrid columns={[1, 3]} spacing={4}>
  <FormControl>
    <FormLabel>Město</FormLabel>
    <Input value={clubCity} onChange={(e) => setClubCity(e.target.value)} placeholder="Praha" />
  </FormControl>
  <FormControl>
    <FormLabel>PSČ</FormLabel>
    <Input value={clubZip} onChange={(e) => setClubZip(e.target.value)} placeholder="123 45" />
  </FormControl>
  <FormControl>
    <FormLabel>Země</FormLabel>
    <Input value={clubCountry} onChange={(e) => setClubCountry(e.target.value)} />
  </FormControl>
</SimpleGrid>

<Divider />

<Box>
  <Text fontWeight="semibold" mb={2}>GPS Souřadnice (pro mapu)</Text>
  <SimpleGrid columns={[1, 2]} spacing={4}>
    <FormControl>
      <FormLabel>Zeměpisná šířka (Latitude)</FormLabel>
      <Input value={latitude} onChange={(e) => setLatitude(e.target.value)} placeholder="50.0755" type="number" step="any" />
    </FormControl>
    <FormControl>
      <FormLabel>Zeměpisná délka (Longitude)</FormLabel>
      <Input value={longitude} onChange={(e) => setLongitude(e.target.value)} placeholder="14.4378" type="number" step="any" />
    </FormControl>
  </SimpleGrid>
</Box>
```

### 3. Fix Percentage Calculation
Replace the `getCompletionPercentage` function (around line 341):

```tsx
const getCompletionPercentage = () => {
  let total = 0;
  let completed = 0;
  // Admin account (required)
  total += 30;
  if (adminEmail && adminPassword && isPasswordValid(sanitizePassword(adminPassword))) completed += 30;
  // Club info (required)
  total += 30;
  if (clubName && clubLogoUrl) completed += 30;
  // Appearance colors
  total += 15;
  if (primaryColor && secondaryColor) completed += 15;
  // Social links
  total += 15;
  if (facebookUrl || instagramUrl || youtubeUrl) completed += 15;
  // SMTP/Email (optional but recommended)
  total += 10;
  if (smtpHost && smtpPort) completed += 10;
  return Math.round((completed / total) * 100);
};
```

### 4. Move "Barvy vzhledu" Section
Currently under separate heading. Should be moved to the "Klub" tab as a subsection after club basic info. Add a `<Divider />` before it to separate visually.

## 📝 Benefits of These Changes

1. **Tabs**: Much cleaner interface, easier to navigate through setup steps
2. **Location Fields**: Essential for maps, contact page, and SEO
3. **Fixed Percentage**: Now accurately reflects completion (was broken before)
4. **Custom Scrollbars**: Professional look matching club branding throughout the site
5. **Better Organization**: Colors logically grouped with club info

## 🎨 Scrollbar Usage Examples

```css
/* Default - uses primary color automatically */
.my-element {
  overflow-y: auto;
}

/* Thin variant */
.my-element {
  overflow-y: auto;
}
.my-element.thin-scrollbar { }

/* Hide scrollbar but keep scroll */
.my-carousel {
  overflow-x: auto;
}
.my-carousel.hide-scrollbar { }

/* Accent color variant */
.special-section {
  overflow-y: auto;
}
.special-section.accent-scrollbar { }
```

## 🚀 Next Steps

1. Apply the tab structure to SetupPage.tsx
2. Add location/address fields
3. Fix percentage calculation
4. Test the setup flow end-to-end
5. Consider adding a preview of how the site will look with selected colors