Homepage

<style>

</style>

<style>

  #main-column.w-full.max-w-\[760px\] {
    max-width: unset;
  }
  
  .landing-wrapper {
    margin-top: -6rem !important;
    margin: -5rem 1rem 1rem 1rem;
    white-space: normal;
  }
  .landing-wrapper header > div:first-of-type {
    width: 450px;
    height: 190px;
    margin-right: 3rem;
    background-image: url(https://drive.google.com/uc?export=view&id=1KMzFPEQMjtP8bhgS2ogwoM9Q17vHGu6G);
    background-size: contain;
    background-repeat: no-repeat;
  }
  .landing-wrapper header > div:last-of-type > h1 {
    font-size: 51px;
    font-weight: 600;
    color: #afafaf;
  }
  .landing-wrapper header > div:last-of-type > p {
    font-size: 24px;
  }
  
  .card-title {
    color: #0c121d;
  }
</style>

<div class="landing-wrapper flex flex-col items-center">
    <style>
        .landing-wrapper > .header > div:first-of-type {
        width: 400px;
        height: 175px;
        margin-right: 3rem;
        background-image: url(https://drive.google.com/uc?export=view&id=1KMzFPEQMjtP8bhgS2ogwoM9Q17vHGu6G);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        }
        .landing-wrapper > .header {
        max-width: 1242px;
        }
        .landing-wrapper > .grid {
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 1.5rem;
        margin-top: 2.5rem;
        }
        .landing-wrapper > .grid > .category {
        
        padding: 1.5rem 1rem 1.5rem 1.5rem;
        border-radius: 7px;
        border: 1px solid #AFAFAF;
        transition-duration: 300ms;
        cursor: pointer;
        }
        .landing-wrapper > .grid > .category:hover {
        border-color: transparent;
        box-shadow: 0px 4px 16px 1px #351ad2;
        }
        .landing-wrapper > .grid > .category > div:first-of-type {
        width: 4.75rem;
        height: 4rem;
        margin-right: 1.5rem;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        }
        .landing-wrapper > .grid > .category > div:last-of-type {
        width: 3.5rem;
        height: 100%;
        background-image: url(https://cdn.flipperzero.one/docs-landing-chevron-down.png);
        background-repeat: no-repeat;
        background-size: 20px;
        background-position: bottom 22% right;
        }
        .landing-wrapper > .grid > .category > div:nth-of-type(2) {
        width: 100%;
        }
        .landing-wrapper > .grid > .category:hover > div:last-of-type {
        background-image: url(https://cdn.flipperzero.one/docs-landing-chevron-down-black.png);
        }

        @media (max-width: 920px) {
        .landing-wrapper > .grid {
            grid-template-columns: 1fr 1fr;
        }
        }
        @media (max-width: 780px) {
        .landing-wrapper {
            margin-top: 2rem;
        }
        .header {
            flex-direction: column;
            max-width: 90vw;
        }
        .landing-wrapper > .header > div:first-of-type {
            width: 280px;
            height: 125px;
            margin: 0 0 1.5rem 0;
        }
        .landing-wrapper > .header > div:last-of-type {
            text-align: center;
            max-width: 80vw;
        }
        }
        @media (max-width: 620px) {
        .landing-wrapper {
            margin-top: 1.5rem;
        }
        .landing-wrapper > .header > div:first-of-type {
            width: 235px;
            height: 100px;
        }
        .landing-wrapper > .grid {
            grid-template-columns: 1fr;
        }
        }
        @media (max-width: 375px) {
        .landing-wrapper > .header > div:last-of-type > h1 {
            font-size: 2.5rem;
        }
        .landing-wrapper > .header > div:last-of-type > p {
            font-size: 1.15rem;
        }
        }
    </style>
    <div class="header flex items-center">
        <!-- image -->
        <div></div>
        <div>
            <h1 class="h1 font-bold text-5xl pb-4">OXLA Developer Hub</h1>
            <p class="text-xl">Welcome!👋🏻
            </p>
            <p class="text-xl"> Discover everything you need to know about Oxla right here, right now!
            </p>
        </div>
    </div>
    <div class="grid">
        <div class="category flex items-center"  onclick="window.open('https://docs.oxla.com/introduction', 'this')">
            <div style="background-image: url(https://cdn-icons-png.flaticon.com/512/2339/2339835.png);"></div>
            <div>
                <h4 class="text-xl font-bold text-gray-900 card-title">Introduction </h4>
                <p>Learn about our key concepts, architecture, and what features we offer as one of the leading OLAP solutions.</p>
            </div>
            <div></div>
        </div>
        <div class="category flex items-center" onclick="window.open('https://docs.oxla.com/run-oxla-in-2-minutes', 'this')">
            <div style="background-image: url(https://cdn-icons-png.flaticon.com/512/1067/1067256.png);"></div>
            <div>
                <h4 class="text-xl font-bold text-gray-900 card-title">Getting Started</h4>
                <p>In just a few steps, you'll be up and running with Oxla. </p>
            </div>
            <div></div>
        </div>
        <div class="category flex items-center" onclick="window.open('https://docs.oxla.com/sql-queries', 'this')">
            <div style="background-image: url(https://cdn-icons-png.flaticon.com/512/8309/8309203.png);"></div>
            <div>
                <h4 class="text-xl font-bold text-gray-900 card-title">SQL Queries</h4>
                <p>Do you want to learn how to create, modify and manage tables using queries? We got you covered!</p>
            </div>
            <div></div>
        </div>
        <div class="category flex items-center" onclick="window.open('https://docs.oxla.com/sql-clauses', 'this')">
            <div style="background-image: url(https://cdn-icons-png.flaticon.com/512/2326/2326877.png);"></div>
            <div>
                <h4 class="text-xl font-bold text-gray-900 card-title">SQL Clauses</h4>
                <p>Discover how to write user-friendly queries and analyze data using different constraints and conditions.</p>
            </div>
            <div></div>
        </div>
        <div class="category flex items-center" onclick="window.open('https://docs.oxla.com/sql-data-types', 'this')">
            <div style="background-image: url(https://cdn-icons-png.flaticon.com/512/7771/7771738.png);"></div>
            <div>
                <h4 class="text-xl font-bold text-gray-900 card-title">SQL Data Types</h4>
                <p>Familiarize yourself with the data types we use with practical examples.</p>
            </div>
            <div></div>
        </div>
        <div class="category flex items-center" onclick="window.open('https://docs.oxla.com/sql-functions', 'this')">
            <div style="background-image: url(https://cdn-icons-png.flaticon.com/512/3891/3891639.png);"></div>
            <div>
                <h4 class="text-xl font-bold text-gray-900 card-title">SQL Functions</h4>
                <p>A thorough guide on how to create and call functions to perform different data operations.</p>
            </div>
            <div></div>
        </div>
        <div class="category flex items-center" onclick="window.open('https://docs.oxla.com/sql-mutations', 'this')">
            <div style="background-image: url(https://cdn-icons-png.flaticon.com/512/11481/11481489.png);"></div>
            <div>
                <h4 class="text-xl font-bold text-gray-900 card-title">SQL Mutations</h4>
                <p>Use a sequence of data manipulation to your database.</p>
            </div>
            <div></div>
        </div>
        <div class="category flex items-center" onclick="window.open('https://docs.oxla.com/error-handling', 'this')">
            <div style="background-image: url(https://cdn-icons-png.flaticon.com/128/3067/3067434.png);"></div>
            <div>
                <h4 class="text-xl font-bold text-gray-900 card-title">Error Handling</h4>
                <p>Something went wrong? Head over here to see all your troubleshooting options!</p>
            </div>
            <div></div>
        </div>
        <div class="category flex items-center" onclick="window.open('https://docs.oxla.com/differences-between-oxla-vs-postgresql', 'this')">
            <div style="background-image: url(https://cdn-icons-png.flaticon.com/512/6964/6964609.png);"></div>
            <div>
                <h4 class="text-xl font-bold text-gray-900 card-title">Oxla vs PostgreSQL</h4>
                <p>Dig up on the differences between Oxla & PostgreSQL which need to be addressed.</p>
            </div>
            <div></div>
        </div>
        <div class="category flex items-center" onclick="window.open('https://docs.oxla.com/public-metrics', 'this')">
            <div style="background-image: url(https://cdn-icons-png.flaticon.com/512/901/901492.png);"></div>
            <div>
                <h4 class="text-xl font-bold text-gray-900 card-title">Public Metrics</h4>
                <p>Discover public metrics to measuring impact and informing progress.</p>
            </div>
            <div></div>
        </div>
        <div class="category flex items-center" onclick="window.open('https://docs.oxla.com/oxla-configuration-file', 'this')">
            <div style="background-image: url(https://cdn-icons-png.flaticon.com/512/563/563608.png);"></div>
            <div>
                <h4 class="text-xl font-bold text-gray-900 card-title">Oxla Configuration File</h4>
                <p>Optimize Oxla with its configuration file for development and deployment.</p>
            </div>
            <div></div>
        </div>
        <div class="category flex items-center" onclick="window.open('https://docs.oxla.com/understanding-transactions', 'this')">
            <div style="background-image: url(https://cdn-icons-png.flaticon.com/512/3132/3132992.png);"></div>
            <div>
                <h4 class="text-xl font-bold text-gray-900 card-title">Understanding Transactions</h4>
                <p>Learn more about data management through transactions.</p>
            </div>
            <div></div>
        </div>
        <div class="category flex items-center" onclick="window.open('https://docs.oxla.com/changelog', 'this')">
            <div style="background-image: url(https://archbee.imgix.net/S_lGBDD7H53z1OcF8Kc79/nVF6IGK4AA-f9yA1yOpv6_changelog1black.png);"></div>
            <div>
                <h4 class="text-xl font-bold text-gray-900 card-title">Changelog</h4>
                <p>Discover our changelog.</p>
            </div>
            <div></div>
        </div>
    </div>
</div>

<script>
    
  window.name = 'this'
  function loadLanding () {
    const title = document.querySelector('.ab-doc-name')
    const container = document.querySelector("#__next > div > div > div.ab-space-content.ab-collection-content.container.mx-auto")
    if (window.getComputedStyle(title).display === 'Homepage'){
      title.style.display = "none";
    }
    if (!container) {
      throw new Error('Container not found')
    }
    if (location.pathname === '/' || location.pathname === '/ru') {
      container.style.display = 'none'

      const header = document.querySelector("#__next > div > div > div.ab-top-navbar")
      if (!header) {
        throw new Error('Header not found')
      }

      const wrapper = document.querySelector('.landing-wrapper')
      if (!wrapper) {
        throw new Error('Wrapper not found')
      }
      wrapper.style.display = 'flex'
      header.after(wrapper)
    } else {
      container.style.display = 'flex'
      document.querySelector('.landing-wrapper').style.display = 'none'
    }
  }
  loadLanding()

  localStorage.setItem('oldHref', document.location.href)
  function observe () {
    const bodyList = document.querySelector("body")
    const observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        if (localStorage.getItem('oldHref') != document.location.href) {
          localStorage.setItem('oldHref', document.location.href)
          loadLanding()
        }
      })
    })
    observer.observe(bodyList, {
      childList: true,
      subtree: true
    })
  }
  observe()
</script>