<!DOCTYPE html>
<html>
<head>
<title> Home </title>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%- include('./parcials/cssLinks') %>
</head>
<body>
<%- include('./parcials/header') %>
<main class="bg-shapes-main">
<div class="bg-shapes">
<figure>
<img src="<%= baseUrl %>images/banner-top-left.png" alt="">
</figure>
<figure>
<img src="<%= baseUrl %>images/banner-shape-lefft.png" alt="">
</figure>
<figure>
<img src="<%= baseUrl %>images/banner-shape-rgt.png" alt="">
</figure>
</div>
<div class="floating-shapes">
<span data-parallax='{"x": -180, "y": -20, "rotateZ":500}'>
<img src="<%= baseUrl %>images/floating-dot.png" alt="">
</span>
<span data-parallax='{"x": 150, "y": -20, "rotateX":2000}'>
<img src="<%= baseUrl %>images/floating-dot2.png" alt="">
</span>
<span data-parallax='{"x": -20, "y": -100, "rotateZ":500,"rotateX":2000}'>
<img src="<%= baseUrl %>images/floating-dot3.png" alt="">
</span>
<span data-parallax='{"x": -20, "y": -100, "rotateZ":500,"rotateX":2000}'>
<img src="<%= baseUrl %>images/floating-dot4.png" alt="">
</span>
<span data-parallax='{"x": -20, "y": -100, "rotateZ":500,"rotateX":2000}'>
<img src="<%= baseUrl %>images/floating-dot5.png" alt="">
</span>
</div>
<section class="inner-banner">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-10 col-12 px-xl-5">
<div class="banner-content">
<h1 class="theme-h2">Available Packages</h1>
<p class="theme-p">1 credit = 1 card or 1 certificate</p>
<ul class="banner-links">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/send-now">Send Now</a>
</li>
<li>Packages</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="packages-sec padding-sec">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-10 col-10 px-xl-5">
<div id="paypal-button-container" style="max-width:1000px;"></div>
<div class="packages-content">
<!-- <h2 class="theme-h2">our memberships are unlimited</h2> -->
<ul class="packages-listing">
<% packages.forEach((package, ind) => { %>
<li class="pkg-itm <%= package.bestbuy ? 'bestbuy' : '' %>">
<div class="icon">
<img class="img-fluid" src="<%= baseUrl %>images/dashboard-logo.png" alt="">
</div>
<p class="theme-p"><%= package.name %></p>
<span class="theme-p"><%= package.credits %> Credits</span>
<span class="theme-p"><%= package.price %></span>
<!-- <a href="javascript:;" class="theme-btn payment-btn">Buy Now</a> -->
<form action="/api/user/add-to-cart" method="POST">
<input name="info" type="hidden" value="<%= Buffer.from(JSON.stringify({
packageNo: package.name,
message: package.name,
credits: package.credits,
price: package.price,
quantity: 1,
})).toString('base64') %>">
<button class="theme-btn" type="submit">Buy Now</button>
</form>
</li>
<% }) %>
</ul>
<!-- <div class="packages-slider">
<div class="owl-carousel owl-theme" id="packages-slider">
<div class="item">
<div class="package-item">
<h4 class="pkg-title">Package 01</h4>
<h4 class="theme-h4 price" data-symbol="$">1.25
<small>/2 credits</small>
</h4>
<ul class="package-services">
<li>Buy 1 get 1 free</li>
<li>2 credits</li>
</ul>
<a class="theme-btn" href="javascript:;">buy now</a payment-btn>
</div>
</div>
<div class="item">
<div class="package-item">
<div class="icon">
<img class="img-fluid" src="<%= baseUrl %>images/package-2.png" alt="">
</div>
<h4 class="pkg-title">Package 02</h4>
<h4 class="theme-h4 price" data-symbol="$">4.99
<small>/8 credits</small>
</h4>
<ul class="package-services">
<li>Buy 5 get 3 free</li>
<li>8 credits</li>
<li>Save $1.26</li>
</ul>
<a class="theme-btn" href="javascript:;">buy now</a payment-btn>
</div>
</div>
<div class="item">
<div class="package-item">
<div class="icon">
<img class="img-fluid" src="<%= baseUrl %>images/package-3.png" alt="">
</div>
<h4 class="pkg-title">Package 03</h4>
<h4 class="theme-h4 price" data-symbol="$">9.00
<small>/15 credits</small>
</h4>
<ul class="package-services">
<li>Buy 10 get 5 free</li>
<li>15 credits</li>
<li>Save $ 3.50</li>
</ul>
<a class="theme-btn" href="javascript:;">buy now</a payment-btn>
</div>
</div>
<div class="item">
<div class="package-item">
<div class="icon">
<img class="img-fluid" src="<%= baseUrl %>images/package-1.png" alt="">
</div>
<h4 class="pkg-title">Package 04</h4>
<h4 class="theme-h4 price" data-symbol="$">12.75<small>/22 credits</small>
</h4>
<ul class="package-services">
<li>Buy 15 get 7 free</li>
<li>22 credits</li>
<li>Save $ 6.00</li>
</ul>
<a class="theme-btn" href="javascript:;">buy now</a payment-btn>
</div>
</div>
<div class="item">
<div class="package-item">
<div class="icon">
<img class="img-fluid" src="<%= baseUrl %>images/package-2.png" alt="">
</div>
<h4 class="pkg-title">Package 05 <small>(Best Buy)</small></h4>
<h4 class="theme-h4 price" data-symbol="$">19.99<small>/35 credits</small>
</h4>
<ul class="package-services">
<li>Buy 25 get 10 free</li>
<li>35 credits</li>
<li>Save $ 11.26</li>
</ul>
<a class="theme-btn" href="javascript:;">buy now</a payment-btn>
</div>
</div>
</div>
</div> -->
<a class="theme-btn dashboard-btn" href="/send-now">Back to Dashboard</a>
</div>
</div>
</div>
</div>
</section>
<!--<section class="membership-policies padding-bottom">-->
<!-- <div class="container">-->
<!-- <div class="row justify-content-center">-->
<!-- <div class="col-xl-8 col-12 px-xl-4">-->
<!-- <div class="membership-content">-->
<!-- <h2 class="theme-h2">take a look to our membership policies</h2>-->
<!-- <div class="accordion membership-accordion" id="membership-acc">-->
<!-- <div class="accordion-item">-->
<!-- <h2 class="accordion-header">-->
<!-- <button class="accordion-button" type="button" data-bs-toggle="collapse"-->
<!-- data-bs-target="#membership-1" aria-expanded="true"-->
<!-- aria-controls="membership-1">-->
<!-- membership suspension-->
<!-- </button>-->
<!-- </h2>-->
<!-- <div id="membership-1" class="accordion-collapse collapse show"-->
<!-- data-bs-parent="#membership-acc">-->
<!-- <div class="accordion-body">-->
<!-- <p class="theme-p">Lorem Ipsum is simply dummy text of the printing and-->
<!-- typesetting industry. Lorem Ipsum has been the industry's standard-->
<!-- dummy-->
<!-- text ever since the 1500s, when an unknown printer took a galley of-->
<!-- type and-->
<!-- scrambled it to make a type specimen book.</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="accordion-item">-->
<!-- <h2 class="accordion-header">-->
<!-- <button class="accordion-button collapsed" type="button"-->
<!-- data-bs-toggle="collapse" data-bs-target="#membership-2"-->
<!-- aria-expanded="false" aria-controls="membership-2">-->
<!-- Lorem Ipsum is simply dummy text-->
<!-- </button>-->
<!-- </h2>-->
<!-- <div id="membership-2" class="accordion-collapse collapse"-->
<!-- data-bs-parent="#membership-acc">-->
<!-- <div class="accordion-body">-->
<!-- <p class="theme-p">Lorem Ipsum is simply dummy text of the printing and-->
<!-- typesetting industry. Lorem Ipsum has been the industry's standard-->
<!-- dummy-->
<!-- text ever since the 1500s, when an unknown printer took a galley of-->
<!-- type and-->
<!-- scrambled it to make a type specimen book.</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="accordion-item">-->
<!-- <h2 class="accordion-header">-->
<!-- <button class="accordion-button collapsed" type="button"-->
<!-- data-bs-toggle="collapse" data-bs-target="#membership-3"-->
<!-- aria-expanded="false" aria-controls="membership-3">-->
<!-- printing and typesetting industry-->
<!-- </button>-->
<!-- </h2>-->
<!-- <div id="membership-3" class="accordion-collapse collapse"-->
<!-- data-bs-parent="#membership-acc">-->
<!-- <div class="accordion-body">-->
<!-- <p class="theme-p">Lorem Ipsum is simply dummy text of the printing and-->
<!-- typesetting industry. Lorem Ipsum has been the industry's standard-->
<!-- dummy-->
<!-- text ever since the 1500s, when an unknown printer took a galley of-->
<!-- type and-->
<!-- scrambled it to make a type specimen book.</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="accordion-item">-->
<!-- <h2 class="accordion-header">-->
<!-- <button class="accordion-button collapsed" type="button"-->
<!-- data-bs-toggle="collapse" data-bs-target="#membership-4"-->
<!-- aria-expanded="false" aria-controls="membership-4">-->
<!-- it has survived not only electronic-->
<!-- </button>-->
<!-- </h2>-->
<!-- <div id="membership-4" class="accordion-collapse collapse"-->
<!-- data-bs-parent="#membership-acc">-->
<!-- <div class="accordion-body">-->
<!-- <p class="theme-p">Lorem Ipsum is simply dummy text of the printing and-->
<!-- typesetting industry. Lorem Ipsum has been the industry's standard-->
<!-- dummy-->
<!-- text ever since the 1500s, when an unknown printer took a galley of-->
<!-- type and-->
<!-- scrambled it to make a type specimen book.</p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!--</section>-->
</main>
<%- include('./parcials/footer') %>
<%- include('./parcials/scriptLinks') %>
<script src="https://www.paypal.com/sdk/js?client-id=AXrKoh1y84UWeUKZihumIPn_vg5bMfx-9m6g5dfiDAvGONN_srMG7f1zyZkm_c7j1OrgqZQ2HpfZTDen&components=buttons"></script>
</body>
<!-- <script>
paypal.Buttons().render('#paypal-button-container');
paypal.Buttons({
createOrder() {
return fetch("/api/payment/create-payment", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
cart: [{
sku: "package",
quantity: "1",
}, ]
})
})
.then((response) => response.json())
.then((order) => order.id);
},
onApprove(data) {
alert('You have successfully created subscription ' + data.subscriptionID);
}
}).render('#paypal-button-container');
</script> -->
<!-- <script>
$(".payment-btn").click(function() {
const paymentData = {
intent: 'sale',
payer: {
payment_method: 'paypal',
},
redirect_urls: {
return_url: 'http://localhost:8000/api/payment/success',
cancel_url: 'http://localhost:8000/api/payment/cancel',
},
transactions: [{
item_list: {
items: [{
name: "item",
sku: "item",
price: "100.00",
currency: "USD",
quantity: 1
}]
},
amount: {
total: '100.00', // Total amount of the payment
currency: 'USD',
},
description: 'Payment for your product or service',
}, ],
};
paypal.payment.create(paymentData, (error, payment) => {
if (error) {
console.error(error);
// Handle the error, e.g., show an error message to the user
} else {
// Redirect the user to PayPal for payment approval
for (let i = 0; i < payment.links.length; i++) {
if (payment.links[i].rel === 'approval_url') {
const approvalUrl = payment.links[i].href;
// Redirect the user to approvalUrl
console.log(approvalUrl);
// You should redirect the user to this URL to complete the payment
}
}
}
});
})
</script> -->
</html>