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

{% load static %}
{% load mathfilters %}

{% block title %} Landing Page {% endblock title %}

{% block body_attributes %} {% endblock body_attributes %}


{% block stylesheet %}
{% endblock stylesheet %}

{% block content %}


    <!-- Hero Start -->
    <section class="bg-half-170 bg-white d-table w-100" style="background: url('{% static "images/uv2b_pattern.png" %}') center center;">
        <div class="bg-overlay"></div>
        <div class="container">
            <div class="row align-items-center position-relative mt-3" style="z-index: 1;">
                <div class="col-lg-7 col-md-12">
                    <div class="title-heading mt-4 text-center text-lg-start">
                        <h3 class="heading mb-3 title-dark text-white">Remove Background Music From Your Video Content </h3>
                        <span class="badge rounded-lg bg-soft-primary">Kiss Copyright Strikes Goodbye With Our Intuitive Audio Software</span>
                        <p class="para-desc text-white-50">
                            We get it: There’s nothing more frustrating than spending hours on a video, only for it to be ruined by noise or music playing in the background.<br>
                            That’s why we made UseVoice. <br>
                            Powered by AI, our audio software is the only tool you need to produce content with squeaky-clean audio and start monetizing your hard work without fear! 
                        </p>
                        <div class="mt-4">
                            <a href="#pricing" class="btn btn-light"><i class="uil uil-file-download" ></i>Get Started</a>
                        </div>
                    </div>
                </div><!--end col-->

                <div class="col-lg-5 col-md-12 mt-4 pt-2">
                    <div class="position-relative">
                        <div class="software_hero">
                            <img src="{% static 'images/software.png'%}" class="img-fluid d-block" alt="">
                        </div>
                        <div class="play-icon">
                            <a href="javascript:void(0)" data-type="youtube" data-id="yba7hPeTSjk" class="play-btn lightbox border-0">
                                <i class="mdi mdi-play text-primary rounded-circle shadow"></i>
                            </a>
                        </div>
                    </div>
                </div><!--end col-->
            </div><!--end row-->
        </div><!--end container-->
    </section><!--end section-->
    <div class="position-relative">
        <div class="shape overflow-hidden text-color-white">
            <svg viewBox="0 0 2880 250" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M720 125L2160 0H2880V250H0V125H720Z" fill="currentColor"></path>
            </svg>
        </div>
    </div>
    <!-- Hero End -->

    <!-- How It's Works Start -->
    <section class="section">
        <div class="container ">
            <div class="row align-items-center">
                <div class="col-lg-5 col-md-6">
                    <img src="{% static 'images/svg/interactiondesign-amico.svg' %}" class="img-fluid" alt="">
                </div><!--end col-->
                <div class="col-lg-7 col-md-6 mt-4 mt-sm-0 pt-2 pt-sm-0">
                    <div class="section-title ms-lg-5">
                        <h4 class="title mb-4">How it works </h4>
                        <h5>
                            <i class="uil uil-arrow-circle-right text-primary me-1"></i>
                            Claim Your Free Subscription
                        </h5>
                        <p class="text-muted para-desc ms-4 ps-2">Register for an account to try UseVoice for 14 days, no credit card required.  </p>
                        <h5>
                            <i class="uil uil-arrow-circle-right text-primary me-1"></i>
                            Upload Your Video File
                        </h5>
                        <p class="text-muted para-desc ms-4 ps-2">Our software will auto-detect background music and noise, which you can remove in just a few clicks</p>
                        <h5>
                            <i class="uil uil-arrow-circle-right text-primary me-1"></i>
                            Download and Publish
                        </h5>
                        <p class="text-muted para-desc ms-4 ps-2">Once you’re done, download your monetization-ready video or upload it to your preferred social media channel directly from UseVoice! </p>
                    </div>
                </div><!--end col-->
            </div><!--end row-->
        </div><!--end container-->
    </section> 
    <!-- How It's Works End -->

    <!-- Features Start -->
    <section class="section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-4 col-12">
                    <div class="sticky-bar">
                        <div class="section-title text-lg-start text-center mb-4 mb-lg-0 pb-2 pb-lg-0">
                            <h4 class="title mb-4">Great Features</h4>
                            <p class="text-muted para-desc mb-0 mx-auto">Ready to boost your social media game? You came to the right place: UseVoice’s features are built just for creators like you. </p>
                        </div>
                    </div>
                </div><!--end col-->

                <div class="col-lg-8 col-12">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-12 mt-4 mt-lg-0 pt-2 pt-lg-0">
                                    <div class="card features feature-primary feature-full-bg rounded p-4 bg-light position-relative overflow-hidden border-0">
                                        <span class="h1 icon-color">
                                            <i class="uil uil-meeting-board"></i>
                                        </span>
                                        <div class="card-body p-0 content">
                                            <h5>Selective Music Removal</h5>
                                            <p class="para text-muted mb-0">Choose specific parts of your video to remove background music and noise from even if it has multiple audio tracks</p>
                                        </div>
                                    </div>
                                </div><!--end col-->

                                <div class="col-12 mt-4 pt-2">
                                    <div class="card features feature-primary feature-full-bg rounded p-4 bg-light position-relative overflow-hidden border-0">
                                        <span class="h1 icon-color">
                                            <i class="uil uil-schedule"></i>
                                        </span>
                                        <div class="card-body p-0 content">
                                            <h5>Easy File Uploads</h5>
                                            <p class="para text-muted mb-0">Quickly upload your videos to UseVoice with a computer file or an existing YouTube URL. </p>
                                        </div>
                                    </div>
                                </div><!--end col-->
                            </div><!--end row-->
                        </div><!--end col-->

                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-12 mt-4 mt-sm-0 pt-2 pt-sm-0">
                                    <div class="card features feature-primary feature-full-bg rounded p-4 bg-light position-relative overflow-hidden border-0">
                                        <span class="h1 icon-color">
                                            <i class="uil uil-calender"></i>
                                        </span>
                                        <div class="card-body p-0 content">
                                            <h5>Commitment-Free Trial</h5>
                                            <p class="para text-muted mb-0">Try UseVoice for 14 days </p>
                                        </div>
                                    </div>
                                </div><!--end col-->

                                <div class="col-12 mt-4 pt-2">
                                    <div class="card features feature-primary feature-full-bg rounded p-4 bg-light position-relative overflow-hidden border-0">
                                        <span class="h1 icon-color">
                                            <i class="uil uil-clock"></i>
                                        </span>
                                        <div class="card-body p-0 content">
                                            <h5>Publish Directly to Your Channel</h5>
                                            <p class="para text-muted mb-0">Download your edited videos and/or upload them directly to your social media channel from UseVoice to connect with your followers instantly.</p>
                                        </div>
                                    </div>
                                </div><!--end col-->
                            </div><!--end row-->
                        </div><!--end col-->
                    </div><!--end row-->
                </div><!--end col-->
            </div><!--end row-->
        </div><!--end container-->

       <!-- Icons -->
       <div class="container mt-100 mt-60">
        <div class="row justify-content-center">
            <div class="col-12 text-center">
                <div class="section-title mb-4 pb-2">
                    <h4 class="title mb-4">See everything about your <span class="text-primary">Landrick</span></h4>
                    <p class="text-muted para-desc mx-auto mb-0">Start working with <span class="text-primary fw-bold">Landrick</span> that can provide everything you need to generate awareness, drive traffic, connect.</p>
                </div>
            </div><!--end col-->
        </div><!--end row-->

        <div class="row" id="counter">
            <div class="col-md-3 col-6 mt-4 pt-2">
                <div class="counter-box text-center">
                    <img src="{% static 'images/svg/Asset190.svg'%} " class="avatar avatar-small" alt="">
                    <h2 class="mb-0 mt-4"><span class="counter-value" data-target="97">3</span>%</h2>
                    <h6 class="counter-head text-muted">Happy Client</h6>
                </div><!--end counter box-->
            </div>

            <div class="col-md-3 col-6 mt-4 pt-2">
                <div class="counter-box text-center">
                    <img src="{%static 'images/svg/Asset189.svg' %}" class="avatar avatar-small" alt="">
                    <h2 class="mb-0 mt-4"><span class="counter-value" data-target="15">1</span>+</h2>
                    <h6 class="counter-head text-muted">Awards</h6>
                </div><!--end counter box-->
            </div>

            <div class="col-md-3 col-6 mt-4 pt-2">
                <div class="counter-box text-center">
                    <img src="{% static 'images/svg/Asset192.svg'%}" class="avatar avatar-small" alt="">
                    <h2 class="mb-0 mt-4"><span class="counter-value" data-target="2">0</span>K</h2>
                    <h6 class="counter-head text-muted">Job Placement</h6>
                </div><!--end counter box-->
            </div>

            <div class="col-md-3 col-6 mt-4 pt-2">
                <div class="counter-box text-center">
                    <img src="{% static '/images/svg/Asset187.svg' %}" class="avatar avatar-small" alt="">
                    <h2 class="mb-0 mt-4"><span class="counter-value" data-target="98">3</span>%</h2>
                    <h6 class="counter-head text-muted">Project Complete</h6>
                </div><!--end counter box-->
            </div>
        </div><!--end row-->
    </div><!--end container-->

    </section>
    <!-- Features End --> 

    <!-- Start Pricing -->
    <section id="pricing" class="section bg-light">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 text-center">
                    <div class="section-title mb-4 pb-2">
                        <h4 class="title mb-4">Pricing Plans</h4>
                        <p class="text-muted para-desc mb-0 mx-auto">
                           Start removing background music and noise from your videos today! 
                        </p>
                    </div>
                    
                    <div class="text-center">
                        <ul class="nav nav-pills rounded-pill justify-content-center d-inline-block border py-1 px-2" id="pills-tab" role="tablist">
                            <li class="nav-item d-inline-block">
                                <a class="nav-link px-3 rounded-pill weekly" id="Weekly" data-bs-toggle="pill" href="#Week" role="tab" aria-controls="Week" aria-selected="false">Weekly</a>
                            </li>
                            <li class="nav-item d-inline-block">
                                <a class="nav-link px-3 rounded-pill active monthly" id="Monthly" data-bs-toggle="pill" href="#Month" role="tab" aria-controls="Month" aria-selected="true">Monthly</a>
                            </li>
                            <li class="nav-item d-inline-block">
                                <a class="nav-link px-3 rounded-pill yearly" id="Yearly" data-bs-toggle="pill" href="#Year" role="tab" aria-controls="Year" aria-selected="false">Yearly <span class="badge rounded-pill bg-success">17% Off </span></a>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade" id="Week" role="tabpanel" aria-labelledby="Weekly">    
                            <div class="row justify-content-center">
                                {% for plan in plans_weekly %}
                                <!--start col : {{ plan.plan_name }} plan-->
                                <div class="col-lg-3 col-md-6 col-12 mt-4 pt-2 m-3">
                                    <div class="card pricing pricing-primary business-rate shadow border-0 rounded" style=" width: 295px !important;" >
                                        {% if plan.plan_type == "Normal" %}
                                        <div class="ribbon ribbon-right ribbon-warning overflow-hidden">
                                            <span class="text-center d-block shadow small h6">Best</span>
                                        </div>
                                        {% elif plan.plan_type == "Pro_Yearly" %}
                                        <div class="ribbon ribbon-right ribbon-warning ">
                                            <span class="text-center d-block shadow small h6">20% discount</span>
                                        </div>
                                        {% endif %}
                                        <div class="card-body">
                                            <h6 class="title name fw-bold text-uppercase mb-4">{{ plan.plan_name }}</h6>
                                            <div class="d-flex mb-4">
                                                <span class="h4 mb-0 mt-2">$</span>
                                                <span class="price h1 mb-0">{{ plan.price }}</span>
                                                <span class="h4 align-self-end mb-1">/Week</span>
                                            </div>
                
                                            <ul class="list-unstyled mb-0 ps-0">
                                                {{ plan.describe|safe }}
                                            </ul>
                                            
                                            <button class="btn btn-primary mt-4" id='buy' pay-id="{{ plan.plan_id }}" >
                                                {% if plan.plan_type == "Basic" %} Get Started {% elif plan.plan_type == "Normal" %} Try It Now {% elif plan.plan_type == "Pro" %} Started Now {% else %} Buy Now {% endif %}                           
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <!--end col-->
                                {% endfor %}
                            </div><!--end row-->
                        </div>

                        <div class="tab-pane fade active show" id="Month" role="tabpanel" aria-labelledby="Monthly">    
                            <div class="row justify-content-center">
                                {% for plan in plans_monthly %}
                                <!--start col : {{ plan.plan_name }} plan-->
                                <div class="col-lg-3 col-md-6 col-12 mt-4 pt-2 m-3">
                                    <div class="card pricing pricing-primary business-rate shadow border-0 rounded" style=" width: 295px !important;" >
                                        {% if plan.plan_type == "Normal" %}
                                        <div class="ribbon ribbon-right ribbon-warning overflow-hidden">
                                            <span class="text-center d-block shadow small h6">Best</span>
                                        </div>
                                        {% elif plan.plan_type == "Pro_Yearly" %}
                                        <div class="ribbon ribbon-right ribbon-warning ">
                                            <span class="text-center d-block shadow small h6">20% discount</span>
                                        </div>
                                        {% endif %}
                                        <div class="card-body">
                                            <h6 class="title name fw-bold text-uppercase mb-4">{{ plan.plan_name }}</h6>
                                            <div class="d-flex mb-4">
                                                <span class="h4 mb-0 mt-2">$</span>
                                                <span class="price h1 mb-0">{{ plan.price }}</span>
                                                <span class="h4 align-self-end mb-1">/Month</span>
                                            </div>
                
                                            <ul class="list-unstyled mb-0 ps-0">
                                                {{ plan.describe|safe }}
                                            </ul>
                                            
                                            <button class="btn btn-primary mt-4" id='buy' pay-id="{{ plan.plan_id }}" >
                                                {% if plan.plan_type == "Basic" %} Get Started {% elif plan.plan_type == "Normal" %} Try It Now {% elif plan.plan_type == "Pro" %} Started Now {% else %} Buy Now {% endif %}                           
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <!--end col-->
                                {% endfor %}
                            </div><!--end row-->
                        </div>

                        <div class="tab-pane fade" id="Year" role="tabpanel" aria-labelledby="Yearly">
                            <div class="row justify-content-center">
                                {% for plan in plans_yearly %}
                                <!--start col : {{ plan.plan_name }} plan-->
                                <div class="col-lg-3 col-md-6 col-12 mt-4 pt-2 m-3">
                                    <div class="card pricing pricing-primary business-rate shadow border-0 rounded" style=" width: 295px !important;" >
                                        {% if plan.plan_type == "Normal" %}
                                        <div class="ribbon ribbon-right ribbon-warning overflow-hidden">
                                            <span class="text-center d-block shadow small h6">Best</span>
                                        </div>
                                        {% elif plan.plan_type == "Pro_Yearly" %}
                                        <div class="ribbon ribbon-right ribbon-warning ">
                                            <span class="text-center d-block shadow small h6">20% discount</span>
                                        </div>
                                        {% endif %}
                                        <div class="card-body">
                                            <h6 class="title name fw-bold text-uppercase mb-4">{{ plan.plan_name }}</h6>
                                            <div class="d-flex mb-4">
                                                <span class="h4 mb-0 mt-2">$</span>
                                                <span class="price h1 mb-0">{{ plan.price|div:12|stringformat:".2f" }}</span>
                                                <span class="h4 align-self-end mb-1">(${{ plan.price }}/Year)</span>
                                            </div>
                
                                            <ul class="list-unstyled mb-0 ps-0">
                                                {{ plan.describe|safe }}
                                            </ul>
                                            
                                            <button class="btn btn-primary mt-4" id='buy' pay-id="{{ plan.plan_id }}" >
                                                {% if plan.plan_type == "Basic" %} Get Started {% elif plan.plan_type == "Normal" %} Try It Now {% elif plan.plan_type == "Pro" %} Started Now {% else %} Buy Now {% endif %}                           
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <!--end col-->
                                {% endfor %}
                            </div><!--end row-->
                        </div>    
                    </div>
                </div>
                <!--end col-->
            </div>
            <!--end row-->
            <div class="row justify-content-center mt-5">
                <div class="col-12">
                    <ul class="list-unstyled text-muted">
                        <li><i data-feather="arrow-right" class="fea icon-sm me-2"></i><b>Money-Back Guarantee</b> :If you don’t love UseVoice within the first 30 days of your subscription, we’ll refund it with no questions asked.</li>
                        <li><i data-feather="arrow-right" class="fea icon-sm me-2"></i><b>Security</b>: Built using the latest in online security precautions, you can trust UseVoice to be a safe space to store and develop your creative ideas.</li>
                        <li><i data-feather="arrow-right" class="fea icon-sm me-2"></i><b>Friendly Support</b>: Our support team is available 24/7 to help you make the most of your UseVoice subscription.</li>
                    </ul>
                </div>
            </div>
        </div>
        <!--end container-->
    </section>
    <!-- End Pricing -->

    <!-- Start Demo fithing -->
    <section class="section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12">
                    <div class="section-title text-center">
                        <h4 class="title mb-4">Get started with <span class="text-primary fw-bold"> UseVoice. </span> for free</h4>
                        <p class="text-muted para-desc mx-auto">Sign up for <span class="text-primary fw-bold">Usevoice</span>'s 2 week trial of the premium plan, get access to all features and start removing background music today!.</p>
                        
                        <div class="mt-4">
                            {% for plan in plans %}
                                {% if plan.plan_type == "Pro" %}
                                    <button  class="btn btn-primary m-1" id='buy' pay-id="{{ plan.plan_id }}"> Get Start <i class="uil uil-angle-right-b"></i></button>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div><!--end col-->
            </div><!--end row-->
        </div>
        <!--end container-->
    </section>
    <!-- End -->
{% endblock content %}

{% block javascripts %}

    <script>
        var buy_button = document.querySelectorAll("#buy");
        buy_button.forEach(
            function( element ) {
                element.addEventListener( 'click', function( e ) {
                    $.ajax({
                        type: 'POST',
                        url: "{% url 'accounts:signup' %}",
                        data: {
                            'membership': element.getAttribute('pay-id'),
                            csrfmiddlewaretoken: '{{ csrf_token }}'
                        },
                        success: function (response) {
                            if (response['result'] == 'Not Found'){
                                location.href="/#pricing"
                            }else{
                                location.href = "{% url 'accounts:signup' %}"
                            }
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert(xhr.status);
                            alert(thrownError);
                        }
                    });
                });
            }
        );
    </script>
{% endblock javascripts %}