foundry-component-library 0.0.0 → 0.0.2

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

@@ -0,0 +1,154 @@
+@use "../variables" as *;
+
+.heading {
+  font-size: 42px;
+  margin-bottom: 64px;
+  color: $color-brown;
+}
+
+.items {
+  padding-bottom: 64px;
+}
+
+.item {
+  border-top: solid 1px $color-brown;
+  color: $color-brown;
+
+  &.active {
+    .rows {
+      display: block;
+    }
+
+    .icon span {
+      top: -2px;
+    }
+  }
+}
+
+.top {
+  padding: 32px 0;
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.title {
+  font-size: 34px;
+  font-family: $font-secondary;
+}
+
+.text {
+  width: 310px;
+  max-width: 100%;
+  font-size: 18px;
+
+  @media #{$QUERY-md} {
+    width: 600px;
+    margin-bottom: 30px;
+  }
+}
+
+.icon {
+  width: 46px;
+  height: 46px;
+  border-radius: 50%;
+  border: solid 2px $color-brown;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px;
+  line-height: 10px;
+  background-color: transparent;
+  cursor: pointer;
+  color: $color-brown;
+  flex-shrink: 0;
+
+  span {
+    position: relative;
+  }
+}
+
+.rows {
+  display: none;
+}
+
+.row {
+  padding-bottom: 64px;
+}
+
+.rowWrapper {
+  padding: 24px 0;
+  display: flex;
+  justify-content: space-between;
+
+  @media #{$QUERY-md} {
+    display: block;
+  }
+}
+
+.right {
+  width: 688px;
+  max-width: 100%;
+
+  @media #{$QUERY-md} {
+    width: 100%;
+  }
+}
+
+.cases {
+  display: flex;
+}
+
+.case {
+  width: 300px;
+  margin-right: 20px;
+  cursor: pointer;
+
+  &:hover {
+    color: $color-blue;
+
+    path {
+      stroke: $color-blue;
+    }
+  }
+
+  path {
+    stroke: $color-brown;
+    stroke-width: 2px;
+  }
+}
+
+.caseImage {
+  width: 300px;
+  height: 220px;
+  position: relative;
+  margin-bottom: 20px;
+
+  &:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+  }
+
+  img {
+    object-fit: cover;
+    z-index: 1;
+  }
+}
+
+.caseTitle {
+  font-size: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 10px;
+
+  svg {
+    flex-shrink: 0;
+    position: relative;
+  }
+}

package/lib/components/CaseStudyTeaser/index.tsx

@@ -0,0 +1,77 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { translate } from "../../utils";
+import styles from "./styles.module.scss";
+import Container from "../Container";
+import { Case, NextImage } from "../../types";
+import useDrag from "../../hooks/useDrag";
+
+const CaseStudyTeaser = ({
+  heading,
+  cases,
+  Image,
+}: {
+  heading: string;
+  cases: Case[];
+  Image: NextImage;
+}) => {
+  const headingRef = useRef<HTMLDivElement>(null);
+  const casesRef = useRef<HTMLDivElement>(null);
+  const [padding, setPadding] = useState(0);
+  const { handleMouseDown, handleMouseMove, handleMouseUp, dragStyle } =
+    useDrag(casesRef);
+
+  useEffect(() => {
+    if (headingRef.current) {
+      setPadding(headingRef.current.offsetLeft);
+    }
+  }, [headingRef]);
+
+  if (!cases) return;
+
+  return (
+    <div className={styles.caseStudyTeaser}>
+      <Container>
+        <div ref={headingRef} className={styles.heading}>
+          {heading}
+        </div>
+      </Container>
+
+      <div
+        className={styles.cases}
+        ref={casesRef}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+        style={{
+          ...(dragStyle as React.CSSProperties),
+          paddingLeft: padding,
+          paddingRight: padding,
+        }}
+      >
+        {cases.map((el) => {
+          return (
+            <div key={el.id} className={styles.case}>
+              <Image
+                className={styles.image}
+                src={el.case?.mainImage?.sourceUrl || ""}
+                alt={el.title}
+                fill
+              />
+              <div className={styles.texts}>
+                <div className={styles.caption}>{el.case?.caption}</div>
+                <div className={styles.title}>{el.title}</div>
+                <a href={el.uri} className={styles.button}>
+                  {translate("See More")}
+                </a>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default CaseStudyTeaser;

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

@@ -0,0 +1,88 @@
+@use "../variables" as *;
+
+.caseStudyTeaser {
+  padding: 64px 0;
+}
+
+.heading {
+  font-size: 42px;
+  font-family: $font-secondary;
+  color: $color-brown;
+  margin-bottom: 64px;
+
+  @media screen and (max-width: $screen-sm) {
+    font-size: 31px;
+    margin-bottom: 30px;
+  }
+}
+
+.cases {
+  display: flex;
+  gap: 16px;
+}
+
+.case {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  position: relative;
+  width: 360px;
+  height: 720px;
+  padding: 40px;
+  transition: width 0.3s;
+
+  @media screen and (max-width: $screen-sm) {
+    max-width: 90%;
+    height: 500px;
+    padding: 20px;
+  }
+
+  &:hover {
+    width: 500px;
+  }
+
+  &:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.4);
+    z-index: 1;
+  }
+}
+
+.image {
+  object-fit: cover;
+  z-index: 0;
+}
+
+.texts {
+  position: relative;
+  z-index: 2;
+  color: $color-white;
+}
+
+.caption {
+  text-transform: uppercase;
+  font-size: 20px;
+}
+
+.title {
+  font-size: 42px;
+  font-family: $font-secondary;
+  margin-bottom: 40px;
+  line-height: 1.2;
+  width: 300px;
+
+  @media screen and (max-width: $screen-sm) {
+    font-size: 31px;
+    margin-bottom: 20px;
+  }
+}
+
+.button {
+  @extend .button--white-transparent;
+}

package/lib/components/ContactButton/index.tsx

@@ -0,0 +1,14 @@
+import styles from "./styles.module.scss";
+import Unicorn from "../../assets/svg/unicorn.svg?react";
+import { NextLink } from "../../types";
+
+const ContactButton = ({ Link }: { Link: NextLink }) => {
+  return (
+    <Link className={styles.contactButton} href="/contact" scroll={false}>
+      <Unicorn />
+      {`Get in\ntouch!`}
+    </Link>
+  );
+};
+
+export default ContactButton;

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

@@ -0,0 +1,25 @@
+@use "../variables" as *;
+
+.contactButton {
+  position: fixed;
+  bottom: 10%;
+  right: 0;
+  background-color: $color-yellow;
+  color: $color-blue;
+  width: 116px;
+  height: 47px;
+  display: flex;
+  gap: 10px;
+  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+  align-items: center;
+  padding: 8px 8px 8px 16px;
+  line-height: 1;
+  border-radius: 25px 0 0 25px;
+  z-index: 3;
+  font-size: 14px;
+  box-sizing: border-box;
+
+  svg {
+    flex-shrink: 0;
+  }
+}

package/lib/components/ContactTeaser/index.tsx

@@ -0,0 +1,36 @@
+import styles from "./styles.module.scss";
+import Container from "../Container";
+import { translate } from "../../utils";
+import { NextLink } from "../../types";
+
+const ContactTeaser = ({
+  heading,
+  text,
+  theme = "yellow",
+  Link,
+}: {
+  heading: string;
+  text?: string;
+  theme?: "yellow" | "pink";
+  Link: NextLink;
+}) => {
+  return (
+    <div className={`${styles.contactTeaser} ${styles[theme]}`}>
+      <Container>
+        <div className={styles.wrapper}>
+          {heading && (
+            <div className={`${styles.heading} ${!text ? styles.margin : ""}`}>
+              {heading}
+            </div>
+          )}
+          {text && <div className={styles.text}>{text}</div>}
+          <Link href="/contact" className={styles.button}>
+            {translate("Contact Us")}
+          </Link>
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default ContactTeaser;

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

@@ -0,0 +1,46 @@
+@use "../variables" as *;
+
+.contactTeaser {
+  padding: 64px 0;
+  background-color: $color-yellow;
+  color: $color-brown;
+
+  &.pink {
+    background-color: $color-pink;
+    color: $color-brown;
+
+    .button {
+      @extend .button--brown;
+    }
+  }
+}
+
+.wrapper {
+  width: 800px;
+  max-width: 100%;
+}
+
+.heading {
+  font-family: $font-secondary;
+  font-size: 54px;
+  color: $color-brown;
+  margin-bottom: 24px;
+  white-space: pre-wrap;
+
+  @media screen and (max-width: $screen-sm) {
+    font-size: 31px;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &.margin {
+    margin-bottom: 64px;
+  }
+}
+
+.text {
+  font-size: 20px;
+  margin-bottom: 48px;
+}

package/lib/components/Container/index.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { CSSProperties } from "react";
+import styles from "./styles.module.scss";
+
+const Container = ({
+  children,
+  style,
+}: {
+  children: React.ReactNode;
+  style?: CSSProperties;
+}) => {
+  return (
+    <div className={styles.container} style={{ ...style }}>
+      {children}
+    </div>
+  );
+};
+
+export default Container;

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

@@ -0,0 +1,22 @@
+@use "../variables" as *;
+
+.container {
+  width: 1340px;
+  max-width: 100%;
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 0 30px;
+
+  @media screen and (max-width: $screen-lg) {
+    width: 1000px;
+  }
+
+  @media screen and (max-width: $screen-md) {
+    width: 900px;
+  }
+
+  @media screen and (max-width: $screen-sm) {
+    width: 100%;
+    padding: 0 20px;
+  }
+}

package/lib/components/DoubleTiles/Tile.tsx

@@ -0,0 +1,28 @@
+import styles from "./styles.module.scss";
+import Plus from "../../assets/svg/plus.svg?react";
+
+const Tile = ({
+  heading,
+  text,
+  background,
+}: {
+  heading: string;
+  text: string;
+  background: "pink" | "yellow" | "brown" | "gray";
+}) => {
+  return (
+    <div className={`${styles.tile} ${styles[background]}`}>
+      <div className={styles.sideOne}>
+        <div className={styles.heading}>{heading}</div>
+        <div>
+          <Plus />
+        </div>
+      </div>
+      <div className={styles.sideTwo}>
+        <div className={styles.text}>{text}</div>
+      </div>
+    </div>
+  );
+};
+
+export default Tile;

package/lib/components/DoubleTiles/index.tsx

@@ -0,0 +1,43 @@
+import Container from "../Container";
+import TextSection from "../TextSection";
+import styles from "./styles.module.scss";
+import Tile from "./Tile";
+
+const DoubleTiles = ({
+  heading,
+  tiles,
+}: {
+  heading: string;
+  tiles: {
+    heading?: string;
+    text?: string;
+  }[];
+}) => {
+  return (
+    <div className={styles.doubleTiles}>
+      <TextSection caption="PROCESS" heading={heading} />
+      <Container>
+        <div className={styles.wrapper}>
+          <div className={styles.tiles}>
+            {tiles.map((tile, i) => {
+              let background: "pink" | "yellow" | "brown" | "gray" = "pink";
+              if (i % 3 === 1) background = "gray";
+              if (i % 3 === 2) background = "brown";
+
+              return (
+                <Tile
+                  key={tile.text}
+                  heading={tile.heading || ""}
+                  text={tile.text || ""}
+                  background={background}
+                />
+              );
+            })}
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default DoubleTiles;

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

@@ -0,0 +1,87 @@
+@use "../variables" as *;
+
+.tiles {
+  padding-bottom: 64px;
+  display: flex;
+  gap: 20px;
+}
+
+.tile {
+  white-space: pre-wrap;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: 400px;
+  height: 400px;
+  box-sizing: border-box;
+  background-color: $color-pink;
+  color: $color-brown;
+  font-family: $font-secondary;
+  flex-shrink: 0;
+
+  @media screen and (max-width: $screen-sm) {
+    max-width: 90%;
+    height: 300px;
+  }
+
+  &.yellow {
+    background-color: $color-yellow;
+    color: $color-blue;
+
+    path {
+      stroke: $color-blue;
+    }
+  }
+
+  &.brown {
+    background-color: $color-brown;
+    color: $color-pink;
+
+    path {
+      stroke: $color-pink;
+    }
+  }
+
+  &.gray {
+    background-color: $color-gray-light;
+    color: $color-blue;
+
+    path {
+      stroke: $color-blue;
+    }
+  }
+
+  &:hover {
+    .sideOne {
+      display: none;
+    }
+
+    .sideTwo {
+      display: block;
+    }
+  }
+}
+
+.heading {
+  font-size: 42px;
+  margin-bottom: 42px;
+
+  @media screen and (max-width: $screen-sm) {
+    margin-bottom: 20px;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.text {
+  font-size: 32px;
+}
+
+.sideTwo {
+  display: none;
+}