Make footer banner clickable (#1968)

* chore: make footer banner clickable * chore: add changeset
commercetools · Apr 9, 2024 · ed89951 · ed89951
1 parent 3867571
commit ed89951
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/.changeset/empty-panthers-help.md b/.changeset/empty-panthers-help.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-docs/gatsby-theme-docs': patch
+---
+
+Adjust footer commercetools banner to make it clickable. It points to the commercetools.com website.
diff --git a/packages/gatsby-theme-docs/src/layouts/internals/footer.js b/packages/gatsby-theme-docs/src/layouts/internals/footer.js
@@ -80,6 +80,10 @@ const ColumnTitle = styled.div`
   }
 `;
 
+const CtBannerContainer = styled.a`
+  cursor: pointer;
+`;
+
 const Row = styled.div`
   display: flex;
   justify-content: space-between;
@@ -158,16 +162,22 @@ const LayoutFooter = () => {
    *   the elements in the grid layout as we like
    */
 
+  const CtBannerLink = 'https://commercetools.com';
+
   const hasMoreThanThreeColumns = data.allFooterYaml.nodes.length > 3;
   return (
     <Center>
       <Columns hasMoreThanThreeColumns={hasMoreThanThreeColumns}>
         <Column>
           <MediaQuery forViewport="tablet">
             {hasMoreThanThreeColumns ? (
-              <Icons.CtCubeForFooterSvgIcon />
+              <CtBannerContainer href={CtBannerLink}>
+                <Icons.CtCubeForFooterSvgIcon />
+              </CtBannerContainer>
             ) : (
-              <Icons.CtBannerForFooterSvgIcon />
+              <CtBannerContainer href={CtBannerLink}>
+                <Icons.CtBannerForFooterSvgIcon />
+              </CtBannerContainer>
             )}
           </MediaQuery>
         </Column>
@@ -200,7 +210,9 @@ const LayoutFooter = () => {
         <RowItem isLastSection>
           <SpacingsInline alignItems="center" justifyContent="space-between">
             <MediaQuery forViewport="mobile">
-              <Icons.CtBannerForFooterSvgIcon />
+              <CtBannerContainer href={CtBannerLink}>
+                <Icons.CtBannerForFooterSvgIcon />
+              </CtBannerContainer>
             </MediaQuery>
             <SpacingsInline scale="m" alignItems="center">
               <CopyText>