---
# VitePress configuration
layout: home

hero:
  name: 'XO Stack'
  text: 'On Bitcoin Cash'
  tagline: Building smart applications on the BCH UTXO Network
  actions:
    - theme: brand
      text: Tools
      link: /tools/primitives
    - theme: brand
      text: Playground
      link: /playground
---

<!--
TODO: When we have docs public, move this back into the top config section above.
    - theme: brand
      text: GitLab
      link: https://gitlab.com/GeneralProtocols/xo/stack
    - theme: brand
      text: Quick Start
      link: /quick-start
-->

<!-- Alert Banner for "In Development" -->
<div class="alert-banner VPButton brand">
  The XO Stack is in active development. Any available code is for learning and exploration only — expect frequent changes and significant instability until production release of the stack.
</div>

<!-- Promo section on front page with animated X and O behind the image -->
<div class="promo">
  <div class="promo-text">
    <h1>Create robust scalable <span class="clip">Bitcoin Cash</span> apps, faster than ever before.</h1>
    <p>XO provides cutting-edge tools to help developers create Bitcoin Cash apps with ease and efficiency. With a focus on scalability, security, and speed, you can bring your app to life in no time.</p>
    <p><!--Start building now and-->Unlock the full potential of Bitcoin Cash in the digital economy!</p>
  </div>
  <div class="promo-image">
    <!-- Animated X and O elements behind the image section -->
    <div class="animated-bg">
      <span class="xo xo-1">x</span>
      <span class="xo xo-2">o</span>
      <span class="xo xo-3">o</span>
      <span class="xo xo-4">x</span>
    </div>
    <img src="/icons/stack_light.png" alt="Stack Light Image" />
  </div>
</div>

<!-- Feature section -->
<div class="VPFeatures VPHomeFeatures">
  <div class="container">
    <h1 style="text-align:center;margin:20px">Stack Features</h1>
    <div class="items" style="">
      <div class="item grid-3">
        <div class="VPLink no-icon VPFeature feature-box-or">
          <article class="box">
            <img class="VPImage dark-only" height="48" width="48" src="/icons/template-dark.svg" alt="">
            <img class="VPImage light-only" height="48" width="48" src="/icons/template-light.svg" alt="">
            <h2 class="title">Templates</h2>
            <p class="details">Easily build decentralized applications using a secure and standardized templating language.</p>
            <!--v-if-->
          </article>
        </div>
      </div>
      <div class="item grid-3">
        <div class="VPLink no-icon VPFeature feature-box-or">
          <article class="box">
            <img class="VPImage dark-only" height="48" width="48" src="/icons/framework-dark.svg" alt="">
            <img class="VPImage light-only" height="48" width="48" src="/icons/framework-light.svg" alt="">
            <h2 class="title">Modular</h2>
            <p class="details">Adapt and scale your applications with flexible adapters tailored to your needs.</p>
            <!--v-if-->
          </article>
        </div>
      </div>
      <div class="item grid-3">
        <div class="VPLink no-icon VPFeature feature-box-or">
          <article class="box">
            <img class="VPImage dark-only" height="48" width="48" src="/icons/tools-dark.svg" alt="">
            <img class="VPImage light-only" height="48" width="48" src="/icons/tools-light.svg" alt="">
            <h2 class="title">Tools</h2>
            <p class="details">Enhance your workflow with powerful tools designed to simplify development and testing.</p>
            <!--v-if-->
          </article>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Footer Logo section -->
<div class="vp-doc" style="text-align: center; margin: 15px;">
  <h4>Developed by:</h4>
</div>
<div style="text-align: center; margin: 10px;">
  <a href="https://generalprotocols.com" target="_blank" style="display: inline-block;">
    <img class="light-only" src="./gp_logo_light.png" alt="GP Logo" style="width: 100px; height: auto;">
    <img class="dark-only" src="./gp_logo_dark.png" alt="GP Logo" style="width: 100px; height: auto;">
  </a>
</div>

<style scoped>
/* Alert Banner */
.alert-banner {
  padding: 12px 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  margin: 20px auto;
  border-radius: 8px;
  max-width: 900px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  color: white;
  font-weight: bold;
}

/* Default Grid Layout for larger screens */
.items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

/* Medium Screens (e.g., tablets) */
@media (max-width: 1024px) {
  .items {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

/* Small Screens (e.g., mobile devices) */
@media (max-width: 768px) {
  .items {
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }
}

.VPFeature {
  display: block;
  border: 1px solid var(--vp-c-bg-soft);
  border-radius: 12px;
  height: 100%;
  background-color: var(--vp-c-bg-soft);
  transition: border-color 0.25s, background-color 0.25s;
}

.VPFeature.link:hover {
  border-color: var(--vp-c-brand-1);
}

.box {
  display: flex;
  flex-direction: column;
  padding: 24px;
  height: 100%;
}

.box > :deep(.VPImage) {
  margin-bottom: 20px;
}

.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  border-radius: 6px;
  background-color: var(--vp-c-default-soft);
  width: 48px;
  height: 48px;
  font-size: 24px;
  transition: background-color 0.25s;
}

.title {
  line-height: 24px;
  font-size: 16px;
  font-weight: 600;
}

.details {
  flex-grow: 1;
  padding-top: 8px;
  line-height: 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-text-2);
}

.link-text {
  padding-top: 8px;
}

.link-text-value {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--vp-c-brand-1);
}

.link-text-icon {
  margin-left: 6px;
}
</style>