90 lines
3.0 KiB
JavaScript
90 lines
3.0 KiB
JavaScript
import { pricingPlans } from "@/data/pricing";
|
|
import React from "react";
|
|
import Link from "next/link";
|
|
import AnimatedText from "@/components/common/AnimatedText";
|
|
import Image from "next/image";
|
|
export default function Pricing({ shadow = false }) {
|
|
return (
|
|
<>
|
|
<div className="container">
|
|
<div className="section-title text-center">
|
|
<h6 className="wow fadeInUp">
|
|
<i className="fa-regular fa-arrow-left-long" />
|
|
pricing Plans
|
|
<i className="fa-regular fa-arrow-right-long" />
|
|
</h6>
|
|
<h2 className="splt-txt wow">
|
|
<AnimatedText text="Our Affordable Price" />
|
|
</h2>
|
|
</div>
|
|
<div className="row">
|
|
{pricingPlans.map((plan, index) => (
|
|
<div
|
|
key={index}
|
|
className={`col-xl-4 col-lg-6 col-md-6 wow fadeInUp ${
|
|
plan.active ? "active" : ""
|
|
}`}
|
|
data-wow-delay={plan.delay}
|
|
>
|
|
<div
|
|
className={`pricing-card-items ${plan.active ? "active" : ""} ${
|
|
shadow ? "box-shadow" : ""
|
|
} `}
|
|
>
|
|
{plan.active && (
|
|
<div className="tag-img">
|
|
<Image
|
|
src="/assets/img/tag.png"
|
|
width={94}
|
|
height={98}
|
|
alt="img"
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="pricing-shape">
|
|
<Image
|
|
src="/assets/img/pricing-shape.png"
|
|
width={288}
|
|
height={485}
|
|
alt="img"
|
|
/>
|
|
</div>
|
|
<div className="pricing-header">
|
|
<h3>{plan.title}</h3>
|
|
<h2>
|
|
{plan.price}/<span>{plan.frequency}</span>
|
|
</h2>
|
|
</div>
|
|
<ul className="pricing-list">
|
|
{plan.features.map((feature, i) => (
|
|
<li
|
|
key={i}
|
|
className={feature.available === false ? "style-2" : ""}
|
|
>
|
|
<i
|
|
className={`fa-solid ${
|
|
feature.available === false ? "fa-xmark" : "fa-check"
|
|
}`}
|
|
></i>
|
|
{typeof feature === "string" ? feature : feature.feature}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className="header-button">
|
|
<Link
|
|
href="/pricing"
|
|
className={`theme-btn ${plan.active ? "" : "style-2"}`}
|
|
>
|
|
<span></span>choose plan
|
|
<i className="fa-regular fa-arrow-right"></i>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|