CHIEFSOFT\ameye
101 lines
2.6 KiB
React
101 lines
2.6 KiB
React
import React from "react";
|
|
|
|
const PricingContent = [
|
|
{
|
|
packName: "Single",
|
|
packDetails: "Analyze performance and do more with your data",
|
|
price: "23.00",
|
|
durationNumber: "Per monthy",
|
|
facility: "Biller Yearly",
|
|
features: [
|
|
"Unlimited Email",
|
|
"5gb Hosting",
|
|
"2 website 3 sub domain",
|
|
"Email & Live chat",
|
|
"Backling",
|
|
"Discount Programe",
|
|
],
|
|
animationDelay: "",
|
|
activeClass: "",
|
|
},
|
|
{
|
|
packName: "Team",
|
|
packDetails: "Analyze performance and do more with your data",
|
|
price: "47.00",
|
|
durationNumber: "Per monthy",
|
|
facility: "Biller Yearly",
|
|
features: [
|
|
"Unlimited Email",
|
|
"5gb Hosting",
|
|
"2 website 3 sub domain",
|
|
"Email & Live chat",
|
|
"Backling",
|
|
"Discount Programe",
|
|
],
|
|
animationDelay: "100",
|
|
activeClass: "active most-popular",
|
|
},
|
|
{
|
|
packName: "Business",
|
|
packDetails: "Analyze performance and do more with your data",
|
|
price: "89.00",
|
|
durationNumber: "Per monthy",
|
|
facility: "Biller Yearly",
|
|
features: [
|
|
"Unlimited Email",
|
|
"5gb Hosting",
|
|
"2 website 3 sub domain",
|
|
"Email & Live chat",
|
|
"Backling",
|
|
"Discount Programe",
|
|
],
|
|
animationDelay: "200",
|
|
activeClass: "",
|
|
},
|
|
];
|
|
|
|
const Pricing = () => {
|
|
return (
|
|
<div className="row justify-content-center">
|
|
{PricingContent.map((val, i) => (
|
|
<div
|
|
className="col-lg-4 col-sm-6"
|
|
data-aos="fade-up"
|
|
data-aos-duration="1200"
|
|
data-aos-delay={val.animationDelay}
|
|
key={i}
|
|
>
|
|
<div className={`pr-table-wrapper mt-40 ${val.activeClass}`}>
|
|
<div className="pack-name">{val.packName}</div>
|
|
<div className="pack-details">{val.packDetails}</div>
|
|
<div className="top-banner d-md-flex align-items-center">
|
|
<div className="price">
|
|
<sup>$</sup>
|
|
{val.price}
|
|
</div>
|
|
<div>
|
|
<span>{val.durationNumber}</span>
|
|
<em>{val.facility}</em>
|
|
</div>
|
|
</div>
|
|
{/* /.top-banner */}
|
|
<a href="#" className="trial-button tran3s">
|
|
Start 30 days free trial
|
|
</a>
|
|
<ul className="pr-feature">
|
|
{val.features.map((list, i) => (
|
|
<li key={i}>{list}</li>
|
|
))}
|
|
</ul>
|
|
|
|
<div className="trial-text">No card required, cancel any time</div>
|
|
</div>
|
|
{/* /.pr-table-wrapper */}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Pricing;
|