@hellobetterdigitalnz/selwynui 0.0.1-1

package/src/Components/Shared/Container/container.module.scss

@@ -0,0 +1,13 @@
+.container {
+    padding: 0px 14px 0 14px;
+    margin: 0px auto;
+
+  &.default{
+    max-width: 1428px;
+  }
+
+   @media screen and (min-width: 1748px) {
+       padding: 0px 14px 0 14px;
+   }
+
+}

package/src/Components/Shared/ElementHolder/ElementHolder.tsx

@@ -0,0 +1,40 @@
+import ElementHolderProps from "./ElementHolderProps";
+import styles from "./elementHolder.module.scss";
+import cslx from "clsx";
+
+const ElementHolder = (props: ElementHolderProps) => {
+
+    const {
+        children,
+        paddingTop = 'none',
+        paddingBottom = 'none',
+        marginBottom = 'none',
+        marginTop = 'none',
+        pillar = 'visit',
+        level = 'primary',
+        id = '',
+        title
+    } = props
+
+    const className = cslx(
+        styles.element,
+        `${title}`,
+        {
+            [styles[`element--pt-${paddingTop}`]]: paddingTop,
+            [styles[`element--pb-${paddingBottom}`]]: paddingBottom,
+            [styles[`element--mt-${marginTop}`]]: marginTop,
+            [styles[`element--mb-${marginBottom}`]]: marginBottom
+        },
+
+        pillar,
+        `${pillar}--${level}`
+    );
+
+    return <div id={id} className={className}>
+        <div className={styles.elementInner}>
+            {children}
+        </div>
+    </div>
+}
+
+export default ElementHolder

package/src/Components/Shared/ElementHolder/ElementHolderProps.tsx

@@ -0,0 +1,18 @@
+import { ReactNode } from "react"
+
+type SpacingOption = "none" | "sm" | "md" | "lg"
+
+interface ElementHolderProps {
+    children?: ReactNode
+    paddingTop?: SpacingOption
+    paddingBottom?: SpacingOption
+    marginBottom?: SpacingOption
+    marginTop?: SpacingOption
+    level?: 'primary' | 'secondary' | 'light'
+    pillar?: 'main' | 'live' | 'visit' | 'taste' | 'business' | 'participate'
+    inverse?: 'string'
+    id?: any
+    title?: string;
+}
+
+export default ElementHolderProps;

package/src/Components/Shared/ElementHolder/elementHolder.module.scss

@@ -0,0 +1,189 @@
+.element {
+    background-color: var(--color-block-bg);
+    color: var(--color-block-text);
+    position: relative;
+    
+    &Inner {
+        position: relative;
+        z-index: 1;
+    }
+
+    // Padding Top
+    &--pt-none {
+        padding-top: 0;
+    }
+
+    &--pt-xsm {
+        padding-top: 72px;
+    }
+
+    &--pt-sm {
+        padding-top: 90px;
+    }
+
+    &--pt-md {
+        padding-top: 120px;
+    }
+
+    &--pt-lg {
+        padding-top: 144px;
+    }
+
+    // Padding Bottom
+    &--pb-none {
+        padding-bottom: 0;
+    }
+
+    &--pb-xsm {
+        padding-bottom: 40px;
+    }
+
+    &--pb-sm {
+        padding-bottom: 48px;
+    }
+
+    &--pb-md {
+        padding-bottom: 90px;
+    }
+
+    &--pb-lg {
+        padding-bottom: 120px;
+    }
+
+    &--pb-xl {
+        padding-bottom: 144px;
+    }
+
+    // Margin Top
+    &--mt-none {
+        margin-top: 0;
+    }
+
+    &--mt-xsm {
+        margin-top: 72px;
+    }
+
+    &--mt-sm {
+        margin-top: 90px;
+    }
+
+    &--mt-md {
+        margin-top: 120px;
+    }
+
+    &--mt-lg {
+        margin-top: 144px;
+    }
+
+    // Margin Bottom
+    &--mb-none {
+        margin-bottom: 0;
+    }
+
+    &--mb-xsm {
+        margin-bottom: 72px;
+    }
+
+    &--mb-sm {
+        margin-bottom: 90px;
+    }
+
+    &--mb-md {
+        margin-bottom: 120px;
+    }
+
+    &--mb-lg {
+        margin-bottom: 144px;
+    }
+
+    @media (max-width: 992px) {
+
+        // Padding Top
+        &--pt-none {
+            padding-top: 0;
+        }
+
+        &--pt-xsm {
+            padding-top: 36px;
+        }
+
+        &--pt-sm {
+            padding-top: 45px;
+        }
+
+        &--pt-md {
+            padding-top: 60px;
+        }
+
+        &--pt-lg {
+            padding-top: 72px;
+        }
+
+        // Padding Bottom
+        &--pb-none {
+            padding-bottom: 0;
+        }
+
+        &--pb-xsm {
+            padding-bottom: 20px;
+        }
+
+        &--pb-sm {
+            padding-bottom: 24px;
+        }
+
+        &--pb-md {
+            padding-bottom: 45px;
+        }
+
+        &--pb-lg {
+            padding-bottom: 60px;
+        }
+
+        &--pb-xl {
+            padding-bottom: 72px;
+        }
+
+        // Margin Top
+        &--mt-none {
+            margin-top: 0;
+        }
+
+        &--mt-xsm {
+            margin-top: 36px;
+        }
+
+        &--mt-sm {
+            margin-top: 45px;
+        }
+
+        &--mt-md {
+            margin-top: 60px;
+        }
+
+        &--mt-lg {
+            margin-top: 72px;
+        }
+
+        // Margin Bottom
+        &--mb-none {
+            margin-bottom: 0;
+        }
+
+        &--mb-xsm {
+            margin-bottom: 36px;
+        }
+
+        &--mb-sm {
+            margin-bottom: 45px;
+        }
+
+        &--mb-md {
+            margin-bottom: 60px;
+        }
+
+        &--mb-lg {
+            margin-bottom: 72px;
+        }
+    }
+}

package/src/Components/Shared/Hook/useScrollFadeIn/useScrollFadeIn.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useRef, useState } from 'react';
+
+const useScrollFadeIn = (threshold: number = 0) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const ref = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsVisible(entry.isIntersecting);
+      },
+      { threshold }
+    );
+
+    const element = ref.current;
+    if (element) observer.observe(element);
+
+    return () => {
+      if (element) observer.unobserve(element);
+    };
+  }, [threshold]);
+
+  const className = isVisible ? 'visible' : '';
+
+  return { ref, className, isVisible };
+};
+
+export default useScrollFadeIn;

package/src/Components/Shared/PillarIcon/PillarIcon.stories.tsx

@@ -0,0 +1,31 @@
+import PillarIcon from "./PillarIcon";
+
+export default {
+  title: "Shared/PillarIcon",
+  component: PillarIcon,
+  tags: ["autodocs"],
+};
+
+export const Visit = {
+  args: {
+    pillar: "visit",
+  },
+};
+
+export const Live = {
+  args: {
+    pillar: "live",
+  },
+};
+
+export const Business = {
+  args: {
+    pillar: "business",
+  },
+};
+
+export const Participate = {
+  args: {
+    pillar: "participate",
+  },
+};

package/src/Components/Shared/PillarIcon/PillarIcon.tsx

@@ -0,0 +1,58 @@
+import PillarIconsProps from "./PillarIconsProps.tsx";
+
+const PillarIcon = ({ pillar }: PillarIconsProps) => {
+
+  if (pillar === 'visit') {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" width="935" height="930" viewBox="0 0 935 930" fill="none">
+        <g opacity="0.03">
+          <path d="M454.02 0C203.235 0 0 202.405 0 452.165H454.02V0Z" fill="currentColor"/>
+          <path d="M454.02 477.687C203.235 477.687 2.51136e-06 680.092 2.51136e-06 929.852H454.02V477.687Z" fill="currentColor"/>
+          <path d="M480.98 0.147694C731.765 0.147694 935 202.553 935 452.313H480.98V0.147694Z" fill="currentColor"/>
+          <path d="M480.98 477.835C731.765 477.835 935 680.239 935 930H480.98V477.835Z" fill="currentColor"/>
+        </g>
+      </svg>
+    );
+  }
+  if (pillar === 'live') {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" width="935" height="935" viewBox="0 0 935 935" fill="none">
+        <g opacity="0.03">
+          <path d="M481.047 480.4C481.047 731.423 684.334 935 935 935V480.4H481.047Z" fill="currentColor"/>
+          <path d="M935 454.749C935 203.725 731.713 0.148275 481.047 0.148275V454.749H935Z" fill="currentColor"/>
+          <path d="M453.953 934.852C203.287 934.852 0 731.275 0 480.251H453.953V934.852Z" fill="currentColor"/>
+          <path d="M0.150038 0C250.816 0 454.103 203.577 454.103 454.6H0.150038V0Z" fill="currentColor"/>
+        </g>
+      </svg>
+    );
+  }
+  if (pillar === 'business') {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" width="938" height="935" viewBox="0 0 938 935" fill="none">
+        <g opacity="0.04">
+          <path d="M938 480.48C686.479 480.48 482.528 684.005 482.528 935H938V480.48Z" fill="currentColor"/>
+          <path d="M938 0.296748C686.479 0.296748 482.528 203.822 482.528 454.817H938V0.296748Z" fill="currentColor"/>
+          <path d="M0 934.703C0 683.709 203.952 480.183 455.472 480.183V934.703H0Z" fill="currentColor"/>
+          <path d="M0 454.52C0 203.525 203.952 0 455.472 0V454.52H0Z" fill="currentColor"/>
+        </g>
+      </svg>
+    );
+  }
+  if (pillar === 'participate') {
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" width="937" height="934" viewBox="0 0 937 934" fill="none">
+        <g opacity="0.08">
+          <path d="M4.35945e-07 454.114C251.202 454.114 454.924 250.755 454.924 0H4.35945e-07V454.114Z" fill="currentColor"/>
+          <path d="M454.924 933.852C454.924 683.097 251.202 479.738 0 479.738V933.852H454.924Z" fill="currentColor"/>
+          <path d="M937 454.262C685.798 454.262 482.076 250.903 482.076 0.148117H937V454.262Z" fill="currentColor"/>
+          <path d="M482.076 934C482.076 683.245 685.798 479.886 937 479.886V934H482.076Z" fill="currentColor"/>
+        </g>
+      </svg>
+    );
+  }
+  if (pillar === 'taste') {
+    return <div className="pillarIcon taste"></div>;
+  }
+};
+
+export default PillarIcon;

package/src/Components/Shared/PillarIcon/PillarIconsProps.tsx

@@ -0,0 +1,5 @@
+interface PillarIconsProps {
+  pillar: 'main' | 'visit' | 'live' | 'business' | 'participate' | 'taste'
+}
+
+export default PillarIconsProps;

package/src/Components/Shared/PillarLogo/PillarLogo.tsx

@@ -0,0 +1,184 @@
+
+interface PillarLogoProps{
+  brandPillar?: string
+  brandFullLogo?: boolean
+}
+
+const PillarLogo = ({brandPillar = 'visit', brandFullLogo } : PillarLogoProps) => {
+
+  if (brandPillar === 'taste') {
+
+    if(brandFullLogo){
+      return <svg xmlns="http://www.w3.org/2000/svg" width="193" height="67" viewBox="0 0 193 67" fill="none">
+        <path d="M79.6929 2.45439H70.1681V-0.158203H92.3385V2.45439H82.7753V25.7832H79.6929V2.45439Z" fill="currentColor"/>
+        <path d="M101.117 22.6947C100.332 24.8411 97.8524 26.1814 94.8466 26.1814C91.8407 26.1814 89.0072 24.3264 89.0072 20.9465C89.0072 17.5666 91.5823 15.8961 95.239 15.4591L101.04 14.6918V13.6332C101.04 10.7292 99.2883 9.48606 96.809 9.48606C94.3296 9.48606 92.9033 10.7584 92.6927 12.8659H89.8304C90.1846 9.15584 93.0565 7.04829 96.8855 7.04829C101.26 7.04829 103.979 9.15584 103.979 13.5555V21.9469C103.979 23.2872 104.056 24.5595 104.41 25.7638H101.442C101.222 24.744 101.117 23.5494 101.117 22.6753V22.6947ZM101.04 16.9548L96.1293 17.4987C93.8701 17.8289 92.013 18.4116 92.013 20.8785C92.013 22.5879 93.2 23.899 95.4496 23.899C98.2449 23.899 101.04 22.1217 101.04 18.5961V16.9548Z" fill="currentColor"/>
+        <path d="M109.167 20.3638C109.388 22.8695 111.675 23.9282 114.107 23.9282C116.538 23.9282 118.367 22.7627 118.367 20.8008C118.367 19.4605 117.505 18.5864 115.217 18.1494L112.03 17.4987C109.129 16.9548 107.013 15.7505 107.013 12.5551C107.013 9.3598 109.732 7.06771 113.714 7.06771C117.697 7.06771 120.415 8.8839 120.769 12.3415H118.013C117.802 10.4864 116.184 9.39865 113.714 9.39865C111.245 9.39865 109.77 10.5933 109.77 12.3803C109.77 13.944 110.843 14.5947 112.92 14.9929L116.5 15.6825C119.439 16.2652 121.152 17.722 121.152 20.6648C121.152 23.8602 118.175 26.23 114.136 26.23C109.837 26.23 106.611 24.3069 106.286 20.3832H109.148L109.167 20.3638Z" fill="currentColor"/>
+        <path d="M133.099 25.5695C131.778 25.9677 130.735 26.0746 129.95 26.0746C126.657 26.0746 124.972 24.4721 124.972 21.0922V9.78714H122.32V7.49505H124.972V2.84288H127.911V7.49505H132.64V9.78714H127.872V20.9465C127.872 22.8695 128.839 23.53 130.486 23.53C131.165 23.53 131.95 23.462 133.099 23.0929V25.5695Z" fill="currentColor"/>
+        <path d="M142.729 26.2203C137.646 26.2203 134.056 22.6267 134.056 16.7314C134.056 10.8361 137.742 7.06771 142.547 7.06771C147.889 7.06771 150.282 11.3897 150.282 16.0807V17.2753H136.957C137.101 21.4904 139.283 23.8213 142.729 23.8213C145.161 23.8213 146.635 22.617 147.382 20.4026H150.177C149.354 24.2875 146.233 26.2203 142.729 26.2203ZM137.072 15.0997H147.391C147.315 11.9335 145.783 9.50548 142.557 9.50548C139.723 9.50548 137.579 11.3605 137.072 15.0997Z" fill="currentColor"/>
+        <path d="M75.5384 51.9868C75.8256 54.9685 78.4772 55.9106 81.1671 55.9106C83.6752 55.9106 85.7908 54.8908 85.7908 52.7444C85.7908 51.1127 84.7473 50.3455 81.9617 49.8696L77.4433 49.0343C73.4324 48.3059 70.35 46.3052 70.35 41.6919C70.35 36.7872 74.7247 33.5919 80.5641 33.5919C87.1597 33.5919 90.9122 36.5347 91.4195 41.5559H85.5802C85.36 39.3026 83.4263 38.0983 80.6406 38.0983C78.0943 38.0983 76.4095 39.3706 76.4095 41.2257C76.4095 43.0807 77.6635 43.5178 80.095 43.984L84.9675 44.926C89.4093 45.7224 91.879 48.0534 91.879 52.3073C91.879 57.3189 87.2937 60.4074 81.3873 60.4074C74.83 60.4074 70.1011 57.6782 69.565 51.9771H75.5479L75.5384 51.9868Z" fill="currentColor"/>
+        <path d="M102.476 60.4171C96.9908 60.4171 92.7693 56.7847 92.7693 50.6757C92.7693 44.5667 97.0004 40.9343 102.409 40.9343C108.43 40.9343 111.398 45.334 111.398 50.3843V52.016H98.5416C98.8671 54.5994 100.121 56.1243 102.486 56.1243C104.209 56.1243 105.348 55.3279 105.817 53.9099H111.331C110.546 57.9404 107.215 60.4171 102.486 60.4171H102.476ZM98.6374 48.7915H105.836C105.836 46.8976 104.687 45.198 102.399 45.198C100.322 45.198 99.0681 46.5091 98.6374 48.7915Z" fill="currentColor"/>
+        <path d="M113.542 59.9897V33.2422H119.525V59.9897H113.542Z" fill="currentColor"/>
+        <path d="M141.514 53.8807L144.74 41.3811H150.541L144.845 59.9897H138.824L135.741 47.9271H135.665L132.544 59.9897H126.523L120.827 41.3811H126.772L129.998 53.8807H130.103L133.042 41.3811H138.412L141.418 53.8807H141.514Z" fill="currentColor"/>
+        <path d="M158.027 41.3811L162.468 54.3955H162.535L166.795 41.3811H172.673L165.723 60.0966C163.895 64.9624 161.243 66.7495 156.907 66.7495C156.189 66.7495 155.222 66.7106 154.437 66.5649V62.1264C154.935 62.2041 155.155 62.2041 155.509 62.2041C157.404 62.2041 158.228 61.8739 158.984 59.8052L151.996 41.3811H158.027Z" fill="currentColor"/>
+        <path d="M179.91 44.2462C180.81 42.3523 182.81 40.9343 185.567 40.9343C189.798 40.9343 192.373 43.5469 192.373 48.0534V59.9703H186.352V49.5005C186.352 46.917 185.347 45.6156 183.308 45.6156C181.441 45.6156 179.977 46.8491 179.977 50.0153V59.9703H173.994V41.3616H179.9V44.2365L179.91 44.2462Z" fill="currentColor"/>
+        <path d="M31.0826 61.2232C47.2893 61.2232 60.423 47.898 60.423 31.4552H31.0826V61.2232Z" fill="currentColor"/>
+        <path d="M31.0826 29.7749C47.2893 29.7749 60.423 16.4497 60.423 0.00690882H31.0826V29.7749Z" fill="currentColor"/>
+        <path d="M29.3404 61.2232C13.1338 61.2232 0 47.898 0 31.4552H29.3404V61.2232Z" fill="currentColor"/>
+        <path d="M29.3404 29.7652C13.1338 29.7652 5.84269e-08 16.44 5.84269e-08 -0.00280361H29.3404V29.7652Z" fill="currentColor"/>
+      </svg>
+    }
+
+    return <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120" fill="none">
+      <path d="M61.678 119.25C93.8369 119.25 119.898 93.2965 119.898 61.2707L61.678 61.2707L61.678 119.25Z" fill="currentColor" />
+      <path d="M61.678 57.9982C93.8369 57.9982 119.898 32.0447 119.898 0.0189667L61.678 0.0189616L61.678 57.9982Z" fill="currentColor" />
+      <path d="M58.2208 119.231C26.0618 119.231 0.000330335 93.2775 0.000333134 61.2518L58.2208 61.2518L58.2208 119.231Z" fill="currentColor" />
+      <path d="M58.2208 57.9793C26.0618 57.9793 0.000335689 32.0258 0.000338489 4.77696e-06L58.2208 9.86676e-06L58.2208 57.9793Z" fill="currentColor" />
+    </svg>
+  }
+
+  if (brandPillar === 'business') {
+
+    if(brandFullLogo){
+      return  <svg xmlns="http://www.w3.org/2000/svg" width="203" height="67" viewBox="0 0 203 67" fill="none">
+        <g clip-path="url(#clip0_4713_9167)">
+          <path d="M73.0897 25.7691V-0.1875H82.2102C87.9893 -0.1875 91.3306 2.21193 91.3306 6.75821C91.3306 9.15764 89.5143 11.6251 87.2997 12.2856C90.4953 13.0822 92.4961 15.4525 92.4961 18.5028C92.4961 23.2628 89.116 25.7691 83.3757 25.7691H73.0897ZM82.3947 11.2656C86.2507 11.2656 88.1739 9.63364 88.1739 6.79707C88.1739 3.9605 86.2799 2.35764 82.4336 2.35764H76.1784V11.2656H82.3947ZM76.1784 23.2239H83.23C87.1929 23.2239 89.3686 21.4754 89.3686 18.5028C89.3686 15.5302 87.1152 13.7039 83.1523 13.7039H76.1784V23.2239Z" fill="currentColor"/>
+          <path d="M106.454 25.7691V22.4565C105.579 24.7491 103.404 26.1965 100.636 26.1965C96.4882 26.1965 94.1668 23.6902 94.1668 19.2508V7.47707H97.2166V18.6776C97.2166 22.0582 98.6347 23.8359 101.51 23.8359C104.385 23.8359 106.347 21.9416 106.347 17.5508V7.47707H109.397V25.7594H106.454V25.7691Z" fill="currentColor"/>
+          <path d="M114.127 20.3485C114.35 22.8548 116.672 23.9136 119.139 23.9136C121.606 23.9136 123.461 22.7479 123.461 20.7856C123.461 19.4451 122.587 18.5708 120.265 18.1336L117.031 17.4828C114.088 16.9388 111.941 15.7342 111.941 12.5382C111.941 9.34221 114.7 7.04964 118.74 7.04964C122.781 7.04964 125.539 8.86621 125.899 12.3245H123.102C122.888 10.4691 121.246 9.38107 118.74 9.38107C116.235 9.38107 114.739 10.5856 114.739 12.3634C114.739 13.9274 115.827 14.5782 117.934 14.9765L121.567 15.6662C124.549 16.2491 126.287 17.7062 126.287 20.6496C126.287 23.8456 123.267 26.2159 119.168 26.2159C114.807 26.2159 111.533 24.2925 111.203 20.3582H114.107L114.127 20.3485Z" fill="currentColor"/>
+          <path d="M128.949 -0.00292805H132.368V3.66907H128.949V-0.00292805ZM129.172 7.48679H132.193V25.7691H129.172V7.48679Z" fill="currentColor"/>
+          <path d="M138.477 10.8285C139.351 8.57479 141.644 7.04964 144.441 7.04964C148.549 7.04964 150.987 9.63364 150.987 13.9954V25.7691H147.967V14.6462C147.967 11.2656 146.481 9.51707 143.606 9.51707C140.73 9.51707 138.594 11.2948 138.594 15.6954V25.7691H135.573V7.48679H138.477V10.8285Z" fill="currentColor"/>
+          <path d="M161.623 26.2062C156.465 26.2062 152.823 22.6119 152.823 16.7154C152.823 10.8188 156.563 7.04964 161.438 7.04964C166.858 7.04964 169.286 11.3725 169.286 16.0645V17.2594H155.766C155.912 21.4754 158.126 23.8068 161.623 23.8068C164.09 23.8068 165.586 22.6119 166.343 20.3874H169.18C168.344 24.2731 165.178 26.2062 161.623 26.2062ZM155.883 15.0834H166.353C166.275 11.9165 164.721 9.48793 161.448 9.48793C158.573 9.48793 156.397 11.3434 155.883 15.0834Z" fill="currentColor"/>
+          <path d="M173.58 20.3485C173.803 22.8548 176.124 23.9136 178.591 23.9136C181.059 23.9136 182.914 22.7479 182.914 20.7856C182.914 19.4451 182.04 18.5708 179.718 18.1336L176.484 17.4828C173.541 16.9388 171.394 15.7342 171.394 12.5382C171.394 9.34221 174.153 7.04964 178.193 7.04964C182.234 7.04964 184.992 8.86621 185.352 12.3245H182.554C182.341 10.4691 180.699 9.38107 178.193 9.38107C175.687 9.38107 174.191 10.5856 174.191 12.3634C174.191 13.9274 175.279 14.5782 177.387 14.9765L181.02 15.6662C184.002 16.2491 185.74 17.7062 185.74 20.6496C185.74 23.8456 182.719 26.2159 178.621 26.2159C174.259 26.2159 170.986 24.2925 170.656 20.3582H173.56L173.58 20.3485Z" fill="currentColor"/>
+          <path d="M189.965 20.3485C190.189 22.8548 192.51 23.9136 194.977 23.9136C197.444 23.9136 199.299 22.7479 199.299 20.7856C199.299 19.4451 198.425 18.5708 196.104 18.1336L192.869 17.4828C189.926 16.9388 187.78 15.7342 187.78 12.5382C187.78 9.34221 190.538 7.04964 194.579 7.04964C198.619 7.04964 201.378 8.86621 201.737 12.3245H198.94C198.726 10.4691 197.085 9.38107 194.579 9.38107C192.073 9.38107 190.577 10.5856 190.577 12.3634C190.577 13.9274 191.665 14.5782 193.773 14.9765L197.405 15.6662C200.387 16.2491 202.126 17.7062 202.126 20.6496C202.126 23.8456 199.105 26.2159 195.006 26.2159C190.645 26.2159 187.372 24.2925 187.042 20.3582H189.946L189.965 20.3485Z" fill="currentColor"/>
+          <path d="M76.6155 51.9782C76.9069 54.9605 79.5974 55.9028 82.3267 55.9028C84.8715 55.9028 87.0181 54.8828 87.0181 52.7359C87.0181 51.1039 85.9593 50.3365 83.1329 49.8605L78.5484 49.0251C74.4787 48.2965 71.3511 46.2954 71.3511 41.6811C71.3511 36.7754 75.7899 33.5696 81.7148 33.5696C88.407 33.5696 92.2145 36.5131 92.7292 41.5354H86.8044C86.581 39.2816 84.619 38.0868 81.7925 38.0868C79.2089 38.0868 77.4994 39.3594 77.4994 41.2148C77.4994 43.0702 78.7718 43.5074 81.2389 43.9736L86.1827 44.9159C90.6895 45.7125 93.1955 48.0439 93.1955 52.2988C93.1955 57.3113 88.543 60.4005 82.5501 60.4005C75.8968 60.4005 71.0986 57.6708 70.5547 51.9685H76.6252L76.6155 51.9782Z" fill="currentColor"/>
+          <path d="M103.948 60.4102C98.3822 60.4102 94.0988 56.7771 94.0988 50.6668C94.0988 44.5565 98.3919 40.9234 103.88 40.9234C109.989 40.9234 113 45.3239 113 50.3754V52.0074H99.9557C100.286 54.5914 101.558 56.1165 103.957 56.1165C105.706 56.1165 106.862 55.3199 107.337 53.9016H112.932C112.136 57.9331 108.756 60.4102 103.957 60.4102H103.948ZM100.062 48.7822H107.367C107.367 46.8879 106.201 45.1879 103.88 45.1879C101.772 45.1879 100.5 46.4994 100.062 48.7822Z" fill="currentColor"/>
+          <path d="M115.176 59.9828V33.2296H121.246V59.9828H115.176Z" fill="currentColor"/>
+          <path d="M143.557 53.8725L146.83 41.3702H152.716L146.937 59.9828H140.828L137.7 47.9176H137.622L134.456 59.9828H128.347L122.567 41.3702H128.599L131.872 53.8725H131.979L134.961 41.3702H140.41L143.46 53.8725H143.557Z" fill="currentColor"/>
+          <path d="M160.321 41.3702L164.828 54.3874H164.896L169.218 41.3702H175.182L168.131 60.0896C166.275 64.9565 163.585 66.7439 159.185 66.7439C158.457 66.7439 157.476 66.7051 156.679 66.5594V62.1199C157.184 62.1976 157.408 62.1976 157.767 62.1976C159.69 62.1976 160.525 61.8674 161.293 59.7982L154.202 41.3702H160.321Z" fill="currentColor"/>
+          <path d="M182.515 44.2359C183.428 42.3416 185.458 40.9234 188.256 40.9234C192.549 40.9234 195.162 43.5365 195.162 48.0439V59.9634H189.052V49.4914C189.052 46.9074 188.032 45.6056 185.964 45.6056C184.07 45.6056 182.583 46.8394 182.583 50.0062V59.9634H176.513V41.3508H182.506V44.2262L182.515 44.2359Z" fill="currentColor"/>
+          <path d="M61.2885 31.4714C44.8543 31.4714 31.5282 44.7994 31.5282 61.2359H61.2885V31.4714Z" fill="currentColor"/>
+          <path d="M61.2885 0.0262155C44.8543 0.0262155 31.5282 13.3542 31.5282 29.7908H61.2885V0.0262155Z" fill="currentColor"/>
+          <path d="M0 61.2165C0 44.7799 13.3261 31.4519 29.7604 31.4519V61.2165H0Z" fill="currentColor"/>
+          <path d="M0 29.7714C0 13.3348 13.3261 0.00678274 29.7604 0.00678274V29.7714H0Z" fill="currentColor"/>
+        </g>
+        <defs>
+          <clipPath id="clip0_4713_9167">
+            <rect width="203" height="67" fill="white"/>
+          </clipPath>
+        </defs>
+      </svg>
+    }
+
+    return <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120" fill="none">
+      <path d="M119.671 61.2805C87.582 61.2805 61.5616 87.2381 61.5616 119.25H119.671V61.2805Z" fill="currentColor" />
+      <path d="M119.671 0.0378473C87.582 0.0378473 61.5616 25.9955 61.5616 58.0074H119.671V0.0378473Z" fill="currentColor" />
+      <path d="M0 119.212C0 87.2003 26.0205 61.2426 58.1098 61.2426V119.212H0Z" fill="currentColor" />
+      <path d="M0 57.9695C0 25.9576 26.0205 0 58.1098 0V57.9695H0Z" fill="currentColor" />
+    </svg>
+  }
+
+  if (brandPillar === 'live') {
+
+    if(brandFullLogo){
+      return <svg xmlns="http://www.w3.org/2000/svg" width="193" height="66" viewBox="0 0 193 66" fill="none">
+        <g clip-path="url(#clip0_4713_9228)">
+          <path d="M72.0742 -0.136921H75.1563V22.8348H88.9107V25.4074H72.0742V-0.146484V-0.136921Z" fill="currentColor"/>
+          <path d="M91.6291 0.0447881H94.9983V3.65982H91.6291V0.0447881ZM91.8492 7.41831H94.826V25.417H91.8492V7.41831Z" fill="currentColor"/>
+          <path d="M97.4007 7.41831H100.445L106.245 22.481H106.321L111.873 7.41831H114.85L107.939 25.417H104.608L97.4103 7.41831H97.4007Z" fill="currentColor"/>
+          <path d="M124.182 25.8473C119.1 25.8473 115.51 22.3088 115.51 16.5037C115.51 10.6986 119.195 6.98795 124 6.98795C129.341 6.98795 131.734 11.2437 131.734 15.863V17.0393H118.41C118.554 21.1899 120.736 23.4851 124.182 23.4851C126.613 23.4851 128.087 22.3088 128.834 20.1188H131.629C130.806 23.9442 127.685 25.8473 124.182 25.8473ZM118.525 14.897H128.843C128.767 11.7793 127.235 9.38841 124.01 9.38841C121.177 9.38841 119.033 11.2151 118.525 14.897Z" fill="currentColor"/>
+          <path d="M75.5487 51.2196C75.8359 54.1556 78.4872 55.0832 81.1769 55.0832C83.6846 55.0832 85.7999 54.0791 85.7999 51.9655C85.7999 50.3588 84.7566 49.6033 81.9713 49.1347L77.4535 48.3122C73.443 47.595 70.3609 45.6249 70.3609 41.0821C70.3609 36.2525 74.7352 33.1061 80.5738 33.1061C87.1687 33.1061 90.9208 36.0039 91.428 40.9483H85.5894C85.3692 38.7295 83.4357 37.5436 80.6504 37.5436C78.1044 37.5436 76.4198 38.7964 76.4198 40.6231C76.4198 42.4497 77.6736 42.8801 80.1048 43.3391L84.9768 44.2668C89.418 45.051 91.8875 47.3463 91.8875 51.5351C91.8875 56.47 87.3027 59.5207 81.397 59.5207C74.8404 59.5207 70.1121 56.8334 69.5761 51.2196H75.5583H75.5487Z" fill="currentColor"/>
+          <path d="M102.483 59.5303C96.9987 59.5303 92.7776 55.9535 92.7776 49.938C92.7776 43.9225 97.0083 40.3457 102.416 40.3457C108.437 40.3457 111.404 44.6781 111.404 49.6511V51.2578H98.5493C98.8748 53.8017 100.129 55.3032 102.493 55.3032C104.216 55.3032 105.355 54.519 105.824 53.1227H111.337C110.552 57.0916 107.221 59.5303 102.493 59.5303H102.483ZM98.6546 48.0731H105.852C105.852 46.2082 104.704 44.5346 102.416 44.5346C100.339 44.5346 99.0853 45.8257 98.6546 48.0731Z" fill="currentColor"/>
+          <path d="M113.548 59.0999V32.7618H119.53V59.0999H113.548Z" fill="currentColor"/>
+          <path d="M141.516 53.0844L144.742 40.7761H150.542L144.847 59.0999H138.827L135.745 47.222H135.668L132.548 59.0999H126.527L120.832 40.7761H126.776L130.002 53.0844H130.107L133.045 40.7761H138.415L141.421 53.0844H141.516Z" fill="currentColor"/>
+          <path d="M152.016 40.7761H158.037L162.478 53.5913H162.545L166.805 40.7761H172.681L165.732 59.2051C163.904 63.9965 161.253 65.7562 156.917 65.7562C156.199 65.7562 155.232 65.7179 154.448 65.5745V61.2039C154.945 61.2709 155.165 61.2709 155.52 61.2709C157.415 61.2709 158.238 60.9457 158.994 58.9087L152.007 40.7665L152.016 40.7761Z" fill="currentColor"/>
+          <path d="M179.908 43.5974C180.808 41.7325 182.808 40.3362 185.565 40.3362C189.796 40.3362 192.37 42.9088 192.37 47.3463V59.0808H186.35V48.7713C186.35 46.2273 185.345 44.9458 183.306 44.9458C181.439 44.9458 179.975 46.1604 179.975 49.2781V59.0808H173.993V40.757H179.898V43.5878L179.908 43.5974Z" fill="currentColor"/>
+          <path d="M31.0982 30.9926C31.0982 47.1837 44.24 60.3145 60.4447 60.3145V30.9926H31.0982Z" fill="currentColor"/>
+          <path d="M60.4447 29.3381C60.4447 13.1469 47.3029 0.0160967 31.0982 0.0160967V29.3381H60.4447Z" fill="currentColor"/>
+          <path d="M29.3466 60.305C13.1418 60.305 0 47.1741 0 30.983H29.3466V60.305Z" fill="currentColor"/>
+          <path d="M0.00969946 0.00653289C16.2144 0.00653289 29.3563 13.1373 29.3563 29.3285H0.00969946V0.00653289Z" fill="currentColor"/>
+        </g>
+        <defs>
+          <clipPath id="clip0_4713_9228">
+            <rect width="193" height="65.9745" fill="white"/>
+          </clipPath>
+        </defs>
+      </svg>
+    }
+
+    return <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120" fill="none">
+      <path d="M61.3528 61.2702C61.3528 93.2858 87.28 119.25 119.25 119.25V61.2702H61.3528Z" fill="currentColor" />
+      <path d="M119.25 57.9987C119.25 25.9831 93.3228 0.018911 61.3528 0.018911V57.9987H119.25Z" fill="currentColor" />
+      <path d="M57.8971 119.231C25.9272 119.231 0 93.2669 0 61.2513H57.8971V119.231Z" fill="currentColor" />
+      <path d="M0.0191358 0C31.9891 0 57.9163 25.9642 57.9163 57.9798H0.0191358V0Z" fill="currentColor" />
+    </svg>
+  }
+
+  if (brandPillar === 'participate') {
+
+    if(brandFullLogo){
+      return <svg xmlns="http://www.w3.org/2000/svg" width="232" height="67" viewBox="0 0 232 67" fill="none">
+        <path d="M76.2994 15.36V25.791H73.2078V-0.160156H82.8133C88.598 -0.160156 91.9424 2.49129 91.9424 7.5805C91.9424 12.6697 88.598 15.36 82.8522 15.36H76.2994ZM82.7452 12.7474C86.673 12.7474 88.8216 11.1158 88.8216 7.59022C88.8216 4.06467 86.673 2.46215 82.7452 2.46215H76.3092V12.7474H82.7452Z" fill="currentColor"/>
+        <path d="M104.173 22.7025C103.376 24.8489 100.858 26.1892 97.8048 26.1892C94.7521 26.1892 91.8743 24.3341 91.8743 20.9543C91.8743 17.5744 94.4896 15.9039 98.2034 15.4668L104.095 14.6996V13.6507C104.095 10.7467 102.316 9.50353 99.7979 9.50353C97.2798 9.50353 95.8312 10.7758 95.6174 12.8834H92.7104C93.0701 9.17331 95.9868 7.06575 99.8757 7.06575C104.319 7.06575 107.08 9.17331 107.08 13.573V21.9643C107.08 23.3046 107.158 24.5769 107.517 25.7812H104.494C104.27 24.7615 104.163 23.5669 104.163 22.6928L104.173 22.7025ZM104.095 16.9625L99.1076 17.5064C96.8132 17.8366 94.9271 18.4194 94.9271 20.8863C94.9271 22.5956 96.1326 23.9068 98.4173 23.9068C101.256 23.9068 104.095 22.1294 104.095 18.6039V16.9625Z" fill="currentColor"/>
+        <path d="M120.428 10.0183C119.991 9.91144 119.339 9.87259 118.863 9.87259C115.956 9.87259 113.292 12.1647 113.292 16.778V25.791H110.269V7.51252H113.176V11.8345C113.973 8.81396 116.306 7.11432 118.999 7.11432C119.476 7.11432 119.981 7.15317 120.419 7.26V10.0183H120.428Z" fill="currentColor"/>
+        <path d="M132.688 25.5773C131.346 25.9755 130.287 26.0823 129.489 26.0823C126.145 26.0823 124.434 24.4798 124.434 21.1V9.7949H121.741V7.50281H124.434V2.85064H127.418V7.50281H132.221V9.7949H127.38V20.9543C127.38 22.8773 128.362 23.5377 130.034 23.5377C130.724 23.5377 131.521 23.46 132.688 23.1007V25.5773Z" fill="currentColor"/>
+        <path d="M135.741 0.0243769H139.163V3.6956H135.741V0.0243769ZM135.955 7.51252H138.978V25.791H135.955V7.51252Z" fill="currentColor"/>
+        <path d="M150.363 7.07547C154.436 7.07547 157.129 9.39669 157.713 13.2913H154.835C154.329 10.8535 152.832 9.51324 150.363 9.51324C146.766 9.51324 144.724 12.3881 144.724 16.6712C144.724 20.9543 146.766 23.7902 150.363 23.7902C152.842 23.7902 154.329 22.45 154.835 20.0122H157.713C157.129 23.9359 154.436 26.228 150.363 26.228C145.268 26.228 141.739 22.5179 141.739 16.6712C141.739 10.8244 145.268 7.07547 150.363 7.07547Z" fill="currentColor"/>
+        <path d="M160.114 0.0243769H163.536V3.6956H160.114V0.0243769ZM160.328 7.51252H163.352V25.791H160.328V7.51252Z" fill="currentColor"/>
+        <path d="M170.478 32.2593H167.454V7.51252H170.361V10.8535C171.197 8.99849 173.375 7.07547 176.545 7.07547C181.201 7.07547 184.692 10.8535 184.692 16.6712C184.692 22.4888 181.201 26.228 176.545 26.228C173.521 26.228 171.382 24.4507 170.468 22.5956V32.2593H170.478ZM170.332 16.8848C170.332 21.032 172.364 23.8582 175.932 23.8582C179.5 23.8582 181.649 20.9154 181.649 16.6615C181.649 12.4075 179.539 9.42583 175.932 9.42583C172.325 9.42583 170.332 12.223 170.332 16.3701V16.8848Z" fill="currentColor"/>
+        <path d="M199.071 22.7025C198.274 24.8489 195.755 26.1892 192.703 26.1892C189.65 26.1892 186.772 24.3341 186.772 20.9543C186.772 17.5744 189.387 15.9039 193.101 15.4668L198.993 14.6996V13.6507C198.993 10.7467 197.214 9.50353 194.696 9.50353C192.178 9.50353 190.729 10.7758 190.515 12.8834H187.608C187.968 9.17331 190.885 7.06575 194.774 7.06575C199.217 7.06575 201.978 9.17331 201.978 13.573V21.9643C201.978 23.3046 202.055 24.5769 202.415 25.7812H199.392C199.168 24.7615 199.061 23.5669 199.061 22.6928L199.071 22.7025ZM199.003 16.9625L194.015 17.5064C191.721 17.8366 189.835 18.4194 189.835 20.8863C189.835 22.5956 191.04 23.9068 193.325 23.9068C196.164 23.9068 199.003 22.1294 199.003 18.6039V16.9625Z" fill="currentColor"/>
+        <path d="M214.422 25.5773C213.08 25.9755 212.021 26.0823 211.223 26.0823C207.879 26.0823 206.168 24.4798 206.168 21.1V9.7949H203.475V7.50281H206.168V2.85064H209.153V7.50281H213.955V9.7949H209.114V20.9543C209.114 22.8773 210.096 23.5377 211.768 23.5377C212.458 23.5377 213.255 23.46 214.422 23.1007V25.5773Z" fill="currentColor"/>
+        <path d="M224.212 26.228C219.05 26.228 215.404 22.6345 215.404 16.7391C215.404 10.8438 219.147 7.07547 224.028 7.07547C229.452 7.07547 231.883 11.3974 231.883 16.0884V17.283H218.35C218.496 21.4982 220.712 23.8291 224.212 23.8291C226.682 23.8291 228.179 22.6345 228.937 20.4104H231.776C230.94 24.2953 227.771 26.228 224.212 26.228ZM218.457 15.1075H228.937C228.859 11.9413 227.304 9.51324 224.028 9.51324C221.15 9.51324 218.972 11.3683 218.457 15.1075Z" fill="currentColor"/>
+        <path d="M76.7369 51.9946C77.0286 54.9763 79.7216 55.9184 82.4536 55.9184C85.0008 55.9184 87.1494 54.8986 87.1494 52.7522C87.1494 51.1205 86.0896 50.3532 83.2605 49.8773L78.6716 49.0421C74.5981 48.3137 71.4675 46.3129 71.4675 41.6996C71.4675 36.7949 75.9106 33.5899 81.8411 33.5899C88.5396 33.5899 92.3507 36.5327 92.866 41.5539H86.9355C86.7119 39.3007 84.748 38.1061 81.9188 38.1061C79.3327 38.1061 77.6217 39.3784 77.6217 41.2334C77.6217 43.0885 78.8952 43.5255 81.3647 43.9917L86.3132 44.9338C90.8243 45.7302 93.3326 48.0611 93.3326 52.3151C93.3326 57.3266 88.6757 60.4151 82.6772 60.4151C76.0175 60.4151 71.2148 57.686 70.6703 51.9849H76.7467L76.7369 51.9946Z" fill="currentColor"/>
+        <path d="M104.095 60.4248C98.5243 60.4248 94.2368 56.7925 94.2368 50.6835C94.2368 44.5745 98.534 40.9421 104.027 40.9421C110.142 40.9421 113.156 45.3417 113.156 50.3921V52.0237H100.099C100.43 54.6072 101.703 56.132 104.105 56.132C105.855 56.132 107.012 55.3356 107.488 53.9176H113.088C112.291 57.9482 108.908 60.4248 104.105 60.4248H104.095ZM100.206 48.7993H107.517C107.517 46.9054 106.351 45.2057 104.027 45.2057C101.917 45.2057 100.644 46.5169 100.206 48.7993Z" fill="currentColor"/>
+        <path d="M115.334 59.9975V33.25H121.41V59.9975H115.334Z" fill="currentColor"/>
+        <path d="M143.742 53.8885L147.018 41.3888H152.91L147.125 59.9975H141.01L137.88 47.9349H137.802L134.632 59.9975H128.517L122.732 41.3888H128.77L132.046 53.8885H132.153L135.138 41.3888H140.592L143.645 53.8885H143.742Z" fill="currentColor"/>
+        <path d="M160.522 41.3888L165.034 54.4032H165.102L169.428 41.3888H175.397L168.339 60.1043C166.482 64.9702 163.789 66.7572 159.385 66.7572C158.656 66.7572 157.674 66.7184 156.877 66.5727V62.1342C157.382 62.2119 157.606 62.2119 157.965 62.2119C159.89 62.2119 160.727 61.8817 161.495 59.813L154.397 41.3888H160.522Z" fill="currentColor"/>
+        <path d="M182.738 44.2539C183.651 42.3601 185.683 40.9421 188.483 40.9421C192.781 40.9421 195.396 43.5547 195.396 48.0611V59.9781H189.281V49.5083C189.281 46.9248 188.26 45.6234 186.189 45.6234C184.293 45.6234 182.806 46.8568 182.806 50.023V59.9781H176.729V41.3694H182.728V44.2442L182.738 44.2539Z" fill="currentColor"/>
+        <path d="M2.85646e-08 29.773C16.4596 29.773 29.8081 16.4381 29.8081 -0.00475679H2.85646e-08V29.773Z" fill="currentColor"/>
+        <path d="M29.8081 61.2309C29.8081 44.7881 16.4596 31.4532 0 31.4532V61.2309H29.8081Z" fill="currentColor"/>
+        <path d="M61.3954 29.7827C44.9358 29.7827 31.5873 16.4478 31.5873 0.00495569H61.3954V29.7827Z" fill="currentColor"/>
+        <path d="M31.5873 61.2407C31.5873 44.7978 44.9358 31.4629 61.3954 31.4629V61.2407H31.5873Z" fill="currentColor"/>
+      </svg>
+    }
+
+    return <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120" fill="none">
+      <path d="M0 58.01C32.1003 58.01 58.1332 32.0323 58.1332 0H0V58.01Z" fill="currentColor" />
+      <path d="M0 61.24C32.1003 61.24 58.1332 87.2177 58.1332 119.25H0V61.24Z" fill="currentColor" />
+      <path d="M119.794 58.01C87.6937 58.01 61.6608 32.0323 61.6608 0H119.794V58.01Z" fill="currentColor" />
+      <path d="M119.794 61.24C87.6937 61.24 61.6608 87.2177 61.6608 119.25H119.794V61.24Z" fill="currentColor" />
+    </svg>
+  }
+
+
+  if(brandFullLogo){
+    return <svg xmlns="http://www.w3.org/2000/svg" width="193" height="66" viewBox="0 0 193 66" fill="none">
+      <path d="M69.274 0H72.4994L81.3812 22.3221H81.4578L90.3395 0H93.4884L83.104 25.4674H79.5915L69.274 0Z" fill="currentColor"/>
+      <path d="M95.4504 0.181115H98.8194V3.78392H95.4504V0.181115ZM95.6705 7.52969H98.6471V25.4675H95.6705V7.52969Z" fill="currentColor"/>
+      <path d="M104.016 20.1585C104.236 22.6176 106.524 23.6565 108.955 23.6565C111.386 23.6565 113.214 22.5127 113.214 20.5874C113.214 19.2721 112.353 18.4143 110.065 17.9854L106.878 17.3468C103.978 16.813 101.863 15.6312 101.863 12.4954C101.863 9.35963 104.581 7.11026 108.563 7.11026C112.544 7.11026 115.262 8.8926 115.616 12.2857H112.86C112.649 10.4653 111.032 9.39775 108.563 9.39775C106.093 9.39775 104.619 10.5701 104.619 12.3238C104.619 13.8584 105.691 14.497 107.768 14.8877L111.348 15.5645C114.286 16.1363 115.999 17.566 115.999 20.454C115.999 23.5897 113.023 25.9154 108.984 25.9154C104.686 25.9154 101.461 24.0282 101.136 20.1776H103.997L104.016 20.1585Z" fill="currentColor"/>
+      <path d="M118.621 0.181115H121.99V3.78392H118.621V0.181115ZM118.842 7.52969H121.818V25.4675H118.842V7.52969Z" fill="currentColor"/>
+      <path d="M134.949 25.2578C133.629 25.6485 132.585 25.7534 131.801 25.7534C128.508 25.7534 126.824 24.1807 126.824 20.8639V9.76952H124.173V7.52015H126.824V2.9547H129.762V7.52015H134.49V9.76952H129.724V20.7209C129.724 22.6081 130.69 23.2562 132.337 23.2562C133.016 23.2562 133.801 23.1895 134.949 22.8273V25.2578Z" fill="currentColor"/>
+      <path d="M75.476 51.1922C75.7631 54.1183 78.4142 55.0429 81.1036 55.0429C83.6112 55.0429 85.7264 54.0421 85.7264 51.9357C85.7264 50.3344 84.6831 49.5815 81.898 49.1144L77.3806 48.2947C73.3704 47.5799 70.2885 45.6165 70.2885 41.0891C70.2885 36.2759 74.6624 33.1401 80.5007 33.1401C87.095 33.1401 90.8468 36.0281 91.354 40.9557H85.5158C85.2957 38.7445 83.3624 37.5626 80.5772 37.5626C78.0314 37.5626 76.3469 38.8112 76.3469 40.6316C76.3469 42.4521 77.6007 42.881 80.0317 43.3385L84.9033 44.263C89.3442 45.0446 91.8134 47.3321 91.8134 51.5068C91.8134 56.4249 87.229 59.4558 81.3238 59.4558C74.7677 59.4558 70.0397 56.7775 69.5037 51.1827H75.4855L75.476 51.1922Z" fill="currentColor"/>
+      <path d="M102.399 59.4653C96.9147 59.4653 92.694 55.9006 92.694 49.9055C92.694 43.9104 96.9243 40.3457 102.332 40.3457C108.352 40.3457 111.319 44.6633 111.319 49.6196V51.2208H98.4652C98.7906 53.7561 100.044 55.2525 102.408 55.2525C104.131 55.2525 105.27 54.471 105.739 53.0794H111.252C110.467 57.0349 107.136 59.4653 102.408 59.4653H102.399ZM98.5705 48.0469H105.768C105.768 46.1883 104.619 44.5204 102.332 44.5204C100.255 44.5204 99.0012 45.8071 98.5705 48.0469Z" fill="currentColor"/>
+      <path d="M113.463 59.0364V32.7874H119.445V59.0364H113.463Z" fill="currentColor"/>
+      <path d="M141.429 53.0413L144.654 40.7746H150.454L144.76 59.0365H138.739L135.658 47.1987H135.581L132.461 59.0365H126.441L120.746 40.7746H126.69L129.915 53.0413H130.02L132.959 40.7746H138.328L141.333 53.0413H141.429Z" fill="currentColor"/>
+      <path d="M157.948 40.7746L162.389 53.5465H162.456L166.715 40.7746H172.592L165.643 59.1413C163.815 63.9164 161.164 65.6702 156.828 65.6702C156.111 65.6702 155.144 65.6321 154.359 65.4891V61.1333C154.857 61.2096 155.077 61.2096 155.431 61.2096C157.326 61.2096 158.149 60.8855 158.905 58.8554L151.919 40.7746H157.948Z" fill="currentColor"/>
+      <path d="M179.827 43.5958C180.727 41.7372 182.727 40.3457 185.484 40.3457C189.714 40.3457 192.289 42.9096 192.289 47.3321V59.0269H186.268V48.7522C186.268 46.2169 185.264 44.9397 183.225 44.9397C181.359 44.9397 179.894 46.1502 179.894 49.2574V59.0269H173.912V40.7651H179.818V43.5863L179.827 43.5958Z" fill="currentColor"/>
+      <path d="M29.3348 0.162032C13.1312 0.162032 0 13.2389 0 29.3752H29.3348V0.162032Z" fill="currentColor"/>
+      <path d="M29.3348 31.0241C13.1312 31.0241 1.62262e-07 44.101 1.62262e-07 60.2373H29.3348V31.0241Z" fill="currentColor"/>
+      <path d="M31.0766 0.171575C47.2801 0.171575 60.4114 13.2484 60.4114 29.3848H31.0766V0.171575Z" fill="currentColor"/>
+      <path d="M31.0766 31.0337C47.2801 31.0337 60.4114 44.1105 60.4114 60.2469H31.0766V31.0337Z" fill="currentColor"/>
+    </svg>
+  }
+
+  
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120" fill="none">
+        <path d="M58.2132 5.43071e-08C26.0583 2.43097e-08 -2.4212e-08 25.9535 -5.40888e-08 57.9793L58.2132 57.9793L58.2132 5.43071e-08Z" fill="currentColor" />
+        <path d="M58.2132 61.2518C26.0583 61.2518 2.40646e-07 87.2053 2.10769e-07 119.231L58.2132 119.231L58.2132 61.2518Z" fill="currentColor" />
+        <path d="M61.6699 0.0189383C93.8249 0.0189383 119.883 25.9725 119.883 57.9982L61.6699 57.9982L61.6699 0.0189383Z" fill="currentColor" />
+        <path d="M61.6699 61.2707C93.8249 61.2707 119.883 87.2242 119.883 119.25L61.6699 119.25L61.6699 61.2707Z" fill="currentColor" />
+      </svg>
+    )
+  
+}
+
+export default PillarLogo;

package/src/Components/Shared/ScrollFadeIn/ScrollFadeIn.tsx

@@ -0,0 +1,43 @@
+import { useState, useEffect, useRef, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import styles from './scrollFadeIn.module.scss';
+
+interface IScrollFadeIn {
+  children: ReactNode;
+}
+
+const ScrollFadeIn = (props: IScrollFadeIn) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const componentRef = useRef(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsVisible(entry.isIntersecting);
+      },
+      { threshold: 0 }
+    );
+
+    if (componentRef.current) {
+      observer.observe(componentRef.current);
+    }
+
+    return () => {
+      if (componentRef.current) {
+        observer.unobserve(componentRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <div ref={componentRef} className={`${styles.scrollFadeIn} ${isVisible ? styles.visible : ''}`}>
+      {props.children}
+    </div>
+  );
+}
+
+ScrollFadeIn.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default ScrollFadeIn;