foundry-component-library 0.0.13 → 0.1.1

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

@@ -4,6 +4,10 @@
   padding: 64px 0;
   background-color: $color-brown;
   color: $color-pink;
+
+  @media #{$QUERY-sm} {
+    padding: 32px 0;
+  }
 }
 
 .logo {
@@ -45,12 +49,20 @@
   margin-bottom: 5px;
   width: 211px;
   max-width: 100%;
+
+  @media #{$QUERY-sm} {
+    font-size: 22px;
+  }
 }
 
 .position {
   font-size: 18px;
   width: 211px;
   max-width: 100%;
+
+  @media #{$QUERY-sm} {
+    font-size: 14px;
+  }
 }
 
 .text {
@@ -61,6 +73,10 @@
   @media screen and (max-width: $screen-md) {
     font-size: 25px;
   }
+
+  @media #{$QUERY-sm} {
+    font-size: 16px;
+  }
 }
 
 .indicators {

package/lib/components/ServiceHubsTeaser/index.tsx

@@ -36,7 +36,7 @@ const ServiceHubsTeaser = ({
   return (
     <div className={styles.benefits}>
       <TextSection caption={caption} heading={heading} text={text} isSmall />
-      <Container>
+      <Container noMobilePadding>
         <div
           ref={sectionRef}
           className={styles.tiles}

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

@@ -1,12 +1,13 @@
 @use "../variables" as *;
 
-.benefits {
-}
-
 .tiles {
   display: flex;
   gap: 16px;
   padding-bottom: 64px;
+
+  @media #{$QUERY-sm} {
+    padding-bottom: 32px;
+  }
 }
 
 .tile {
@@ -28,10 +29,22 @@
   font-family: $font-secondary;
 
   @media screen and (max-width: $screen-sm) {
-    max-width: 90%;
+    max-width: 80%;
     height: 300px;
   }
 
+  &:first-child {
+    @media #{$QUERY-sm} {
+      margin-left: 20px;
+    }
+  }
+
+  &:last-child {
+    @media #{$QUERY-sm} {
+      margin-right: 20px;
+    }
+  }
+
   &.yellow {
     background-color: $color-yellow;
     color: $color-blue;

package/lib/components/TeamBenefits/index.tsx

@@ -14,7 +14,7 @@ const TeamBenefits = ({ tiles }: { tiles: string[] }) => {
   return (
     <div className={styles.benefits}>
       <TextSection caption="join the team" heading="Why Foundry?" />
-      <Container>
+      <Container noMobilePadding>
         <div
           ref={sectionRef}
           className={styles.tiles}

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

@@ -3,6 +3,10 @@
 .benefits {
   background-color: $color-gray-light;
   padding-bottom: 128px;
+
+  @media #{$QUERY-sm} {
+    padding-bottom: 32px;
+  }
 }
 
 .tiles {
@@ -32,6 +36,10 @@
     max-width: 90%;
   }
 
+  @media #{$QUERY-sm} {
+    width: 275px;
+  }
+
   &.yellow {
     background-color: $color-yellow;
     color: $color-blue;
@@ -46,6 +54,18 @@
     background-color: $color-blue;
     color: $color-white;
   }
+
+  &:first-child {
+    @media #{$QUERY-sm} {
+      margin-left: 20px;
+    }
+  }
+
+  &:last-child {
+    @media #{$QUERY-sm} {
+      margin-right: 20px;
+    }
+  }
 }
 
 .text {

package/lib/components/TeamPhotos/index.tsx

@@ -1,8 +1,11 @@
+"use client";
+import { useRef } from "react";
 import { translate } from "../../utils";
 import Container from "../Container";
 import styles from "./styles.module.scss";
 import Item from "./Item";
 import { NextImage, Person } from "../../types";
+import useDrag from "../../hooks/useDrag";
 
 const TheamPhotos = ({
   people,
@@ -11,10 +14,22 @@ const TheamPhotos = ({
   people: Person[];
   Image: NextImage;
 }) => {
+  const sectionRef = useRef(null);
+  const { handleMouseDown, handleMouseMove, handleMouseUp, dragStyle } =
+    useDrag(sectionRef);
+
   return (
-    <Container>
+    <Container noMobilePadding>
       <div className={styles.heading}>{translate("Our Lovely Team")}</div>
-      <div className={styles.people}>
+      <div
+        ref={sectionRef}
+        className={styles.people}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+        style={dragStyle as React.CSSProperties}
+      >
         {people.map((person) => {
           return <Item key={person.name} person={person} Image={Image} />;
         })}

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 {
@@ -68,12 +98,20 @@
 
 .name {
   font-size: 18px;
-  font-weight: 700;
+  font-weight: 500;
   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 && (