www_aibox/templates/shortcodes/roadmap.html

<!-- Timeline section -->
<div class="mx-auto -mt-8 px-6 lg:py-24 py-4 ">
    <div class="mx-auto grid max-w-2xl grid-cols-1 gap-8 overflow-hidden lg:mx-0 lg:max-w-none lg:grid-cols-4">
      <div>
        <time datetime="2021-08" class="flex items-center text-lg font-semibold leading-6 text-black">
          <svg viewBox="0 0 4 4" class="mr-4 h-3 w-3 flex-none" aria-hidden="true">
            <circle class="green_text" cx="2" cy="2" r="2" fill="currentColor" />
          </svg>
          Phase 1
          <div class="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-900/10 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0" aria-hidden="true"></div>
        </time>
        <div class="road_border_green px-3">
        <p class="mt-6 text-lg font-semibold leading-8 tracking-tight green_text">CREATION OF CORE TECH</p>
        <ul class="mt-1 text-base leading-7 text-gray-600 list-none" style="padding-left: 0px;">
            <li>
              +10 years of development
            </li>
            <br>
            <li>
              Built decentralized, autonomous, edge internet technology
            </li>
        </ul>
      </div>
      </div>
      <div>
        <time datetime="2021-12" class="flex items-center text-lg font-semibold leading-6 text-black">
          <svg viewBox="0 0 4 4" class="mr-4 h-3 w-3 flex-none" aria-hidden="true">
            <circle class="green_text" cx="2" cy="2" r="2" fill="currentColor" />
          </svg>
          Phase 2
          <div class="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-900/10 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0" aria-hidden="true"></div>
        </time>
        <div class="road_border_green px-3">
        <p class="mt-6 text-lg font-semibold leading-8 tracking-tight green_text">TRACTION & EXPANSION</p>
        <ul class="mt-1 text-base leading-7 text-gray-600 list-none" style="padding-left: 0px;">
            <li>
              Open Source Development<br> 
              60+ Countries<br>  
              30,000+ Cores<br>  
              30,000,000 GB of Storage
            </li>
            <br>
            <li>
              Signed with Government of Zanzibar for a digital FreeZone and connected cyber city
            </li>
            <br>
            <li>
              Multiple global partners want to be part of the global expansion
            </li>
        </ul>
      </div>
      </div>
      <div>
        <time datetime="2022-02" class="flex items-center text-lg font-semibold leading-6 blue">
          <svg viewBox="0 0 4 4" class="mr-4 h-3 w-3 flex-none" aria-hidden="true">
            <circle class="blue" cx="2" cy="2" r="2" fill="currentColor" />
          </svg>
          Current | Phase 3
          <div class="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-900/10 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0" aria-hidden="true"></div>
        </time>
        <div class="road_border_blue px-3">
        <p class="mt-6 text-lg font-semibold leading-8 tracking-tight blue">THREEFOLD EXPANSION</p>
        <ul class="mt-1 text-base leading-7 text-gray-600 list-none" style="padding-left: 0px;">
            <li>
                Open Source Mode & Commercial Mode
                Version 3 & Version 4
            </li>
            <br>
            <li>
              Service Levels & Supportability
            </li>
            <br>
            <li>
              Launch Project Internet Capacity
            </li>
            <br>
            <li>
              Expansion towards 1 million nodes
          </li>
        </ul>
      </div>
      </div>
      <div>
        <time datetime="2022-12" class="flex items-center text-lg font-semibold leading-6 text-black">
          <svg viewBox="0 0 4 4" class="mr-4 h-3 w-3 flex-none" aria-hidden="true">
            <circle class="text-gray-500" cx="2" cy="2" r="2" fill="currentColor" />
          </svg>
          Phase 4
          <div class=""></div>
        </time>
        <div class="road_border px-3">
        <p class="mt-6 text-lg font-semibold leading-8 tracking-tight text-gray-600">SOVEREIGNTY FOR ALL</p>
        <ul class="mt-1 text-base leading-7 text-gray-600 list-none" style="padding-left: 0px;">
            <li>
              +1 Million Nodes enabled
            </li>
            <br>
            <li>
              +100 Million people using our system platform.
            </li>
            <br>
            <li>
                A credible and widespread alternative to centralized clouds
            </li>
        </ul>
      </div>
      </div>
    </div>
  </div>

  <style>

    .road_border{
    
      border-left: 1px solid rgb(156, 156, 156);
    }

    .road_border_green{
      border-left: 1px solid #58CF77;
    }

    .road_border_blue{
      border-left: 1px solid #2E83FF;
    }

  </style>