Wip

src/pages/marketplace/enterprise/[slug]/_graphql.ts

@@ -26,6 +26,12 @@ export const query = graphql(
           width
           height
         }
+        gallery {
+          id
+          responsiveImage(imgixParams: { auto: format, w: 1200, h: 800, fit: crop }) {
+            ...ResponsiveImageFragment
+          }
+        }
         content {
           value
           blocks {

src/pages/marketplace/enterprise/[slug]/_style.module.css

@@ -1,30 +1,122 @@
 .grid {
   display: flex;
   flex-direction: column;
-  gap: rfs(60px);
+  gap: rfs(80px);
 
   @media screen and (min-width: 1024px) {
     display: grid;
-    grid-template-columns: 1fr 340px;
+    grid-template-columns: 1fr 300px;
   }
 }
 
 .content {
+  position: relative;
+
+  .titleWrapper {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: center;
+
+    @media screen and (min-width: 1024px) {
+      justify-content: flex-start;
+    }
+  }
+
   .title {
     font-size: rfs(48px);
+    text-align: center;
+
+    @media screen and (min-width: 1024px) {
+      text-align: left;
+    }
+  }
+
+  .badge {
+    background-color: #f4cf58;
+    border-radius: 40px;
+    font-size: 0.75em;
+    padding: 2px 8px;
   }
 
   .subtitle {
     color: var(--light-body-color);
     font-size: rfs(24px);
     font-weight: 400;
     margin-top: 1em;
+    text-align: center;
+
+    @media screen and (min-width: 1024px) {
+      text-align: left;
+    }
+  }
+
+  .ctaMobile {
+    align-items: center;
+    display: block;
+    display: flex;
+    justify-content: center;
+
+    @media screen and (min-width: 1024px) {
+      display: none;
+    }
   }
 }
 
 .aside {
-  .asideContent {
-    position: sticky;
-    top: 140px;
+  .asideContentDesktop {
+    display: none;
+
+    @media screen and (min-width: 1024px) {
+      display: block;
+      position: sticky;
+      top: 140px;
+    }
+  }
+
+  .cardCta {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+}
+
+.slide {
+  border-radius: 6px;
+  box-shadow: var(--smaller-box-shadow);
+  flex-shrink: 0;
+  margin: 30px 0;
+  overflow: hidden;
+  width: calc(100% - 40px);
+}
+
+.publisher {
+  margin-top: 40px;
+  padding: 0 20px;
+
+  h4 {
+    font-size: 1rem;
+  }
+
+  article {
+    align-items: center;
+    display: flex;
+    gap: 10px;
+    margin-top: 8px;
+    transform: translateX(-4px);
+  }
+
+  .publisherIcon {
+    background-color: #fff;
+    border-radius: 50%;
+    border: 1px solid var(--border-color);
+    height: 40px;
+    padding: 10px;
+    width: 40px;
+
+    svg {
+      transform: translateX(2px);
+    }
   }
 }

src/pages/marketplace/enterprise/[slug]/index.astro

@@ -1,12 +1,15 @@
 ---
 import Wrapper from '~/components/Wrapper/ReactComponent';
 import { Button } from '~/components/Button';
+import { Carousel } from '~/components/Carousel';
 import { Image } from '~/components/blocks/Image';
 import { InternalVideo } from '~/components/blocks/InternalVideo';
 import { Layout } from '~/layouts/Layout';
 import { MarketplaceCard } from '~/components/MarketplaceCard';
 import { Prose } from '~/components/Prose';
+import { ResponsiveImage } from '~/components/ResponsiveImage';
 import { Space } from '~/components/Space';
+import { Svg } from '~/components/Svg';
 import { Text } from '~/components/structuredText/Text';
 import { Video } from '~/components/blocks/Video';
 import { executeQuery } from '~/lib/datocms/executeQuery';
@@ -34,9 +37,35 @@ if (!page) {
     <Wrapper>
       <div class={s.grid}>
         <div class={s.content}>
-          <h1 class={s.title}>{page.title}</h1>
+          <div class={s.titleWrapper}>
+            <h1 class={s.title}>{page.title}</h1>
+            <span class={s.badge}>Enterprise integration</span>
+          </div>
           <h3 class={s.subtitle}>{page.description}</h3>
-          <Space top={2}>
+          <Space top={1}>
+            <div class={s.ctaMobile}>
+              <Button as="a" href="/contact" target="_blank" fs="small" p="small">
+                Request activation
+              </Button>
+            </div>
+          </Space>
+          {
+            page.gallery.length && (
+              <Space top={1}>
+                <Carousel buttonsY="50%">
+                  {page.gallery.map(
+                    (item) =>
+                      item.responsiveImage && (
+                        <div class={s.slide}>
+                          <ResponsiveImage data={item.responsiveImage} />
+                        </div>
+                      ),
+                  )}
+                </Carousel>
+              </Space>
+            )
+          }
+          <Space top={1}>
             <Prose>
               <Text
                 data={page.content}
@@ -51,15 +80,27 @@ if (!page) {
         </div>
 
         <aside class={s.aside}>
-          <div class={s.asideContent}>
+          <div class={s.asideContentDesktop}>
             <MarketplaceCard title={page.title} background="azure" svgLogoUrl={page.logo.url}>
               {page.shortDescription}
               <Fragment slot="below">
-                <Button as="a" href="/contact" target="_blank" fs="small" p="small">
-                  Request activation
-                </Button>
+                <div class={s.cardCta}>
+                  <Button as="a" href="/contact" target="_blank" fs="small" p="small">
+                    Request activation
+                  </Button>
+                </div>
               </Fragment>
             </MarketplaceCard>
+
+            <div class={s.publisher}>
+              <h4>Publisher</h4>
+              <article>
+                <div class={s.publisherIcon}>
+                  <Svg name="svg/datocms/icon/color/color_d_icon" />
+                </div>
+                <p>DatoCMS</p>
+              </article>
+            </div>
           </div>
         </aside>
       </div>