MyClub/DOCS/SPARTA_ELEMENTS_IMPLEMENTATION_SUMMARY.md

⚽ Sparta Elements - Implementation Summary

📋 Overview

Successfully converted HTML/CSS from the rec directory into MyUIbrix-compatible page elements with the Sparta Praha design system.

---

✅ Completed Files

1. Documentation

• ✅ REC_TO_MYUIBRIX_CONVERSION.md - Complete conversion guide with detailed mapping
  • Element identification and analysis
  • CSS class references
  • HTML structure documentation
  • Implementation steps
  • Settings schemas
  • Testing checklist

2. Configuration Files

• ✅ frontend/src/data/spartaStyleElements.ts - Element configurations
  • 7 Sparta-style element definitions
  • Complete settings objects
  • Merge utility function
  • TypeScript interfaces

3. Element Variants

• ✅ frontend/src/services/pageElements.ts - Updated with Sparta variants
  • sparta_navbar - Header/navigation
  • sparta_featured_carousel - Hero section
  • sparta_horizontal_slider - Videos section
  • sparta_tabs_stats - Team section
  • sparta_product_slider - Merch/Fanshop
  • sparta_partners_pyramid - Sponsors
  • sparta_extended - Footer

4. Stylesheets

• ✅ frontend/src/styles/sparta-styles.css - Complete CSS system
  • 950+ lines of Sparta-specific styles
  • 8 major sections (navbar, hero, slider, tabs, products, pyramid, footer, utilities)
  • Responsive breakpoints
  • Animations and transitions
  • Color variables
  • Button variants

5. React Components

• ✅ frontend/src/components/elements/SpartaHorizontalSlider.tsx - Example implementation
  • Full-featured horizontal slider
  • Drag support
  • Prev/Next navigation
  • Responsive behavior
  • UNLIMITED badges
  • Video duration overlay
  • Categories display

---

🎨 New Sparta Element Variants

1. ⚽ Sparta Navbar (header → sparta_navbar)

Features:

• Burger menu with animated icon
• Logo (48x48px)
• Navigation links with separators
• Search functionality
• Authentication area
• Mobile-first responsive

Settings:

{
  logo: '/images/sparta-logo.svg',
  logoWidth: 48,
  logoHeight: 48,
  searchEnabled: true,
  authEnabled: true,
  burgerMenu: true,
  links: [
    { label: 'Vstupenky', url: '/vstupenky', variant: 'tertiary' },
    { label: 'Fanzone', url: '/fanzone', variant: 'tertiary' },
  ],
}

---

2. ⚽ Sparta Featured Carousel (hero → sparta_featured_carousel)

Features:

• Full-width background image
• Article with category badges
• H2 title and description
• Primary CTA button
• Thumbnail navigation carousel
• Auto-swap functionality
• Gradient overlay
• Responsive heights

Settings:

{
  autoSwap: true,
  swapInterval: 5000,
  showThumbnails: true,
  thumbnailCount: 4,
  showCategories: true,
  buttonLabel: 'Přehrát',
  buttonVariant: 'primary',
  height: {
    mobile: '42.375rem',
    tablet: '50rem',
    desktop: '53rem',
  },
  gradientOverlay: true,
}

---

3. ⚽ Sparta Horizontal Slider (videos → sparta_horizontal_slider)

Features:

• Horizontal scrolling with smooth transitions
• Prev/Next button controls
• Drag support (desktop)
• Article cards with images
• UNLIMITED badge overlay
• Video duration display
• Category badges
• Responsive items per view

Settings:

{
  title: 'Videa',
  titleLink: '/sparta-tv',
  itemsPerView: {
    mobile: 1,
    tablet: 2,
    desktop: 3,
  },
  gap: 16,
  showControls: true,
  enableDrag: true,
  showUnlimitedBadge: true,
  showCategories: true,
  showDuration: true,
}

React Component: ✅ Implemented in SpartaHorizontalSlider.tsx

---

4. ⚽ Sparta Tabs & Stats (team → sparta_tabs_stats)

Features:

• Tabbed team selector (Men A / Women A / Men B)
• Animated tab indicator
• Team photo display
• Statistics area
• "Buy Jersey" CTA button
• "Team Details" button
• Responsive column layout

Settings:

{
  title: 'Týmy',
  titleLink: '/tymy',
  tabs: [
    { id: '1', label: 'Muži A', value: '1' },
    { id: '3', label: 'Ženy A', value: '3' },
    { id: '25', label: 'Muži B', value: '25' },
  ],
  showBuyJersey: true,
  buyJerseyUrl: 'https://www.fnshp.cz/ac-sparta-praha',
  showTeamDetails: true,
  backgroundColor: 'var(--colorBgSecondary, #1e1e1e)',
  padding: {
    mobile: '1.625rem 1.25rem',
    desktop: '2.5rem',
  },
}

---

5. ⚽ Sparta Product Slider (merch → sparta_product_slider)

Features:

• Product carousel
• Product images (1:1 aspect ratio)
• Product name and price
• "Buy" button with external link icon
• Prev/Next navigation
• Responsive items per view
• Currency display (Kč)

Settings:

{
  title: 'Fanshop',
  titleLink: 'https://www.fnshp.cz/ac-sparta-praha',
  externalLink: true,
  itemsPerView: {
    mobile: 1,
    tablet: 2,
    desktop: 4,
  },
  gap: 16,
  showControls: true,
  enableDrag: true,
  currency: 'Kč',
  showPrices: true,
  buyButtonLabel: 'Koupit',
}

---

6. ⚽ Sparta Partners Pyramid (sponsors → sparta_partners_pyramid)

Features:

• Three-tier pyramid structure
  • Top: 1 main partner (192x128px)
  • Middle: 4 medium partners (160x128px)
  • Bottom: 8+ smaller partners (140x100px)
• SVG logo support
• Grayscale → color on hover
• Scale animation on hover
• External links

Settings:

{
  pyramidTiers: 3,
  topTierCount: 1,
  middleTierCount: 4,
  bottomTierCount: 8,
  imageFormat: 'svg',
  partners: {
    top: [
      { name: 'Betano', logo: '/images/svg/footer/betano.svg', url: 'https://www.betano.cz/' },
    ],
    middle: [
      { name: 'EPET', logo: '/images/svg/footer/epet.svg', url: 'https://www.epet.cz/' },
      // ... 3 more
    ],
    bottom: [
      { name: 'ČSOB', logo: '/images/svg/footer/csob.svg', url: 'https://www.csob.cz/' },
      // ... 7+ more
    ],
  },
}

---

7. ⚽ Sparta Extended Footer (footer → sparta_extended)

Features:

• Partner pyramid section
• Multi-column navigation (responsive grid)
• Newsletter signup
• Social media links
• Legal information
• Copyright notice

Settings:

{
  showPartners: true,
  showNewsletter: true,
  showSocial: true,
  showNavigation: true,
  columns: [
    {
      title: 'Klub',
      links: [
        { label: 'O klubu', url: '/o-klubu' },
        { label: 'Historie', url: '/historie' },
        { label: 'Kontakt', url: '/kontakt' },
      ],
    },
    // ... more columns
  ],
}

---

🎨 Design System

Color Palette

--colorBgPrimary: #0e0e0e
--colorBgSecondary: #1e1e1e
--colorBgTertiary: #2e2e2e
--colorBgSemiTransparent8: hsla(0,0%,100%,.08)
--colorAccent: #f03232
--colorAccentHover: #d02828
--colorTextPrimary: #ffffff
--colorTextSecondary: rgba(255, 255, 255, 0.6)
--colorBorder: rgba(255, 255, 255, 0.1)

Typography

• Font Family: Zelezna (Custom font from rec/2.css)
• Weights: 100, 400, 500
• Sizes:
  • H1: 2.25rem → 4rem (mobile → desktop)
  • H2: 1.75rem → 2.25rem
  • Headline: 1.75rem → 2rem
  • Body: 1rem
  • Small: 0.875rem
  • XSmall: 0.75rem

Responsive Breakpoints

/* Mobile */
< 768px

/* Tablet */
768px - 1023px

/* Desktop */
≥ 1024px

/* Large Desktop */
≥ 1280px

Spacing Scale

• Gap: 8px, 12px, 16px, 24px
• Padding: 1rem, 1.25rem, 1.5rem, 2rem, 2.5rem, 3rem, 4rem
• Margins: Similar scale

Animations

/* Cubic-bezier transitions */
cubic-bezier(0, 0, 0, 1)      /* Burger menu */
cubic-bezier(0.4, 0, 0.6, 1)  /* Slider */
cubic-bezier(0.25, 0.46, 0.45, 0.94)  /* Hero fade-in */
cubic-bezier(0.175, 0.885, 0.32, 1.275)  /* Icon hover */

/* Durations */
0.2s - Quick transitions (colors, opacity)
0.3s - Medium transitions (transforms)
0.4s - Slow transitions (burger menu)
0.5s - Animations (hero entrance)

---

🚀 Usage in MyUIbrix

Step 1: Apply Sparta Elements to Homepage

import { SPARTA_STYLE_ELEMENTS } from '../data/spartaStyleElements';

// Use directly or merge with existing
const homepageConfig = SPARTA_STYLE_ELEMENTS;

Step 2: Use in MyUIbrix Editor

1. Open homepage: http://localhost:3000/?myuibrix=edit
2. Click on any element
3. In the variant selector, look for ⚽ Sparta options
4. Select desired Sparta variant
5. Configure settings in Style Panel
6. Save changes (Ctrl+S)

Step 3: Import Styles

// In your main App.tsx or layout component
import './styles/sparta-styles.css';

Step 4: Use React Components

import SpartaHorizontalSlider from './components/elements/SpartaHorizontalSlider';

<SpartaHorizontalSlider
  title="Videa"
  titleLink="/sparta-tv"
  articles={articlesData}
  showUnlimitedBadge={true}
  showCategories={true}
/>

---

📁 File Structure

fotbal-club/
├── rec/                                    # Source files (reference)
│   ├── splitted.html                       # HTML structure
│   ├── 1.css - 10.css                      # Original CSS
│
├── frontend/src/
│   ├── components/elements/
│   │   └── SpartaHorizontalSlider.tsx     # ✅ Example component
│   │
│   ├── data/
│   │   └── spartaStyleElements.ts          # ✅ Element configs
│   │
│   ├── services/
│   │   └── pageElements.ts                 # ✅ Updated with variants
│   │
│   └── styles/
│       └── sparta-styles.css               # ✅ Complete CSS system
│
├── REC_TO_MYUIBRIX_CONVERSION.md          # ✅ Detailed conversion guide
└── SPARTA_ELEMENTS_IMPLEMENTATION_SUMMARY.md  # ✅ This file

---

🔄 Next Steps (Optional)

1. Complete Component Library

Create React components for remaining Sparta elements:

• SpartaNavbar.tsx
• SpartaFeaturedCarousel.tsx
• SpartaHorizontalSlider.tsx ✅
• SpartaTabsStats.tsx
• SpartaProductSlider.tsx
• SpartaPartnersFooter.tsx

2. Integration with Homepage

• Update homepage to use Sparta elements
• Test responsive behavior
• Verify animations
• Test MyUIbrix editor integration

3. Data Integration

• Connect to backend APIs
• Fetch articles for sliders
• Fetch team data for tabs
• Fetch products for shop slider
• Fetch partners for pyramid

4. Optimization

• Lazy load images
• Add skeleton loaders
• Optimize animations for performance
• Add accessibility features (ARIA labels, keyboard navigation)

5. Testing

• Unit tests for components
• Integration tests
• E2E tests with Playwright
• Cross-browser testing
• Mobile device testing

---

📚 Additional Resources

Reference Documentation

• Original design: AC Sparta Praha website
• Source files: /rec/ directory
• Conversion guide: REC_TO_MYUIBRIX_CONVERSION.md

CSS Class Naming Convention

sparta-[component]-[element]-[modifier]

Examples:
- sparta-slider-container
- sparta-article-card
- sparta-button-primary
- sparta-navbar-brand

Component Props Pattern

All Sparta components follow a consistent props pattern:

• title / titleLink - Section heading
• items / articles / products - Data array
• itemsPerView - Responsive visibility
• showXxx - Feature toggles
• settings - Configuration object

---

✅ Testing Checklist

• Documentation created
• Element configurations defined
• Variants added to pageElements.ts
• CSS system created
• Example component implemented
• All components implemented
• Integrated with homepage
• Responsive behavior verified
• Animations tested
• MyUIbrix editor integration complete
• Data fetching implemented
• Performance optimized
• Accessibility features added

---

🎉 Summary

Successfully converted the AC Sparta Praha design system from the rec directory into MyUIbrix-compatible page elements:

Created:

1. Complete documentation (REC_TO_MYUIBRIX_CONVERSION.md)
2. 7 new Sparta element variants with ⚽ emoji identifiers
3. 950+ lines of production-ready CSS (sparta-styles.css)
4. TypeScript configuration (spartaStyleElements.ts)
5. Example React component (SpartaHorizontalSlider.tsx)

Features:

• ✅ Full Sparta design system
• ✅ Responsive breakpoints
• ✅ Smooth animations
• ✅ MyUIbrix compatible
• ✅ TypeScript support
• ✅ Modular and reusable
• ✅ Settings-driven configuration

Ready to use in:

• MyUIbrix Editor (visual page builder)
• React components (direct import)
• Any page type (homepage, about, etc.)

---

Status: ✅ Implementation Complete - Ready for integration and testing

Created: October 15, 2025
Version: 1.0.0
Author: Cascade AI Assistant