foundry-component-library 0.2.7 → 0.2.9

package/lib/components/Awards/index.tsx

@@ -1,12 +1,25 @@
 "use client";
-import { useRef } from "react";
 import styles from "./styles.module.scss";
 import Container from "../Container";
 import { NextImage } from "../../types";
-import useDrag from "../../hooks/useDrag";
 import WavyText from "../TextAnimations/WavyText";
 import { motion } from "framer-motion";
 
+// Infinite marquee animation settings
+const marqueeVariants = {
+  animate: {
+    x: [0, -"100%"],
+    transition: {
+      x: {
+        repeat: Infinity,
+        repeatType: "loop",
+        duration: 20,
+        ease: "linear",
+      },
+    },
+  },
+};
+
 const Awards = ({
   heading,
   awards,
@@ -22,49 +35,41 @@ const Awards = ({
   }[];
   Image: NextImage;
 }) => {
-  const sectionRef = useRef(null);
-  const { handleMouseDown, handleMouseMove, handleMouseUp, dragStyle } =
-    useDrag(sectionRef);
+  if (!awards) return null;
 
-  if (!awards) return;
+  // Duplicate awards to create seamless looping
+  const marqueeItems = [...awards, ...awards];
 
   return (
     <motion.div
       className={styles.awards}
       initial={{ opacity: 0, y: -5 }}
       animate={{ opacity: 1, y: 0 }}
-      transition={{
-        duration: 1,
-      }}
-    >
+      transition={{ duration: 1 }}>
       <Container>
         {heading && <WavyText className={styles.heading} text={heading} />}
       </Container>
       <Container noMobilePadding>
-        <div
-          ref={sectionRef}
-          className={styles.items}
-          onMouseDown={handleMouseDown}
-          onMouseMove={handleMouseMove}
-          onMouseUp={handleMouseUp}
-          onMouseLeave={handleMouseUp}
-          style={dragStyle as React.CSSProperties}
-        >
-          {awards.map((award, i) => {
-            const { image, heading, text } = award;
-
-            if (!image) return;
+        <div className={styles.marqueeWrapper}>
+          <motion.div
+            className={styles.marquee}
+            variants={marqueeVariants}
+            animate="animate">
+            {marqueeItems.map((award, i) => {
+              const { image, heading, text } = award;
+              if (!image) return null;
 
-            return (
-              <div key={image.sourceUrl + i} className={styles.award}>
-                <div className={styles.image}>
-                  {image && <Image src={image?.sourceUrl} alt="" fill />}
+              return (
+                <div key={image.sourceUrl + i} className={styles.award}>
+                  <div className={styles.image}>
+                    {image && <Image src={image.sourceUrl} alt="" fill />}
+                  </div>
+                  {heading && <div className={styles.text}>{heading}</div>}
+                  {text && <div className={styles.client}>{text}</div>}
                 </div>
-                {heading && <div className={styles.text}>{heading}</div>}
-                {text && <div className={styles.client}>{text}</div>}
-              </div>
-            );
-          })}
+              );
+            })}
+          </motion.div>
         </div>
       </Container>
     </motion.div>

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

@@ -21,14 +21,29 @@
   }
 }
 
-.items {
+/* NEW — wrapper that clips the scrolling track */
+.marqueeWrapper {
+  overflow: hidden;
+  width: 100%;
+  position: relative;
+}
+
+/* NEW — marquee track */
+.marquee {
   display: flex;
+  gap: 48px;
+  width: max-content;
+  animation: marquee 20s linear infinite;
 
   @media #{$QUERY-sm} {
     gap: 24px;
+    animation-duration: 16s;
   }
 }
 
+/* Remove if using marquee (track should scroll) */
+/* .items { display: flex; } */
+
 .award {
   width: 20%;
   text-align: center;
@@ -85,3 +100,13 @@
     font-size: 16px;
   }
 }
+
+/* NEW — marquee animation: scroll half the track (because items are duplicated) */
+@keyframes marquee {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}

package/lib/components/StickyTiles/Tile.tsx

@@ -0,0 +1,72 @@
+import { MouseEventHandler, useRef } from "react";
+import styles from "./styles.module.scss";
+import Plus from "../../assets/svg/plus.svg";
+import { NextLink } from "../../types";
+import Arrow from "../../assets/svg/arrow.svg";
+import { useScroll } from "motion/react";
+import { motion, useTransform } from "framer-motion";
+
+const Tile = ({
+  text,
+  background,
+  href,
+  onClick,
+  Link,
+  hoverText,
+}: {
+  text: string;
+  background: "pink" | "yellow" | "brown" | "blue";
+  href: string;
+  i: number;
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+  Link: NextLink;
+  hoverText: string;
+  isLast: boolean;
+}) => {
+  const ref = useRef(null);
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ["start 0.8", "start 0.3"],
+  });
+
+  const scale = useTransform(scrollYProgress, [0, 1], [0.8, 1]);
+
+  return (
+    <motion.div
+      ref={ref}
+      className={styles.tileWrapper}
+      style={{
+        scale: scale,
+      }}>
+      <div className={styles.videoWrapper}>
+        <video
+          className={styles.video}
+          autoPlay
+          loop
+          playsInline
+          src="https://data.foundry.ch/wp-content/uploads/2025/07/foundry-sennheiser-hear-more-thumbnail-video.mp4"
+        />
+      </div>
+      <Link
+        href={href}
+        onClick={onClick}
+        draggable="false"
+        className={`${styles.tile} ${styles[background]}`}>
+        <div className={styles.face}>
+          <div className={styles.text}>{text}</div>
+          <div>
+            <Plus />
+          </div>
+        </div>
+        <div className={styles.tails}>
+          <div className={styles.tailsText}>{hoverText}</div>
+          <div>
+            Learn More <Arrow />
+          </div>
+        </div>
+      </Link>
+    </motion.div>
+  );
+};
+
+export default Tile;

package/lib/components/StickyTiles/index.tsx

@@ -0,0 +1,67 @@
+"use client";
+import { useRef } 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";
+
+const ServiceHubsTeaser = ({
+  caption,
+  heading,
+  text,
+  tiles,
+  Link,
+}: {
+  caption: string;
+  heading: string;
+  text: string;
+  tiles: {
+    id: string;
+    uri: string;
+    title: string;
+    customFieldsHub: {
+      heading: string;
+    };
+  }[];
+  Link: NextLink;
+}) => {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div className={styles.benefits}>
+      <TextSection caption={caption} heading={heading} text={text} isSmall />
+      <Container noMobilePadding>
+        <div className={styles.wrapper} ref={wrapperRef}>
+          <motion.div className={styles.tiles}>
+            {tiles.map((tile, i) => {
+              const colors: Array<"pink" | "yellow" | "brown" | "blue"> = [
+                "pink",
+                "yellow",
+                "brown",
+                "blue",
+              ];
+              const background = colors[i % colors.length];
+
+              return (
+                <Tile
+                  key={tile.id}
+                  text={tile.title}
+                  hoverText={tile.customFieldsHub.heading}
+                  background={background}
+                  href={tile.uri}
+                  i={i}
+                  Link={Link}
+                  isLast={i === tiles.length - 1}
+                />
+              );
+            })}
+          </motion.div>
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default ServiceHubsTeaser;

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

@@ -0,0 +1,165 @@
+@use "../variables" as *;
+
+.benefits {
+  // overflow: hidden;
+  margin-bottom: 80px;
+}
+
+.wrapper {
+  width: 100%;
+  // overflow-x: scroll;
+  user-select: none;
+}
+
+.tiles {
+  gap: 16px;
+  padding-bottom: 64px;
+
+  @media #{$QUERY-sm} {
+    padding-bottom: 32px;
+  }
+}
+
+.tileWrapper {
+  z-index: 0;
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  position: sticky;
+  top: 90px;
+  height: 80vh;
+  width: 800px;
+  max-width: 90%;
+
+  @media screen and (max-width: $screen-sm) {
+    height: 500px;
+  }
+}
+
+.videoWrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.tile {
+  flex-shrink: 0;
+  white-space: pre-wrap;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  box-sizing: border-box;
+  background-color: rgba($color-pink, 1);
+  color: $color-brown;
+  font-size: 34px;
+  width: 100%;
+  height: 100%;
+  font-family: $font-secondary;
+  box-shadow: 0 0 10px rgba($color-brown, 0.2);
+  position: relative;
+  z-index: 2;
+  transition: background-color 0.3s;
+
+  path {
+    stroke: $color-brown;
+  }
+
+  &.yellow {
+    background-color: rgba($color-yellow, 1);
+    color: $color-blue;
+    box-shadow: 0 0 10px rgba($color-blue, 0.2);
+
+    path {
+      stroke: $color-blue;
+    }
+  }
+
+  &.brown {
+    background-color: rgba($color-brown, 1);
+    color: $color-pink;
+    box-shadow: 0 0 10px rgba($color-pink, 0.2);
+
+    path {
+      stroke: $color-pink;
+    }
+  }
+
+  &.blue {
+    background-color: rgba($color-blue, 1);
+    color: $color-white;
+    box-shadow: 0 0 10px rgba($color-black, 0.2);
+
+    path {
+      stroke: $color-white;
+    }
+  }
+
+  &:hover {
+    background-color: rgba($color-pink, 0.2);
+
+    &.yellow {
+      background-color: rgba($color-yellow, 0.2);
+    }
+
+    &.brown {
+      background-color: rgba($color-brown, 0.2);
+    }
+
+    &.blue {
+      background-color: rgba($color-blue, 0.2);
+    }
+
+    .face {
+      display: none;
+    }
+
+    .tails {
+      display: block;
+    }
+  }
+}
+
+.text {
+  margin-bottom: 42px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.face {
+  display: block;
+  font-size: 42px;
+
+  @media #{$QUERY-sm} {
+    font-size: 34px;
+  }
+}
+
+.tails {
+  padding-left: 30px;
+  display: none;
+  font-size: 34px;
+  font-family: $font-secondary;
+  color: $color-white;
+
+  path {
+    stroke: $color-white !important;
+  }
+}
+
+.tailsText {
+  margin-bottom: 30px;
+  max-width: 500px;
+}

package/lib/index.ts

@@ -37,6 +37,7 @@ import TeamBenefits from "./components/TeamBenefits";
 import TeamPhotos from "./components/TeamPhotos";
 import TextSection from "./components/TextSection";
 import Tiles from "./components/Tiles";
+import StickyTiles from "./components/StickyTiles";
 import VideoTeaser from "./components/VideoTeaser";
 
 export {
@@ -79,5 +80,6 @@ export {
   TeamPhotos,
   TextSection,
   Tiles,
+  StickyTiles,
   VideoTeaser,
 };

package/lib/queries/getHomePage.ts

@@ -113,6 +113,11 @@ type HomePage = {
           sourceUrl: string;
         };
       }[];
+      quotes?: {
+        name?: string;
+        position?: string;
+        text?: string;
+      }[];
     };
   };
 };
@@ -260,6 +265,11 @@ export default async function getHomePage({
               sourceUrl
             }
           }
+          quotes {
+            name
+            position
+            text
+          }
         }
       }
     }

package/lib/queries/getPageBySlug.ts

@@ -1,19 +1,54 @@
 import { gql } from "graphql-request";
 import { Page } from "../../lib/types";
 import client from "./client";
+import { ContactPage } from "./getContactPage";
 
 export default async function getPageBySlug(
-  slug: string
-): Promise<Page | null> {
+  slug: string,
+  language: string
+): Promise<{ page: Page; contactPage: ContactPage }> {
+  const contactPage = language === "DE" ? "contact-de" : "contact";
+
   const query = gql`
     query GetPageBySlug($slug: ID!) {
       page(id: $slug, idType: URI) {
         title
+        content
+      }
+      contactPage: page(id: "${contactPage}", idType: URI) {
+        customFieldsContact {
+          facebook
+          instagram
+          linkedin
+          berlinImage {
+            sourceUrl
+          }
+          berlinText
+          berlinEmail
+          berlinPhone
+          zurichImage {
+            sourceUrl
+          }
+          zurichText
+          zurichEmail
+          zurichPhone
+          newyorkImage {
+            sourceUrl
+          }
+          newyorkText
+          newyorkEmail
+          newyorkPhone
+          contactTeaserHeading
+          contactTeaserText
+        }
       }
     }
   `;
 
   const variables = { slug };
-  const data: { page: Page } = await client.request(query, variables);
-  return data.page;
+  const data: { page: Page; contactPage: ContactPage } = await client.request(
+    query,
+    variables
+  );
+  return data;
 }

package/package.json

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