foundry-component-library 0.2.3 → 0.2.5

package/lib/components/ContactTeaser/index.tsx

@@ -10,7 +10,7 @@ const ContactTeaser = ({
   text,
   theme = "yellow",
   buttonText = "Contact Us",
-  buttonHref = "/contact",
+  buttonHref = "/contact#contact-us",
   alternate,
   Link,
 }: {

package/lib/components/Footer/index.tsx

@@ -7,6 +7,9 @@ import { NextLink } from "../../types";
 function Footer({
   details,
   Link,
+  facebook,
+  linkedin,
+  instagram,
 }: {
   details: {
     berlinEmail: string;
@@ -14,6 +17,9 @@ function Footer({
     newyorkEmail: string;
   };
   Link: NextLink;
+  facebook: string;
+  linkedin: string;
+  instagram: string;
 }) {
   const { berlinEmail, zurichEmail, newyorkEmail } = details;
   const year = new Date().getFullYear();
@@ -81,13 +87,13 @@ function Footer({
               <div className={styles.socialHeading}>Follow Us</div>
               <ul className={styles.menuSocial}>
                 <li className={styles.menuItem}>
-                  <Link href="https://instagram.com">Instagram</Link>
+                  <Link href={instagram}>Instagram</Link>
                 </li>
                 <li className={styles.menuItem}>
-                  <Link href="https://facebook.com">Facebook</Link>
+                  <Link href={facebook}>Facebook</Link>
                 </li>
                 <li className={styles.menuItem}>
-                  <Link href="https://linkedin.com">Linked-In</Link>
+                  <Link href={linkedin}>LinkedIn</Link>
                 </li>
               </ul>
             </div>

package/lib/components/Hero/Video.tsx

@@ -0,0 +1,43 @@
+"use client";
+import { useState, useRef, useEffect } from "react";
+import { useOnScreen } from "../../hooks/useOnScreen";
+import ReactPlayer from "react-player/lazy";
+import styles from "./styles.module.scss";
+
+const Video = ({ url }: { url: string }) => {
+  const sectionRef = useRef(null);
+  const onScreen = useOnScreen(sectionRef, "1000px");
+  // const [playing, setPlaying] = useState(false);
+  const [videoLoaded, setVideoLoaded] = useState(false);
+  const [hasWindow, setHasWindow] = useState(false);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      setHasWindow(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!videoLoaded && onScreen) {
+      setVideoLoaded(true);
+    }
+  }, [videoLoaded, onScreen]);
+
+  return (
+    <div className={styles.videoWrapper} ref={sectionRef}>
+      {hasWindow && (
+        <ReactPlayer
+          playing
+          url={url}
+          width="100%"
+          height="100%"
+          loop
+          muted
+          playsinline
+        />
+      )}
+    </div>
+  );
+};
+
+export default Video;

package/lib/components/Hero/index.tsx

@@ -4,9 +4,11 @@ import styles from "./styles.module.scss";
 import Container from "../Container";
 import { NextImage, NextLink } from "../../types";
 import { useOnScreen } from "../../hooks/useOnScreen";
+import Video from "./Video";
 
 const Hero = ({
   image,
+  video,
   text,
   isFullWidth,
   isFirst,
@@ -16,6 +18,7 @@ const Hero = ({
   Image,
 }: {
   image: string;
+  video?: string;
   text: string;
   isFullWidth?: boolean;
   isFirst?: boolean;
@@ -30,7 +33,9 @@ const Hero = ({
   const sectionRef = useRef(null);
   const onScreen = useOnScreen(sectionRef, "-50%");
 
-  if (!image) return;
+  console.log("pop", video);
+
+  if (!image && !video) return;
 
   if (isFullWidth) {
     return (
@@ -38,15 +43,17 @@ const Hero = ({
         ref={sectionRef}
         className={`${styles.hero} ${styles.isFullWidth} ${
           noMarginBottom ? styles.noMarginBottom : ""
-        }`}
-      >
-        <Image
-          className={`${styles.background} ${onScreen ? styles.active : ""}`}
-          src={image}
-          width="1280"
-          height="600"
-          alt={text}
-        />
+        }`}>
+        {image && !video && (
+          <Image
+            className={`${styles.background} ${onScreen ? styles.active : ""}`}
+            src={image}
+            width="1280"
+            height="600"
+            alt={text}
+          />
+        )}
+        {video && <Video url={video} />}
         <div className={styles.texts}>
           {text && <div className={styles.heading}>{text}</div>}
           {btn && (
@@ -64,15 +71,17 @@ const Hero = ({
       <div
         className={`${styles.hero} ${isFirst ? styles.first : ""} ${
           noMarginBottom ? styles.noMarginBottom : ""
-        }`}
-      >
-        <Image
-          className={`${styles.background} ${onScreen ? styles.active : ""}`}
-          src={image}
-          width="1280"
-          height="600"
-          alt={text}
-        />
+        }`}>
+        {image && !video && (
+          <Image
+            className={`${styles.background} ${onScreen ? styles.active : ""}`}
+            src={image}
+            width="1280"
+            height="600"
+            alt={text}
+          />
+        )}
+        {video && <Video url={video} />}
         <div className={styles.texts}>
           {text && <div className={styles.heading}>{text}</div>}
           {btn && (

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

@@ -103,3 +103,15 @@
     background-color: $color-white;
   }
 }
+
+.videoWrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  video {
+    object-fit: cover;
+  }
+}

package/lib/components/HubsAccordion/Hub.tsx

@@ -1,5 +1,12 @@
 "use client";
-import { useRef, Dispatch, SetStateAction } from "react";
+import {
+  useRef,
+  useState,
+  useLayoutEffect,
+  Dispatch,
+  SetStateAction,
+} from "react";
+import { motion, AnimatePresence } from "framer-motion";
 import { NextImage, NextLink, type Hub } from "../../types";
 import styles from "./styles.module.scss";
 import Arrow from "../../assets/svg/arrow.svg";
@@ -21,6 +28,8 @@ const Hub = ({
   Image: NextImage;
 }) => {
   const casesRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState<number | "auto">(0);
 
   const {
     handleMouseDown,
@@ -33,6 +42,12 @@ const Hub = ({
   const isActive = active === hub.slug;
   const customFields = hub.customFieldsHub;
 
+  useLayoutEffect(() => {
+    if (contentRef.current) {
+      setHeight(contentRef.current.scrollHeight);
+    }
+  }, [isActive, customFields]);
+
   return (
     <div className={`${styles.hub} ${isActive ? styles.active : ""}`}>
       <div className={styles.top}>
@@ -40,94 +55,95 @@ const Hub = ({
         <div className={styles.text}>{customFields.subheading}</div>
         <button
           className={styles.icon}
-          onClick={() => {
-            if (isActive) {
-              setActive("");
-            } else {
-              setActive(hub.slug);
-            }
-          }}
-        >
-          {isActive && <Minus />}
-          {!isActive && <Plus />}
+          onClick={() => setActive(isActive ? "" : hub.slug)}>
+          {isActive ? <Minus /> : <Plus />}
         </button>
       </div>
-      <div className={styles.rows}>
-        <div className={styles.row}>
-          <div className={styles.rowWrapper}>
-            <div className={styles.subheading}>SERVICE</div>
-            <div className={styles.right}>
-              {customFields.tags && (
-                <div className={styles.tags}>
-                  {customFields.tags.map((tag) => `${tag.tag} // `)}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-        <div className={styles.row}>
-          <div className={styles.rowWrapper}>
-            <div className={styles.subheading}>APPROACH</div>
-            <div className={styles.right}>
-              <div className={styles.paragraph}>{customFields.approach}</div>
-            </div>
-          </div>
-        </div>
-        <div className={styles.row}>
-          <div className={styles.rowWrapper}>
-            <div className={styles.subheading}>RELATED WORK</div>
-            <div className={styles.right}>
-              {customFields.relatedWork && (
-                <div
-                  className={styles.cases}
-                  ref={casesRef}
-                  onMouseDown={handleMouseDown}
-                  onMouseMove={handleMouseMove}
-                  onMouseUp={handleMouseUp}
-                  onMouseLeave={handleMouseUp}
-                  style={{
-                    ...(dragStyle as React.CSSProperties),
-                  }}
-                >
-                  {customFields.relatedWork.map((item) => {
-                    const { thumbnailImage, mainImage } = item.case;
 
-                    return (
-                      <Link
-                        href={item.uri}
-                        key={item.id}
-                        className={styles.case}
-                        draggable={false}
-                        onClick={preventedClick}
-                      >
-                        <div className={styles.caseImage}>
-                          <Image
-                            src={
-                              thumbnailImage?.sourceUrl ||
-                              mainImage?.sourceUrl ||
-                              ""
-                            }
-                            alt={item.title}
-                            fill
-                          />
+      <AnimatePresence initial={false}>
+        {(isActive || height !== 0) && (
+          <motion.div
+            key="content"
+            initial={{ height: 0, opacity: 0 }}
+            animate={{
+              height: isActive ? height : 0,
+              opacity: isActive ? 1 : 0,
+            }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.4, ease: [0.4, 0, 0.2, 1] }}
+            style={{ overflow: "hidden" }}>
+            <div ref={contentRef}>
+              <div className={styles.rows}>
+                <div className={styles.row}>
+                  <div className={styles.rowWrapper}>
+                    <div className={styles.subheading}>SERVICE</div>
+                    <div className={styles.right}>
+                      {customFields.tags && (
+                        <div className={styles.tags}>
+                          {customFields.tags.map((tag) => `${tag.tag} // `)}
                         </div>
-                        <div className={styles.caseTitle}>
-                          {item.title} <Arrow />
+                      )}
+                    </div>
+                  </div>
+                </div>
+
+                <div className={styles.row}>
+                  <div className={styles.rowWrapper}>
+                    <div className={styles.subheading}>RELATED WORK</div>
+                    <div className={styles.right}>
+                      {customFields.relatedWork && (
+                        <div
+                          className={styles.cases}
+                          ref={casesRef}
+                          onMouseDown={handleMouseDown}
+                          onMouseMove={handleMouseMove}
+                          onMouseUp={handleMouseUp}
+                          onMouseLeave={handleMouseUp}
+                          style={{
+                            ...(dragStyle as React.CSSProperties),
+                          }}>
+                          {customFields.relatedWork.map((item) => {
+                            const { thumbnailImage, mainImage } = item.case;
+
+                            return (
+                              <Link
+                                href={item.uri}
+                                key={item.id}
+                                className={styles.case}
+                                draggable={false}
+                                onClick={preventedClick}>
+                                <div className={styles.caseImage}>
+                                  <Image
+                                    src={
+                                      thumbnailImage?.sourceUrl ||
+                                      mainImage?.sourceUrl ||
+                                      ""
+                                    }
+                                    alt={item.title}
+                                    fill
+                                  />
+                                </div>
+                                <div className={styles.caseTitle}>
+                                  {item.title} <Arrow />
+                                </div>
+                              </Link>
+                            );
+                          })}
                         </div>
-                      </Link>
-                    );
-                  })}
+                      )}
+                    </div>
+                  </div>
+                  <div className={styles.more}>
+                    <Link href={hub.uri}>
+                      Learn More <Arrow />
+                    </Link>
+                  </div>
                 </div>
-              )}
+              </div>
             </div>
-          </div>
-          <div className={styles.more}>
-            <Link href={hub.uri}>
-              Learn More <Arrow />
-            </Link>
-          </div>
-        </div>
-      </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 };

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

@@ -12,12 +12,6 @@
   color: $color-brown;
   position: relative;
 
-  &.active {
-    .rows {
-      display: block;
-    }
-  }
-
   &:before {
     content: "";
     position: absolute;
@@ -105,10 +99,6 @@
   }
 }
 
-.rows {
-  display: none;
-}
-
 .row {
   padding-bottom: 64px;
   position: relative;

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 {

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/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/components/contact/Contacts/index.tsx

@@ -17,12 +17,16 @@ function Contacts({
     email: string;
   }[];
 }) {
-  const [isTypeformOpen, setIsTypeformOpen] = useState(false);
-  const ref = useClickOutside<HTMLDivElement>(() => setIsTypeformOpen(false));
+  const [isTypeform1Open, setIsTypeform1Open] = useState(false);
+  const [isTypeform2Open, setIsTypeform2Open] = useState(false);
+  const ref = useClickOutside<HTMLDivElement>(() => {
+    setIsTypeform1Open(false);
+    setIsTypeform2Open(false);
+  });
   if (!items) return;
 
   return (
-    <section className={styles.section}>
+    <section className={styles.section} id="contact-us">
       <Container>
         <h2 className={styles.title}>{title}</h2>
         <div className={styles.boxes}>
@@ -44,8 +48,13 @@ function Contacts({
                 </div>
                 <a
                   className={styles.buttonSecondary}
-                  onClick={() => setIsTypeformOpen(true)}
-                >
+                  onClick={() => {
+                    if (i === 2) {
+                      setIsTypeform1Open(true);
+                    } else {
+                      setIsTypeform2Open(true);
+                    }
+                  }}>
                   {i === 0 && "Contact Account"}
                   {i === 1 && "General Contact"}
                   {i === 2 && "Contact HR"}
@@ -57,8 +66,7 @@ function Contacts({
         </div>
         <div
           className={styles.typeform}
-          style={{ display: isTypeformOpen ? "flex" : "none" }}
-        >
+          style={{ display: isTypeform1Open ? "flex" : "none" }}>
           <Script src="//embed.typeform.com/next/embed.js" />
           <div ref={ref} className={styles.typeformWrapper}>
             {/* <div data-tf-widget="qmv6Yk" data-tf-iframe-props="title=Foundry Website Contact Form" data-tf-medium="snippet" style={{ width: '100%', height: '400px' }} /> */}
@@ -70,6 +78,20 @@ function Contacts({
             />
           </div>
         </div>
+        <div
+          className={styles.typeform}
+          style={{ display: isTypeform2Open ? "flex" : "none" }}>
+          <Script src="//embed.typeform.com/next/embed.js" />
+          <div ref={ref} className={styles.typeformWrapper}>
+            {/* <div data-tf-widget="qmv6Yk" data-tf-iframe-props="title=Foundry Website Contact Form" data-tf-medium="snippet" style={{ width: '100%', height: '400px' }} /> */}
+            <div
+              data-tf-widget="qmv6Yk"
+              data-tf-iframe-props="title=Foundry Website Contact Form"
+              data-tf-medium="snippet"
+              style={{ width: "100%", height: "400px" }}
+            />
+          </div>
+        </div>
       </Container>
     </section>
   );

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

@@ -4,6 +4,7 @@
   padding: 64px 0;
   background-color: $color-yellow;
   color: $color-brown;
+  scroll-margin-top: 60px;
 
   @media #{$QUERY-sm} {
     padding: 32px 0;

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 {

package/lib/queries/getHomePage.ts

@@ -78,6 +78,9 @@ type HomePage = {
   posts: PostPreview[];
   contactPage: {
     customFieldsContact: {
+      facebook: string;
+      instagram: string;
+      linkedin: string;
       berlinImage?: {
         sourceUrl: string;
       };
@@ -216,6 +219,9 @@ export default async function getHomePage({
       }
       contactPage: page(id: "${contactPage}", idType: URI) {
         customFieldsContact {
+          facebook
+          instagram
+          linkedin
           berlinImage {
             sourceUrl
           }

package/lib/queries/getHubBySlug.ts

@@ -45,6 +45,9 @@ export default async function getHubBySlug({
           mainimage {
             sourceUrl
           }
+          mainvideo{
+            mediaItemUrl
+          }
           relatedWork {
             ... on Case {
               title
@@ -84,6 +87,9 @@ export default async function getHubBySlug({
       }
       contactPage: page(id: "${contactPage}", idType: URI) {
         customFieldsContact {
+          facebook
+          instagram
+          linkedin
           berlinImage {
             sourceUrl
           }

package/lib/queries/getHubsPage.ts

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

package/lib/queries/getNewsPage.ts

@@ -119,6 +119,9 @@ export default async function getNewsPage(options: Params): Promise<{
       }
       contactPage: page(id: "${contactPage}", idType: URI) {
         customFieldsContact {
+          facebook
+          instagram
+          linkedin
           berlinImage {
             sourceUrl
           }

package/lib/queries/getPeoplePage.ts

@@ -40,6 +40,9 @@ type PeoplePage = {
   };
   contactPage: {
     customFieldsContact: {
+      facebook: string;
+      instagram: string;
+      linkedin: string;
       berlinImage?: {
         sourceUrl: string;
       };
@@ -123,6 +126,9 @@ export default async function getContactPage({
       }
       contactPage: page(id: "${contactPage}", idType: URI) {
         customFieldsContact {
+          facebook
+          instagram
+          linkedin
           berlinImage {
             sourceUrl
           }

package/lib/queries/getPerformanceHubPage.ts

@@ -50,6 +50,9 @@ type PerformancePage = {
   };
   contactPage: {
     customFieldsContact: {
+      facebook: string;
+      instagram: string;
+      linkedin: string;
       berlinImage?: {
         sourceUrl: string;
       };
@@ -128,6 +131,9 @@ export default async function getPerformanceHubPage(): Promise<PerformancePage>
       }
       contactPage: page(id: "contact", idType: URI) {
         customFieldsContact {
+          facebook
+          instagram
+          linkedin
           berlinImage {
             sourceUrl
           }

package/lib/queries/getPostBySlug.ts

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

package/lib/types/index.ts

@@ -319,6 +319,9 @@ export type Hub = {
     mainimage: {
       sourceUrl: string;
     };
+    mainvideo: {
+      mediaItemUrl: string;
+    };
     caption: string;
     heading: string;
     subheading: string;

package/package.json

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