foundry-component-library 0.0.13 → 0.1.0

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: 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,47 @@ const Awards = ({
   }[];
   Image: NextImage;
 }) => {
+  const sectionRef = useRef(null);
+  const { handleMouseDown, handleMouseMove, handleMouseUp, dragStyle } =
+    useDrag(sectionRef);
+
+  console.log(awards);
+
   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={heading || "" + 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/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 {
@@ -93,24 +105,30 @@
   @media screen and (max-width: 1000px) {
     width: 270px;
   }
+
+  @media #{$QUERY-sm} {
+    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 +136,30 @@
   }
 }
 
+.menuSocial {
+  font-size: 16px;
+
+  @media #{$QUERY-sm} {
+    display: flex;
+    gap: 24px;
+  }
+
+  .menuItem {
+    margin-bottom: 27px;
+
+    @media #{$QUERY-sm} {
+      margin-bottom: 15px;
+    }
+  }
+}
+
 .socialHeading {
   font-weight: 700;
   margin-bottom: 26px;
+
+  @media #{$QUERY-sm} {
+    display: none;
+  }
 }
 
 .bottom {
@@ -129,6 +168,11 @@
   font-size: 14px;
   text-transform: uppercase;
   padding-top: 32px;
+
+  @media #{$QUERY-sm} {
+    display: block;
+    padding-top: 13px;
+  }
 }
 
 .bottomLinks {
@@ -137,6 +181,10 @@
   text-transform: none;
   font-size: 16px;
 
+  @media #{$QUERY-sm} {
+    margin-top: 10px;
+  }
+
   a {
     text-decoration: underline;
 

package/lib/components/Hero/index.tsx

@@ -8,6 +8,7 @@ const Hero = ({
   isFullWidth,
   isFirst,
   btn,
+  noMarginBottom,
   Link,
   Image,
 }: {
@@ -19,6 +20,7 @@ const Hero = ({
     text?: string;
     href?: string;
   };
+  noMarginBottom?: boolean;
   Link: NextLink;
   Image: NextImage;
 }) => {
@@ -27,7 +29,11 @@ const Hero = ({
 
   if (isFullWidth) {
     return (
-      <div className={`${styles.hero} ${styles.isFullWidth}`}>
+      <div
+        className={`${styles.hero} ${styles.isFullWidth} ${
+          noMarginBottom ? styles.noMarginBottom : ""
+        }`}
+      >
         <Image
           className={styles.background}
           src={image}
@@ -48,8 +54,12 @@ const Hero = ({
   }
 
   return (
-    <Container>
-      <div className={`${styles.hero} ${isFirst ? styles.first : ""}`}>
+    <Container noMobilePadding>
+      <div
+        className={`${styles.hero} ${isFirst ? styles.first : ""} ${
+          noMarginBottom ? styles.noMarginBottom : ""
+        }`}
+      >
         <Image
           className={styles.background}
           src={image}

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

@@ -10,8 +10,17 @@
   text-align: center;
   line-height: 1.1;
 
+  @media #{$QUERY-sm} {
+    min-height: 350px;
+    margin: 32px 0;
+  }
+
   &.first {
     margin-top: 0;
+
+    @media #{$QUERY-sm} {
+      min-height: 250px;
+    }
   }
 
   & * {
@@ -26,11 +35,37 @@
   &.isFullWidth {
     margin: 0;
     min-height: 720px;
+
+    @media #{$QUERY-sm} {
+      min-height: 350px;
+    }
+  }
+
+  &.noMarginBottom {
+    @media #{$QUERY-sm} {
+      margin-bottom: 0;
+    }
   }
 
   &.loading {
     background-color: $color-gray-light;
   }
+
+  &:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.1);
+    z-index: 1;
+  }
+}
+
+.texts {
+  position: relative;
+  z-index: 2;
 }
 
 .heading {
@@ -43,7 +78,7 @@
   }
 
   @media screen and (max-width: $screen-sm) {
-    font-size: 92px;
+    font-size: 54px;
   }
 }
 
@@ -57,6 +92,8 @@
 }
 
 .button {
+  display: inline-block;
+
   &:hover {
     background-color: $color-white;
   }

package/lib/components/HubsAccordion/index.tsx

@@ -18,7 +18,7 @@ const HubsAccordion = ({
 
   return (
     <div className={styles.hubsAccordion}>
-      <Container>
+      <Container noMobilePadding>
         <div className={styles.hubs}>
           {hubs.map((hub) => {
             return (