<div id="pricing" class="pricing">
<div class="container">
<div class=" w75 w-xl-85 w-lg-95 w-md-50 w-sm-65 w-xs-95 margin-auto">
<h1 class="w100 text-center marginBottomBig">
Pricing
</h1>
<div class="pricing-tabs">
<ul>
<li><a href="#" class="active" data-tab="monthly">Monthly</a></li>
<li><a href="#" data-tab="yearly">Yearly</a></li>
</ul>
</div>
<div class="pricing-content">
<div class="pricing-table row tab-content tab-monthly active">
<div class="pricing-plan-out col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12">
<div class="pricing-plan">
<div class="plan-head">
<div class="plan-name">Basic Plan</div>
<div class="plan-price">29$</div>
<div class="plan-dur">
Monthly
</div>
</div>
<div class="plan-features">
Includes:
<ul>
<li>2% NFT Minting Fee</li>
<li>Support: Premium + Chat</li>
<li>Creator Dashboard Access</li>
<li>Scratch-off Label Support</li>
</ul>
</div>
<div class="plan-end">
<a class="button get-started scrollTo" data-scroll-to="#register" onClick="javascript:void(0);">Get Started</a>
</div>
</div>
</div>
<div class="pricing-plan-out col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12">
<div class="pricing-plan active">
<div class="plan-head">
<div class="plan-name">Pro Plan</div>
<div class="plan-price">199$</div>
<div class="plan-dur">
Monthly
</div>
<div class="plan-badge">Most Popular</div>
</div>
<div class="plan-features">
Includes:
<ul>
<li>2% NFT Minting Fee</li>
<li>Support: Premium + Chat</li>
<li>Creator Dashboard Access</li>
<li>Scratch-off Label Support</li>
<li>NFC Support</li>
</ul>
</div>
<div class="plan-end">
<a class="button get-started scrollTo" data-scroll-to="#register" onClick="javascript:void(0);">Get Started</a>
</div>
</div>
</div>
<div class="pricing-plan-out col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12">
<div class="pricing-plan">
<div class="plan-head">
<div class="plan-name">Premium Plan</div>
<div class="plan-price">299$</div>
<div class="plan-dur">
Monthly
</div>
</div>
<div class="plan-features">
Includes:
<ul>
<li>2% NFT Minting Fee</li>
<li>Support: Premium + Chat</li>
<li>Creator Dashboard Access</li>
<li>Scratch-off Label Support</li>
<li>NFC Support</li>
<li>API Access</li>
<li>Training / Onboarding Session</li>
<li>Delivery Tracking</li>
</ul>
</div>
<div class="plan-end">
<a class="button get-started scrollTo" data-scroll-to="#register" onClick="javascript:void(0);">Get Started</a>
</div>
</div>
</div>
</div>
<div class="pricing-table row tab-content tab-yearly">
<div class="pricing-plan-out col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12">
<div class="pricing-plan">
<div class="plan-head">
<div class="plan-name">Basic Plan</div>
<div class="plan-price">299$</div>
<div class="plan-dur">
Yearly
</div>
</div>
<div class="plan-features">
Includes:
<ul>
<li>2% NFT Minting Fee</li>
<li>Support: Premium + Chat</li>
<li>Creator Dashboard Access</li>
<li>Scratch-off Label Support</li>
</ul>
</div>
<div class="plan-end">
<a class="button get-started scrollTo" data-scroll-to="#register" onClick="javascript:void(0);">Get Started</a>
</div>
</div>
</div>
<div class="pricing-plan-out col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12">
<div class="pricing-plan active">
<div class="plan-head">
<div class="plan-name">Pro Plan</div>
<div class="plan-price">1990$</div>
<div class="plan-dur">
Yearly
</div>
<div class="plan-badge">Most Popular</div>
</div>
<div class="plan-features">
Includes:
<ul>
<li>2% NFT Minting Fee</li>
<li>Support: Premium + Chat</li>
<li>Creator Dashboard Access</li>
<li>Scratch-off Label Support</li>
<li>NFC Support</li>
</ul>
</div>
<div class="plan-end">
<a class="button get-started scrollTo" data-scroll-to="#register" onClick="javascript:void(0);">Get Started</a>
</div>
</div>
</div>
<div class="pricing-plan-out col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12">
<div class="pricing-plan">
<div class="plan-head">
<div class="plan-name">Premium Plan</div>
<div class="plan-price">2990$</div>
<div class="plan-dur">
Yearly
</div>
</div>
<div class="plan-features">
Includes:
<ul>
<li>2% NFT Minting Fee</li>
<li>Support: Premium + Chat</li>
<li>Creator Dashboard Access</li>
<li>Scratch-off Label Support</li>
<li>NFC Support</li>
<li>API Access</li>
<li>Training / Onboarding Session</li>
<li>Delivery Tracking</li>
</ul>
</div>
<div class="plan-end">
<a class="button get-started scrollTo" data-scroll-to="#register" onClick="javascript:void(0);">Get Started</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div>
<script>
document.addEventListener("DOMContentLoaded", function () {
// Handle tab switching (if not already included)
const tabLinks = document.querySelectorAll(".pricing-tabs a");
const tabContents = document.querySelectorAll(".tab-content");
tabLinks.forEach(link => {
link.addEventListener("click", function (e) {
e.preventDefault();
tabLinks.forEach(l => l.classList.remove("active"));
link.classList.add("active");
const target = link.getAttribute("data-tab");
tabContents.forEach(content => {
content.classList.remove("active");
if (content.classList.contains("tab-" + target)) {
content.classList.add("active");
}
});
});
});
// Handle active pricing plan toggle
const plans = document.querySelectorAll(".pricing-plan");
plans.forEach(plan => {
plan.addEventListener("click", function () {
// Remove active from all plans
plans.forEach(p => p.classList.remove("active"));
// Add active to the clicked one
plan.classList.add("active");
});
});
});
</script>