99 lines
4.3 KiB
JavaScript
99 lines
4.3 KiB
JavaScript
import React,{ useEffect, useState,useContext } from 'react';
|
|
import { Link } from 'gatsby';
|
|
import { LanguageContext } from '../../context/LanguageContext';
|
|
import api from '../../common/api';
|
|
|
|
|
|
const Pricing = () => {
|
|
const { currentLanguage } = useContext(LanguageContext);
|
|
const [plansData, setPlansData] = useState({ plans: [], text_traductions: {} });
|
|
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
const response = await api.get('plan','plans.json');
|
|
setPlansData(response);
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, []);
|
|
|
|
const { plans, text_traductions } = plansData;
|
|
|
|
if (!plansData || plansData.length === 0) {
|
|
return <div>Loading...</div>;
|
|
}
|
|
|
|
return (
|
|
<section className="pricing style-3" data-scroll-index="5">
|
|
<div className="container">
|
|
<div className="content section-padding">
|
|
<div className="row">
|
|
<div className="col-lg-4">
|
|
<div className="info">
|
|
<div className="section-head style-3 mb-40">
|
|
<h3> {text_traductions.title && text_traductions.title[currentLanguage]} <span> {text_traductions.title2 && text_traductions.title2[currentLanguage]} </span></h3>
|
|
</div>
|
|
<small className="text text-gray mb-30">
|
|
{text_traductions.subtitle1 && text_traductions.subtitle1[currentLanguage]}
|
|
</small>
|
|
<small className="text text-gray d-block">
|
|
{text_traductions.subtitle2 && text_traductions.subtitle2[currentLanguage]} <br /> <a href="#" className="color-blue2 text-decoration-underline"> {text_traductions.contact && text_traductions.contact[currentLanguage]}</a> {text_traductions.us_now && text_traductions.us_now[currentLanguage]}
|
|
</small>
|
|
<Link to="/page-services-5" className="btn rounded-pill border-blue2 hover-blue2 mt-60 sm-butn">
|
|
<span>{text_traductions.our_services_button && text_traductions.our_services_button[currentLanguage]}</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-7 offset-lg-1">
|
|
<div className="price-cards">
|
|
<div className="row">
|
|
{
|
|
plans.map((plan, i) => (
|
|
<div className="col-lg-6" key={i}>
|
|
<div className={`pricing-card ${plan.recommended ? 'dark-card':''} style-3 mb-30 mb-lg-0`}>
|
|
<div className="card-head">
|
|
<div className="title">
|
|
<h4>{ plan.title } { plan.recommended && <small>{text_traductions.recommend && text_traductions.recommend[currentLanguage]}</small> }</h4>
|
|
<small>{ plan.description }</small>
|
|
</div>
|
|
<div className="price">
|
|
<h5>{ plan.price }</h5>
|
|
<small>{text_traductions.per_month && text_traductions.per_month[currentLanguage]}</small>
|
|
</div>
|
|
</div>
|
|
<div className="card-body">
|
|
<ul>
|
|
{
|
|
plan.features.map((feature, i) => (
|
|
<li key={i}>
|
|
<i className="bi bi-check"></i>
|
|
<small>{ feature }</small>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
</div>
|
|
<Link to="/page-contact-5" className="btn rounded-pill bg-blue2 sm-butn w-100 text-white">
|
|
<span>{text_traductions.get_started_now && text_traductions.get_started_now[currentLanguage]}</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img src="/assets/img/testimonials/testi3_lines.png" alt="" className="testi_lines w-100" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default Pricing |