foundry-component-library 0.0.13 → 0.1.1

package/lib/components/AgencyNumbers/index.tsx

@@ -26,7 +26,10 @@ const AgencyNumbers = ({
               />
             )}
             {Link && (
-              <Link className={styles.button} href="/about-us">
+              <Link
+                className={`${styles.button} ${styles.desktop}`}
+                href="/about-us"
+              >
                 About Us
               </Link>
             )}
@@ -41,6 +44,14 @@ const AgencyNumbers = ({
               );
             })}
           </div>
+          {Link && (
+            <Link
+              className={`${styles.button} ${styles.mobile}`}
+              href="/about-us"
+            >
+              About Us
+            </Link>
+          )}
         </div>
       </Container>
     </div>

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

@@ -4,6 +4,10 @@
   padding: 64px 0;
   background-color: $color-pink;
   color: $color-brown;
+
+  @media #{$QUERY-sm} {
+    padding: 32px 0;
+  }
 }
 
 .wrapper {
@@ -22,6 +26,10 @@
   white-space: pre-wrap;
   line-height: 1.2;
 
+  @media #{$QUERY-sm} {
+    font-size: 28px;
+  }
+
   em {
     font-style: normal;
     color: $color-white;
@@ -32,8 +40,22 @@
   @extend .button--brown;
   display: inline-block;
 
-  @media screen and (max-width: $screen-md) {
-    margin-bottom: 60px;
+  &.desktop {
+    @media #{$QUERY-md} {
+      margin-bottom: 60px;
+    }
+
+    @media #{$QUERY-sm} {
+      display: none;
+    }
+  }
+
+  &.mobile {
+    display: none;
+
+    @media #{$QUERY-sm} {
+      display: inline-block;
+    }
   }
 }
 
@@ -52,10 +74,6 @@
   padding: 16px;
   margin-bottom: 24px;
 
-  @media screen and (max-width: $screen-sm) {
-    width: 100%;
-  }
-
   &:last-child {
     margin-bottom: 0;
   }
@@ -64,8 +82,16 @@
 .number {
   font-size: 42px;
   margin-bottom: 5px;
+
+  @media #{$QUERY-sm} {
+    font-size: 36px;
+  }
 }
 
 .description {
   font-size: 22px;
+
+  @media #{$QUERY-sm} {
+    font-size: 16px;
+  }
 }

package/lib/components/Awards/index.tsx

@@ -1,6 +1,9 @@
+"use client";
+import { useRef } from "react";
 import styles from "./styles.module.scss";
 import Container from "../Container";
 import { NextImage } from "../../types";
+import useDrag from "../../hooks/useDrag";
 
 const Awards = ({
   heading,
@@ -17,31 +20,45 @@ const Awards = ({
   }[];
   Image: NextImage;
 }) => {
+  const sectionRef = useRef(null);
+  const { handleMouseDown, handleMouseMove, handleMouseUp, dragStyle } =
+    useDrag(sectionRef);
+
   if (!awards) return;
 
   return (
-    <Container>
-      <div className={styles.awards}>
+    <div className={styles.awards}>
+      <Container>
         {heading && <div className={styles.heading}>{heading}</div>}
-        <div className={styles.items}>
+      </Container>
+      <Container noMobilePadding>
+        <div
+          ref={sectionRef}
+          className={styles.items}
+          onMouseDown={handleMouseDown}
+          onMouseMove={handleMouseMove}
+          onMouseUp={handleMouseUp}
+          onMouseLeave={handleMouseUp}
+          style={dragStyle as React.CSSProperties}
+        >
           {awards.map((award, i) => {
             const { image, heading, text } = award;
 
-            if (!heading) return;
+            if (!image) return;
 
             return (
-              <div key={heading + i} className={styles.award}>
+              <div key={image.sourceUrl + i} className={styles.award}>
                 <div className={styles.image}>
                   {image && <Image src={image?.sourceUrl} alt="" fill />}
                 </div>
-                <div className={styles.text}>{heading}</div>
+                {heading && <div className={styles.text}>{heading}</div>}
                 {text && <div className={styles.client}>{text}</div>}
               </div>
             );
           })}
         </div>
-      </div>
-    </Container>
+      </Container>
+    </div>
   );
 };
 

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

@@ -2,6 +2,10 @@
 
 .awards {
   padding: 64px 0;
+
+  @media #{$QUERY-sm} {
+    padding: 32px 0 44px;
+  }
 }
 
 .heading {
@@ -10,13 +14,18 @@
   color: $color-brown;
   margin-bottom: 64px;
   line-height: 1.3;
+
+  @media #{$QUERY-sm} {
+    font-size: 28px;
+    margin-bottom: 44px;
+  }
 }
 
 .items {
   display: flex;
 
-  @media screen and (max-width: $screen-sm) {
-    flex-wrap: wrap;
+  @media #{$QUERY-sm} {
+    gap: 24px;
   }
 }
 
@@ -25,17 +34,35 @@
   text-align: center;
   color: $color-brown;
 
-  @media screen and (max-width: $screen-sm) {
-    width: 50%;
-    margin-bottom: 30px;
+  @media #{$QUERY-sm} {
+    width: auto;
+    max-width: 122px;
+    flex-shrink: 0;
+  }
+
+  &:first-child {
+    @media #{$QUERY-sm} {
+      margin-left: 20px;
+    }
+  }
+
+  &:last-child {
+    @media #{$QUERY-sm} {
+      margin-right: 20px;
+    }
   }
 }
 
 .image {
   position: relative;
+  min-width: 100px;
   height: 64px;
   margin-bottom: 64px;
 
+  @media #{$QUERY-sm} {
+    margin-bottom: 0;
+  }
+
   img {
     object-fit: contain;
   }
@@ -45,8 +72,16 @@
   font-size: 18px;
   margin-bottom: 10px;
   font-weight: 500;
+
+  @media #{$QUERY-sm} {
+    font-size: 16px;
+  }
 }
 
 .client {
   font-size: 18px;
+
+  @media #{$QUERY-sm} {
+    font-size: 16px;
+  }
 }

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

@@ -2,6 +2,10 @@
 
 .caseStudyTeaser {
   padding: 64px 0;
+
+  @media #{$QUERY-sm} {
+    padding: 32px 0 64px;
+  }
 }
 
 .heading {
@@ -11,8 +15,8 @@
   margin-bottom: 64px;
 
   @media screen and (max-width: $screen-sm) {
-    font-size: 31px;
-    margin-bottom: 30px;
+    font-size: 28px;
+    margin-bottom: 32px;
   }
 }
 
@@ -31,11 +35,12 @@
   height: 720px;
   padding: 40px;
   transition: width 0.3s;
+  box-sizing: border-box;
 
   @media screen and (max-width: $screen-sm) {
     max-width: 90%;
     height: 500px;
-    padding: 20px;
+    padding: 40px 33px;
   }
 
   &:hover {
@@ -79,10 +84,12 @@
 
   @media screen and (max-width: $screen-sm) {
     font-size: 31px;
-    margin-bottom: 20px;
+    margin-bottom: 36px;
+    width: 100%;
   }
 }
 
 .button {
   @extend .button--white-transparent;
+  display: inline-block;
 }

package/lib/components/ContactTeaser/index.tsx

@@ -7,11 +7,15 @@ const ContactTeaser = ({
   heading,
   text,
   theme = "yellow",
+  buttonText = "Contact Us",
+  buttonHref = "/contact",
   Link,
 }: {
   heading: string;
   text?: string;
   theme?: "yellow" | "pink";
+  buttonText?: string;
+  buttonHref?: string;
   Link: NextLink;
 }) => {
   return (
@@ -24,8 +28,8 @@ const ContactTeaser = ({
             </div>
           )}
           {text && <div className={styles.text}>{text}</div>}
-          <Link href="/contact" className={styles.button}>
-            {translate("Contact Us")}
+          <Link href={buttonHref} className={styles.button}>
+            {translate(buttonText)}
           </Link>
         </div>
       </Container>

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

@@ -8,10 +8,10 @@
   &.pink {
     background-color: $color-pink;
     color: $color-brown;
+  }
 
-    .button {
-      @extend .button--brown;
-    }
+  @media #{$QUERY-sm} {
+    padding: 32px 0;
   }
 }
 
@@ -27,8 +27,8 @@
   margin-bottom: 24px;
   white-space: pre-wrap;
 
-  @media screen and (max-width: $screen-sm) {
-    font-size: 31px;
+  @media #{$QUERY-sm} {
+    font-size: 32px;
   }
 
   &:last-child {
@@ -43,4 +43,13 @@
 .text {
   font-size: 20px;
   margin-bottom: 48px;
+
+  @media #{$QUERY-sm} {
+    font-size: 16px;
+  }
+}
+
+.button {
+  @extend .button--brown;
+  display: inline-block;
 }

package/lib/components/Container/index.tsx

@@ -5,12 +5,19 @@ import styles from "./styles.module.scss";
 const Container = ({
   children,
   style,
+  noMobilePadding,
 }: {
   children: React.ReactNode;
   style?: CSSProperties;
+  noMobilePadding?: boolean;
 }) => {
   return (
-    <div className={styles.container} style={{ ...style }}>
+    <div
+      className={`${styles.container} ${
+        noMobilePadding ? styles.noMobilePadding : ""
+      }`}
+      style={{ ...style }}
+    >
       {children}
     </div>
   );

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

@@ -7,16 +7,22 @@
   box-sizing: border-box;
   padding: 0 30px;
 
-  @media screen and (max-width: $screen-lg) {
+  @media #{$QUERY-lg} {
     width: 1000px;
   }
 
-  @media screen and (max-width: $screen-md) {
+  @media #{$QUERY-md} {
     width: 900px;
   }
 
-  @media screen and (max-width: $screen-sm) {
+  @media #{$QUERY-sm} {
     width: 100%;
     padding: 0 20px;
   }
+
+  &.noMobilePadding {
+    @media #{$QUERY-sm} {
+      padding: 0;
+    }
+  }
 }

package/lib/components/DoubleTiles/index.tsx

@@ -1,7 +1,10 @@
+"use client";
+import { useRef } from "react";
 import Container from "../Container";
 import TextSection from "../TextSection";
 import styles from "./styles.module.scss";
 import Tile from "./Tile";
+import useDrag from "../../hooks/useDrag";
 
 const DoubleTiles = ({
   heading,
@@ -13,12 +16,26 @@ const DoubleTiles = ({
     text?: string;
   }[];
 }) => {
+  const sectionRef = useRef(null);
+  const { handleMouseDown, handleMouseMove, handleMouseUp, dragStyle } =
+    useDrag(sectionRef);
+
+  if (!tiles) return;
+
   return (
     <div className={styles.doubleTiles}>
       <TextSection caption="PROCESS" heading={heading} />
-      <Container>
+      <Container noMobilePadding>
         <div className={styles.wrapper}>
-          <div className={styles.tiles}>
+          <div
+            ref={sectionRef}
+            className={styles.tiles}
+            onMouseDown={handleMouseDown}
+            onMouseMove={handleMouseMove}
+            onMouseUp={handleMouseUp}
+            onMouseLeave={handleMouseUp}
+            style={dragStyle as React.CSSProperties}
+          >
             {tiles.map((tile, i) => {
               let background: "pink" | "yellow" | "brown" | "gray" = "pink";
               if (i % 3 === 1) background = "gray";
@@ -26,7 +43,7 @@ const DoubleTiles = ({
 
               return (
                 <Tile
-                  key={tile.text}
+                  key={background + i}
                   heading={tile.heading || ""}
                   text={tile.text || ""}
                   background={background}

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

@@ -4,6 +4,11 @@
   padding-bottom: 64px;
   display: flex;
   gap: 20px;
+
+  @media #{$QUERY-sm} {
+    padding: 0 20px;
+    padding-bottom: 32px;
+  }
 }
 
 .tile {
@@ -63,13 +68,20 @@
       display: block;
     }
   }
+
+  svg {
+    @media #{$QUERY-sm} {
+      width: 36px;
+    }
+  }
 }
 
 .heading {
   font-size: 42px;
   margin-bottom: 42px;
 
-  @media screen and (max-width: $screen-sm) {
+  @media #{$QUERY-sm} {
+    font-size: 28px;
     margin-bottom: 20px;
   }
 
@@ -80,6 +92,10 @@
 
 .text {
   font-size: 32px;
+
+  @media #{$QUERY-sm} {
+    font-size: 21px;
+  }
 }
 
 .sideTwo {

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

@@ -6,6 +6,10 @@
   color: $color-white;
   position: relative;
   z-index: 4;
+
+  @media #{$QUERY-sm} {
+    padding: 30px 20px 48px;
+  }
 }
 
 .footerWrapper {
@@ -26,9 +30,13 @@
   justify-content: space-between;
 
   svg {
-    @media screen and (max-width: $screen-md) {
+    @media #{$QUERY-md} {
       width: 350px;
     }
+
+    @media #{$QUERY-sm} {
+      width: 245px;
+    }
   }
 }
 
@@ -42,7 +50,7 @@
   }
 
   @media screen and (max-width: $screen-sm) {
-    margin-bottom: 30px;
+    display: none;
   }
 }
 
@@ -57,6 +65,10 @@
   @media screen and (max-width: $screen-md) {
     display: block;
   }
+
+  @media #{$QUERY-sm} {
+    display: none;
+  }
 }
 
 .office {
@@ -73,7 +85,7 @@
 
 .city {
   font-size: 16px;
-  font-weight: 700;
+  font-weight: 500;
 }
 
 .email {
@@ -93,24 +105,31 @@
   @media screen and (max-width: 1000px) {
     width: 270px;
   }
+
+  @media #{$QUERY-sm} {
+    width: 100%;
+    display: block;
+  }
 }
 
 .menu {
   font-size: 18px;
   font-weight: 500;
-}
 
-.menuSocial {
-  font-size: 16px;
-
-  .menuItem {
-    margin-bottom: 27px;
+  @media #{$QUERY-sm} {
+    width: 100%;
+    font-size: 28px;
+    margin-bottom: 64px;
   }
 }
 
 .menuItem {
   margin-bottom: 24px;
 
+  @media #{$QUERY-sm} {
+    margin-bottom: 10px;
+  }
+
   a {
     &:hover {
       color: $color-pink;
@@ -118,9 +137,32 @@
   }
 }
 
+.menuSocial {
+  font-size: 16px;
+
+  @media #{$QUERY-sm} {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    gap: 24px;
+  }
+
+  .menuItem {
+    margin-bottom: 27px;
+
+    @media #{$QUERY-sm} {
+      margin-bottom: 15px;
+    }
+  }
+}
+
 .socialHeading {
-  font-weight: 700;
+  font-weight: 500;
   margin-bottom: 26px;
+
+  @media #{$QUERY-sm} {
+    display: none;
+  }
 }
 
 .bottom {
@@ -129,13 +171,30 @@
   font-size: 14px;
   text-transform: uppercase;
   padding-top: 32px;
+
+  @media #{$QUERY-sm} {
+    display: block;
+    padding-top: 13px;
+  }
 }
 
 .bottomLinks {
   display: flex;
+  justify-content: space-between;
   gap: 24px;
   text-transform: none;
   font-size: 16px;
+  width: 335px;
+  max-width: 100%;
+
+  @media screen and (max-width: 1000px) {
+    width: 270px;
+  }
+
+  @media #{$QUERY-sm} {
+    margin-top: 10px;
+    width: 100%;
+  }
 
   a {
     text-decoration: underline;

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

@@ -127,8 +127,7 @@
   height: 100%;
   max-height: 600px;
   margin: auto 0;
-  padding-left: 60px;
-  padding-right: 30px;
+  padding: 0 40px;
 }
 
 .menuList {