foundry-component-library 0.1.8 → 0.1.10

package/lib/assets/svg/footer-logo.svg

@@ -1,4 +1,4 @@
-<svg width="415" height="110" viewBox="0 0 415 110" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 415 110" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M51.3664 80.0738C52.3787 80.0738 53.2626 80.4516 54.0181 81.2146C54.7735 81.9701 55.1588 82.8539 55.1588 83.8663C55.1588 84.8786 54.7735 85.7624 54.0181 86.5179C53.2551 87.2809 52.3787 87.6587 51.3664 87.6587H4.7924C3.7121 87.6587 2.80555 87.2809 2.08031 86.5179C1.35507 85.7624 1 84.8786 1 83.8663C1 82.8539 1.36262 81.9701 2.08031 81.2146C2.79799 80.4516 3.70454 80.0738 4.7924 80.0738H24.2908V30.2438H4.7924C3.7121 30.2438 2.80555 29.8812 2.08031 29.1635C1.35507 28.4458 1 27.5393 1 26.4514C1 25.4466 1.36262 24.5552 2.08031 23.7997C2.79799 23.0367 3.70454 22.659 4.7924 22.659H24.2908V4.78485C24.2908 3.78009 24.6534 2.88865 25.3711 2.13319C26.0888 1.37773 26.9953 1 28.0832 1H51.374C52.3863 1 53.2702 1.37773 54.0256 2.13319C54.7811 2.8962 55.1664 3.78009 55.1664 4.78485C55.1664 5.86516 54.7811 6.77171 54.0256 7.49695C53.2626 8.22219 52.3863 8.57726 51.374 8.57726H31.8756V22.659H51.374C52.3863 22.659 53.2702 23.0367 54.0256 23.7997C54.7811 24.5552 55.1664 25.4391 55.1664 26.4514C55.1664 27.5317 54.7811 28.4383 54.0256 29.1635C53.2626 29.8887 52.3863 30.2438 51.374 30.2438H31.8756V80.0738H51.374H51.3664Z" fill="white"/>
 <path d="M66.5364 87.6601C65.4561 87.6601 64.5495 87.2823 63.8243 86.5193C63.099 85.7639 62.744 84.88 62.744 83.8677V26.4528C62.744 25.448 63.1066 24.5566 63.8243 23.8012C64.542 23.0381 65.4485 22.6604 66.5364 22.6604H113.11C114.123 22.6604 115.007 23.0381 115.762 23.8012C116.518 24.5566 116.903 25.4405 116.903 26.4528V83.8677C116.903 84.88 116.518 85.7639 115.762 86.5193C114.999 87.2823 114.123 87.6601 113.11 87.6601H66.5364ZM70.3288 60.5769C70.3288 64.12 71.1976 67.3684 72.9276 70.3298C74.6576 73.2912 77.007 75.6558 79.9684 77.4236C82.9298 79.1989 86.2161 80.0752 89.8272 80.0752C93.4383 80.0752 96.7094 79.1914 99.633 77.4236C102.557 75.6558 104.899 73.2912 106.674 70.3298C108.442 67.3684 109.326 64.12 109.326 60.5769V49.7436C109.326 46.1325 108.442 42.8614 106.674 39.9377C104.899 37.0141 102.557 34.6722 99.633 32.8969C96.7094 31.1291 93.4383 30.2452 89.8272 30.2452C86.2161 30.2452 82.9298 31.1291 79.9684 32.8969C77.007 34.6722 74.6576 37.0141 72.9276 39.9377C71.1976 42.8614 70.3288 46.1325 70.3288 49.7436V60.5769Z" fill="white"/>
 <path d="M151.562 87.6601C146.576 87.6601 142.044 86.4362 137.964 83.981C133.885 81.5257 130.613 78.2546 128.158 74.1751C125.703 70.0956 124.479 65.5629 124.479 60.5769V26.4528C124.479 25.448 124.857 24.5566 125.62 23.8012C126.375 23.0381 127.259 22.6604 128.271 22.6604C129.352 22.6604 130.258 23.0381 130.976 23.8012C131.701 24.5566 132.056 25.4405 132.056 26.4528V60.5769C132.056 64.12 132.94 67.3684 134.708 70.3298C136.476 73.2912 138.84 75.6558 141.802 77.4236C144.763 79.1989 148.012 80.0752 151.555 80.0752C155.166 80.0752 158.445 79.1914 161.413 77.4236C164.375 75.6558 166.717 73.2912 168.454 70.3298C170.184 67.3684 171.053 64.12 171.053 60.5769V26.4528C171.053 25.448 171.438 24.5566 172.194 23.8012C172.957 23.0381 173.833 22.6604 174.846 22.6604C175.926 22.6604 176.832 23.0381 177.558 23.8012C178.275 24.5566 178.638 25.4405 178.638 26.4528V60.5769C178.638 65.5629 177.429 70.0956 175.004 74.1751C172.587 78.2546 169.316 81.5257 165.198 83.981C161.081 86.4362 156.533 87.6601 151.555 87.6601H151.562Z" fill="white"/>

package/lib/components/CaseStudyTeaser/index.tsx

@@ -1,10 +1,10 @@
 "use client";
-import { useEffect, useRef, useState } from "react";
+import { useRef } from "react";
 import { translate } from "../../utils";
 import styles from "./styles.module.scss";
 import Container from "../Container";
 import { Case, NextImage } from "../../types";
-import useDrag from "../../hooks/useDrag";
+import { motion } from "framer-motion";
 import WavyText from "../TextAnimations/WavyText";
 
 const CaseStudyTeaser = ({
@@ -17,16 +17,8 @@ const CaseStudyTeaser = ({
   Image: NextImage;
 }) => {
   const headingRef = useRef<HTMLDivElement>(null);
-  const casesRef = useRef<HTMLDivElement>(null);
-  const [padding, setPadding] = useState(0);
-  const { handleMouseDown, handleMouseMove, handleMouseUp, dragStyle } =
-    useDrag(casesRef);
-
-  useEffect(() => {
-    if (headingRef.current) {
-      setPadding(headingRef.current.offsetLeft);
-    }
-  }, [headingRef]);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const dragStarted = useRef(false);
 
   if (!cases) return;
 
@@ -39,40 +31,50 @@ const CaseStudyTeaser = ({
           </WavyText>
         </div>
       </Container>
-
-      <div
-        className={styles.cases}
-        ref={casesRef}
-        onMouseDown={handleMouseDown}
-        onMouseMove={handleMouseMove}
-        onMouseUp={handleMouseUp}
-        onMouseLeave={handleMouseUp}
-        style={{
-          ...(dragStyle as React.CSSProperties),
-          paddingLeft: padding,
-          paddingRight: padding,
-        }}
-      >
-        {cases.map((el) => {
-          return (
-            <div key={el.id} className={styles.case}>
-              <Image
-                className={styles.image}
-                src={el.case?.mainImage?.sourceUrl || ""}
-                alt={el.title}
-                fill
-              />
-              <div className={styles.texts}>
-                <div className={styles.caption}>{el.case?.caption}</div>
-                <div className={styles.title}>{el.title}</div>
-                <a href={el.uri} className={styles.button}>
-                  {translate("See More")}
-                </a>
-              </div>
-            </div>
-          );
-        })}
-      </div>
+      <Container>
+        <div ref={wrapperRef} style={{ width: "100%" }}>
+          <motion.div
+            className={styles.cases}
+            drag="x"
+            dragConstraints={wrapperRef}
+            onDragStart={() => (dragStarted.current = true)}
+            onDragEnd={() => {
+              setTimeout(() => {
+                dragStarted.current = false;
+              }, 0);
+            }}
+          >
+            {cases.map((el) => {
+              return (
+                <div key={el.id} className={styles.case}>
+                  <Image
+                    className={styles.image}
+                    src={el.case?.mainImage?.sourceUrl || ""}
+                    alt={el.title}
+                    fill
+                  />
+                  <div className={styles.texts}>
+                    <div className={styles.caption}>{el.case?.caption}</div>
+                    <div className={styles.title}>{el.title}</div>
+                    <a
+                      href={el.uri}
+                      className={styles.button}
+                      onClick={(e) => {
+                        if (dragStarted.current) {
+                          e.preventDefault();
+                          e.stopPropagation();
+                        }
+                      }}
+                    >
+                      {translate("See More")}
+                    </a>
+                  </div>
+                </div>
+              );
+            })}
+          </motion.div>
+        </div>
+      </Container>
     </div>
   );
 };

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

@@ -2,6 +2,7 @@
 
 .caseStudyTeaser {
   padding: 64px 0;
+  overflow: hidden;
 
   @media #{$QUERY-sm} {
     padding: 32px 0 64px;
@@ -21,8 +22,13 @@
 }
 
 .cases {
-  display: flex;
+  display: inline-flex;
   gap: 16px;
+  padding-right: 140px;
+
+  @media screen and (max-width: $screen-sm) {
+    padding-right: 0;
+  }
 }
 
 .case {

package/lib/components/ContactTeaser/index.tsx

@@ -11,6 +11,7 @@ const ContactTeaser = ({
   theme = "yellow",
   buttonText = "Contact Us",
   buttonHref = "/contact",
+  alternate,
   Link,
 }: {
   heading: string;
@@ -18,6 +19,7 @@ const ContactTeaser = ({
   theme?: "yellow" | "pink";
   buttonText?: string;
   buttonHref?: string;
+  alternate?: boolean;
   Link: NextLink;
 }) => {
   return (
@@ -28,6 +30,7 @@ const ContactTeaser = ({
             <WavyText
               className={`${styles.heading} ${!text ? styles.margin : ""}`}
               text={heading}
+              alternate={alternate}
             />
           )}
           {text && <FadeInText className={styles.text} text={text} />}

package/lib/components/Hero/index.tsx

@@ -1,6 +1,9 @@
+"use client";
+import { useRef } from "react";
 import styles from "./styles.module.scss";
 import Container from "../Container";
 import { NextImage, NextLink } from "../../types";
+import { useOnScreen } from "../../hooks/useOnScreen";
 
 const Hero = ({
   image,
@@ -24,17 +27,21 @@ const Hero = ({
   Link: NextLink;
   Image: NextImage;
 }) => {
+  const sectionRef = useRef(null);
+  const onScreen = useOnScreen(sectionRef, "-50%");
+
   if (!image) return;
 
   if (isFullWidth) {
     return (
       <div
+        ref={sectionRef}
         className={`${styles.hero} ${styles.isFullWidth} ${
           noMarginBottom ? styles.noMarginBottom : ""
         }`}
       >
         <Image
-          className={styles.background}
+          className={`${styles.background} ${onScreen ? styles.active : ""}`}
           src={image}
           width="1280"
           height="600"
@@ -60,7 +67,7 @@ const Hero = ({
         }`}
       >
         <Image
-          className={styles.background}
+          className={`${styles.background} ${onScreen ? styles.active : ""}`}
           src={image}
           width="1280"
           height="600"

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

@@ -9,6 +9,7 @@
   margin: 64px 0;
   text-align: center;
   line-height: 1.1;
+  overflow: hidden;
 
   @media #{$QUERY-sm} {
     min-height: 350px;
@@ -28,10 +29,6 @@
     z-index: 1;
   }
 
-  img {
-    object-fit: cover;
-  }
-
   &.isFullWidth {
     margin: 0;
     min-height: 720px;
@@ -90,6 +87,12 @@
   width: 100%;
   height: 100%;
   z-index: 0;
+  object-fit: cover;
+  transition: transform 0.3s;
+
+  &.active {
+    transform: scale(1.1);
+  }
 }
 
 .button {

package/lib/components/LogoSection/Logos.tsx

@@ -41,6 +41,11 @@ const Logos = ({
   });
 
   useEffect(() => {
+    if (withoutFilters) {
+      setBrandsToShow(brands);
+      return;
+    }
+
     setBrandsToShow([]);
 
     setTimeout(() => {
@@ -114,7 +119,7 @@ const Logos = ({
                 initial={{ opacity: 0, y: -10 }}
                 animate={{ opacity: 1, y: 0 }}
                 exit={{ opacity: 0, y: 10 }}
-                transition={{ duration: 0.4 }}
+                transition={{ duration: 0.45 }}
                 layout
               >
                 <Image

package/lib/components/OfficesTeaser/index.tsx

@@ -22,6 +22,7 @@ const OfficesTeaser = ({
           <WavyText
             className={styles.heading}
             text={`We operate all\nover the world`}
+            alternate
           />
         </div>
 

package/lib/components/TextAnimations/WavyText/index.tsx

@@ -6,12 +6,14 @@ interface Props extends HTMLMotionProps<"div"> {
   text: string;
   delay?: number;
   duration?: number;
+  alternate?: boolean;
 }
 
 const WavyText: FC<Props> = ({
   text,
   delay = 0,
   duration = 0.05,
+  alternate = false,
   ...props
 }: Props) => {
   const container: Variants = {
@@ -36,7 +38,7 @@ const WavyText: FC<Props> = ({
     },
     hidden: {
       opacity: 0,
-      y: 20,
+      y: alternate ? -15 : 15,
       transition: {
         type: "spring",
         damping: 12,

package/lib/components/VideoTeaser/index.tsx

@@ -5,13 +5,49 @@ import styles from "./styles.module.scss";
 import Mute from "../../assets/svg/mute.svg";
 import Muted from "../../assets/svg/muted.svg";
 import PlayButton from "../../assets/svg/play-button.svg";
-import Mask from "./Mask";
+import {
+  motion,
+  useScroll,
+  useMotionValueEvent,
+  useTransform,
+} from "motion/react";
+import Logo from "../../assets/svg/footer-logo.svg";
 
 function VideoTeaser({ url }: { url: string }) {
   const [playing, setPlaying] = useState(false);
   const [hasWindow, setHasWindow] = useState(false);
   const [isMuted, setIsMuted] = useState(true);
   const [isAnimated, setIsAnimated] = useState(false);
+  const { scrollY } = useScroll();
+  const [path, setPath] = useState(
+    `polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)`
+  );
+
+  const progress = useTransform(scrollY, [100, 300], [0, 1]);
+
+  const lerp = (a: number, b: number, t: number) => {
+    return a + (b - a) * t;
+  };
+
+  useMotionValueEvent(scrollY, "change", () => {
+    setPath(
+      `polygon(
+      ${lerp(50, 0, progress.get())}% 
+      ${lerp(50, 0, progress.get())}%, 
+      ${lerp(50, 100, progress.get())}% 
+      ${lerp(50, 0, progress.get())}%, 
+      ${lerp(50, 100, progress.get())}% 
+      ${lerp(50, 100, progress.get())}%, 
+      ${lerp(50, 0, progress.get())}% 
+      ${lerp(50, 100, progress.get())}%)`
+    );
+
+    if (progress.get() >= 1) {
+      setIsAnimated(true);
+    } else {
+      setIsAnimated(false);
+    }
+  });
 
   useEffect(() => {
     if (typeof window !== "undefined") {
@@ -26,35 +62,52 @@ function VideoTeaser({ url }: { url: string }) {
   if (!url) return;
 
   return (
-    <div
-      // eslint-disable-next-line no-extra-boolean-cast
-      className={`${styles.wrapper} ${!!url ? styles.playCursor : ""} ${
-        playing ? styles.playing : ""
-      }`}
-    >
-      <Mask isAnimated={isAnimated} setIsAnimated={setIsAnimated} />
-      <button className={styles.btnMute} onClick={() => setIsMuted(!isMuted)}>
-        {isMuted ? <Muted /> : <Mute />}
-      </button>
-      <div className={styles.video} onClick={handleClick}>
-        <div
-          className={`${styles.playButton} ${playing ? styles.playing : ""} ${
-            isAnimated ? styles.isAnimated : ""
+    <>
+      <div style={{ height: "1000px" }}>
+        <div className={styles.logoWrapper}>
+          <Logo />
+        </div>
+        <motion.div
+          // eslint-disable-next-line no-extra-boolean-cast
+          className={`${styles.wrapper} ${!!url ? styles.playCursor : ""} ${
+            playing ? styles.playing : ""
           }`}
+          style={{
+            clipPath: path,
+          }}
         >
-          <PlayButton />
-        </div>
-        {hasWindow && (
-          <ReactPlayer
-            playing={playing}
-            url={url}
-            width="100%"
-            height="100%"
-            muted={isMuted}
-          />
-        )}
+          {/* <Mask isAnimated={isAnimated} setIsAnimated={setIsAnimated} /> */}
+
+          <button
+            className={styles.btnMute}
+            onClick={() => setIsMuted(!isMuted)}
+          >
+            {isMuted ? <Muted /> : <Mute />}
+          </button>
+          <div className={styles.video} onClick={handleClick}>
+            <div
+              className={`${styles.playButton} ${
+                playing ? styles.playing : ""
+              } ${isAnimated ? styles.isAnimated : ""}`}
+            >
+              <PlayButton />
+            </div>
+            {hasWindow && (
+              <ReactPlayer
+                playing={playing}
+                url={url}
+                width="100%"
+                height="100%"
+                muted={isMuted}
+                config={{
+                  file: { attributes: { poster: "/video-poster.jpg" } },
+                }}
+              />
+            )}
+          </div>
+        </motion.div>
       </div>
-    </div>
+    </>
   );
 }
 

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

@@ -11,8 +11,10 @@
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  position: relative;
+  position: sticky;
+  top: 79px;
   overflow: hidden;
+  clip-path: polygon(10% 5%, 90% 5%, 90% 95%, 10% 95%);
 
   @media #{$QUERY-md} {
     padding: 100px 50px;
@@ -29,6 +31,27 @@
   }
 }
 
+.logoWrapper {
+  width: 100%;
+  height: calc(100vh - 79px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  svg {
+    width: 830px;
+    // height: 220px;
+    max-width: 90%;
+  }
+
+  path {
+    fill: $color-blue;
+  }
+}
+
 .video {
   width: 100%;
   height: 100%;

package/package.json

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