yogastic/yoga-app/src/components/pricing.component.tsx
2025-02-23 14:57:49 +01:00

133 lines
8.0 KiB
TypeScript

import {YogaPriceComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-price-component";
import {PriceItemComponent} from "@/components/price.item.component";
export interface Props{
config: YogaPriceComponent_Plain
}
const PricingComponent = ({config: { title,header,description,prices}}: Props) => {
return (
<section className="pricing_plans_section">
<div className="container">
<div className="row">
<div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div className="pricing_plans_content">
<h5>{title}</h5>
<h2>{header}</h2>
<p>{description}</p>
</div>
</div>
</div>
<div className="row" data-aos="fade-up">
{
prices.map(value => <PriceItemComponent key={value.id} config={value} />)
}
{/* <div className="col-lg-4 col-md-4 col-sm-6 col-xs-12">*/}
{/* <div className="pricing_plans_box_content">*/}
{/* <div className="pricing_plans_box_upper_portion">*/}
{/* <figure className="pricing_plans_image mb-0">*/}
{/* <YogaImageComponent src="/assets/images/pricing_plan_1.png" alt="" className="img-fluid"/>*/}
{/* </figure>*/}
{/* <div className="pricing_plans_box_image_content">*/}
{/* <figure className="mb-0">*/}
{/* <YogaImageComponent src="/assets/images/pricing_plan_icon_1.png" alt="" className="img-fluid"/>*/}
{/* </figure>*/}
{/* </div>*/}
{/* </div>*/}
{/* <div className="pricing_plans_box_lower_portion">*/}
{/* <h3>Standard</h3>*/}
{/* <ul className="list-unstyled">*/}
{/* <li>*/}
{/* <i className="fa-solid fa-check" aria-hidden="true"></i>Pay as you go*/}
{/* </li>*/}
{/* <li>*/}
{/* <i className="fa-solid fa-check" aria-hidden="true"></i>Perfect for*/}
{/* non-residence*/}
{/* </li>*/}
{/* </ul>*/}
{/* <div className="pricing_plans_span_wrapper">*/}
{/* <span className="price">$30</span>*/}
{/* <span className="per_month">/per month</span>*/}
{/* </div>*/}
{/* <div className="btn_wrapper">*/}
{/* <a className="enroll_now_btn text-decoration-none" href="/pricing.html">Enroll*/}
{/* Now</a>*/}
{/* </div>*/}
{/* </div>*/}
{/* </div>*/}
{/* </div>*/}
{/* <div className="col-lg-4 col-md-4 col-sm-6 col-xs-12">*/}
{/* <div className="pricing_plans_box_content">*/}
{/* <div className="pricing_plans_box_upper_portion">*/}
{/* <figure className="pricing_plans_image mb-0">*/}
{/* <YogaImageComponent src="/assets/images/pricing_plan_2.png" alt="" className="img-fluid"/>*/}
{/* </figure>*/}
{/* <div className="pricing_plans_box_image_content">*/}
{/* <figure className="mb-0">*/}
{/* <YogaImageComponent src="/assets/images/pricing_plan_icon_2.png" alt="" className="img-fluid"/>*/}
{/* </figure>*/}
{/* </div>*/}
{/* </div>*/}
{/* <div className="pricing_plans_box_lower_portion second_lower_portion">*/}
{/* <h3>Professional</h3>*/}
{/* <ul className="list-unstyled">*/}
{/* <li>*/}
{/* <i className="fa-solid fa-check" aria-hidden="true"></i>Short-term comitment*/}
{/* </li>*/}
{/* <li>*/}
{/* <i className="fa-solid fa-check" aria-hidden="true"></i>Online training for all*/}
{/* </li>*/}
{/* </ul>*/}
{/* <div className="pricing_plans_span_wrapper">*/}
{/* <span className="price">$120</span>*/}
{/* <span className="per_month">/per month</span>*/}
{/* </div>*/}
{/* <div className="btn_wrapper">*/}
{/* <a className="enroll_now_btn text-decoration-none" href="/pricing.html">Enroll*/}
{/* Now</a>*/}
{/* </div>*/}
{/* </div>*/}
{/* </div>*/}
{/* </div>*/}
{/* <div className="col-lg-4 col-md-4 col-sm-6 col-xs-12">*/}
{/* <div className="pricing_plans_box_content">*/}
{/* <div className="pricing_plans_box_upper_portion">*/}
{/* <figure className="pricing_plans_image mb-0">*/}
{/* <YogaImageComponent src="/assets/images/pricing_plan_3.png" alt="" className="img-fluid"/>*/}
{/* </figure>*/}
{/* <div className="pricing_plans_box_image_content">*/}
{/* <figure className="mb-0">*/}
{/* <YogaImageComponent src="/assets/images/pricing_plan_icon_3.png" alt="" className="img-fluid"/>*/}
{/* </figure>*/}
{/* </div>*/}
{/* </div>*/}
{/* <div className="pricing_plans_box_lower_portion third_lower_portion">*/}
{/* <h3>Private</h3>*/}
{/* <ul className="list-unstyled">*/}
{/* <li>*/}
{/* <i className="fa-solid fa-check" aria-hidden="true"></i>Long-term comitment*/}
{/* </li>*/}
{/* <li>*/}
{/* <i className="fa-solid fa-check" aria-hidden="true"></i>24/7 Available*/}
{/* </li>*/}
{/* </ul>*/}
{/* <div className="pricing_plans_span_wrapper">*/}
{/* <span className="price">$250</span>*/}
{/* <span className="per_month">/per month</span>*/}
{/* </div>*/}
{/* <div className="btn_wrapper">*/}
{/* <a className="enroll_now_btn text-decoration-none" href="/pricing.html">Enroll*/}
{/* Now</a>*/}
{/* </div>*/}
{/* </div>*/}
{/* </div>*/}
{/* </div>*/}
</div>
</div>
</section>
);
}
export default PricingComponent;