foundry-component-library 0.2.8 → 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/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.8",
+  "version": "0.2.9",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",