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

{% load static i18n %}

{% block css_extra %}
    <link
    href="{% static 'matrixhosting/css/owl.carousel.min.css' %}"
    rel="stylesheet"
    type="text/css"
    />
{% endblock %}

{% block navbar %}
    {% with transparent_header=True %}
        {{ block.super }}
    {% endwith %}
{% endblock %}

{% block main %}
<!-- Content
  ============================================= -->
  <div id="content"> 
    
    <!-- calculator
    ============================================= -->
    <section class="hero-wrap">
      <div class="hero-mask opacity-6 bg-dark"></div>
      <div class="hero-bg" style="background-image:url({% static 'matrixhosting/images/background-image.jpg' %});"></div>
      <div class="hero-content d-flex fullscreen">
        <div class="container my-auto py-5">
          <div class="row mt-4 pt-5">
            <div class="col-lg-6 col-xl-7 my-auto text-center text-lg-left pb-4 pb-lg-0">
              <h2 class="text-14 font-weight-400 text-white mb-4">The Secure<br class="d-none d-xl-block">
                and decentralized communication <br class="d-none d-xl-block">
                on your private cloud.</h2>
              <p class="lead text-light mb-4">Create & Host your matrix instances in minutes with great rates and low
                fees. Own your data.</p>
              <a href="#" class="btn-link text-4">See more details<i class="fas fa-chevron-right text-2 ml-2"></i></a> </div>
              {% include "matrixhosting/includes/_calculator_form.html"  %}
          </div>
        </div>
      </div>
    </section>
    <!-- calculator --> 
    
    <!-- Why choose us
    ============================================= -->
    <section class="section bg-white">
      <div class="container">
        <h2 class="text-9 text-center text-uppercase font-weight-400">What you will get?</h2>
        <p class="lead text-center mb-5"> A secure chat that does not depend on a single point of failure </p>
        <div class="row">
          <div class="col-lg-10 mx-auto">
            <div class="row">
              <div class="col-sm-6 mb-4">
                <div class="featured-box style-3">
                  <div class="featured-box-icon border border-primary text-primary rounded-circle"> <i class="fas fa-comments"></i> </div>
                  <h3 class="font-weight-400">Messaging</h3>
                  <p>Matrix gives you simple HTTP APIs and SDKs (iOS, Android, Web) to create your own messaging plateform</p>
                </div>
              </div>
              <div class="col-sm-6 mb-4">
                <div class="featured-box style-3">
                  <div class="featured-box-icon border border-primary text-primary rounded-circle"> <i class="fas fa-cloud"></i> </div>
                  <h3 class="font-weight-400">Decentralised</h3>
                  <p>When you send a message in Matrix, it is replicated over all the servers whose users are participating in a given conversation</p>
                </div>
              </div>
              <div class="col-sm-6 mb-4 mb-sm-0">
                <div class="featured-box style-3">
                  <div class="featured-box-icon border border-primary text-primary rounded-circle"> <i class="fas fa-lock"></i> </div>
                  <h3 class="font-weight-400">End-to-End Encrypted (E2EE)</h3>
                  <p>Matrix ensures that only the intended recipients can ever decrypt your messages, while warning if any unexpected devices are added to the conversation</p>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="featured-box style-3">
                  <div class="featured-box-icon border border-primary text-primary rounded-circle"> <i class="fas fa-users"></i> </div>
                  <h3 class="font-weight-400">Bridge with other chats</h3>
                  <p>An important idea in Matrix is Interoperability. This means that Matrix is open to exchanging data and messages with other platforms</p>
                </div>
              </div>
              <div class="col-sm-6 mb-4 mb-sm-0">
                <div class="featured-box style-3">
                  <div class="featured-box-icon border border-primary text-primary rounded-circle"> <i class="fas fa-book-reader"></i> </div>
                  <h3 class="font-weight-400">100% Open Source</h3>
                  <p>Everything we use, create and encourage is Free and Open Source Software.</p>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="featured-box style-3">
                  <div class="featured-box-icon border border-primary text-primary rounded-circle"> <i class="fas fa-water"></i> </div>
                  <h3 class="font-weight-400">100% Renewable Energy</h3>
                  <p>We assure you that our electricity is made of 100% renewable energy. *0.1 % of electricity comes from solar power.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Why choose us End --> 
    <section class="section">
      <div class="container">
        <div class="row">
          <div class="col-lg-6">
            <div class="card bg-dark-3 shadow-sm border-0"> <img class="card-img opacity-8" src="{% static 'matrixhosting/images/matrix.jpg' %}" width="570" height="362" alt="banner">
            </div>
          </div>
          <div class="col-lg-6 mt-5 mt-lg-0">
            <div class="ml-4">
              <h2 class="text-9">Growing with ease</h2>
              <p class="text-4">Organise and grow your community without ethical compromises. You can start with any size you want and scale as you grow.</p>
              <ul class="list-unstyled text-3 line-height-5">
                <li><i class="fas fa-check mr-2"></i>Start from 40 CHF/Month</li>
                <li><i class="fas fa-check mr-2"></i>No hidden Cost</li>
                <li><i class="fas fa-check mr-2"></i>No limit number of users</li>
                <li><i class="fas fa-check mr-2"></i>No Fossil fules</li>
              </ul>
              <a href="#" class="btn btn-outline-primary shadow-none mt-2">How Pricing Works</a> </div>
          </div>
        </div>
      </div>
    </section>
    <section class="section bg-white">
      <div class="container">
        <div class="row">
          <div class="col-lg-6 mt-5 mt-lg-0">
            <div class="ml-4">
              <h2 class="text-9">Talk to everybody via bridge while staying on Matrix</h2>
              <p class="text-4">You can engage in other chat networks such as Slack, Telegram, Whatsapp, IRC, Mattermost, Rocketchat, Discord and more by <a href="https://github.com/42wim/matterbridge" target="new">Matterbridge</a>.</p>
              <p class="text-4">The bridging allows you to stay on your own Matrix and receiving and sending messages to a bigger community.</p>
              <a href="https://ungleich.ch/en-us/cms/matterbridge-matrix/" class="btn btn-outline-primary shadow-none mt-2">Learn more about Matterbridge</a> </div>
          </div>
          <div class="col-lg-6">
            <div class="card border-0"> <img class="card-img" src="{% static 'matrixhosting/images/matrix-bridge-irc.jpg' %}" width="570" height="362" alt="banner">
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="section">
      <div class="container">
        <div class="row">
          <div class="col-lg-6">
            <div class="card bg-dark-9"> <img class="card-img" src="{% static 'matrixhosting/images/encryption.jpeg' %}" width="570" height="362" alt="banner">
            </div>
          </div>
          <div class="col-lg-6 mt-5 mt-lg-0">
            <div class="ml-4">
              <h2 class="text-9">Secure Matrix chat for your action</h2>
              <p class="text-4">It's a secure chat that does not depend on a single point of failure and does not give away your data to the malicious third parties.</p>
              <p class="text-4"> is <a href="https://matrix.org/blog/2020/05/06/cross-signing-and-end-to-end-encryption-by-default-is-here" target="new">End-to-End Encrypted (E2EE)</a> by default. As your communication is encrypted with multiple keys, the thrid parties can not decrypt your message, including the hosting company and the law enforcement. Your communication and community data stays private and secure.</p>
          </div>
        </div>
      </div>
    </section>
    
    <!-- How it works
    ============================================= -->
    <section class="section bg-white">
      <div class="container">
        <h2 class="text-9 text-center text-uppercase font-weight-400">As simple as 1-2-3</h2>
        <div class="row">
          <div class="col-sm-4 mb-4">
            <div class="featured-box style-4">
              <div class="featured-box-icon text-dark shadow-none border-bottom"><span class="w-100 text-20 font-weight-500">1</span></div>
              <h3 class="mb-3">Sign Up Your Account</h3>
              <p class="text-3 font-weight-300">Sign up for your free personal/business Account in a minute.</p>
            </div>
          </div>
          <div class="col-sm-4 mb-4">
            <div class="featured-box style-4">
              <div class="featured-box-icon text-dark shadow-none border-bottom"><span class="w-100 text-20 font-weight-500">2</span></div>
              <h3 class="mb-3">Select your subscription plan</h3>
              <p class="text-3 font-weight-300">Choose from multiple subscription plans, monthly and yearly.</p>
            </div>
          </div>
          <div class="col-sm-4 mb-4 mb-sm-0">
            <div class="featured-box style-4">
              <div class="featured-box-icon text-dark shadow-none border-bottom"><span class="w-100 text-20 font-weight-500">3</span></div>
              <h3 class="mb-3">Confirm your Order</h3>
              <p class="text-3 font-weight-300">Once you confirm your order, your instance will be up in minutes.</p>
            </div>
          </div>
        </div>
        <div class="text-center mt-2"><a href="{% url 'account_signup' %}" class="btn btn-primary">Open a Free Account</a></div>
      </div>
    </section>
    <!-- How it works End --> 
    
    <section class="section">
        <div class="container">
          <h2 class="text-9 text-center">Why choose MatrixHosting?</h2>
          <p class="lead text-center mb-5">Here’s Top 4 reasons why using a MatrixHosting account for manage your money.</p>
          <div class="row">
            <div class="col-md-6 mb-4 mb-md-0">
              <div class="hero-wrap section h-100 p-5 rounded">
                <div class="hero-mask rounded opacity-7 bg-dark"></div>
                <div class="hero-bg rounded" style="background-attachment: scroll;background-image:url({% static 'matrixhosting/images/renewable-energy.jpeg' %});"></div>
                <div class="hero-content">
                  <h2 class="text-6 text-white mb-3">Fully Sustainable</h2>
                  <p class="text-light">MatrixHosting is a clean chat for the environment.
                    You can build and grow your community with as little carbon footprint as possible. The Matrix instance we run are hosted in <a href="https://datacenterlight.ch/" target="new">Data Center Light</a>, a Swiss datacenter built with sustainability to its core.</p>
                  <h2 class="text-6 text-white mb-3">100% Renewable Energy</h2>
                  <p class="text-light mb-0">Not every data center has an in-house hydropower plant, but we do. Data Center Light runs with 99.9%* hydropower. Few meters away from where our servers are running, the hydropower plant is generating electricity in the basement. We assure you that our electricity is made of 100% renewable energy. 

                    *0.1 % of electricity comes from solar power. </p>
                  
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="featured-box style-1">
                <div class="featured-box-icon text-primary"> <i class="far fa-check-circle"></i> </div>
                <h3>100% Renewable</h3>
                <p>*99.9% hydro power, 0.1 % solar power.</p>
              </div>
              <div class="featured-box style-1">
                <div class="featured-box-icon text-primary"> <i class="far fa-check-circle"></i> </div>
                <h3>100% Open Source</h3>
                <p>Everything we use, create and encourage is Open Source.</p>
              </div>
              <div class="featured-box style-1">
                <div class="featured-box-icon text-primary"> <i class="far fa-check-circle"></i> </div>
                <h3>Passive Cooling</h3>
                <p>We use passive cooling in our data centers to eliminate the used cooling energy.</p>
              </div>
              <div class="featured-box style-1">
                <div class="featured-box-icon text-primary"> <i class="far fa-check-circle"></i> </div>
                <h3>Reuse Hardware</h3>
                <p>We try always to reuse the hardware if it's still maintained.</p>
              </div>
              <div class="featured-box style-1">
                <div class="featured-box-icon text-primary"> <i class="far fa-check-circle"></i> </div>
                <h3>Reuse Old Factories</h3>
                <p>We build our datacenters by reusing old factories.</p>
              </div>
              <div class="featured-box style-1">
                <div class="featured-box-icon text-primary"> <i class="far fa-check-circle"></i> </div>
                <h3>24/7 customer service</h3>
                <p>Customers can get help and find answers to questions as soon as they come up.</p>
              </div>
            </div>
          </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">Try it now for free</h2>
            <p class="lead text-white mb-4">Want to try it before committing to a plan? You can create a free account and see how you like it. You can chat, join different rooms and invite others. You will join our actual work chat where all our team and the bigger community of Matrix users are working and chatting day and night. 
            </p>
            <a href="https://ungleich.ch/u/projects/open-chat/" class="btn btn-light">A free test ride on ungleich Matrix</a> </div>
        </div>
      </section>
    
    <!-- Frequently asked questions
    ============================================= -->
    <section class="section bg-white">
        <div class="container">
          <h2 class="text-9 text-center">Frequently Asked Questions</h2>
          <p class="lead text-center mb-4 mb-sm-5">Can't find it here? Check out our <a class="btn-link" href="help.html">Help center</a></p>
          <div class="row">
            <div class="col-md-10 col-lg-8 mx-auto">
              <hr class="mb-0">
              <div class="accordion accordion-alternate arrow-right" id="popularTopics">
                <div class="card">
                  <div class="card-header" id="heading1">
                    <h5 class="mb-0"> <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1"> Can I use a custom domain name?</a> </h5>
                  </div>
                  <div id="collapse1" class="collapse" aria-labelledby="heading1" data-parent="#popularTopics">
                    <div class="card-body">
                      <p>Yes! You will have to give us three domain names:</p>
                      <p>a) the <strong>homeserver</strong>: this is where the actual server is running - this can be on domain "A" - in case of ungleich we use ungleich.matrix.ungleich.cloud and give away YOURNAME.matrix.ungleich.cloud for free</p>
                      <p>b) the address of the <strong>web client </strong>- this is where people with their webbrowser go to - this should be different from "A". Often this is something like <strong>chat.example.org</strong>or <strong>matrix.example.org</strong>. In case of ungleich this domain is matrix.ungleich.ch</p>
                      <p>c) the main <strong>matrix domain</strong>: the one you use for users and rooms. This is usually your main domain and is different from A. For ungleich this is ungleich.ch. Most people will choose their "main domain", for instance <strong>example.org</strong> here.</p>
                    </div>
                  </div>
                </div>
                <div class="card">
                  <div class="card-header" id="heading2">
                    <h5 class="mb-0"> <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">Can I change the subdomain after the Matrix setup?</a> </h5>
                  </div>
                  <div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="#popularTopics">
                    <div class="card-body">No, since your homeserver will federate with the broader network</div>
                  </div>
                </div>
                <div class="card">
                  <div class="card-header" id="heading3">
                    <h5 class="mb-0"> <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3">Are video/audio calls in Matrix End-to-end-encrypted(E2EE)?</a> </h5>
                  </div>
                  <div id="collapse3" class="collapse" aria-labelledby="heading3" data-parent="#popularTopics">
                    <div class="card-body"> Video & Phone is handled by a jitsi server by default - matrix adds it as an integration, but does not handle video/audio directly. So the answer is: not E2EE for audio/video.
                    </div>
                  </div>
                </div>
                <div class="card">
                  <div class="card-header" id="heading4">
                    <h5 class="mb-0"> <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapse4" aria-expanded="false" aria-controls="collapse4">Does ungleich have access to my Matrix admin UI? How does my chat content stay secure?</a> </h5>
                  </div>
                  <div id="collapse4" class="collapse" aria-labelledby="heading4" data-parent="#popularTopics">
                    <div class="card-body"> Once you change the initial password we do not have external access to the software anymore but we have access to the underlying server since we manage it: we can read and change things in the database 'by hand' since we have physical access to it. However end-to-end encrypted rooms stay secure. The content is encrypted with the user's keys and to us it will be shown in ciphertext.</div>
                  </div>
                </div>
                <div class="card">
                  <div class="card-header" id="heading5">
                    <h5 class="mb-0"> <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapse5" aria-expanded="false" aria-controls="collapse5">How many users can I have? What are the resources allocated to my matrix server?</a> </h5>
                  </div>
                  <div id="collapse5" class="collapse" aria-labelledby="heading5" data-parent="#popularTopics">
                    <div class="card-body"> We do not enforce a limit of the number of users: you can do anythign you want as long as you fit the resources allocated to your homeserver. You are provided with 1GB of memory, 1vCPU and 20GB of storage with the base offer, which can be extended on demand (Pricing is the same as ipv6onlyhosting VMs, since that's what we use underneath). </div>
                  </div>
                </div>
                <div class="card">
                  <div class="card-header" id="heading6">
                    <h5 class="mb-0"> <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapse6" aria-expanded="false" aria-controls="collapse6"> What client can I use? Do you recommend one?</a> </h5>
                  </div>
                  <div id="collapse6" class="collapse" aria-labelledby="heading6" data-parent="#popularTopics">
                    <div class="card-body">We recommend and provide you a web version of the <a href="https://element.io/" target="new">Element client</a> (desktop and mobile) but you can use any matrix client. </div>
                  </div>
                </div>
              </div>
              <hr class="mt-0">
            </div>
          </div>
          <div class="text-center mt-4"><a href="https://redmine.ungleich.ch/projects/open-infrastructure/wiki/Ungleich_Matrix-as-a-Service_(MaaS)" class="btn-link text-4">See more FAQ<i class="fas fa-chevron-right text-2 ml-2"></i></a></div>
        </div>
      </section>
      <!-- Frequently asked questions end --> 
  </div>
  <!-- Content end --> 

{% endblock %}

{% block js_extra %} 
<script src="{% static 'matrixhosting/js/owl.carousel.min.js' %}"></script>
<script src="{% static 'matrixhosting/js/main.js' %}"></script>
{% endblock %}