{% 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 content %}
<!-- Content
  ============================================= -->
  <div id="content"> 
    
    <!-- Send/Request Money
    ============================================= -->
    <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>
    <!-- Send/Request Money End --> 
    
    <!-- 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">Lisque persius interesset his et, in quot quidam persequeris vim, ad mea essent possim iriure.</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>Lisque persius interesset his et, in quot quidam persequeris vim, ad mea essent possim iriure.</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>Persius interesset his et, in quot quidam persequeris vim, ad mea essent possim iriure.</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 Encryption</h3>
                  <p>Essent lisque persius interesset his et, in quot quidam persequeris vim, ad mea essent possim iriure.</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-book-reader"></i> </div>
                  <h3 class="font-weight-400">Open Source</h3>
                  <p>Quidam lisque persius interesset his et, in quot quidam persequeris vim, ad mea essent possim iriure.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Why choose us End --> 
    
    <!-- How it works
    ============================================= -->
    <section class="section">
      <div class="container">
        <h2 class="text-9 text-center text-uppercase font-weight-400">As simple as 1-2-3</h2>
        <p class="lead text-center mb-5">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <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 fea 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="#" 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-6 bg-dark"></div>
                <div class="hero-bg rounded" style="background-image:url({% static 'matrixhosting/images/matrix.jpg' %});"></div>
                <div class="hero-content">
                  <h2 class="text-6 text-white mb-3">Why MatrixHosting?</h2>
                  <p class="text-light mb-5">Lisque persius interesset his et, in quot quidam persequeris vim, ad mea essent possim iriure. Mutat tacimates id sit. Ridens mediocritatem ius an, eu nec magna imperdiet.</p>
                  <h2 class="text-6 text-white mb-3">Request a matrix instance</h2>
                  <p class="text-light">Lisque persius interesset his et, in quot quidam persequeris vim, ad mea essent possim iriure. Mutat tacimates id sit. Ridens mediocritatem ius an, eu nec magna imperdiet.</p>
                  <p class="text-light mb-0">Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</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>Over 180 countries</h3>
                <p>Essent lisque persius interesset his et, in quot quidam.</p>
              </div>
              <div class="featured-box style-1">
                <div class="featured-box-icon text-primary"> <i class="far fa-check-circle"></i> </div>
                <h3>Lower Fees</h3>
                <p>Lisque persius interesset his et, in quot quidam persequeris.</p>
              </div>
              <div class="featured-box style-1">
                <div class="featured-box-icon text-primary"> <i class="far fa-check-circle"></i> </div>
                <h3>Easy to Use</h3>
                <p>Essent lisque persius interesset his et, in quot quidam.</p>
              </div>
              <div class="featured-box style-1">
                <div class="featured-box-icon text-primary"> <i class="far fa-check-circle"></i> </div>
                <h3>Faster Payments</h3>
                <p>Quidam lisque persius interesset his et, in quot quidam.</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% secure</h3>
                <p>Essent lisque persius interesset his et, in quot quidam.</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>Quidam lisque persius interesset his et, in quot quidam.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

    <section class="hero-wrap p-8 shadow-md" style="height: 280px;">
      <div class="hero-mask opacity-3 bg-dark"></div>
      <div class="hero-bg hero-bg-scrll" style="background-image:url({% static 'matrixhosting/images/how.jpg' %});"></div>
      <div class="hero-content py-0 py-lg-5 my-0 my-lg-5">
        <div class="container text-center">
          <h2 class="text-9 text-white font-weight-400 text-uppercase mb-5">How does it works? </h2>
          <a class="video-btn d-flex" href="#" data-src="" data-toggle="modal" data-target="#videoModal"> <span class="btn-video-play bg-white shadow-md rounded-circle m-auto"><i class="fas fa-play"></i></span> </a> </div>
      </div>
    </section>

      <!-- Testimonial
    ============================================= -->
    <section class="section">
        <div class="container">
          <h2 class="text-9 text-center">What people say about MatrixHosting</h2>
          <p class="lead text-center mb-4">Quidam lisque persius interesset his et, in quot quidam</p>
          <div class="row">
            <div class="col-lg-10 col-xl-8 mx-auto">
              <div class="owl-carousel owl-theme" data-autoplay="true" data-nav="true" data-loop="true" data-margin="30" data-stagepadding="5" data-items-xs="1" data-items-sm="1" data-items-md="1" data-items-lg="1">
                <div class="item">
                  <div class="testimonial rounded text-center p-4">
                    <p class="text-4">“Easy to use, reasonably priced simply dummy text of the printing and typesetting industry. Quidam lisque persius interesset his et, in quot quidam possim iriure.”</p>
                    <strong class="d-block font-weight-500">Jay Shah</strong> <span class="text-muted">Founder at Icomatic Pvt Ltd</span> </div>
                </div>
                <div class="item">
                  <div class="testimonial rounded text-center p-4">
                    <p class="text-4">“I am happy Working with printing and typesetting industry. Quidam lisque persius interesset his et, in quot quidam persequeris essent possim iriure.”</p>
                    <strong class="d-block font-weight-500">Patrick Cary</strong> <span class="text-muted">Freelancer from USA</span> </div>
                </div>
                <div class="item">
                  <div class="testimonial rounded text-center p-4">
                    <p class="text-4">“Quidam lisque persius interesset his et, in quot quidam.”</p>
                    <strong class="d-block font-weight-500">De Mortel</strong> <span class="text-muted">Online Retail</span> </div>
                </div>
                <div class="item">
                  <div class="testimonial rounded text-center p-4">
                    <p class="text-4">“I have used them twice now. Good rates, very efficient service and it denies high street banks an undeserved windfall. Excellent.”</p>
                    <strong class="d-block font-weight-500">Chris Tom</strong> <span class="text-muted">User from UK</span> </div>
                </div>
                <div class="item">
                  <div class="testimonial rounded text-center p-4">
                    <p class="text-4">“Quidam lisque persius interesset his et, in quot quidam”</p>
                    <strong class="d-block font-weight-500">Mauri Lindberg</strong> <span class="text-muted">Freelancer from Australia</span> </div>
                </div>
                <div class="item">
                  <div class="testimonial rounded text-center p-4">
                    <p class="text-4">“Only trying it out since a few days. But up to now excellent. Seems to work flawlessly.”</p>
                    <strong class="d-block font-weight-500">Dennis Jacques</strong> <span class="text-muted">User from USA</span> </div>
                </div>
              </div>
              <div class="text-center mt-4"><a href="#" class="btn-link text-4">See more people review<i class="fas fa-chevron-right text-2 ml-2"></i></a></div>
            </div>
          </div>
        </div>
      </section>
      <!-- Testimonial end --> 
    
    <!-- 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">What is Matrix?</a> </h5>
                  </div>
                  <div id="collapse1" class="collapse" aria-labelledby="heading1" data-parent="#popularTopics">
                    <div class="card-body"> Lisque persius interesset his et, in quot quidam persequeris vim, ad mea essent possim iriure. Mutat tacimates id sit. Ridens mediocritatem ius an, eu nec magna imperdiet. </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">How to request a VM?</a> </h5>
                  </div>
                  <div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="#popularTopics">
                    <div class="card-body"> Iisque Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </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">Is my money safe?</a> </h5>
                  </div>
                  <div id="collapse3" class="collapse" aria-labelledby="heading3" data-parent="#popularTopics">
                    <div class="card-body"> Iisque persius interesset his et, in quot quidam persequeris vim, ad mea essent possim iriure. Mutat tacimates id sit. Ridens mediocritatem ius an, eu nec magna imperdiet. </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">How much fees does Matrixhosting charge?</a> </h5>
                  </div>
                  <div id="collapse4" class="collapse" aria-labelledby="heading4" data-parent="#popularTopics">
                    <div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </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 can I cancel my subscription?</a> </h5>
                  </div>
                  <div id="collapse5" class="collapse" aria-labelledby="heading5" data-parent="#popularTopics">
                    <div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </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">Can I add credit to my wallet?</a> </h5>
                  </div>
                  <div id="collapse6" class="collapse" aria-labelledby="heading6" data-parent="#popularTopics">
                    <div class="card-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div>
                  </div>
                </div>
              </div>
              <hr class="mt-0">
            </div>
          </div>
          <div class="text-center mt-4"><a href="#" 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 %}