---
layout: default
---

{% assign page_data = site.data.home %}

<section class="content-area">
  <div class="container">
    <div class="content-area-topper">
      <img class="topper-img" src="{{site.baseurl}}{{ page_data.page_logo }}" alt="{% t page_logo_alt %}" />
      <h1 class="content-title mb-2 mt-2">{% t butter_box_title %}</h1>
    </div>
    <div class="content-area-wrapper">
      <p class="content-subtitle text-black ls-40 mb-2">{% t apps_subtitle %}</p>
      <p class="content-text text-black ls-40 mb-2">{% t apps_text %}</p>
      <a class="btn-main btn-modal btn-slim" href="#" data-micromodal-trigger="product-modal">
        <div class="btn-split">
          <div class="btn-logo">
            <img class="btn-android" src="/assets/images/btr-android.svg">
          </div>
          <div class="btn-text">
            <span class="button-main-text">{% t fdroid_button_text %}</span><br/>
            <span class="button-sub-text">{% t fdroid_button_subtext %}</span>  
          </div>  
        </div>
      </a>
      <input id="apps-expander" class="toggle" type="checkbox">
      <label for="apps-expander" class="lbl-toggle content-expander">
        <span>{% t apps_expander_text %}</span>
      </label>
      <div class="content-expanded">
        <p class="mb-2">{% t apps_expanded_text %}</p>
        <div class="content-img">
          <img src="{{site.baseurl}}{{ page_data.app_tiles_image }}" alt="{% t app_tiles_image_alt %}" />
        </div>
      </div>
    </div>
    {% if site.data.deployment.show_chat %}
    <div class="content-area-wrapper">
      <div class="split-content">
        <div class="left-content">
          <p class="content-subtitle text-black ls-40 mb-2">{% t chat_subtitle %}</p>
          <p class="content-text text-black ls-40 mb-2">{% t chat_text %}</p>
          <a class="btn-main uppercase" href="/chat/#/room/%23public%3A{{site.data.deployment.chat_server}}">{% t chat_button_text %}</a>
        </div>
        <div class="right-bleed">
          <img src="/assets/images/btr-convene.png" alt="{% t chat_image_alt %}" />
        </div>
      </div>
      <a href="/chat/#/createroom">
        <div class="outlink content-expander">
          <span>{% t chat_secondary_cta %}</span>
        </div>
      </a>
    </div>
    {% endif %}
    {% if site.data.deployment.show_ipfs %}
    <div class="content-area-wrapper">
      <div class="split-content">
        <div class="left-img">
          <img src="/assets/images/btr-ipfs.png" alt="{% t ipfs_image_alt %}" />
        </div>
        <div class="right-content">
          <p class="content-subtitle text-black ls-40 mb-2">{% t ipfs_subtitle %}</p>
          <p class="content-text text-black ls-40 mb-2">{% t ipfs_text %}</p>
          <a class="btn-main uppercase" href="upload.html">{% t ipfs_button_text %}</a>
        </div>
      </div>
    </div>
    {% endif %}
    <!-- Defaults to display: none; revealed via JS depending on USB insertion. -->
    <div id="usb-butter" class="content-area-wrapper" style="display: none;">
      <div class="split-content">
        <div class="left-img">
          <img src="/assets/images/placeholder-file-folder.webp" alt="{% t file_folder_image_alt %}" />
        </div>
        <div class="right-content">
          <p class="content-subtitle text-black ls-40 mb-2">{% t file_folder_title %}</p>
          <p class="content-text text-black ls-40 mb-2">{% t file_folder_text %}</p>
          <a class="btn-main uppercase" href="/usb-butter/">{% t file_folder_cta %}</a>
        </div>
      </div>
    </div>
  </div>
</section>

{% include modal.html %}