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

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

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

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

{% block stylesheet %}
<style>
    @media screen and (min-width: 1050px) and (max-width: 1123px) {
        .pricing {
            width: 260px;
        }
    }

    @media screen and (min-width: 1124px) and (max-width: 1196px) {
        .pricing {
            width: 260px;
        }
    }

    @media screen and (min-width: 1197px) and (max-width: 1269px) {
        .pricing {
            width: 260px;
        }
    }

    @media screen and (min-width: 1270px) {
        .pricing {
            width: 260px;
        }
    }
    .text-left {
        text-align: left;
    }
    .fixed-size { 
        height: 80px;
    }
</style>
{% endblock stylesheet %}

{% block content %}
    <!-- Hero Start -->
    <section class="bg-home d-flex align-items-center background-effect bg-soft-primary" id="home" style="background-image: url('{% static 'images/back_v1.png' %}'); background-size: contain; background-repeat: no-repeat;">
        <div class="container z-index-1" >
            <div class="row align-items-center">
                <div class="col-lg-6 col-md-6">
                    <div class="title-heading">
                        <h4 class="display-4 fw-bold fs-1 text-dark mb-4 ampleSoftProMedium"> Easily Remove Background Music and Noise From Your Videos. </h4>
                        <p class="para-desc mx-auto fs-6 text-muted mb-4 styreneALight">
                            Influencer-approved quality audio content. Sharing your creative content made simple.
                        </p> 
                        <!-- p class="mx-auto fs-8 text-muted mb-1 mt-4 styreneALight">
                            *14 days free. No credit card required.
                        </p !-->
                        <div class="mt-0">
                            <a href="#pricing" class="btn btn-primary">
                                GET STARTED 
                            </a>
                        </div>
                    </div>
                </div><!--end col-->

                <div class="col-lg-6 col-md-6 mt-4 pt-2 mt-sm-0 pt-sm-0">
                     <img src="{% static "images/illustrations/back_transparent.png" %}" class="img-fluid" alt=""> 
                    <div class="play-icon">
                        <a href="javascript:void(0)" data-type="youtube" data-id="w5oXvl077sU" class="play-btn lightbox border-0">
                            <i class="mdi mdi-play text-primary rounded-circle shadow"></i>
                        </a>
                    </div>
                </div><!--end col-->
            </div><!--end row-->
        </div><!--end container-->

        <ul class="circles p-0 mb-0">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </section><!--end section-->
    <!-- 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/illustrations/1.png' %}" 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 ampleSoftProMedium">How it works </h4>
                        <h5 class="styreneALight">
                            <span class="me-1">1 - </span>
                            Claim your free subscription.
                        </h5>
                        <p class="text-muted para-desc ms-4 ps-2 styreneALight">Register for a free account to try UseVoice.  </p>
                        <h5 class="styreneALight">
                            <span class="me-1">2 - </span>
                            Upload your video file.
                        </h5>
                        <p class="text-muted para-desc ms-4 ps-2 styreneALight">Our software will auto-detect background music and noise, which you can remove in just a few clicks.</p>
                        <h5 class="styreneALight">
                            <span class="me-1">3 - </span>
                            Download and publish.
                        </h5 class="styreneALight">
                        <p class="text-muted para-desc ms-4 ps-2 styreneALight">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 id="features" class="section bg-light">
        <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 ampleSoftProMedium">Key features</h4>
                            <p class="text-muted para-desc mb-0 mx-auto styreneALight">Ready to boost your social media game? You came to the right place: UseVoice’s features are built 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 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 styreneALight">
                                            <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 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 styreneALight">
                                            <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 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 styreneALight">
                                            <h5>Commitment-Free trial</h5>
                                            <p class="para text-muted mb-0">Try UseVoice for free. </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 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 styreneALight">
                                            <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-->
    </section>
    <!-- Features End -->

    <!-- Santa Start -->
    <section id="services" class="section">
       <!-- Icons -->
       <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 ampleSoftProMedium">Why <span class="text-primary">UseVoice</span> is right for you:</h4>
                        <p class="text-muted para-desc mx-auto mb-0 styreneALight">Start removing background music and noise from your videos today!</p>
                    </div>
                </div><!--end col-->
            </div><!--end row-->

            <div class="row justify-content-center" id="counter">
                <div class="col-md-3 col-6 m-4 pt-2">
                    <div class="counter-box text-center">
                        <img src="{% static 'images/illustrations/icons8-money-back guarantee-100.png'%} " class="avatar avatar-small" alt="">
                        <h4 class="mb-0 mt-4 styreneALight">
                            <span> Money-Back Guarantee </span>
                        </h4>
                        <h6 class="counter-head text-muted mt-2 styreneALight">If you don’t love UseVoice within the first 30 days of your subscription, we’ll refund it with no questions asked.</h6>
                    </div><!--end counter box-->
                </div>

                <div class="col-md-3 col-6 m-4 pt-2">
                    <div class="counter-box text-center">
                        <img src="{%static 'images/illustrations/icons8-Securty-100.png' %}" class="avatar avatar-small" alt="">
                        <h4 class="mb-0 mt-4 styreneALight">
                            <span> Security </span>
                        </h4>
                        <h6 class="counter-head text-muted mt-2 styreneALight">Built using the latest online security methods, you can trust UseVoice to be a safe space to store and develop your creative ideas.</h6>
                    </div><!--end counter box-->
                </div>

                <div class="col-md-3 col-6 m-4 pt-2">
                    <div class="counter-box text-center">
                        <img src="{% static 'images/illustrations/icons8-24 Support-100.png' %}" class="avatar avatar-small" alt="">
                        <h4 class="mb-0 mt-4 styreneALight">
                            <span> Friendly Support </span>
                        </h4>
                        <h6 class="counter-head text-muted mt-2 styreneALight">Our support team is available 24/7 to help you make the most of your UseVoice subscription.</h6>
                    </div><!--end counter box-->
                </div>
            </div><!--end row-->
        </div><!--end container-->
    </section>
    <!-- Santa End -->

    <!-- Start Pricing -->
    <section id="pricing" class="section bg-light">
        <div class="px-6">
            <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 ampleSoftProMedium">Pricing plans for UseVoice</h4>
                        <p class="text-muted para-desc mb-0 mx-auto styreneALight">
                            Try our service for
                            <span class="text-primary fw-bold "> with free account </span>
                            before committing! No credit card details required.
                        </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 styreneALight" 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 styreneALight" 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 styreneALight" id="Yearly" data-bs-toggle="pill" href="#Year" role="tab" aria-controls="Year" aria-selected="false">Yearly <span class="badge rounded-pill bg-success">20% 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-2 col-md-6 col-12 mt-4 pt-2 m-2">
                                    <div class="card pricing pricing-primary business-rate shadow border-0 rounded">
                                        {% if plan.plan_type == "Normal" %}
                                        <div class="ribbon ribbon-right ribbon-warning overflow-hidden">
                                            <span class="text-center d-block shadow small h6 styreneALight">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 styreneALight">20% discount</span>
                                        </div>
                                        {% endif %}
                                        <div class="card-body">
                                            <h6 class="title name fw-bold text-uppercase mb-4 styreneALight">{{ plan.plan_name }}</h6>
                                            <div class="d-flex mb-4">
                                                <span class="h4 mb-0 mt-2 styreneALight">$</span>
                                                <span class="price h1 mb-0 styreneALight">{{ plan.price }}</span>
                                                <span class="h4 align-self-end mb-1 styreneALight">/week</span>
                                            </div>

                                            <div class="fixed-size styreneALight">
                                                <p class="text-left styreneALight">
                                                {% if plan.plan_type == "Basic" %}
                                                The go-to for newbie creators.
                                                {% elif plan.plan_type == "Normal" %}
                                                Already a pro creator? Upload easily to YouTube and start monetising!
                                                {% elif plan.plan_type == "Pro" %}
                                                Professional-grade audio all in one place.
                                                {% else %}
                                                Great for once-off videos to test the power of the platform.
                                                {% endif %}
                                                </p>
                                            </div>

                                            <button type="button" class="btn btn-primary mt-2 mb-2 styreneALight buy" pay-id="{{ plan.plan_id }}" >
                                                {% if plan.plan_type == "Basic" %} GO BASIC {% elif plan.plan_type == "Normal" %} GO CREATOR {% elif plan.plan_type == "Pro" %} GO PRO {% else %} GET STARTED {% endif %}
                                            </button>

                                            <ul class="list-unstyled mb-0 ps-0 text-left styreneALight">
                                                {{ plan.describe|safe }}
                                            </ul>
 

                                        </div>
                                    </div>
                                </div>
                                <!--end col--> 
                                {% endfor %}
                            </div><!--end row-->
                        </div>

                        <div class="tab-pane fade active show styreneALight" 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-2 col-md-6 col-12 mt-4 pt-2 m-2">
                                    <div class="card pricing pricing-primary business-rate shadow border-0 rounded">
                                        {% if plan.plan_type == "Normal" %}
                                        <div class="ribbon ribbon-right ribbon-warning overflow-hidden">
                                            <span class="text-center d-block shadow small h6 styreneALight">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 styreneALight">20% discount</span>
                                        </div>
                                        {% endif %}
                                        <div class="card-body">
                                            <h6 class="title name fw-bold text-uppercase mb-4 styreneALight">{{ plan.plan_name }}</h6>
                                            <div class="d-flex mb-4">
                                                <span class="h4 mb-0 mt-2 styreneALight">$</span>
                                                <span class="price h1 mb-0 styreneALight">{{ plan.price }}</span>
                                                <span class="h4 align-self-end mb-1 styreneALight">/month</span>
                                            </div>

                                            <div class="fixed-size">
                                                <p class="text-left styreneALight">
                                                {% if plan.plan_type == "Basic" %}
                                                The go-to for newbie creators.
                                                {% elif plan.plan_type == "Normal" %}
                                                Already a pro creator? Upload easily to YouTube and start monetising!
                                                {% elif plan.plan_type == "Pro" %}
                                                Professional-grade audio all in one place.
                                                {% else %}
                                                Great for once-off videos to test the power of the platform.
                                                {% endif %}
                                                </p>
                                            </div>

                                            <button type="button" class="btn btn-primary mt-2 mb-2 styreneALight buy" pay-id="{{ plan.plan_id }}" >
                                                {% if plan.plan_type == "Basic" %} GO BASIC {% elif plan.plan_type == "Normal" %} GO CREATOR {% elif plan.plan_type == "Pro" %} GO PRO {% else %} GET STARTED {% endif %}
                                            </button>

                                            <ul class="list-unstyled mb-0 ps-0 text-left styreneALight">
                                                {{ plan.describe|safe }}
                                            </ul>
 
                                        </div>
                                    </div>
                                </div>
                                <!--end col--> 
                                {% endfor %}
                            </div><!--end row-->
                        </div>

                        <div class="tab-pane fade styreneALight" 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-2 col-md-6 col-12 mt-4 pt-2 m-2">
                                    <div class="card pricing pricing-primary business-rate shadow border-0 rounded">
                                        {% if plan.plan_type == "Normal" %}
                                        <div class="ribbon ribbon-right ribbon-warning overflow-hidden">
                                            <span class="text-center d-block shadow small h6 styreneALight">Best</span>
                                        </div>
                                        {% comment %} {% elif plan.plan_type == "Pro" and plan.plan_duration == "Yearly" %}
                                        <div class="ribbon ribbon-right ribbon-warning ">
                                            <span class="text-center d-block shadow small h6 styreneALight">20% discount</span>
                                        </div> {% endcomment %}
                                        {% endif %}
                                        <div class="card-body">
                                            <h6 class="title name fw-bold text-uppercase mb-4 styreneALight">{{ plan.plan_name }}</h6>

                                            <div class="d-flex mb-0">
                                                <span class="h4 mb-0 mt-2 styreneALight">$</span>  
                                                <span class="price h1 mb-0 styreneALight">{{ plan.price|div:12|stringformat:".2f" }}</span>
                                                <span class="h4 align-self-end mb-1 styreneALight">/month</span>
                                            </div>
                                            <div class="d-flex mt-0 mb-4">
                                                <span class="text-muted align-self-end styreneALight" style="font-size: 0.95rem;">${{ plan.price }} yearly</span>
                                            </div>
                                            <div class="fixed-size">
                                                <p class="text-left styreneALight">
                                                {% if plan.plan_type == "Basic" %}
                                                The go-to for newbie creators.
                                                {% elif plan.plan_type == "Normal" %}
                                                Already a pro creator? Upload easily to YouTube and start monetising!
                                                {% elif plan.plan_type == "Pro" %}
                                                Professional-grade audio all in one place.
                                                {% else %}
                                                Great for once-off videos to test the power of the platform.
                                                {% endif %}
                                                </p>
                                            </div>

                                            <button type="button" class="btn btn-primary mt-2 mb-2 styreneALight buy"  pay-id="{{ plan.plan_id }}" >
                                                {% if plan.plan_type == "Basic" %} GO BASIC {% elif plan.plan_type == "Normal" %} GO CREATOR {% elif plan.plan_type == "Pro" %} GO PRO {% else %} GET STARTED {% endif %}
                                            </button>

                                            <ul class="list-unstyled mb-0 ps-0 text-left styreneALight">
                                                {{ plan.describe|safe }}
                                            </ul>
 
                                        </div>
                                    </div>
                                </div>
                                <!--end col--> 
                                {% endfor %}
                            </div><!--end row-->
                        </div>
                    </div>
                </div>
                <!--end col-->
            </div>
            <!--end row-->
        </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 ampleSoftProMedium">Get started with <span class="text-primary fw-bold"> UseVoice. </span> for free</h4>
                        <p class="text-muted para-desc mx-auto styreneALight">Sign up for <span class="text-primary fw-bold">Usevoice</span>'s premium plan, get access to all features and start removing background music today!.</p>

                        <div class="mt-4"> 
                            {% for plan in plans_monthly %} 
                            {% if plan.plan_type == "Pro" %}
                            <button type="button" class="btn btn-primary m-1 styreneALight buy" pay-id="{{ plan.plan_id }}"> GET STARTED <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 %}

{% endblock javascripts %}