foundry-component-library 0.2.31 → 0.2.33

package/lib/components/Capabilities/index.tsx

@@ -5,12 +5,15 @@ import styles from "./styles.module.scss";
 import type { Case, NextImage } from "../../types";
 import Item from "./Item";
 import LinkType from "next/link";
+import { translate } from "../../utils";
 
 const Capabilities = ({
+  heading,
   items,
   Link,
   Image,
 }: {
+  heading: string;
   items: {
     heading: string;
     text: string;
@@ -26,9 +29,9 @@ const Capabilities = ({
   return (
     <Container>
       <a className={styles.button} href="#get-in-touch">
-        Get in touch
+        {translate("Get in touch", "DE")}
       </a>
-      <div className={styles.heading}>Our capabilities</div>
+      <div className={styles.heading}>{heading}</div>
       <div className={styles.items}>
         {items.map((item) => {
           return (

package/lib/components/Footer/index.tsx

@@ -10,6 +10,7 @@ function Footer({
   facebook,
   linkedin,
   instagram,
+  lang,
 }: {
   details: {
     berlinEmail: string;
@@ -20,6 +21,7 @@ function Footer({
   facebook: string;
   linkedin: string;
   instagram: string;
+  lang?: "DE" | "EN";
 }) {
   const { berlinEmail, zurichEmail, newyorkEmail } = details;
   const year = new Date().getFullYear();
@@ -38,7 +40,7 @@ function Footer({
             <div className={styles.offices}>
               {berlinEmail && (
                 <div className={styles.office}>
-                  <div className={styles.city}>{translate("Berlin")}</div>
+                  <div className={styles.city}>{translate("Berlin", lang)}</div>
                   <div className={styles.email}>
                     <a href={`mailto:${berlinEmail}`}>{berlinEmail}</a>
                   </div>
@@ -46,7 +48,7 @@ function Footer({
               )}
               {zurichEmail && (
                 <div className={styles.office}>
-                  <div className={styles.city}>{translate("Zurich")}</div>
+                  <div className={styles.city}>{translate("Zurich", lang)}</div>
                   <div className={styles.email}>
                     <a href={`mailto:${zurichEmail}`}>{zurichEmail}</a>
                   </div>
@@ -54,7 +56,9 @@ function Footer({
               )}
               {newyorkEmail && (
                 <div className={styles.office}>
-                  <div className={styles.city}>{translate("New York")}</div>
+                  <div className={styles.city}>
+                    {translate("New York", lang)}
+                  </div>
                   <div className={styles.email}>
                     <a href={`mailto:${newyorkEmail}`}>{newyorkEmail}</a>
                   </div>
@@ -65,26 +69,28 @@ function Footer({
           <div className={styles.right}>
             <ul className={styles.menu}>
               <li className={styles.menuItem}>
-                <Link href="/hubs">Service Hubs</Link>
+                <Link href="/hubs">{translate("Service Hubs", lang)}</Link>
               </li>
               <li className={styles.menuItem}>
-                <Link href="/about-us">About Us</Link>
+                <Link href="/about-us">{translate("About Us", lang)}</Link>
               </li>
               <li className={styles.menuItem}>
-                <Link href="/cases">Case Studies</Link>
+                <Link href="/cases">{translate("Case Studies", lang)}</Link>
               </li>
               {/* <li className={styles.menuItem}>
                 <Link href="/team">Team & Careers</Link>
               </li> */}
               <li className={styles.menuItem}>
-                <Link href="/news">News & Insights</Link>
+                <Link href="/news">{translate("News & Insights", lang)}</Link>
               </li>
               <li className={styles.menuItem}>
-                <Link href="/contact">Contact</Link>
+                <Link href="/contact">{translate("Contact", lang)}</Link>
               </li>
             </ul>
             <div className={styles.social}>
-              <div className={styles.socialHeading}>Follow Us</div>
+              <div className={styles.socialHeading}>
+                {translate("Follow Us", lang)}
+              </div>
               <ul className={styles.menuSocial}>
                 <li className={styles.menuItem}>
                   <Link href={instagram} target="_blank">
@@ -108,9 +114,11 @@ function Footer({
         <div className={styles.bottom}>
           <div>FOUNDRY © {year}</div>
           <div className={styles.bottomLinks}>
-            <Link href="/imprint">{translate("Imprint")}</Link>
-            <Link href="/terms">{translate("Terms")}</Link>
-            <Link href="/privacy-policy">{translate("Privacy policy")}</Link>
+            <Link href="/imprint">{translate("Imprint", lang)}</Link>
+            <Link href="/terms">{translate("Terms", lang)}</Link>
+            <Link href="/privacy-policy">
+              {translate("Privacy policy", lang)}
+            </Link>
           </div>
         </div>
       </Container>

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

@@ -189,7 +189,7 @@
   gap: 24px;
   text-transform: none;
   font-size: 16px;
-  width: 335px;
+  max-width: 370px;
   max-width: 100%;
 
   @media screen and (max-width: 1000px) {

package/lib/components/GetInTouch/index.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { useActionState, useState } from "react";
 import { useRouter } from "next/navigation";
 import styles from "./styles.module.scss";
+import { translate } from "../../utils";
 
 type LeadResult =
   | { success: true }
@@ -43,9 +44,12 @@ const GetInTouch = ({
   return (
     <section id="get-in-touch" className={styles.formSection}>
       <div className={styles.container}>
-        <h2 className={styles.heading}>Get in touch</h2>
+        <h2 className={styles.heading}>{translate("Get in touch", "DE")}</h2>
         <p className={styles.subtitle}>
-          Tell us about your brand and discover how we can help.
+          {translate(
+            "Tell us about your brand and discover how we can help.",
+            "DE",
+          )}
         </p>
         <form
           action={formAction}

package/lib/components/Header/Menu.tsx

@@ -34,17 +34,26 @@ function Menu({
       <div className={styles.menuWrapper}>
         <ul className={styles.menuList}>
           <li className={styles.menuListItem}>
-            <Link href={`${langPrefix}/hubs`}>{translate("Service Hubs")}</Link>
+            <Link href={`${langPrefix}`}>{translate("Home", currentLang)}</Link>
           </li>
           <li className={styles.menuListItem}>
-            <Link href={`${langPrefix}/cases`}>{translate("Cases")}</Link>
+            <Link href={`${langPrefix}/hubs`}>
+              {translate("Service Hubs", currentLang)}
+            </Link>
           </li>
           <li className={styles.menuListItem}>
-            <Link href={`${langPrefix}/about-us`}>{translate("About Us")}</Link>
+            <Link href={`${langPrefix}/cases`}>
+              {translate("Cases", currentLang)}
+            </Link>
+          </li>
+          <li className={styles.menuListItem}>
+            <Link href={`${langPrefix}/about-us`}>
+              {translate("About Us", currentLang)}
+            </Link>
           </li>
           <li className={styles.menuListItem}>
             <Link href={`${langPrefix}/contact`}>
-              {translate("Contact Us")}
+              {translate("Contact Us", currentLang)}
             </Link>
           </li>
         </ul>
@@ -67,13 +76,13 @@ function Menu({
           </li> */}
           <li className={styles.secondaryMenuItem}>
             <Link href={`${langPrefix}/team`}>
-              {translate("Team & Careers")}
+              {translate("Team & Careers", currentLang)}
               <Arrow />
             </Link>
           </li>
           <li className={styles.secondaryMenuItem}>
             <Link href={`${langPrefix}/news`}>
-              {translate("News & Insights")}
+              {translate("News & Insights", currentLang)}
               <Arrow />
             </Link>
           </li>

package/lib/components/Header/index.tsx

@@ -29,6 +29,14 @@ function Header({ Link }: { Link: NextLink }) {
     };
   }, [logo]);
 
+  useEffect(() => {
+    if (!isMenuOpen) return;
+
+    const onScroll = () => setMenuOpen(false);
+    window.addEventListener("scroll", onScroll, { once: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, [isMenuOpen, setMenuOpen]);
+
   return (
     <>
       <header className={styles.header}>

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

@@ -176,18 +176,18 @@
 
 .langBtn {
   text-transform: uppercase;
-  opacity: 0.6;
+  opacity: 1;
 }
 .divider {
   margin: 3px 1px;
   width: 2px;
   height: calc(100% - 6px);
   background-color: $color-text;
-  opacity: 0.6;
+  opacity: 1;
 }
 
 .langBtn.active {
-  opacity: 1;
+  opacity: 0.6;
 }
 
 .logo {

package/lib/components/Hero/index.tsx

@@ -35,8 +35,6 @@ const Hero = ({
 
   if (!image && !video) return;
 
-  console.log("video", video);
-
   if (isFullWidth) {
     return (
       <div

package/lib/components/HubsAccordion/Hub.tsx

@@ -42,7 +42,7 @@ const Hub = ({
     <div className={`${styles.hub} ${isActive ? styles.active : ""}`}>
       <div className={styles.top}>
         <div className={styles.title}>{hub.title}</div>
-        <div className={styles.text}>{customFields.subheading}</div>
+        <div className={styles.text}>{customFields.approach}</div>
         <button className={styles.icon} onClick={() => setIsActive(!isActive)}>
           {isActive ? <Minus /> : <Plus />}
         </button>

package/lib/components/ImageTitle/index.tsx

@@ -22,8 +22,14 @@ const ImageTitle = ({
       <div className={`${styles.imageTitle} ${inverseStyle}`}>
         <div className={styles.texts}>
           <div>
-            <div className={styles.heading}>{heading}</div>
-            <div className={styles.text}>{text}</div>
+            <div
+              className={styles.heading}
+              dangerouslySetInnerHTML={{ __html: heading || "" }}
+            />
+            <div
+              className={styles.text}
+              dangerouslySetInnerHTML={{ __html: text || "" }}
+            />
           </div>
         </div>
         {image && (

package/lib/components/LogoSection/Dropdown.tsx

@@ -42,8 +42,6 @@ const Dropdown = ({
     currentDisplay = selected.tag;
   }
 
-  console.log("pp", displayLabels);
-
   return (
     <div
       className={`${styles.dropdown} ${isOpen ? styles.active : ""}`}

package/lib/components/LogoSection/Logos.tsx

@@ -93,8 +93,6 @@ const Logos = ({
     }
   }, [selected]);
 
-  console.log("qwe", selected);
-
   return (
     <Container>
       {!withoutFilters && (

package/lib/components/QuoteSection/index.tsx

@@ -32,45 +32,47 @@ const QuoteSection = ({
   return (
     <div className={styles.quote}>
       <Container>
-        {items.map((item, i) => {
-          return (
-            <div
-              key={item?.name || i}
-              className={`${styles.content} ${
-                active === i ? styles.active : ""
-              }`}>
-              <div className={styles.person}>
-                <div>
-                  <div className={styles.name}>{item.name}</div>
-                  <div className={styles.position}>{item.position}</div>
-                </div>
-              </div>
+        <div className={styles.quoteWrapper}>
+          {items.map((item, i) => {
+            return (
               <div
-                className={styles.text}
-                onMouseEnter={() => setPaused(true)}
-                onMouseLeave={() => setPaused(false)}>
-                {item.text}
+                key={item?.name || i}
+                className={`${styles.content} ${
+                  active === i ? styles.active : ""
+                }`}>
+                <div className={styles.person}>
+                  <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>
+            );
+          })}
+          {items.length > 1 && (
+            <div className={`${styles.indicators} ${styles.desktop}}`}>
+              {items.map((el, i) => {
+                return (
+                  <div
+                    key={el.name}
+                    className={`${styles.indicator} ${
+                      active === i ? styles.active : ""
+                    }`}
+                    onClick={() => {
+                      setActive(i);
+                    }}
+                  />
+                );
+              })}
             </div>
-          );
-        })}
-        {items.length > 1 && (
-          <div className={`${styles.indicators} ${styles.desktop}}`}>
-            {items.map((el, i) => {
-              return (
-                <div
-                  key={el.name}
-                  className={`${styles.indicator} ${
-                    active === i ? styles.active : ""
-                  }`}
-                  onClick={() => {
-                    setActive(i);
-                  }}
-                />
-              );
-            })}
-          </div>
-        )}
+          )}
+        </div>
       </Container>
     </div>
   );

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

@@ -10,6 +10,17 @@
   }
 }
 
+.quoteWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 432px;
+
+  @media #{$QUERY-sm} {
+    min-height: 350px;
+  }
+}
+
 .logo {
   width: 180px;
   height: 64px;
@@ -89,6 +100,7 @@
   align-items: center;
   justify-content: flex-start;
   gap: 16px;
+  margin-top: auto;
 
   @media #{$QUERY-sm} {
     padding-top: 30px;

package/lib/components/TextSection/index.tsx

@@ -32,8 +32,18 @@ const TextSection = ({
             dangerouslySetInnerHTML={{ __html: heading }}
           />
         )}
-        {subheading && <div className={styles.subheading}>{subheading}</div>}
-        {text && <div className={styles.text}>{text}</div>}
+        {subheading && (
+          <div
+            className={styles.subheading}
+            dangerouslySetInnerHTML={{ __html: subheading }}
+          />
+        )}
+        {text && (
+          <div
+            className={styles.text}
+            dangerouslySetInnerHTML={{ __html: text }}
+          />
+        )}
       </div>
     </Container>
   );

package/lib/components/case/Other/index.tsx

@@ -11,10 +11,12 @@ function Other({
   cases,
   Link,
   Image,
+  lang,
 }: {
   cases: Case[];
   Link: NextLink;
   Image: NextImage;
+  lang?: "EN" | "DE";
 }) {
   const sectionRef = useRef(null);
   const { handleMouseDown, handleMouseMove, handleMouseUp, dragStyle } =
@@ -26,9 +28,11 @@ function Other({
     <Container noMobilePadding>
       <div className={styles.other}>
         <div className={styles.top}>
-          <div className={styles.caption}>{translate("Case Studies")}</div>
+          <div className={styles.caption}>
+            {translate("Case Studies", lang)}
+          </div>
           <h3 className={styles.heading}>
-            {translate("Success stories.\nWith proven results.")}
+            {translate("Success stories.\nWith proven results.", lang)}
           </h3>
         </div>
         <div

package/lib/queries/client.ts

@@ -1,5 +1,3 @@
-import { GraphQLClient } from "graphql-request";
-
 const baseUrl = process.env.WORDPRESS_URL || "https://data.foundry.ch";
 
 const headers: Record<string, string> = {
@@ -13,9 +11,26 @@ if (process.env.WP_PREVIEW_USER && process.env.WP_PREVIEW_PASS) {
   headers["Authorization"] = `Basic ${auth}`;
 }
 
-const graphqlClient = new GraphQLClient(`${baseUrl}/graphql`, {
-  headers,
-  errorPolicy: "all",
-});
+export async function request<T>(
+  query: string,
+  variables?: Record<string, unknown>,
+): Promise<T> {
+  const response = await fetch(`${baseUrl}/graphql`, {
+    method: "POST",
+    headers,
+    body: JSON.stringify({ query, variables }),
+    next: {
+      revalidate: 60 * 3,
+    },
+  } as RequestInit & { next?: { revalidate?: number } });
+
+  if (!response.ok) {
+    throw new Error(`GraphQL request failed: ${response.statusText}`);
+  }
 
-export default graphqlClient;
+  const json = await response.json();
+  if (json.errors) {
+    throw new Error(json.errors[0]?.message || "GraphQL error");
+  }
+  return json.data as T;
+}

package/lib/queries/getAboutPage.ts

@@ -1,5 +1,4 @@
-import { gql } from "graphql-request";
-import client from "./client";
+import { request } from "./client";
 
 type AboutPage = {
   aboutPage: {
@@ -104,7 +103,7 @@ export default async function getAboutPage({
   const homePage = language === "DE" ? "home-berlin-de" : "home-berlin";
   const contactPage = language === "DE" ? "contact-de" : "contact";
 
-  const query = gql`
+  const query = `
     query GetPageBySlug($slug: ID!) {
       aboutPage: page(id: $slug, idType: URI) {
         customFieldsAboutBerlin {
@@ -203,11 +202,16 @@ export default async function getAboutPage({
   `;
 
   const variables = { slug: slug };
+
+  console.time("graphql");
+
   const data: {
     aboutPage: AboutPage["aboutPage"];
     homePage: AboutPage["homePage"];
     contactPage: AboutPage["contactPage"];
-  } = await client.request(query, variables);
+  } = await request(query, variables);
+
+  console.timeEnd("graphql");
 
   return {
     aboutPage: data.aboutPage,

package/lib/queries/getBrands.ts

@@ -1,11 +1,10 @@
-import { gql } from "graphql-request";
 import { Page } from "../../lib/types";
-import client from "./client";
+import { request } from "./client";
 
 export default async function getBrands(): Promise<
   Page["customFields"]["brands"] | null
 > {
-  const query = gql`
+  const query = `
     query GetBrands($slug: ID!) {
       page(id: $slug, idType: URI) {
         customFields {
@@ -21,6 +20,6 @@ export default async function getBrands(): Promise<
   `;
 
   const variables = { slug: "home", language: "EN" };
-  const data: { page: Page } = await client.request(query, variables);
+  const data: { page: Page } = await request(query, variables);
   return data.page.customFields.brands;
 }

package/lib/queries/getCaseById.ts

@@ -1,6 +1,5 @@
-import { gql } from "graphql-request";
 import { Case } from "../../lib/types";
-import client from "./client";
+import { request } from "./client";
 import { type ContactPage } from "./getContactPage";
 
 type HomePage = {
@@ -30,7 +29,7 @@ export default async function getCaseBySlug({
   const homePage = language === "DE" ? "home-berlin-de" : "home-berlin";
   const contactPage = language === "DE" ? "contact-de" : "contact";
 
-  const query = gql`
+  const query = `
     query GetCaseBySlug($id: ID!) {
       case(id: $id, idType: ID) {
         id
@@ -277,7 +276,7 @@ export default async function getCaseBySlug({
     case: Case;
     contactPage: ContactPage;
     homePage: HomePage;
-  } = await client.request(query, variables);
+  } = await request(query, variables);
 
   return {
     case: data.case,

package/lib/queries/getCaseBySlug.ts

@@ -1,6 +1,5 @@
-import { gql } from "graphql-request";
 import { Case } from "../../lib/types";
-import client from "./client";
+import { request } from "./client";
 import { type ContactPage } from "./getContactPage";
 
 type HomePage = {
@@ -30,7 +29,7 @@ export default async function getCaseBySlug({
   const homePage = language === "DE" ? "home-berlin-de" : "home-berlin";
   const contactPage = language === "DE" ? "contact-de" : "contact";
 
-  const query = gql`
+  const query = `
   query GetCaseBySlug($slug: String, $language: LanguageCodeFilterEnum!) {
     cases(where: { name: $slug, language: $language }) {
       nodes {
@@ -280,7 +279,7 @@ export default async function getCaseBySlug({
     };
     contactPage: ContactPage;
     homePage: HomePage;
-  } = await client.request(query, variables);
+  } = await request(query, variables);
 
   return {
     case: data?.cases.nodes[0],

package/lib/queries/getCases.ts

@@ -1,6 +1,5 @@
-import { gql } from "graphql-request";
 import { Case, Variables } from "../../lib/types";
-import client from "./client";
+import { request } from "./client";
 
 type Params = {
   perPage?: number;
@@ -55,7 +54,7 @@ export default async function getCases({
   const whereClause =
     whereConditions.length > 0 ? `where: { ${whereConditions.join(", ")}}` : "";
 
-  const query = gql`
+  const query = `
     query GetCases(${variableDefinitions}) {
       cases(
         ${isPrevious ? "last: $perPage" : "first: $perPage"},
@@ -117,7 +116,7 @@ export default async function getCases({
         hasPreviousPage: boolean;
       };
     };
-  } = await client.request(query, variables);
+  } = await request(query, variables);
 
   return {
     cases: data.cases.nodes,

package/lib/queries/getCasesPage.ts

@@ -1,6 +1,5 @@
-import { gql } from "graphql-request";
 import { Case, Variables } from "../../lib/types";
-import client from "./client";
+import { request } from "./client";
 import { type ContactPage } from "./getContactPage";
 
 export const casesPerPage = 10;
@@ -113,7 +112,7 @@ export default async function getCasesPage({
   const whereClause =
     whereConditions.length > 0 ? `where: { ${whereConditions.join(", ")}}` : "";
 
-  const query = gql`
+  const query = `
     query GetCasesPage(${variableDefinitions}) {
       casesPage: page(id: "${casesPage}", idType: DATABASE_ID) {
         customFieldsCases {
@@ -241,7 +240,7 @@ export default async function getCasesPage({
     };
     contactPage: ContactPage;
     homePage: HomePage;
-  } = await client.request(query, variables);
+  } = await request(query, variables);
 
   return {
     casesPage: data.casesPage,

package/lib/queries/getCategories.ts

@@ -1,9 +1,8 @@
-import { gql } from "graphql-request";
 import { Category } from "../../lib/types";
-import client from "./client";
+import { request } from "./client";
 
 export default async function getCategories(): Promise<Category[]> {
-  const query = gql`
+  const query = `
     query getCategories {
       caseCategories(where: { language: EN }) {
         nodes {
@@ -16,7 +15,7 @@ export default async function getCategories(): Promise<Category[]> {
     }
   `;
 
-  const data: { caseCategories: { nodes: Category[] } } = await client.request(
+  const data: { caseCategories: { nodes: Category[] } } = await request(
     query
   );
   return data.caseCategories.nodes;

package/lib/queries/getContactPage.ts

@@ -1,5 +1,4 @@
-import { gql } from "graphql-request";
-import client from "./client";
+import { request } from "./client";
 
 export type ContactPage = {
   title: string;
@@ -55,7 +54,7 @@ export default async function getContactPage({
 }: {
   slug: string;
 }): Promise<ContactPage | null> {
-  const query = gql`
+  const query = `
     query GetPageBySlug($slug: ID!) {
       page(id: $slug, idType: URI) {
         title
@@ -107,6 +106,6 @@ export default async function getContactPage({
   `;
 
   const variables = { slug: slug };
-  const data: { page: ContactPage } = await client.request(query, variables);
+  const data: { page: ContactPage } = await request(query, variables);
   return data.page;
 }

package/lib/queries/getHomePage.ts

@@ -1,5 +1,4 @@
-import { gql } from "graphql-request";
-import client from "./client";
+import { request } from "./client";
 import { Hub, PostPreview } from "../types";
 import { type ContactPage } from "./getContactPage";
 
@@ -133,7 +132,7 @@ export default async function getHomePage({
   const contactPage = language === "EN" ? "contact" : "contact-de";
   const aboutPage = language === "EN" ? "about-berlin" : "about-berlin-de";
 
-  const query = gql`
+  const query = `
     query GetPageBySlug($slug: ID!) {
       page(id: $slug, idType: URI) {
         title
@@ -284,7 +283,7 @@ export default async function getHomePage({
     posts: { nodes: PostPreview[] };
     contactPage: ContactPage;
     aboutPage: HomePage["aboutPage"];
-  } = await client.request(query, variables);
+  } = await request(query, variables);
 
   return {
     homePage: data.page,

package/lib/queries/getHubBySlug.ts

@@ -1,6 +1,5 @@
-import { gql } from "graphql-request";
 import { Case, Hub } from "../../lib/types";
-import client from "./client";
+import { request } from "./client";
 import { type ContactPage } from "./getContactPage";
 
 type HomePage = {
@@ -33,7 +32,7 @@ export default async function getHubBySlug({
   const homePage = language === "DE" ? "home-berlin-de" : "home-berlin";
   const contactPage = language === "DE" ? "contact-de" : "contact";
 
-  const query = gql`
+  const query = `
     query GetHubBySlug($slug: ID!) {
       hub(id: $slug, idType: SLUG) {
         id
@@ -62,6 +61,7 @@ export default async function getHubBySlug({
               }
             }
           }
+          capabilitiesHeading
           capabilities {
             heading
             text
@@ -170,7 +170,7 @@ export default async function getHubBySlug({
     contactPage: ContactPage;
     cases: { nodes: Case[] };
     homePage: HomePage;
-  } = await client.request(query, variables);
+  } = await request(query, variables);
 
   return {
     hub: data.hub,

package/lib/queries/getHubs.ts

@@ -1,6 +1,5 @@
-import { gql } from "graphql-request";
 import { Hub } from "../../lib/types";
-import client from "./client";
+import { request } from "./client";
 
 export default async function getCases(): Promise<{
   hubs: Hub[];
@@ -33,7 +32,7 @@ export default async function getCases(): Promise<{
     };
   };
 }> {
-  const query = gql`
+  const query = `
     query GetHubs {
       hubs(where: { language: EN }) {
         nodes {
@@ -127,7 +126,7 @@ export default async function getCases(): Promise<{
         }>;
       };
     };
-  } = await client.request(query);
+  } = await request(query);
 
   return {
     hubs: data.hubs.nodes,

package/lib/queries/getHubsPage.ts

@@ -1,6 +1,5 @@
-import { gql } from "graphql-request";
 import { Variables, Hub } from "../../lib/types";
-import client from "./client";
+import { request } from "./client";
 import { type ContactPage } from "./getContactPage";
 
 type HomePage = {
@@ -111,7 +110,7 @@ export default async function getCasesPage(
   const whereClause =
     whereConditions.length > 0 ? `where: { ${whereConditions.join(", ")}}` : "";
 
-  const query = gql`
+  const query = `
     query GetNewsPage(${variableDefinitions}) {
       hubsPage: page(id: $slug, idType: URI) {
         title
@@ -256,7 +255,7 @@ export default async function getCasesPage(
     contactPage: ContactPage;
     homePage: HomePage;
     aboutPage: AboutPage;
-  } = await client.request(query, variables);
+  } = await request(query, variables);
 
   return {
     hubsPage: data.hubsPage,

package/lib/queries/getMetadataBySlug.ts

@@ -1,12 +1,11 @@
-import { gql } from "graphql-request";
 import { Metadata, Variables } from "../../lib/types";
-import client from "./client";
+import { request } from "./client";
 
 export default async function getMetadataBySlug(
   slug: string,
   language: string = "EN"
 ) {
-  const query = gql`
+  const query = `
     query getMetadata($slug: String, $language: LanguageCodeFilterEnum) {
       pages(where: { name: $slug, language: $language }) {
         nodes {
@@ -40,7 +39,7 @@ export default async function getMetadataBySlug(
   };
 
   const data: { pages: { nodes: Metadata[] }; posts: { nodes: Metadata[] } } =
-    await client.request(query, variables);
+    await request(query, variables);
   const pages = data.pages.nodes;
   const posts = data.posts.nodes;
 

package/lib/queries/getNewsPage.ts

@@ -1,6 +1,5 @@
-import { gql } from "graphql-request";
 import { Variables, Post } from "../../lib/types";
-import client from "./client";
+import { request } from "./client";
 import { type ContactPage } from "./getContactPage";
 
 type NewsPage = {
@@ -73,7 +72,7 @@ export default async function getNewsPage(options: Params): Promise<{
   const whereClause =
     whereConditions.length > 0 ? `where: { ${whereConditions.join(", ")}}` : "";
 
-  const query = gql`
+  const query = `
     query GetNewsPage(${variableDefinitions}) {
       newsPage: page(id: $slug, idType: URI) {
         title
@@ -178,7 +177,7 @@ export default async function getNewsPage(options: Params): Promise<{
       };
     };
     contactPage: ContactPage;
-  } = await client.request(query, variables);
+  } = await request(query, variables);
 
   return {
     newsPage: data.newsPage,

package/lib/queries/getPageBySlug.ts

@@ -1,6 +1,5 @@
-import { gql } from "graphql-request";
 import { Page } from "../../lib/types";
-import client from "./client";
+import { request } from "./client";
 import { ContactPage } from "./getContactPage";
 
 export default async function getPageBySlug(
@@ -9,7 +8,7 @@ export default async function getPageBySlug(
 ): Promise<{ page: Page; contactPage: ContactPage }> {
   const contactPage = language === "DE" ? "contact-de" : "contact";
 
-  const query = gql`
+  const query = `
     query GetPageBySlug($slug: ID!) {
       page(id: $slug, idType: URI) {
         title
@@ -46,7 +45,7 @@ export default async function getPageBySlug(
   `;
 
   const variables = { slug };
-  const data: { page: Page; contactPage: ContactPage } = await client.request(
+  const data: { page: Page; contactPage: ContactPage } = await request(
     query,
     variables
   );

package/lib/queries/getPeoplePage.ts

@@ -1,5 +1,4 @@
-import { gql } from "graphql-request";
-import client from "./client";
+import { request } from "./client";
 import { type ContactPage } from "./getContactPage";
 import { Person } from "../types";
 
@@ -79,7 +78,7 @@ export default async function getContactPage({
 }): Promise<PeoplePage> {
   const contactPage = language === "DE" ? "contact-de" : "contact";
 
-  const query = gql`
+  const query = `
     query GetPageBySlug($slug: ID!) {
       page(id: $slug, idType: URI) {
         title
@@ -161,7 +160,7 @@ export default async function getContactPage({
   const data: {
     page: PeoplePage["peoplePage"];
     contactPage: ContactPage;
-  } = await client.request(query, variables);
+  } = await request(query, variables);
 
   return {
     peoplePage: data.page,

package/lib/queries/getPerformanceHubPage.ts

@@ -1,5 +1,4 @@
-import { gql } from "graphql-request";
-import client from "./client";
+import { request } from "./client";
 
 type PerformancePage = {
   homePage: {
@@ -81,7 +80,7 @@ type PerformancePage = {
 };
 
 export default async function getPerformanceHubPage(): Promise<PerformancePage> {
-  const query = gql`
+  const query = `
     query GetPageBySlug($slug: ID!) {
       homePage: page(id: "home-berlin", idType: URI) {
         customFieldsBerlin {
@@ -170,7 +169,7 @@ export default async function getPerformanceHubPage(): Promise<PerformancePage>
     homePage: PerformancePage["homePage"];
     performancePage: PerformancePage["performancePage"];
     contactPage: PerformancePage["contactPage"];
-  } = await client.request(query, variables);
+  } = await request(query, variables);
 
   return {
     homePage: data.homePage,

package/lib/queries/getPostBySlug.ts

@@ -1,6 +1,5 @@
-import { gql } from "graphql-request";
 import { Post } from "../../lib/types";
-import client from "./client";
+import { request } from "./client";
 import { ContactPage } from "./getContactPage";
 
 export default async function getPostBySlug({
@@ -15,7 +14,7 @@ export default async function getPostBySlug({
 }> {
   const contactPage = language === "DE" ? "contact-de" : "contact";
 
-  const query = gql`
+  const query = `
     query GetPostBySlug($slug: ID!) {
       post(id: $slug, idType: SLUG) {
         id
@@ -133,7 +132,7 @@ export default async function getPostBySlug({
   `;
 
   const variables = { slug };
-  const data: { post: Post; contactPage: ContactPage } = await client.request(
+  const data: { post: Post; contactPage: ContactPage } = await request(
     query,
     variables
   );

package/lib/queries/getPosts.ts

@@ -1,6 +1,5 @@
-import { gql } from "graphql-request";
 import { Post, Variables } from "../../lib/types";
-import client from "./client";
+import { request } from "./client";
 
 interface Params {
   searchTerm?: string;
@@ -55,7 +54,7 @@ export default async function getPosts(
   const whereClause =
     whereConditions.length > 0 ? `where: { ${whereConditions.join(", ")}}` : "";
 
-  const query = gql`
+  const query = `
     query GetPosts(${variableDefinitions}) {
       posts(
         ${isPrevious ? "last: $perPage" : "first: $perPage"},
@@ -116,7 +115,7 @@ export default async function getPosts(
         hasPreviousPage: boolean;
       };
     };
-  } = await client.request(query, variables);
+  } = await request(query, variables);
 
   return {
     posts: data.posts.nodes,

package/lib/types/index.ts

@@ -330,6 +330,7 @@ export type Hub = {
     }[];
     approach: string;
     relatedWork: Case[];
+    capabilitiesHeading: string;
     capabilities: {
       heading: string;
       text: string;

package/lib/utils.ts

@@ -1,3 +1,76 @@
-export const translate = (text: string) => {
-  return text;
+type Translations = Record<string, { DE?: string; EN?: string }>;
+
+const strings: Translations = {
+  "Get in touch": {
+    DE: "Kontakt aufnehmen",
+  },
+  "Tell us about your brand and discover how we can help.": {
+    DE: "Erzählen Sie uns von Ihrer Marke und entdecken Sie, wie wir Ihnen helfen können.",
+  },
+  "Success stories.\nWith proven results.": {
+    DE: "Erfolgsgeschichten.\nMit messbaren Ergebnissen.",
+  },
+  Berlin: {
+    DE: "Berlin",
+  },
+  Zurich: {
+    DE: "Zürich",
+  },
+  "Service Hubs": {
+    DE: "Hubs",
+  },
+  "About Us": {
+    DE: "Über uns",
+  },
+  "Case Studies": {
+    DE: "Cases",
+  },
+  Contact: {
+    DE: "Kontakt",
+  },
+  "Contact Us": {
+    DE: "Kontakt",
+  },
+  "Follow Us": {
+    DE: "Folge uns",
+  },
+  Imprint: {
+    DE: "Impressum",
+  },
+  Terms: {
+    DE: "Terms & Conditions",
+  },
+  "Privacy policy": {
+    DE: "Datenschutz",
+  },
+  "Team & Careers": {
+    DE: "Team & Karriere",
+  },
+  "News & Insights": {
+    DE: "News & Insights",
+  },
+  "": {
+    DE: "",
+  },
+  "": {
+    DE: "",
+  },
+  "": {
+    DE: "",
+  },
+};
+
+export const translate = (text: string, lang: "DE" | "EN" = "EN") => {
+  if (lang === "EN") return text;
+
+  let trans: string | undefined = "";
+
+  Object.keys(strings).forEach((key: string) => {
+    if (key === text) {
+      trans = strings[key][lang];
+      return;
+    }
+  });
+
+  return trans || text;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foundry-component-library",
-  "version": "0.2.31",
+  "version": "0.2.33",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -67,7 +67,6 @@
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.4.2",
     "@react-three/postprocessing": "^3.0.4",
-    "graphql-request": "^7.1.2",
     "three": "^0.182.0"
   }
 }