foundry-component-library 0.2.18 → 0.2.20

package/lib/components/Awards/index.tsx

@@ -4,6 +4,7 @@ import Container from "../Container";
 import { NextImage } from "../../types";
 import WavyText from "../TextAnimations/WavyText";
 import { motion } from "framer-motion";
+import FadeInText from "../TextAnimations/FadeInText";
 
 // Infinite marquee animation settings
 const marqueeVariants = {
@@ -22,10 +23,12 @@ const marqueeVariants = {
 
 const Awards = ({
   heading,
+  text,
   awards,
   Image,
 }: {
   heading?: string;
+  text?: string;
   awards?: {
     image?: {
       sourceUrl: string;
@@ -48,6 +51,7 @@ const Awards = ({
       transition={{ duration: 1 }}>
       <Container>
         {heading && <WavyText className={styles.heading} text={heading} />}
+        {text && <FadeInText className={styles.subheading} text={text} />}
       </Container>
       <Container noMobilePadding>
         <div className={styles.marqueeWrapper}>

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

@@ -11,12 +11,23 @@
 .heading {
   font-size: 42px;
   color: $color-brown;
-  margin-bottom: 64px;
   line-height: 1.3;
   font-family: $font-secondary;
+  margin-bottom: 24px;
 
   @media #{$QUERY-sm} {
     font-size: 28px;
+  }
+}
+
+.subheading {
+  font-size: 18px;
+  color: $color-brown;
+  margin-bottom: 64px;
+  width: 800px;
+  max-width: 100%;
+
+  @media #{$QUERY-sm} {
     margin-bottom: 44px;
   }
 }

package/lib/components/CaseStudyTeaser/index.tsx

@@ -42,9 +42,10 @@ const CaseStudyTeaser = ({
               setTimeout(() => {
                 dragStarted.current = false;
               }, 0);
-            }}
-          >
+            }}>
             {cases.map((el) => {
+              if (!el) return;
+
               const { thumbnailImage, mainImage } = el.case;
 
               return (
@@ -68,8 +69,7 @@ const CaseStudyTeaser = ({
                           e.preventDefault();
                           e.stopPropagation();
                         }
-                      }}
-                    >
+                      }}>
                       {translate("See More")}
                     </a>
                   </div>

package/lib/components/Header/Menu.tsx

@@ -1,4 +1,6 @@
+"use client";
 import { Dispatch, SetStateAction } from "react";
+import { usePathname } from "next/navigation";
 import styles from "./styles.module.scss";
 import { translate } from "../../utils";
 import Arrow from "../../assets/svg/arrow.svg";
@@ -14,6 +16,14 @@ function Menu({
   setMenuOpen: Dispatch<SetStateAction<boolean>>;
   Link: NextLink;
 }) {
+  const path = usePathname();
+  const currentLang = path.startsWith("/de") ? "DE" : "EN";
+
+  console.log(path);
+
+  const langPrefix =
+    currentLang === "EN" ? "" : `/${currentLang.toLowerCase()}`;
+
   return (
     <div className={`${styles.menu} ${isOpen}`}>
       <div
@@ -26,16 +36,18 @@ function Menu({
       <div className={styles.menuWrapper}>
         <ul className={styles.menuList}>
           <li className={styles.menuListItem}>
-            <Link href="/hubs">{translate("Service Hubs")}</Link>
+            <Link href={`${langPrefix}/hubs`}>{translate("Service Hubs")}</Link>
           </li>
           <li className={styles.menuListItem}>
-            <Link href="/cases">{translate("Work")}</Link>
+            <Link href={`${langPrefix}/cases`}>{translate("Work")}</Link>
           </li>
           <li className={styles.menuListItem}>
-            <Link href="/about-us">{translate("About Us")}</Link>
+            <Link href={`${langPrefix}/about-us`}>{translate("About Us")}</Link>
           </li>
           <li className={styles.menuListItem}>
-            <Link href="/contact">{translate("Contact Us")}</Link>
+            <Link href={`${langPrefix}/contact`}>
+              {translate("Contact Us")}
+            </Link>
           </li>
         </ul>
         <ul className={styles.menuSecondary}>
@@ -56,18 +68,31 @@ function Menu({
             </Container>
           </li> */}
           <li className={styles.secondaryMenuItem}>
-            <Link href="/team">
+            <Link href={`${langPrefix}/team`}>
               {translate("Team & Careers")}
               <Arrow />
             </Link>
           </li>
           <li className={styles.secondaryMenuItem}>
-            <Link href="/news">
+            <Link href={`${langPrefix}/news`}>
               {translate("News & Insights")}
               <Arrow />
             </Link>
           </li>
         </ul>
+        <div className={styles.languageSwitcher} aria-label="Language switcher">
+          <a
+            href={path.replace(`${langPrefix}`, "")}
+            className={`${styles.langBtn} ${currentLang === "EN" ? styles.active : ""}`}>
+            EN
+          </a>
+          <div className={styles.divider} />
+          <a
+            href={currentLang === "DE" ? "" : ` /de${path}`}
+            className={`${styles.langBtn} ${currentLang === "DE" ? styles.active : ""}`}>
+            DE
+          </a>
+        </div>
       </div>
     </div>
   );

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

@@ -172,3 +172,25 @@
     color: $color-pink;
   }
 }
+
+.languageSwitcher {
+  display: flex;
+  gap: 8px;
+  padding: 8px 0 0;
+}
+
+.langBtn {
+  text-transform: uppercase;
+  opacity: 0.6;
+}
+.divider {
+  margin: 3px 1px;
+  width: 2px;
+  height: calc(100% - 6px);
+  background-color: $color-text;
+  opacity: 0.6;
+}
+
+.langBtn.active {
+  opacity: 1;
+}

package/lib/queries/getHomePage.ts

@@ -15,6 +15,7 @@ type HomePage = {
       hubsHeading?: string;
       hubsText?: string;
       awardsHeading?: string;
+      awardsText?: string;
       awards?: Array<{
         image: {
           sourceUrl: string;
@@ -145,6 +146,7 @@ export default async function getHomePage({
           hubsHeading
           hubsText
           awardsHeading
+          awardsText
           awards {
             image {
               sourceUrl

package/package.json

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