Implement Silver, Gold and Platinum pricing plans on on-premises pages

gatsby-node.ts

@@ -43,6 +43,7 @@ interface ContactUsDto {
   title: string;
   message: RenderRichTextData<ContentfulRichTextGatsbyReference>;
   messagePosition: string;
+  showBillingPeriod: boolean;
   offeringPlan?: OfferingPlanDto;
 }
 
@@ -120,6 +121,7 @@ export const createPages: GatsbyNode['createPages'] = async ({ graphql, actions,
               internalTitle
               title
               messagePosition
+              showBillingPeriod
               message {
                 raw
               }
@@ -159,6 +161,7 @@ export const createPages: GatsbyNode['createPages'] = async ({ graphql, actions,
       title: contentfulConfig.title,
       message: contentfulConfig.message,
       messagePosition: contentfulConfig.messagePosition,
+      showBillingPeriod: contentfulConfig.showBillingPeriod,
       price: contentfulConfig.offeringPlan?.price,
     };
 

src/components/CallToAction/CallToAction.scss

@@ -0,0 +1,69 @@
+@use 'src/styles/mixins' as m;
+@use 'src/styles/variables' as v;
+
+.call-to-action {
+  background: url('assets/bg-tablet.svg') no-repeat center 0 / cover;
+  color: var(--text-primary);
+
+  @include m.breakpoint(v.$desktop-sm) {
+    background-image: url('assets/bg-desktop.svg');
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    padding: 56px 16px;
+    text-align: center;
+
+    @include m.breakpoint(v.$tablet-sm-exact) {
+      padding: 56px 24px;
+    }
+
+    @include m.breakpoint(v.$desktop-sm) {
+      flex-direction: row;
+      padding: 56px 0;
+    }
+  }
+
+  &__title {
+    @include m.font-poppins(v.$fw-bold);
+    @include m.font-scale(x4-medium);
+
+    margin-bottom: 16px;
+
+    @include m.breakpoint(v.$tablet-sm-exact) {
+      @include m.font-scale(large);
+    }
+
+    @include m.breakpoint(v.$desktop-sm) {
+      text-align: left;
+    }
+  }
+
+  &__description {
+    @include m.font-noto-sans();
+    @include m.font-scale();
+
+    @include m.breakpoint(v.$tablet-sm-exact) {
+      @include m.font-scale(medium);
+    }
+
+    @include m.breakpoint(v.$desktop-sm) {
+      text-align: left;
+    }
+  }
+
+  &__button {
+    margin-top: 40px;
+
+    @include m.breakpoint(v.$tablet-sm-exact) {
+      margin-top: 48px;
+    }
+
+    @include m.breakpoint(v.$desktop-sm) {
+      margin-top: 0;
+    }
+  }
+}

src/components/CallToAction/CallToAction.tsx

@@ -0,0 +1,47 @@
+import React, { FC } from 'react';
+import classNames from 'classnames';
+import { Link } from '@app/components/Link';
+import { createBemBlockBuilder } from '@app/utils';
+
+import './CallToAction.scss';
+
+interface CallToActionProps {
+  title: string;
+  description: string;
+  buttonText: string;
+  buttonLink: string;
+  buttonClassName?: string;
+  buttonStyle?: 'primary' | 'pink';
+}
+
+const getBlocksWith = createBemBlockBuilder(['call-to-action']);
+
+export const CallToAction: FC<CallToActionProps> = ({
+  title,
+  description,
+  buttonText,
+  buttonLink,
+  buttonClassName,
+  buttonStyle = 'primary',
+}) => (
+  <div className={getBlocksWith()}>
+    <div className={classNames(getBlocksWith('__content'), 'container')}>
+      <div>
+        <div className={getBlocksWith('__title')}>{title}</div>
+        <div className={getBlocksWith('__description')}>{description}</div>
+      </div>
+      <Link
+        className={classNames(
+          getBlocksWith('__button'),
+          'btn',
+          `btn--${buttonStyle}`,
+          'btn--large',
+          buttonClassName,
+        )}
+        to={buttonLink}
+      >
+        {buttonText}
+      </Link>
+    </div>
+  </div>
+);

src/components/CallToAction/index.ts

@@ -0,0 +1 @@
+export * from './CallToAction';

src/components/IconWithBackground/IconWithBackground.scss

@@ -0,0 +1,33 @@
+@use 'src/styles/mixins' as m;
+@use 'src/styles/variables' as v;
+
+.icon-with-background {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+
+  &::before {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    background-color: var(--icon-color);
+    opacity: 0.1;
+    content: '';
+  }
+
+  &__icon {
+    position: relative;
+    width: 28px;
+    height: 28px;
+    background-color: var(--icon-color);
+    mask-image: var(--icon-url);
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+  }
+}

src/components/IconWithBackground/IconWithBackground.tsx

@@ -0,0 +1,27 @@
+import React, { FC, CSSProperties } from 'react';
+import { createBemBlockBuilder } from '@app/utils';
+
+import './IconWithBackground.scss';
+
+interface IconWithBackgroundProps {
+  icon: string;
+  iconColor: string;
+}
+
+const getBlocksWith = createBemBlockBuilder(['icon-with-background']);
+
+export const IconWithBackground: FC<IconWithBackgroundProps> = ({ icon, iconColor }) => {
+  return (
+    <div
+      className={getBlocksWith()}
+      style={
+        {
+          '--icon-color': iconColor,
+          '--icon-url': `url('${icon}')`,
+        } as CSSProperties
+      }
+    >
+      <div className={getBlocksWith('__icon')} />
+    </div>
+  );
+};

src/components/IconWithBackground/index.ts

@@ -0,0 +1 @@
+export * from './IconWithBackground';

src/components/InfoCard/InfoCard.tsx

@@ -5,15 +5,15 @@ import { createBemBlockBuilder, LinkDto } from '@app/utils';
 
 import './InfoCard.scss';
 
-const getBlocksWith = createBemBlockBuilder(['info-card']);
-
 interface InfoCardProps {
   title: string;
   description: string;
   link: LinkDto;
   icon: string;
 }
 
+const getBlocksWith = createBemBlockBuilder(['info-card']);
+
 export const InfoCard: FC<InfoCardProps> = ({ title, description, icon, link }) => (
   <div className={getBlocksWith()}>
     <img className={getBlocksWith('__image')} src={icon} alt="" />

src/components/Layout/Navigation/NavMenu/OfferingsMenu/constants.tsx

@@ -10,13 +10,13 @@ import QEConsultingIcon from './icons/qe-consulting.inline.svg';
 export const PRICING_CONFIG = [
   {
     icon: <SaaSIcon />,
-    title: 'SaaS',
+    title: 'SaaS Plans',
     text: 'We host and support an instance for your organization',
     link: { title: 'SaaS', url: '/pricing/saas' },
   },
   {
     icon: <OnPremiseIcon />,
-    title: 'On-Premises',
+    title: 'Service Packages',
     text: 'Self-hosted instance with support from our team',
     link: { title: 'On-Premises', url: '/pricing/on-premises' },
   },

src/components/LinkedCard/LinkedCard.scss

@@ -13,8 +13,7 @@
   background: var(--white);
   overflow: hidden;
 
-  &__image {
-    width: 60px;
+  .icon-with-background {
     margin-bottom: 8px;
   }
 

src/components/LinkedCard/LinkedCard.tsx

@@ -2,17 +2,27 @@ import React, { FC } from 'react';
 import { createBemBlockBuilder } from '@app/utils';
 
 import { ArrowLink } from '../ArrowLink';
+import { IconWithBackground } from '../IconWithBackground';
 
 import './LinkedCard.scss';
 
-export interface LinkedCardProps {
+type CommonLinkedCardProps = {
   itemTitle: string;
   description: string;
   link?: string;
   linkText?: string;
-  icon?: string;
   delay?: number;
-}
+};
+
+export type LinkedCardProps =
+  | ({
+      icon: string;
+      iconColor: string;
+    } & CommonLinkedCardProps)
+  | ({
+      icon?: undefined;
+      iconColor?: undefined;
+    } & CommonLinkedCardProps);
 
 const getBlocksWith = createBemBlockBuilder(['linked-card']);
 
@@ -22,15 +32,14 @@ export const LinkedCard: FC<LinkedCardProps> = ({
   link,
   linkText = '',
   icon,
-  delay = false,
-}) => {
-  return (
-    <div className={getBlocksWith()}>
-      {icon && <img className={getBlocksWith('__image')} src={icon} alt="" />}
-      <strong className={getBlocksWith('__title')}>{itemTitle}</strong>
-      <p className={getBlocksWith('__description')}>{description}</p>
-      {link && <ArrowLink mode="primary" to={link} text={linkText} />}
-      {delay && <div className={getBlocksWith('__progress')} />}
-    </div>
-  );
-};
+  iconColor,
+  delay = 0,
+}) => (
+  <div className={getBlocksWith()}>
+    {icon && <IconWithBackground icon={icon} iconColor={iconColor} />}
+    <strong className={getBlocksWith('__title')}>{itemTitle}</strong>
+    <p className={getBlocksWith('__description')}>{description}</p>
+    {link && <ArrowLink mode="primary" to={link} text={linkText} />}
+    {Boolean(delay) && <div className={getBlocksWith('__progress')} />}
+  </div>
+);

src/components/LinkedCardBlock/BenefitItem/BenefitItem.scss

@@ -0,0 +1,40 @@
+@use 'src/styles/mixins' as m;
+@use 'src/styles/variables' as v;
+
+.benefit-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+
+  &__content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  &__title {
+    @include m.font-poppins(v.$fw-semi-bold);
+    @include m.font-scale();
+
+    margin: 0;
+    line-height: 24px;
+    color: var(--text-primary);
+  }
+
+  &__description {
+    @include m.font-noto-sans();
+    @include m.font-scale();
+
+    margin: 0;
+    line-height: 24px;
+    color: var(--text-primary);
+  }
+
+  a {
+    display: flex;
+    align-items: center;
+    align-self: flex-start;
+    margin-top: 0;
+    font-weight: v.$fw-medium;
+  }
+}