74 lines
2.6 KiB
Python
74 lines
2.6 KiB
Python
import React, { Fragment, useState } from 'react';
|
||
import { Link } from 'react-router-dom';
|
||
import { Button, Card, CardBody, Col, CustomInput, Label, Row } from 'reactstrap';
|
||
import PricingCard from './PricingCard';
|
||
import FaqCollapse from '../faq/FaqCollapse';
|
||
import PageHeader from '../common/PageHeader';
|
||
import { isIterableArray } from '../../helpers/utils';
|
||
import pricing from '../../data/pricing/pricing';
|
||
|
||
const Pricing = () => {
|
||
// State
|
||
const [isYearly, setIsYearly] = useState(true);
|
||
|
||
return (
|
||
<Fragment>
|
||
<PageHeader
|
||
title="For teams of all sizes, in the cloud"
|
||
titleTag="h2"
|
||
description="Get the power, control, and customization you need to manage your team’s and organization’s projects."
|
||
className="mb-3"
|
||
col={{ lg: 9 }}
|
||
>
|
||
<Button tag={Link} color="link" size="sm" className="pl-0" to="#!">
|
||
Have questions? Chat with us
|
||
</Button>
|
||
</PageHeader>
|
||
|
||
<Card className="mb-3">
|
||
<CardBody>
|
||
<Row noGutters>
|
||
<Col xs={12} className="mb-3">
|
||
<Row className="justify-content-center justify-content-sm-between">
|
||
<Col sm="auto" className="text-center">
|
||
<h5 className="d-inline-block">Build Annually</h5>
|
||
{isYearly && <span className="badge badge-soft-success badge-pill ml-2">Save 25%</span>}
|
||
</Col>
|
||
<Col sm="auto" className="d-flex flex-center fs--1 mt-1 mt-sm-0">
|
||
<Label className="mr-2 mb-0" htmlFor="customSwitch1">
|
||
Monthly
|
||
</Label>
|
||
<CustomInput
|
||
type="switch"
|
||
id="customSwitch1"
|
||
label="Yearly"
|
||
checked={isYearly}
|
||
onChange={() => setIsYearly(!isYearly)}
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
</Col>
|
||
|
||
{isIterableArray(pricing) &&
|
||
pricing.map((pricingItem, index) => (
|
||
<Col lg={4} className={`${index !== 1 ? 'border-lg-y' : 'border-y'}`} key={index}>
|
||
<PricingCard {...pricingItem} isYearly={isYearly} />
|
||
</Col>
|
||
))}
|
||
|
||
<Col xs={12} className="text-center">
|
||
<h5 className="mt-5">Looking for personal or small team task management?</h5>
|
||
<p className="fs-1">
|
||
Try the <Link to="#">basic version</Link> of Falcon
|
||
</p>
|
||
</Col>
|
||
</Row>
|
||
</CardBody>
|
||
</Card>
|
||
<FaqCollapse />
|
||
</Fragment>
|
||
);
|
||
};
|
||
|
||
export default Pricing;
|