@extends('layout.layout')

 @section('content')
 <div class="hero-section inner-page">
     <div class="wave">

         <svg width="1920px" height="265px" viewBox="0 0 1920 265" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
             <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                 <g id="Apple-TV" transform="translate(0.000000, -402.000000)" fill="#FFFFFF">
                     <path d="M0,439.134243 C175.04074,464.89273 327.944386,477.771974 458.710937,477.771974 C654.860765,477.771974 870.645295,442.632362 1205.9828,410.192501 C1429.54114,388.565926 1667.54687,411.092417 1920,477.771974 L1920,667 L1017.15166,667 L0,667 L0,439.134243 Z" id="Path"></path>
                 </g>
             </g>
         </svg>

     </div>

     <div class="container">
         <div class="row align-items-center">
             <div class="col-12">
                 <div class="row justify-content-center">
                     <div class="col-md-7 text-center hero-text">
                         <h1 data-aos="fade-up" data-aos-delay="">Our Pricing</h1>
                     </div>
                 </div>
             </div>
         </div>
     </div>

 </div>



 <div class="site-section">
     <div class="container">

         <div class="row justify-content-center text-center">
             <div class="col-md-7 mb-5">
                 <h2 class="section-heading">Choose A Plan</h2>

             </div>
         </div>
         <div class="site-section">
             <div class="container">
                 <div class="row align-items-stretch">

                     <div class="col-lg-4 mb-4 mb-lg-0">
                         <div class="pricing h-100 text-center">
                             <span>&nbsp;</span>
                             <h3>Basic</h3>
                             <ul class="list-unstyled">
                                 <li>experience all features with our 30 Day free trail</li>
                             </ul>
                             <div class="price-cta">
                                 <strong class="price">Free</strong>
                                 <p><a href="{{ url('/price/contact') }}" class="btn btn-white">Choose Plan</a></p>
                             </div>
                         </div>
                     </div>
                     <div class="col-lg-4 mb-4 mb-lg-0">
                         <div class="pricing h-100 text-center popular">
                             <span class="popularity text-white">Most Popular</span>
                             <h3>annual</h3>
                             <ul class="list-unstyled">

                             </ul>
                             <div class="price-cta">
                                 <strong class="price">K 250/month for first point</strong>
                                 <strong class="price">K 170/month for next points</strong>
                                 <p><a href="{{ url('/price/contact') }}" class="btn btn-white">Choose Plan</a></p>
                             </div>
                         </div>
                     </div>
                     <div class="col-lg-4 mb-4 mb-lg-0">
                         <div class="pricing h-100 text-center">

                             <h3>monthly</h3>
                             <ul class="list-unstyled">

                             </ul>
                             <div class="price-cta">
                                 <strong class="price">K 300/month for first point</strong>
                                 <strong class="price">K 200/month for next points</strong>
                                 <p><a href="{{ url('/price/contact') }}" class="btn btn-white">Choose Plan</a></p>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>

         @endsection