382 lines
21 KiB
JavaScript
382 lines
21 KiB
JavaScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
const basicFeatures = [
|
|
{ text: "1 Project", included: true },
|
|
{ text: "100K API Access", included: true },
|
|
{ text: "100MB Storage", included: true },
|
|
{ text: "Weekly Reports", included: false },
|
|
{ text: "7/24 Support", included: false },
|
|
];
|
|
|
|
const premiumFeatures = [
|
|
{ text: "5 Projects", included: true },
|
|
{ text: "100K API Access", included: true },
|
|
{ text: "200MB Storage", included: true },
|
|
{ text: "Weekly Reports", included: true },
|
|
{ text: "7/24 Support", included: false },
|
|
];
|
|
|
|
const corporateFeatures = [
|
|
{ text: "20 Projects", included: true },
|
|
{ text: "300K API Access", included: true },
|
|
{ text: "500MB Storage", included: true },
|
|
{ text: "Weekly Reports", included: true },
|
|
{ text: "7/24 Support", included: true },
|
|
];
|
|
|
|
export default function Pricing2() {
|
|
const [isMonthly, setIsMonthly] = useState(true);
|
|
return (
|
|
<section id="snippet-2" className="wrapper !bg-[#ffffff] ">
|
|
<div className="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
|
|
<div className="flex flex-wrap mx-[-15px]">
|
|
<div className="lg:w-10/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
|
|
<h2 className="!text-[.75rem] uppercase !text-[#aab0bc] !mb-3 !tracking-[0.02rem] !leading-[1.35]">
|
|
Our Pricing
|
|
</h2>
|
|
<h3 className="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-[5rem] xl:!mb-6 lg:!mb-6 md:!mb-6 lg:!px-10 xl:!px-10">
|
|
We offer great prices, premium products and quality service for
|
|
your business.
|
|
</h3>
|
|
</div>
|
|
{/*/column */}
|
|
</div>
|
|
{/*/.row */}
|
|
<div className="pricing-wrapper !relative">
|
|
<div
|
|
className="shape bg-dot primary rellax !w-[6rem] !h-[8rem] bg-[radial-gradient(#3f78e0_2px,transparent_2.5px)] absolute z-[1] opacity-50"
|
|
data-rellax-speed={1}
|
|
style={{ top: "2rem", right: "-2.4rem" }}
|
|
/>
|
|
<div
|
|
className="shape !rounded-[50%] bg-line red rellax !w-[8rem] !h-[8rem] hidden xl:block lg:block absolute z-[1] opacity-50"
|
|
data-rellax-speed={1}
|
|
style={{ bottom: "0.5rem", left: "-2.5rem" }}
|
|
/>
|
|
<div className="flex flex-wrap items-center justify-center switcher">
|
|
<p className="!mb-0 !pr-[.75rem]">Monthly</p>
|
|
<div
|
|
onClick={() => {
|
|
setIsMonthly((pre) => !pre);
|
|
}}
|
|
className="pricing-switchers w-8 h-4 clear-both !text-center !relative bg-[rgba(30,34,40,0.07)] !box-content rounded-3xl border-[0.2rem] border-solid border-transparent"
|
|
>
|
|
<div
|
|
className={`pricing-switcher cursor-pointer w-full float-left h-4 leading-4 !relative z-[888] transition-[0.3s] duration-[ease-in-out] uppercas ${
|
|
isMonthly ? "pricing-switcher-active !text-white" : ""
|
|
}`}
|
|
/>
|
|
<div
|
|
className={`pricing-switcher cursor-pointer w-full float-left h-4 leading-4 !relative z-[888] transition-[0.3s] duration-[ease-in-out] uppercas ${
|
|
!isMonthly ? "pricing-switcher-active !text-white" : ""
|
|
}`}
|
|
/>
|
|
<div className="h-4 w-4 block absolute z-[555] transition-[0.3s] duration-[ease-in-out] m-0 rounded-[100%] border-[none] left-0 top-0 !bg-[#1fc76f] opacity-100 switcher-button" />
|
|
</div>
|
|
<p className="!mb-0 !pl-3 !relative">Yearly</p>
|
|
</div>
|
|
<div className="flex flex-wrap mx-[-15px] !mt-3 xl:!mt-5 lg:!mt-5 md:!mt-5">
|
|
<div className="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
|
|
<div className="pricing card !text-center">
|
|
<div className="card-body flex-[1_1_auto] pb-4 xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem]">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 512 412.9"
|
|
data-inject-url="https://jsite.jingrow.com/assets/img/icons/lineal/shopping-basket.svg"
|
|
className="svg-inject icon-svg text-[#1fc76f] !mb-3 !w-[2.6rem] !h-[2.6rem] m-[0_auto]"
|
|
>
|
|
<path
|
|
className="lineal-fill"
|
|
d="M453.8 238.1l-9.6 76.3H67.8l-9.6-76.3z"
|
|
/>
|
|
<circle
|
|
className="lineal-fill"
|
|
cx="178.1"
|
|
cy="149.9"
|
|
r="35.1"
|
|
/>
|
|
<circle
|
|
className="lineal-fill"
|
|
cx="333.9"
|
|
cy="149.9"
|
|
r="35.1"
|
|
/>
|
|
<path
|
|
className="lineal-stroke"
|
|
d="M498.6 136.5h-60.2c-7.4-.2-13.6 5.7-13.8 13.1-.2 7.4 5.7 13.6 13.1 13.8h11.8l-7.5 61.3H70.1l-7.5-61.3h68.9c7.4 25.7 34.3 40.6 60 33.1 16-4.6 28.5-17.1 33.1-33.1h62.6c7.4 25.7 34.3 40.6 60 33.2 25.7-7.4 40.6-34.3 33.2-60-4.9-17.1-18.9-30.1-36.3-33.9l-39-94.2c-2.8-6.9-10.7-10.1-17.6-7.3s-10.1 10.7-7.3 17.6l35.7 86.2c-14 5.5-24.6 17.2-28.8 31.6h-62.6c-4.2-14.4-14.8-26.1-28.8-31.7l35.7-86.2c2.8-6.9-.4-14.7-7.3-17.6s-14.7.4-17.6 7.3l-39.1 94.2c-17.4 3.8-31.3 16.9-36.2 33.9H13.4C6 136.7.1 142.9.3 150.3c.2 7.1 5.9 12.9 13.1 13.1h22.1l29.8 237.8c.9 6.7 6.6 11.8 13.3 11.8h354.8c6.8 0 12.5-5 13.3-11.8l29.8-237.8h22c7.4-.2 13.3-6.4 13.1-13.8-.2-7.2-5.9-12.9-13-13.1zm-165-8.2c.4 0 .9.1 1.3.1h.7c11.9.9 20.8 11.3 19.9 23.2-.9 11.9-11.3 20.8-23.2 19.9-11.9-.9-20.8-11.3-19.9-23.2.8-11.1 10-19.7 21.2-20zm-157.1.1h.7c.4 0 .9-.1 1.3-.1 11.9.2 21.4 10 21.3 22-.2 11.9-10 21.4-22 21.3-11.9-.2-21.4-10-21.3-22 .2-11.2 8.9-20.4 20-21.2zm-103 123.1h365.1l-6.3 49.5H79.7l-6.2-49.5zM90.4 386L83 327.9h345.9l-7.4 58.1H90.4z"
|
|
/>
|
|
</svg>
|
|
<h4 className="card-title">Basic Plan</h4>
|
|
<div className="prices !text-[#343f52]">
|
|
<div
|
|
className={`price ${
|
|
isMonthly ? "price-show" : "price-hidden"
|
|
} !justify-start`}
|
|
>
|
|
<span className="price-currency">$</span>
|
|
<span className="price-value">9</span>
|
|
<span className="price-duration">mo</span>
|
|
</div>
|
|
<div
|
|
className={`price ${
|
|
!isMonthly ? "price-show" : "price-hidden"
|
|
} !justify-start`}
|
|
>
|
|
<span className="price-currency">$</span>
|
|
<span className="price-value">99</span>
|
|
<span className="price-duration">yr</span>
|
|
</div>
|
|
</div>
|
|
{/*/.prices */}
|
|
<ul className="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8 text-left">
|
|
{basicFeatures.map((feature, index) => {
|
|
const iconClass = feature.included
|
|
? "uil-check"
|
|
: "uil-times bullet-soft-red";
|
|
const bgColor = feature.included ? "#dce7f9" : "#fae3e4";
|
|
const textColor = feature.included
|
|
? "#1fc76f"
|
|
: "#e2626b";
|
|
const iconContent = feature.included ? "e9dd" : "ed3b";
|
|
|
|
return (
|
|
<li
|
|
key={index}
|
|
className={`relative !pl-6 ${
|
|
index !== 0 ? "!mt-[0.35rem]" : ""
|
|
}`}
|
|
>
|
|
<i
|
|
className={`${iconClass} absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center rounded-[100%] top-[0.2rem] before:align-middle before:table-cell`}
|
|
style={{
|
|
backgroundColor: bgColor,
|
|
color: textColor,
|
|
}}
|
|
/>
|
|
<span>
|
|
<strong>{feature.text.split(" ")[0]}</strong>{" "}
|
|
{feature.text.split(" ").slice(1).join(" ")}
|
|
</span>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
<a
|
|
href="#"
|
|
className="btn btn-primary !text-white !bg-[#1fc76f] border-[#1fc76f] hover:text-white hover:bg-[#1fc76f] hover:!border-[#1fc76f] active:text-white active:bg-[#1fc76f] active:border-[#1fc76f] disabled:text-white disabled:bg-[#1fc76f] disabled:border-[#1fc76f] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
|
|
>
|
|
Choose Plan
|
|
</a>
|
|
</div>
|
|
{/*/.card-body */}
|
|
</div>
|
|
{/*/.pricing */}
|
|
</div>
|
|
{/*/column */}
|
|
<div className="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full popular !mt-[30px]">
|
|
<div className="pricing card !text-center">
|
|
<div className="card-body flex-[1_1_auto] pb-4 xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem]">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 479.8 512"
|
|
data-inject-url="https://jsite.jingrow.com/assets/img/icons/lineal/home.svg"
|
|
className="svg-inject icon-svg text-[#1fc76f] !mb-3 !w-[2.6rem] !h-[2.6rem] m-[0_auto]"
|
|
>
|
|
<path
|
|
className="lineal-stroke"
|
|
d="M308 512H61.9c-8 0-14.4-6.5-14.4-14.4V227.2c0-4.3 2-8.4 5.4-11.2l178-143.7c5.3-4.3 12.8-4.3 18.1 0L427 216c3.4 2.7 5.4 6.9 5.4 11.2v269.6c-.2 8-6.8 14.3-14.8 14-7.7-.2-13.8-6.4-14-14V234.1L239.9 102 76.3 234.1v249.1H308c8 .2 14.3 6.8 14 14.8-.2 7.6-6.3 13.8-14 14z"
|
|
/>
|
|
<path
|
|
className="lineal-stroke"
|
|
d="M465.4 209.8c-3.3 0-6.4-1.1-9-3.2L239.9 32.9 23.5 206.7c-6.2 5-15.3 4-20.3-2.2s-4-15.3 2.2-20.3l225.5-181c5.3-4.2 12.8-4.2 18.1 0l225.5 181c6.2 5 7.2 14.1 2.2 20.3-2.8 3.3-6.9 5.3-11.3 5.3z"
|
|
/>
|
|
<ellipse
|
|
transform="rotate(-80.781 239.904 207.686)"
|
|
className="lineal-fill"
|
|
cx="239.9"
|
|
cy="207.7"
|
|
rx="42.9"
|
|
ry={43}
|
|
/>
|
|
<path
|
|
className="lineal-stroke"
|
|
d="M239.9 265.1c-31.7 0-57.4-25.7-57.4-57.4s25.7-57.4 57.4-57.4 57.4 25.7 57.4 57.4c-.1 31.7-25.7 57.3-57.4 57.4zm0-85.9c-15.8 0-28.5 12.8-28.5 28.5s12.8 28.5 28.5 28.5 28.5-12.8 28.5-28.5c0-15.8-12.8-28.5-28.5-28.5z"
|
|
/>
|
|
<path
|
|
className="lineal-fill"
|
|
d="M171.8 325.7h136.1v171.9H171.8z"
|
|
/>
|
|
<path
|
|
className="lineal-stroke"
|
|
d="M308 512H171.8c-8 0-14.4-6.5-14.4-14.4V325.7c0-8 6.5-14.4 14.4-14.4H308c8 0 14.4 6.5 14.4 14.4v171.9c0 7.9-6.4 14.4-14.4 14.4zm-121.8-28.9h107.3v-143H186.2v143zm234.2-317.7c-7.9 0-14.4-6.5-14.4-14.4V73.3h-28.6c-8 0-14.4-6.5-14.4-14.4s6.5-14.4 14.4-14.4h43c8 0 14.4 6.5 14.4 14.4v92c0 8-6.4 14.4-14.4 14.5 0-.1 0 0 0 0z"
|
|
/>
|
|
</svg>
|
|
<h4 className="card-title">Premium Plan</h4>
|
|
<div className="prices !text-[#343f52]">
|
|
<div
|
|
className={`price ${
|
|
isMonthly ? "price-show" : "price-hidden"
|
|
} !justify-start`}
|
|
>
|
|
<span className="price-currency">$</span>
|
|
<span className="price-value">19</span>
|
|
<span className="price-duration">mo</span>
|
|
</div>
|
|
<div
|
|
className={`price ${
|
|
!isMonthly ? "price-show" : "price-hidden"
|
|
} !justify-start`}
|
|
>
|
|
<span className="price-currency">$</span>
|
|
<span className="price-value">199</span>
|
|
<span className="price-duration">yr</span>
|
|
</div>
|
|
</div>
|
|
{/*/.prices */}
|
|
<ul className="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8 text-left">
|
|
{premiumFeatures.map((feature, index) => {
|
|
const iconClass = feature.included
|
|
? "uil-check"
|
|
: "uil-times bullet-soft-red";
|
|
const bgColor = feature.included ? "#dce7f9" : "#fae3e4";
|
|
const textColor = feature.included
|
|
? "#1fc76f"
|
|
: "#e2626b";
|
|
|
|
return (
|
|
<li
|
|
key={index}
|
|
className="relative !pl-6 !mt-[0.35rem]"
|
|
>
|
|
<i
|
|
className={`${iconClass} absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center rounded-[100%] top-[0.2rem] before:align-middle before:table-cell`}
|
|
style={{
|
|
backgroundColor: bgColor,
|
|
color: textColor,
|
|
}}
|
|
/>
|
|
<span>
|
|
<strong>{feature.text.split(" ")[0]}</strong>{" "}
|
|
{feature.text.split(" ").slice(1).join(" ")}
|
|
</span>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
<a
|
|
href="#"
|
|
className="btn btn-primary !text-white !bg-[#1fc76f] border-[#1fc76f] hover:text-white hover:bg-[#1fc76f] hover:!border-[#1fc76f] active:text-white active:bg-[#1fc76f] active:border-[#1fc76f] disabled:text-white disabled:bg-[#1fc76f] disabled:border-[#1fc76f] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
|
|
>
|
|
Choose Plan
|
|
</a>
|
|
</div>
|
|
{/*/.card-body */}
|
|
</div>
|
|
{/*/.pricing */}
|
|
</div>
|
|
{/*/column */}
|
|
<div className="md:w-6/12 lg:w-4/12 xl:w-4/12 md:!ml-[25%] w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-0 lg:!ml-0 !mt-[30px]">
|
|
<div className="pricing card !text-center">
|
|
<div className="card-body flex-[1_1_auto] pb-4 xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem]">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 409.6 380.8"
|
|
data-inject-url="https://jsite.jingrow.com/assets/img/icons/lineal/briefcase-2.svg"
|
|
className="svg-inject icon-svg text-[#1fc76f] !mb-3 !w-[2.6rem] !h-[2.6rem] m-[0_auto]"
|
|
>
|
|
<path
|
|
className="lineal-stroke"
|
|
d="M299.9 104.7h-23.8V56.5c0-18.1-14.6-32.7-32.7-32.7h-77.2c-18 0-32.7 14.7-32.7 32.7v48.2h-23.8V56.5C109.8 25.3 135 0 166.2 0h77.2c31.2 0 56.4 25.3 56.5 56.5v48.2z"
|
|
/>
|
|
<path
|
|
className="lineal-stroke"
|
|
d="M360.5 380.8H49.1c-27.1 0-49-22-49.1-49.1V119.1C0 92 22 70 49.1 70h311.5c27.1 0 49 22 49.1 49.1v212.7c-.1 27.1-22.1 49-49.2 49zM49.1 93.8c-14 0-25.3 11.3-25.3 25.3v212.7c0 14 11.3 25.3 25.3 25.3h311.5c14 0 25.3-11.3 25.3-25.3V119.1c0-14-11.3-25.3-25.3-25.3H49.1z"
|
|
/>
|
|
<path
|
|
className="lineal-fill"
|
|
d="M49.2 81.7c-18.4 0-33.3 14.8-33.3 33.2 0 2.7.3 5.3.9 7.9C35.4 197.9 103.6 254 184.2 254h41.2c80.6 0 148.8-56.1 167.3-131.2 4.3-17.8-6.6-35.8-24.5-40.2-2.6-.6-5.2-.9-7.9-.9H49.2z"
|
|
/>
|
|
<path
|
|
className="lineal-stroke"
|
|
d="M225.4 265.9h-41.2c-41.5-.1-81.8-14.2-114.3-40C38 200.5 15.3 165.2 5.4 125.6-.5 101.4 14.3 77 38.6 71.1c3.5-.9 7.1-1.3 10.7-1.3h311.1c24.9 0 45.2 20.2 45.2 45.1 0 3.6-.4 7.2-1.3 10.7-9.9 39.6-32.6 74.8-64.5 100.2-32.6 25.9-72.9 40-114.4 40.1zM49.2 93.6c-6.6 0-12.9 3-16.9 8.2-4.1 5.1-5.5 11.8-3.9 18.2 17.6 71.8 81.9 122.3 155.8 122.2h41.2c73.9.1 138.3-50.4 155.8-122.2 1.6-6.3.1-13-3.9-18.1-4.1-5.2-10.3-8.3-16.9-8.2l-311.2-.1z"
|
|
/>
|
|
<path
|
|
className="lineal-fill"
|
|
d="M128.5 288.5h-13.8c-8.9 0-16.1-7.2-16.1-16.1v-48.3c0-8.9 7.2-16.1 16.1-16.1h13.8c8.9 0 16.1 7.2 16.1 16.1v48.3c0 8.9-7.2 16.1-16.1 16.1z"
|
|
/>
|
|
<path
|
|
className="lineal-stroke"
|
|
d="M128.5 300.4h-13.8c-15.5 0-28-12.5-28-28v-48.3c0-15.5 12.5-28 28-28h13.8c15.5 0 28 12.5 28 28v48.3c0 15.5-12.5 28-28 28zm-13.8-80.5c-2.3 0-4.2 1.9-4.2 4.2v48.3c0 2.3 1.9 4.2 4.2 4.2h13.8c2.3 0 4.2-1.9 4.2-4.2v-48.3c0-2.3-1.9-4.2-4.2-4.2h-13.8z"
|
|
/>
|
|
<path
|
|
className="lineal-fill"
|
|
d="M294.9 288.5h-13.8c-8.9 0-16.1-7.2-16.1-16.1v-48.3c0-8.9 7.2-16.1 16.1-16.1h13.8c8.9 0 16.1 7.2 16.1 16.1v48.3c0 8.9-7.2 16.1-16.1 16.1z"
|
|
/>
|
|
<path
|
|
className="lineal-stroke"
|
|
d="M294.9 300.4h-13.8c-15.5 0-28-12.5-28-28v-48.3c0-15.5 12.5-28 28-28h13.8c15.5 0 28 12.5 28 28v48.3c0 15.5-12.5 28-28 28zm-13.8-80.5c-2.3 0-4.2 1.9-4.2 4.2v48.3c0 2.3 1.9 4.2 4.2 4.2h13.8c2.3 0 4.2-1.9 4.2-4.2v-48.3c0-2.3-1.9-4.2-4.2-4.2h-13.8z"
|
|
/>
|
|
</svg>
|
|
<h4 className="card-title">Corporate Plan</h4>
|
|
<div className="prices !text-[#343f52]">
|
|
<div
|
|
className={`price ${
|
|
isMonthly ? "price-show" : "price-hidden"
|
|
} !justify-start`}
|
|
>
|
|
<span className="price-currency">$</span>
|
|
<span className="price-value">49</span>
|
|
<span className="price-duration">mo</span>
|
|
</div>
|
|
<div
|
|
className={`price ${
|
|
!isMonthly ? "price-show" : "price-hidden"
|
|
} !justify-start`}
|
|
>
|
|
<span className="price-currency">$</span>
|
|
<span className="price-value">499</span>
|
|
<span className="price-duration">yr</span>
|
|
</div>
|
|
</div>
|
|
{/*/.prices */}
|
|
<ul className="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8 text-left">
|
|
{corporateFeatures.map((feature, index) => {
|
|
return (
|
|
<li
|
|
key={index}
|
|
className="relative !pl-6 !mt-[0.35rem]"
|
|
>
|
|
<i className="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#1fc76f] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell" />
|
|
<span>
|
|
<strong>{feature.text.split(" ")[0]}</strong>{" "}
|
|
{feature.text.split(" ").slice(1).join(" ")}
|
|
</span>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
<a
|
|
href="#"
|
|
className="btn btn-primary !text-white !bg-[#1fc76f] border-[#1fc76f] hover:text-white hover:bg-[#1fc76f] hover:!border-[#1fc76f] active:text-white active:bg-[#1fc76f] active:border-[#1fc76f] disabled:text-white disabled:bg-[#1fc76f] disabled:border-[#1fc76f] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
|
|
>
|
|
Choose Plan
|
|
</a>
|
|
</div>
|
|
{/*/.card-body */}
|
|
</div>
|
|
{/*/.pricing */}
|
|
</div>
|
|
{/*/column */}
|
|
</div>
|
|
{/*/.row */}
|
|
</div>
|
|
{/*/.pricing-wrapper */}
|
|
</div>
|
|
{/* /.container */}
|
|
|
|
{/* /.container */}
|
|
</section>
|
|
);
|
|
}
|