134 lines
7.0 KiB
JavaScript
134 lines
7.0 KiB
JavaScript
'use client'
|
|
import Link from 'next/link'
|
|
import { useState } from 'react'
|
|
|
|
export default function PricingTable() {
|
|
const [isToggled, setToggled] = useState(false)
|
|
const handleToggle = () => setToggled(!isToggled)
|
|
return (
|
|
<>
|
|
<div className={isToggled ? "pricing__tab selected" : " pricing__tab"}>
|
|
<span className={`pricing__tab-btn monthly_tab_title ${isToggled ? "active" : ""}`}>Monthly</span>
|
|
<span className={`pricing__tab-switcher ${isToggled ? "active" : ""}`} onClick={handleToggle} />
|
|
<span className={`pricing__tab-btn annual_tab_title ${isToggled ? "active" : ""}`}>Yearly</span>
|
|
</div>
|
|
<div className="row justify-content-center">
|
|
<div className="col-lg-4 col-md-6 col-sm-8">
|
|
<div className="pricing__box">
|
|
<div className="pricing__head">
|
|
<h5 className="title">Basic Plan</h5>
|
|
</div>
|
|
<div className={`pricing__price ${isToggled ? "change-subs-duration" : ""}`}>
|
|
<h2 className="price monthly_price"><strong>$</strong> 15.00 <span>/ Month</span></h2>
|
|
<h2 className="price annual_price"><strong>$</strong> 149.00 <span>/ Month</span></h2>
|
|
</div>
|
|
<div className="pricing__list">
|
|
<ul className="list-wrap">
|
|
<li>
|
|
<img src="/assets/img/icon/check_icon.svg" alt="" />
|
|
5000 User Activities
|
|
</li>
|
|
<li>
|
|
<img src="/assets/img/icon/check_icon.svg" alt="" />
|
|
Unlimited Access
|
|
</li>
|
|
<li>
|
|
<img src="/assets/img/icon/check_icon.svg" alt="" />
|
|
No Hidden Charge
|
|
</li>
|
|
<li>
|
|
<img src="/assets/img/icon/check_icon.svg" alt="" />
|
|
03 Time Updates
|
|
</li>
|
|
<li>
|
|
<img src="/assets/img/icon/check_icon.svg" alt="" />
|
|
Figma Source File
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div className="pricing__btn">
|
|
<Link href="#" className="btn">Get this plan Now</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-4 col-md-6 col-sm-8">
|
|
<div className="pricing__box">
|
|
<div className="pricing__head">
|
|
<h5 className="title">Standard Plan</h5>
|
|
</div>
|
|
<div className={`pricing__price ${isToggled ? "change-subs-duration" : ""}`}>
|
|
<h2 className="price monthly_price"><strong>$</strong> 29.00 <span>/ Month</span></h2>
|
|
<h2 className="price annual_price"><strong>$</strong> 229.00 <span>/ Month</span></h2>
|
|
</div>
|
|
<div className="pricing__list">
|
|
<ul className="list-wrap">
|
|
<li>
|
|
<img src="/assets/img/icon/check_icon.svg" alt="" />
|
|
5000 User Activities
|
|
</li>
|
|
<li>
|
|
<img src="/assets/img/icon/check_icon.svg" alt="" />
|
|
Unlimited Access
|
|
</li>
|
|
<li>
|
|
<img src="/assets/img/icon/check_icon.svg" alt="" />
|
|
No Hidden Charge
|
|
</li>
|
|
<li>
|
|
<img src="/assets/img/icon/check_icon.svg" alt="" />
|
|
03 Time Updates
|
|
</li>
|
|
<li>
|
|
<img src="/assets/img/icon/check_icon.svg" alt="" />
|
|
Figma Source File
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div className="pricing__btn">
|
|
<Link href="#" className="btn">Get this plan Now</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-4 col-md-6 col-sm-8">
|
|
<div className="pricing__box">
|
|
<div className="pricing__head">
|
|
<h5 className="title">Corporate Plan</h5>
|
|
</div>
|
|
<div className={`pricing__price ${isToggled ? "change-subs-duration" : ""}`}>
|
|
<h2 className="price monthly_price"><strong>$</strong> 89.00 <span>/ Month</span></h2>
|
|
<h2 className="price annual_price"><strong>$</strong> 889.00 <span>/ Month</span></h2>
|
|
</div>
|
|
<div className="pricing__list">
|
|
<ul className="list-wrap">
|
|
<li>
|
|
<img src="/assets/img/icon/check_icon.svg" alt="" />
|
|
5000 User Activities
|
|
</li>
|
|
<li>
|
|
<img src="/assets/img/icon/check_icon.svg" alt="" />
|
|
Unlimited Access
|
|
</li>
|
|
<li>
|
|
<img src="/assets/img/icon/check_icon.svg" alt="" />
|
|
No Hidden Charge
|
|
</li>
|
|
<li>
|
|
<img src="/assets/img/icon/check_icon.svg" alt="" />
|
|
03 Time Updates
|
|
</li>
|
|
<li>
|
|
<img src="/assets/img/icon/check_icon.svg" alt="" />
|
|
Figma Source File
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div className="pricing__btn">
|
|
<Link href="#" className="btn">Get this plan Now</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|