{{#get "posts" filter="primary_tag:developers+featured:true" limit="3"}}

  <div class="bg-gray-50 dark:bg-gray-900 py-2 mt-20">

    <div class="w-default mt-36 my-0 grid grid-cols-1 lg:grid-cols-2 gap-10 mb-10 ">
      <div class="relative">
        <div class="border-l-4 dark:border-gray-700">
          <h2 class="text-4xl pl-5 mb-5 font-bold text-blue-600">Built
            for developers</h2>
          <p class=" pl-5 text-lg text-gray-800 dark:text-gray-400">
            We're building the <code>git</code> of AEC -
            independent, object based real-time version
            control for BIM & CAD data. Focus on the
            business logic rather than extracting data from
            proprietary software.
          </p>
        </div>

        <div class="relative grid gap-4 grid-cols-1 md:grid-cols-2 mt-10">
          {{#foreach posts}}

            <div class="rounded-lg transition overflow-hidden bg-white dark:bg-gray-900 dark:hover:bg-gray-800 shadow hover:shadow-2xl dark:text-gray-200">
              <div class="flex-1 p-6 flex flex-col justify-between">
                <div class="flex-1">
                  <a href="{{url}}" class="block mt-1">
                    <p class="text-xl font-semibold text-gray-900 dark:text-gray-200">
                      {{title}}
                    </p>
                    <p class="mt-2 text-sm text-gray-500 line-clamp-2">
                      {{excerpt}}
                    </p>
                    <footer class="mt-2">
                      <p class="text-base font-semibold text-blue-500">
                        Read More
                      </p>
                    </footer>
                  </a>
                </div>
              </div>
            </div>

          {{/foreach}}

          <div class="relative rounded-xl py-5 hover:rounded-2xl shadow hover:shadow-2xl dark:hover:bg-gray-800 bg-white dark:bg-gray-900 transition overflow-hidden flex">
            <a href="/developers" class="w-full self-center">
              <div class="relative px-8">
                <div class="text-xl font-semibold text-blue-600">
                  Start Developing →
                </div>
              </div>
            </a>
          </div>
        </div>

      </div>


      {{!-- Viewer Demo --}}

      <div class="relative lg:-mt-72 lg:mb-72 rounded-xl shadow-2xl overflow-hidden">
        <p class="relative text-xl lg:hidden font-semibold text-gray-900 dark:text-gray-200 bg-white dark:bg-gray-900 py-8 px-8">
          3d Viewer: Batteries Included
        </p>
        <div class="relative h-96 w-full flex items-center justify-center bg-gradient-to-br from-white dark:from-gray-900 via-gray-200 dark:via-gray-700 dark:to-gray-800 to-white"
          id="renderer">
          <iframe src="https://speckle.xyz/embed?stream=3073b96e86"style="width: 100%; height:100%;"></iframe>
        </div>
        <div class="w-full bg-gray-300 dark:bg-gray-900 text-gray-500 text-xs py-2 px-8">
          $ ▸ superApp.js <span class="ml-3 opacity-50">#
            double click an object to focus</span>
        </div>
        <pre class="" style="margin:0 !important; font-size: 0.8em !important;">
        <code class="language-javascript">
  // Sample 3d viewer app
  // See: https://github.com/specklesystems/speckle-server
  import Viewer from '@speckle/viewer'

  let viewer = new Viewer( )

  // load a model
  async function load( commitUrl ) {
    await viewer.loadObject( commitUrl )
  }</code></pre>

      </div>
    </div>

  </div>
{{/get}}