{% extends "base.html" %}
{% block title %}Home{% endblock %}
{% block content %}
<header class="bg-primary-gradient">
  <div class="container pt-4 pt-xl-5 pb-4 pb-xl-5">
      <div class="row gy-5 pt-5">
          <div class="col-md-8 col-xl-6 text-center text-md-start mx-auto">
              <div class="text-center">
                  <h2>Empowering Privacy with Open Source</h2>
              </div>
              <p class="text-center special-header fancy-text-primary mb-0" style="font-weight: 500;">Private.coffee</p>
          </div>
          <div class="col-12 col-lg-10 mx-auto justify-content-center d-flex"><img class="mx-auto" src="/assets/img/logo-inv_grad.svg" style="max-width: 400px;width: 80vw;"></div>
      </div>
  </div>
</header>
<section class="bg-white">
  <div class="container bg-white py-5">
      <div class="row">
          <div class="col-md-8 col-xl-6 text-center mx-auto">
              <p class="fw-bold mb-2 text-primary">Our self-hosted Services</p>
              <h3 class="fw-bold">Private.coffee provides a collection of services that respect your privacy. </h3>
          </div>
      </div>
      <div class="py-5 p-lg-5">
          <div class="row row-cols-1 row-cols-md-2 mx-auto" style="max-width: 900px;">
            {% for service in services.services %}
            {% if not service.exclude_from_index %}
              <div class="col mb-5">
                  <div class="card shadow-sm">
                      <div class="card-body px-4 py-5 px-md-5">
                          <div class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon" style="top: 1rem;right: 1rem;position: absolute;"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-chat-text text-primary">
                                  <path d="M2.678 11.894a1 1 0 0 1 .287.801 10.97 10.97 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8.06 8.06 0 0 0 8 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894m-.493 3.905a21.682 21.682 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105z"></path>
                                  <path d="M4 5.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8m0 2.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5"></path>
                              </svg></div>
                          <h5 class="fw-bold card-title">{{ service.name }}</h5>
                          <p class="text-muted card-text mb-4">{{ service.long_description }}</p>
                          {% for link in service.links %}
                          <a class="btn btn-primary shadow w-100 text-center" href="{{ link.url }}">{{ link.name }}</a>
                          {% endfor %}
                      </div>
                  </div>
              </div>
            {% endif %}
            {% endfor %}
          </div>
      </div>
  </div>
</section>
<section class="bg-primary-gradient">
  <div class="container py-5">
      <div class="row align-items-center">
          <div class="col">
              <p class="text-end special-header fancy-text-primary mb-0">Privacy</p>
          </div>
          <div class="col">
              <p class="text-start mb-1" style="font-size: 1.6rem;">from the <strong>community</strong></p>
              <p class="text-start mb-0" style="font-size: 1.6rem;">for the <strong>community</strong></p>
          </div>
      </div>
      <div class="mx-auto" style="max-width: 900px;">
          <div class="row row-cols-1 row-cols-md-2 d-flex justify-content-center">
              <div class="col mb-4">
                  <div class="card bg-primary-subtle">
                      <div class="card-body text-center px-4 py-5 px-md-5">
                          <p class="fw-bold text-primary card-text mb-2">Join and rebel</p>
                          <h5 class="fw-bold card-title mb-3">Be a part of the open source community!</h5><a class="btn btn-primary btn-sm" href="/membership.html">Learn more</a>
                      </div>
                  </div>
              </div>
              <div class="col mb-4">
                  <div class="card bg-secondary-subtle">
                      <div class="card-body text-center px-4 py-5 px-md-5">
                          <p class="fw-bold text-secondary card-text mb-2">Private Hosting</p>
                          <h5 class="fw-bold card-title mb-3">Interested in Hosting Services?</h5><a class="btn btn-secondary btn-sm" href="mailto:support@private.coffee">Get in touch</a>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</section>
<section class="py-5">
  <div class="container">
      <div class="row mb-5">
          <div class="col-md-8 col-xl-6 text-center mx-auto">
              <p class="fw-bold mb-2 text-primary">Contacts</p>
              <h2 class="fw-bold">How you can reach us</h2>
          </div>
      </div>
      <div class="row d-flex justify-content-center">
          <div class="col-md-4 col-xl-4 d-flex justify-content-center justify-content-xl-start">
              <div class="d-flex flex-wrap flex-md-column justify-content-md-start align-items-md-start h-100">
                  <div class="d-flex align-items-center p-3">
                      <div class="bs-icon-md bs-icon-circle bs-icon-primary shadow d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon bs-icon-md"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-envelope">
                              <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"></path>
                          </svg></div>
                          <div class="px-2">
                            <h6 class="fw-bold mb-0">Email</h6>
                            <p class="text-muted mb-0">support@private.coffee</p>
                        </div>
                  </div>
              </div>
          </div>
      </div>
      <div class="row d-flex justify-content-center">
        <div class="col-md-4 col-xl-4 d-flex justify-content-center justify-content-xl-start">
            <div class="d-flex flex-wrap flex-md-column justify-content-md-start align-items-md-start h-100">
                <div class="d-flex align-items-center p-3">
                    <div class="bs-icon-md bs-icon-circle bs-icon-primary shadow d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon bs-icon-md"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-envelope">
                            <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z"></path>
                        </svg></div>
                      <div class="px-2">
                        <h6 class="fw-bold mb-0">Matrix</h6>
                        <p class="text-muted mb-0"><a href="https://matrix.pcof.fi/#/#private.coffee:private.coffee">#private.coffee:private.coffee</a></p>
                    </div>  
                </div>
            </div>
        </div>
    </div>
  </div>
</section>
{% endblock %}