safing-web/roadmap/index.html

---
title: What's Next At Safing
layout: page
---

<section style="margin-top: 12rem; margin-bottom: 8rem;" class="mb-40">
  <div class="items-center h-full">
    <div class="relative max-w-screen-sm lg:max-w-screen-xl mx-auto px-4 sm:px-6  xl:px-0 lg:flex">
      <div class="pt-8">
        <div class="text-center lg:text-left">
          <span class="text-sm opacity-55 tracking-normal">01.08.2020</span>
          <h2 id="influences" class="text-5xl tracking-tight font-extrabold leading-none pb-10 pt-2">
            Next Up
          </h2>
          <p class="text-md opacity-55 max-w-lg mx-auto">
            Predicting the future is hard, that is why you will not find any deadlines here. Instead, get insight into what we are working on at the moment.
          </p>
          <p class="text-md opacity-55 max-w-lg mx-auto">
            This page shows bigger projects only. Bug fixes, Quality of Life improvements, support, planning, etc..., they all get lost in this big picture overview.
          </p>
        </div>
      </div>
      <div class="relative mt-24 lg:mt-0 lg:absolute lg:right-0 lg:mr-10">
        <div class="mx-auto max-w-xs transform hover:scale-95 duration-150 ease-in-out">
          <a href="/roadmapblog/">
            <div class="relative" style="max-width: 365px;">
                <img src="/assets/img/thumbnails/blog/progress-update.png">
              <span class="absolute text-white right-0 bottom-0 pr-3 pb-3" style="font-size: 3.1rem; font-weight: 800;">#01</span>
            </div>
            <div class="pt-6 max-w-xs">
              <span class="opacity-25">
              26. Jun 2020
              </span>
              <p>Progress Update June - #01</p>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>

  {% if site.data.next.cards.done.size > 0 %}
    <div class="pt-48">
      <div class="gridwrapper">
        <div style="margin-top: -3rem;" class="flex absolute pl-8 ">
          <span class="opacity-50">Recently Done</span>
          <strong class="pl-2 opacity-75">({{ site.data.next.cards.done.size }})</strong>
        </div>
        {% for card in site.data.next.cards.done %}
          {% include project_card.html state = 'done' %}
        {% endfor %}
      </div>
    </div>
  {% endif %}

  {% if site.data.next.cards.in_progress.size > 0 %}
    <div class="pt-48">
      <div class="gridwrapper">
        <div style="margin-top: -3rem;" class="flex absolute pl-8 ">
          <span class="opacity-50">In Progress</span>
          <strong class="pl-2 opacity-75">({{ site.data.next.cards.in_progress.size }})</strong>
        </div>

        <div class="flex absolute pl-8 ">
          <span class="opacity-50">Being in progress does not imply the project will be completed soon. Some may take a while and others might even get discarded. Read the monthly blog updates to follow the progress and conclusion of every project.</span>
        </div>

        {% for card in site.data.next.cards.in_progress %}
          {% include project_card.html state = 'in_progress' %}
        {% endfor %}
      </div>
    </div>
  {% endif %}

  {% if site.data.next.cards.discarded.size > 0 %}
    <div class="pt-48">
      <div class="gridwrapper">
        <div style="margin-top: -3rem;" class="flex absolute pl-8 ">
          <span class="opacity-50">Discarded</span>
          <strong class="pl-2 opacity-75">({{ site.data.next.cards.discarded.size }})</strong>
        </div>

        {% for card in site.data.next.cards.discarded %}
          {% include project_card.html state = 'discarded' %}
        {% endfor %}
      </div>
    </div>
  {% endif %}
</section>
<section class="mt-20 lg:mt-40 mb-16 lg:mb-48">
<div class="items-center h-full">
  <div class="container mx-auto px-8 sm:px-0 flex">
    <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto">
      <div class="pb-16 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">
        <img src="{{ site.img_url }}page-specific/roadmap/files.png" alt="">
      </div>
      <div class="inline-block max-w-lg">
        <h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-auto">
          There is More. <br/> A Lot More.
        </h2>
        <p class="text-md opacity-55 max-w-lg">
          We have plans and ideas for years to come. We will never be "done" but always evolve and progress. I'm sure you have cool ideas for us too!
          Take a look what we already plan on doing in the longer run.
        </p>
        <p class="text-md opacity-55 max-w-lg">
          As disclosed above we're still working on the backlog. Coming SoonTM.
        </p>
        <!-- <div class="py-10 flex">
          <a href="{{ site.backlog_url }}">
            <button type="button" style="background-color: #000;" class="transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
              Explore the Backlog
            </button>
          </a>
        </div> -->
      </div>
      <div class="hidden pt-16 lg:pt-0 ml-0 lg:ml-32 lg:block self-center">
        <img src="{{ site.img_url }}page-specific/roadmap/files.png" alt="">
      </div>
      </div>
    </div>
  </div>
</section>


<!--
  this is only for the roadmap.
  Luke will clean this at a later date.
-->
<style>
  .gridwrapper{
    display: grid;
    grid-template-columns: repeat(1, auto);
    grid-template-rows: auto;
    grid-row-gap: 10px;
    grid-auto-flow: row;
    margin-left: auto;
    margin-right: auto;
    max-width: 1350px;
  }

  .card{
    max-width: auto;
  }

  .shadowthing{
    box-shadow: 0 0px 90px 0 rgba(59, 93, 199, 0.1), 0 0px 5px 0 rgba(0, 0, 0, 0);
  }

  @media (min-width: 768px) {

   }

  @media (min-width: 640px) {
    .gridwrapper{
      grid-template-columns: repeat(1, auto);
    }
  }

  @media (min-width: 1024px) {
    .gridwrapper{
      grid-template-columns: repeat(3, minmax(auto, 445px));
    }

    .card{
      max-width: 445px;
    }
  }

</style>