foundry-component-library 0.1.12 → 0.1.14

package/lib/assets/svg/close.svg

@@ -1,5 +1,5 @@
 <svg width="47" height="47" viewBox="0 0 47 47" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M38.1942 38.1923C46.3301 30.0564 46.3301 16.8655 38.1942 8.72955C30.0582 0.593625 16.8673 0.593625 8.73139 8.72955C0.595468 16.8655 0.595468 30.0564 8.73139 38.1923C16.8673 46.3282 30.0582 46.3282 38.1942 38.1923Z" stroke="#491B11" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M17.5703 17.5664L29.3554 29.3515" stroke="#491B11" stroke-width="4" stroke-linecap="square" stroke-linejoin="round"/>
-<path d="M17.5703 29.3516L29.3554 17.5665" stroke="#491B11" stroke-width="4" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M38.1942 38.1923C46.3301 30.0564 46.3301 16.8655 38.1942 8.72955C30.0582 0.593625 16.8673 0.593625 8.73139 8.72955C0.595468 16.8655 0.595468 30.0564 8.73139 38.1923C16.8673 46.3282 30.0582 46.3282 38.1942 38.1923Z" stroke="#491B11" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.5703 17.5664L29.3554 29.3515" stroke="#491B11" stroke-width="3" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M17.5703 29.3516L29.3554 17.5665" stroke="#491B11" stroke-width="3" stroke-linecap="square" stroke-linejoin="round"/>
 </svg>

package/lib/components/Awards/index.tsx

@@ -5,6 +5,7 @@ import Container from "../Container";
 import { NextImage } from "../../types";
 import useDrag from "../../hooks/useDrag";
 import WavyText from "../TextAnimations/WavyText";
+import { motion } from "framer-motion";
 
 const Awards = ({
   heading,
@@ -28,7 +29,14 @@ const Awards = ({
   if (!awards) return;
 
   return (
-    <div className={styles.awards}>
+    <motion.div
+      className={styles.awards}
+      initial={{ opacity: 0, y: -5 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{
+        duration: 1,
+      }}
+    >
       <Container>
         {heading && <WavyText className={styles.heading} text={heading} />}
       </Container>
@@ -59,7 +67,7 @@ const Awards = ({
           })}
         </div>
       </Container>
-    </div>
+    </motion.div>
   );
 };
 

package/lib/components/Awards/styles.module.scss

@@ -10,7 +10,6 @@
 
 .heading {
   font-size: 42px;
-  font-family: $font-secondary;
   color: $color-brown;
   margin-bottom: 64px;
   line-height: 1.3;

package/lib/components/Capabilities/styles.module.scss

@@ -38,7 +38,6 @@
 
 .title {
   font-size: 34px;
-  font-family: $font-secondary;
 
   @media #{$QUERY-md} {
     font-size: 18px;

package/lib/components/CaseStudyTeaser/styles.module.scss

@@ -11,7 +11,6 @@
 
 .heading {
   font-size: 42px;
-  font-family: $font-secondary;
   color: $color-brown;
   margin-bottom: 64px;
 
@@ -51,6 +50,10 @@
 
   &:hover {
     width: 500px;
+
+    @media screen and (max-width: $screen-sm) {
+      width: 360px;
+    }
   }
 
   &:after {
@@ -83,7 +86,6 @@
 
 .title {
   font-size: 42px;
-  font-family: $font-secondary;
   margin-bottom: 40px;
   line-height: 1.2;
   width: 300px;

package/lib/components/ContactTeaser/styles.module.scss

@@ -21,11 +21,11 @@
 }
 
 .heading {
-  font-family: $font-secondary;
   font-size: 54px;
   color: $color-brown;
   margin-bottom: 24px;
   white-space: pre-wrap;
+  line-height: 1.1;
 
   @media #{$QUERY-sm} {
     font-size: 32px;

package/lib/components/DoubleTiles/styles.module.scss

@@ -24,7 +24,6 @@
   box-sizing: border-box;
   background-color: $color-pink;
   color: $color-brown;
-  font-family: $font-secondary;
   flex-shrink: 0;
 
   @media screen and (max-width: $screen-sm) {

package/lib/components/Footer/styles.module.scss

@@ -8,7 +8,7 @@
   z-index: 4;
 
   @media #{$QUERY-sm} {
-    padding: 30px 20px 48px;
+    padding: 48px 0;
   }
 }
 
@@ -40,14 +40,18 @@
   }
 }
 
-.logoText {
-  font-size: 34px;
-  font-family: $font-secondary;
-  margin-bottom: 48px;
+.logo {
+  width: 412px;
+  max-width: 100%;
 
-  @media screen and (max-width: $screen-md) {
-    font-size: 30px;
+  @media screen and (max-width: $screen-sm) {
+    margin-bottom: 2rem;
   }
+}
+
+.logoText {
+  font-size: 24px;
+  margin-bottom: 48px;
 
   @media screen and (max-width: $screen-sm) {
     display: none;
@@ -89,8 +93,6 @@
 }
 
 .email {
-  font-size: 14px;
-
   &:hover {
     color: $color-pink;
   }
@@ -128,6 +130,7 @@
 
   @media #{$QUERY-sm} {
     margin-bottom: 10px;
+    font-weight: 400;
   }
 
   a {

package/lib/components/Header/index.tsx

@@ -16,7 +16,7 @@ function Header({ Link }: { Link: NextLink }) {
           <div className={styles.wrapper}>
             <div className={styles.left}>
               <Link href="/">
-                <video src="/logo.mp4" autoPlay muted loop />
+                <video src="/logo.mp4" autoPlay muted />
                 Foundry
               </Link>
             </div>

package/lib/components/Header/styles.module.scss

@@ -21,6 +21,10 @@
   font-size: 0;
   margin-left: -50px;
 
+  @media #{$QUERY-sm} {
+    margin-left: -68px;
+  }
+
   video {
     width: 250px;
     height: 47px;
@@ -131,7 +135,6 @@
 }
 
 .menuList {
-  font-family: $font-secondary;
   color: $color-brown;
   padding-top: 20px;
 }

package/lib/components/Hero/styles.module.scss

@@ -69,6 +69,7 @@
   font-size: 200px;
   font-weight: 400;
   color: $color-white;
+  font-family: $font-secondary;
 
   @media screen and (max-width: $screen-md) {
     font-size: 120px;

package/lib/components/HubsAccordion/Hub.tsx

@@ -4,6 +4,8 @@ import { NextImage, NextLink, type Hub } from "../../types";
 import styles from "./styles.module.scss";
 import Arrow from "../../assets/svg/arrow.svg";
 import useDrag from "../../hooks/useDrag";
+import Plus from "./plus.svg";
+import Minus from "./minus.svg";
 
 const Hub = ({
   hub,
@@ -46,8 +48,8 @@ const Hub = ({
             }
           }}
         >
-          {isActive && <span>-</span>}
-          {!isActive && <span>+</span>}
+          {isActive && <Minus />}
+          {!isActive && <Plus />}
         </button>
       </div>
       <div className={styles.rows}>

package/lib/components/HubsAccordion/minus.svg

@@ -0,0 +1,4 @@
+<svg width="52" height="50" viewBox="0 0 52 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.9988 45.8327C37.609 45.8327 47.021 36.5053 47.021 24.9993C47.021 13.4934 37.609 4.16602 25.9988 4.16602C14.3885 4.16602 4.97656 13.4934 4.97656 24.9993C4.97656 36.5053 14.3885 45.8327 25.9988 45.8327Z" stroke="#491B11" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.5898 25H34.4076" stroke="#491B11" stroke-width="4" stroke-linecap="square" stroke-linejoin="round"/>
+</svg>

package/lib/components/HubsAccordion/plus.svg

@@ -0,0 +1,5 @@
+<svg width="52" height="50" viewBox="0 0 52 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.9988 45.8327C37.609 45.8327 47.021 36.5053 47.021 24.9993C47.021 13.4934 37.609 4.16602 25.9988 4.16602C14.3885 4.16602 4.97656 13.4934 4.97656 24.9993C4.97656 36.5053 14.3885 45.8327 25.9988 45.8327Z" stroke="#491B11" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26 16.666V33.3327" stroke="#491B11" stroke-width="4" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M17.5898 25H34.4076" stroke="#491B11" stroke-width="4" stroke-linecap="square" stroke-linejoin="round"/>
+</svg>

package/lib/components/HubsAccordion/styles.module.scss

@@ -16,10 +16,6 @@
     .rows {
       display: block;
     }
-
-    .icon span {
-      top: -2px;
-    }
   }
 
   &:before {
@@ -58,7 +54,6 @@
 
 .title {
   font-size: 42px;
-  font-family: $font-secondary;
   width: 360px;
 
   @media #{$QUERY-md} {
@@ -89,19 +84,15 @@
 }
 
 .icon {
-  width: 46px;
-  height: 46px;
-  border-radius: 50%;
-  border: solid 2px $color-brown;
+  width: 52px;
+  height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 32px;
-  line-height: 10px;
-  background-color: transparent;
   cursor: pointer;
-  color: $color-brown;
   flex-shrink: 0;
+  background-color: transparent;
+  border: none;
 
   @media #{$QUERY-sm} {
     width: 24px;
@@ -110,10 +101,6 @@
     position: relative;
     top: 8px;
   }
-
-  span {
-    position: relative;
-  }
 }
 
 .rows {

package/lib/components/ImageTitle/styles.module.scss

@@ -38,7 +38,6 @@
 }
 
 .heading {
-  font-family: $font-secondary;
   font-size: 42px;
   color: $color-brown;
   margin-bottom: 42px;

package/lib/components/LargeText/styles.module.scss

@@ -23,7 +23,6 @@
 .wrapper {
   text-align: center;
   font-size: 54px;
-  font-family: $font-secondary;
   margin: auto;
   line-height: 1;
   display: flex;

package/lib/components/LogoSection/styles.module.scss

@@ -15,13 +15,19 @@
 .dropdown {
   position: relative;
   width: 150px;
+  transition: width 0.3s;
 
   @media #{$QUERY-sm} {
-    width: 132px;
+    width: 132px !important;
+  }
+
+  &:hover {
+    width: 200px;
   }
 
   &.active {
     z-index: 3;
+    width: 200px;
   }
 }
 

package/lib/components/Management/styles.module.scss

@@ -34,7 +34,6 @@
 }
 
 .quote {
-  font-family: $font-secondary;
   font-size: 42px;
   margin-bottom: 25px;
   line-height: 1.2;

package/lib/components/OfficesTeaser/index.tsx

@@ -21,7 +21,7 @@ const OfficesTeaser = ({
           <PopInText className={styles.caption} text="Our Offices" />
           <WavyText
             className={styles.heading}
-            text={`We operate all\nover the world`}
+            text={`We operate all\nover the world.`}
             alternate
           />
         </div>

package/lib/components/OfficesTeaser/styles.module.scss

@@ -3,6 +3,7 @@
 .officesTeaser {
   display: flex;
   padding: 64px 0;
+  overflow: hidden;
 
   @media #{$QUERY-xl} {
     display: block;
@@ -26,7 +27,7 @@
 
 .heading {
   font-size: 42px;
-  font-family: $font-secondary;
+  line-height: 1.1;
   white-space: pre-wrap;
   color: $color-brown;
 

package/lib/components/PartnerNetwork/styles.module.scss

@@ -31,6 +31,9 @@
 
   @media #{$QUERY-sm} {
     width: calc(50% - 12px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 }
 
@@ -40,6 +43,10 @@
   height: 40px;
   max-width: 100%;
 
+  @media #{$QUERY-sm} {
+    width: 120px;
+  }
+
   img {
     object-fit: contain;
   }

package/lib/components/ServiceHubsTeaser/Tile.tsx

@@ -3,6 +3,7 @@ import styles from "./styles.module.scss";
 import Plus from "../../assets/svg/plus.svg";
 import { NextLink } from "../../types";
 import { motion } from "framer-motion";
+import Arrow from "../../assets/svg/arrow.svg";
 
 const Tile = ({
   text,
@@ -11,6 +12,7 @@ const Tile = ({
   i,
   onClick,
   Link,
+  hoverText,
 }: {
   text: string;
   background: "pink" | "yellow" | "brown" | "blue";
@@ -18,6 +20,7 @@ const Tile = ({
   i: number;
   onClick?: MouseEventHandler<HTMLAnchorElement>;
   Link: NextLink;
+  hoverText: string;
 }) => {
   return (
     <motion.div
@@ -42,9 +45,17 @@ const Tile = ({
         draggable="false"
         className={`${styles.tile} ${styles[background]}`}
       >
-        <div className={styles.text}>{text}</div>
-        <div>
-          <Plus />
+        <div className={styles.face}>
+          <div className={styles.text}>{text}</div>
+          <div>
+            <Plus />
+          </div>
+        </div>
+        <div className={styles.tails}>
+          <div className={styles.tailsText}>{hoverText}</div>
+          <div>
+            Learn More <Arrow />
+          </div>
         </div>
       </Link>
     </motion.div>

package/lib/components/ServiceHubsTeaser/index.tsx

@@ -21,6 +21,9 @@ const ServiceHubsTeaser = ({
     id: string;
     uri: string;
     title: string;
+    customFieldsHub: {
+      heading: string;
+    };
   }[];
   Link: NextLink;
 }) => {
@@ -53,6 +56,7 @@ const ServiceHubsTeaser = ({
                 <Tile
                   key={tile.id}
                   text={tile.title}
+                  hoverText={tile.customFieldsHub.heading}
                   background={background}
                   href={tile.uri}
                   i={i}

package/lib/components/ServiceHubsTeaser/styles.module.scss

@@ -61,7 +61,6 @@
   background-color: $color-pink;
   color: $color-brown;
   font-size: 34px;
-  font-family: $font-secondary;
   width: 100%;
   height: 100%;
 
@@ -91,6 +90,16 @@
       stroke: $color-white;
     }
   }
+
+  &:hover {
+    .face {
+      display: none;
+    }
+
+    .tails {
+      display: block;
+    }
+  }
 }
 
 .text {
@@ -100,3 +109,18 @@
     margin-bottom: 0;
   }
 }
+
+.face {
+  display: block;
+}
+
+.tails {
+  text-align: left;
+  padding-left: 30px;
+  display: none;
+  font-size: 34px;
+}
+
+.tailsText {
+  margin-bottom: 30px;
+}

package/lib/components/TeamBenefits/styles.module.scss

@@ -29,7 +29,6 @@
   background-color: $color-pink;
   color: $color-brown;
   font-size: 28px;
-  font-family: $font-secondary;
   flex-shrink: 0;
 
   @media screen and (max-width: $screen-md) {

package/lib/components/TeamPhotos/styles.module.scss

@@ -2,7 +2,6 @@
 
 .heading {
   font-size: 42px;
-  font-family: $font-secondary;
   margin-bottom: 55px;
   color: $color-brown;
 

package/lib/components/TextSection/styles.module.scss

@@ -46,7 +46,6 @@
 }
 
 .heading {
-  font-family: $font-secondary;
   font-size: 54px;
   line-height: 1.2;
   color: $color-brown;

package/lib/components/Tiles/Tile.tsx

@@ -1,20 +1,45 @@
 import styles from "./styles.module.scss";
 import Plus from "../../assets/svg/plus.svg";
+import { motion } from "framer-motion";
 
 const Tile = ({
   text,
   background,
+  hoverText,
+  i,
 }: {
   text: string;
+  hoverText: string;
   background: "pink" | "yellow" | "brown";
+  i: number;
 }) => {
   return (
-    <div className={`${styles.tile} ${styles[background]}`}>
-      <div className={styles.text}>{text}</div>
-      <div>
-        <Plus />
+    <motion.div
+      className={`${styles.tile} ${styles[background]}`}
+      whileHover={{
+        scale: 1.08,
+        rotate: i % 2 === 0 ? -3 : 3,
+        boxShadow: "0px 10px 20px rgba(0,0,0,0.2)",
+        y: [0, Math.random() * 12 - 6, 0],
+        transition: {
+          y: {
+            duration: 2,
+            repeat: Infinity,
+            ease: "easeInOut",
+          },
+        },
+      }}
+    >
+      <div className={styles.face}>
+        <div className={styles.text}>{text}</div>
+        <div>
+          <Plus />
+        </div>
       </div>
-    </div>
+      <div className={styles.tails}>
+        <div className={styles.tailsText}>{hoverText}</div>
+      </div>
+    </motion.div>
   );
 };
 

package/lib/components/Tiles/index.tsx

@@ -11,6 +11,7 @@ const Tiles = ({
 }: {
   tiles: {
     heading?: string;
+    hoverText?: string;
   }[];
 }) => {
   const sectionRef = useRef(null);
@@ -43,7 +44,9 @@ const Tiles = ({
             <Tile
               key={tile.heading}
               text={tile.heading || ""}
+              hoverText={tile.hoverText || ""}
               background={background}
+              i={i}
             />
           );
         })}

package/lib/components/Tiles/styles.module.scss

@@ -20,7 +20,6 @@
   background-color: $color-pink;
   color: $color-brown;
   font-size: 42px;
-  font-family: $font-secondary;
   flex-shrink: 0;
 
   @media screen and (max-width: $screen-sm) {
@@ -45,6 +44,16 @@
       stroke: $color-pink;
     }
   }
+
+  &:hover {
+    .face {
+      display: none;
+    }
+
+    .tails {
+      display: block;
+    }
+  }
 }
 
 .text {
@@ -58,3 +67,32 @@
     margin-bottom: 0;
   }
 }
+
+.face {
+  display: block;
+
+  @media #{$QUERY-sm} {
+    font-size: 35px;
+  }
+
+  svg {
+    @media #{$QUERY-sm} {
+      width: 42px;
+    }
+  }
+}
+
+.tails {
+  text-align: left;
+  padding: 30px;
+  display: none;
+  font-size: 34px;
+
+  @media screen and (max-width: $screen-sm) {
+    font-size: 25px;
+  }
+}
+
+.tailsText {
+  margin-bottom: 30px;
+}

package/lib/components/case/Content/Numbers/styles.module.scss

@@ -12,7 +12,7 @@
 
 .wrapper {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
 
   @media #{$QUERY-sm} {
     display: block;

package/lib/components/case/Content/Results/styles.module.scss

@@ -29,6 +29,5 @@
 
 .heading {
   font-size: 34px;
-  font-family: $font-secondary;
   margin-bottom: 20px;
 }

package/lib/components/case/Content/ThreeColumns/Center.tsx

@@ -0,0 +1,49 @@
+import styles from "../styles.module.scss";
+import Video from "../Video";
+import { ColumnOption, NextImage } from "../../../../types";
+
+const Center = ({
+  section,
+  Image,
+}: {
+  section: ColumnOption;
+  Image: NextImage;
+}) => {
+  if (!section) return null;
+
+  return (
+    <div className={styles.columnContent}>
+      {/* case */}
+      {section.fieldGroupName ===
+        "Case_Case_Content_Threecolumns_Center_Text" && (
+        <div
+          className={styles.text}
+          dangerouslySetInnerHTML={{ __html: section.text }}
+        />
+      )}
+      {section.fieldGroupName ===
+        "Case_Case_Content_Threecolumns_Center_Image" &&
+        section.image && (
+          <>
+            <Image
+              className={styles.image}
+              src={section.image.sourceUrl}
+              alt={section.caption ? section.caption : "foundry digital agency"}
+              layout="intrinsic"
+              width={600}
+              height={600}
+            />
+            {section.caption && (
+              <div className={styles.caption}>{section.caption}</div>
+            )}
+          </>
+        )}
+      {section.fieldGroupName ===
+        "Case_Case_Content_Threecolumns_Center_Video" && (
+        <Video section={section} defaultRatio="150%" />
+      )}
+    </div>
+  );
+};
+
+export default Center;

package/lib/components/case/Content/ThreeColumns/Left.tsx

@@ -0,0 +1,48 @@
+import styles from "../styles.module.scss";
+import Video from "../Video";
+import { ColumnOption, NextImage } from "../../../../types";
+
+const Left = ({
+  section,
+  Image,
+}: {
+  section: ColumnOption;
+  Image: NextImage;
+}) => {
+  if (!section) return null;
+
+  return (
+    <div className={styles.columnContent}>
+      {/* case */}
+      {section.fieldGroupName ===
+        "Case_Case_Content_Threecolumns_Left_Text" && (
+        <div
+          className={styles.text}
+          dangerouslySetInnerHTML={{ __html: section.text }}
+        />
+      )}
+      {section.fieldGroupName === "Case_Case_Content_Threecolumns_Left_Image" &&
+        section.image && (
+          <>
+            <Image
+              className={styles.image}
+              src={section.image.sourceUrl}
+              alt={section.caption ? section.caption : "foundry digital agency"}
+              layout="intrinsic"
+              width={600}
+              height={600}
+            />
+            {section.caption && (
+              <div className={styles.caption}>{section.caption}</div>
+            )}
+          </>
+        )}
+      {section.fieldGroupName ===
+        "Case_Case_Content_Threecolumns_Left_Video" && (
+        <Video section={section} defaultRatio="150%" />
+      )}
+    </div>
+  );
+};
+
+export default Left;

package/lib/components/case/Content/ThreeColumns/Right.tsx

@@ -0,0 +1,49 @@
+import styles from "../styles.module.scss";
+import Video from "../Video";
+import { ColumnOption, NextImage } from "../../../../types";
+
+const Right = ({
+  section,
+  Image,
+}: {
+  section: ColumnOption;
+  Image: NextImage;
+}) => {
+  if (!section) return null;
+
+  return (
+    <div className={styles.columnContent}>
+      {/* case */}
+      {section.fieldGroupName ===
+        "Case_Case_Content_Threecolumns_Right_Text" && (
+        <div
+          className={`${styles.text}`}
+          dangerouslySetInnerHTML={{ __html: section.text }}
+        />
+      )}
+      {section.fieldGroupName ===
+        "Case_Case_Content_Threecolumns_Right_Image" &&
+        section.image && (
+          <>
+            <Image
+              className={styles.image}
+              src={section.image.sourceUrl}
+              alt={section.caption ? section.caption : "foundry digital agency"}
+              layout="intrinsic"
+              width={600}
+              height={600}
+            />
+            {section.caption && (
+              <div className={styles.caption}>{section.caption}</div>
+            )}
+          </>
+        )}
+      {section.fieldGroupName ===
+        "Case_Case_Content_Threecolumns_Right_Video" && (
+        <Video section={section} defaultRatio="150%" />
+      )}
+    </div>
+  );
+};
+
+export default Right;

package/lib/components/case/Content/ThreeColumns/index.tsx

@@ -0,0 +1,38 @@
+import styles from "../styles.module.scss";
+import Container from "../../../Container";
+import { type ThreeColumns, NextImage } from "../../../../types";
+import Left from "./Left";
+import Center from "./Center";
+import Right from "./Right";
+
+function ThreeColumns({
+  section,
+  Image,
+}: {
+  section: ThreeColumns;
+  Image: NextImage;
+}) {
+  return (
+    <section className={styles.section}>
+      <Container>
+        <div className={styles.threeColumns}>
+          <div className={styles.column}>
+            {section.left && <Left section={section.left[0]} Image={Image} />}
+          </div>
+          <div className={styles.column}>
+            {section.center && (
+              <Center section={section.center[0]} Image={Image} />
+            )}
+          </div>
+          <div className={styles.column}>
+            {section.right && (
+              <Right section={section.right[0]} Image={Image} />
+            )}
+          </div>
+        </div>
+      </Container>
+    </section>
+  );
+}
+
+export default ThreeColumns;

package/lib/components/case/Content/Video.tsx

@@ -5,7 +5,13 @@ import styles from "./styles.module.scss";
 import { useOnScreen } from "../../../hooks/useOnScreen";
 import { type Video } from "../../../types";
 
-function Video({ section }: { section: Video }) {
+function Video({
+  section,
+  defaultRatio = "56.25%",
+}: {
+  section: Video;
+  defaultRatio?: string;
+}) {
   const sectionRef = useRef(null);
   const onScreen = useOnScreen(sectionRef, "1000px");
   const [playing, setPlaying] = useState(false);
@@ -50,7 +56,7 @@ function Video({ section }: { section: Video }) {
           backgroundImage: section.poster
             ? `url(${section.poster.sourceUrl})`
             : "none",
-          paddingTop: section.ratio ? section.ratio : "56.25%",
+          paddingTop: section.ratio ? section.ratio : defaultRatio,
         }}
       >
         <div>

package/lib/components/case/Content/index.tsx

@@ -1,6 +1,7 @@
 import FullWidthImage from "./FullWidthImage";
 import CenterColumn from "./CenterColumn";
 import TwoColumns from "./TwoColumns";
+import ThreeColumns from "./ThreeColumns";
 import Video from "./Video";
 import Container from "../../Container";
 import styles from "./styles.module.scss";
@@ -64,6 +65,15 @@ function CaseContent({
             />
           );
         }
+        if (section.fieldGroupName === "Case_Case_Content_Threecolumns") {
+          return (
+            <ThreeColumns
+              key={section.fieldGroupName + i}
+              section={section}
+              Image={Image}
+            />
+          );
+        }
         if (section.fieldGroupName === "Case_Case_Content_Video") {
           return (
             <section

package/lib/components/case/Content/styles.module.scss

@@ -47,7 +47,6 @@
   h4,
   h5,
   h6 {
-    font-family: $font-secondary;
     font-size: 42px;
     font-weight: 400;
     margin-bottom: 32px;
@@ -67,6 +66,15 @@
   }
 }
 
+.threeColumns {
+  display: flex;
+  justify-content: space-between;
+
+  @media #{$QUERY-sm} {
+    display: block;
+  }
+}
+
 .column {
   width: 600px;
   max-width: calc(50% - 20px);
@@ -94,7 +102,6 @@
   max-width: 100%;
   margin: 0 auto;
   position: relative;
-  background-color: #eee;
   background-position: center;
   background-repeat: no-repeat;
 

package/lib/components/case/Top/styles.module.scss

@@ -65,6 +65,7 @@
   max-width: 100%;
   color: $color-brown;
   font-weight: 400;
+  font-family: $font-secondary;
 
   @media #{$QUERY-sm} {
     font-size: 32px;

package/lib/components/contact/Accounts/styles.module.scss

@@ -14,10 +14,9 @@
   font-size: 42px;
   margin-bottom: 46px;
   font-weight: 400;
-  font-family: $font-secondary;
 
   @media #{$QUERY-sm} {
-    font-size: 28px;
+    font-size: 24px;
     margin-bottom: 32px;
   }
 }
@@ -57,11 +56,19 @@
   font-size: 20px;
   font-weight: 500px;
   margin-bottom: 16px;
+
+  @media #{$QUERY-sm} {
+    font-size: 18px;
+  }
 }
 
 .text {
   font-size: 18px;
 
+  @media #{$QUERY-sm} {
+    font-size: 16px;
+  }
+
   strong {
     font-weight: bold;
   }

package/lib/components/contact/Contacts/styles.module.scss

@@ -12,7 +12,6 @@
 
 .title {
   font-size: 42px;
-  font-family: $font-secondary;
   margin-bottom: 46px;
   font-weight: 400;
 
@@ -60,7 +59,6 @@
 
 .heading {
   font-size: 34px;
-  font-family: $font-secondary;
   font-weight: 400;
   line-height: 1.2;
   margin-bottom: 24px;

package/lib/components/contact/Offices/styles.module.scss

@@ -72,7 +72,6 @@
 
 .heading {
   font-size: 42px;
-  font-family: $font-secondary;
   color: $color-brown;
 }
 

package/lib/components/news/Posts/styles.module.scss

@@ -75,7 +75,6 @@
   a {
     font-size: 42px;
     line-height: 1.2;
-    font-family: $font-secondary;
     font-weight: 400;
     margin-bottom: 15px;
     color: $color-brown;

package/lib/components/single/Content/styles.module.scss

@@ -6,6 +6,12 @@
   @media #{$QUERY-sm} {
     padding-bottom: 90px;
   }
+
+  h1,
+  h2,
+  h3 {
+    margin-bottom: 1rem;
+  }
 }
 
 .section {
@@ -124,7 +130,6 @@
   max-width: 100%;
   margin: 0 auto;
   position: relative;
-  background-color: #eee;
   background-position: center;
   background-repeat: no-repeat;
 

package/lib/components/single/Top/styles.module.scss

@@ -83,6 +83,7 @@
   line-height: 1.2;
   font-weight: bold;
   margin-bottom: 0;
+  font-family: $font-secondary;
 
   &.isCase {
     margin-bottom: 50px;

package/lib/queries/getAboutPage.ts

@@ -19,6 +19,7 @@ type AboutPage = {
       tilesHeading?: string;
       tiles?: {
         heading?: string;
+        hoverText?: string;
       }[];
       quotes?: {
         name?: string;
@@ -119,6 +120,7 @@ export default async function getAboutPage({
           tilesHeading
           tiles {
             heading
+            hoverText
           }
           quotes {
             name

package/lib/queries/getCaseBySlug.ts

@@ -51,6 +51,22 @@ export default async function getCaseBySlug({
               sourceUrl
             }
           }
+          relatedCases {
+            __typename
+            ... on Case {
+              id
+              title
+              uri
+              case {
+                thumbnailImage{
+                  sourceUrl
+                }
+                mainImage {
+                  sourceUrl
+                }
+              }
+            }
+          }
           content {
             ... on Case_Case_Content_Quote {
               fieldGroupName
@@ -141,6 +157,75 @@ export default async function getCaseBySlug({
                 }
               }
             }
+            ... on Case_Case_Content_Threecolumns {
+              fieldGroupName
+              left {
+                ... on Case_Case_Content_Threecolumns_Left_Image {
+                  fieldGroupName
+                  image {
+                    sourceUrl
+                  }
+                }
+                ... on Case_Case_Content_Threecolumns_Left_Text {
+                  fieldGroupName
+                  text
+                }
+                ... on Case_Case_Content_Threecolumns_Left_Video {
+                  fieldGroupName
+                  autoplay
+                  poster {
+                    sourceUrl
+                  }
+                  caption
+                  video
+                  ratio
+                }
+              }
+              center {
+                ... on Case_Case_Content_Threecolumns_Center_Image {
+                  fieldGroupName
+                  image {
+                    sourceUrl
+                  }
+                }
+                ... on Case_Case_Content_Threecolumns_Center_Text {
+                  fieldGroupName
+                  text
+                }
+                ... on Case_Case_Content_Threecolumns_Center_Video {
+                  fieldGroupName
+                  autoplay
+                  poster {
+                    sourceUrl
+                  }
+                  caption
+                  video
+                  ratio
+                }
+              }
+              right {
+                ... on Case_Case_Content_Threecolumns_Right_Image {
+                  fieldGroupName
+                  image {
+                    sourceUrl
+                  }
+                }
+                ... on Case_Case_Content_Threecolumns_Right_Text {
+                  fieldGroupName
+                  text
+                }
+                ... on Case_Case_Content_Threecolumns_Right_Video {
+                  fieldGroupName
+                  autoplay
+                  poster {
+                    sourceUrl
+                  }
+                  caption
+                  video
+                  ratio
+                }
+              }
+            }
           }
         }
       }

package/lib/queries/getHomePage.ts

@@ -71,6 +71,9 @@ type HomePage = {
     id: string;
     title: string;
     uri: string;
+    customFieldsHub: {
+      heading: string;
+    };
   }[];
   posts: PostPreview[];
   contactPage: {
@@ -193,6 +196,9 @@ export default async function getHomePage({
           id
           title
           uri
+          customFieldsHub {
+            heading
+          }
         }
       }
       posts(first: 3, where: {language: ${language}}) {

package/lib/types/index.ts

@@ -34,7 +34,10 @@ type ColumnImage = {
     | "Post_Customfieldsposts_Content_Twocolumns_Left_Image"
     | "Post_Customfieldsposts_Content_Twocolumns_Right_Image"
     | "Case_Case_Content_Twocolumns_Left_Image"
-    | "Case_Case_Content_Twocolumns_Right_Image";
+    | "Case_Case_Content_Twocolumns_Right_Image"
+    | "Case_Case_Content_Threecolumns_Left_Image"
+    | "Case_Case_Content_Threecolumns_Center_Image"
+    | "Case_Case_Content_Threecolumns_Right_Image";
   image: { sourceUrl: string };
   caption?: string;
 };
@@ -44,7 +47,10 @@ type ColumnText = {
     | "Post_Customfieldsposts_Content_Twocolumns_Left_Text"
     | "Post_Customfieldsposts_Content_Twocolumns_Right_Text"
     | "Case_Case_Content_Twocolumns_Left_Text"
-    | "Case_Case_Content_Twocolumns_Right_Text";
+    | "Case_Case_Content_Twocolumns_Right_Text"
+    | "Case_Case_Content_Threecolumns_Left_Text"
+    | "Case_Case_Content_Threecolumns_Center_Text"
+    | "Case_Case_Content_Threecolumns_Right_Text";
   text: string;
 };
 
@@ -74,6 +80,13 @@ export type TwoColumns = {
   right?: ColumnOption[];
 };
 
+export type ThreeColumns = {
+  fieldGroupName: "Case_Case_Content_Threecolumns";
+  left?: ColumnOption[];
+  center?: ColumnOption[];
+  right?: ColumnOption[];
+};
+
 export type Video = {
   fieldGroupName:
     | "Post_Customfieldsposts_Content_Video"
@@ -81,7 +94,10 @@ export type Video = {
     | "Post_Customfieldsposts_Content_Twocolumns_Left_Video"
     | "Post_Customfieldsposts_Content_Twocolumns_Right_Video"
     | "Case_Case_Content_Twocolumns_Left_Video"
-    | "Case_Case_Content_Twocolumns_Right_Video";
+    | "Case_Case_Content_Twocolumns_Right_Video"
+    | "Case_Case_Content_Threecolumns_Left_Video"
+    | "Case_Case_Content_Threecolumns_Center_Video"
+    | "Case_Case_Content_Threecolumns_Right_Video";
   autoplay: boolean;
   poster: { sourceUrl: string };
   caption: string;
@@ -124,6 +140,7 @@ export type Content = (
   | FullWidthImage
   | CenterColumn
   | TwoColumns
+  | ThreeColumns
   | Video
   | Results
   | Numbers
@@ -227,6 +244,19 @@ export type Case = {
     featured?: boolean;
     service?: string[];
     industry?: string[];
+    relatedCases?: {
+      id: string;
+      title: string;
+      uri: string;
+      case: {
+        thumbnailImage?: {
+          sourceUrl: string;
+        };
+        mainImage?: {
+          sourceUrl: string;
+        };
+      };
+    }[];
     thumbnailVideo?: {
       mediaItemUrl: string;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foundry-component-library",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",