Implement changes to on-premises and accelerators pages

reportportal · Nov 8, 2024 · 554d3ec · 554d3ec
1 parent 918c4ef
commit 554d3ec
Show file tree

Hide file tree

Showing 36 changed files with 580 additions and 416 deletions.
diff --git a/src/components/CertificationCard/CertificateCard.scss b/src/components/CertificationCard/CertificateCard.scss
@@ -39,6 +39,9 @@
   }
 
   &__certificates {
+    display: flex;
+    justify-content: center;
+    width: 100%;
     margin-top: 40px;
   }
 

diff --git a/src/components/CertificationCard/Certificates/Certificates.scss b/src/components/CertificationCard/Certificates/Certificates.scss
@@ -3,10 +3,19 @@
 
 .certificates {
   display: flex;
-  gap: 24px;
+  gap: 16px;
+
+  @include m.breakpoint(v.$phone-lg) {
+    gap: 24px;
+  }
 
   svg {
-    width: 80px;
-    height: 80px;
+    width: 64px;
+    height: 64px;
+
+    @include m.breakpoint(v.$phone-lg) {
+      width: 80px;
+      height: 80px;
+    }
   }
 }
diff --git a/src/components/ComparePlans/Columns/Columns.tsx b/src/components/ComparePlans/Columns/Columns.tsx
@@ -13,12 +13,11 @@ import '../ComparePlans.scss';
 interface ColumnsProps {
   cols: FormattedComparePlansItemDto['plans'];
   title?: string;
-  mobileColumns?: FormattedComparePlansItemDto['plans'];
 }
 
 const getBlocksWith = createBemBlockBuilder(['compare']);
 
-export const Columns: FC<ColumnsProps> = ({ title = '', cols, mobileColumns = [] }) => {
+export const Columns: FC<ColumnsProps> = ({ title = '', cols }) => {
   const isDesktop = useMediaQuery({ query: MEDIA_DESKTOP_SM });
 
   const getMark = (value: boolean) =>
@@ -56,7 +55,7 @@ export const Columns: FC<ColumnsProps> = ({ title = '', cols, mobileColumns = []
               <div
                 key={index}
                 className={getBlocksWith('__row-title-col')}
-                data-short={mobileColumns[index] ?? columnValue}
+                data-short={columnValue}
               >
                 {getRenderedValue()}
               </div>

diff --git a/src/components/ComparePlans/ComparePlans.scss b/src/components/ComparePlans/ComparePlans.scss
@@ -26,14 +26,13 @@
 }
 
 .compare {
-  margin-top: 176px;
-
-  @include m.breakpoint(v.$tablet-sm-exact) {
-    margin-top: 160px;
-  }
+  padding-top: 80px;
+  padding-bottom: 80px;
+  background: linear-gradient(180deg, #f4f5fa 0%, #fff 100%);
 
   @include m.breakpoint(v.$desktop-sm) {
-    margin-top: 240px;
+    padding-top: 120px;
+    padding-bottom: 120px;
   }
 
   .ant-tablet-ghost {
@@ -67,6 +66,7 @@
       border-radius: 16px;
       padding-top: 24px;
       box-shadow: 0 8px 16px rgb(0 45 55 / 0.12);
+      background: var(--white);
     }
 
     .ant-collapse-no-arrow {
@@ -125,6 +125,10 @@
       }
     }
 
+    .ant-collapse-item {
+      background: var(--white);
+    }
+
     .ant-collapse-item:nth-child(even) {
       @include m.breakpoint(v.$desktop-sm) {
         background: #f8fafd;
@@ -148,6 +152,16 @@
           padding-top: 7px !important;
         }
       }
+
+      .ant-collapse-content-box {
+        padding-top: 0 !important;
+
+        @include m.breakpoint(v.$desktop-sm) {
+          .ant-collapse-content-box {
+            padding-top: 7px !important;
+          }
+        }
+      }
     }
   }
 
@@ -208,7 +222,7 @@
 
   &__tab {
     &-data {
-      margin-top: 19px;
+      margin-top: 16px;
 
       @include m.breakpoint(v.$tablet-sm-exact) {
         padding: 0 70px;
@@ -218,7 +232,7 @@
         margin: 16px 0;
 
         @include m.breakpoint(v.$tablet-sm-exact) {
-          margin: 7px 0 12px;
+          margin: 10px 0 12px;
         }
 
         .compare__row-title-cols {
@@ -353,31 +367,28 @@
       &-cols {
         @include m.font-scale(base);
 
-        display: flex;
-        flex: 3;
-        align-items: center;
-        justify-content: space-between;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+        width: 100%;
 
         @include m.breakpoint(v.$desktop-sm) {
-          display: flex;
-          flex: 0 1 auto;
           width: 65%;
         }
 
         &-visible {
           display: none;
 
           @include m.breakpoint(v.$desktop-sm) {
-            display: flex;
+            display: grid;
           }
         }
       }
 
       &-col {
         @include m.font-poppins(v.$fw-medium);
 
-        display: inline-block;
-        width: 30%;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
         text-align: center;
         color: var(--text-primary);
 
@@ -389,6 +400,10 @@
           @include m.font-poppins(v.$fw-semi-bold);
           @include m.font-scale(medium);
         }
+
+        &:has(> div:empty) {
+          display: none;
+        }
       }
     }
   }
@@ -397,6 +412,7 @@
     @include m.font-poppins();
     @include m.font-scale(small);
 
+    margin-top: 4px;
     margin-right: 8px;
     margin-left: 8px;
     white-space: pre-wrap;
@@ -406,23 +422,25 @@
       margin-left: 15px;
     }
 
+    p {
+      margin: 0;
+    }
+
+    p + p {
+      margin-top: 16px;
+    }
+
     &-anchor {
       position: relative;
       display: inline-block;
-
-      &:hover::after {
-        background-color: var(--text-grey);
-      }
-
-      &::after {
-        position: absolute;
-        bottom: 6px;
-        left: 0;
-        width: 100%;
-        height: 1px;
-        background-color: var(--text-service);
-        transition: background-color 0.3s ease;
-        content: '';
+      margin-bottom: -1px;
+      border-bottom: 2px solid transparent;
+      color: var(--color-primary-600);
+
+      &:hover {
+        border-bottom-color: var(--color-primary-600);
+        transition: all 0.4s ease-out;
+        color: var(--color-primary-600);
       }
     }
 

diff --git a/src/components/ComparePlans/ComparePlans.tsx b/src/components/ComparePlans/ComparePlans.tsx
@@ -3,7 +3,6 @@ import { useMediaQuery } from 'react-responsive';
 import { Collapse } from 'antd';
 import { renderRichText } from 'gatsby-source-contentful/rich-text';
 import { INLINES } from '@contentful/rich-text-types';
-import isEmpty from 'lodash/isEmpty';
 import size from 'lodash/size';
 import classNames from 'classnames';
 import {
@@ -28,13 +27,12 @@ interface ComparePlansProps {
 const getBlocksWith = createBemBlockBuilder(['compare']);
 
 export const ComparePlans: FC<ComparePlansProps> = ({
-  plans: { sections, columns, mobileColumns, ctas, note },
+  plans: { sections, columns, ctas, note },
   isCollapsibleOnMobile = true,
 }) => {
   const isDesktop = useMediaQuery({ query: MEDIA_DESKTOP_SM });
   const { Panel } = Collapse;
   const [featureColumn, ...plansColumns] = columns;
-  const [, ...plansColumnsMobile] = mobileColumns;
 
   const getRowKey = (sectionIndex: number, itemIndex: number) =>
     `${sections[sectionIndex].title}${sections[sectionIndex].items[itemIndex].name}`;
@@ -71,7 +69,7 @@ export const ComparePlans: FC<ComparePlansProps> = ({
           <div className={getBlocksWith('__tab-data')}>
             {!isDesktop && (
               <div className={getBlocksWith('__tab-header')}>
-                <Columns cols={isEmpty(plansColumnsMobile) ? plansColumns : plansColumnsMobile} />
+                <Columns cols={plansColumns} />
               </div>
             )}
             <div className={getBlocksWith('__tab-data-last-item')}>
@@ -134,39 +132,41 @@ export const ComparePlans: FC<ComparePlansProps> = ({
 
   return (
     <div
-      className={classNames(getBlocksWith(), 'container', {
+      className={classNames(getBlocksWith(), {
         [getBlocksWith('-narrow')]: plansColumns.length === 4,
       })}
     >
-      {!isCollapsable ? (
-        <>
-          <div className={getBlocksWith('__title')}>Compare plans</div>
-          {comparePlans}
-        </>
-      ) : (
-        <Collapse
-          ghost
-          expandIconPosition="end"
-          prefixCls="ant-tablet"
-          defaultActiveKey={['1']}
-          expandIcon={({ isActive }) => (
-            <img
-              className={classNames(getBlocksWith('__title-arrow'), {
-                [classNames(getBlocksWith('__title-arrow--active'))]: isActive,
-              })}
-              src={iconsCommon.arrowDark}
-              alt={isActive ? 'Collapse' : 'Expand'}
-            />
-          )}
-          items={[
-            {
-              label: 'Compare plans',
-              key: 1,
-              children: comparePlans,
-            },
-          ]}
-        />
-      )}
+      <div className="container">
+        {!isCollapsable ? (
+          <>
+            <div className={getBlocksWith('__title')}>Compare packages</div>
+            {comparePlans}
+          </>
+        ) : (
+          <Collapse
+            ghost
+            expandIconPosition="end"
+            prefixCls="ant-tablet"
+            defaultActiveKey={['1']}
+            expandIcon={({ isActive }) => (
+              <img
+                className={classNames(getBlocksWith('__title-arrow'), {
+                  [classNames(getBlocksWith('__title-arrow--active'))]: isActive,
+                })}
+                src={iconsCommon.arrowDark}
+                alt={isActive ? 'Collapse' : 'Expand'}
+              />
+            )}
+            items={[
+              {
+                label: 'Compare plans',
+                key: 1,
+                children: comparePlans,
+              },
+            ]}
+          />
+        )}
+      </div>
     </div>
   );
 };
diff --git a/...nityPage/CodeOfConduct/CodeOfConduct.scss → src/components/InfoCard/InfoCard.scss b/...nityPage/CodeOfConduct/CodeOfConduct.scss → src/components/InfoCard/InfoCard.scss
@@ -1,7 +1,7 @@
 @use 'src/styles/mixins' as m;
 @use 'src/styles/variables' as v;
 
-.code-of-conduct {
+.info-card {
   display: flex;
   flex-direction: column;
   align-items: flex-start;

diff --git a/src/components/InfoCard/InfoCard.tsx b/src/components/InfoCard/InfoCard.tsx
@@ -0,0 +1,31 @@
+import React, { FC } from 'react';
+import classNames from 'classnames';
+import { Link } from '@app/components/Link';
+import { createBemBlockBuilder, LinkDto } from '@app/utils';
+
+import './InfoCard.scss';
+
+const getBlocksWith = createBemBlockBuilder(['info-card']);
+
+interface InfoCardProps {
+  title: string;
+  description: string;
+  link: LinkDto;
+  icon: string;
+}
+
+export const InfoCard: FC<InfoCardProps> = ({ title, description, icon, link }) => (
+  <div className={getBlocksWith()}>
+    <img className={getBlocksWith('__image')} src={icon} alt="" />
+    <div>
+      <strong className={getBlocksWith('__title')}>{title}</strong>
+      <p className={getBlocksWith('__description')}>{description}</p>
+    </div>
+    <Link
+      className={classNames(getBlocksWith('__button'), 'btn btn--outline btn--small')}
+      to={link.url}
+    >
+      {link.title}
+    </Link>
+  </div>
+);
diff --git a/src/components/InfoCard/index.ts b/src/components/InfoCard/index.ts
@@ -0,0 +1 @@
+export * from './InfoCard';