{% extends "matrixhosting/base.html" %}

{% load static i18n %}

{% block main %}

<section class="hero-wrap section">
    <div class="hero-mask opacity-6 bg-dark"></div>
    <div class="hero-bg hero-bg-scroll" style="background-image:url({% static 'matrixhosting/images/how.jpg' %});"></div>
    <div class="hero-content">
      <div class="container">
        <div class="row">
          <div class="col-12 col-lg-7 col-xl-6 text-center text-lg-left">
            <h1 class="text-11 text-white mb-4">{%trans "We Promise Low Fees" %}<br>
                {%trans "and No Extra Charges" %}</h1>
            <p class="text-5 text-white line-height-4 mb-4">{% trans "Signing up today and join the matrix global networks. Create your account today and start!" %}</p>
            <a href="{% url 'matrix:payment' %}" class="btn btn-primary my-2 mr-2">{%trans "Open a Free Account" %}</a></div>
        </div>
      </div>
    </div>
  </section>

  <section class="section bg-white">
    <div class="container">
      <h2 class="text-9">{%trans "How the pricing works?" %}</h2>
      <p class="lead mb-5">{%trans "We try to be as transparent as possible for our Matrix pricing. The pricing is made of 2 essential parts." %}</p>
      <div class="row">
        <div class="col-sm-6 col-lg-6 mb-5 mb-lg-0">
          <div class="featured-box">
            <h3>{%trans "One-time set up fee" %}</h3>
            <p class="text-3">{%trans "For initially setting up the Matrix instance for you. We set up the Matrix and also customize* the login page with your own logo and text." %}</p>
            </div>
        </div>
        <div class="col-sm-6 col-lg-6 mb-5 mb-sm-0">
          <div class="featured-box">
            <h3>{%trans "Monthly maintenance fee" %}</h3>
            <p class="text-3">{%trans "includes the price of a dedicated virtual machine(VM)** and the fee for maintaining the service" %}</p>
            </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-6 col-lg-6 mb-5 mb-lg-0">
            <p class="text-3">{%trans "Further customization such as favicon, background and more is possible at additional fee, get in touch with us to learn more." %}</p>
        </div>
        <div class="col-sm-6 col-lg-6 mb-5 mb-lg-0">
            <p class="text-3">{%trans "The number of users or size of rooms depend on the size of your VM, and you can scale them anytime you want. The extention will be done according to our standard VM pricing." %}</p>
        </div>
      </div>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <h2 class="text-9 text-center text-uppercase font-weight-400">{%trans "Matrix Light" %}</h2>
      <p class="lead text-center mb-5">{%trans "Matrix Light is an economic and practical plan for using Matrix chat. If you are not familiar with Matrix and want to start chatting on it you can start with Matrix Light plans. You can easily upgrading to bigger Matrix Light or to Matrix Pro anytime you want." %}</p>
      <div class="row">
        <div class="col-sm-6 col-lg-4 mb-4">
          <div class="bg-white shadow-sm rounded">
            <h5 class="bg-light p-3">{%trans "Matrix Light 1 (47.5 CHF/Month)" %}</h5>
            <div class="text-2 px-3">
                <ul class="list-unstyled line-height-5">
                    <li><i class="fas fa-check mr-2"></i> {%trans "Suitable for chatting with up to 25 users" %}</li>
                    <li><i class="fas fa-check mr-2"></i> {%trans "VM with 1 Core, 2 GB RAM, 10 GB SSD and 100 GB HDD" %}</li>
                    <li><i class="fas fa-check mr-2"></i> {%trans "Maintenance fee 30 CHF/month included" %}</li>
                    <li><i class="fas fa-check mr-2"></i> {%trans "Application firewall included" %}</li>
                    <li class="mt-2"><a href="{% url 'matrix:payment' %}?product=matrix-light-1">{%trans "Initial setup fee 50 CHF" %}</a></li>
                </ul>
                <div class="py-3">
                    <a href="{% url 'matrix:payment' %}?product=matrix-light-1" class="btn btn-outline-primary btn-sm shadow-none">{%trans "Order Now!" %}</a>
                </div>
            </div>
          </div>
          </a>
        </div>
        <div class="col-sm-6 col-lg-4 mb-4">
            <div class="bg-white shadow-sm rounded">
              <h5 class="bg-light p-3">{%trans "Matrix Light 2 (66.5 CHF/Month)" %}</h5>
              <div class="text-2 px-3">
                  <ul class="list-unstyled line-height-5">
                      <li><i class="fas fa-check mr-2"></i> {%trans "Suitable for chatting with up to 50 users" %}</li>
                      <li><i class="fas fa-check mr-2"></i> {%trans "VM with 2 Core, 4 GB RAM, 10 GB SSD and 500 GB HDD" %}</li>
                      <li><i class="fas fa-check mr-2"></i> {%trans "Maintenance fee 30 CHF/month included" %}</li>
                      <li><i class="fas fa-check mr-2"></i> {%trans "Application firewall included" %}</li>
                      <li class="mt-2"><a href="{% url 'matrix:payment' %}?product=matrix-light-2">{%trans "Initial setup fee 50 CHF" %}</a></li>
                  </ul>
                  <div class="py-3">
                      <a href="{% url 'matrix:payment' %}?product=matrix-light-2" class="btn btn-outline-primary btn-sm shadow-none">{%trans "Order Now!" %}</a>
                  </div>
              </div>
            </div>
            </a>
          </div>
          <div class="col-sm-6 col-lg-4 mb-4">
            <div class="bg-white shadow-sm rounded">
              <h5 class="bg-light p-3">{%trans "Matrix Light 3 (92.5 CHF/Month)" %}</h5>
              <div class="text-2 px-3">
                  <ul class="list-unstyled line-height-5">
                      <li><i class="fas fa-check mr-2"></i> {%trans "Suitable for chatting with up to 100 users" %}</li>
                      <li><i class="fas fa-check mr-2"></i> {%trans "VM with 2 Core, 8 GB RAM, 10 GB SSD and 1000 GB HDD" %}</li>
                      <li><i class="fas fa-check mr-2"></i> {%trans "Maintenance fee 30 CHF/month included" %}</li>
                      <li><i class="fas fa-check mr-2"></i> {%trans "Application firewall included" %}</li>
                      <li class="mt-2"><a href="{% url 'matrix:payment' %}?product=matrix-light-3">{%trans "Initial setup fee 50 CHF" %}</a></li>
                  </ul>
                  <div class="py-3">
                      <a href="{% url 'matrix:payment' %}?product=matrix-light-3" class="btn btn-outline-primary btn-sm shadow-none">{%trans "Order Now!" %}</a>
                  </div>
              </div>
            </div>
            </a>
          </div>
      </div>
    </div>
  </section>

  <section class="section bg-white">
    <div class="container">
      <h2 class="text-9 text-center text-uppercase font-weight-400">{%trans "Matrix Pro" %}</h2>
      <p class="lead text-center mb-5">{%trans "For communities with more frequent and dynamic use, we recommend Matrix Pro plans. Matrix Pro Chat offers fast reaction and optimal perfomance. Matrix Pro is designed to fit the nature of Matrix which benefits a lot from memory caching." %}</p>
      <div class="row">
        <div class="col-sm-6 col-lg-4 mb-4">
          <div class="bg-white shadow-sm rounded">
            <h5 class="bg-light p-3">{%trans "Matrix Pro 1 (108.5 CHF/Month)" %}</h5>
            <div class="text-2 px-3">
                <ul class="list-unstyled line-height-5">
                    <li><i class="fas fa-check mr-2"></i> {%trans "Suitable for communities up to 50 users" %}</li>
                    <li><i class="fas fa-check mr-2"></i> {%trans "VM with 2 Cores, 16 GB RAM, 10 GB SSD and 200 GB HDD" %}</li>
                    <li><i class="fas fa-check mr-2"></i> {%trans "Maintenance fee 30 CHF/month included" %}</li>
                    <li><i class="fas fa-check mr-2"></i> {%trans "Application firewall included" %}</li>
                    <li class="mt-2"><a href="{% url 'matrix:payment' %}?product=matrix-pro-1">{%trans "Initial setup fee 50 CHF" %}</a></li>
                </ul>
                <div class="py-3">
                    <a href="{% url 'matrix:payment' %}?product=matrix-pro-1" class="btn btn-outline-primary btn-sm shadow-none">{%trans "Order Now!" %}</a>
                </div>
            </div>
          </div>
          </a>
        </div>
        <div class="col-sm-6 col-lg-4 mb-4">
            <div class="bg-white shadow-sm rounded">
              <h5 class="bg-light p-3">{%trans "Matrix Pro 2 (322.5 CHF/Month)" %}</h5>
              <div class="text-2 px-3">
                  <ul class="list-unstyled line-height-5">
                      <li><i class="fas fa-check mr-2"></i> {%trans "Suitable for communities with 50-100 users" %}</li>
                      <li><i class="fas fa-check mr-2"></i> {%trans "VM with 4 Core, 64 GB RAM, 10 GB SSD and 1000 GB HDD" %}</li>
                      <li><i class="fas fa-check mr-2"></i> {%trans "Maintenance fee 30 CHF/month included" %}</li>
                      <li><i class="fas fa-check mr-2"></i> {%trans "Application firewall included" %}</li>
                      <li class="mt-2"><a href="{% url 'matrix:payment' %}?product=matrix-pro-2">{%trans "Initial setup fee 50 CHF" %}</a></li>
                  </ul>
                  <div class="py-3">
                      <a href="{% url 'matrix:payment' %}?product=matrix-pro-2" class="btn btn-outline-primary btn-sm shadow-none">{%trans "Order Now!" %}</a>
                  </div>
              </div>
            </div>
            </a>
          </div>
          <div class="col-sm-6 col-lg-4 mb-4">
            <div class="bg-white shadow-sm rounded">
              <h5 class="bg-light p-3">{%trans "Matrix Pro 3 (958.5 CHF/Month)" %}</h5>
              <div class="text-2 px-3">
                  <ul class="list-unstyled line-height-5">
                      <li><i class="fas fa-check mr-2"></i> {%trans "Suitable for communities with 100+ users" %}</li>
                      <li><i class="fas fa-check mr-2"></i> {%trans "VM with 8 Core, 200 GB RAM, 10 GB SSD and 5000 GB HDD" %}</li>
                      <li><i class="fas fa-check mr-2"></i> {%trans "Maintenance fee 30 CHF/month included" %}</li>
                      <li><i class="fas fa-check mr-2"></i> {%trans "Application firewall included" %}</li>
                      <li class="mt-2"><a href="{% url 'matrix:payment' %}?product=matrix-pro-3">{%trans "Initial setup fee 50 CHF" %}</a></li>
                  </ul>
                  <div class="py-3">
                      <a href="{% url 'matrix:payment' %}?product=matrix-pro-3" class="btn btn-outline-primary btn-sm shadow-none">{%trans "Order Now!" %}</a>
                  </div>
              </div>
            </div>
            </a>
          </div>
      </div>
    </div>
  </section>
  <section class="bg-light">
    <div class="hero-content py-5">
        <div class="container text-center">
            <p class="lead">{%trans "Your usecase doesn't fit the offers below? We do custom-sized deployment for you. Get in touch with us by email or even on matrix, via" %} <a href="https://matrix.to/#/%23matrix:ungleich.ch">#matrix:ungleich.ch</a></p>
        </div>
    </div>
  </section>

  <section class="bg-primary opacity-7">
    <div class="hero-content py-5">
      <div class="container text-center">
        <h2 class="text-9 text-white">{%trans "Custom deployment consultancy" %}</h2>
        <p class="lead text-white mb-4">{%trans "It is possible to integrate your Matrix instance into your other projects and apps. There are a lot of ways to best utilize the security and federation Matrix offers to best fit your usecase. Talk to us about your ideas and we will help you realise how to customize your Matrix. Get in touch with us via support@ungleich.ch and you will hear from our team." %} 
        </p>
        <a href="mailto:support@ungleich.ch" class="btn btn-light">{%trans "Contact US" %}</a></div>
    </div>
  </section>

{% endblock %}