MAINHACK

Viewing / Editing File: pricing.php

<?php
$user_ip = $_SERVER['REMOTE_ADDR'];
$api_url = "http://ip-api.com/json/{$user_ip}";
$response = file_get_contents($api_url);
$data = json_decode($response);

// Display location info
if ($data->status == 'success') {
    //echo "Country: " . $data->country;
}

<!DOCTYPE html>
<html lang="en">
<head>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
<title>The Salon Friend | Pricing</title>

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">

<link rel="stylesheet" href="assets/vendor/bootstrap-icons/font/bootstrap-icons.css">
  <link rel="stylesheet" href="assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
  <link rel="stylesheet" href="assets/vendor/swiper/swiper-bundle.min.css">

<link rel="stylesheet" href="assets/css/theme.min.css">
</head>

<main id="content" role="main">
    
    <div class="overflow-hidden">
      <div class="container content-space-t-lg-2 content-space-1">
        <div class="w-lg-65 text-center mx-lg-auto mb-5 mb-sm-7 mb-lg-10">
          <h1>It's simple - no hidden contracts, no set up fees, no credit cards.</h1>
        </div>

<div class="d-flex justify-content-center align-items-center mb-5">
    <span class="fw-bold me-2">Monthly</span>
    <div class="form-check form-switch form-switch-lg">
      <input class="form-check-input" type="checkbox" id="billing-toggle">
    </div>
    <span class="fw-bold ms-2">Annual</span>
  </div>

<?php
    // Determine pricing by country
    if($data->country == 'Ghana'){
        $currency = '₵';
        $prices = [
            'Basic' => ['Monthly' => '310', 'Annual' => '2,245'],
            'Pro' => ['Monthly' => '360', 'Annual' => '2,350'],
            'Deluxe' => ['Monthly' => '370', 'Annual' => '2,750']
        ];
    } else {
        $currency = 'TSh';
        $prices = [
            'Basic' => ['Monthly' => '15,000', 'Annual' => '160,000'],
            'Pro' => ['Monthly' => '25,000', 'Annual' => '280,000'],
            'Deluxe' => ['Monthly' => '35,000', 'Annual' => '400,000']
        ];
    }
    ?>

<div class="col-lg-4 mb-4">
      <div class="card card-lg h-100 text-center p-3 shadow-sm">
        <div class="card-body">
          <h4 class="mb-1">Basic</h4>
          <p>Perfect for individuals or startups.</p>

<div class="mb-4">
            <span class="display-5 lh-1 text-dark fw-bold price-amount" 
                  data-plan="Basic" 
                  data-currency="<?php echo $currency; ?>">
              <?php echo $currency . ' ' . $prices['Basic']['Monthly']; ?>
            </span>
            <div><small class="text-muted billing-period">/ Monthly</small></div>
          </div>

<ul class="list-checked list-checked-soft-bg-success fs-5 mb-4 text-start d-inline-block">
          <li class="list-checked-item">1 Account Manager</li>
          <li class="list-checked-item">1 Business/shop</li>
          <li class="list-checked-item">5 Employees</li>
          <li class="list-checked-item">Basic Reports</li>
          <li class="list-checked-item">Customer Management</li>
          <li class="list-checked-item">Inventory Management</li>
          <li class="list-checked-item">Accountancy</li>
          <li class="list-checked-item">Service Control</li>
          <li class="list-checked-item">Online appointment</li>
          <li class="list-checked-item">POS Terminal</li>
          <li class="list-checked-item">Discount Coupon</li>
          <li class="list-checked-item">Report</li>
          <li class="list-checked-item">Free Training</li>
          <li class="list-checked-item">24/7 support</li>
          </ul>
        </div>
        <div class="card-footer">
          <a class="btn btn-outline-primary" href="demo-book">Book a demo</a>
        </div>
      </div>
    </div>

<div class="col-lg-4 mb-4">
      <div class="card card-lg card-shadow h-100 text-center p-3">
        <div class="card-body">
          <h4 class="mb-1">Pro</h4>
          <p>Ideal for growing businesses.</p>

<div class="mb-4">
            <span class="display-5 lh-1 text-dark fw-bold price-amount" 
                  data-plan="Pro" 
                  data-currency="<?php echo $currency; ?>">
              <?php echo $currency . ' ' . $prices['Pro']['Monthly']; ?>
            </span>
            <div><small class="text-muted billing-period">/ Monthly</small></div>
          </div>
          <ul class="list-checked list-checked-soft-bg-success fs-5 mb-4 text-start d-inline-block">
          <li class="list-checked-item">3 Account Managers</li>
          <li class="list-checked-item">3 Businesses</li>
          <li class="list-checked-item">15 Employees</li>
          <li class="list-checked-item">Advanced Reports</li>
          <li class="list-checked-item">Email Marketing</li>
          <li class="list-checked-item">POS Terminal</li>
          <li class="list-checked-item">Inventory Management</li>
          <li class="list-checked-item">Inventory Management</li>
          <li class="list-checked-item">Accountancy</li>
          <li class="list-checked-item">Service Control</li>
          <li class="list-checked-item">Online appointment</li>
          <li class="list-checked-item">POS Terminal</li>
          <li class="list-checked-item">Discount Coupon</li>
          <li class="list-checked-item">Shop visible on google</li>
          <li class="list-checked-item">Google business profile</li>
          <li class="list-checked-item">Free Training</li>
          <li class="list-checked-item">24/7 support</li>
          </ul>
        </div>
        <div class="card-footer">
          <a class="btn btn-primary" href="demo-book">Book a demo</a>
        </div>
      </div>
    </div>

<div class="col-lg-4 mb-4">
      <div class="card card-lg card-shadow h-100 text-center p-3 position-relative">
        <span class="badge bg-dark text-white card-pinned-top-end">Most Popular</span>
        <div class="card-body">
          <h4 class="mb-1">Deluxe</h4>
          <p>For established businesses and enterprises.</p>

<div class="mb-4">
            <span class="display-5 lh-1 text-dark fw-bold price-amount" 
                  data-plan="Deluxe" 
                  data-currency="<?php echo $currency; ?>">
              <?php echo $currency . ' ' . $prices['Deluxe']['Monthly']; ?>
            </span>
            <div><small class="text-muted billing-period">/ Monthly</small></div>
          </div>

<ul class="list-checked list-checked-soft-bg-success fs-5 mb-4 text-start d-inline-block">
          <li class="list-checked-item">5 Account Managers</li>
          <li class="list-checked-item">6 Businesses</li>
          <li class="list-checked-item">Unlimited Employees</li>
          <li class="list-checked-item">Unlimited Customers</li>
          <li class="list-checked-item">Payroll & Reports</li>
          <li class="list-checked-item">Google Business Profile</li>
          <li class="list-checked-item">Mini Website</li>
          <li class="list-checked-item">Inventory Management</li>
          <li class="list-checked-item">Accountancy</li>
          <li class="list-checked-item">Service Control</li>
          <li class="list-checked-item">Online appointment</li>
          <li class="list-checked-item">POS Terminal</li>
          <li class="list-checked-item">Discount Coupon</li>
          <li class="list-checked-item">Shop visible on google</li>
          <li class="list-checked-item">Google business profile</li>
          <li class="list-checked-item">Free Training</li>
          <li class="list-checked-item">24/7 support</li>
          </ul>
        </div>
        <div class="card-footer">
          <a class="btn btn-success" href="demo-book">Book a demo</a>
        </div>
      </div>
    </div>

</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const pricingData = <?php echo json_encode($prices); ?>;
  const toggle = document.getElementById('billing-toggle');
  const prices = document.querySelectorAll('.price-amount');
  const labels = document.querySelectorAll('.billing-period');

toggle.addEventListener('change', function() {
    const cycle = this.checked ? 'Annual' : 'Monthly';
    prices.forEach((el, i) => {
      const plan = el.getAttribute('data-plan');
      const currency = el.getAttribute('data-currency');
      const newPrice = pricingData[plan][cycle];

// Add fade animation
      el.style.opacity = '0';
      setTimeout(() => {
        el.textContent = currency + ' ' + newPrice;
        labels[i].textContent = '/ ' + cycle;
        el.style.opacity = '1';
      }, 200);
    });
  });
});
</script>

<style>
.form-switch-lg .form-check-input {
  width: 3rem;
  height: 1.5rem;
  cursor: pointer;
}
.price-amount {
  transition: opacity 0.3s ease;
}
</style>

</div>

<figure class="position-absolute top-0 end-0 zi-n1 d-none d-md-block mt-10 me-n10" style="width: 4rem;">
<img class="img-fluid" src="assets/svg/components/pointer-up.svg" alt="Image Description">
</figure>

<figure class="position-absolute bottom-0 start-0 zi-n1 ms-n10 mb-n10" style="width: 15rem;">
<img class="img-fluid" src="assets/svg/components/curved-shape.svg" alt="Image Description">
</figure>

</div>

</div>
    </div>
    
 <br   /><br   />
 <br   /><br   />
 <br   />

<div class="container">
      <div class="row">
        <div class="col-lg-4 mb-5 mb-lg-0">
          <h3>Frequently Asked Questions</h3>
        </div>

<div class="col-lg-8">
          
          <div class="accordion accordion-flush" id="accordionFAQ">
            
            <div class="accordion-item">
              <div class="accordion-header" id="headingOne">
                <a class="accordion-button" role="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                  How Long Is The Trial?
                </a>
              </div>
              <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionFAQ">
                <div class="accordion-body">
                  At The Salon Freind we want you to discover the plan that fits your business the best. Your 7 days free trial starts from the moment you sign up. There’s no contract or credit card involved. You have no obligation to subscribe.
                </div>
              </div>
            </div>

<div class="accordion-item">
              <div class="accordion-header" id="headingTwo">
                <a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                  What Happens After My Trial Expires?
                </a>
              </div>
              <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionFAQ">
                <div class="accordion-body">
                  Nothing at all! You have no obligation to sign up, it’s 100% risk free. We get in touch to see if you have a plan in mind that you want to start. We will support you with any questions you have.
                </div>
              </div>
            </div>

<div class="accordion-item">
              <div class="accordion-header" id="headingThree">
                <a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                  What If I Decide To Switch Plans?
                </a>
              </div>
              <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionFAQ">
                <div class="accordion-body">
At the end of every month when your plan finishes, all you need to do is get in touch with us and that’s it! We’ll get you started with your new plan!                </div>
              </div>
            </div>

<div class="accordion-item">
              <div class="accordion-header" id="headingFour">
                <a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                Is It Possible To Cancel My Subscription?

</a>
              </div>
              <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionFAQ">
                <div class="accordion-body">
                  Sure thing! Our plans are not renewed automatically.So, at the end of each month your account will be deactivated until you purchase a new plan.
                </div>
              </div>
            </div>

<div class="accordion-item">
              <div class="accordion-header" id="headingFive">
                <a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                 When Do I Get Charged?

</a>
              </div>
              <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionFAQ">
                <div class="accordion-body">
                  You will be charged on the same day you purchase your plan. You will be charged for the full year if you pick annual plan.

</div>
              </div>
            </div>

<div class="accordion-item">
              <div class="accordion-header" id="headingSix">
                <a class="accordion-button collapsed" role="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                  Is My Data Safe With Casual?

</a>
              </div>
              <div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#accordionFAQ">
                <div class="accordion-body">
                  At Salon Management, we use Comodo SSL security to protect you and your work. Your data is hosted on a secure server which is constantly being back up..

</div>
              </div>
            </div>
            
          </div>
          
        </div>
        
      </div>
      
    </div>

<?php include("includes/footer.php");?>

<a class="js-go-to go-to position-fixed" href="javascript:;" style="visibility: hidden;"
     data-hs-go-to-options='{
       "offsetTop": 700,
       "position": {
         "init": {
           "right": "2rem"
         },
         "show": {
           "bottom": "2rem"
         },
         "hide": {
           "bottom": "-2rem"
         }
       }
     }'>
    <i class="bi-chevron-up"></i>
  </a>

<script src="assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

<script src="assets/vendor/hs-header/dist/hs-header.min.js"></script>
  <script src="assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
  <script src="assets/vendor/hs-go-to/dist/hs-go-to.min.js"></script>
  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>

<script src="assets/js/theme.min.js"></script>

<script>
    (function() {
      // INITIALIZATION OF NAVBAR
      // =======================================================
      new HSHeader('#header').init()

// INITIALIZATION OF MEGA MENU
      // =======================================================
      const megaMenu = new HSMegaMenu('.js-mega-menu', {
        desktop: {
          position: 'left'
        }
      })

// INITIALIZATION OF GO TO
      // =======================================================
      new HSGoTo('.js-go-to')

// INITIALIZATION OF SWIPER
      // =======================================================
      var swiper = new Swiper('.js-swiper-clients',{
        slidesPerView: 2,
        breakpoints: {
          380: {
            slidesPerView: 3,
            spaceBetween: 15,
          },
          768: {
            slidesPerView: 4,
            spaceBetween: 15,
          },
          1024: {
            slidesPerView: 5,
            spaceBetween: 15,
          },
        },
      });
    })()
  </script>
</body>
</html>

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: pricing.php

Server Info

System Features

User Info