foundry-component-library 0.2.4 → 0.2.6

package/lib/components/QuoteSection/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import styles from "./styles.module.scss";
 import Container from "../Container";
 
@@ -13,6 +13,20 @@ const QuoteSection = ({
   }[];
 }) => {
   const [active, setActive] = useState(0);
+  const [paused, setPaused] = useState(false);
+
+  useEffect(() => {
+    if (!items || items.length <= 1) return;
+
+    const interval = setInterval(() => {
+      if (!paused) {
+        setActive((prev) => (prev + 1) % items.length);
+      }
+    }, 3000);
+
+    return () => clearInterval(interval);
+  }, [items, paused]);
+
   if (!items || (items.length === 1 && !items[0].text)) return;
 
   return (
@@ -24,18 +38,24 @@ const QuoteSection = ({
               key={item?.name || i}
               className={`${styles.content} ${
                 active === i ? styles.active : ""
-              }`}
-            >
+              }`}>
               <div className={styles.person}>
-                <div className={styles.name}>{item.name}</div>
-                <div className={styles.position}>{item.position}</div>
+                <div>
+                  <div className={styles.name}>{item.name}</div>
+                  <div className={styles.position}>{item.position}</div>
+                </div>
+              </div>
+              <div
+                className={styles.text}
+                onMouseEnter={() => setPaused(true)}
+                onMouseLeave={() => setPaused(false)}>
+                {item.text}
               </div>
-              <div className={styles.text}>{item.text}</div>
             </div>
           );
         })}
         {items.length > 1 && (
-          <div className={styles.indicators}>
+          <div className={`${styles.indicators} ${styles.desktop}}`}>
             {items.map((el, i) => {
               return (
                 <div

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

@@ -63,6 +63,7 @@
 
   @media #{$QUERY-sm} {
     font-size: 14px;
+    min-height: 40px;
   }
 }
 
@@ -71,6 +72,7 @@
   width: 800px;
   max-width: 100%;
   font-family: $font-secondary;
+  min-height: 300px;
 
   @media screen and (max-width: $screen-md) {
     font-size: 25px;
@@ -78,15 +80,19 @@
 
   @media #{$QUERY-sm} {
     font-size: 16px;
+    min-height: 200px;
   }
 }
 
 .indicators {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   gap: 16px;
-  padding-top: 64px;
+
+  @media #{$QUERY-sm} {
+    padding-top: 30px;
+  }
 }
 
 .indicator {
@@ -96,6 +102,11 @@
   border-radius: 50%;
   cursor: pointer;
 
+  @media #{$QUERY-sm} {
+    width: 11px;
+    height: 11px;
+  }
+
   &.active {
     background-color: $color-pink;
   }

package/lib/components/ServiceHubsTeaser/Tile.tsx

@@ -2,14 +2,12 @@ import { MouseEventHandler } from "react";
 import styles from "./styles.module.scss";
 import Plus from "../../assets/svg/plus.svg";
 import { NextLink } from "../../types";
-import { motion } from "framer-motion";
 import Arrow from "../../assets/svg/arrow.svg";
 
 const Tile = ({
   text,
   background,
   href,
-  i,
   onClick,
   Link,
   hoverText,
@@ -23,28 +21,12 @@ const Tile = ({
   hoverText: string;
 }) => {
   return (
-    <motion.div
-      className={styles.tileWrapper}
-      whileHover={{
-        scale: 1.08,
-        rotate: i % 2 === 0 ? -3 : 3,
-        boxShadow: "0px 10px 20px rgba(0,0,0,0.2)",
-        y: [0, Math.random() * 12 - 6, 0],
-        transition: {
-          y: {
-            duration: 2,
-            repeat: Infinity,
-            ease: "easeInOut",
-          },
-        },
-      }}
-    >
+    <div className={styles.tileWrapper}>
       <Link
         href={href}
         onClick={onClick}
         draggable="false"
-        className={`${styles.tile} ${styles[background]}`}
-      >
+        className={`${styles.tile} ${styles[background]}`}>
         <div className={styles.face}>
           <div className={styles.text}>{text}</div>
           <div>
@@ -58,7 +40,7 @@ const Tile = ({
           </div>
         </div>
       </Link>
-    </motion.div>
+    </div>
   );
 };
 

package/lib/components/ServiceHubsTeaser/index.tsx

@@ -1,11 +1,13 @@
 "use client";
-import { useRef } from "react";
+import { useRef, useEffect } from "react";
 import Container from "../Container";
 import styles from "./styles.module.scss";
 import TextSection from "../TextSection";
 import Tile from "./Tile";
 import { NextLink } from "../../types";
-import { motion } from "framer-motion";
+import { motion, useScroll, useMotionValue, useSpring } from "framer-motion";
+
+const SCROLL_DISTANCE = -500;
 
 const ServiceHubsTeaser = ({
   caption,
@@ -27,9 +29,32 @@ const ServiceHubsTeaser = ({
   }[];
   Link: NextLink;
 }) => {
-  const wrapperRef = useRef(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
   const dragStarted = useRef(false);
 
+  const x = useMotionValue(0);
+
+  const smoothX = useSpring(x, {
+    stiffness: 120,
+    damping: 20,
+    mass: 0.1,
+  });
+
+  const { scrollYProgress } = useScroll({
+    target: wrapperRef,
+    offset: ["start end", "end start"],
+  });
+
+  useEffect(() => {
+    const unsubscribe = scrollYProgress.on("change", (latest) => {
+      const scrollOffset = latest * SCROLL_DISTANCE;
+      if (!dragStarted.current) {
+        x.set(scrollOffset);
+      }
+    });
+    return () => unsubscribe();
+  }, [scrollYProgress, x]);
+
   return (
     <div className={styles.benefits}>
       <TextSection caption={caption} heading={heading} text={text} isSmall />
@@ -39,18 +64,22 @@ const ServiceHubsTeaser = ({
             className={styles.tiles}
             drag="x"
             dragConstraints={wrapperRef}
+            style={{ x: smoothX }}
+            dragMomentum={true}
             onDragStart={() => (dragStarted.current = true)}
             onDragEnd={() => {
               setTimeout(() => {
                 dragStarted.current = false;
               }, 0);
-            }}
-          >
+            }}>
             {tiles.map((tile, i) => {
-              let background: "pink" | "yellow" | "brown" | "blue" = "pink";
-              if (i % 4 === 1) background = "yellow";
-              if (i % 4 === 2) background = "brown";
-              if (i % 4 === 3) background = "blue";
+              const colors: Array<"pink" | "yellow" | "brown" | "blue"> = [
+                "pink",
+                "yellow",
+                "brown",
+                "blue",
+              ];
+              const background = colors[i % colors.length];
 
               return (
                 <Tile

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

@@ -7,6 +7,7 @@
 .wrapper {
   width: 100%;
   // overflow-x: scroll;
+  user-select: none;
 }
 
 .tiles {
@@ -65,6 +66,10 @@
   height: 100%;
   font-family: $font-secondary;
 
+  path {
+    stroke: $color-brown;
+  }
+
   &.yellow {
     background-color: $color-yellow;
     color: $color-blue;
@@ -113,6 +118,7 @@
 
 .face {
   display: block;
+  font-size: 42px;
 }
 
 .tails {

package/lib/components/TeamPhotos/Item.tsx

@@ -11,9 +11,9 @@ const Item = ({ person, Image }: { person: Person; Image: NextImage }) => {
     <div
       className={styles.person}
       onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
+      onMouseLeave={() => setIsHovered(false)}>
       <div className={styles.image}>
+        {video && <div>{video.sourceUrl}</div>}
         {image && (
           <Image
             src={isHovered && video ? video.sourceUrl : image.sourceUrl}

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

@@ -87,7 +87,8 @@
   }
 
   img {
-    object-fit: contain;
+    object-fit: cover;
+    object-position: center;
     pointer-events: none;
   }
 

package/lib/components/TextSection/index.tsx

@@ -1,9 +1,6 @@
 "use client";
 import styles from "./styles.module.scss";
 import Container from "../Container";
-import PopInText from "../TextAnimations/PopInText";
-import WavyText from "../TextAnimations/WavyText";
-import FadeInText from "../TextAnimations/FadeInText";
 
 const TextSection = ({
   caption,
@@ -28,15 +25,14 @@ const TextSection = ({
   return (
     <Container>
       <div className={`${styles.section} ${alignStyle} ${themeStyle}`}>
-        {caption && <PopInText className={styles.caption} text={caption} />}
+        {caption && <div className={styles.caption}>{caption}</div>}
         {heading && (
-          <WavyText
-            className={`${styles.heading} ${isSmall ? styles.small : ""}`}
-            text={heading}
-          />
+          <div className={`${styles.heading} ${isSmall ? styles.small : ""}`}>
+            {heading}
+          </div>
         )}
         {subheading && <div className={styles.subheading}>{subheading}</div>}
-        {text && <FadeInText className={styles.text} text={text} />}
+        {text && <div className={styles.text}>{text}</div>}
       </div>
     </Container>
   );

package/lib/components/Tiles/Tile.tsx

@@ -1,12 +1,10 @@
 import styles from "./styles.module.scss";
 import Plus from "../../assets/svg/plus.svg";
-import { motion } from "framer-motion";
 
 const Tile = ({
   text,
   background,
   hoverText,
-  i,
 }: {
   text: string;
   hoverText: string;
@@ -14,22 +12,7 @@ const Tile = ({
   i: number;
 }) => {
   return (
-    <motion.div
-      className={`${styles.tile} ${styles[background]}`}
-      whileHover={{
-        scale: 1.08,
-        rotate: i % 2 === 0 ? -3 : 3,
-        boxShadow: "0px 10px 20px rgba(0,0,0,0.2)",
-        y: [0, Math.random() * 12 - 6, 0],
-        transition: {
-          y: {
-            duration: 2,
-            repeat: Infinity,
-            ease: "easeInOut",
-          },
-        },
-      }}
-    >
+    <div className={`${styles.tile} ${styles[background]}`}>
       <div className={styles.face}>
         <div className={styles.text}>{text}</div>
         <div>
@@ -39,7 +22,7 @@ const Tile = ({
       <div className={styles.tails}>
         <div className={styles.tailsText}>{hoverText}</div>
       </div>
-    </motion.div>
+    </div>
   );
 };
 

package/lib/components/VideoTeaser/index.tsx

@@ -5,107 +5,55 @@ 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 {
-  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 [playing, setPlaying] = useState(true);
   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 [hasWindow, setHasWindow] = useState(false);
 
-  const lerp = (a: number, b: number, t: number) => {
-    return a + (b - a) * t;
+  const handleClick = () => {
+    setPlaying(!playing);
   };
 
-  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") {
       setHasWindow(true);
     }
   }, []);
 
-  const handleClick = () => {
-    setPlaying(!playing);
-  };
-
   if (!url) return;
 
   return (
     <>
-      <div style={{ height: "1100px" }}>
-        <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,
-          }}
-        >
-          {/* <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 className={styles.logoWrapper}>
+        <Logo />
+      </div>
+      <div
+        className={`${styles.wrapper} ${url ? styles.playCursor : ""} ${
+          playing ? styles.playing : ""
+        }`}>
+        <button className={styles.btnMute} onClick={() => setIsMuted(!isMuted)}>
+          {isMuted ? <Muted /> : <Mute />}
+        </button>
+        <div className={styles.video} onClick={handleClick}>
+          <div
+            className={`${styles.playButton} ${playing ? styles.playing : ""}`}>
+            <PlayButton />
           </div>
-        </motion.div>
+          {hasWindow && (
+            <ReactPlayer
+              playing={playing}
+              url={url}
+              width="100%"
+              height="100%"
+              muted={isMuted}
+              config={{
+                file: { attributes: { poster: "/video-poster.jpg" } },
+              }}
+            />
+          )}
+        </div>
       </div>
     </>
   );

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

@@ -2,19 +2,16 @@
 
 .wrapper {
   background-color: $color-white;
-  background-size: cover;
-  background-position: center;
   width: 100%;
   height: 790px;
-  max-height: calc(100vh - 75px);
+  max-height: calc(100vh - 79px);
   text-align: center;
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  position: sticky;
-  top: 79px;
+  padding-top: 79px;
   overflow: hidden;
-  clip-path: polygon(10% 5%, 90% 5%, 90% 95%, 10% 95%);
+  position: relative;
 
   @media #{$QUERY-md} {
     padding: 100px 50px;
@@ -90,11 +87,6 @@
   justify-content: center;
   cursor: pointer;
   transition: opacity 0.3s;
-  opacity: 0;
-
-  &.isAnimated {
-    opacity: 1;
-  }
 
   &.playing {
     opacity: 0;

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

@@ -33,13 +33,6 @@
   width: 620px;
   max-width: 100%;
   margin: 0 auto;
-}
-
-.text {
-  max-width: 100%;
-  min-height: 350px;
-  font-size: 18px;
-  line-height: 1.4;
 
   h1,
   h2,
@@ -58,6 +51,13 @@
   }
 }
 
+.text {
+  max-width: 100%;
+  min-height: 350px;
+  font-size: 18px;
+  line-height: 1.4;
+}
+
 .twoColumns {
   display: flex;
   justify-content: space-between;

package/lib/components/cases/Pagination/index.tsx

@@ -23,7 +23,7 @@ const Pagination = ({
   const handleClick = (page: number) => {
     const params = new URLSearchParams(searchParams);
     params.set("page", String(page));
-    router.push(`?${params.toString()}`, { scroll: false });
+    router.push(`?${params.toString()}`, { scroll: true });
   };
 
   return (
@@ -34,8 +34,7 @@ const Pagination = ({
             return (
               <span
                 key={page + 1}
-                className={`${styles.indicator} ${styles.current}`}
-              >
+                className={`${styles.indicator} ${styles.current}`}>
                 {page + 1}
               </span>
             );
@@ -47,8 +46,7 @@ const Pagination = ({
               className={styles.indicator}
               onClick={() => {
                 handleClick(page + 1);
-              }}
-            >
+              }}>
               {page + 1}
             </button>
           );

package/lib/queries/getAboutPage.ts

@@ -64,6 +64,9 @@ type AboutPage = {
   };
   contactPage: {
     customFieldsContact: {
+      facebook: string;
+      instagram: string;
+      linkedin: string;
       berlinImage?: {
         sourceUrl: string;
       };
@@ -165,6 +168,9 @@ export default async function getAboutPage({
       }
       contactPage: page(id: "${contactPage}", idType: URI) {
         customFieldsContact {
+          facebook
+          instagram
+          linkedin
           berlinImage {
             sourceUrl
           }

package/lib/queries/getCaseById.ts

@@ -232,6 +232,9 @@ export default async function getCaseBySlug({
       }
       contactPage: page(id: "${contactPage}", idType: URI) {
         customFieldsContact {
+          facebook
+          instagram
+          linkedin
           berlinImage {
             sourceUrl
           }

package/lib/queries/getCaseBySlug.ts

@@ -231,6 +231,9 @@ export default async function getCaseBySlug({
       }
       contactPage: page(id: "${contactPage}", idType: URI) {
         customFieldsContact {
+          facebook
+          instagram
+          linkedin
           berlinImage {
             sourceUrl
           }

package/lib/queries/getCasesPage.ts

@@ -164,6 +164,9 @@ export default async function getCasesPage({
       }
       contactPage: page(id: "${contactPage}", idType: URI) {
         customFieldsContact {
+          facebook
+          instagram
+          linkedin
           berlinImage {
             sourceUrl
           }

package/lib/queries/getContactPage.ts

@@ -4,6 +4,9 @@ import client from "./client";
 export type ContactPage = {
   title: string;
   customFieldsContact: {
+    facebook: string;
+    instagram: string;
+    linkedin: string;
     topCaption: string;
     topHeading: string;
     berlinImage: {
@@ -57,6 +60,9 @@ export default async function getContactPage({
       page(id: $slug, idType: URI) {
         title
         customFieldsContact {
+          facebook
+          instagram
+          linkedin
           topCaption
           topHeading
           berlinImage {