+
+
+ 
+
+
+ ❝
+
+
+
+
+
+ + {props.quote} ++
+
+
+
+ {props.person ? props.person : ""}
+ {props.title ? props.title : ""}
+
+
+
+
+
+
+
+
+
+
+ ❝
+
+
+
+ + {props.quote} ++
+
+
+
+ {props.person ? props.person : ""}
+ {props.title ? props.title : ""}
+
+
+
+
+
+
+ ❞
+
+
+
+
+ + {props.quote} ++
+
+
+
+
+ {props.person ? props.person : ""}
+ {props.title ? props.title : ""}
+ - {faq.answer.map((ans, id) => (
{ans}
))}
+ faq.answer.length >= 1 ?
- {faq.answer.map((ans, id) => (
{ans}
))}
}
{faq.link && }
@@ -100,10 +99,9 @@ const Faq = (props) => {
+
+ );
+};
+
+export default FeatureDetails;
diff --git a/src/sections/Pricing/comparison.js b/src/sections/Pricing/comparison.js
new file mode 100644
index 000000000000..83f49d289428
--- /dev/null
+++ b/src/sections/Pricing/comparison.js
@@ -0,0 +1,197 @@
+import React from "react";
+import styled from "styled-components";
+import {details} from "./data";
+import { Container} from "../../reusecore/Layout";
+import FeatureDetails from "./collapsible-details";
+
+
+const ComparisonWrapper = styled.div`
+margin: 6rem auto;
+
+h2, h5{
+ text-align: center;
+}
+
+.main {
+ box-shadow: 0 0 24px rgba(0, 0, 0, 0.15);
+ margin: 2rem auto;
+ display: block;
+ overflow-x: scroll;
+ overflow-y:hidden;
+}
+.price-table {
+ width: 100%;
+ border-collapse: collapse;
+ border: 0 none;
+}
+.price-table tr:not(:last-child) {
+ border-bottom: 1px solid rgba(0, 0, 0, 0.03);
+}
+.price-table tr td {
+ border-left: 1px solid rgba(0, 0, 0, 0.05);
+ padding: 0rem 2rem;
+ font-size: 1rem;
+ vertical-align: middle;
+ h5{
+ display: inline-block;
+ padding-top: 1rem;
+ font-size: 1.2rem;
+ }
+}
+.price-table tr td:first-child {
+ border-left: 0 none;
+ width: 45%;
+}
+.price-table tr td:not(:first-child) {
+ text-align: center;
+}
+.price-table tr:nth-child(even) {
+ background-color: #FFFFFF;
+}
+
+.price-table tr:hover {
+ background-color: ${props => props.theme.secondaryLightColor};
+}
+.price-table .fa-check {
+ color: #5336ca;
+}
+.price-table .fa-times {
+ color: #D8D6E3;
+}
+
+/* Highlighted column */
+
+.price-table tr td:nth-child(2) {
+ background: rgba(0,179,159,0.1);
+ padding: 8px 48px;
+}
+
+.price-table tr.price-table-head td {
+ font-size: 16px;
+ font-weight: 600;
+ text-transform: uppercase;
+}
+.price-table tr.price-table-head {
+ background-color: #00b39f;
+ color: #FFFFFF;
+ td{
+ padding: 1rem 0;
+ }
+}
+.price-table td.price {
+ padding: 16px 24px;
+ font-size: 20px;
+ font-weight: 600;
+}
+.price-table td.price .button {
+ padding: 1rem 1.5rem;
+ margin-top: 16px;
+ font-size: 12px;
+ font-weight: 600;
+ text-transform: uppercase;
+ display: inline-block;
+ border-radius: 64px;
+}
+.price-table td.price-table-popular {
+ border-top: 3px solid #00b39f;
+ color: #00b39f;
+ text-transform: uppercase;
+ font-size: 12px;
+ padding: 12px 48px;
+ font-weight: 700;
+}
+.price-table .price-blank {
+ background-color: #fafafa;
+ border: 0 none;
+}
+
+.category{
+ display: inline-block;
+ margin: 0 1rem;
+}
+
+.icon{
+ height: 4rem;
+ width: auto;
+ fill: #00b39f;
+ display: inline-block;
+}
+.no-icon{
+ height: 1.5rem;
+ width: auto;
+ fill: red;
+}
+.yes-icon{
+ height: 1.5rem;
+ width: auto;
+ fill: #00b39f;
+}
+.toggle-btn{
+ margin-top: 1rem;
+}
+.details{
+ p{
+ color: #7A848E;
+ margin-left: 1.1rem;
+ }
+}
+.category-icon{
+ margin: 1rem auto 0;
+}
+
+
+`;
+
+const Comparison = () => {
+ return (
+
+
+
+
+
+ );
+};
+
+export default Comparison;
diff --git a/src/sections/Pricing/data.js b/src/sections/Pricing/data.js
new file mode 100644
index 000000000000..15b94ec1a029
--- /dev/null
+++ b/src/sections/Pricing/data.js
@@ -0,0 +1,386 @@
+import React from "react";
+import { GiCheckMark } from "@react-icons/all-files/gi/GiCheckMark";
+import {MdClose} from "@react-icons/all-files/md/MdClose";
+import MeshMap from "./icons/meshmap-icon.svg";
+import Support from "./icons/support.svg";
+import Collab from "./icons/collab.svg";
+import Lifecycle from "./icons/lifecycle.svg";
+import Identity from "./icons/identity.svg";
+import Notification from "./icons/notifications.svg";
+import Configuration from "./icons/configuration.svg";
+import Perforamance from "./icons/perf.svg";
+
+export const details = [
+ {
+ id: 0,
+ category: "Configuration Management",
+ icon: Configuration,
+ features: [
+ {
+ feature: "Cloud Native Design Patterns",
+ description: "Import and export your designs using your local filesystem or remote URL.",
+ free:
+
+
+ );
+};
+
+
+export default Pricing;
diff --git a/src/sections/Pricing/pricing.style.js b/src/sections/Pricing/pricing.style.js
new file mode 100644
index 000000000000..00403c7dfbba
--- /dev/null
+++ b/src/sections/Pricing/pricing.style.js
@@ -0,0 +1,227 @@
+import styled from "styled-components";
+import background from "../Home/Projects-home/images/background.svg";
+
+const PricingWrapper = styled.section`
+
+.headers {
+ background: rgb(255,255,255);
+ background: linear-gradient(0deg, rgba(255,255,255,1) 12%, rgba(0,211,169,1) 43%, rgba(0,179,159,1) 60%, rgba(71,126,150,1) 100%);
+ /* background: linear-gradient(180deg, rgba(6,6,6,1) 12%, rgba(0,179,159,1) 52%, rgba(0,179,159,1) 53%, rgba(0,179,159,1) 53%, rgba(255,255,255,1) 79%); position: relative; */
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ height: 22rem;
+ @media (min-width: 1400px) {
+ height: 25rem;
+ }
+ @media (min-width: 2048px) {
+ height: 30rem;
+ }
+ h1{
+ margin-top: -2rem;
+ }
+
+ .header-svg {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ height: 12vw;
+ }
+ .header-heading {
+ color: white;
+ text-align: center;
+ }
+}
+
+.subscription-duration {
+ margin-top: 2rem;
+ margin-bottom: 4rem;
+ text-align: center;
+}
+
+.subscriptionButtons {
+ .button {
+ margin:.5rem 0rem 0rem 0rem;
+ font-weight:400;
+ color: white;
+ }
+ @media (min-width: 434px) {
+ .button:first-child{
+ border-top-right-radius: 0rem;
+ border-bottom-right-radius: 0rem;
+ }
+ .button:last-child{
+ border-top-left-radius: 0rem;
+ border-bottom-left-radius: 0rem;
+ }
+ }
+.active {
+ border-left: 1px solid ${props => props.theme.caribbeanGreenColor};
+ border-right: 1px solid ${props => props.theme.caribbeanGreenColor};
+ background-color: ${props => props.theme.caribbeanGreenColor};
+ padding: 0.3rem;
+ }
+
+.inactive {
+ background-color: ${props => props.theme.primaryLightColor};
+ padding: 0.2rem;
+ }
+}
+
+.wrapper{
+ max-width: 1090px;
+ position: relative;
+ width: 100%;
+ padding: 0 2rem;
+ margin: -2rem auto;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ @media (min-width: 1400px) {
+ margin: -8rem auto 0;
+ }
+ @media (min-width: 2048px) {
+ margin: -10rem auto;
+ }
+}
+
+
+.pricing-table {
+ background: #fff;
+ border-top: 3px solid #00b39f;
+ box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.1);
+ padding: 2rem;
+ border-radius: 4px;
+ transition: .3s;
+ @media (max-width: 768px) {
+ margin: 1.5rem 1rem;
+ }
+}
+
+.featured{
+ transform: scale(1.05);
+ box-shadow: 0px 2px 12px 0px rgb(0, 179, 158, 0.7);
+ }
+.pricing-table:hover {
+ box-shadow: 0px 1px 10px -4px rgba(0, 0, 0, .15);
+ }
+.featured:hover{
+ box-shadow: 0px 2px 16px rgb(0, 179, 158, 0.9);
+ }
+
+.pricing-table{
+
+ .pricing-label {
+ border-radius: 2px;
+ padding: .25rem .5rem;
+ display: inline-block;
+ font-size: 12px;
+ font-weight: 500;
+ margin-left: 60%;
+ }
+
+ h2 {
+ margin-top: 1rem;
+ color: #3b3b3b;
+ font-size: 24px;
+ font-weight: 500;
+ }
+
+ .byline {
+ color: ${props => props.theme.primaryLightColor};
+ font-size: 16px;
+ font-weight: 400;
+ }
+
+ .pricing-features {
+ margin-top: 2rem;
+ }
+
+ .pricing-features .feature {
+ margin: .5rem 0rem;
+ h5{
+ color: #7A848E;
+ font-size: 16px;
+ font-weight: 400;
+ vertical-align: text-top;
+ }
+ .check{
+ padding-right: 0.2rem;
+ vertical-align: middle;
+ color: ${props => props.theme.secondaryColor};
+ }
+ }
+
+
+ .price-tag {
+ margin-top: 2rem;
+ text-align: center;
+ font-weight: 500;
+ }
+
+ .price-tag .symbol {
+ font-size: 24px;
+ }
+
+ .price-tag .amount {
+ letter-spacing: -2px;
+ font-size: 3rem;
+ @media screen and (max-width: 992px) and (min-width: 768px) {
+ font-size: 1.5rem;
+ }
+ @media screen and (max-width: 400px) {
+ font-size: 2rem;
+ }
+ }
+
+ .price-tag .free {
+ font-size: 40px;
+ }
+
+ .price-tag .after {
+ color: #3b3b3b;
+ font-weight: 500;
+ }
+
+ .price-button-disabled, .price-button-link {
+ color: #fff;
+ display: block;
+ margin: 2rem auto 0;
+ padding: 1rem 2rem;
+ width: 100%;
+ text-align: center;
+ font-weight: 500;
+ transition: .3s;
+ background: ${props => props.theme.secondaryColor};
+ }
+
+ .price-button-disabled{
+ background: rgb(0, 179, 158, 0.6);
+ }
+ .price-button-disabled:hover{
+ cursor: default;
+ box-shadow: none;
+ }
+
+ .pricing-label {
+ background: rgb(0, 179, 158, 0.3);
+ color: ${props => props.theme.secondaryColor};
+ }
+
+ .price-tag {
+ color: ${props => props.theme.secondaryColor};
+ }
+}
+
+.accordion__item {
+ .accordion__header {
+ margin: 0.1rem 0;
+ }
+}
+
+
+`;
+
+export default PricingWrapper;
diff --git a/src/sections/Pricing/review-slider.js b/src/sections/Pricing/review-slider.js
new file mode 100644
index 000000000000..1c972061243e
--- /dev/null
+++ b/src/sections/Pricing/review-slider.js
@@ -0,0 +1,129 @@
+import React from "react";
+import styled from "styled-components";
+import Customers from "../../reusecore/Blockquote/Blockquote-image";
+import Slider from "react-slick";
+import Maxi from "../../collections/members/maximiliano-churichi/Maximiliano-Churichi.jpg";
+import Otto from "../../collections/members/otto-van-der-schaaf/otto-van-der-schaaf.jpg";
+import Nic from "../../collections/members/nicholas-jackson/nic-jackson.jpg";
+import William from "./reviews/william-morgan.png";
+import Ken from "./reviews/ken-owens.png";
+
+
+const settings = {
+ dots: false,
+ infinite: true,
+ speed: 400,
+ slidesToShow: 3,
+ slidesToScroll: 0.5,
+ autoplay: true,
+ autoplaySpeed: 1500,
+
+ responsive: [
+ {
+ breakpoint: 1300,
+ settings: {
+ slidesToShow: 2.5,
+ }
+ },
+ {
+ breakpoint: 1024,
+ settings: {
+ slidesToShow: 2,
+ }
+ },
+ {
+ breakpoint: 800,
+ settings: {
+ slidesToShow: 1.5,
+ slidesToScroll: 0.5,
+ }
+ },
+ {
+ breakpoint: 600,
+ settings: {
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ autoplaySpeed: 2000,
+ }
+ }
+ ]
+};
+
+const ReviewsWrapper = styled.div`
+.slider{
+ padding: 2rem 0 0.5rem;
+ background: ${props => props.theme.secondaryLightColor};
+ h2{
+ text-align: center;
+ padding: 0 0 2rem;
+ }
+ .type-one-wrapper{
+ margin: 0 1rem;
+ }
+}
+
+`;
+
+
+const Reviews = () => {
+ return (
+
+
+ );
+};
+
+export default Reviews;
diff --git a/src/sections/Pricing/reviews/ken-owens.png b/src/sections/Pricing/reviews/ken-owens.png
new file mode 100644
index 000000000000..6be74007de05
Binary files /dev/null and b/src/sections/Pricing/reviews/ken-owens.png differ
diff --git a/src/sections/Pricing/reviews/william-morgan.png b/src/sections/Pricing/reviews/william-morgan.png
new file mode 100644
index 000000000000..bcb0b9863e9f
Binary files /dev/null and b/src/sections/Pricing/reviews/william-morgan.png differ
diff --git a/src/theme/app/themeStyles.js b/src/theme/app/themeStyles.js
index 0e06eadcde35..eb782fc7db08 100644
--- a/src/theme/app/themeStyles.js
+++ b/src/theme/app/themeStyles.js
@@ -27,6 +27,8 @@ const theme = {
// Teal Blue
tertiaryColorTwo: "#477E96",
+ tealColor: "#477E96",
+ tealLightColor: "#66B6D9",
headingColor: "#111111",
Didn't find an answer to your question?
-
+ {props.description ?
+
+
+ {expand ? (
+
: "" }
+ {props.category}
+
+
+ + {props.description} +
+Compare All Features
+Choose a plan that’s right for you
+
+
+
+
+
+ | + | Most popular | ++ | + |
| + | Free | +Team | +Enterprise | +
+ {x.category} |
+ + | + | + |
| {f.free} | +{f.team} | +{f.enterprise} | +
+
+
+ Plans For Every Team Size
+ + {/* */} +
+
+
+
+
+ {options.map((x) => (
+
+
+
+
+
+
+ How often do you want to pay?
+
+
+
+
+
+ {x.featured ?
+
+ ))}
+ Start Here
: ""}
+ {x.tier}
+{x.byline}
+
+ {x.summary.map((t) => (
+
+ {/*
+
+ $
+ {monthly? x.monthlyprice : x.yearlyprice}
+ /user{monthly? "/month" : "/year"}
+
*/}
+
+
+
+
+
+
+