# 🎨 REC Directory to MyUIbrix Conversion Guide

## 📋 Overview

This document describes the conversion of HTML/CSS elements from the `rec` directory into MyUIbrix page element structure.

---

## 🔍 Identified Elements from splitted.html

### 1. **Navigation / Header**
**HTML Classes:** `layout_NavbarContainer__R81Mg`, `Navbar_Container__zz5qI`
**CSS Files:** 1.css (Shaka player), 2.css (fonts + AnnounceBar), 3.css (general layout)
**Element Name:** `header`
**Variant:** `sparta_navbar`

**Features:**
- Logo with image (AC Sparta Praha)
- Burger menu button with animated icon
- Navigation links with buttons (Tickets, Fanzone)
- Separator between links
- Search functionality
- User authentication area

**CSS Styling:**
```css
.Navbar_Container__zz5qI {
  /* Main navbar styling */
}
.Navbar_Toggle__cO4vN {
  /* Burger button */
}
.Navbar_Brand__mfC75 {
  /* Logo area */
}
.Navbar_Links__Ce4_T {
  /* Navigation links */
}
```

---

### 2. **Hero Section - Homepage Header**
**HTML Classes:** `HomepageHeader_Container__8kG2y`
**CSS Files:** 6.css (HomepageHeader)
**Element Name:** `hero`
**Variant:** `sparta_featured_carousel`

**Features:**
- Full-width background image (absolute positioned)
- Article with categories badges
- H2 title and description text
- Primary button with "Play" action and chevron icon
- Navigation carousel at bottom with thumbnails
- Active state indicators
- Responsive design (mobile/desktop)

**Structure:**
```
<header class="HomepageHeader_Container__8kG2y">
  <picture> [Background Image] </picture>
  <article>
    <span class="HomepageHeader_Categories__QbuVC">
      [Category badges with separators]
    </span>
    <h2>HIGHLIGHTS: Sparta - Slavia</h2>
    <p>Key moments from the 315th derby</p>
    <a [Button]>Play</a>
  </article>
  <nav>
    [Thumbnail carousel with pagination]
  </nav>
</header>
```

**CSS Styling:**
- Height: 42.375rem (mobile), 50rem (tablet), 53rem (desktop)
- Flexbox layout with flex-end alignment
- Gradient overlay at bottom
- Article animation: `animateInArticle` 0.5s cubic-bezier
- Responsive font sizes

---

### 3. **Videos Section - Sparta TV**
**HTML Classes:** `Container_Container__Hb4bC`, `page_Tv__iWJ5P`, `HorizontalSlider_Container__fAULW`, `HomepageTvSlider_Slider__VQQkt`
**CSS Files:** 3.css (Container), 8.css (page styles), 10.css (Headline)
**Element Name:** `videos`
**Variant:** `sparta_horizontal_slider`

**Features:**
- Section heading with link and arrow icon
- Horizontal scrolling slider with controls
- Prev/Next buttons
- Article preview cards with:
  - Picture with responsive images
  - Meta info (UNLIMITED badge, categories)
  - Video duration
  - Play button overlay
- Draggable slides
- Transform-based animation

**Structure:**
```
<section class="Container_Container__Hb4bC page_Tv__iWJ5P">
  <h2 class="Headline_Container__4_M_i">
    <a href="/en/sparta-tv">Videos <i [arrow-right]></i></a>
  </h2>
  <div class="HorizontalSlider_Container__fAULW">
    <div data-context="controls">
      [Prev/Next buttons]
    </div>
    <div>
      <div class="HorizontalSlider_DataContainer__6Yydh" style="transform: translate3d(...)">
        [Slide items with articles]
      </div>
    </div>
  </div>
</section>
```

**CSS Highlights:**
- Gap: 2.5rem (mobile), 3rem (desktop)
- Slider buttons with disabled states
- Transform3d for smooth scrolling
- Responsive image sizing

---

### 4. **Teams Section with Tabs**
**HTML Classes:** `Container_Container__Hb4bC`, `HomepageTeams_Container__hklP0`, `TabsList_Container__0GSWS`, `TeamStatsTabs_Content__eEnaR`
**CSS Files:** 9.css (TeamStatsTabs)
**Element Name:** `team`
**Variant:** `sparta_tabs_stats`

**Features:**
- Tablist with team categories (Men A, Women A, Men B)
- Tab selection indicator with animation
- Team stats content area with:
  - Team photo
  - Call-to-action buttons ("Buy jersey", "Team details")
  - Squad tables
  - Statistics display
- Responsive column layout

**Structure:**
```
<section class="Container_Container__Hb4bC">
  <h2 class="Headline_Container__4_M_i">
    <a href="/en/tymy">Teams <i [arrow-right]></i></a>
  </h2>
  <div class="HomepageTeams_Container__hklP0">
    <main>
      <div class="TabsList_Container__0GSWS">
        <div class="TabsList_TablistContainer__vFD4P">
          <span class="TabsList_TabSelection__1FqGJ" [moving indicator]></span>
          <div role="tablist">
            <div role="tab">Men A</div>
            <div role="tab">Women A</div>
            <div role="tab">Men B</div>
          </div>
        </div>
        <div role="tabpanel">
          <div class="TeamStatsTabs_Content__eEnaR">
            [Team image and buttons]
          </div>
        </div>
      </div>
    </main>
  </div>
</section>
```

**CSS Highlights:**
- Background: `var(--colorBgSecondary, #1e1e1e)`
- Padding: 1.625rem 1.25rem (mobile), 2.5rem (desktop)
- Flexbox: column (mobile), row (desktop)
- Tab selection animation with transform

---

### 5. **Fanshop Section - Product Slider**
**HTML Classes:** `Container_Container__Hb4bC`, `page_Fanshop__7Bwng`, `HorizontalSlider_Container__fAULW`, `ShopSlider_Item__aRdi2`
**CSS Files:** Similar to Videos section
**Element Name:** `merch`
**Variant:** `sparta_product_slider`

**Features:**
- Section heading with external link and arrow-up-right icon
- Horizontal slider similar to Videos
- Product cards with:
  - Product image
  - Product name (bold)
  - Price display
  - "Buy" button with external link icon
- Prev/Next navigation
- Draggable slides

**Structure:**
```
<section class="Container_Container__Hb4bC page_Fanshop__7Bwng">
  <h2 class="Headline_Container__4_M_i">
    <a target="_blank" href="https://...">Fanshop <i [arrow-up-right]></i></a>
  </h2>
  <div class="HorizontalSlider_Container__fAULW">
    [Similar structure to Videos slider]
    <a class="ShopSlider_Item__aRdi2" href="...">
      <picture>[Product image]</picture>
      <div>
        <strong>Product name</strong>
        <div>
          <div class="ShopSlider_Prices__BJZI_">
            <var>1 999 Kč</var>
          </div>
          <button>Buy <i [arrow-up-right]></i></button>
        </div>
      </div>
    </a>
  </div>
</section>
```

---

### 6. **Footer with Partners Pyramid**
**HTML Classes:** `Footer_Container__nn9Ow`, `Footer_Partners__yESEU`, `Footer_PyramindTop__YcpaB`, `Footer_PyramindMid__ohJGg`, `Footer_PyramindDown__PDpgx`
**CSS Files:** 3.css, 8.css
**Element Name:** `footer`
**Variant:** `sparta_partners_pyramid`

**Features:**
- Three-tier pyramid structure for partners:
  - Top tier: 1 main partner (Betano)
  - Middle tier: 4 medium partners (EPET, Adidas, T-Mobile, Chance Liga)
  - Bottom tier: Multiple smaller partners
- Each partner with:
  - Logo image (SVG)
  - External link
  - Hover effects
- Footer sections with:
  - Navigation links
  - Social media
  - Newsletter signup
  - Legal information

**Structure:**
```
<footer class="Footer_Container__nn9Ow" data-full="true">
  <section class="Footer_Partners__yESEU">
    <div class="Container_Container__Hb4bC Footer_PyramindTop__YcpaB">
      [Main partner logo]
    </div>
    <div class="Container_Container__Hb4bC Footer_PyramindMid__ohJGg">
      [4 medium partner logos]
    </div>
    <div class="Container_Container__Hb4bC Footer_PyramindDown__PDpgx">
      [Multiple smaller partner logos]
    </div>
  </section>
  [Additional footer content sections]
</footer>
```

---

## 🎨 Common Design Patterns

### Color Variables
```css
--colorAccent: [Accent color]
--colorBgSecondary: #1e1e1e
--colorBgSemiTransparent8: hsla(0,0%,100%,.08)
--colorTextSecondary: [Secondary text color]
```

### Typography
- **Font Family:** `__zeleznaFont_39190a` (Custom Zelezna font)
- **Weights:** 100, 400, 500
- **Heading Sizes:**
  - H1: 2.25rem (mobile), 4rem (desktop)
  - H2: 1.75rem (mobile), 2.25rem (desktop)
  - H2 Headline: 1.75rem (mobile), 2rem (desktop)

### Responsive Breakpoints
- Mobile: < 1024px
- Tablet: 1024px - 1279px
- Desktop: ≥ 1280px

### Common Animations
- Cubic-bezier transitions: `cubic-bezier(.4,0,.6,1)`
- Transform3d for hardware acceleration
- Opacity fade-ins: 0 → 1 over 0.6s

### Icons
- Material Icons Round: `font-family: Material Icons Round`
- Custom icon implementation with `<i>` tags
- Icon sizes: 24px (default), 2rem (headlines)

---

## 📦 MyUIbrix Element Mappings

### Suggested New Elements/Variants

1. **header → sparta_navbar**
   - Full navigation bar with burger menu
   - Logo, links, search, authentication

2. **hero → sparta_featured_carousel**
   - Hero header with background image
   - Featured article with categories
   - Thumbnail navigation carousel

3. **videos → sparta_horizontal_slider**
   - Horizontal scrolling video cards
   - Prev/Next controls
   - UNLIMITED badges

4. **team → sparta_tabs_stats**
   - Tabbed team selector
   - Team photos and stats
   - CTA buttons for jersey and details

5. **merch → sparta_product_slider**
   - Product carousel
   - Price display
   - Buy buttons with external links

6. **footer → sparta_partners_pyramid**
   - Three-tier partner pyramid
   - Footer navigation
   - Newsletter and social

---

## 🛠️ Implementation Steps

### Step 1: Create Element Configurations

Add to `defaultElements.ts`:

```typescript
export const SPARTA_STYLE_ELEMENTS: PageElementConfig[] = [
  {
    page_type: 'homepage',
    element_name: 'header',
    variant: 'sparta_navbar',
    visible: true,
    display_order: 0,
    settings: {
      logo: '/images/sparta-logo.svg',
      searchEnabled: true,
      authEnabled: true,
    },
  },
  {
    page_type: 'homepage',
    element_name: 'hero',
    variant: 'sparta_featured_carousel',
    visible: true,
    display_order: 1,
    settings: {
      autoSwap: true,
      swapInterval: 5000,
      showThumbnails: true,
    },
  },
  {
    page_type: 'homepage',
    element_name: 'videos',
    variant: 'sparta_horizontal_slider',
    visible: true,
    display_order: 2,
    settings: {
      itemsPerView: 3,
      showUnlimitedBadge: true,
    },
  },
  {
    page_type: 'homepage',
    element_name: 'team',
    variant: 'sparta_tabs_stats',
    visible: true,
    display_order: 3,
    settings: {
      tabs: ['Men A', 'Women A', 'Men B'],
      showBuyJersey: true,
    },
  },
  {
    page_type: 'homepage',
    element_name: 'merch',
    variant: 'sparta_product_slider',
    visible: true,
    display_order: 4,
    settings: {
      itemsPerView: 4,
      currency: 'Kč',
    },
  },
  {
    page_type: 'homepage',
    element_name: 'footer',
    variant: 'sparta_partners_pyramid',
    visible: true,
    display_order: 5,
    settings: {
      pyramidTiers: 3,
      showNewsletter: true,
    },
  },
];
```

### Step 2: Add Variants to pageElements.ts

```typescript
export const ELEMENT_VARIANTS: Record<string, ElementVariant[]> = {
  // ... existing variants ...
  
  header: [
    // ... existing variants ...
    { 
      value: 'sparta_navbar', 
      label: 'Sparta Navbar', 
      description: 'AC Sparta Praha style navigation with burger menu, logo, links, and search' 
    },
  ],
  
  hero: [
    // ... existing variants ...
    { 
      value: 'sparta_featured_carousel', 
      label: 'Sparta Featured Carousel', 
      description: 'Hero header with background image, featured article, and thumbnail navigation' 
    },
  ],
  
  videos: [
    // ... existing variants ...
    { 
      value: 'sparta_horizontal_slider', 
      label: 'Sparta Horizontal Slider', 
      description: 'Horizontal scrolling video cards with UNLIMITED badges and controls' 
    },
  ],
  
  team: [
    // ... existing variants ...
    { 
      value: 'sparta_tabs_stats', 
      label: 'Sparta Tabs & Stats', 
      description: 'Tabbed team selector with photos, stats, and CTA buttons' 
    },
  ],
  
  merch: [
    // ... existing variants ...
    { 
      value: 'sparta_product_slider', 
      label: 'Sparta Product Slider', 
      description: 'Product carousel with prices and buy buttons' 
    },
  ],
  
  footer: [
    // ... existing variants ...
    { 
      value: 'sparta_partners_pyramid', 
      label: 'Sparta Partners Pyramid', 
      description: 'Three-tier partner pyramid layout with footer sections' 
    },
  ],
};
```

### Step 3: Create Component Files

Create the following React component files:

1. `frontend/src/components/elements/SpartaNavbar.tsx`
2. `frontend/src/components/elements/SpartaFeaturedCarousel.tsx`
3. `frontend/src/components/elements/SpartaHorizontalSlider.tsx`
4. `frontend/src/components/elements/SpartaTabsStats.tsx`
5. `frontend/src/components/elements/SpartaProductSlider.tsx`
6. `frontend/src/components/elements/SpartaPartnersFooter.tsx`

### Step 4: Extract and Convert CSS

Create modular CSS files for each component:

1. `frontend/src/styles/sparta-navbar.css`
2. `frontend/src/styles/sparta-hero.css`
3. `frontend/src/styles/sparta-slider.css`
4. `frontend/src/styles/sparta-team-tabs.css`
5. `frontend/src/styles/sparta-product-slider.css`
6. `frontend/src/styles/sparta-footer.css`

### Step 5: Copy Assets

Copy required assets from `rec` directory:
- Fonts (Zelezna font family)
- Icons (Material Icons Round)
- Any SVG/image assets

---

## 📝 CSS Classes Reference

### Navigation Classes
- `layout_NavbarContainer__R81Mg` - Container wrapper
- `Navbar_Container__zz5qI` - Main navbar
- `Navbar_Toggle__cO4vN` - Burger button
- `Navbar_Brand__mfC75` - Logo area
- `Navbar_Links__Ce4_T` - Navigation links
- `BurgerButton_Container__0gYhA` - Burger icon container
- `Button_Button__qQTgU` - Generic button
- `Separator_Container__x7nNU` - Separator element

### Hero Classes
- `HomepageHeader_Container__8kG2y` - Hero container
- `HomepageHeader_Categories__QbuVC` - Category badges area
- `Icon_Icon__uZZKy` - Icon base class
- `Icon_chevron-right__6riuc` - Chevron right icon
- `Icon_arrow-right__eVJh7` - Arrow right icon
- `Icon_arrow-up-right__tiMr_` - Arrow up-right icon

### Slider Classes
- `Container_Container__Hb4bC` - Generic container
- `HorizontalSlider_Container__fAULW` - Slider container
- `HorizontalSlider_Buttons__PsOev` - Button controls
- `HorizontalSlider_DataContainer__6Yydh` - Slide data container
- `HorizontalSlider_Slide__rALdW` - Individual slide
- `ArticlePreviewItem_Container__uRp20` - Article preview card
- `ArticlePreviewItem_MetaInfo__5gcGd` - Meta info overlay

### Team Tab Classes
- `HomepageTeams_Container__hklP0` - Teams container
- `TabsList_Container__0GSWS` - Tabs list container
- `TabsList_TablistContainer__vFD4P` - Tab list wrapper
- `TabsList_TabSelection__1FqGJ` - Active tab indicator
- `TeamStatsTabs_Content__eEnaR` - Tab content area
- `TeamStatsTabs_ContentButtons___3Q2j` - CTA buttons area

### Product/Shop Classes
- `page_Fanshop__7Bwng` - Fanshop section
- `ShopSlider_Item__aRdi2` - Product item
- `ShopSlider_Prices__BJZI_` - Price display

### Footer Classes
- `Footer_Container__nn9Ow` - Footer container
- `Footer_Partners__yESEU` - Partners section
- `Footer_PyramindTop__YcpaB` - Top tier (1 partner)
- `Footer_PyramindMid__ohJGg` - Middle tier (4 partners)
- `Footer_PyramindDown__PDpgx` - Bottom tier (multiple)

### Common Classes
- `Headline_Container__4_M_i` - Section headline
- `page_Container__ey6AU` - Generic page container
- `page_Tv__iWJ5P` - TV/Video page specific
- `page_Wrapper__UbSC1` - Page wrapper

---

## 🎯 Key Features to Implement

### 1. Horizontal Sliders
- Transform3d-based scrolling
- Prev/Next button controls
- Disabled state handling
- Drag support with `data-dragging` attribute
- Smooth animations

### 2. Tabs System
- Active tab indicator with transform animation
- ARIA-compliant tablist/tabpanel
- Keyboard navigation support
- Tab selection animation

### 3. Category Badges
- Inline badges with separators
- Different types: category, sparta-id, etc.
- Responsive sizing

### 4. Button System
- Multiple variants: primary, secondary, tertiary
- Icon support (left/right)
- Size options: default, small, large
- Square variant for icon-only buttons
- Pressed and disabled states

### 5. Responsive Images
- `<picture>` element with sources
- Loading strategies (lazy, eager, high priority)
- Decoding: async
- Object-fit: cover
- Responsive srcset

### 6. Animations
- Fade in/out with cubic-bezier
- Transform-based movements
- Backdrop-filter blur effects
- Hover transitions

---

## 🔗 Integration with MyUIbrix

### Using in MyUIbrix Editor

1. Open MyUIbrix Editor (`/?myuibrix=edit`)
2. Click "Add Element" (A key)
3. Select element category
4. Choose Sparta-style variant
5. Configure settings in Style Panel
6. Save changes (Ctrl+S)

### Customization Options

Each Sparta element should support:
- **Visibility toggle** - Show/hide element
- **Display order** - Change position in page
- **Settings object** - Element-specific configuration
- **Color scheme** - Match club colors
- **Responsive behavior** - Mobile/tablet/desktop

### Settings Schema Examples

**sparta_navbar settings:**
```json
{
  "logo": "/images/club-logo.svg",
  "logoWidth": 48,
  "logoHeight": 48,
  "searchEnabled": true,
  "authEnabled": true,
  "links": [
    { "label": "Tickets", "url": "/vstupenky", "variant": "tertiary" },
    { "label": "Fanzone", "url": "/fanzone", "variant": "tertiary" }
  ]
}
```

**sparta_featured_carousel settings:**
```json
{
  "autoSwap": true,
  "swapInterval": 5000,
  "showThumbnails": true,
  "thumbnailCount": 4,
  "showCategories": true,
  "buttonLabel": "Play",
  "buttonVariant": "primary"
}
```

**sparta_horizontal_slider settings:**
```json
{
  "itemsPerView": { "mobile": 1, "tablet": 2, "desktop": 3 },
  "gap": 16,
  "showControls": true,
  "enableDrag": true,
  "showUnlimitedBadge": true
}
```

---

## ✅ Testing Checklist

- [ ] All elements render correctly
- [ ] Responsive behavior works on mobile/tablet/desktop
- [ ] Animations are smooth (60fps)
- [ ] Hover effects work as expected
- [ ] Click/touch interactions function properly
- [ ] Keyboard navigation is accessible
- [ ] ARIA attributes are correct
- [ ] Images load with proper lazy loading
- [ ] Sliders scroll smoothly
- [ ] Tab system switches correctly
- [ ] External links open in new tabs
- [ ] Icons display properly
- [ ] Fonts load correctly
- [ ] Colors match design
- [ ] Settings are saved and loaded
- [ ] Element visibility toggle works
- [ ] Element reordering works
- [ ] MyUIbrix editor integration complete

---

## 📚 Additional Resources

### CSS Files Breakdown

- **1.css** - Shaka Player (video player library)
- **2.css** - Fonts (@font-face for Zelezna) + AnnounceBar
- **3.css** - General page layout, Container, Footer base
- **4.css** - (Not analyzed - likely more components)
- **5.css** - (Not analyzed - likely more components)
- **6.css** - HomepageHeader (Hero section)
- **7.css** - LastMatches, PosessionProgressBar
- **8.css** - Page specific styles, matches, versus, stats
- **9.css** - TeamStatsTabs
- **10.css** - ContestsCarousel, Headline

### Key Dependencies

- **React** - Component framework
- **Chakra UI** - UI component library (used in MyUIbrix)
- **Material Icons Round** - Icon font
- **Custom Zelezna Font** - Typography

### Browser Support

Ensure compatibility with:
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)

---

**Created:** October 15, 2025  
**Version:** 1.0.0  
**Status:** ✅ Documentation Complete - Ready for Implementation