Update dev toolkit page

src/components/Card.js

@@ -19,6 +19,7 @@ import { contentfulModuleToComponent } from '../lib/utils/moduleToComponent'
 import GatsbyBackgroundImage from './GatsbyBackgroundImage'
 import CardBenefit from './Card/CardBenefit'
 import CardDelegationFeature from './Card/CardDelegationFeature'
+import CardUseCase from './Card/CardUseCase'
 
 /**
  * @name Card
@@ -77,6 +78,8 @@ const StyledCard = props => {
       return <CardBenefit {...props} />
     case 'delegation-feature':
       return <CardDelegationFeature {...props} />
+    case 'use-case':
+      return <CardUseCase {...props} />
     default:
     // code block
   }

src/components/Card/CardBenefit.js

@@ -37,19 +37,13 @@ export default CardBenefit
 const Card = styled.div`
   display: flex;
   gap: 40px;
-
-  ${({ theme }) => `
-  @media (max-width: ${theme.device.mobileMediaMax}){
-    flex-direction: column;
-    gap: 16px;
-  }`}
+  flex-direction: column;
+  gap: 16px;
 `
 
 const ImageWrapper = styled.div`
-  width: 363px;
-
   img {
-    object-fit: contain;
+    width: 100%;
   }
 
   ${({ theme }) =>
@@ -90,6 +84,11 @@ const Description = styled.div`
     margin-bottom: 0;
   }
 
+  a {
+    color: inherit;
+    text-decoration: underline;
+  }
+
   ${({ theme }) =>
     `
   @media (max-width: ${theme.device.mobileMediaMax}){

src/components/Card/CardDelegationFeature.js

@@ -34,10 +34,9 @@ const CardInner = styled.div`
 
   ${({ theme }) =>
     `
-  @media (max-width: ${theme.device.mobileMediaMax}){
-    min-height: auto;
-    padding: 16px;
-  }
+    @media (max-width: ${theme.device.mobileMediaMax}){
+      min-height: auto;
+    }
   `}
 `
 
@@ -64,6 +63,11 @@ const Description = styled.div`
     margin-bottom: 0;
   }
 
+  a {
+    color: inherit;
+    text-decoration: underline;
+  }
+
   ${({ theme }) =>
     `
   @media (max-width: ${theme.device.mobileMediaMax}){

src/components/Card/CardUseCase.js

@@ -0,0 +1,64 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import styled from 'styled-components'
+
+const CardUseCase = props => {
+  const { title, description, backgroundColor = 'gray' } = props
+  return (
+    <Card>
+      <CardInner className={`bg-${backgroundColor}`}>
+        {title && <Title>{title}</Title>}
+        {description && (
+          <Description>
+            <div dangerouslySetInnerHTML={{ __html: description }}></div>
+          </Description>
+        )}
+      </CardInner>
+    </Card>
+  )
+}
+
+CardUseCase.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+}
+
+export default CardUseCase
+
+const Card = styled.div``
+
+const CardInner = styled.div`
+  padding: 28px;
+  height: 100%;
+`
+
+const Title = styled.div`
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 1.4;
+  margin-bottom: 12px;
+
+  ${({ theme }) =>
+    `
+  @media (max-width: ${theme.device.mobileMediaMax}){
+    font-size: 20px;
+    margin-bottom: 16px;
+    text-align: left;
+  }
+  `}
+`
+
+const Description = styled.div`
+  display: block;
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  ${({ theme }) =>
+    `
+  @media (max-width: ${theme.device.mobileMediaMax}){
+    text-align: left;
+  }
+  `}
+`

src/components/Contentful/ContentfulEmbed.js

@@ -11,6 +11,7 @@ const ContentfulEmbed = props => {
     moduleConfig: {
       embed: { embed },
       title,
+      subTitle,
       displayTitle,
       moduleId,
       previewMode = false,
@@ -42,6 +43,7 @@ const ContentfulEmbed = props => {
             cardRef={cardRef}
           />
           {duration ? <div className="duration">{duration}</div> : null}
+          {subTitle ? <h3 className="subtitle">{subTitle}</h3> : null}
         </div>
       </WrapperInner>
     </Wrapper>
@@ -132,6 +134,17 @@ const WrapperInner = styled.div`
       font-size: 12px;
       line-height: 1;
     }
+
+    .subtitle {
+      margin-top: 8px;
+      text-align: left;
+      color: ${({ theme }) => theme.text.secondary};
+
+      @media (max-width: ${({ theme }) => theme.device.tabletMediaMax}) {
+        font-size: 20px;
+        line-height: 1.2;
+      }
+    }
   }
 
   .developer-community-calls & {

src/components/Contentful/ContentfulLayoutModuleContainer.js

@@ -584,6 +584,12 @@ const ContentInfo = styled.div`
     }
     @media (max-width: ${({ theme }) => theme.device.mobileMediaMax}) {
       justify-content: center;
+
+      .delegation-toolkit-features &,
+      .delegation-toolkit-benefits &,
+      .delegation-toolkit-use-cases & {
+        justify-content: flex-start;
+      }
     }
   }
 `

src/components/Embed/Embed.js

@@ -236,6 +236,18 @@ const VideoOverlay = styled.div`
   transition: background 300ms ease;
   cursor: pointer;
 
+  #dan-finlay-video & {
+    justify-content: flex-end;
+    align-items: flex-end;
+    padding-right: 20px;
+    padding-bottom: 20px;
+    background: transparent;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.3);
+    }
+  }
+
   .icon-play {
     width: 60px;
     height: 60px;
@@ -267,6 +279,10 @@ const Wrapper = styled.div`
   margin: 0 auto;
   @media (min-width: ${theme.device.desktop}) {
     width: fit-content;
+
+    #dan-finlay-video & {
+      width: 100%;
+    }
   }
   .thumbnail-image {
     position:absolute;

src/components/RichText.js

@@ -162,11 +162,21 @@ const RichTextWrapper = styled.div`
   &#dan-finlay-quote {
     max-width: 720px;
     margin-inline: auto;
+    margin-top: 100px;
 
-    blockquote p {
-      font-size: 2rem;
-      text-align: center;
-      line-height: 1.4;
+    blockquote {
+      margin-left: 0;
+      margin-right: 0;
+
+      p {
+        font-size: 1.625rem;
+        text-align: center;
+        line-height: 1.4;
+
+        @media (min-width: ${({ theme }) => theme.device.tablet}) {
+          font-size: 2rem;
+        }
+      }
     }
 
     & > div > p {

src/components/layout.scss

@@ -1136,6 +1136,15 @@ $sizes: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15;
   background-color: #75bff8;
 }
 
+.bg-darker-blue {
+  background-color: #037dd6;
+  color: #fff;
+}
+
+.bg-pink {
+  background-color: #ffa4d1;
+}
+
 .bg-darkGray {
   background-color: #6a737d;
   color: #fff;
@@ -1210,17 +1219,19 @@ figcaption {
 }
 
 #delegation-toolkit-benefits {
-  padding-top: 32px;
-  padding-bottom: 32px;
-
   .moduleContainerListModules {
-    gap: 56px;
+    row-gap: 56px;
   }
 }
 
-#delegation-toolkit-feature-cards {
-  padding-top: 32px;
-  padding-bottom: 32px;
+#delegation-toolkit-videos {
+  @media (min-width: 767px) {
+    margin-top: 120px;
+  }
+
+  .moduleContainerListModules {
+    row-gap: 32px;
+  }
 }
 
 #delegation-toolkit-getting-started {
@@ -1323,6 +1334,14 @@ body.dark-mode {
     background-color: #393e46;
   }
 
+  .bg-darker-blue {
+    background-color: #393e46;
+  }
+
+  .bg-pink {
+    background-color: #393e46;
+  }
+
   .logoSvg {
     svg {
       path {

src/fragments/ContentfulContent.js

@@ -685,6 +685,7 @@ export const ContentfulEmbedFields = graphql`
       gatsbyImageData(width: 1920, quality: 80)
     }
     title
+    subTitle
     displayTitle
     layoutType
     playOnPopup

src/fragments/previewFragment.js

@@ -30,6 +30,7 @@ export const ContentfulEmbedFields = gql`
     }
     moduleId
     title
+    subTitle
     embed
     thumbnail(preview: true) {
       url