53 lines
2.1 KiB
JavaScript
53 lines
2.1 KiB
JavaScript
import React from 'react';
|
|
import plans from 'data/CloudHosting/plans.json';
|
|
|
|
const Pricing = () => {
|
|
return (
|
|
<section className="pricing style-9 section-padding bg-gray2">
|
|
<div className="container">
|
|
<div className="section-head text-center style-9 mb-80 wow fadeInUp">
|
|
<h6> best plans </h6>
|
|
<h2> Hosting Plans Include </h2>
|
|
<p> Free to focus on growing your business, let us handle your site </p>
|
|
</div>
|
|
<div className="content">
|
|
<div className="row">
|
|
{
|
|
plans.map((plan, index) => (
|
|
<div className="col-lg-4" key={index}>
|
|
<div className="pricing-card wow fadeInUp">
|
|
<div className="card-head">
|
|
<h5> { plan.title } </h5>
|
|
<p> { plan.description } </p>
|
|
</div>
|
|
<div className="pricing-cont">
|
|
<h2 className="price"> ${plan.price} <small> /mo </small> </h2>
|
|
<p className="hightLight"> { plan.highlight } </p>
|
|
<p className="color-999"> { plan.text } </p>
|
|
<a href="#" className="butn border-2 border-darkBlue2 border rounded-3 color-darkBlue2 fw-bold mt-30 w-100 mb-20">
|
|
<span> Purchase Plan </span>
|
|
</a>
|
|
<ul>
|
|
{
|
|
plan.features.map((feature, i) => (
|
|
<li key={i}>
|
|
<p><strong className="color-darkBlue2"> { feature.value } </strong> { feature.title } </p>
|
|
<span className="icon"> <i className="fal fa-check"></i> </span>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
<h5 className="offer-text wow fadeInDown"> In addition to Windows Web Hosting plans, we offer <a href="#"> Linux Plans </a> </h5>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default Pricing |