From a1559368c46dc565d062fd4ad4ae099eac353e17 Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <augustin.mauroy@outlook.fr>
Date: Fri, 24 May 2024 23:23:28 +0200
Subject: [PATCH 1/3] feat(pride logo): introduce

---
 .../Containers/NavBar/index.stories.tsx       |  41 +++++++
 components/Containers/NavBar/index.tsx        |  17 ++-
 components/Icons/Logos/NodejsDarkPride.tsx    | 111 ++++++++++++++++++
 components/Icons/Logos/NodejsLightPride.tsx   | 111 ++++++++++++++++++
 components/__design__/node-logos.stories.tsx  |  11 ++
 components/withNavBar.tsx                     |   4 +
 public/static/logos/nodejsDarkPride.svg       |  32 +++++
 public/static/logos/nodejsLightPride.svg      |  32 +++++
 site.json                                     |   1 +
 types/config.ts                               |   1 +
 10 files changed, 359 insertions(+), 2 deletions(-)
 create mode 100644 components/Icons/Logos/NodejsDarkPride.tsx
 create mode 100644 components/Icons/Logos/NodejsLightPride.tsx
 create mode 100644 public/static/logos/nodejsDarkPride.svg
 create mode 100644 public/static/logos/nodejsLightPride.svg

diff --git a/components/Containers/NavBar/index.stories.tsx b/components/Containers/NavBar/index.stories.tsx
index 33a945323fb3b..c8ea0d68cb417 100644
--- a/components/Containers/NavBar/index.stories.tsx
+++ b/components/Containers/NavBar/index.stories.tsx
@@ -45,4 +45,45 @@ export const Default: Story = {
   },
 };
 
+export const WithPrideLogo: Story = {
+  args: {
+    navItems: [
+      {
+        text: 'Learn',
+        link: '/',
+      },
+      {
+        text: 'About',
+        link: '/about',
+      },
+      {
+        text: 'Docs',
+        link: '/docs',
+      },
+      {
+        text: 'Download',
+        link: '/download',
+      },
+      {
+        text: 'Blog',
+        link: '/blog',
+      },
+      {
+        text: 'Certification',
+        link: 'https://openjsf.org/certification',
+      },
+    ],
+    languages: {
+      availableLanguages: [
+        { name: 'English', code: 'en' },
+        { name: 'French', code: 'fr' },
+        { name: 'Spanish', code: 'es' },
+      ],
+      currentLanguage: 'en',
+    },
+    onThemeTogglerClick: () => {},
+    enablePrideLogo: true,
+  },
+};
+
 export default { component: NavBar } as Meta;
diff --git a/components/Containers/NavBar/index.tsx b/components/Containers/NavBar/index.tsx
index d4e6d9fb3546e..299c3f3beaa4a 100644
--- a/components/Containers/NavBar/index.tsx
+++ b/components/Containers/NavBar/index.tsx
@@ -11,7 +11,9 @@ import { SearchButton } from '@/components/Common/Search';
 import ThemeToggle from '@/components/Common/ThemeToggle';
 import NavItem from '@/components/Containers/NavBar/NavItem';
 import NodejsDark from '@/components/Icons/Logos/NodejsDark';
+import NodejsDarkPride from '@/components/Icons/Logos/NodejsDarkPride';
 import NodejsLight from '@/components/Icons/Logos/NodejsLight';
+import NodejsLightPride from '@/components/Icons/Logos/NodejsLightPride';
 import GitHub from '@/components/Icons/Social/GitHub';
 import Link from '@/components/Link';
 import type { FormattedMessage } from '@/types';
@@ -31,12 +33,14 @@ type NavbarProps = {
   }>;
   languages: ComponentProps<typeof LanguageDropdown>;
   onThemeTogglerClick: () => void;
+  enablePrideLogo?: boolean;
 };
 
 const NavBar: FC<NavbarProps> = ({
   navItems,
   languages,
   onThemeTogglerClick,
+  enablePrideLogo = false,
 }) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
@@ -44,8 +48,17 @@ const NavBar: FC<NavbarProps> = ({
     <nav className={`${style.container}`}>
       <div className={style.nodeIconAndMobileItemsToggler}>
         <Link className={style.nodeIconWrapper} href="/" aria-label="Home">
-          <NodejsDark className={style.nodejsLogoDark} />
-          <NodejsLight className={style.nodejsLogoLight} />
+          {enablePrideLogo ? (
+            <>
+              <NodejsDarkPride className={style.nodejsLogoDark} />
+              <NodejsLightPride className={style.nodejsLogoLight} />
+            </>
+          ) : (
+            <>
+              <NodejsDark className={style.nodejsLogoDark} />
+              <NodejsLight className={style.nodejsLogoLight} />
+            </>
+          )}
         </Link>
 
         <Label.Root
diff --git a/components/Icons/Logos/NodejsDarkPride.tsx b/components/Icons/Logos/NodejsDarkPride.tsx
new file mode 100644
index 0000000000000..00b26fafe7a2b
--- /dev/null
+++ b/components/Icons/Logos/NodejsDarkPride.tsx
@@ -0,0 +1,111 @@
+import type { FC, SVGProps } from 'react';
+
+const NodejsDarkPride: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    width="267"
+    height="80"
+    viewBox="0 0 267 80"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clip-path="url(#clip0_12_17)">
+      <mask
+        id="mask0_12_17"
+        style={{ maskType: 'luminance' }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="267"
+        height="80"
+      >
+        <path d="M266.96 0H0V79.988H266.96V0Z" fill="white" />
+      </mask>
+      <g mask="url(#mask0_12_17)">
+        <path
+          d="M234.948 78.743C234.257 78.743 233.613 78.5578 233.015 78.2336L226.895 74.576C225.974 74.0666 226.435 73.8814 226.711 73.7888C227.953 73.372 228.183 73.2794 229.471 72.5388C229.61 72.4461 229.794 72.4925 229.931 72.5851L234.625 75.4094C234.809 75.502 235.038 75.502 235.177 75.4094L253.537 64.7139C253.72 64.6213 253.814 64.4361 253.814 64.2048V42.8602C253.814 42.6288 253.72 42.4437 253.537 42.351L235.177 31.7021C234.993 31.6094 234.762 31.6094 234.625 31.7021L216.265 42.351C216.081 42.4437 215.989 42.675 215.989 42.8602V64.2048C215.989 64.39 216.081 64.6213 216.265 64.7139L221.28 67.6309C223.995 69.0198 225.698 67.3994 225.698 65.7788V44.7123C225.698 44.4346 225.928 44.1568 226.251 44.1568H228.598C228.874 44.1568 229.15 44.3882 229.15 44.7123V65.7788C229.15 69.4367 227.171 71.5664 223.719 71.5664C222.662 71.5664 221.834 71.5664 219.486 70.4091L214.655 67.6309C213.459 66.9364 212.722 65.64 212.722 64.2509V42.9066C212.722 41.5175 213.459 40.2212 214.655 39.5266L233.015 28.8314C234.165 28.1832 235.729 28.1832 236.88 28.8314L255.239 39.5266C256.435 40.2212 257.171 41.5175 257.171 42.9066V64.2509C257.171 65.64 256.435 66.9364 255.239 67.6309L236.88 78.3261C236.328 78.5578 235.637 78.743 234.948 78.743Z"
+          fill="#5FA04E"
+        />
+        <path
+          d="M240.653 64.0652C232.6 64.0652 230.943 60.3612 230.943 57.2128C230.943 56.935 231.173 56.6572 231.495 56.6572H233.888C234.165 56.6572 234.394 56.8425 234.394 57.1202C234.762 59.574 235.821 60.778 240.699 60.778C244.564 60.778 246.221 59.8983 246.221 57.8148C246.221 56.611 245.759 55.7313 239.732 55.1293C234.717 54.6199 231.587 53.5087 231.587 49.4805C231.587 45.7304 234.717 43.5078 239.962 43.5078C245.853 43.5078 248.751 45.5451 249.119 49.99C249.119 50.129 249.074 50.2678 248.983 50.4067C248.888 50.4993 248.751 50.5919 248.611 50.5919H246.173C245.945 50.5919 245.714 50.4067 245.668 50.1751C245.115 47.6286 243.688 46.7953 239.916 46.7953C235.682 46.7953 235.177 48.2769 235.177 49.388C235.177 50.7306 235.774 51.1475 241.48 51.8883C247.14 52.629 249.81 53.6939 249.81 57.6757C249.81 61.7501 246.45 64.0652 240.653 64.0652Z"
+          fill="#5FA04E"
+        />
+        <path
+          d="M267.16 41.6557C267.16 43.6005 265.548 45.221 263.615 45.221C261.683 45.221 260.072 43.6466 260.072 41.6557C260.072 39.6187 261.729 38.0908 263.615 38.0908C265.503 38.0908 267.16 39.6648 267.16 41.6557ZM260.625 41.6557C260.625 43.3227 261.96 44.6654 263.569 44.6654C265.227 44.6654 266.561 43.2763 266.561 41.6557C266.561 39.989 265.227 38.6927 263.569 38.6927C262.006 38.6927 260.625 39.989 260.625 41.6557ZM262.282 39.6648H263.663C264.123 39.6648 265.044 39.6648 265.044 40.7298C265.044 41.4706 264.581 41.6096 264.304 41.7021C264.859 41.7484 264.904 42.119 264.949 42.6281C264.996 42.9523 265.044 43.5078 265.135 43.693H264.304C264.304 43.5078 264.168 42.4894 264.168 42.443C264.123 42.2116 264.031 42.119 263.755 42.119H263.064V43.7393H262.282V39.6648ZM263.017 41.4244H263.615C264.123 41.4244 264.213 41.0541 264.213 40.8688C264.213 40.3133 263.845 40.3133 263.615 40.3133H262.973V41.4244H263.017Z"
+          fill="#5FA04E"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M43.6671 41.9478C43.6671 41.1144 43.2071 40.3275 42.4709 39.9107L23.007 28.5671C22.6849 28.3819 22.3167 28.2893 21.9486 28.2432C21.9026 28.2432 21.7647 28.2432 21.7647 28.2432C21.3965 28.2432 21.0284 28.3819 20.7063 28.5671L1.19636 39.8643C0.46014 40.2811 0 41.0684 0 41.9478L0.046014 72.3209C0.046014 72.7377 0.276084 73.1542 0.644196 73.3394C1.0123 73.5711 1.47245 73.5711 1.79455 73.3394L13.3901 66.6722C14.1263 66.2556 14.5864 65.4685 14.5864 64.6351V50.4208C14.5864 49.5875 15.0465 48.8002 15.7828 48.3837L20.7063 45.5131C21.0744 45.2814 21.4885 45.1888 21.9026 45.1888C22.3167 45.1888 22.7309 45.2814 23.053 45.5131L27.9764 48.3837C28.7126 48.8002 29.1729 49.5875 29.1729 50.4208V64.6351C29.1729 65.4685 29.6331 66.2556 30.3692 66.6722L41.8728 73.3394C42.2408 73.5711 42.7009 73.5711 43.0691 73.3394C43.4373 73.1542 43.6671 72.7377 43.6671 72.3209V41.9478Z"
+          fill="#333333"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M137.444 0.138901C137.076 -0.0463003 136.616 -0.0463003 136.293 0.138901C135.925 0.370401 135.696 0.740804 135.696 1.15751V31.2526C135.696 31.5304 135.557 31.8081 135.281 31.9936C135.005 32.1324 134.729 32.1324 134.453 31.9936L129.576 29.1691C128.84 28.7526 127.965 28.7526 127.229 29.1691L107.719 40.5127C106.983 40.9295 106.523 41.7165 106.523 42.5498V65.1906C106.523 66.0243 106.983 66.8112 107.719 67.228L127.229 78.5716C127.965 78.9882 128.84 78.9882 129.576 78.5716L149.086 67.228C149.822 66.8112 150.282 66.0243 150.282 65.1906V8.75077C150.282 7.87104 149.822 7.08394 149.086 6.66724L137.444 0.138901ZM135.65 57.7365C135.65 57.9678 135.557 58.153 135.374 58.2457L128.701 62.1351C128.517 62.2277 128.287 62.2277 128.103 62.1351L121.431 58.2457C121.247 58.153 121.155 57.9216 121.155 57.7365V49.9581C121.155 49.7265 121.247 49.5413 121.431 49.4487L128.103 45.5595C128.287 45.4669 128.517 45.4669 128.701 45.5595L135.374 49.4487C135.557 49.5413 135.65 49.7729 135.65 49.9581V57.7365Z"
+          fill="#333333"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M202.367 49.7725C203.105 49.3557 203.518 48.5688 203.518 47.7352V42.2255C203.518 41.3922 203.059 40.605 202.367 40.1885L182.996 28.8912C182.26 28.4744 181.386 28.4744 180.649 28.8912L161.14 40.2346C160.403 40.6514 159.943 41.4385 159.943 42.2719V64.9128C159.943 65.7461 160.403 66.5333 161.14 66.9498L180.511 78.0619C181.248 78.4786 182.122 78.4786 182.812 78.0619L194.546 71.4875C194.914 71.3023 195.144 70.8855 195.144 70.4686C195.144 70.0521 194.914 69.6354 194.546 69.4501L174.944 58.1064C174.576 57.8751 174.346 57.5048 174.346 57.088V50.0041C174.346 49.5873 174.576 49.1705 174.944 48.9853L181.064 45.4666C181.432 45.2352 181.892 45.2352 182.26 45.4666L188.38 48.9853C188.748 49.217 188.977 49.5873 188.977 50.0041V55.56C188.977 55.9768 189.208 56.3933 189.577 56.5786C189.944 56.8102 190.404 56.8102 190.772 56.5786L202.367 49.7725Z"
+          fill="#333333"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M181.524 48.7082C181.661 48.6155 181.846 48.6155 181.985 48.7082L185.711 50.8843C185.849 50.9768 185.941 51.1158 185.941 51.301V55.6532C185.941 55.8384 185.849 55.9774 185.711 56.07L181.985 58.2461C181.846 58.3387 181.661 58.3387 181.524 58.2461L177.797 56.07C177.659 55.9774 177.567 55.8384 177.567 55.6532V51.301C177.567 51.1158 177.659 50.9768 177.797 50.8843L181.524 48.7082Z"
+          fill="#5FA04E"
+        />
+        <mask
+          id="mask1_12_17"
+          style={{ maskType: 'alpha' }}
+          maskUnits="userSpaceOnUse"
+          x="53"
+          y="28"
+          width="44"
+          height="51"
+        >
+          <path
+            d="M76.2211 28.9482C75.4847 28.5316 74.6105 28.5316 73.8743 28.9482L54.5024 40.1993C53.7662 40.616 53.3521 41.4029 53.3521 42.2366V64.7846C53.3521 65.6181 53.8122 66.405 54.5024 66.8219L73.8743 78.0729C74.6105 78.4894 75.4847 78.4894 76.2211 78.0729L95.5929 66.8219C96.3288 66.405 96.7431 65.6181 96.7431 64.7846V42.2366C96.7431 41.4029 96.2832 40.616 95.5929 40.1993L76.2211 28.9482Z"
+            fill="white"
+          />
+        </mask>
+        <g mask="url(#mask1_12_17)">
+          <path
+            d="M103.17 53.5459H53.4209V61.8043H103.17V53.5459Z"
+            fill="#008026"
+          />
+          <path
+            d="M103.17 61.8042H53.4209V70.1621H103.17V61.8042Z"
+            fill="#004DFF"
+          />
+          <path
+            d="M103.17 37.0293H53.4209V45.2877H103.17V37.0293Z"
+            fill="#FF8C00"
+          />
+          <path
+            d="M103.17 45.2876H53.4209V53.546H103.17V45.2876Z"
+            fill="#FFED00"
+          />
+          <path
+            d="M103.17 28.6714H53.4209V37.0293H103.17V28.6714Z"
+            fill="#E40303"
+          />
+          <path
+            d="M103.17 70.1626H53.4209V78.421H103.17V70.1626Z"
+            fill="#750787"
+          />
+        </g>
+      </g>
+    </g>
+    <defs>
+      <clipPath id="clip0_12_17">
+        <rect width="267" height="79.988" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default NodejsDarkPride;
diff --git a/components/Icons/Logos/NodejsLightPride.tsx b/components/Icons/Logos/NodejsLightPride.tsx
new file mode 100644
index 0000000000000..86ba5dedb8354
--- /dev/null
+++ b/components/Icons/Logos/NodejsLightPride.tsx
@@ -0,0 +1,111 @@
+import type { FC, SVGProps } from 'react';
+
+const NodejsLightPride: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    width="267"
+    height="80"
+    viewBox="0 0 267 80"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clip-path="url(#clip0_12_39)">
+      <mask
+        id="mask0_12_39"
+        style={{ maskType: 'luminance' }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="267"
+        height="80"
+      >
+        <path d="M266.96 0H0V79.988H266.96V0Z" fill="white" />
+      </mask>
+      <g mask="url(#mask0_12_39)">
+        <path
+          d="M234.948 78.743C234.257 78.743 233.613 78.5578 233.015 78.2336L226.895 74.576C225.974 74.0666 226.435 73.8814 226.711 73.7888C227.953 73.372 228.183 73.2794 229.471 72.5388C229.61 72.4461 229.794 72.4925 229.931 72.5851L234.625 75.4094C234.809 75.502 235.038 75.502 235.177 75.4094L253.537 64.7139C253.72 64.6213 253.814 64.4361 253.814 64.2048V42.8602C253.814 42.6288 253.72 42.4437 253.537 42.351L235.177 31.7021C234.993 31.6094 234.762 31.6094 234.625 31.7021L216.265 42.351C216.081 42.4437 215.989 42.675 215.989 42.8602V64.2048C215.989 64.39 216.081 64.6213 216.265 64.7139L221.28 67.631C223.995 69.0198 225.698 67.3994 225.698 65.7788V44.7123C225.698 44.4346 225.928 44.1568 226.251 44.1568H228.598C228.874 44.1568 229.15 44.3882 229.15 44.7123V65.7788C229.15 69.4367 227.171 71.5664 223.719 71.5664C222.662 71.5664 221.834 71.5664 219.486 70.4091L214.655 67.631C213.459 66.9364 212.722 65.6401 212.722 64.2509V42.9066C212.722 41.5175 213.459 40.2212 214.655 39.5266L233.015 28.8314C234.165 28.1832 235.729 28.1832 236.88 28.8314L255.239 39.5266C256.435 40.2212 257.171 41.5175 257.171 42.9066V64.2509C257.171 65.6401 256.435 66.9364 255.239 67.631L236.88 78.3262C236.328 78.5578 235.637 78.743 234.948 78.743Z"
+          fill="#5FA04E"
+        />
+        <path
+          d="M240.653 64.0652C232.6 64.0652 230.943 60.3612 230.943 57.2128C230.943 56.935 231.173 56.6571 231.495 56.6571H233.888C234.165 56.6571 234.394 56.8425 234.394 57.1202C234.762 59.574 235.821 60.778 240.699 60.778C244.564 60.778 246.221 59.8982 246.221 57.8148C246.221 56.611 245.759 55.7313 239.732 55.1293C234.717 54.6198 231.587 53.5087 231.587 49.4805C231.587 45.7304 234.717 43.5078 239.962 43.5078C245.853 43.5078 248.751 45.5451 249.119 49.99C249.119 50.1289 249.074 50.2677 248.983 50.4067C248.888 50.4992 248.751 50.5919 248.611 50.5919H246.173C245.945 50.5919 245.714 50.4067 245.668 50.1751C245.115 47.6286 243.688 46.7953 239.916 46.7953C235.682 46.7953 235.177 48.2768 235.177 49.388C235.177 50.7306 235.774 51.1475 241.48 51.8882C247.14 52.6289 249.81 53.6939 249.81 57.6757C249.81 61.7501 246.45 64.0652 240.653 64.0652Z"
+          fill="#5FA04E"
+        />
+        <path
+          d="M267.16 41.6557C267.16 43.6005 265.548 45.221 263.615 45.221C261.683 45.221 260.072 43.6466 260.072 41.6557C260.072 39.6187 261.729 38.0908 263.615 38.0908C265.503 38.0908 267.16 39.6648 267.16 41.6557ZM260.625 41.6557C260.625 43.3227 261.96 44.6654 263.569 44.6654C265.227 44.6654 266.561 43.2763 266.561 41.6557C266.561 39.989 265.227 38.6927 263.569 38.6927C262.006 38.6927 260.625 39.989 260.625 41.6557ZM262.282 39.6648H263.663C264.123 39.6648 265.044 39.6648 265.044 40.7298C265.044 41.4706 264.581 41.6096 264.304 41.7021C264.859 41.7484 264.904 42.119 264.949 42.6281C264.996 42.9523 265.044 43.5078 265.135 43.693H264.304C264.304 43.5078 264.168 42.4894 264.168 42.443C264.123 42.2116 264.031 42.119 263.755 42.119H263.064V43.7393H262.282V39.6648ZM263.017 41.4244H263.615C264.123 41.4244 264.213 41.0541 264.213 40.8688C264.213 40.3133 263.845 40.3133 263.615 40.3133H262.973V41.4244H263.017Z"
+          fill="#5FA04E"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M43.6671 41.9478C43.6671 41.1144 43.2071 40.3275 42.4709 39.9107L23.007 28.5671C22.6849 28.3819 22.3167 28.2893 21.9486 28.2432C21.9026 28.2432 21.7647 28.2432 21.7647 28.2432C21.3965 28.2432 21.0284 28.3819 20.7063 28.5671L1.19636 39.8643C0.46014 40.2811 0 41.0684 0 41.9478L0.046014 72.3209C0.046014 72.7377 0.276084 73.1542 0.644196 73.3394C1.0123 73.5711 1.47245 73.5711 1.79455 73.3394L13.3901 66.6722C14.1263 66.2556 14.5864 65.4685 14.5864 64.6351V50.4208C14.5864 49.5875 15.0465 48.8002 15.7828 48.3837L20.7063 45.5131C21.0744 45.2814 21.4885 45.1888 21.9026 45.1888C22.3167 45.1888 22.7309 45.2814 23.053 45.5131L27.9764 48.3837C28.7126 48.8002 29.1729 49.5875 29.1729 50.4208V64.6351C29.1729 65.4685 29.6331 66.2556 30.3692 66.6722L41.8728 73.3394C42.2408 73.5711 42.7009 73.5711 43.0691 73.3394C43.4373 73.1542 43.6671 72.7377 43.6671 72.3209V41.9478Z"
+          fill="white"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M137.444 0.138901C137.076 -0.0463003 136.616 -0.0463003 136.293 0.138901C135.925 0.370401 135.696 0.740804 135.696 1.15751V31.2526C135.696 31.5304 135.557 31.8081 135.281 31.9936C135.005 32.1324 134.729 32.1324 134.453 31.9936L129.576 29.1691C128.84 28.7526 127.965 28.7526 127.229 29.1691L107.719 40.5127C106.983 40.9295 106.523 41.7165 106.523 42.5498V65.1906C106.523 66.0243 106.983 66.8112 107.719 67.228L127.229 78.5716C127.965 78.9882 128.84 78.9882 129.576 78.5716L149.086 67.228C149.822 66.8112 150.282 66.0243 150.282 65.1906V8.75077C150.282 7.87104 149.822 7.08394 149.086 6.66724L137.444 0.138901ZM135.65 57.7365C135.65 57.9678 135.557 58.153 135.374 58.2457L128.701 62.1351C128.517 62.2277 128.287 62.2277 128.103 62.1351L121.431 58.2457C121.247 58.153 121.155 57.9216 121.155 57.7365V49.9581C121.155 49.7265 121.247 49.5413 121.431 49.4487L128.103 45.5595C128.287 45.4669 128.517 45.4669 128.701 45.5595L135.374 49.4487C135.557 49.5413 135.65 49.7729 135.65 49.9581V57.7365Z"
+          fill="white"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M202.367 49.7725C203.105 49.3557 203.518 48.5688 203.518 47.7352V42.2255C203.518 41.3922 203.059 40.605 202.367 40.1885L182.996 28.8912C182.26 28.4744 181.386 28.4744 180.649 28.8912L161.14 40.2346C160.403 40.6514 159.943 41.4385 159.943 42.2719V64.9128C159.943 65.7461 160.403 66.5333 161.14 66.9498L180.511 78.0619C181.248 78.4786 182.122 78.4786 182.812 78.0619L194.546 71.4875C194.914 71.3023 195.144 70.8855 195.144 70.4686C195.144 70.0521 194.914 69.6354 194.546 69.4501L174.944 58.1064C174.576 57.8751 174.346 57.5048 174.346 57.088V50.0041C174.346 49.5873 174.576 49.1705 174.944 48.9853L181.064 45.4666C181.432 45.2352 181.892 45.2352 182.26 45.4666L188.38 48.9853C188.748 49.217 188.977 49.5873 188.977 50.0041V55.56C188.977 55.9768 189.208 56.3933 189.577 56.5786C189.944 56.8102 190.404 56.8102 190.772 56.5786L202.367 49.7725Z"
+          fill="white"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M181.524 48.7082C181.661 48.6155 181.846 48.6155 181.985 48.7082L185.711 50.8843C185.849 50.9768 185.941 51.1158 185.941 51.301V55.6532C185.941 55.8384 185.849 55.9774 185.711 56.07L181.985 58.2461C181.846 58.3387 181.661 58.3387 181.524 58.2461L177.797 56.07C177.659 55.9774 177.567 55.8384 177.567 55.6532V51.301C177.567 51.1158 177.659 50.9768 177.797 50.8843L181.524 48.7082Z"
+          fill="#5FA04E"
+        />
+        <mask
+          id="mask1_12_39"
+          style={{ maskType: 'alpha' }}
+          maskUnits="userSpaceOnUse"
+          x="53"
+          y="28"
+          width="44"
+          height="51"
+        >
+          <path
+            d="M76.2211 28.9482C75.4847 28.5316 74.6105 28.5316 73.8743 28.9482L54.5024 40.1993C53.7662 40.616 53.3521 41.4029 53.3521 42.2366V64.7846C53.3521 65.6181 53.8122 66.405 54.5024 66.8219L73.8743 78.0729C74.6105 78.4894 75.4847 78.4894 76.2211 78.0729L95.5929 66.8219C96.3288 66.405 96.7431 65.6181 96.7431 64.7846V42.2366C96.7431 41.4029 96.2832 40.616 95.5929 40.1993L76.2211 28.9482Z"
+            fill="white"
+          />
+        </mask>
+        <g mask="url(#mask1_12_39)">
+          <path
+            d="M103.17 53.5459H53.4209V61.8043H103.17V53.5459Z"
+            fill="#008026"
+          />
+          <path
+            d="M103.17 61.8042H53.4209V70.1621H103.17V61.8042Z"
+            fill="#004DFF"
+          />
+          <path
+            d="M103.17 37.0293H53.4209V45.2877H103.17V37.0293Z"
+            fill="#FF8C00"
+          />
+          <path
+            d="M103.17 45.2876H53.4209V53.546H103.17V45.2876Z"
+            fill="#FFED00"
+          />
+          <path
+            d="M103.17 28.6714H53.4209V37.0293H103.17V28.6714Z"
+            fill="#E40303"
+          />
+          <path
+            d="M103.17 70.1626H53.4209V78.421H103.17V70.1626Z"
+            fill="#750787"
+          />
+        </g>
+      </g>
+    </g>
+    <defs>
+      <clipPath id="clip0_12_39">
+        <rect width="267" height="79.988" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default NodejsLightPride;
diff --git a/components/__design__/node-logos.stories.tsx b/components/__design__/node-logos.stories.tsx
index 41d66bb10e9e1..11f1311b47dc3 100644
--- a/components/__design__/node-logos.stories.tsx
+++ b/components/__design__/node-logos.stories.tsx
@@ -3,7 +3,9 @@ import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 import JsIconGreen from '@/components/Icons/Logos/JsIconGreen';
 import JsIconWhite from '@/components/Icons/Logos/JsIconWhite';
 import NodejsLogoDark from '@/components/Icons/Logos/NodejsDark';
+import NodejsDarkPride from '@/components/Icons/Logos/NodejsDarkPride';
 import NodejsLogoLight from '@/components/Icons/Logos/NodejsLight';
+import NodejsLightPride from '@/components/Icons/Logos/NodejsLightPride';
 import NodejsStackedBlack from '@/components/Icons/Logos/NodejsStackedBlack';
 import NodejsStackedDark from '@/components/Icons/Logos/NodejsStackedDark';
 import NodejsStackedLight from '@/components/Icons/Logos/NodejsStackedLight';
@@ -18,6 +20,15 @@ export const HorizontalLogos: StoryObj = {
   ),
 };
 
+export const PrideLogos: StoryObj = {
+  render: () => (
+    <div className="flex flex-row gap-4">
+      <NodejsDarkPride width={267} height={80} className="block dark:hidden" />
+      <NodejsLightPride className="hidden dark:block" width={267} height={80} />
+    </div>
+  ),
+};
+
 export const StackedLogos: StoryObj = {
   render: () => (
     <div className="flex flex-row gap-4">
diff --git a/components/withNavBar.tsx b/components/withNavBar.tsx
index 8353dac0330e6..34caef1739f1f 100644
--- a/components/withNavBar.tsx
+++ b/components/withNavBar.tsx
@@ -8,6 +8,7 @@ import NavBar from '@/components/Containers/NavBar';
 import WithBanner from '@/components/withBanner';
 import { useClientContext, useSiteNavigation } from '@/hooks';
 import { useRouter } from '@/navigation.mjs';
+import { siteConfig } from '@/next.json.mjs';
 import { availableLocales } from '@/next.locales.mjs';
 
 const WithNavBar: FC = () => {
@@ -18,6 +19,8 @@ const WithNavBar: FC = () => {
 
   const locale = useLocale();
 
+  const isPrideEnabled = siteConfig.enablePrideLogo;
+
   const toggleCurrentTheme = () =>
     setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
 
@@ -37,6 +40,7 @@ const WithNavBar: FC = () => {
           text: label,
           target,
         }))}
+        enablePrideLogo={isPrideEnabled}
       />
     </div>
   );
diff --git a/public/static/logos/nodejsDarkPride.svg b/public/static/logos/nodejsDarkPride.svg
new file mode 100644
index 0000000000000..023ee1c3e4049
--- /dev/null
+++ b/public/static/logos/nodejsDarkPride.svg
@@ -0,0 +1,32 @@
+<svg width="267" height="80" viewBox="0 0 267 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_12_17)">
+<mask id="mask0_12_17" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="267" height="80">
+<path d="M266.96 0H0V79.988H266.96V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_12_17)">
+<path d="M234.948 78.743C234.257 78.743 233.613 78.5578 233.015 78.2336L226.895 74.576C225.974 74.0666 226.435 73.8814 226.711 73.7888C227.953 73.372 228.183 73.2794 229.471 72.5388C229.61 72.4461 229.794 72.4925 229.931 72.5851L234.625 75.4094C234.809 75.502 235.038 75.502 235.177 75.4094L253.537 64.7139C253.72 64.6213 253.814 64.4361 253.814 64.2048V42.8602C253.814 42.6288 253.72 42.4437 253.537 42.351L235.177 31.7021C234.993 31.6094 234.762 31.6094 234.625 31.7021L216.265 42.351C216.081 42.4437 215.989 42.675 215.989 42.8602V64.2048C215.989 64.39 216.081 64.6213 216.265 64.7139L221.28 67.6309C223.995 69.0198 225.698 67.3994 225.698 65.7788V44.7123C225.698 44.4346 225.928 44.1568 226.251 44.1568H228.598C228.874 44.1568 229.15 44.3882 229.15 44.7123V65.7788C229.15 69.4367 227.171 71.5664 223.719 71.5664C222.662 71.5664 221.834 71.5664 219.486 70.4091L214.655 67.6309C213.459 66.9364 212.722 65.64 212.722 64.2509V42.9066C212.722 41.5175 213.459 40.2212 214.655 39.5266L233.015 28.8314C234.165 28.1832 235.729 28.1832 236.88 28.8314L255.239 39.5266C256.435 40.2212 257.171 41.5175 257.171 42.9066V64.2509C257.171 65.64 256.435 66.9364 255.239 67.6309L236.88 78.3261C236.328 78.5578 235.637 78.743 234.948 78.743Z" fill="#5FA04E"/>
+<path d="M240.653 64.0652C232.6 64.0652 230.943 60.3612 230.943 57.2128C230.943 56.935 231.173 56.6572 231.495 56.6572H233.888C234.165 56.6572 234.394 56.8425 234.394 57.1202C234.762 59.574 235.821 60.778 240.699 60.778C244.564 60.778 246.221 59.8983 246.221 57.8148C246.221 56.611 245.759 55.7313 239.732 55.1293C234.717 54.6199 231.587 53.5087 231.587 49.4805C231.587 45.7304 234.717 43.5078 239.962 43.5078C245.853 43.5078 248.751 45.5451 249.119 49.99C249.119 50.129 249.074 50.2678 248.983 50.4067C248.888 50.4993 248.751 50.5919 248.611 50.5919H246.173C245.945 50.5919 245.714 50.4067 245.668 50.1751C245.115 47.6286 243.688 46.7953 239.916 46.7953C235.682 46.7953 235.177 48.2769 235.177 49.388C235.177 50.7306 235.774 51.1475 241.48 51.8883C247.14 52.629 249.81 53.6939 249.81 57.6757C249.81 61.7501 246.45 64.0652 240.653 64.0652Z" fill="#5FA04E"/>
+<path d="M267.16 41.6557C267.16 43.6005 265.548 45.221 263.615 45.221C261.683 45.221 260.072 43.6466 260.072 41.6557C260.072 39.6187 261.729 38.0908 263.615 38.0908C265.503 38.0908 267.16 39.6648 267.16 41.6557ZM260.625 41.6557C260.625 43.3227 261.96 44.6654 263.569 44.6654C265.227 44.6654 266.561 43.2763 266.561 41.6557C266.561 39.989 265.227 38.6927 263.569 38.6927C262.006 38.6927 260.625 39.989 260.625 41.6557ZM262.282 39.6648H263.663C264.123 39.6648 265.044 39.6648 265.044 40.7298C265.044 41.4706 264.581 41.6096 264.304 41.7021C264.859 41.7484 264.904 42.119 264.949 42.6281C264.996 42.9523 265.044 43.5078 265.135 43.693H264.304C264.304 43.5078 264.168 42.4894 264.168 42.443C264.123 42.2116 264.031 42.119 263.755 42.119H263.064V43.7393H262.282V39.6648ZM263.017 41.4244H263.615C264.123 41.4244 264.213 41.0541 264.213 40.8688C264.213 40.3133 263.845 40.3133 263.615 40.3133H262.973V41.4244H263.017Z" fill="#5FA04E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.6671 41.9478C43.6671 41.1144 43.2071 40.3275 42.4709 39.9107L23.007 28.5671C22.6849 28.3819 22.3167 28.2893 21.9486 28.2432C21.9026 28.2432 21.7647 28.2432 21.7647 28.2432C21.3965 28.2432 21.0284 28.3819 20.7063 28.5671L1.19636 39.8643C0.46014 40.2811 0 41.0684 0 41.9478L0.046014 72.3209C0.046014 72.7377 0.276084 73.1542 0.644196 73.3394C1.0123 73.5711 1.47245 73.5711 1.79455 73.3394L13.3901 66.6722C14.1263 66.2556 14.5864 65.4685 14.5864 64.6351V50.4208C14.5864 49.5875 15.0465 48.8002 15.7828 48.3837L20.7063 45.5131C21.0744 45.2814 21.4885 45.1888 21.9026 45.1888C22.3167 45.1888 22.7309 45.2814 23.053 45.5131L27.9764 48.3837C28.7126 48.8002 29.1729 49.5875 29.1729 50.4208V64.6351C29.1729 65.4685 29.6331 66.2556 30.3692 66.6722L41.8728 73.3394C42.2408 73.5711 42.7009 73.5711 43.0691 73.3394C43.4373 73.1542 43.6671 72.7377 43.6671 72.3209V41.9478Z" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M137.444 0.138901C137.076 -0.0463003 136.616 -0.0463003 136.293 0.138901C135.925 0.370401 135.696 0.740804 135.696 1.15751V31.2526C135.696 31.5304 135.557 31.8081 135.281 31.9936C135.005 32.1324 134.729 32.1324 134.453 31.9936L129.576 29.1691C128.84 28.7526 127.965 28.7526 127.229 29.1691L107.719 40.5127C106.983 40.9295 106.523 41.7165 106.523 42.5498V65.1906C106.523 66.0243 106.983 66.8112 107.719 67.228L127.229 78.5716C127.965 78.9882 128.84 78.9882 129.576 78.5716L149.086 67.228C149.822 66.8112 150.282 66.0243 150.282 65.1906V8.75077C150.282 7.87104 149.822 7.08394 149.086 6.66724L137.444 0.138901ZM135.65 57.7365C135.65 57.9678 135.557 58.153 135.374 58.2457L128.701 62.1351C128.517 62.2277 128.287 62.2277 128.103 62.1351L121.431 58.2457C121.247 58.153 121.155 57.9216 121.155 57.7365V49.9581C121.155 49.7265 121.247 49.5413 121.431 49.4487L128.103 45.5595C128.287 45.4669 128.517 45.4669 128.701 45.5595L135.374 49.4487C135.557 49.5413 135.65 49.7729 135.65 49.9581V57.7365Z" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M202.367 49.7725C203.105 49.3557 203.518 48.5688 203.518 47.7352V42.2255C203.518 41.3922 203.059 40.605 202.367 40.1885L182.996 28.8912C182.26 28.4744 181.386 28.4744 180.649 28.8912L161.14 40.2346C160.403 40.6514 159.943 41.4385 159.943 42.2719V64.9128C159.943 65.7461 160.403 66.5333 161.14 66.9498L180.511 78.0619C181.248 78.4786 182.122 78.4786 182.812 78.0619L194.546 71.4875C194.914 71.3023 195.144 70.8855 195.144 70.4686C195.144 70.0521 194.914 69.6354 194.546 69.4501L174.944 58.1064C174.576 57.8751 174.346 57.5048 174.346 57.088V50.0041C174.346 49.5873 174.576 49.1705 174.944 48.9853L181.064 45.4666C181.432 45.2352 181.892 45.2352 182.26 45.4666L188.38 48.9853C188.748 49.217 188.977 49.5873 188.977 50.0041V55.56C188.977 55.9768 189.208 56.3933 189.577 56.5786C189.944 56.8102 190.404 56.8102 190.772 56.5786L202.367 49.7725Z" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M181.524 48.7082C181.661 48.6155 181.846 48.6155 181.985 48.7082L185.711 50.8843C185.849 50.9768 185.941 51.1158 185.941 51.301V55.6532C185.941 55.8384 185.849 55.9774 185.711 56.07L181.985 58.2461C181.846 58.3387 181.661 58.3387 181.524 58.2461L177.797 56.07C177.659 55.9774 177.567 55.8384 177.567 55.6532V51.301C177.567 51.1158 177.659 50.9768 177.797 50.8843L181.524 48.7082Z" fill="#5FA04E"/>
+<mask id="mask1_12_17" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="53" y="28" width="44" height="51">
+<path d="M76.2211 28.9482C75.4847 28.5316 74.6105 28.5316 73.8743 28.9482L54.5024 40.1993C53.7662 40.616 53.3521 41.4029 53.3521 42.2366V64.7846C53.3521 65.6181 53.8122 66.405 54.5024 66.8219L73.8743 78.0729C74.6105 78.4894 75.4847 78.4894 76.2211 78.0729L95.5929 66.8219C96.3288 66.405 96.7431 65.6181 96.7431 64.7846V42.2366C96.7431 41.4029 96.2832 40.616 95.5929 40.1993L76.2211 28.9482Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_12_17)">
+<path d="M103.17 53.5459H53.4209V61.8043H103.17V53.5459Z" fill="#008026"/>
+<path d="M103.17 61.8042H53.4209V70.1621H103.17V61.8042Z" fill="#004DFF"/>
+<path d="M103.17 37.0293H53.4209V45.2877H103.17V37.0293Z" fill="#FF8C00"/>
+<path d="M103.17 45.2876H53.4209V53.546H103.17V45.2876Z" fill="#FFED00"/>
+<path d="M103.17 28.6714H53.4209V37.0293H103.17V28.6714Z" fill="#E40303"/>
+<path d="M103.17 70.1626H53.4209V78.421H103.17V70.1626Z" fill="#750787"/>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_12_17">
+<rect width="267" height="79.988" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/static/logos/nodejsLightPride.svg b/public/static/logos/nodejsLightPride.svg
new file mode 100644
index 0000000000000..29c9f9098cb85
--- /dev/null
+++ b/public/static/logos/nodejsLightPride.svg
@@ -0,0 +1,32 @@
+<svg width="267" height="80" viewBox="0 0 267 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_12_39)">
+<mask id="mask0_12_39" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="267" height="80">
+<path d="M266.96 0H0V79.988H266.96V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_12_39)">
+<path d="M234.948 78.743C234.257 78.743 233.613 78.5578 233.015 78.2336L226.895 74.576C225.974 74.0666 226.435 73.8814 226.711 73.7888C227.953 73.372 228.183 73.2794 229.471 72.5388C229.61 72.4461 229.794 72.4925 229.931 72.5851L234.625 75.4094C234.809 75.502 235.038 75.502 235.177 75.4094L253.537 64.7139C253.72 64.6213 253.814 64.4361 253.814 64.2048V42.8602C253.814 42.6288 253.72 42.4437 253.537 42.351L235.177 31.7021C234.993 31.6094 234.762 31.6094 234.625 31.7021L216.265 42.351C216.081 42.4437 215.989 42.675 215.989 42.8602V64.2048C215.989 64.39 216.081 64.6213 216.265 64.7139L221.28 67.631C223.995 69.0198 225.698 67.3994 225.698 65.7788V44.7123C225.698 44.4346 225.928 44.1568 226.251 44.1568H228.598C228.874 44.1568 229.15 44.3882 229.15 44.7123V65.7788C229.15 69.4367 227.171 71.5664 223.719 71.5664C222.662 71.5664 221.834 71.5664 219.486 70.4091L214.655 67.631C213.459 66.9364 212.722 65.6401 212.722 64.2509V42.9066C212.722 41.5175 213.459 40.2212 214.655 39.5266L233.015 28.8314C234.165 28.1832 235.729 28.1832 236.88 28.8314L255.239 39.5266C256.435 40.2212 257.171 41.5175 257.171 42.9066V64.2509C257.171 65.6401 256.435 66.9364 255.239 67.631L236.88 78.3262C236.328 78.5578 235.637 78.743 234.948 78.743Z" fill="#5FA04E"/>
+<path d="M240.653 64.0652C232.6 64.0652 230.943 60.3612 230.943 57.2128C230.943 56.935 231.173 56.6571 231.495 56.6571H233.888C234.165 56.6571 234.394 56.8425 234.394 57.1202C234.762 59.574 235.821 60.778 240.699 60.778C244.564 60.778 246.221 59.8982 246.221 57.8148C246.221 56.611 245.759 55.7313 239.732 55.1293C234.717 54.6198 231.587 53.5087 231.587 49.4805C231.587 45.7304 234.717 43.5078 239.962 43.5078C245.853 43.5078 248.751 45.5451 249.119 49.99C249.119 50.1289 249.074 50.2677 248.983 50.4067C248.888 50.4992 248.751 50.5919 248.611 50.5919H246.173C245.945 50.5919 245.714 50.4067 245.668 50.1751C245.115 47.6286 243.688 46.7953 239.916 46.7953C235.682 46.7953 235.177 48.2768 235.177 49.388C235.177 50.7306 235.774 51.1475 241.48 51.8882C247.14 52.6289 249.81 53.6939 249.81 57.6757C249.81 61.7501 246.45 64.0652 240.653 64.0652Z" fill="#5FA04E"/>
+<path d="M267.16 41.6557C267.16 43.6005 265.548 45.221 263.615 45.221C261.683 45.221 260.072 43.6466 260.072 41.6557C260.072 39.6187 261.729 38.0908 263.615 38.0908C265.503 38.0908 267.16 39.6648 267.16 41.6557ZM260.625 41.6557C260.625 43.3227 261.96 44.6654 263.569 44.6654C265.227 44.6654 266.561 43.2763 266.561 41.6557C266.561 39.989 265.227 38.6927 263.569 38.6927C262.006 38.6927 260.625 39.989 260.625 41.6557ZM262.282 39.6648H263.663C264.123 39.6648 265.044 39.6648 265.044 40.7298C265.044 41.4706 264.581 41.6096 264.304 41.7021C264.859 41.7484 264.904 42.119 264.949 42.6281C264.996 42.9523 265.044 43.5078 265.135 43.693H264.304C264.304 43.5078 264.168 42.4894 264.168 42.443C264.123 42.2116 264.031 42.119 263.755 42.119H263.064V43.7393H262.282V39.6648ZM263.017 41.4244H263.615C264.123 41.4244 264.213 41.0541 264.213 40.8688C264.213 40.3133 263.845 40.3133 263.615 40.3133H262.973V41.4244H263.017Z" fill="#5FA04E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.6671 41.9478C43.6671 41.1144 43.2071 40.3275 42.4709 39.9107L23.007 28.5671C22.6849 28.3819 22.3167 28.2893 21.9486 28.2432C21.9026 28.2432 21.7647 28.2432 21.7647 28.2432C21.3965 28.2432 21.0284 28.3819 20.7063 28.5671L1.19636 39.8643C0.46014 40.2811 0 41.0684 0 41.9478L0.046014 72.3209C0.046014 72.7377 0.276084 73.1542 0.644196 73.3394C1.0123 73.5711 1.47245 73.5711 1.79455 73.3394L13.3901 66.6722C14.1263 66.2556 14.5864 65.4685 14.5864 64.6351V50.4208C14.5864 49.5875 15.0465 48.8002 15.7828 48.3837L20.7063 45.5131C21.0744 45.2814 21.4885 45.1888 21.9026 45.1888C22.3167 45.1888 22.7309 45.2814 23.053 45.5131L27.9764 48.3837C28.7126 48.8002 29.1729 49.5875 29.1729 50.4208V64.6351C29.1729 65.4685 29.6331 66.2556 30.3692 66.6722L41.8728 73.3394C42.2408 73.5711 42.7009 73.5711 43.0691 73.3394C43.4373 73.1542 43.6671 72.7377 43.6671 72.3209V41.9478Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M137.444 0.138901C137.076 -0.0463003 136.616 -0.0463003 136.293 0.138901C135.925 0.370401 135.696 0.740804 135.696 1.15751V31.2526C135.696 31.5304 135.557 31.8081 135.281 31.9936C135.005 32.1324 134.729 32.1324 134.453 31.9936L129.576 29.1691C128.84 28.7526 127.965 28.7526 127.229 29.1691L107.719 40.5127C106.983 40.9295 106.523 41.7165 106.523 42.5498V65.1906C106.523 66.0243 106.983 66.8112 107.719 67.228L127.229 78.5716C127.965 78.9882 128.84 78.9882 129.576 78.5716L149.086 67.228C149.822 66.8112 150.282 66.0243 150.282 65.1906V8.75077C150.282 7.87104 149.822 7.08394 149.086 6.66724L137.444 0.138901ZM135.65 57.7365C135.65 57.9678 135.557 58.153 135.374 58.2457L128.701 62.1351C128.517 62.2277 128.287 62.2277 128.103 62.1351L121.431 58.2457C121.247 58.153 121.155 57.9216 121.155 57.7365V49.9581C121.155 49.7265 121.247 49.5413 121.431 49.4487L128.103 45.5595C128.287 45.4669 128.517 45.4669 128.701 45.5595L135.374 49.4487C135.557 49.5413 135.65 49.7729 135.65 49.9581V57.7365Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M202.367 49.7725C203.105 49.3557 203.518 48.5688 203.518 47.7352V42.2255C203.518 41.3922 203.059 40.605 202.367 40.1885L182.996 28.8912C182.26 28.4744 181.386 28.4744 180.649 28.8912L161.14 40.2346C160.403 40.6514 159.943 41.4385 159.943 42.2719V64.9128C159.943 65.7461 160.403 66.5333 161.14 66.9498L180.511 78.0619C181.248 78.4786 182.122 78.4786 182.812 78.0619L194.546 71.4875C194.914 71.3023 195.144 70.8855 195.144 70.4686C195.144 70.0521 194.914 69.6354 194.546 69.4501L174.944 58.1064C174.576 57.8751 174.346 57.5048 174.346 57.088V50.0041C174.346 49.5873 174.576 49.1705 174.944 48.9853L181.064 45.4666C181.432 45.2352 181.892 45.2352 182.26 45.4666L188.38 48.9853C188.748 49.217 188.977 49.5873 188.977 50.0041V55.56C188.977 55.9768 189.208 56.3933 189.577 56.5786C189.944 56.8102 190.404 56.8102 190.772 56.5786L202.367 49.7725Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M181.524 48.7082C181.661 48.6155 181.846 48.6155 181.985 48.7082L185.711 50.8843C185.849 50.9768 185.941 51.1158 185.941 51.301V55.6532C185.941 55.8384 185.849 55.9774 185.711 56.07L181.985 58.2461C181.846 58.3387 181.661 58.3387 181.524 58.2461L177.797 56.07C177.659 55.9774 177.567 55.8384 177.567 55.6532V51.301C177.567 51.1158 177.659 50.9768 177.797 50.8843L181.524 48.7082Z" fill="#5FA04E"/>
+<mask id="mask1_12_39" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="53" y="28" width="44" height="51">
+<path d="M76.2211 28.9482C75.4847 28.5316 74.6105 28.5316 73.8743 28.9482L54.5024 40.1993C53.7662 40.616 53.3521 41.4029 53.3521 42.2366V64.7846C53.3521 65.6181 53.8122 66.405 54.5024 66.8219L73.8743 78.0729C74.6105 78.4894 75.4847 78.4894 76.2211 78.0729L95.5929 66.8219C96.3288 66.405 96.7431 65.6181 96.7431 64.7846V42.2366C96.7431 41.4029 96.2832 40.616 95.5929 40.1993L76.2211 28.9482Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_12_39)">
+<path d="M103.17 53.5459H53.4209V61.8043H103.17V53.5459Z" fill="#008026"/>
+<path d="M103.17 61.8042H53.4209V70.1621H103.17V61.8042Z" fill="#004DFF"/>
+<path d="M103.17 37.0293H53.4209V45.2877H103.17V37.0293Z" fill="#FF8C00"/>
+<path d="M103.17 45.2876H53.4209V53.546H103.17V45.2876Z" fill="#FFED00"/>
+<path d="M103.17 28.6714H53.4209V37.0293H103.17V28.6714Z" fill="#E40303"/>
+<path d="M103.17 70.1626H53.4209V78.421H103.17V70.1626Z" fill="#750787"/>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_12_39">
+<rect width="267" height="79.988" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/site.json b/site.json
index 95b02e688ff13..427c494f9f380 100644
--- a/site.json
+++ b/site.json
@@ -3,6 +3,7 @@
   "description": "Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.",
   "favicon": "/static/images/favicons/favicon.png",
   "accentColor": "#333",
+  "enablePrideLogo": false,
   "twitter": {
     "username": "@nodejs",
     "card": "summary",
diff --git a/types/config.ts b/types/config.ts
index 1327f7dbcf001..271a476ec4ecf 100644
--- a/types/config.ts
+++ b/types/config.ts
@@ -21,6 +21,7 @@ export interface SiteConfig {
   lightAccentColor: string;
   darkAccentColor: string;
   og: OGConfig;
+  enablePrideLogo: boolean;
   twitter: TwitterConfig;
   rssFeeds: Array<RSSFeed>;
   websiteBanners: Record<string, WebsiteBanner>;

From 509f78c0a47bca87ea784a075c612ede0a49a575 Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <augustin.mauroy@outlook.fr>
Date: Sat, 25 May 2024 22:34:41 +0200
Subject: [PATCH 2/3] feat(logo): update logic to allow variant

---
 components/Common/NodejsLogo/index.module.css | 12 ++++++
 .../Common/NodejsLogo/index.stories.tsx       | 14 +++++++
 components/Common/NodejsLogo/index.tsx        | 30 ++++++++++++++
 components/Containers/NavBar/index.module.css | 13 ------
 .../Containers/NavBar/index.stories.tsx       | 41 -------------------
 components/Containers/NavBar/index.tsx        | 19 +--------
 components/withNavBar.tsx                     |  4 --
 components/withNodejsLogo.tsx                 | 10 +++++
 8 files changed, 68 insertions(+), 75 deletions(-)
 create mode 100644 components/Common/NodejsLogo/index.module.css
 create mode 100644 components/Common/NodejsLogo/index.stories.tsx
 create mode 100644 components/Common/NodejsLogo/index.tsx
 create mode 100644 components/withNodejsLogo.tsx

diff --git a/components/Common/NodejsLogo/index.module.css b/components/Common/NodejsLogo/index.module.css
new file mode 100644
index 0000000000000..7899c8c8e92e4
--- /dev/null
+++ b/components/Common/NodejsLogo/index.module.css
@@ -0,0 +1,12 @@
+.nodejsLogoDark {
+  @apply h-6
+    w-20
+    dark:hidden;
+}
+
+.nodejsLogoLight {
+  @apply hidden
+    h-6
+    w-20
+    dark:block;
+}
diff --git a/components/Common/NodejsLogo/index.stories.tsx b/components/Common/NodejsLogo/index.stories.tsx
new file mode 100644
index 0000000000000..1023b44d73c15
--- /dev/null
+++ b/components/Common/NodejsLogo/index.stories.tsx
@@ -0,0 +1,14 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import NodejsLogo from '@/components/Common/NodejsLogo';
+
+type Story = StoryObj<typeof NodejsLogo>;
+type Meta = MetaObj<typeof NodejsLogo>;
+
+export const Default: Story = {};
+
+export const WithPride: Story = {
+  args: { isPrideEnabled: true },
+};
+
+export default { component: NodejsLogo } as Meta;
diff --git a/components/Common/NodejsLogo/index.tsx b/components/Common/NodejsLogo/index.tsx
new file mode 100644
index 0000000000000..c777f543f080b
--- /dev/null
+++ b/components/Common/NodejsLogo/index.tsx
@@ -0,0 +1,30 @@
+import type { FC } from 'react';
+
+import NodejsDark from '@/components/Icons/Logos/NodejsDark';
+import NodejsDarkPride from '@/components/Icons/Logos/NodejsDarkPride';
+import NodejsLight from '@/components/Icons/Logos/NodejsLight';
+import NodejsLightPride from '@/components/Icons/Logos/NodejsLightPride';
+
+import style from './index.module.css';
+
+type NodejsLogoProps = {
+  isPrideEnabled?: boolean;
+};
+
+const NodejsLogo: FC<NodejsLogoProps> = ({ isPrideEnabled }) => (
+  <>
+    {isPrideEnabled ? (
+      <>
+        <NodejsDarkPride className={style.nodejsLogoDark} />
+        <NodejsLightPride className={style.nodejsLogoLight} />
+      </>
+    ) : (
+      <>
+        <NodejsDark className={style.nodejsLogoDark} />
+        <NodejsLight className={style.nodejsLogoLight} />
+      </>
+    )}
+  </>
+);
+
+export default NodejsLogo;
diff --git a/components/Containers/NavBar/index.module.css b/components/Containers/NavBar/index.module.css
index 05b0200f0cbd6..21cdde580c668 100644
--- a/components/Containers/NavBar/index.module.css
+++ b/components/Containers/NavBar/index.module.css
@@ -33,19 +33,6 @@
     flex-1;
 }
 
-.nodejsLogoDark {
-  @apply h-6
-    w-20
-    dark:hidden;
-}
-
-.nodejsLogoLight {
-  @apply hidden
-    h-6
-    w-20
-    dark:block;
-}
-
 .navInteractionIcon {
   @apply size-6;
 }
diff --git a/components/Containers/NavBar/index.stories.tsx b/components/Containers/NavBar/index.stories.tsx
index c8ea0d68cb417..33a945323fb3b 100644
--- a/components/Containers/NavBar/index.stories.tsx
+++ b/components/Containers/NavBar/index.stories.tsx
@@ -45,45 +45,4 @@ export const Default: Story = {
   },
 };
 
-export const WithPrideLogo: Story = {
-  args: {
-    navItems: [
-      {
-        text: 'Learn',
-        link: '/',
-      },
-      {
-        text: 'About',
-        link: '/about',
-      },
-      {
-        text: 'Docs',
-        link: '/docs',
-      },
-      {
-        text: 'Download',
-        link: '/download',
-      },
-      {
-        text: 'Blog',
-        link: '/blog',
-      },
-      {
-        text: 'Certification',
-        link: 'https://openjsf.org/certification',
-      },
-    ],
-    languages: {
-      availableLanguages: [
-        { name: 'English', code: 'en' },
-        { name: 'French', code: 'fr' },
-        { name: 'Spanish', code: 'es' },
-      ],
-      currentLanguage: 'en',
-    },
-    onThemeTogglerClick: () => {},
-    enablePrideLogo: true,
-  },
-};
-
 export default { component: NavBar } as Meta;
diff --git a/components/Containers/NavBar/index.tsx b/components/Containers/NavBar/index.tsx
index 299c3f3beaa4a..1ce06a1a5d0f6 100644
--- a/components/Containers/NavBar/index.tsx
+++ b/components/Containers/NavBar/index.tsx
@@ -10,12 +10,9 @@ import LanguageDropdown from '@/components/Common/LanguageDropDown';
 import { SearchButton } from '@/components/Common/Search';
 import ThemeToggle from '@/components/Common/ThemeToggle';
 import NavItem from '@/components/Containers/NavBar/NavItem';
-import NodejsDark from '@/components/Icons/Logos/NodejsDark';
-import NodejsDarkPride from '@/components/Icons/Logos/NodejsDarkPride';
-import NodejsLight from '@/components/Icons/Logos/NodejsLight';
-import NodejsLightPride from '@/components/Icons/Logos/NodejsLightPride';
 import GitHub from '@/components/Icons/Social/GitHub';
 import Link from '@/components/Link';
+import WithNodejsLogo from '@/components/withNodejsLogo';
 import type { FormattedMessage } from '@/types';
 
 import style from './index.module.css';
@@ -33,14 +30,12 @@ type NavbarProps = {
   }>;
   languages: ComponentProps<typeof LanguageDropdown>;
   onThemeTogglerClick: () => void;
-  enablePrideLogo?: boolean;
 };
 
 const NavBar: FC<NavbarProps> = ({
   navItems,
   languages,
   onThemeTogglerClick,
-  enablePrideLogo = false,
 }) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
@@ -48,17 +43,7 @@ const NavBar: FC<NavbarProps> = ({
     <nav className={`${style.container}`}>
       <div className={style.nodeIconAndMobileItemsToggler}>
         <Link className={style.nodeIconWrapper} href="/" aria-label="Home">
-          {enablePrideLogo ? (
-            <>
-              <NodejsDarkPride className={style.nodejsLogoDark} />
-              <NodejsLightPride className={style.nodejsLogoLight} />
-            </>
-          ) : (
-            <>
-              <NodejsDark className={style.nodejsLogoDark} />
-              <NodejsLight className={style.nodejsLogoLight} />
-            </>
-          )}
+          <WithNodejsLogo />
         </Link>
 
         <Label.Root
diff --git a/components/withNavBar.tsx b/components/withNavBar.tsx
index 34caef1739f1f..8353dac0330e6 100644
--- a/components/withNavBar.tsx
+++ b/components/withNavBar.tsx
@@ -8,7 +8,6 @@ import NavBar from '@/components/Containers/NavBar';
 import WithBanner from '@/components/withBanner';
 import { useClientContext, useSiteNavigation } from '@/hooks';
 import { useRouter } from '@/navigation.mjs';
-import { siteConfig } from '@/next.json.mjs';
 import { availableLocales } from '@/next.locales.mjs';
 
 const WithNavBar: FC = () => {
@@ -19,8 +18,6 @@ const WithNavBar: FC = () => {
 
   const locale = useLocale();
 
-  const isPrideEnabled = siteConfig.enablePrideLogo;
-
   const toggleCurrentTheme = () =>
     setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
 
@@ -40,7 +37,6 @@ const WithNavBar: FC = () => {
           text: label,
           target,
         }))}
-        enablePrideLogo={isPrideEnabled}
       />
     </div>
   );
diff --git a/components/withNodejsLogo.tsx b/components/withNodejsLogo.tsx
new file mode 100644
index 0000000000000..39aea93b0c95a
--- /dev/null
+++ b/components/withNodejsLogo.tsx
@@ -0,0 +1,10 @@
+import type { FC } from 'react';
+
+import NodejsLogo from '@/components/Common/NodejsLogo';
+import { siteConfig } from '@/next.json.mjs';
+
+const WithNodejsLogo: FC = () => (
+  <NodejsLogo isPrideEnabled={siteConfig.enablePrideLogo} />
+);
+
+export default WithNodejsLogo;

From 13db737c6b20eaf810b398220f9ec5c95999a3d4 Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com>
Date: Fri, 31 May 2024 09:11:01 +0200
Subject: [PATCH 3/3] update

---
 components/Common/NodejsLogo/index.stories.tsx |  2 +-
 components/Common/NodejsLogo/index.tsx         | 10 ++++++----
 components/withNodejsLogo.tsx                  |  2 +-
 package.json                                   |  3 ++-
 site.json                                      |  2 +-
 types/config.ts                                |  4 +++-
 6 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/components/Common/NodejsLogo/index.stories.tsx b/components/Common/NodejsLogo/index.stories.tsx
index 1023b44d73c15..691b885d1d283 100644
--- a/components/Common/NodejsLogo/index.stories.tsx
+++ b/components/Common/NodejsLogo/index.stories.tsx
@@ -8,7 +8,7 @@ type Meta = MetaObj<typeof NodejsLogo>;
 export const Default: Story = {};
 
 export const WithPride: Story = {
-  args: { isPrideEnabled: true },
+  args: { variant: 'pride' },
 };
 
 export default { component: NodejsLogo } as Meta;
diff --git a/components/Common/NodejsLogo/index.tsx b/components/Common/NodejsLogo/index.tsx
index c777f543f080b..6fead1ab85adc 100644
--- a/components/Common/NodejsLogo/index.tsx
+++ b/components/Common/NodejsLogo/index.tsx
@@ -4,21 +4,23 @@ import NodejsDark from '@/components/Icons/Logos/NodejsDark';
 import NodejsDarkPride from '@/components/Icons/Logos/NodejsDarkPride';
 import NodejsLight from '@/components/Icons/Logos/NodejsLight';
 import NodejsLightPride from '@/components/Icons/Logos/NodejsLightPride';
+import type { LogoVariant } from '@/types';
 
 import style from './index.module.css';
 
 type NodejsLogoProps = {
-  isPrideEnabled?: boolean;
+  variant?: LogoVariant;
 };
 
-const NodejsLogo: FC<NodejsLogoProps> = ({ isPrideEnabled }) => (
+const NodejsLogo: FC<NodejsLogoProps> = ({ variant = 'default' }) => (
   <>
-    {isPrideEnabled ? (
+    {variant === 'pride' && (
       <>
         <NodejsDarkPride className={style.nodejsLogoDark} />
         <NodejsLightPride className={style.nodejsLogoLight} />
       </>
-    ) : (
+    )}
+    {variant === 'default' && (
       <>
         <NodejsDark className={style.nodejsLogoDark} />
         <NodejsLight className={style.nodejsLogoLight} />
diff --git a/components/withNodejsLogo.tsx b/components/withNodejsLogo.tsx
index 39aea93b0c95a..d6c270d50641f 100644
--- a/components/withNodejsLogo.tsx
+++ b/components/withNodejsLogo.tsx
@@ -4,7 +4,7 @@ import NodejsLogo from '@/components/Common/NodejsLogo';
 import { siteConfig } from '@/next.json.mjs';
 
 const WithNodejsLogo: FC = () => (
-  <NodejsLogo isPrideEnabled={siteConfig.enablePrideLogo} />
+  <NodejsLogo variant={siteConfig.logoVariant} />
 );
 
 export default WithNodejsLogo;
diff --git a/package.json b/package.json
index 25eab135e6502..e445568472a5d 100644
--- a/package.json
+++ b/package.json
@@ -128,5 +128,6 @@
     "stylelint-selector-bem-pattern": "4.0.0",
     "turbo": "1.13.2",
     "user-agent-data-types": "0.4.2"
-  }
+  },
+  "packageManager": "pnpm@8.6.3+sha1.30b2ad9776a393ccd1766239fd21e0c14a3c3acf"
 }
diff --git a/site.json b/site.json
index 427c494f9f380..898fcbb05fe11 100644
--- a/site.json
+++ b/site.json
@@ -3,7 +3,7 @@
   "description": "Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.",
   "favicon": "/static/images/favicons/favicon.png",
   "accentColor": "#333",
-  "enablePrideLogo": false,
+  "logoVariant": "pride",
   "twitter": {
     "username": "@nodejs",
     "card": "summary",
diff --git a/types/config.ts b/types/config.ts
index 271a476ec4ecf..2d02e81e5da45 100644
--- a/types/config.ts
+++ b/types/config.ts
@@ -13,6 +13,8 @@ export interface OGConfig {
   imgHeight: string;
 }
 
+export type LogoVariant = 'default' | 'pride';
+
 export interface SiteConfig {
   title: string;
   description: string;
@@ -21,7 +23,7 @@ export interface SiteConfig {
   lightAccentColor: string;
   darkAccentColor: string;
   og: OGConfig;
-  enablePrideLogo: boolean;
+  logoVariant: LogoVariant;
   twitter: TwitterConfig;
   rssFeeds: Array<RSSFeed>;
   websiteBanners: Record<string, WebsiteBanner>;