foundry-component-library 0.2.5 → 0.2.6

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

@@ -44,7 +44,7 @@
   box-sizing: border-box;
 
   @media screen and (max-width: $screen-sm) {
-    max-width: 90%;
+    max-width: 80vw;
     height: 500px;
     padding: 40px 33px;
   }

package/lib/components/ContactTeaser/index.tsx

@@ -1,9 +1,13 @@
+"use client";
+import { useState } from "react";
 import styles from "./styles.module.scss";
 import Container from "../Container";
 import { translate } from "../../utils";
 import { NextLink } from "../../types";
 import WavyText from "../TextAnimations/WavyText";
 import FadeInText from "../TextAnimations/FadeInText";
+import useClickOutside from "../../hooks/useClickOutside";
+import Script from "next/script";
 
 const ContactTeaser = ({
   heading,
@@ -22,24 +26,57 @@ const ContactTeaser = ({
   alternate?: boolean;
   Link: NextLink;
 }) => {
+  const [isTypeformOpen, setIsTypeformOpen] = useState(false);
+  const ref = useClickOutside<HTMLDivElement>(() => {
+    setIsTypeformOpen(false);
+  });
+
   return (
-    <div className={`${styles.contactTeaser} ${styles[theme]}`}>
-      <Container>
-        <div className={styles.wrapper}>
-          {heading && (
-            <WavyText
-              className={`${styles.heading} ${!text ? styles.margin : ""}`}
-              text={heading}
-              alternate={alternate}
+    <>
+      <div className={`${styles.contactTeaser} ${styles[theme]}`}>
+        <Container>
+          <div className={styles.wrapper}>
+            {heading && (
+              <WavyText
+                className={`${styles.heading} ${!text ? styles.margin : ""}`}
+                text={heading}
+                alternate={alternate}
+              />
+            )}
+            {text && <FadeInText className={styles.text} text={text} />}
+            {buttonHref !== "typeform" && (
+              <Link href={buttonHref} className={styles.button}>
+                {translate(buttonText)}
+              </Link>
+            )}
+            {buttonHref == "typeform" && (
+              <button
+                className={styles.button}
+                onClick={() => {
+                  setIsTypeformOpen(true);
+                }}>
+                {translate(buttonText)}
+              </button>
+            )}
+          </div>
+        </Container>
+      </div>
+      {buttonHref === "typeform" && (
+        <div
+          className={styles.typeform}
+          style={{ display: isTypeformOpen ? "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" }}
             />
-          )}
-          {text && <FadeInText className={styles.text} text={text} />}
-          <Link href={buttonHref} className={styles.button}>
-            {translate(buttonText)}
-          </Link>
+          </div>
         </div>
-      </Container>
-    </div>
+      )}
+    </>
   );
 };
 

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

@@ -54,4 +54,27 @@
 .button {
   @extend .button--brown;
   display: inline-block;
+  cursor: pointer;
+}
+
+.typeform {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9;
+  display: none;
+}
+
+.typeformWrapper {
+  background-color: $color-white;
+  width: 800px;
+  max-width: 100%;
+  border-radius: 8px;
+  overflow: hidden;
 }

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

@@ -17,7 +17,7 @@
 
   @media #{$QUERY-sm} {
     width: 100%;
-    padding: 0 20px;
+    padding: 0 40px;
   }
 
   &.noMobilePadding {

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

@@ -45,7 +45,7 @@
   max-width: 100%;
 
   @media screen and (max-width: $screen-sm) {
-    margin-bottom: 2rem;
+    margin-bottom: 40px;
   }
 }
 
@@ -118,6 +118,7 @@
 .menu {
   font-size: 18px;
   font-weight: 500;
+  font-family: $font-secondary;
 
   @media #{$QUERY-sm} {
     width: 100%;
@@ -147,7 +148,7 @@
   @media #{$QUERY-sm} {
     width: 100%;
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-start;
     gap: 24px;
   }
 
@@ -196,8 +197,10 @@
   }
 
   @media #{$QUERY-sm} {
-    margin-top: 10px;
+    margin-top: 20px;
     width: 100%;
+    justify-content: flex-start;
+    gap: 40px;
   }
 
   a {

package/lib/components/Header/index.tsx

@@ -16,7 +16,13 @@ function Header({ Link }: { Link: NextLink }) {
           <div className={styles.wrapper}>
             <div className={styles.left}>
               <Link href="/">
-                <video src="/logo.mp4" autoPlay muted />
+                <video
+                  src="/logo.mp4"
+                  autoPlay
+                  muted
+                  playsInline
+                  {...{ "webkit-playsinline": "true" }}
+                />
                 Foundry
               </Link>
             </div>
@@ -28,8 +34,7 @@ function Header({ Link }: { Link: NextLink }) {
                 onClick={() => {
                   setMenuOpen(!isMenuOpen);
                 }}
-                aria-label="Toggle menu"
-              >
+                aria-label="Toggle menu">
                 Menu
                 <div className={styles.hamburger}>
                   <span className={styles.line}></span>

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

@@ -19,7 +19,7 @@
 
 .left {
   font-size: 0;
-  margin-left: -50px;
+  margin-left: -65px;
 
   @media #{$QUERY-sm} {
     margin-left: -68px;
@@ -98,9 +98,6 @@
   display: flex;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 
-  @media #{$QUERY-sm} {
-  }
-
   &.isMenuOpen {
     // display: flex;
     transform: translateX(0);
@@ -132,6 +129,10 @@
   max-height: 600px;
   margin: auto 0;
   padding: 0 40px;
+
+  @media #{$QUERY-sm} {
+    padding-bottom: 60px;
+  }
 }
 
 .menuList {

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

@@ -12,6 +12,10 @@
   color: $color-brown;
   position: relative;
 
+  @media #{$QUERY-sm} {
+    padding-bottom: 32px;
+  }
+
   &:before {
     content: "";
     position: absolute;
@@ -42,7 +46,7 @@
 
   @media #{$QUERY-sm} {
     flex-wrap: wrap;
-    padding: 16px 20px;
+    padding: 16px 40px;
   }
 }
 
@@ -121,7 +125,7 @@
 
   @media #{$QUERY-sm} {
     padding-bottom: 0;
-    padding-left: 20px;
+    padding-left: 40px;
     padding-right: 20px;
   }
 }

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/styles.module.scss

@@ -66,6 +66,10 @@
   height: 100%;
   font-family: $font-secondary;
 
+  path {
+    stroke: $color-brown;
+  }
+
   &.yellow {
     background-color: $color-yellow;
     color: $color-blue;
@@ -114,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/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/package.json

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