foundry-component-library 0.0.13 → 0.1.0

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

@@ -5,6 +5,12 @@
   font-family: $font-secondary;
   margin-bottom: 55px;
   color: $color-brown;
+
+  @media #{$QUERY-sm} {
+    font-size: 28px;
+    margin-bottom: 24px;
+    padding: 0 20px;
+  }
 }
 
 .filterBtns {
@@ -37,6 +43,11 @@
   flex-wrap: wrap;
   gap: 16px;
   margin-bottom: 64px;
+
+  @media #{$QUERY-sm} {
+    flex-wrap: nowrap;
+    margin-bottom: 32px;
+  }
 }
 
 .person {
@@ -44,9 +55,22 @@
   padding-bottom: 16px;
   text-align: center;
   color: $color-brown;
+  flex-shrink: 0;
 
   @media screen and (max-width: $screen-sm) {
-    width: 100%;
+    width: 245px;
+  }
+
+  &:first-child {
+    @media #{$QUERY-sm} {
+      margin-left: 20px;
+    }
+  }
+
+  &:last-child {
+    @media #{$QUERY-sm} {
+      margin-right: 20px;
+    }
   }
 }
 
@@ -57,8 +81,14 @@
   position: relative;
   margin-bottom: 16px;
 
+  @media #{$QUERY-sm} {
+    width: 100%;
+    height: 245px;
+  }
+
   img {
     object-fit: contain;
+    pointer-events: none;
   }
 
   &.loading {
@@ -71,9 +101,17 @@
   font-weight: 700;
   margin-bottom: 3px;
   white-space: pre-wrap;
+
+  @media #{$QUERY-sm} {
+    white-space: initial;
+  }
 }
 
 .position {
   font-size: 16px;
   white-space: pre-wrap;
+
+  @media #{$QUERY-sm} {
+    white-space: initial;
+  }
 }

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

@@ -37,6 +37,8 @@
   text-transform: uppercase;
   color: $color-blue;
   margin-bottom: 8px;
+  font-size: 16px;
+  font-weight: 500;
 
   &:last-child {
     margin-bottom: 0;
@@ -53,14 +55,18 @@
 
   &.small {
     font-size: 42px;
+
+    @media #{$QUERY-sm} {
+      font-size: 28px;
+    }
   }
 
   @media #{$QUERY-lg} {
     font-size: 42px;
   }
 
-  @media screen and (max-width: $screen-sm) {
-    font-size: 31px;
+  @media #{$QUERY-sm} {
+    font-size: 28px;
     white-space: normal;
   }
 
@@ -72,4 +78,8 @@
 .text {
   font-size: 18px;
   color: $color-brown;
+
+  @media #{$QUERY-sm} {
+    font-size: 16px;
+  }
 }

package/lib/components/_variables.scss

@@ -36,6 +36,11 @@ $font-secondary: "kareliaOuttakes", sans-serif;
   font-size: 22px;
   transition: 0.3s;
 
+  @media #{$QUERY-sm} {
+    font-size: 16px;
+    font-weight: 500;
+  }
+
   &:hover {
     background-color: transparent;
     color: $color-blue;

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

@@ -32,6 +32,10 @@
 .number {
   font-size: 64px;
   margin-bottom: 5px;
+
+  @media #{$QUERY-sm} {
+    font-size: 36px;
+  }
 }
 
 .text {

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

@@ -1,9 +1,11 @@
-import React from "react";
+"use client";
+import { useRef } from "react";
 import Container from "../../Container";
 import styles from "./styles.module.scss";
 import Arrow from "../../../assets/svg/arrow.svg";
 import { translate } from "../../../utils";
 import { Case, NextImage, NextLink } from "../../../types";
+import useDrag from "../../../hooks/useDrag";
 
 function Other({
   cases,
@@ -14,17 +16,30 @@ function Other({
   Link: NextLink;
   Image: NextImage;
 }) {
+  const sectionRef = useRef(null);
+  const { handleMouseDown, handleMouseMove, handleMouseUp, dragStyle } =
+    useDrag(sectionRef);
+
   if (!cases) return;
 
   return (
-    <Container>
+    <Container noMobilePadding>
       <div className={styles.other}>
-        <div className={styles.caption}>{translate("Case Studies")}</div>
-        <h3 className={styles.heading}>
-          {translate("Success stories.\nWith proven results.")}
-        </h3>
-
-        <div className={styles.cases}>
+        <div className={styles.top}>
+          <div className={styles.caption}>{translate("Case Studies")}</div>
+          <h3 className={styles.heading}>
+            {translate("Success stories.\nWith proven results.")}
+          </h3>
+        </div>
+        <div
+          ref={sectionRef}
+          className={styles.cases}
+          onMouseDown={handleMouseDown}
+          onMouseMove={handleMouseMove}
+          onMouseUp={handleMouseUp}
+          onMouseLeave={handleMouseUp}
+          style={dragStyle as React.CSSProperties}
+        >
           {cases.map((item) => (
             <div key={item.id} className={styles.case}>
               <Link href={item.uri}>

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

@@ -8,7 +8,13 @@
   }
 
   @media #{$QUERY-sm} {
-    padding: 60px 0;
+    padding: 32px 0;
+  }
+}
+
+.top {
+  @media #{$QUERY-sm} {
+    padding: 0 20px;
   }
 }
 
@@ -17,6 +23,10 @@
   color: $color-blue;
   text-transform: uppercase;
   margin-bottom: 5px;
+
+  @media #{$QUERY-sm} {
+    font-size: 16px;
+  }
 }
 
 .heading {
@@ -25,11 +35,20 @@
   font-weight: 400;
   white-space: pre-wrap;
   margin-bottom: 56px;
+
+  @media #{$QUERY-sm} {
+    font-size: 28px;
+    margin-bottom: 32px;
+  }
 }
 
 .buttonWrapper {
   text-align: center;
   padding: 32px;
+
+  @media #{$QUERY-sm} {
+    padding: 0;
+  }
 }
 
 .button {
@@ -38,11 +57,10 @@
 
 .cases {
   display: flex;
-  margin: 0 -10px;
+  gap: 20px;
 
   @media #{$QUERY-sm} {
-    display: block;
-    margin: 0;
+    padding: 0 20px;
   }
 }
 
@@ -51,7 +69,8 @@
   margin: 0 10px;
 
   @media #{$QUERY-sm} {
-    width: 100%;
+    flex-shrink: 0;
+    width: 253px;
     margin: 0;
     margin-bottom: 50px;
   }
@@ -78,6 +97,7 @@
 .image {
   width: 100%;
   height: 220px;
+  margin-bottom: 24px;
 
   img {
     width: 100%;
@@ -87,10 +107,6 @@
 }
 
 .texts {
-  border-left: solid 1px $color-gray-light;
-  border-right: solid 1px $color-gray-light;
-  border-bottom: solid 1px $color-gray-light;
-  padding: 24px 16px;
   flex-grow: 2;
   display: flex;
   flex-direction: column;
@@ -108,11 +124,12 @@
   justify-content: space-between;
   align-items: center;
   font-size: 20px;
-  font-weight: 700;
+  font-weight: 500;
   color: $color-blue;
   line-height: 1;
 
   path {
     stroke: $color-blue;
+    stroke-width: 2px;
   }
 }

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

@@ -2,4 +2,8 @@
 
 .button {
   @extend .button--pink;
+
+  @media #{$QUERY-sm} {
+    display: none;
+  }
 }

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

@@ -3,6 +3,10 @@
 .wrapper {
   padding: 64px 0;
   color: $color-brown;
+
+  @media #{$QUERY-sm} {
+    padding: 32px 0;
+  }
 }
 
 .link {
@@ -35,6 +39,10 @@
   color: $color-blue;
   text-transform: uppercase;
   margin-bottom: 5px;
+
+  @media #{$QUERY-sm} {
+    font-size: 16px;
+  }
 }
 
 .titleWrapper {
@@ -59,7 +67,7 @@
   font-weight: 400;
 
   @media #{$QUERY-sm} {
-    font-size: 42px;
+    font-size: 32px;
   }
 }
 
@@ -80,12 +88,11 @@
   gap: 0 26px;
 
   @media #{$QUERY-sm} {
-    display: block;
+    gap: 0 20px;
   }
 }
 
 .detail {
-  font-size: 14px;
   width: 200px;
   font-size: 18px;
 
@@ -95,7 +102,8 @@
 
   @media #{$QUERY-sm} {
     margin-bottom: 30px;
-    width: 100%;
+    width: calc(50% - 10px);
+    font-size: 14px;
   }
 }
 
@@ -103,27 +111,45 @@
   margin-bottom: 10px;
   font-size: 20px;
   text-transform: uppercase;
+
+  @media #{$QUERY-sm} {
+    font-size: 14px;
+    font-weight: 500;
+  }
 }
 
 .awardsWrapper {
   @media #{$QUERY-md} {
     margin-top: 30px;
   }
+
+  @media #{$QUERY-sm} {
+    margin-top: 0;
+  }
 }
 
 .awards {
   display: flex;
   flex-wrap: wrap;
   gap: 40px;
+
+  @media #{$QUERY-sm} {
+    gap: 16px;
+  }
 }
 
 .award {
   display: flex;
+
+  @media #{$QUERY-sm} {
+    max-width: 106px;
+  }
 }
 
 .awardTexts {
   width: auto;
-  max-width: 200px;
+  width: 200px;
+  max-width: 100%;
   flex-shrink: 0;
   margin-right: 20px;
 }
@@ -134,6 +160,7 @@
   flex-shrink: 0;
   position: relative;
   max-height: 100px;
+  max-width: 100%;
 
   img {
     width: 100%;
@@ -152,6 +179,10 @@
   width: 100%;
   height: 534px;
 
+  @media #{$QUERY-sm} {
+    height: 230px;
+  }
+
   img {
     object-fit: cover;
   }

package/lib/components/cases/Items/styles.module.scss

@@ -37,6 +37,7 @@
   @media #{$QUERY-sm} {
     width: 100%;
     max-width: 100%;
+    margin-bottom: 46px;
   }
 
   &:nth-child(4n),
@@ -92,10 +93,19 @@
   transition: color 0.3s;
   margin-bottom: 10px;
   font-weight: 500;
+
+  @media #{$QUERY-sm} {
+    font-size: 18px;
+    margin-bottom: 6px;
+  }
 }
 
 .caption {
   font-size: 22px;
+
+  @media #{$QUERY-sm} {
+    font-size: 16px;
+  }
 }
 
 .arrowWrapper {

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

@@ -7,15 +7,20 @@
 
 .filterBtns {
   display: flex;
-  gap: 24px;
+  gap: 12px;
   flex-wrap: wrap;
   margin-bottom: 40px;
   padding-bottom: 32px;
+  z-index: 7;
+
+  @media #{$QUERY-sm} {
+    margin-bottom: 0;
+  }
 }
 
 .dropdown {
   position: relative;
-  width: 150px;
+  width: 110px;
 
   &.active {
     z-index: 3;

package/lib/components/contact/Offices/index.tsx

@@ -1,5 +1,8 @@
+"use client";
+import { useRef } from "react";
 import styles from "./styles.module.scss";
 import { NextImage, OfficeDetails } from "../../../types";
+import useDrag from "../../../hooks/useDrag";
 
 function Offices({
   details,
@@ -28,10 +31,21 @@ function Offices({
     newyorkAddress,
     newyorkAddressLink,
   } = details;
+  const sectionRef = useRef(null);
+  const { handleMouseDown, handleMouseMove, handleMouseUp, dragStyle } =
+    useDrag(sectionRef);
 
   return (
     <section>
-      <div className={styles.wrapper}>
+      <div
+        ref={sectionRef}
+        className={styles.wrapper}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+        style={dragStyle as React.CSSProperties}
+      >
         <div className={styles.office}>
           <div className={styles.image}>
             {berlinImage && (

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

@@ -3,10 +3,6 @@
 .wrapper {
   display: flex;
   justify-content: space-between;
-
-  @media #{$QUERY-sm} {
-    display: block;
-  }
 }
 
 .office {
@@ -14,8 +10,20 @@
   margin: 0 8px;
 
   @media #{$QUERY-sm} {
-    width: 100%;
-    margin: 0 0 70px;
+    width: 286px;
+    flex-shrink: 0;
+  }
+
+  &:first-child {
+    @media #{$QUERY-sm} {
+      margin-left: 20px;
+    }
+  }
+
+  &:last-child {
+    @media #{$QUERY-sm} {
+      margin-right: 20px;
+    }
   }
 }
 
@@ -25,6 +33,12 @@
   position: relative;
   background: $color-gray;
   margin-bottom: 30px;
+  -webkit-user-drag: none;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  pointer-events: none;
 
   @media #{$QUERY-sm} {
     margin-bottom: 15px;

package/lib/queries/getHomePage.ts

@@ -53,6 +53,12 @@ type HomePage = {
         number?: string;
         text?: string;
       }>;
+      heroImage?: {
+        sourceUrl: string;
+      };
+      heroHeading?: string;
+      heroButtonText?: string;
+      heroButtonHref?: string;
       newsCaption?: string;
       newsHeading?: string;
       newsText?: string;
@@ -146,6 +152,12 @@ export default async function getHomePage({
             number
             text
           }
+          heroImage {
+            sourceUrl
+          }
+          heroHeading
+          heroButtonText
+          heroButtonHref
           newsCaption
           newsHeading
           newsText

package/lib/queries/getPeoplePage.ts

@@ -21,6 +21,10 @@ type PeoplePage = {
       quoteName?: string;
       quotePosition?: string;
       quoteText?: string;
+      heroImage?: {
+        sourceUrl: string;
+      };
+      heroHeading?: string;
     };
   };
   contactPage: {
@@ -31,18 +35,21 @@ type PeoplePage = {
       berlinText?: string;
       berlinEmail?: string;
       berlinPhone?: string;
+      berlinAddress?: string;
       zurichImage?: {
         sourceUrl: string;
       };
       zurichText?: string;
       zurichEmail?: string;
       zurichPhone?: string;
+      zurichAddress?: string;
       newyorkImage?: {
         sourceUrl: string;
       };
       newyorkText?: string;
       newyorkEmail?: string;
       newyorkPhone?: string;
+      newyorkAddress?: string;
     };
   };
 };
@@ -81,6 +88,10 @@ export default async function getContactPage({
           quoteName
           quotePosition
           quoteText
+          heroImage {
+            sourceUrl
+          }
+          heroHeading
         }
       }
       contactPage: page(id: "contact", idType: URI) {
@@ -91,18 +102,21 @@ export default async function getContactPage({
           berlinText
           berlinEmail
           berlinPhone
+          berlinAddress
           zurichImage {
             sourceUrl
           }
           zurichText
           zurichEmail
           zurichPhone
+          zurichAddress
           newyorkImage {
             sourceUrl
           }
           newyorkText
           newyorkEmail
           newyorkPhone
+          newyorkAddress
         }
       }
     }

package/package.json

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