@extends('layouts.frontLayout')
@section('title') {{get_settings('app_name')}} - {{trans('admin.pricing')}} @endsection
@section('css')
<style>
.pricing-section-wrapper {
background-image: url('{{asset('images/header-greadient.png')}}');
background-position: 90%;
background-size: cover;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin-bottom: 80px;
display: flex;
position: relative;
overflow: hidden;
padding: 90px 0px;
}
.price-sending-nav-tab-icon{
color: #000;
}
.nav-pills .nav-link.active.pricing-sending, .nav-pills .show>.nav-link {
color: #ffffff;
background-color: #1a73e8;
border-radius: 20px;
padding: 10px 20px 8px 20px;
}
.nav-pills .nav-link.active.pricing-sending i.fa.fa-envelope.price-sending-nav-tab-icon{
color: rgb(252, 252, 252) !important;
}
.nav-pills .nav-link.pricing-sending{
padding: 10px 20px 8px 20px !important;
color: #000;
}
.nav-pills .nav-link.pricing-lead{
padding: 10px 20px 8px 20px;
color: #000 !important;
}
/* .pricing-sending:hover{
color: #000 !important;
} */
.nav-pills .nav-link.pricing-lead.active, .nav-pills .show>.nav-link {
color: #fff !important;
background-color: #007bff !important;
border-radius: 20px !important;
padding: 10px 20px 8px 20px !important;
}
.nav-link.active.sending-monthly-nav-link{
color: #fff;
background-color: transparent;
font-size: 18px;
font-weight: 500;
border-bottom: 3px solid #1a73e8;
}
.nav-link.sending-monthly-nav-link {
color: #b2aeae;
background-color: transparent;
font-size: 18px;
font-weight: 500;
border-bottom: 3px solid #969696;
padding: 8px 50px;
}
.nav-link.active.sending-monthly-nav-link {
color: #fff;
background-color: transparent;
font-size: 18px;
font-weight: 500;
border-bottom: 3px solid #1a73e8;
padding: 8px 50px;
}
.nav-link.active.sending-yearly-nav-link{
color: #fff;
background-color: transparent;
font-size: 18px;
font-weight: 500;
border-bottom: 3px solid #1a73e8;
padding: 8px 50px;
}
.nav-link.sending-yearly-nav-link{
color: #b2aeae;
background-color: transparent;
font-size: 18px;
font-weight: 500;
border-bottom: 3px solid #969696;
padding: 8px 50px;
}
.nav-link.leads-monthly-nav-link{
color: #b2aeae;
background-color: transparent;
font-size: 18px;
font-weight: 500;
border-bottom: 3px solid #969696;
padding: 8px 50px;
}
.nav-link.active.leads-monthly-nav-link{
color: #fff;
background-color: transparent;
font-size: 18px;
font-weight: 500;
border-bottom: 3px solid #1a73e8;
padding: 8px 50px;
}
.nav-link.leads-yearly-nav-link{
color: #b2aeae;
background-color: transparent;
font-size: 18px;
font-weight: 500;
border-bottom: 3px solid #969696;
padding: 8px 50px;
}
.nav-link.active.leads-yearly-nav-link{
color: #fff;
background-color: transparent;
font-size: 18px;
font-weight: 500;
border-bottom: 3px solid #1a73e8;
padding: 8px 50px;
}
</style>
@endsection
@section('main-content')
<section class="pricing-section-wrapper">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="price-banner-sec-content">
<div class="pricing-title f-23">
Simple pricing for everyone
</div>
<div class="pricing-des f-13">
Pricing built for businesses of all sizes. Always know what you’ll pay.
</div>
<div class="pricing-nav-tab-sec">
<div class="pricing-nav-tab-btn">
<ul class="nav price-nav-pills nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item price-nav-tab-item">
<a class="nav-link active pricing-sending f-13" id="pills-sending-tab" data-toggle="pill" href="#pills-sending-and-warmup" role="tab" aria-controls="pills-monthly" aria-selected="true"><i class="fa fa-envelope price-sending-nav-tab-icon" aria-hidden="true"></i>
Sending & Warmup</a>
</li>
<li class="nav-item price-nav-tab-item">
<a class="nav-link pricing-lead f-13" id="pills-leads-tab" data-toggle="pill" href="#pills-leads" role="tab" aria-controls="pills-yearly" aria-selected="false"><i class="fa fa-user pricing-nav-tab-icon" aria-hidden="true"></i>
Leads</a>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-8 m-auto">
<div class="monthly-yearly-sec">
<div class="monthly-and-yearly-tab-content">
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-sending-and-warmup" role="tabpanel" aria-labelledby="pills-sending-tab">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active sending-monthly-nav-link" id="pills-monthly-tab" data-toggle="pill" href="#pills-monthly" role="tab" aria-controls="pills-monthly" aria-selected="true"><span class="monthly-text">Monthly</span></a>
</li>
<li class="nav-item">
<a class="nav-link sending-yearly-nav-link" id="pills-yearly-tab" data-toggle="pill" href="#pills-yearly" role="tab" aria-controls="pills-yearly" aria-selected="false">Yearly</a>
</li>
</ul>
</div>
<div class="tab-pane fade" id="pills-leads" role="tabpanel" aria-labelledby="pills-leads-tab">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active leads-monthly-nav-link" id="pills-monthly-lead-tab" data-toggle="pill" href="#pills-monthly-leads" role="tab" aria-controls="pills-monthly-leads" aria-selected="true"><span class="monthly-text">Monthly</span></a>
</li>
<li class="nav-item">
<a class="nav-link leads-yearly-nav-link" id="pills-yearly-lead-tab" data-toggle="pill" href="#pills-yearly-leads" role="tab" aria-controls="pills-yearly-leads" aria-selected="false">Yearly</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 m-auto">
<div class="tab-content sending-tab" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-monthly" role="tabpanel" aria-labelledby="pills-monthly-tab">
<div class="row">
<div class="col-md-6">
<div class="monthly-growth-sec">
<div class="monthly-growth-content">
<div class="monthly-icon-sec">
<i class="fa fa-plane monthly-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-title">
Growth
</div>
<div class="mothly-price-sec">
$37 <span class="mothly-price-range">/mo</span>
</div>
<div class="start-for-free-button reach-btn-sec text-center">
<a href="" class="start-for-free-btn">Start For Free</a>
</div>
<div class="monthly-growth-feature-sec">
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
Unlimited Email Accounts
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
Unlimited Email Warmup
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
1000 Active Leads
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
5000 Emails Monthly
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
Live Chat Support
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="monthly-growth-sec">
<div class="monthly-growth-content">
<div class="monthly-icon-sec">
<i class="fa fa-plane monthly-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-title">
Hypergrowth
</div>
<div class="mothly-price-sec">
$97 <span class="mothly-price-range">/mo</span>
</div>
<div class="start-for-free-button text-center">
<a href="" class="faq-start-for-free-btn">Start For Free</a>
</div>
<div class="monthly-growth-feature-sec">
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
Unlimited Email Accounts
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
Unlimited Email Warmup
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
1000 Active Leads
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
5000 Emails Monthly
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
Live Chat Support
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-yearly" role="tabpanel" aria-labelledby="pills-yearly-tab">
<div class="row">
<div class="col-md-6">
<div class="monthly-growth-sec">
<div class="monthly-growth-content">
<div class="monthly-icon-sec">
<i class="fa fa-plane monthly-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-title">
Growth
</div>
<div class="mothly-price-sec">
$30 <span class="mothly-price-range">/mo</span>
</div>
<div class="start-for-free-button reach-btn-sec text-center">
<a href="" class="start-for-free-btn">Start For Free</a>
</div>
<div class="monthly-growth-feature-sec">
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
Unlimited Email Accounts
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
Unlimited Email Warmup
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
1000 Active Leads
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
5000 Emails Monthly
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
Live Chat Support
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="monthly-growth-sec">
<div class="monthly-growth-content">
<div class="monthly-icon-sec">
<i class="fa fa-plane monthly-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-title">
Hypergrowth
</div>
<div class="mothly-price-sec">
$77 <span class="mothly-price-range">/mo</span>
</div>
<div class="start-for-free-button text-center">
<a href="" class="faq-start-for-free-btn">Start For Free</a>
</div>
<div class="monthly-growth-feature-sec">
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
Unlimited Email Accounts
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
Unlimited Email Warmup
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
1000 Active Leads
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
5000 Emails Monthly
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
Live Chat Support
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-content leads-tab-conent d-none" id="pills-tabContent">
<div class="tab-pane fade show active " id="pills-monthly-leads" role="tabpanel" aria-labelledby="pills-yearly-tab">
<div class="row">
<div class="col-md-6">
<div class="monthly-growth-sec">
<div class="monthly-growth-content">
<div class="monthly-icon-sec">
<i class="fa fa-plane monthly-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-title">
Growth lead
</div>
<div class="mothly-price-sec">
$87.99 <span class="mothly-price-range">/mo</span>
</div>
<div class="start-for-free-button reach-btn-sec text-center">
<a href="" class="start-for-free-btn">Start For Free</a>
</div>
<div class="monthly-growth-feature-sec">
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
Unlimited Email Accounts
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
Unlimited Email Warmup
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
1000 Active Leads
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
5000 Emails Monthly
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
Live Chat Support
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="monthly-growth-sec">
<div class="monthly-growth-content">
<div class="monthly-icon-sec">
<i class="fa fa-plane monthly-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-title">
Hypergrowth
</div>
<div class="mothly-price-sec">
$77.99 <span class="mothly-price-range">/mo</span>
</div>
<div class="start-for-free-button text-center">
<a href="" class="faq-start-for-free-btn">Start For Free</a>
</div>
<div class="monthly-growth-feature-sec">
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
Unlimited Email Accounts
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
Unlimited Email Warmup
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
1000 Active Leads
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
5000 Emails Monthly
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
Live Chat Support
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-yearly-leads" role="tabpanel" aria-labelledby="pills-yearly-tab">
<div class="row">
<div class="col-md-6">
<div class="monthly-growth-sec">
<div class="monthly-growth-content">
<div class="monthly-icon-sec">
<i class="fa fa-plane monthly-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-title">
Growth leads
</div>
<div class="mothly-price-sec">
$129.99 <span class="mothly-price-range">/mo</span>
</div>
<div class="start-for-free-button reach-btn-sec text-center">
<a href="" class="start-for-free-btn">Start For Free</a>
</div>
<div class="monthly-growth-feature-sec">
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
Unlimited Email Accounts
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
Unlimited Email Warmup
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
1000 Active Leads
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
5000 Emails Monthly
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
Live Chat Support
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="monthly-growth-sec">
<div class="monthly-growth-content">
<div class="monthly-icon-sec">
<i class="fa fa-plane monthly-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-title">
Hypergrowth leads
</div>
<div class="mothly-price-sec">
$337 <span class="mothly-price-range">/mo</span>
</div>
<div class="start-for-free-button text-center">
<a href="" class="faq-start-for-free-btn">Start For Free</a>
</div>
<div class="monthly-growth-feature-sec">
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
Unlimited Email Accounts
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
Unlimited Email Warmup
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
1000 Active Leads
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
5000 Emails Monthly
</div>
</div>
<div class="monthly-growth-feature-content">
<div class="monthly-growth-icon">
<i class="fa fa-check groth-check-icon" aria-hidden="true"></i>
</div>
<div class="monthly-growth-feature-name">
Live Chat Support
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{-- <div class="row">
<div class="col-md-8 m-auto">
<div class="monthly-yearly-sec">
<div class="monthly-and-yearly-tab-content">
<div class="tab-pane fade" id="pills-leads" role="tabpanel" aria-labelledby="pills-leads-tab">
<h4 class="bg-danger">Hello Wrong Person</h4>
<li class="nav-item">
<a class="nav-link active leads-monthly-nav-link" id="pills-monthly-lead-tab" data-toggle="pill" href="#pills-monthly-leads" role="tab" aria-controls="pills-monthly-leads" aria-selected="true"><span class="monthly-text">5555555555</span></a>
</li>
<li class="nav-item">
<a class="nav-link leads-yearly-nav-link" id="pills-yearly-lead-tab" data-toggle="pill" href="#pills-yearly-leads" role="tab" aria-controls="pills-yearly-leads" aria-selected="false">554444444444444</a>
</li>
</div>
</div>
</div>
</div>
</div> --}}
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="price-nav-tab-section">
<div class="pricing-nav-tab-button">
</div>
</div>
</div>
</div>
</div>
</section>
@endsection
@section('extra-scripts')
<script>
$(document).on('click', '#pills-leads-tab', function() {
if ($('#pills-leads-tab').hasClass('pricing-lead')) {
console.log('yes');
$('.sending-tab').addClass("d-none");
$('.leads-tab-conent').removeClass("d-none");
// $('.won-button').removeClass('disabled');
// $('.wizard-btn').removeAttr("disabled");
// $('.wizard-icon').addClass("deal-wizard-icon-incomplete");
}
});
</script>
@endsection