SultanGames Betting and Casino Dashboard

Overview

SultanGames is a high-density gambling and sports betting dashboard that balances visual-heavy casino elements with data-driven sports odds. It is an excellent reference for cloning because it demonstrates how to manage complex navigation, promotional bento grids, and data-rich horizontal scrollers without overwhelming the user interface.

Design System

• Color Palette & Visual Hierarchy: The UI uses a deep emerald-green background (#003333 base) which provides a premium feel while ensuring high contrast for white typography and vibrant game tiles. A bright gold/yellow accent is used sparingly to draw attention to primary actions like registration and "Hot" categories.
• Typography system: The system utilizes a functional sans-serif scale. Sections are anchored by semi-bold titles (title-2-semibold), with smaller, uppercase captions used for secondary navigation labels. The sports betting cards use a condensed font-weight to maximize readability of numeric odds within tight constraints.
• Page Structure & Section Flow: The layout follows a classic triple-track structure: a persistent left sidebar for category filtering, a top-level global header for accounting/search, and a primary scrollable area containing a hero carousel, followed by a responsive grid of category shortcuts and multiple horizontal game scrollers.
• Reusable Components:
  • Bento Collection: A responsive grid of tiles with integrated product imagery (e.g., "Sultan-City", "Aviator").
  • Sports Betting Cards: Compact modules showing team logos, match times, and three-column betting odds (1-X-2).
  • Horizontal Scrollers: Touch-friendly Swiper.js implementations for slot games and banners.
  • Multi-Level Sidebar: A navigation system that combines simple icons with nested championship lists featuring chevron indicators.
• Interaction & Motion: Based on the HTML, the site utilizes swiper-wrapper classes for smooth, touch-enabled horizontal transitions and modulor_button__animation-wrap for micro-interactions on call-to-action buttons.
• Implementation Clues: The site is built with a custom component system (referenced as "Modulor"), using modular CSS classes and BEM-like naming conventions for consistent component styling across different page sections.

Use Cases

• Who should clone this: Developers building digital marketplaces, entertainment platforms, or high-stakes fintech dashboards that require a balance between marketing imagery and real-time data.
• Effective Remixes:
  • E-commerce: Swap game tiles for product categories and sports betting cards for flash-sale countdowns.
  • SaaS Learning: Use the multi-track sidebar for curriculum navigation and the bento cards for different course modules.
• Remix Directions: Replace the dark emerald theme with a clean "light mode" using slate blues or grays to adapt the architecture for professional enterprise software while maintaining the high-density layout.
• Clone Scope: Start with the Bento Category Grid and Horizontal Game Scrollers as standalone components, as these provide the most immediate visual value for any modern dashboard.