From 491757ee7020abb01355ed6e8b3d97d587b3b571 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= <arauujogui@gmail.com>
Date: Mon, 17 Jun 2024 20:44:41 -0300
Subject: [PATCH 1/3] refactor: merge horizontal logos

---
 components/Common/NodejsLogo/index.module.css |  12 +-
 components/Common/NodejsLogo/index.tsx        |   6 +-
 .../Logos/{NodejsLight.tsx => Nodejs.tsx}     |   9 +-
 components/Icons/Logos/NodejsDark.tsx         | 118 ------------------
 components/__design__/node-logos.stories.tsx  |  10 +-
 5 files changed, 10 insertions(+), 145 deletions(-)
 rename components/Icons/Logos/{NodejsLight.tsx => Nodejs.tsx} (97%)
 delete mode 100644 components/Icons/Logos/NodejsDark.tsx

diff --git a/components/Common/NodejsLogo/index.module.css b/components/Common/NodejsLogo/index.module.css
index 7899c8c8e92e4..2e74ac633f684 100644
--- a/components/Common/NodejsLogo/index.module.css
+++ b/components/Common/NodejsLogo/index.module.css
@@ -1,12 +1,4 @@
-.nodejsLogoDark {
+.nodejsLogo {
   @apply h-6
-    w-20
-    dark:hidden;
-}
-
-.nodejsLogoLight {
-  @apply hidden
-    h-6
-    w-20
-    dark:block;
+    w-20;
 }
diff --git a/components/Common/NodejsLogo/index.tsx b/components/Common/NodejsLogo/index.tsx
index 6fead1ab85adc..a70734476d676 100644
--- a/components/Common/NodejsLogo/index.tsx
+++ b/components/Common/NodejsLogo/index.tsx
@@ -1,8 +1,7 @@
 import type { FC } from 'react';
 
-import NodejsDark from '@/components/Icons/Logos/NodejsDark';
+import Nodejs from '@/components/Icons/Logos/Nodejs';
 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';
 
@@ -22,8 +21,7 @@ const NodejsLogo: FC<NodejsLogoProps> = ({ variant = 'default' }) => (
     )}
     {variant === 'default' && (
       <>
-        <NodejsDark className={style.nodejsLogoDark} />
-        <NodejsLight className={style.nodejsLogoLight} />
+        <Nodejs className={style.nodejsLogo} />
       </>
     )}
   </>
diff --git a/components/Icons/Logos/NodejsLight.tsx b/components/Icons/Logos/Nodejs.tsx
similarity index 97%
rename from components/Icons/Logos/NodejsLight.tsx
rename to components/Icons/Logos/Nodejs.tsx
index d541b971f362a..d3ae93216cb9c 100644
--- a/components/Icons/Logos/NodejsLight.tsx
+++ b/components/Icons/Logos/Nodejs.tsx
@@ -1,12 +1,14 @@
+import classNames from 'classnames';
 import type { FC, SVGProps } from 'react';
 
-const NodejsLight: FC<SVGProps<SVGSVGElement>> = props => (
+const Nodejs: FC<SVGProps<SVGSVGElement>> = ({ className, ...props }) => (
   <svg
     width="267"
     height="80"
     viewBox="0 0 267 80"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    className={classNames('fill-[#333333] dark:fill-white', className)}
     {...props}
   >
     <mask
@@ -37,19 +39,16 @@ const NodejsLight: FC<SVGProps<SVGSVGElement>> = props => (
         fillRule="evenodd"
         clipRule="evenodd"
         d="M43.6737 41.9539C43.6737 41.1204 43.2136 40.3334 42.4773 39.9165L23.0104 28.5712C22.6883 28.386 22.3201 28.2934 21.9519 28.2472C21.9059 28.2472 21.7679 28.2472 21.7679 28.2472C21.3997 28.2472 21.0315 28.386 20.7094 28.5712L1.19654 39.8701C0.460209 40.287 0 41.0743 0 41.9539L0.0460209 72.3315C0.0460209 72.7484 0.276126 73.165 0.644293 73.3502C1.01246 73.5819 1.47267 73.5819 1.79482 73.3502L13.3921 66.682C14.1284 66.2653 14.5886 65.4781 14.5886 64.6446V50.4282C14.5886 49.5947 15.0488 48.8074 15.7852 48.3908L20.7094 45.5197C21.0776 45.288 21.4917 45.1954 21.9059 45.1954C22.3201 45.1954 22.7343 45.288 23.0565 45.5197L27.9806 48.3908C28.7169 48.8074 29.1773 49.5947 29.1773 50.4282V64.6446C29.1773 65.4781 29.6375 66.2653 30.3738 66.682L41.8791 73.3502C42.2471 73.5819 42.7073 73.5819 43.0755 73.3502C43.4438 73.165 43.6737 72.7484 43.6737 72.3315V41.9539Z"
-        fill="white"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M137.465 0.138922C137.096 -0.0463072 136.636 -0.0463072 136.314 0.138922C135.946 0.370456 135.716 0.740915 135.716 1.15768V31.2573C135.716 31.5351 135.578 31.8129 135.301 31.9984C135.025 32.1372 134.749 32.1372 134.473 31.9984L129.595 29.1735C128.859 28.7569 127.984 28.7569 127.248 29.1735L107.735 40.5188C106.999 40.9357 106.539 41.7227 106.539 42.5562V65.2004C106.539 66.0342 106.999 66.8212 107.735 67.2381L127.248 78.5834C127.984 79 128.859 79 129.595 78.5834L149.108 67.2381C149.844 66.8212 150.304 66.0342 150.304 65.2004V8.75207C150.304 7.87222 149.844 7.085 149.108 6.66824L137.465 0.138922ZM135.67 57.7451C135.67 57.9765 135.578 58.1617 135.394 58.2544L128.72 62.1444C128.536 62.237 128.306 62.237 128.122 62.1444L121.449 58.2544C121.265 58.1617 121.173 57.9303 121.173 57.7451V49.9656C121.173 49.7339 121.265 49.5487 121.449 49.4561L128.122 45.5663C128.306 45.4737 128.536 45.4737 128.72 45.5663L135.394 49.4561C135.578 49.5487 135.67 49.7803 135.67 49.9656V57.7451Z"
-        fill="white"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
         d="M202.398 49.7801C203.135 49.3632 203.549 48.5762 203.549 47.7425V42.2319C203.549 41.3985 203.089 40.6112 202.398 40.1946L183.023 28.8957C182.287 28.4788 181.413 28.4788 180.676 28.8957L161.164 40.2407C160.427 40.6576 159.967 41.4449 159.967 42.2784V64.9226C159.967 65.7561 160.427 66.5434 161.164 66.96L180.538 78.0737C181.275 78.4905 182.149 78.4905 182.839 78.0737L194.575 71.4983C194.943 71.3131 195.173 70.8962 195.173 70.4793C195.173 70.0627 194.943 69.6459 194.575 69.4606L174.97 58.1153C174.602 57.8839 174.372 57.5135 174.372 57.0966V50.0117C174.372 49.5949 174.602 49.178 174.97 48.9928L181.091 45.4735C181.459 45.2421 181.919 45.2421 182.287 45.4735L188.408 48.9928C188.776 49.2245 189.006 49.5949 189.006 50.0117V55.5685C189.006 55.9853 189.236 56.4019 189.605 56.5872C189.973 56.8188 190.433 56.8188 190.801 56.5872L202.398 49.7801Z"
-        fill="white"
       />
       <path
         fillRule="evenodd"
@@ -115,4 +114,4 @@ const NodejsLight: FC<SVGProps<SVGSVGElement>> = props => (
   </svg>
 );
 
-export default NodejsLight;
+export default Nodejs;
diff --git a/components/Icons/Logos/NodejsDark.tsx b/components/Icons/Logos/NodejsDark.tsx
deleted file mode 100644
index f913d72cf8a4a..0000000000000
--- a/components/Icons/Logos/NodejsDark.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import type { FC, SVGProps } from 'react';
-
-const NodejsDark: FC<SVGProps<SVGSVGElement>> = props => (
-  <svg
-    width="267"
-    height="80"
-    viewBox="0 0 267 80"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <mask
-      id="mask0_1804_2337"
-      style={{ maskType: 'luminance' }}
-      maskUnits="userSpaceOnUse"
-      x="0"
-      y="0"
-      width="267"
-      height="80"
-    >
-      <path d="M267 0H0V79.3784H267V0Z" fill="white" />
-    </mask>
-    <g mask="url(#mask0_1804_2337)">
-      <path
-        d="M234.983 78.7547C234.292 78.7547 233.648 78.5695 233.05 78.2452L226.929 74.5871C226.008 74.0776 226.469 73.8924 226.745 73.7998C227.987 73.3829 228.217 73.2903 229.506 72.5495C229.644 72.4569 229.828 72.5033 229.966 72.5959L234.66 75.4206C234.844 75.5132 235.074 75.5132 235.212 75.4206L253.575 64.7235C253.758 64.6309 253.852 64.4457 253.852 64.2143V42.8665C253.852 42.6351 253.758 42.4499 253.575 42.3573L235.212 31.7067C235.028 31.614 234.798 31.614 234.66 31.7067L216.298 42.3573C216.114 42.4499 216.022 42.6813 216.022 42.8665V64.2143C216.022 64.3995 216.114 64.6309 216.298 64.7235L221.314 67.641C224.029 69.0301 225.732 67.4094 225.732 65.7886V44.7189C225.732 44.4411 225.962 44.1633 226.285 44.1633H228.632C228.908 44.1633 229.184 44.3947 229.184 44.7189V65.7886C229.184 69.447 227.205 71.577 223.753 71.577C222.695 71.577 221.867 71.577 219.519 70.4195L214.687 67.641C213.491 66.9463 212.754 65.6498 212.754 64.2604V42.913C212.754 41.5236 213.491 40.2271 214.687 39.5324L233.05 28.8356C234.2 28.1873 235.765 28.1873 236.915 28.8356L255.278 39.5324C256.474 40.2271 257.21 41.5236 257.21 42.913V64.2604C257.21 65.6498 256.474 66.9463 255.278 67.641L236.915 78.3378C236.363 78.5695 235.673 78.7547 234.983 78.7547Z"
-        fill="#5FA04E"
-      />
-      <path
-        d="M240.69 64.075C232.635 64.075 230.978 60.3704 230.978 57.2215C230.978 56.9437 231.208 56.6658 231.53 56.6658H233.923C234.2 56.6658 234.43 56.8511 234.43 57.1289C234.798 59.5831 235.856 60.7873 240.735 60.7873C244.601 60.7873 246.258 59.9074 246.258 57.8236C246.258 56.6197 245.796 55.7398 239.768 55.1377C234.752 54.6282 231.622 53.5169 231.622 49.4881C231.622 45.7374 234.752 43.5145 239.998 43.5145C245.89 43.5145 248.789 45.5521 249.157 49.9976C249.157 50.1366 249.111 50.2754 249.02 50.4144C248.926 50.507 248.789 50.5997 248.649 50.5997H246.21C245.982 50.5997 245.751 50.4144 245.705 50.1828C245.152 47.6359 243.725 46.8025 239.952 46.8025C235.718 46.8025 235.212 48.2842 235.212 49.3955C235.212 50.7384 235.81 51.1553 241.517 51.8962C247.177 52.637 249.847 53.7021 249.847 57.6845C249.847 61.7595 246.487 64.075 240.69 64.075Z"
-        fill="#5FA04E"
-      />
-      <path
-        d="M267.2 41.6621C267.2 43.6071 265.588 45.2279 263.654 45.2279C261.722 45.2279 260.111 43.6533 260.111 41.6621C260.111 39.6247 261.768 38.0966 263.654 38.0966C265.542 38.0966 267.2 39.6709 267.2 41.6621ZM260.664 41.6621C260.664 43.3293 261.999 44.6722 263.608 44.6722C265.266 44.6722 266.601 43.2829 266.601 41.6621C266.601 39.9951 265.266 38.6986 263.608 38.6986C262.045 38.6986 260.664 39.9951 260.664 41.6621ZM262.321 39.6709H263.702C264.162 39.6709 265.083 39.6709 265.083 40.736C265.083 41.4769 264.621 41.6159 264.344 41.7085C264.898 41.7547 264.943 42.1254 264.989 42.6346C265.035 42.9588 265.083 43.5145 265.174 43.6997H264.344C264.344 43.5145 264.207 42.4958 264.207 42.4494C264.162 42.218 264.07 42.1254 263.794 42.1254H263.103V43.7459H262.321V39.6709ZM263.057 41.4307H263.654C264.162 41.4307 264.253 41.0603 264.253 40.875C264.253 40.3194 263.885 40.3194 263.654 40.3194H263.012V41.4307H263.057Z"
-        fill="#5FA04E"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M43.6737 41.9539C43.6737 41.1204 43.2136 40.3334 42.4773 39.9165L23.0104 28.5712C22.6883 28.386 22.3201 28.2934 21.9519 28.2472C21.9059 28.2472 21.7679 28.2472 21.7679 28.2472C21.3997 28.2472 21.0315 28.386 20.7094 28.5712L1.19654 39.8701C0.460209 40.287 0 41.0743 0 41.9539L0.0460209 72.3315C0.0460209 72.7484 0.276126 73.165 0.644293 73.3502C1.01246 73.5819 1.47267 73.5819 1.79482 73.3502L13.3921 66.682C14.1284 66.2653 14.5886 65.4781 14.5886 64.6446V50.4282C14.5886 49.5947 15.0488 48.8074 15.7852 48.3908L20.7094 45.5197C21.0776 45.288 21.4917 45.1954 21.9059 45.1954C22.3201 45.1954 22.7343 45.288 23.0565 45.5197L27.9806 48.3908C28.7169 48.8074 29.1773 49.5947 29.1773 50.4282V64.6446C29.1773 65.4781 29.6375 66.2653 30.3738 66.682L41.8791 73.3502C42.2471 73.5819 42.7073 73.5819 43.0755 73.3502C43.4438 73.165 43.6737 72.7484 43.6737 72.3315V41.9539Z"
-        fill="#333333"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M137.465 0.138922C137.096 -0.0463072 136.636 -0.0463072 136.314 0.138922C135.946 0.370456 135.716 0.740915 135.716 1.15768V31.2573C135.716 31.5351 135.578 31.8129 135.301 31.9984C135.025 32.1372 134.749 32.1372 134.473 31.9984L129.595 29.1735C128.859 28.7569 127.984 28.7569 127.248 29.1735L107.735 40.5188C106.999 40.9357 106.539 41.7227 106.539 42.5562V65.2004C106.539 66.0342 106.999 66.8212 107.735 67.2381L127.248 78.5834C127.984 79 128.859 79 129.595 78.5834L149.108 67.2381C149.844 66.8212 150.304 66.0342 150.304 65.2004V8.75207C150.304 7.87222 149.844 7.085 149.108 6.66824L137.465 0.138922ZM135.67 57.7451C135.67 57.9765 135.578 58.1617 135.394 58.2544L128.72 62.1444C128.536 62.237 128.306 62.237 128.122 62.1444L121.449 58.2544C121.265 58.1617 121.173 57.9303 121.173 57.7451V49.9656C121.173 49.7339 121.265 49.5487 121.449 49.4561L128.122 45.5663C128.306 45.4737 128.536 45.4737 128.72 45.5663L135.394 49.4561C135.578 49.5487 135.67 49.7803 135.67 49.9656V57.7451Z"
-        fill="#333333"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M202.398 49.7801C203.135 49.3632 203.549 48.5762 203.549 47.7425V42.2319C203.549 41.3985 203.089 40.6112 202.398 40.1946L183.023 28.8957C182.287 28.4788 181.413 28.4788 180.676 28.8957L161.164 40.2407C160.427 40.6576 159.967 41.4449 159.967 42.2784V64.9226C159.967 65.7561 160.427 66.5434 161.164 66.96L180.538 78.0737C181.275 78.4905 182.149 78.4905 182.839 78.0737L194.575 71.4983C194.943 71.3131 195.173 70.8962 195.173 70.4793C195.173 70.0627 194.943 69.6459 194.575 69.4606L174.97 58.1153C174.602 57.8839 174.372 57.5135 174.372 57.0966V50.0117C174.372 49.5949 174.602 49.178 174.97 48.9928L181.091 45.4735C181.459 45.2421 181.919 45.2421 182.287 45.4735L188.408 48.9928C188.776 49.2245 189.006 49.5949 189.006 50.0117V55.5685C189.006 55.9853 189.236 56.4019 189.605 56.5872C189.973 56.8188 190.433 56.8188 190.801 56.5872L202.398 49.7801Z"
-        fill="#333333"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M181.551 48.7155C181.689 48.6228 181.874 48.6228 182.012 48.7155L185.739 50.8919C185.877 50.9845 185.969 51.1235 185.969 51.3087V55.6615C185.969 55.8468 185.877 55.9858 185.739 56.0784L182.012 58.2548C181.874 58.3474 181.689 58.3474 181.551 58.2548L177.824 56.0784C177.686 55.9858 177.594 55.8468 177.594 55.6615V51.3087C177.594 51.1235 177.686 50.9845 177.824 50.8919L181.551 48.7155Z"
-        fill="#5FA04E"
-      />
-      <path
-        d="M76.3012 28.9882C75.5647 28.5716 74.6903 28.5716 73.954 28.9882L54.5792 40.241C53.8429 40.6578 53.4287 41.4449 53.4287 42.2786V64.83C53.4287 65.6637 53.8889 66.4507 54.5792 66.8676L73.954 78.1203C74.6903 78.5369 75.5647 78.5369 76.3012 78.1203L95.6758 66.8676C96.4123 66.4507 96.8263 65.6637 96.8263 64.83V42.2786C96.8263 41.4449 96.3662 40.6578 95.6758 40.241L76.3012 28.9882Z"
-        fill="url(#paint0_linear_1804_2337)"
-      />
-      <path
-        d="M95.7218 40.241L76.2551 28.9882C76.0709 28.8956 75.8409 28.803 75.6567 28.7568L53.843 66.3119C54.027 66.5433 54.257 66.7286 54.4872 66.8676L73.9541 78.1203C74.5062 78.4443 75.1506 78.5369 75.7488 78.3517L96.2282 40.6578C96.0901 40.4726 95.9059 40.3336 95.7218 40.241Z"
-        fill="url(#paint1_linear_1804_2337)"
-      />
-      <path
-        d="M95.7224 66.8669C96.2747 66.5427 96.6889 65.9871 96.8729 65.385L75.5651 28.7098C75.013 28.6172 74.4146 28.6633 73.9085 28.9876L54.5796 40.1939L75.427 78.4437C75.7031 78.3973 76.0255 78.3046 76.3016 78.1659L95.7224 66.8669Z"
-        fill="url(#paint2_linear_1804_2337)"
-      />
-    </g>
-    <defs>
-      <linearGradient
-        id="paint0_linear_1804_2337"
-        x1="83.0183"
-        y1="37.3689"
-        x2="65.3246"
-        y2="73.2407"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="#3F873F" />
-        <stop offset="0.3296" stopColor="#3F8B3D" />
-        <stop offset="0.6367" stopColor="#3E9638" />
-        <stop offset="0.9341" stopColor="#3DA92E" />
-        <stop offset="1" stopColor="#3DAE2B" />
-      </linearGradient>
-      <linearGradient
-        id="paint1_linear_1804_2337"
-        x1="72.183"
-        y1="56.1876"
-        x2="121.552"
-        y2="19.937"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop offset="0.1376" stopColor="#3F873F" />
-        <stop offset="0.4016" stopColor="#52A044" />
-        <stop offset="0.7129" stopColor="#64B749" />
-        <stop offset="0.9081" stopColor="#6ABF4B" />
-      </linearGradient>
-      <linearGradient
-        id="paint2_linear_1804_2337"
-        x1="52.7188"
-        y1="53.5463"
-        x2="97.551"
-        y2="53.5463"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop offset="0.0919165" stopColor="#6ABF4B" />
-        <stop offset="0.2871" stopColor="#64B749" />
-        <stop offset="0.5984" stopColor="#52A044" />
-        <stop offset="0.8624" stopColor="#3F873F" />
-      </linearGradient>
-    </defs>
-  </svg>
-);
-
-export default NodejsDark;
diff --git a/components/__design__/node-logos.stories.tsx b/components/__design__/node-logos.stories.tsx
index 11f1311b47dc3..a8e1783c13bc0 100644
--- a/components/__design__/node-logos.stories.tsx
+++ b/components/__design__/node-logos.stories.tsx
@@ -2,9 +2,8 @@ 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 NodejsLogo from '@/components/Icons/Logos/Nodejs';
 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';
@@ -12,12 +11,7 @@ import NodejsStackedLight from '@/components/Icons/Logos/NodejsStackedLight';
 import NodejsStackedWhite from '@/components/Icons/Logos/NodejsStackedWhite';
 
 export const HorizontalLogos: StoryObj = {
-  render: () => (
-    <div className="flex flex-row gap-4">
-      <NodejsLogoLight width={267} height={80} className="hidden dark:block" />
-      <NodejsLogoDark width={267} height={80} className="block dark:hidden" />
-    </div>
-  ),
+  render: () => <NodejsLogo width={267} height={80} />,
 };
 
 export const PrideLogos: StoryObj = {

From fd8dd85b8a60d879821b9ba9ec01d5bd1ab9ea9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= <arauujogui@gmail.com>
Date: Tue, 18 Jun 2024 19:27:34 -0300
Subject: [PATCH 2/3] refactor: merge pride logos

---
 components/Common/NodejsLogo/index.tsx        |  16 +--
 components/Icons/Logos/NodejsLightPride.tsx   | 111 ------------------
 .../{NodejsDarkPride.tsx => NodejsPride.tsx}  |   9 +-
 components/__design__/node-logos.stories.tsx  |  10 +-
 4 files changed, 9 insertions(+), 137 deletions(-)
 delete mode 100644 components/Icons/Logos/NodejsLightPride.tsx
 rename components/Icons/Logos/{NodejsDarkPride.tsx => NodejsPride.tsx} (97%)

diff --git a/components/Common/NodejsLogo/index.tsx b/components/Common/NodejsLogo/index.tsx
index a70734476d676..fffe240340263 100644
--- a/components/Common/NodejsLogo/index.tsx
+++ b/components/Common/NodejsLogo/index.tsx
@@ -1,8 +1,7 @@
 import type { FC } from 'react';
 
 import Nodejs from '@/components/Icons/Logos/Nodejs';
-import NodejsDarkPride from '@/components/Icons/Logos/NodejsDarkPride';
-import NodejsLightPride from '@/components/Icons/Logos/NodejsLightPride';
+import NodejsPride from '@/components/Icons/Logos/NodejsPride';
 import type { LogoVariant } from '@/types';
 
 import style from './index.module.css';
@@ -13,17 +12,8 @@ type NodejsLogoProps = {
 
 const NodejsLogo: FC<NodejsLogoProps> = ({ variant = 'default' }) => (
   <>
-    {variant === 'pride' && (
-      <>
-        <NodejsDarkPride className={style.nodejsLogoDark} />
-        <NodejsLightPride className={style.nodejsLogoLight} />
-      </>
-    )}
-    {variant === 'default' && (
-      <>
-        <Nodejs className={style.nodejsLogo} />
-      </>
-    )}
+    {variant === 'pride' && <NodejsPride className={style.nodejsLogo} />}
+    {variant === 'default' && <Nodejs className={style.nodejsLogo} />}
   </>
 );
 
diff --git a/components/Icons/Logos/NodejsLightPride.tsx b/components/Icons/Logos/NodejsLightPride.tsx
deleted file mode 100644
index f55f03d25287d..0000000000000
--- a/components/Icons/Logos/NodejsLightPride.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-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 clipPath="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
-          fillRule="evenodd"
-          clipRule="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
-          fillRule="evenodd"
-          clipRule="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
-          fillRule="evenodd"
-          clipRule="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
-          fillRule="evenodd"
-          clipRule="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/Icons/Logos/NodejsDarkPride.tsx b/components/Icons/Logos/NodejsPride.tsx
similarity index 97%
rename from components/Icons/Logos/NodejsDarkPride.tsx
rename to components/Icons/Logos/NodejsPride.tsx
index c7eb7845f86b2..4dc5d9d1b550c 100644
--- a/components/Icons/Logos/NodejsDarkPride.tsx
+++ b/components/Icons/Logos/NodejsPride.tsx
@@ -1,12 +1,14 @@
+import classNames from 'classnames';
 import type { FC, SVGProps } from 'react';
 
-const NodejsDarkPride: FC<SVGProps<SVGSVGElement>> = props => (
+const NodejsPride: FC<SVGProps<SVGSVGElement>> = ({ className, ...props }) => (
   <svg
     width="267"
     height="80"
     viewBox="0 0 267 80"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    className={classNames('fill-[#333333] dark:fill-white', className)}
     {...props}
   >
     <g clipPath="url(#clip0_12_17)">
@@ -38,19 +40,16 @@ const NodejsDarkPride: FC<SVGProps<SVGSVGElement>> = props => (
           fillRule="evenodd"
           clipRule="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
           fillRule="evenodd"
           clipRule="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
           fillRule="evenodd"
           clipRule="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
           fillRule="evenodd"
@@ -108,4 +107,4 @@ const NodejsDarkPride: FC<SVGProps<SVGSVGElement>> = props => (
   </svg>
 );
 
-export default NodejsDarkPride;
+export default NodejsPride;
diff --git a/components/__design__/node-logos.stories.tsx b/components/__design__/node-logos.stories.tsx
index a8e1783c13bc0..3f544da2cc619 100644
--- a/components/__design__/node-logos.stories.tsx
+++ b/components/__design__/node-logos.stories.tsx
@@ -3,8 +3,7 @@ import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 import JsIconGreen from '@/components/Icons/Logos/JsIconGreen';
 import JsIconWhite from '@/components/Icons/Logos/JsIconWhite';
 import NodejsLogo from '@/components/Icons/Logos/Nodejs';
-import NodejsDarkPride from '@/components/Icons/Logos/NodejsDarkPride';
-import NodejsLightPride from '@/components/Icons/Logos/NodejsLightPride';
+import NodejsPride from '@/components/Icons/Logos/NodejsPride';
 import NodejsStackedBlack from '@/components/Icons/Logos/NodejsStackedBlack';
 import NodejsStackedDark from '@/components/Icons/Logos/NodejsStackedDark';
 import NodejsStackedLight from '@/components/Icons/Logos/NodejsStackedLight';
@@ -15,12 +14,7 @@ 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>
-  ),
+  render: () => <NodejsPride width={267} height={80} />,
 };
 
 export const StackedLogos: StoryObj = {

From 7af05ad20d24466d930ae56011920ece1f6b9b87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= <arauujogui@gmail.com>
Date: Fri, 21 Jun 2024 17:19:18 -0300
Subject: [PATCH 3/3] refactor: merge default and pride logos

---
 components/Common/NodejsLogo/index.tsx       |   6 +-
 components/Icons/Logos/Nodejs.tsx            | 176 +++++++++++++------
 components/Icons/Logos/NodejsPride.tsx       | 110 ------------
 components/__design__/node-logos.stories.tsx |   7 +-
 4 files changed, 125 insertions(+), 174 deletions(-)
 delete mode 100644 components/Icons/Logos/NodejsPride.tsx

diff --git a/components/Common/NodejsLogo/index.tsx b/components/Common/NodejsLogo/index.tsx
index fffe240340263..7ca383e10c505 100644
--- a/components/Common/NodejsLogo/index.tsx
+++ b/components/Common/NodejsLogo/index.tsx
@@ -1,7 +1,6 @@
 import type { FC } from 'react';
 
 import Nodejs from '@/components/Icons/Logos/Nodejs';
-import NodejsPride from '@/components/Icons/Logos/NodejsPride';
 import type { LogoVariant } from '@/types';
 
 import style from './index.module.css';
@@ -11,10 +10,7 @@ type NodejsLogoProps = {
 };
 
 const NodejsLogo: FC<NodejsLogoProps> = ({ variant = 'default' }) => (
-  <>
-    {variant === 'pride' && <NodejsPride className={style.nodejsLogo} />}
-    {variant === 'default' && <Nodejs className={style.nodejsLogo} />}
-  </>
+  <Nodejs variant={variant} className={style.nodejsLogo} />
 );
 
 export default NodejsLogo;
diff --git a/components/Icons/Logos/Nodejs.tsx b/components/Icons/Logos/Nodejs.tsx
index d3ae93216cb9c..b2e23629c94fa 100644
--- a/components/Icons/Logos/Nodejs.tsx
+++ b/components/Icons/Logos/Nodejs.tsx
@@ -1,7 +1,17 @@
 import classNames from 'classnames';
 import type { FC, SVGProps } from 'react';
 
-const Nodejs: FC<SVGProps<SVGSVGElement>> = ({ className, ...props }) => (
+import type { LogoVariant } from '@/types';
+
+type HexagonGridProps = SVGProps<SVGSVGElement> & {
+  variant?: LogoVariant;
+};
+
+const Nodejs: FC<HexagonGridProps> = ({
+  className,
+  variant = 'default',
+  ...props
+}) => (
   <svg
     width="267"
     height="80"
@@ -56,61 +66,117 @@ const Nodejs: FC<SVGProps<SVGSVGElement>> = ({ className, ...props }) => (
         d="M181.551 48.7155C181.689 48.6228 181.874 48.6228 182.012 48.7155L185.739 50.8919C185.877 50.9845 185.969 51.1235 185.969 51.3087V55.6615C185.969 55.8468 185.877 55.9858 185.739 56.0784L182.012 58.2548C181.874 58.3474 181.689 58.3474 181.551 58.2548L177.824 56.0784C177.686 55.9858 177.594 55.8468 177.594 55.6615V51.3087C177.594 51.1235 177.686 50.9845 177.824 50.8919L181.551 48.7155Z"
         fill="#5FA04E"
       />
-      <path
-        d="M76.3012 28.9882C75.5647 28.5716 74.6903 28.5716 73.954 28.9882L54.5792 40.241C53.8429 40.6578 53.4287 41.4449 53.4287 42.2786V64.83C53.4287 65.6637 53.8889 66.4507 54.5792 66.8676L73.954 78.1203C74.6903 78.5369 75.5647 78.5369 76.3012 78.1203L95.6758 66.8676C96.4123 66.4507 96.8263 65.6637 96.8263 64.83V42.2786C96.8263 41.4449 96.3662 40.6578 95.6758 40.241L76.3012 28.9882Z"
-        fill="url(#paint0_linear_1803_3458)"
-      />
-      <path
-        d="M95.7221 40.241L76.2554 28.9882C76.0714 28.8956 75.8412 28.803 75.6572 28.7568L53.8433 66.3119C54.0273 66.5433 54.2575 66.7286 54.4874 66.8676L73.9544 78.1203C74.5067 78.4443 75.1508 78.5369 75.749 78.3517L96.2284 40.6578C96.0904 40.4726 95.9063 40.3336 95.7221 40.241Z"
-        fill="url(#paint1_linear_1803_3458)"
-      />
-      <path
-        d="M95.7224 66.8669C96.2747 66.5427 96.6889 65.9871 96.8729 65.385L75.5651 28.7098C75.013 28.6172 74.4146 28.6633 73.9085 28.9876L54.5796 40.1939L75.427 78.4437C75.7031 78.3973 76.0255 78.3046 76.3016 78.1659L95.7224 66.8669Z"
-        fill="url(#paint2_linear_1803_3458)"
-      />
+
+      {variant === 'pride' ? (
+        <>
+          <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>
+        </>
+      ) : (
+        <>
+          <path
+            d="M76.3012 28.9882C75.5647 28.5716 74.6903 28.5716 73.954 28.9882L54.5792 40.241C53.8429 40.6578 53.4287 41.4449 53.4287 42.2786V64.83C53.4287 65.6637 53.8889 66.4507 54.5792 66.8676L73.954 78.1203C74.6903 78.5369 75.5647 78.5369 76.3012 78.1203L95.6758 66.8676C96.4123 66.4507 96.8263 65.6637 96.8263 64.83V42.2786C96.8263 41.4449 96.3662 40.6578 95.6758 40.241L76.3012 28.9882Z"
+            fill="url(#paint0_linear_1803_3458)"
+          />
+          <path
+            d="M95.7221 40.241L76.2554 28.9882C76.0714 28.8956 75.8412 28.803 75.6572 28.7568L53.8433 66.3119C54.0273 66.5433 54.2575 66.7286 54.4874 66.8676L73.9544 78.1203C74.5067 78.4443 75.1508 78.5369 75.749 78.3517L96.2284 40.6578C96.0904 40.4726 95.9063 40.3336 95.7221 40.241Z"
+            fill="url(#paint1_linear_1803_3458)"
+          />
+          <path
+            d="M95.7224 66.8669C96.2747 66.5427 96.6889 65.9871 96.8729 65.385L75.5651 28.7098C75.013 28.6172 74.4146 28.6633 73.9085 28.9876L54.5796 40.1939L75.427 78.4437C75.7031 78.3973 76.0255 78.3046 76.3016 78.1659L95.7224 66.8669Z"
+            fill="url(#paint2_linear_1803_3458)"
+          />
+        </>
+      )}
     </g>
-    <defs>
-      <linearGradient
-        id="paint0_linear_1803_3458"
-        x1="83.0183"
-        y1="37.3689"
-        x2="65.3246"
-        y2="73.2407"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="#3F873F" />
-        <stop offset="0.3296" stopColor="#3F8B3D" />
-        <stop offset="0.6367" stopColor="#3E9638" />
-        <stop offset="0.9341" stopColor="#3DA92E" />
-        <stop offset="1" stopColor="#3DAE2B" />
-      </linearGradient>
-      <linearGradient
-        id="paint1_linear_1803_3458"
-        x1="72.1833"
-        y1="56.1876"
-        x2="121.552"
-        y2="19.937"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop offset="0.1376" stopColor="#3F873F" />
-        <stop offset="0.4016" stopColor="#52A044" />
-        <stop offset="0.7129" stopColor="#64B749" />
-        <stop offset="0.9081" stopColor="#6ABF4B" />
-      </linearGradient>
-      <linearGradient
-        id="paint2_linear_1803_3458"
-        x1="52.7188"
-        y1="53.5463"
-        x2="97.551"
-        y2="53.5463"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop offset="0.0919165" stopColor="#6ABF4B" />
-        <stop offset="0.2871" stopColor="#64B749" />
-        <stop offset="0.5984" stopColor="#52A044" />
-        <stop offset="0.8624" stopColor="#3F873F" />
-      </linearGradient>
-    </defs>
+    {variant === 'pride' ? (
+      <defs>
+        <clipPath id="clip0_12_17">
+          <rect width="267" height="79.988" fill="white" />
+        </clipPath>
+      </defs>
+    ) : (
+      <defs>
+        <linearGradient
+          id="paint0_linear_1803_3458"
+          x1="83.0183"
+          y1="37.3689"
+          x2="65.3246"
+          y2="73.2407"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#3F873F" />
+          <stop offset="0.3296" stopColor="#3F8B3D" />
+          <stop offset="0.6367" stopColor="#3E9638" />
+          <stop offset="0.9341" stopColor="#3DA92E" />
+          <stop offset="1" stopColor="#3DAE2B" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_1803_3458"
+          x1="72.1833"
+          y1="56.1876"
+          x2="121.552"
+          y2="19.937"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.1376" stopColor="#3F873F" />
+          <stop offset="0.4016" stopColor="#52A044" />
+          <stop offset="0.7129" stopColor="#64B749" />
+          <stop offset="0.9081" stopColor="#6ABF4B" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_1803_3458"
+          x1="52.7188"
+          y1="53.5463"
+          x2="97.551"
+          y2="53.5463"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.0919165" stopColor="#6ABF4B" />
+          <stop offset="0.2871" stopColor="#64B749" />
+          <stop offset="0.5984" stopColor="#52A044" />
+          <stop offset="0.8624" stopColor="#3F873F" />
+        </linearGradient>
+      </defs>
+    )}
   </svg>
 );
 
diff --git a/components/Icons/Logos/NodejsPride.tsx b/components/Icons/Logos/NodejsPride.tsx
deleted file mode 100644
index 4dc5d9d1b550c..0000000000000
--- a/components/Icons/Logos/NodejsPride.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import classNames from 'classnames';
-import type { FC, SVGProps } from 'react';
-
-const NodejsPride: FC<SVGProps<SVGSVGElement>> = ({ className, ...props }) => (
-  <svg
-    width="267"
-    height="80"
-    viewBox="0 0 267 80"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={classNames('fill-[#333333] dark:fill-white', className)}
-    {...props}
-  >
-    <g clipPath="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
-          fillRule="evenodd"
-          clipRule="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"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="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"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="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"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="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 NodejsPride;
diff --git a/components/__design__/node-logos.stories.tsx b/components/__design__/node-logos.stories.tsx
index 3f544da2cc619..157a5cd3df709 100644
--- a/components/__design__/node-logos.stories.tsx
+++ b/components/__design__/node-logos.stories.tsx
@@ -3,18 +3,17 @@ import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 import JsIconGreen from '@/components/Icons/Logos/JsIconGreen';
 import JsIconWhite from '@/components/Icons/Logos/JsIconWhite';
 import NodejsLogo from '@/components/Icons/Logos/Nodejs';
-import NodejsPride from '@/components/Icons/Logos/NodejsPride';
 import NodejsStackedBlack from '@/components/Icons/Logos/NodejsStackedBlack';
 import NodejsStackedDark from '@/components/Icons/Logos/NodejsStackedDark';
 import NodejsStackedLight from '@/components/Icons/Logos/NodejsStackedLight';
 import NodejsStackedWhite from '@/components/Icons/Logos/NodejsStackedWhite';
 
-export const HorizontalLogos: StoryObj = {
+export const HorizontalLogo: StoryObj = {
   render: () => <NodejsLogo width={267} height={80} />,
 };
 
-export const PrideLogos: StoryObj = {
-  render: () => <NodejsPride width={267} height={80} />,
+export const PrideLogo: StoryObj = {
+  render: () => <NodejsLogo variant="pride" width={267} height={80} />,
 };
 
 export const StackedLogos: StoryObj = {