foundry-component-library 0.2.8 → 0.2.10

package/lib/components/ServiceHubsTeaserEffects/fluid/hooks/usePointer.tsx

@@ -0,0 +1,54 @@
+import { useThree } from '@react-three/fiber';
+import { useCallback, useEffect, useRef } from 'react';
+import { Vector2 } from 'three';
+
+type SplatStack = {
+  mouseX: number;
+  mouseY: number;
+  velocityX: number;
+  velocityY: number;
+};
+
+export const usePointer = ({ force }: { force: number }) => {
+  const { size, gl } = useThree();
+
+  const splatStack = useRef<SplatStack[]>([]).current;
+  const lastMouse = useRef(new Vector2());
+  const hasMoved = useRef(false);
+
+  const onPointerMove = useCallback(
+    (event: PointerEvent) => {
+      const rect = gl.domElement.getBoundingClientRect();
+
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+
+      const deltaX = x - lastMouse.current.x;
+      const deltaY = y - lastMouse.current.y;
+
+      if (!hasMoved.current) {
+        hasMoved.current = true;
+        lastMouse.current.set(x, y);
+        return;
+      }
+
+      lastMouse.current.set(x, y);
+
+      splatStack.push({
+        mouseX: x / size.width,
+        mouseY: 1 - y / size.height,
+        velocityX: deltaX * force,
+        velocityY: -deltaY * force,
+      });
+    },
+    [force, size.width, size.height, gl, splatStack],
+  );
+
+  useEffect(() => {
+    const el = gl.domElement;
+    el.addEventListener('pointermove', onPointerMove);
+    return () => el.removeEventListener('pointermove', onPointerMove);
+  }, [onPointerMove, gl]);
+
+  return splatStack;
+};

package/lib/components/ServiceHubsTeaserEffects/fluid/index.ts

@@ -0,0 +1,5 @@
+/// <reference path="./glsl.d.ts" />
+
+export type { FluidProps } from './types';
+export { DEFAULT_CONFIG } from './constant';
+export { Fluid } from './Fluid';

package/lib/components/ServiceHubsTeaserEffects/fluid/types.ts

@@ -0,0 +1,27 @@
+import { BlendFunction } from 'postprocessing';
+import { Texture } from 'three';
+
+export type SharedProps = {
+    blend?: number;
+    intensity?: number;
+    distortion?: number;
+    rainbow?: boolean;
+    fluidColor?: string;
+    backgroundColor?: string;
+    showBackground?: boolean;
+    blendFunction?: BlendFunction;
+};
+
+export type FluidProps = SharedProps & {
+    densityDissipation?: number;
+    pressure?: number;
+    velocityDissipation?: number;
+    force?: number;
+    radius?: number;
+    curl?: number;
+    swirl?: number;
+};
+
+export type EffectProps = Required<SharedProps> & {
+    tFluid: Texture;
+};

package/lib/components/ServiceHubsTeaserEffects/fluid/utils.ts

@@ -0,0 +1,12 @@
+import { Color, Vector3 } from 'three';
+import { REFRESH_RATE } from './constant';
+
+export const hexToRgb = (hex: string) => {
+    const color = new Color(hex);
+
+    return new Vector3(color.r, color.g, color.b);
+};
+
+export const normalizeScreenHz = (value: number, dt: number) => {
+    return Math.pow(value, dt * REFRESH_RATE);
+};

package/lib/components/ServiceHubsTeaserEffects/glass/Lens.tsx

@@ -0,0 +1,66 @@
+import * as THREE from "three";
+import { useRef, useState } from "react";
+import { createPortal, useFrame, useThree } from "@react-three/fiber";
+import { useFBO, useGLTF, MeshTransmissionMaterial } from "@react-three/drei";
+import { easing } from "maath";
+
+const Lens = ({ children, damping = 0.2, ...props }) => {
+  const ref = useRef(null);
+  const { nodes } = useGLTF("/lens-transformed.glb");
+  const buffer = useFBO();
+  const viewport = useThree((state) => state.viewport);
+  const [scene] = useState(() => new THREE.Scene());
+  useFrame((state, delta) => {
+    // Tie lens to the pointer
+    // getCurrentViewport gives us the width & height that would fill the screen in threejs units
+    // By giving it a target coordinate we can offset these bounds, for instance width/height for a plane that
+    // sits 15 units from 0/0/0 towards the camera (which is where the lens is)
+    const viewport = state.viewport.getCurrentViewport(
+      state.camera,
+      [0, 0, 15]
+    );
+    easing.damp3(
+      ref.current!.position,
+      [
+        (state.pointer.x * viewport.width) / 2,
+        (state.pointer.y * viewport.height) / 2,
+        15,
+      ],
+      damping,
+      delta
+    );
+    // This is entirely optional but spares us one extra render of the scene
+    // The createPortal below will mount the children of <Lens> into the new THREE.Scene above
+    // The following code will render that scene into a buffer, whose texture will then be fed into
+    // a plane spanning the full screen and the lens transmission material
+    state.gl.setRenderTarget(buffer);
+    state.gl.setClearColor("#f197f4");
+    state.gl.render(scene, state.camera);
+    state.gl.setRenderTarget(null);
+  });
+  return (
+    <>
+      {createPortal(children, scene)}
+      <mesh scale={[viewport.width, viewport.height, 1]}>
+        <planeGeometry />
+        <meshBasicMaterial map={buffer.texture} />
+      </mesh>
+      <mesh
+        scale={0.25}
+        ref={ref}
+        rotation-x={Math.PI / 2}
+        geometry={nodes.Cylinder.geometry}
+        {...props}>
+        <MeshTransmissionMaterial
+          buffer={buffer.texture}
+          ior={1.2}
+          thickness={1.5}
+          anisotropy={0.1}
+          chromaticAberration={0.02}
+        />
+      </mesh>
+    </>
+  );
+};
+
+export default Lens;

package/lib/components/ServiceHubsTeaserEffects/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 TileGlass from "./TileGlass";
+import TileBalls from "./TileBalls";
+import TileRays from "./TileRays";
+import TileFluid from "./TileFluid";
+import { NextLink } from "../../types";
+
+const ServiceHubsTeaserEffects = ({
+  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}>
+          <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 (
+                <div className={styles.tileWrapper} key={tile.id}>
+                  <div className={`${styles.tile} ${styles[background]}`}>
+                    {i === 0 && <TileGlass />}
+                    {i === 1 && <TileFluid />}
+                    {i === 2 && <TileRays />}
+                    {i === 3 && <TileBalls />}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default ServiceHubsTeaserEffects;

package/lib/components/ServiceHubsTeaserEffects/rays/LightSource.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { useRef, useMemo } from "react";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+import noise from "./noise";
+
+export function LightSource(props) {
+  const meshRef = useRef();
+
+  // shared time uniform
+  const time = useMemo(() => ({ value: 0 }), []);
+
+  const material = useMemo(() => {
+    const m = new THREE.MeshBasicMaterial({
+      color: 0xf197f4,
+      transparent: true,
+      onBeforeCompile: (shader) => {
+        shader.uniforms.time = time;
+
+        shader.fragmentShader = `
+          uniform float time;
+          ${shader.fragmentShader}
+        `
+          .replace(
+            `void main() {`,
+            `
+            ${noise}
+            void main() {
+          `
+          )
+          .replace(
+            `vec4 diffuseColor = vec4( diffuse, opacity );`,
+            `
+            vec2 uv = vUv - 0.5;
+            vec3 col = vec3(0.0);
+
+            float f = smoothstep(0.5, 0.0, length(uv));
+            f = pow(f, 4.0);
+
+            float n = snoise(vec3(uv * 7.0, time)) * 0.5 + 0.5;
+            n = n * 0.5 + 0.5;
+
+            col = mix(col, diffuse, f * n);
+            vec4 diffuseColor = vec4(col, opacity);
+          `
+          );
+      },
+    });
+
+    m.defines = { USE_UV: "" };
+    return m;
+  }, [time]);
+
+  useFrame((_, delta) => {
+    time.value += delta;
+  });
+
+  return (
+    <mesh ref={meshRef} material={material} {...props}>
+      <circleGeometry args={[50, 64]} />
+    </mesh>
+  );
+}

package/lib/components/ServiceHubsTeaserEffects/rays/noise.js

@@ -0,0 +1,97 @@
+const noise = `
+vec4 permute(vec4 x) {
+  return mod(((x * 34.0) + 1.0) * x, 289.0);
+}
+
+vec4 taylorInvSqrt(vec4 r) {
+  return 1.79284291400159 - 0.85373472095314 * r;
+}
+
+vec3 fade(vec3 t) {
+  return t * t * t * (t * (t * 6.0 - 15.0) + 10.0);
+}
+
+float snoise(vec3 v) {
+  const vec2  C = vec2(1.0 / 6.0, 1.0 / 3.0);
+  const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+
+  vec3 i  = floor(v + dot(v, C.yyy));
+  vec3 x0 = v - i + dot(i, C.xxx);
+
+  vec3 g = step(x0.yzx, x0.xyz);
+  vec3 l = 1.0 - g;
+  vec3 i1 = min(g.xyz, l.zxy);
+  vec3 i2 = max(g.xyz, l.zxy);
+
+  vec3 x1 = x0 - i1 + C.xxx;
+  vec3 x2 = x0 - i2 + C.yyy;
+  vec3 x3 = x0 - D.yyy;
+
+  i = mod(i, 289.0);
+  vec4 p = permute(
+    permute(
+      permute(
+        i.z + vec4(0.0, i1.z, i2.z, 1.0)
+      ) + i.y + vec4(0.0, i1.y, i2.y, 1.0)
+    ) + i.x + vec4(0.0, i1.x, i2.x, 1.0)
+  );
+
+  float n_ = 1.0 / 7.0;
+  vec3 ns = n_ * D.wyz - D.xzx;
+
+  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
+  vec4 x_ = floor(j * ns.z);
+  vec4 y_ = floor(j - 7.0 * x_);
+
+  vec4 x = x_ * ns.x + ns.yyyy;
+  vec4 y = y_ * ns.x + ns.yyyy;
+  vec4 h = 1.0 - abs(x) - abs(y);
+
+  vec4 b0 = vec4(x.xy, y.xy);
+  vec4 b1 = vec4(x.zw, y.zw);
+
+  vec4 s0 = floor(b0) * 2.0 + 1.0;
+  vec4 s1 = floor(b1) * 2.0 + 1.0;
+  vec4 sh = -step(h, vec4(0.0));
+
+  vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;
+  vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;
+
+  vec3 p0 = vec3(a0.xy, h.x);
+  vec3 p1 = vec3(a0.zw, h.y);
+  vec3 p2 = vec3(a1.xy, h.z);
+  vec3 p3 = vec3(a1.zw, h.w);
+
+  vec4 norm = taylorInvSqrt(
+    vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3))
+  );
+  p0 *= norm.x;
+  p1 *= norm.y;
+  p2 *= norm.z;
+  p3 *= norm.w;
+
+  vec4 m = max(
+    0.6 - vec4(
+      dot(x0, x0),
+      dot(x1, x1),
+      dot(x2, x2),
+      dot(x3, x3)
+    ),
+    0.0
+  );
+  m = m * m;
+
+  return 42.0 *
+    dot(
+      m * m,
+      vec4(
+        dot(p0, x0),
+        dot(p1, x1),
+        dot(p2, x2),
+        dot(p3, x3)
+      )
+    );
+}
+`;
+
+export default noise;

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

@@ -0,0 +1,135 @@
+@use "../variables" as *;
+
+.benefits {
+  overflow: hidden;
+}
+
+.wrapper {
+  width: 100%;
+  // overflow-x: scroll;
+  user-select: none;
+}
+
+.tiles {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding-bottom: 64px;
+
+  @media #{$QUERY-sm} {
+    padding-bottom: 32px;
+  }
+}
+
+.tileWrapper {
+  z-index: 0;
+  position: relative;
+  width: calc(25% - 12px);
+  max-width: 100%;
+  height: 351px;
+
+  &:hover {
+    z-index: 1;
+  }
+
+  @media screen and (max-width: $screen-sm) {
+    max-width: 80%;
+    height: 300px;
+  }
+
+  &:first-child {
+    @media #{$QUERY-sm} {
+      margin-left: 20px;
+    }
+  }
+
+  &:last-child {
+    @media #{$QUERY-sm} {
+      margin-right: 20px;
+    }
+  }
+}
+
+.tile {
+  flex-shrink: 0;
+  white-space: pre-wrap;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  box-sizing: border-box;
+  background-color: $color-pink;
+  color: $color-brown;
+  font-size: 25px;
+  width: 100%;
+  height: 100%;
+  font-family: $font-secondary;
+
+  path {
+    stroke: $color-brown;
+  }
+
+  &.yellow {
+    background-color: $color-yellow;
+    color: $color-blue;
+
+    path {
+      stroke: $color-blue;
+    }
+  }
+
+  &.brown {
+    background-color: $color-brown;
+    color: $color-pink;
+
+    path {
+      stroke: $color-pink;
+    }
+  }
+
+  &.blue {
+    background-color: $color-blue;
+    color: $color-white;
+
+    path {
+      stroke: $color-white;
+    }
+  }
+
+  // &:hover {
+  //   .face {
+  //     display: none;
+  //   }
+
+  //   .tails {
+  //     display: block;
+  //   }
+  // }
+}
+
+.text {
+  margin-bottom: 42px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.face {
+  display: block;
+  font-size: 35px;
+}
+
+// .tails {
+//   text-align: left;
+//   padding-left: 30px;
+//   display: none;
+//   font-size: 21px;
+//   font-family: $font-secondary;
+// }
+
+// .tailsText {
+//   margin-bottom: 30px;
+// }

package/lib/index.ts

@@ -31,6 +31,7 @@ import OfficesTeaser from "./components/OfficesTeaser";
 import PartnerNetwork from "./components/PartnerNetwork";
 import QuoteSection from "./components/QuoteSection";
 import ServiceHubsTeaser from "./components/ServiceHubsTeaser";
+import ServiceHubsTeaserEffects from "./components/ServiceHubsTeaserEffects";
 import PostContent from "./components/single/Content";
 import PostTop from "./components/single/Top";
 import TeamBenefits from "./components/TeamBenefits";
@@ -74,6 +75,7 @@ export {
   PartnerNetwork,
   QuoteSection,
   ServiceHubsTeaser,
+  ServiceHubsTeaserEffects,
   PostContent,
   PostTop,
   TeamBenefits,

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.10",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -63,6 +63,10 @@
     "**/*.css"
   ],
   "dependencies": {
-    "graphql-request": "^7.1.2"
+    "@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"
   }
 }