foundry-component-library 0.1.12 → 0.1.13

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/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/Results/styles.module.scss

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

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;

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 {

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/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/package.json

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