gatsby-matrix-theme 3.0.9 → 3.1.2

package/CHANGELOG.md

@@ -1,3 +1,80 @@
+## [3.1.2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.1.1...v3.1.2) (2021-12-23)
+
+
+### Bug Fixes
+
+*  operator bonus added dividor ([98538a9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/98538a94160ef27a2a4d33334f8534aa6baff32e))
+* fixed parsing metadescription ([f3f7568](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f3f75682e88341ebc90f3f532594e4a816605fc9))
+* new testimonials styling ([7f16177](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7f1617700a339d7e0edd183769b040fb9a419255))
+* removed an useless line ([6320358](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/63203585e3ee6362f1250033b0b41a1180f61ad2))
+* tests ([0d2794f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0d2794feb4f5a93eb08f40c1776330a25aed0850))
+
+
+### Config
+
+* updated core theme version ([8ead1a7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8ead1a7c4fec1a4f30acced891b9eaa262d2c104))
+
+
+* Merge branch 'tm-2629-spotlight-testimonials' into 'master' ([52f20ab](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/52f20abf60df594d49e7eac3c4a5a099e7c2842a))
+* Merge branch 'tm-2610-operator-bonus' into 'master' ([8c80938](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8c80938101df09f25d6458c423f4eaf09e8da5ca))
+* Merge branch 'fix-parse-metadescription' into 'master' ([fbed07c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fbed07cb84ba1d34a296ebc5cbf059eadfecdd72))
+
+## [3.1.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.1.0...v3.1.1) (2021-12-17)
+
+
+### Config
+
+* updated theme version ([d35a8d2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d35a8d258252b7376968683cd5fc65af089923eb))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme ([ec89a34](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ec89a340a0c73ed3261f0b5d9eff2b33254dc35c))
+
+# [3.1.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.0.10...v3.1.0) (2021-12-17)
+
+
+### Bug Fixes
+
+* add default copyright_disclaimer ([f0c330f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f0c330fc779e79be0e6a7bab17cd54989e3e93de))
+* carousel slides ([ae7dea9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ae7dea9a0025daca522572efbd6ce27b5c7d3a0a))
+* casino table ([2d0b8ec](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2d0b8ec4cd2e18fc9a21d1b17dcf1c529ac03aab))
+* fixed bonus issue and loadable condition ([7f1f1a7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7f1f1a7d6e467da005b60a8806056280fad671e7))
+* fixed copyrightDisclaimer ([1a606d2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1a606d2990c3883e2a3f0541d369e52dd93457f4))
+* merge ([14a32ab](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/14a32ab72c7c430e3619755433d5a92a79fe742c))
+* merged master ([5a983ab](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5a983ab64013fe9029d99eea3223ecb2c4145a1b))
+* progress made ([55c3175](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/55c3175b5e827a2d1c3d1b33cb44ff3ca3b23379))
+* remove re-declared copyrightDisclaimer ([598ac18](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/598ac182d54e7a62e638ccfe42cda809f899ffc7))
+* small fix ([9d8c24d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9d8c24dc18245c6b07c658afce398ddf55802cec))
+* small fix ([a9341ad](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a9341ad547865d2a154c98d55d12c78bd09f5982))
+* spotlight images ([8daaf46](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8daaf460f49bafdda908899ae37fe8ff992befe2))
+* spotlight images ([fa886b6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fa886b6cbe2aa31992a415828f21f2927d5d8c97))
+* style issues ([2881939](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/28819392bbfec1ffa64739b42cb9dfc367ef7f82))
+* updated core theme version and fixed disclaimer text bug ([3ce75e2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3ce75e2c58812fef1ee3177c200a5268a5763f78))
+
+
+### Code Refactoring
+
+* check the data ([dd25ece](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/dd25ece863cd5956663ab47a34dde6eca5ded85a))
+
+
+* Merge branch 'tm-2613-carousel-fix' into 'master' ([bdf02e8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bdf02e8b330e9923437ae8a1c68568ce19c2c181))
+* Merge branch 'tm-2597-casino-table' into 'master' ([6861c37](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6861c37c160aab7426288b8b4f40b3b8eabad3cf))
+* Update index.js ([056c9bd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/056c9bddb0d7e63d0fbe8538968933c4d69d99b8))
+
+
+### Features
+
+* twitter graph ([dfdf8bf](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/dfdf8bfe5e9ff07a20b25f2c5f659126767dcffb))
+
+## [3.0.10](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.0.9...v3.0.10) (2021-12-10)
+
+
+### Code Refactoring
+
+* setting components to loadable if loaded against a condition ([b8c7040](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b8c704014f9d80bf0e0fef6d3c97a39ebede8366))
+
+
+* Merge branch 'performance-improvements' into 'master' ([429f393](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/429f3936928ba46717e7b551751c1e6e5abbd0e0))
+
 ## [3.0.9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.0.8...v3.0.9) (2021-12-09)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "3.0.9",
+  "version": "3.1.2",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -31,7 +31,7 @@
     "cross-env": "^7.0.2",
     "dotenv": "8.2.0",
     "gatsby": "^3.3.1",
-    "gatsby-core-theme": "^1.6.21",
+    "gatsby-core-theme": "^2.0.7",
     "gatsby-image": "^3.3.0",
     "gatsby-plugin-image": "^1.3.1",
     "gatsby-plugin-postcss": "^4.3.0",

package/src/components/atoms/cards/operators-table/index.js

@@ -0,0 +1,58 @@
+/* eslint-disable camelcase */
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import Link from 'gatsby-core-theme/src/hooks/link';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
+import { translate, getBonus } from 'gatsby-core-theme/src/helpers/getters';
+import styles from './table.module.scss';
+
+const CasinosTable = ({ module }) => {
+  const { translations } = useContext(Context);
+  const { items } = module || {};
+
+  const oneLiner = ({ one_liner }) => {
+    const [firstLine, secondLine] = one_liner.split('+');
+    return (
+      <>
+        <span className={styles.firstLine}>{firstLine}<br /></span>
+        <span className={styles.secondLine}>{`+${secondLine}`}</span>
+      </>
+    );
+  };
+
+  return (
+    <div className={styles.container}>
+      <table>
+        <thead>
+          <tr>
+            <th>{`${translate(translations, 'casino', 'Casino')}`}</th>
+            <th>{`${translate(translations, 'bonus', 'Bonus')}`}</th>
+            <th>{`${translate(translations, 'visit_casino', 'Visit casino')}`}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {items &&
+            items.map((item) => (
+              <tr>
+                <td>{item.title}</td>
+                <td>{oneLiner(getBonus('main', item?.relation))}</td>
+                <td>
+                  <Link to={item?.path} name={item?.relation?.name}>
+                    {`${item?.relation?.name} ${translate(translations, 'read_review', 'Review')}`}
+                  </Link>
+                </td>
+              </tr>
+            ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default CasinosTable;
+
+CasinosTable.propTypes = {
+  module: PropTypes.shape({
+    items: PropTypes.arrayOf({}),
+  }).isRequired,
+};

package/src/components/atoms/cards/operators-table/table.module.scss

@@ -0,0 +1,87 @@
+.container {
+  table {
+    width: 100%;
+    border-collapse: inherit;
+    box-shadow: 0 2px 16px #17182f14;
+    thead {
+      tr {
+        th {
+          text-align: left;
+          background-color: var(--table-head-background);
+          color: white;
+          padding: 1.2rem 0 1.2rem 0.8rem;
+          &:first-child {
+            border-top-left-radius: var(--table-border-radius);
+          }
+
+          &:last-child {
+            border-top-right-radius: var(--table-border-radius);
+          }
+        }
+      }
+    }
+    tr {
+      td {
+        padding: 1.2rem 0 1.2rem 0.8rem;
+        a {
+          text-decoration: underline;
+        }
+        .secondLine{
+          color: red;
+        }
+      }
+      &:nth-child(odd) {
+        background-color: var(--table-highlight);
+      }
+    }
+
+    @include max(mobile) {
+      thead {
+        display: none;
+      }
+
+      tbody {
+        tr {
+          &:first-child {
+            
+            td {
+              color: white;
+              background-color: var(--table-head-background);
+              border-radius: 0;
+              .secondLine{
+                color: white;
+              }
+              &:first-child {
+                border-top-left-radius: var(--table-border-radius);
+                border-top-right-radius: var(--table-border-radius);
+              }
+
+                a {
+                  color: white;
+                  text-decoration: underline;
+                }                
+            }
+          }
+
+          td {
+            display: block;
+            text-align: left;
+            border-bottom: 1px solid #bfd3e5;
+            width: 100%;            
+          }
+
+          &:last-child {
+            td {
+              border-radius: 0;
+              &:last-child {
+                border-bottom-right-radius: var(--table-border-radius);
+                border-bottom-left-radius: var(--table-border-radius);
+                border-bottom: none;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/atoms/cards/popup-card/index.js

@@ -23,7 +23,7 @@ const PopupCard = ({ item, tracker }) => {
         </div>
         <div className={styles.textContainer}>
           <p className={styles.primaryText}>{one}</p>
-          <p className={styles.secondaryText}>{second}</p>
+          <p className={styles.secondaryText}>{`+${second}`}</p>
         </div>
       </div>
       <div className={styles.buttonContainer}>

package/src/components/molecules/toplist/row/variant-one.test.js

@@ -17,7 +17,7 @@ describe('toplist row component', () => {
 
     // Bonus
     expect(getByText('€100 welcome bonus')).toBeTruthy();
-    expect(getByText('150 free spins')).toBeTruthy();
+    expect(getByText('+150 free spins')).toBeTruthy();
 
     // Rating & Logo
     // expect(container.querySelector('img')).toBeFalsy();
@@ -47,7 +47,7 @@ describe('toplist row component', () => {
 
     // Bonus
     expect(getByText('€100 welcome bonus')).toBeTruthy();
-    expect(getByText('150 free spins')).toBeTruthy();
+    expect(getByText('+150 free spins')).toBeTruthy();
 
     // Rating & Logo
     // expect(container.querySelector('img')).toBeFalsy();

package/src/components/organisms/popup/index.js

@@ -99,8 +99,9 @@ const Popup = ({ module, isStorybook = false }) => {
                 <MdClose />
               </button>
             </div>
-            {shownItems?.map((item) => (
-              <PopupCard item={item} tracker={tracker} />
+            {shownItems?.map((item, index) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <PopupCard key={index} item={item} tracker={tracker} />
             ))}
           </div>
         </div>
@@ -111,7 +112,7 @@ const Popup = ({ module, isStorybook = false }) => {
 
 Popup.propTypes = {
   module: PropTypes.shape({
-    items: PropTypes.arrayOf({}),
+    items: PropTypes.arrayOf(PropTypes.object),
     style: PropTypes.string,
   }).isRequired,
   isStorybook: PropTypes.bool,

package/src/gatsby-core-theme/components/atoms/bonus/bonus.test.js

@@ -10,7 +10,6 @@ describe('Bonus Component', () => {
     const item = getToplistItem();
     const { getByText } = render(<Bonus item={item} tracker="main" />);
     expect(getByText('€100 welcome bonus')).toBeTruthy();
-    expect(getByText('150 free spins')).toBeTruthy();
   });
   test('without oneLiner', () => {
     const { container } = render(

package/src/gatsby-core-theme/components/atoms/bonus/index.js

@@ -22,7 +22,7 @@ export default function Bonus({ item, tracker }) {
   return (
     <div className={styles.bonus}>
       {!isInoperative && <div className={styles.title}>{mainLine && mainLine}</div>}
-      {!isInoperative && <div className={styles.desc}>{secondLine && secondLine}</div>}
+      {!isInoperative && <div className={styles.desc}>{secondLine && `+${secondLine}`}</div>}
     </div>
   );
 }

package/src/gatsby-core-theme/components/atoms/spotlights/spotlights.module.scss

@@ -1,120 +1,90 @@
 .spotlightsContainer {
-    margin: 0 auto;
-    width: 100%;
-    max-width: var(--main-container-max);
-    ul {
-      display: grid;
-      grid-template-columns: repeat(1, 1fr);
-      column-gap: 1rem;
-      @include min(tablet) {
-        grid-template-columns: repeat(2, 1fr);
-      }
-  
+  margin: 0 auto;
+  width: 100%;
+  max-width: var(--main-container-max);
+  ul {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    column-gap: 1rem;
+    @include min(tablet) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @include min(desktop) {
+      grid-template-columns: repeat(3, 1fr);
+      column-gap: 1.6rem;
+    }
+    li {
+      text-align: center;
+      background-color: var(--color-9);
+      border: none;
+      margin-bottom: 1rem;
       @include min(desktop) {
-        grid-template-columns: repeat(3, 1fr);
-        column-gap: 1.6rem;
+        margin-bottom: 1.6rem;
       }
-      &.lessThanThreeGrids {
-        @include min(desktop) {
-          grid-template-columns: repeat(2, 1fr);
-          column-gap: 1.6rem;
-        }
+      @include flex-direction(column);
+      span {
+        display: block;
       }
-      li {
-        margin-bottom: 1rem;
-        text-align: center;
-        @include min(desktop) {
-          margin-bottom: 1.6rem;
-        }
-        @include flex-direction(column);
-        span {
-          display: block;
+      .itemImage {
+        width: 100%;
+        height: 15rem;
+        img {
+          width: auto;
+          height: 100%;
+          object-fit: cover;
         }
-  
-        .pillarCards {
-          background-color: var(--color-9);
-          padding: 1.6rem;
-          border-radius: var(--border-radius);
-          .body {
-            padding: 0 0 1.6rem 0;
-          }
-          .itemImage {
-            width: 100%;
-            img {
-              height: 5.6rem;
-            }
-          }
-          .label {
-            font-weight: 700;
-            font-size: 1.6rem;
-            color: var(--color-12);
-            margin: 1.6rem 0;
-          }
-          .text {
-            font-size: 1.6rem;
-            color: #5a4e51;
-          }
+      }
+
+      .content {
+        padding: 1rem;
+        .label {
+          font-weight: 700;
+          font-size: 2rem;
+          color: black;
         }
       }
-      &.about {
-        li {
-          background-color: white;
-          .body {
-            padding: 0 1.6rem 1.6rem 1.6rem;
-          }
-          .itemImage {
-            width: 100%;
-            height: 20rem;
-            img {
-              width: 100%;
-              height: 100%;
-              object-fit: cover;
-            }
-          }
-          .label {
-            font-weight: 700;
-            font-size: 1.6rem;
-            color: black;
-            margin: 1.6rem 0 0 0.9rem;
-          }
-          .text {
-            font-size: 1.4rem;
-            color: #000;
-            p[class*='job-position'] {
-              color: var(--color-40);
-            }
-            p[class*='body'] {
-              color: #000;
-              width: 100%;
-              height: 15rem;
-              overflow: hidden;
-              margin: 1.6rem 0;
-            }
-            a[class*='icon'] {
-              display: inline-block;
-              background-color: #f6f6fb;
-              width: 4.8rem;
-              height: 4.8rem;
-              line-height: 2.3;
-              border-radius: 50%;
-              margin: 0 0.4rem;
-              color: #6e6e84;
-              font-size: 2.4rem;
-            }
-          }
-          .readMore {
-            color: var(--color-40);
-            margin-top: 1.6rem;
-            font-size: 1.3rem;
-            font-weight: 700;
-          }
+
+      .body {
+        padding: 0 1rem 1rem 1rem;
+      }
+      .text {
+        font-size: 1.4rem;
+        color: #777;
+      }
+      .readMore {
+        svg {
+          display: none;
         }
       }
     }
   }
-  .spotlightstext {
-    width: 100%;
-    margin: 2rem 0;
-    font-size: 1.6rem;
+}
+.spotlightstext {
+  width: 100%;
+  margin: 2rem 0;
+  font-size: 1.6rem;
+}
+
+.testimonials {
+  ul {
+    li {
+      border: 1px solid #858487;
+      border-radius: .8rem;
+      background-color: white;
+
+      .subtitle {
+        width: 50%;
+        margin: 0 auto;
+      }
+
+      .title, .subtitle {
+        font-size: 1.4rem;
+      }
+
+      .label {
+        color: var(--primary-color);
+      }
+    }
   }
-  
+}

package/src/gatsby-core-theme/components/molecules/content/index.js

@@ -5,6 +5,7 @@ import parse from 'html-react-parser';
 import PropTypes from 'prop-types';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import { parseCss } from 'gatsby-core-theme/src/helpers/css-parser';
+import loadable from '@loadable/component';
 import styles from './content.module.scss';
 
 const Content = ({ module }) => {
@@ -12,6 +13,11 @@ const Content = ({ module }) => {
   const [showMore, setShowMore] = useState(show_more_enabled === '1');
 
   const replaceMedia = (node) => {
+    if (node.name === 'iframe') {
+      const Iframe = loadable(() => import('gatsby-core-theme/src/components/atoms/iframe'));
+      return <Iframe src={node.attribs.src} />;
+    }
+
     if (node.name === 'img') {
       let stylesClass = null;
       const classes = node.attribs.class;

package/src/gatsby-core-theme/components/molecules/footer/index.js

@@ -19,6 +19,7 @@ const Footer = ({
   const TopSection = footerTopCustom;
   const BottomSection = footerBottomCustom;
   const showLinks = template !== 'ppc';
+  const copyrightDisclaimerValue = getExtraField(section?.extra_fields, copyrightDisclaimer);
 
   return (
     <footer className={`${styles.footer} ${hasFooterLinks && styles.hasFooterLinks}`}>
@@ -38,20 +39,17 @@ const Footer = ({
       <div className={styles.bottomPart}>
         {footerBottomCustom && <BottomSection section={section} page={page} />}
         <div className={styles.copyrightDisclaimer}>
-          {copyrightDisclaimer && getExtraField(section?.extra_fields, copyrightDisclaimer) && (
-            <p
+          {copyrightDisclaimerValue && (
+            <div
               dangerouslySetInnerHTML={{
-                __html: getExtraField(section?.extra_fields, copyrightDisclaimer).replace(
-                  /\. /g,
-                  '.<br />'
-                ),
+                __html: copyrightDisclaimerValue.replace(/\. /g, '.<br />'),
               }}
             />
           )}
           <p>{copyrightText()}</p>
         </div>
         <div className={styles.logos}>
-          {footerLogos && (
+          {footerLogos && getExtraField(section?.extra_fields, footerLogos) && (
             <LinkList
               showListTitle={false}
               imageOnly

package/src/gatsby-core-theme/components/molecules/module/index.js

@@ -22,7 +22,11 @@ const Modules = ({ module, page, pageContext }) => {
       case 'counter':
         return loadable(() => import('gatsby-core-theme/src/components/molecules/counter'));
       case 'cards':
+        return loadable(() => import('../../organisms/cards'));
       case 'cards_v2':
+        if (moduleItem.style === 'stack_table' && moduleItem.cards_page_type === 'operator') {
+          return loadable(() => import('../../../../components/atoms/cards/operators-table'));
+        }
         return loadable(() => import('../../organisms/cards'));
       case 'pros_and_cons':
         return loadable(() => import('gatsby-core-theme/src/components/molecules/pros-cons'));
@@ -46,7 +50,7 @@ const Modules = ({ module, page, pageContext }) => {
       case 'image':
         return loadable(() => import('gatsby-core-theme/src/components/atoms/image'));
       case 'spotlights':
-        return loadable(() => import('../../atoms/spotlights'));
+        return loadable(() => import('gatsby-core-theme/src/components/atoms/spotlights'));
       case 'faq':
         return loadable(() => import('../../../../components/molecules/faq'));
       // Template blocks

package/src/gatsby-core-theme/components/molecules/search/index.js

@@ -1,9 +1,9 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React, { useState, useEffect, useRef, useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { navigate } from 'gatsby';
 import { FaSearch } from 'react-icons/fa';
-
-// eslint-disable-next-line import/no-extraneous-dependencies
+import loadable from '@loadable/component';
 import Tabs from 'gatsby-matrix-theme/src/hooks/tabs';
 import styles from 'gatsby-core-theme/src/components/molecules/search/search.module.scss';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
@@ -16,9 +16,7 @@ import keygen from '~helpers/keygen';
 import { filterByKey, sortDateOn, sortIntOn, sortStringOn } from '~helpers/search';
 import loadSource from '~helpers/search-source';
 import { leftTrim } from '~helpers/strings';
-import Archive from '~organisms/archive';
 import ModuleTitle from '~atoms/module-title';
-import CustomSelect from '~atoms/custom-select';
 import { NavigationContext } from '~organisms/navigation/navigationContext';
 
 /* eslint-disable no-underscore-dangle */
@@ -222,6 +220,7 @@ const Search = ({
     }
   }, [pageSearchOptionsCopy]);
   if (pageSearchOptionsCopy !== null && pageSearchOptionsCopy.sort !== undefined) {
+    const CustomSelect = loadable(() => import('~atoms/custom-select'));
     pageSearchOptionsCopy.tabsOptions.HeaderComp = (
       <div className={styles.selectwrapper}>
         <CustomSelect
@@ -359,6 +358,8 @@ const Search = ({
 
                 if (items.length === 0) return null;
 
+                const Archive = loadable(() => import('~organisms/archive'));
+
                 return (
                   <div label={titleObj.title} tabId={type + index} key={keygen()}>
                     {pageSearchOptionsCopy.useArchive === undefined ||

package/src/gatsby-core-theme/components/organisms/carousel/carousel.module.scss

@@ -1,3 +1,27 @@
-.screenshotCarousel > div {
-  outline: none;
+:global {
+  .carousel-module {
+    background-color: var(--color-5);
+  }
+}
+.carouselContainer {
+  .carouselTitle {
+    margin-bottom: 1.5rem;
+  }
+  .slide {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+  }
+  .carouselItem {
+    padding: 0.5rem;
+    width: 50%;
+    @include max(tablet) {
+      width: 100%;
+      text-align: center;
+    }
+    img {
+      border-radius: 0.6rem;
+    }
+  }
 }