> ## Documentation Index
> Fetch the complete documentation index at: https://mythicframework.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Mythic Framework - Professional FiveM Roleplay Framework

> Production-ready FiveM roleplay framework with 60+ modular resources. Trusted by Circuit RP, Prodigy RP, and leading roleplay communities.

<div
  style={{
background: 'linear-gradient(180deg, #0a0a12 0%, #1e293b 50%, #0a0a12 100%)',
minHeight: '100vh',
width: '100%'
}}
>
  <div
    style={{
maxWidth: '1400px',
margin: '0 auto',
padding: '80px 40px 60px',
textAlign: 'center'
}}
  >
    {/* Big Logo */}

    <div
      style={{
marginBottom: '40px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}
    >
      <img
        src="https://mintcdn.com/mythicframework/OO-wyn75LXRcOfNN/images/mainlogo.png?fit=max&auto=format&n=OO-wyn75LXRcOfNN&q=85&s=9759703f150e6524a2e4a8ca69b3b739"
        alt="Mythic Framework"
        style={{
  maxWidth: '350px',
  width: '100%',
  height: 'auto',
  filter: 'drop-shadow(0 0 40px rgba(54, 163, 236, 0.4))'
}}
        width="4096"
        height="4096"
        data-path="images/mainlogo.png"
      />
    </div>

    {/* Hero Text */}

    <h1
      style={{
fontSize: '3.5rem',
fontWeight: '800',
marginBottom: '1.5rem',
background: 'linear-gradient(135deg, #36A3EC 0%, #5BB5F0 100%)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
lineHeight: '1.2',
padding: '0 20px'
}}
    >
      The Framework Behind<br />Leading Roleplay Servers
    </h1>

    <p
      style={{
fontSize: '1.5rem',
color: '#94A3B8',
marginBottom: '3rem',
maxWidth: '900px',
margin: '0 auto 3rem',
lineHeight: '1.6'
}}
    >
      Production-ready FiveM framework with 60+ modular resources.<br />
      Trusted by Circuit RP, Prodigy RP, and top-tier communities worldwide.
    </p>

    {/* CTA Buttons */}

    <div
      style={{
display: 'flex',
gap: '1.5rem',
justifyContent: 'center',
flexWrap: 'wrap',
marginBottom: '80px'
}}
    >
      <a href="/installation/prerequisites" style={{ textDecoration: 'none' }}>
        <button
          style={{
  padding: '16px 48px',
  fontSize: '1.2rem',
  fontWeight: '700',
  background: 'linear-gradient(135deg, #36A3EC 0%, #2B88C8 100%)',
  color: 'white',
  border: 'none',
  borderRadius: '12px',
  cursor: 'pointer',
  transition: 'all 0.3s',
  boxShadow: '0 8px 24px rgba(54, 163, 236, 0.3)',
  ':hover': { transform: 'translateY(-2px)' }
}}
        >
          Get Started →
        </button>
      </a>

      <a href="/interactive-tools" style={{ textDecoration: 'none' }}>
        <button
          style={{
  padding: '16px 48px',
  fontSize: '1.2rem',
  fontWeight: '700',
  background: 'transparent',
  color: '#36A3EC',
  border: '3px solid #36A3EC',
  borderRadius: '12px',
  cursor: 'pointer',
  transition: 'all 0.3s'
}}
        >
          Interactive Tools
        </button>
      </a>

      <a href="/api/core/base" style={{ textDecoration: 'none' }}>
        <button
          style={{
  padding: '16px 48px',
  fontSize: '1.2rem',
  fontWeight: '700',
  background: 'transparent',
  color: '#5BB5F0',
  border: '3px solid #5BB5F0',
  borderRadius: '12px',
  cursor: 'pointer',
  transition: 'all 0.3s'
}}
        >
          API Reference
        </button>
      </a>
    </div>
  </div>

  <div
    style={{
background: 'linear-gradient(135deg, rgba(54, 163, 236, 0.1) 0%, rgba(43, 136, 200, 0.1) 100%)',
padding: '80px 40px',
borderTop: '1px solid rgba(54, 163, 236, 0.2)',
borderBottom: '1px solid rgba(54, 163, 236, 0.2)'
}}
  >
    <div style={{ maxWidth: '1400px', margin: '0 auto' }}>
      <h2
        style={{
fontSize: '3rem',
fontWeight: '800',
textAlign: 'center',
marginBottom: '1rem',
color: '#e2e8f0'
}}
      >
        Why Leading Servers Choose Mythic
      </h2>

      <p
        style={{
fontSize: '1.2rem',
color: '#94A3B8',
textAlign: 'center',
marginBottom: '60px',
maxWidth: '800px',
margin: '0 auto 60px'
}}
      >
        Built for performance, designed for scale, trusted in production
      </p>

      <div
        style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
gap: '32px',
marginBottom: '60px',
justifyContent: 'center'
}}
      >
        {/* Feature Cards */}

        <div
          style={{
  background: 'rgba(30, 41, 59, 0.6)',
  border: '1px solid rgba(54, 163, 236, 0.2)',
  borderRadius: '16px',
  padding: '32px',
  backdropFilter: 'blur(10px)'
}}
        >
          <div
            style={{
    fontSize: '3rem',
    marginBottom: '16px',
    color: '#36A3EC'
  }}
          >
            <Icon icon="rocket" size={48} />
          </div>

          <h3 style={{
                                            fontSize: '1.5rem',
                                            fontWeight: '700',
                                            marginBottom: '12px',
                                            color: '#e2e8f0'
                                          }}>Production Ready</h3>

          <p
            style={{
    color: '#94A3B8',
    lineHeight: '1.6'
  }}
          >
            Battle-tested in live servers with thousands of concurrent players. Optimized queries, smart caching, and efficient data structures.
          </p>
        </div>

        <div
          style={{
  background: 'rgba(30, 41, 59, 0.6)',
  border: '1px solid rgba(54, 163, 236, 0.2)',
  borderRadius: '16px',
  padding: '32px',
  backdropFilter: 'blur(10px)'
}}
        >
          <div
            style={{
    fontSize: '3rem',
    marginBottom: '16px',
    color: '#36A3EC'
  }}
          >
            <Icon icon="puzzle" size={48} />
          </div>

          <h3 style={{
                                            fontSize: '1.5rem',
                                            fontWeight: '700',
                                            marginBottom: '12px',
                                            color: '#e2e8f0'
                                          }}>Modular Architecture</h3>

          <p
            style={{
    color: '#94A3B8',
    lineHeight: '1.6'
  }}
          >
            60+ independent resources. Enable only what you need. Extend existing systems or build custom resources on the foundation.
          </p>
        </div>

        <div
          style={{
  background: 'rgba(30, 41, 59, 0.6)',
  border: '1px solid rgba(54, 163, 236, 0.2)',
  borderRadius: '16px',
  padding: '32px',
  backdropFilter: 'blur(10px)'
}}
        >
          <div
            style={{
    fontSize: '3rem',
    marginBottom: '16px',
    color: '#36A3EC'
  }}
          >
            <Icon icon="atom" size={48} />
          </div>

          <h3 style={{
                                            fontSize: '1.5rem',
                                            fontWeight: '700',
                                            marginBottom: '12px',
                                            color: '#e2e8f0'
                                          }}>Modern UI Stack</h3>

          <p
            style={{
    color: '#94A3B8',
    lineHeight: '1.6'
  }}
          >
            React 17 + Redux + Material-UI v5. Beautiful, responsive interfaces built with industry-standard tools.
          </p>
        </div>

        <div
          style={{
  background: 'rgba(30, 41, 59, 0.6)',
  border: '1px solid rgba(54, 163, 236, 0.2)',
  borderRadius: '16px',
  padding: '32px',
  backdropFilter: 'blur(10px)'
}}
        >
          <div
            style={{
    fontSize: '3rem',
    marginBottom: '16px',
    color: '#36A3EC'
  }}
          >
            <Icon icon="wrench" size={48} />
          </div>

          <h3 style={{
                                            fontSize: '1.5rem',
                                            fontWeight: '700',
                                            marginBottom: '12px',
                                            color: '#e2e8f0'
                                          }}>Developer Experience</h3>

          <p
            style={{
    color: '#94A3B8',
    lineHeight: '1.6'
  }}
          >
            Clean APIs, comprehensive documentation, and intuitive patterns. Get productive in minutes, not weeks.
          </p>
        </div>

        <div
          style={{
  background: 'rgba(30, 41, 59, 0.6)',
  border: '1px solid rgba(54, 163, 236, 0.2)',
  borderRadius: '16px',
  padding: '32px',
  backdropFilter: 'blur(10px)'
}}
        >
          <div
            style={{
    fontSize: '3rem',
    marginBottom: '16px',
    color: '#36A3EC'
  }}
          >
            <Icon icon="database" size={48} />
          </div>

          <h3 style={{
                                            fontSize: '1.5rem',
                                            fontWeight: '700',
                                            marginBottom: '12px',
                                            color: '#e2e8f0'
                                          }}>Dual Database</h3>

          <p
            style={{
    color: '#94A3B8',
    lineHeight: '1.6'
  }}
          >
            MongoDB for dynamic game data, MySQL for compatibility. Best of both worlds with seamless integration.
          </p>
        </div>

        <div
          style={{
  background: 'rgba(30, 41, 59, 0.6)',
  border: '1px solid rgba(54, 163, 236, 0.2)',
  borderRadius: '16px',
  padding: '32px',
  backdropFilter: 'blur(10px)'
}}
        >
          <div
            style={{
    fontSize: '3rem',
    marginBottom: '16px',
    color: '#36A3EC'
  }}
          >
            <Icon icon="battery-full" size={48} />
          </div>

          <h3 style={{
                                            fontSize: '1.5rem',
                                            fontWeight: '700',
                                            marginBottom: '12px',
                                            color: '#e2e8f0'
                                          }}>Complete Systems</h3>

          <p
            style={{
    color: '#94A3B8',
    lineHeight: '1.6'
  }}
          >
            Characters, inventory, jobs, vehicles, properties, police, medical, and more. Everything you need to launch.
          </p>
        </div>

        <div
          style={{
  background: 'rgba(30, 41, 59, 0.6)',
  border: '1px solid rgba(54, 163, 236, 0.2)',
  borderRadius: '16px',
  padding: '32px',
  backdropFilter: 'blur(10px)'
}}
        >
          <div
            style={{
    fontSize: '3rem',
    marginBottom: '16px',
    color: '#36A3EC'
  }}
          >
            <Icon icon="shield-halved" size={48} />
          </div>

          <h3 style={{
                                            fontSize: '1.5rem',
                                            fontWeight: '700',
                                            marginBottom: '12px',
                                            color: '#e2e8f0'
                                          }}>Built-in Security</h3>

          <p
            style={{
    color: '#94A3B8',
    lineHeight: '1.6'
  }}
          >
            Advanced anti-cheat system, exploit protection, and permission management. Keep your server secure out of the box.
          </p>
        </div>

        <div
          style={{
  background: 'rgba(30, 41, 59, 0.6)',
  border: '1px solid rgba(54, 163, 236, 0.2)',
  borderRadius: '16px',
  padding: '32px',
  backdropFilter: 'blur(10px)'
}}
        >
          <div
            style={{
    fontSize: '3rem',
    marginBottom: '16px',
    color: '#36A3EC'
  }}
          >
            <Icon icon="rotate" size={48} />
          </div>

          <h3 style={{
                                            fontSize: '1.5rem',
                                            fontWeight: '700',
                                            marginBottom: '12px',
                                            color: '#e2e8f0'
                                          }}>Active Development</h3>

          <p
            style={{
    color: '#94A3B8',
    lineHeight: '1.6'
  }}
          >
            Regular updates, bug fixes, and new features. Framework evolves with the FiveM ecosystem and community needs.
          </p>
        </div>
      </div>
    </div>
  </div>

  <div
    style={{
maxWidth: '1400px',
margin: '0 auto',
padding: '80px 40px'
}}
  >
    <h2
      style={{
fontSize: '3rem',
fontWeight: '800',
textAlign: 'center',
marginBottom: '60px',
color: '#e2e8f0'
}}
    >
      Everything You Need Out of the Box
    </h2>

    <div
      style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
gap: '24px'
}}
    >
      <div
        style={{
background: 'rgba(30, 41, 59, 0.4)',
border: '1px solid rgba(148, 163, 184, 0.1)',
borderRadius: '12px',
padding: '24px'
}}
      >
        <h4 style={{
                                  color: '#36A3EC',
                                  fontSize: '1.2rem',
                                  marginBottom: '12px',
                                  fontWeight: '700'
                                }}><Icon icon="users" /> Character System</h4>

        <p style={{ color: '#94A3B8', fontSize: '0.95rem' }}>
          Multi-character support, appearance persistence, metadata system
        </p>
      </div>

      <div
        style={{
background: 'rgba(30, 41, 59, 0.4)',
border: '1px solid rgba(148, 163, 184, 0.1)',
borderRadius: '12px',
padding: '24px'
}}
      >
        <h4 style={{
                                  color: '#36A3EC',
                                  fontSize: '1.2rem',
                                  marginBottom: '12px',
                                  fontWeight: '700'
                                }}><Icon icon="backpack" /> Advanced Inventory</h4>

        <p style={{ color: '#94A3B8', fontSize: '0.95rem' }}>
          Metadata-driven items, crafting, weapons, stashes, containers
        </p>
      </div>

      <div
        style={{
background: 'rgba(30, 41, 59, 0.4)',
border: '1px solid rgba(148, 163, 184, 0.1)',
borderRadius: '12px',
padding: '24px'
}}
      >
        <h4 style={{
                                  color: '#36A3EC',
                                  fontSize: '1.2rem',
                                  marginBottom: '12px',
                                  fontWeight: '700'
                                }}><Icon icon="briefcase" /> Job System</h4>

        <p style={{ color: '#94A3B8', fontSize: '0.95rem' }}>
          Dynamic employment, grades, permissions, duty tracking, salaries
        </p>
      </div>

      <div
        style={{
background: 'rgba(30, 41, 59, 0.4)',
border: '1px solid rgba(148, 163, 184, 0.1)',
borderRadius: '12px',
padding: '24px'
}}
      >
        <h4 style={{
                                  color: '#36A3EC',
                                  fontSize: '1.2rem',
                                  marginBottom: '12px',
                                  fontWeight: '700'
                                }}><Icon icon="car" /> Vehicles</h4>

        <p style={{ color: '#94A3B8', fontSize: '0.95rem' }}>
          Ownership, keys, garages, customization, fuel, damage system
        </p>
      </div>

      <div
        style={{
background: 'rgba(30, 41, 59, 0.4)',
border: '1px solid rgba(148, 163, 184, 0.1)',
borderRadius: '12px',
padding: '24px'
}}
      >
        <h4 style={{
                                  color: '#36A3EC',
                                  fontSize: '1.2rem',
                                  marginBottom: '12px',
                                  fontWeight: '700'
                                }}><Icon icon="shield" /> Police & EMS</h4>

        <p style={{ color: '#94A3B8', fontSize: '0.95rem' }}>
          MDT, evidence system, radar, CCTV, jail, medical mechanics
        </p>
      </div>

      <div
        style={{
background: 'rgba(30, 41, 59, 0.4)',
border: '1px solid rgba(148, 163, 184, 0.1)',
borderRadius: '12px',
padding: '24px'
}}
      >
        <h4 style={{
                                  color: '#36A3EC',
                                  fontSize: '1.2rem',
                                  marginBottom: '12px',
                                  fontWeight: '700'
                                }}><Icon icon="home" /> Properties</h4>

        <p style={{ color: '#94A3B8', fontSize: '0.95rem' }}>
          Ownership, apartments, furniture placement, access control
        </p>
      </div>

      <div
        style={{
background: 'rgba(30, 41, 59, 0.4)',
border: '1px solid rgba(148, 163, 184, 0.1)',
borderRadius: '12px',
padding: '24px'
}}
      >
        <h4 style={{
                                  color: '#36A3EC',
                                  fontSize: '1.2rem',
                                  marginBottom: '12px',
                                  fontWeight: '700'
                                }}><Icon icon="coins" /> Economy</h4>

        <p style={{ color: '#94A3B8', fontSize: '0.95rem' }}>
          Banking, businesses, dealerships, shops, transactions
        </p>
      </div>

      <div
        style={{
background: 'rgba(30, 41, 59, 0.4)',
border: '1px solid rgba(148, 163, 184, 0.1)',
borderRadius: '12px',
padding: '24px'
}}
      >
        <h4 style={{
                                  color: '#36A3EC',
                                  fontSize: '1.2rem',
                                  marginBottom: '12px',
                                  fontWeight: '700'
                                }}><Icon icon="monitor-smartphone" /> Modern UI</h4>

        <p style={{ color: '#94A3B8', fontSize: '0.95rem' }}>
          HUD, phone, laptop, MDT, menus, notifications, targeting
        </p>
      </div>
    </div>
  </div>

  <div
    style={{
background: 'linear-gradient(135deg, rgba(54, 163, 236, 0.05) 0%, rgba(43, 136, 200, 0.05) 100%)',
padding: '80px 40px',
borderTop: '1px solid rgba(54, 163, 236, 0.1)'
}}
  >
    <div style={{ maxWidth: '1200px', margin: '0 auto', textAlign: 'center' }}>
      <h2
        style={{
fontSize: '2.5rem',
fontWeight: '800',
marginBottom: '24px',
color: '#e2e8f0'
}}
      >
        Trusted by Leading Communities
      </h2>

      <p
        style={{
fontSize: '1.3rem',
color: '#94A3B8',
marginBottom: '48px',
lineHeight: '1.6'
}}
      >
        Powering some of the most popular FiveM roleplay servers with thousands of concurrent players
      </p>

      <div
        style={{
display: 'flex',
justifyContent: 'center',
gap: '48px',
flexWrap: 'wrap',
fontSize: '1.8rem',
fontWeight: '700'
}}
      >
        <div style={{ color: '#36A3EC' }}>Circuit RP</div>
        <div style={{ color: '#5BB5F0' }}>Prodigy RP</div>
        <div style={{ color: '#2B88C8' }}>+ Many More</div>
      </div>
    </div>
  </div>

  <div
    style={{
maxWidth: '1200px',
margin: '0 auto',
padding: '80px 40px 100px',
textAlign: 'center'
}}
  >
    <h2
      style={{
fontSize: '3rem',
fontWeight: '800',
marginBottom: '24px',
color: '#e2e8f0'
}}
    >
      Ready to Build Your Community?
    </h2>

    <p
      style={{
fontSize: '1.3rem',
color: '#94A3B8',
marginBottom: '48px',
maxWidth: '800px',
margin: '0 auto 48px'
}}
    >
      Join the servers who chose Mythic Framework for performance, reliability, and developer experience.
    </p>

    <div
      style={{
display: 'flex',
gap: '24px',
justifyContent: 'center',
flexWrap: 'wrap'
}}
    >
      <a href="/installation/prerequisites" style={{ textDecoration: 'none' }}>
        <button
          style={{
  padding: '18px 56px',
  fontSize: '1.3rem',
  fontWeight: '700',
  background: 'linear-gradient(135deg, #36A3EC 0%, #2B88C8 100%)',
  color: 'white',
  border: 'none',
  borderRadius: '12px',
  cursor: 'pointer',
  boxShadow: '0 8px 24px rgba(54, 163, 236, 0.4)'
}}
        >
          Get Started Free →
        </button>
      </a>

      <a href="https://discord.gg/94apejXRe5" style={{ textDecoration: 'none' }}>
        <button
          style={{
  padding: '18px 56px',
  fontSize: '1.3rem',
  fontWeight: '700',
  background: 'transparent',
  color: '#5BB5F0',
  border: '3px solid #5BB5F0',
  borderRadius: '12px',
  cursor: 'pointer'
}}
        >
          Join Discord
        </button>
      </a>
    </div>
  </div>

  <div
    style={{
borderTop: '1px solid rgba(54, 163, 236, 0.2)',
padding: '40px',
textAlign: 'center',
color: '#64748b',
fontSize: '0.95rem'
}}
  >
    <p>© 2024 Mythic Framework. Built for the FiveM community.</p>

    <div style={{ marginTop: '16px', display: 'flex', gap: '24px', justifyContent: 'center' }}>
      <a href="https://github.com/Mythic-Framework" style={{ color: '#36A3EC', textDecoration: 'none' }}>GitHub</a>
      <a href="https://discord.gg/94apejXRe5" style={{ color: '#36A3EC', textDecoration: 'none' }}>Discord</a>
      <a href="/introduction" style={{ color: '#36A3EC', textDecoration: 'none' }}>Documentation</a>
    </div>
  </div>
</div>