From c31f4eb2f55521bc76d60e33dd35e499899c2007 Mon Sep 17 00:00:00 2001
From: Ansh Goyal <anshgoyal1704@gmail.com>
Date: Tue, 12 Mar 2024 12:47:31 +0000
Subject: [PATCH 1/9] add logos

---
 components/logos/Adidas.tsx     | 61 +++++++++++++++++++++++++++++++++
 components/logos/Axway.tsx      | 44 ++++++++++++++++++++++++
 components/logos/SAP.tsx        | 45 ++++++++++++++++++++++++
 components/logos/Salesforce.tsx | 22 ++++++++++++
 components/logos/Slack.tsx      | 54 +++++++++++++++++++++++++++++
 5 files changed, 226 insertions(+)
 create mode 100644 components/logos/Adidas.tsx
 create mode 100644 components/logos/Axway.tsx
 create mode 100644 components/logos/SAP.tsx
 create mode 100644 components/logos/Salesforce.tsx
 create mode 100644 components/logos/Slack.tsx

diff --git a/components/logos/Adidas.tsx b/components/logos/Adidas.tsx
new file mode 100644
index 000000000000..caf6155b3531
--- /dev/null
+++ b/components/logos/Adidas.tsx
@@ -0,0 +1,61 @@
+/**
+ * @description Logo for Adidas
+ */
+export default function AdidasLogo({ className }: { className?: string }) {
+  return (
+    <svg className={className || 'inline-block'} fill='currentColor' viewBox='0 0 1065.5 254.5'>
+      <g id='XMLID_1_'>
+        <path
+          id='XMLID_16_'
+          d='M1030.713,10.174c12.585,0,22.597,10.299,22.597,23.741c0,12.299-10.012,22.596-22.597,22.596
+		c-12.586,0-22.596-10.297-22.596-22.596C1008.117,20.473,1018.413,10.174,1030.713,10.174z M1030.713,13.322
+		c-11.44,0-19.45,9.15-19.45,20.593c0,10.297,8.296,19.449,19.45,19.449c10.298,0,19.449-9.152,19.449-19.449
+		C1050.448,22.76,1041.011,13.322,1030.713,13.322z M1035.86,34.201c1.146,0,4.005,0.857,4.005,5.148v7.15h-4.005v-3.146
+		c0-5.148-1.144-7.438-4.003-7.438h-5.148v10.297h-4.004V20.473h8.294c5.147,0,9.152,3.146,9.152,7.436
+		C1040.151,30.77,1037.863,34.201,1035.86,34.201z M1026.709,24.762v7.15h4.004c2.002,0,5.147-1.143,5.147-3.146
+		c0-2.289-2.286-4.005-4.003-4.005H1026.709'
+        />
+        <path
+          id='XMLID_17_'
+          d='M974.937,248.436c43.19,0,79.517-17.447,79.517-60.638c0-24.598-17.447-41.188-45.478-48.625
+		c-28.889-7.15-65.787-6.007-65.787-24.598c2.002-12.299,13.444-15.445,30.892-15.445c26.886,0,28.029,14.302,29.175,23.739h44.048
+		c-3.146-34.037-30.892-57.778-75.226-57.778c-46.336,0-73.223,24.6-73.223,56.921c0,18.591,9.153,35.181,24.598,43.188
+		c11.155,5.15,26.601,9.153,45.479,12.586c19.449,2.002,36.896,4.005,38.04,17.448c0,9.153-9.151,20.594-30.032,20.594
+		c-30.033,0-36.038-16.589-36.038-27.744h-46.337C895.708,223.551,925.454,248.436,974.937,248.436'
+        />
+        <path
+          id='XMLID_20_'
+          d='M781.297,248.436c19.736,0,37.184-6.292,51.771-15.445v11.44h44.334V67.094h-44.62v13.443
+		c-14.302-10.296-31.749-15.444-51.771-15.444c-50.341,0-92.672,40.329-92.672,91.813
+		C688.625,207.247,730.956,248.436,781.297,248.436z M732.1,156.62c0-28.03,23.741-51.771,51.486-51.771
+		c26.885,0,49.482,23.74,49.482,51.771c0,26.601-22.598,50.627-49.482,50.627C755.555,207.247,732.1,183.221,732.1,156.62'
+        />
+        <path
+          id='XMLID_23_'
+          d='M630.847,6.171v74.08c-15.444-10.296-32.894-15.444-52.63-15.444c-50.625,0-91.813,40.329-91.813,91.813
+		c0,50.627,41.188,91.529,91.813,91.529c19.451,0,38.042-6.292,52.63-15.445v11.44h43.19V5.885h-43.19V6.171z M529.021,156.62
+		c0-28.03,23.741-51.771,50.341-51.771c28.03,0,51.771,23.74,51.771,51.771c0,26.601-23.74,50.627-51.771,50.627
+		C552.476,207.247,529.021,183.221,529.021,156.62'
+        />
+        <path
+          id='XMLID_26_'
+          d='M424.907,244.145h43.19V66.809h-43.19V244.145z M424.907,50.505h43.19V6.171h-43.19V50.505'
+        />
+        <path
+          id='XMLID_29_'
+          d='M306.206,248.436c19.45,0,36.897-6.292,52.628-15.445v11.44h44.333V6.171h-44.333v74.08
+		c-15.445-10.296-32.892-15.444-52.628-15.444c-50.627,0-92.674,40.329-92.674,91.813
+		C213.532,207.247,255.579,248.436,306.206,248.436z M255.579,156.62c0-28.03,23.741-51.771,52.628-51.771
+		c26.887,0,50.627,23.74,50.627,51.771c0,26.601-23.741,50.627-50.627,50.627C279.32,207.247,255.579,183.221,255.579,156.62'
+        />
+        <path
+          id='XMLID_32_'
+          d='M101.982,248.436c20.593,0,38.041-6.292,53.487-15.445v11.44h43.19V67.094h-43.19v13.443
+		c-15.446-10.296-34.037-15.444-53.487-15.444c-50.627,0-91.529,40.329-91.529,91.813
+		C10.453,207.247,51.641,248.436,101.982,248.436z M52.499,156.62c0-28.03,23.74-51.771,50.627-51.771
+		c28.889,0,52.629,23.74,52.629,51.771c0,26.601-23.741,50.627-52.629,50.627C76.239,207.247,52.499,183.221,52.499,156.62'
+        />
+      </g>
+    </svg>
+  );
+}
diff --git a/components/logos/Axway.tsx b/components/logos/Axway.tsx
new file mode 100644
index 000000000000..fbae4152f038
--- /dev/null
+++ b/components/logos/Axway.tsx
@@ -0,0 +1,44 @@
+/**
+ * @description Logo for Axway
+ */
+export default function AxwayLogo({ className }: { className?: string }) {
+  return (
+    <svg className={className || 'inline-block'} fill='currentColor' viewBox='0 0 749.5 261.5'>
+      <g id='Page-1'>
+        <g id='Home' transform='translate(-380 -13)'>
+          <g id='Nav'>
+            <g id='Axway-Logo' transform='translate(380 13)'>
+              <path id='Fill-1' d='M33.393,169.374l21.84-3.681c5.399-0.859,6.38-3.681,6.38-6.381c0-6.38-4.54-11.778-15.46-11.778
+					s-16.319,6.38-17.301,14.601l-21.84-4.54c1.84-14.601,14.601-29.938,39.019-29.938c28.221,0,39.018,16.319,39.018,34.479v44.54
+					c0,4.54,0.859,10.92,0.859,14.602H64.313c-0.859-2.7-0.859-7.239-0.859-10.921c-4.54,7.239-13.62,13.62-26.38,13.62
+					c-19.141,0-30.92-12.761-30.92-27.239C6.153,180.295,17.933,171.215,33.393,169.374 M62.472,184.834v-3.681l-20,2.699
+					c-6.38,0.859-10.92,4.54-10.92,11.779c0,5.398,3.681,10.92,11.779,10.92C52.534,205.816,62.472,200.295,62.472,184.834'/>
+              <path id='Fill-3' d='M121.613,175.755l-31.779-45.399h29.08c2.699,4.54,14.601,21.841,18.16,27.239l18.159-27.239h27.24
+					l-31.779,44.54l32.761,46.381h-28.221l-19.141-28.221c-3.681,4.539-15.46,22.699-18.159,28.221H90.693
+					C90.693,221.153,121.613,175.755,121.613,175.755z'/>
+              <path id='Fill-5' d='M266.03,130.355l20,58.16l16.319-58.16h24.54l-28.221,90.921h-24.54l-20.859-61.841l-20.858,61.841h-24.54
+					l-29.08-90.921h25.521l17.301,58.16l19.142-58.16H266.03z'/>
+              <path id='Fill-7' d='M351.552,169.374l21.841-3.681c5.398-0.859,6.381-3.681,6.381-6.381c0-6.38-4.54-11.778-15.461-11.778
+					c-10.92,0-16.318,6.38-17.301,14.601l-21.84-4.54c1.841-14.601,14.602-29.938,39.019-29.938
+					c28.221,0,39.019,16.319,39.019,34.479v44.54c0,4.54,0.858,10.92,0.858,14.602h-22.699c-0.859-2.7-0.859-7.239-0.859-10.921
+					c-4.54,7.239-13.619,13.62-26.38,13.62c-19.142,0-30.92-12.761-30.92-27.239C324.19,180.295,336.092,171.215,351.552,169.374
+					 M380.632,184.834v-3.681l-20,2.699c-6.38,0.859-10.92,4.54-10.92,11.779c0,5.398,3.681,10.92,11.779,10.92
+					C370.57,205.816,380.632,200.295,380.632,184.834'/>
+              <path id='Fill-9' d='M419.65,256.613l20.858-47.239l-38.159-79.019h27.239l24.54,53.62l21.841-53.62h26.38l-57.301,126.381
+					H419.65V256.613z'/>
+              <g className='group-hover:text-[#de262c]'>
+                <g id='Group-13' transform='translate(56.41 .062)'>
+                  <path id='Fill-11' fill='currentColor' d='M685.952,97.241v-30.92l-46.381-22.699v46.38L462.394,5.462v30.92l202.699,96.319V87.302
+						L685.952,97.241z'/>
+                </g>
+                <path id='Fill-14' fill='currentColor' d='M564.19,119.436v30.92l32.761,15.461l-52.761,55.46h34.479l61.84-65.399L564.19,119.436z'
+                />
+                <path id='Fill-16' fill='currentColor' d='M721.368,148.516L543.209,63.116v30.921l141.718,68.098L721.368,148.516z' />
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
diff --git a/components/logos/SAP.tsx b/components/logos/SAP.tsx
new file mode 100644
index 000000000000..1c599aa8ab24
--- /dev/null
+++ b/components/logos/SAP.tsx
@@ -0,0 +1,45 @@
+import { useState } from 'react';
+
+/**
+ * @description Logo for SAP
+ */
+export default function SapLogo({ className }: { className?: string }) {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  return (
+    <svg className={className || 'inline-block'} fill='currentColor' viewBox='0 0 1024 522'
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <linearGradient id='path3060_1_' gradientUnits='userSpaceOnUse' x1='-127.4302' y1='661.6777' x2='-126.4722' y2='661.6777' gradientTransform='matrix(0 513.7015 -513.7015 0 340415.5625 65474.9453)'>
+        <stop offset='0' style={{ stopColor: !isHovered ? 'currentColor' : '#1661BE' }} />
+        <stop offset='1' style={{ stopColor: !isHovered ? 'currentColor' : '#019CE0' }} />
+      </linearGradient>
+      <path id='path3060' fill='url(#path3060_1_)' d='M13.43,13.621v491.971h502.559l491.915-491.915l0,0H13.43V13.621z' />
+      <path id='path5384' fill='url(#path3060_1_)' d='M649.993,455.304v36.691h5.538v-15.923h6.229l10.039,15.923h6.23l-10.731-15.923
+	c5.362-0.665,9.692-3.783,9.692-10.385c0-7.232-4.427-10.384-13.152-10.384H649.993z M655.531,460.149h7.614
+	c3.745,0,7.962,0.609,7.962,5.191c0,5.728-4.271,6.232-9,6.232h-6.576V460.149z M662.454,441.803
+	c-17.567,0-32.539,13.537-32.539,31.846c0,18.442,14.971,32.192,32.539,32.192c17.324,0,31.846-13.747,31.846-32.192
+	C694.3,455.34,679.778,441.803,662.454,441.803z M662.454,446.996c14.332,0,25.613,11.578,25.613,26.652
+	c0,15.332-11.281,26.654-25.613,26.654c-14.578,0-26.307-11.322-26.307-26.654C636.147,458.574,647.876,446.996,662.454,446.996z'/>
+      <path id='path3100' fill='#FFFFFF' d='M609.321,249.022h-21.555V170.19h21.555c28.777,0,51.684,9.481,51.684,38.913
+	C661.005,239.497,638.099,249.022,609.321,249.022 M377.321,305.381c-11.409,0-22.109-2.083-31.358-5.561l31.048-97.918h0.665
+	l30.405,98.184c-9.16,3.278-19.583,5.295-30.727,5.295 M603.606,106.145h-97.885v232.754l-85.512-232.754h-84.758l-73.062,194.595
+	c-7.72-49.047-58.529-66.028-98.472-78.688c-26.329-8.474-54.353-20.924-54.098-34.714c0.222-11.276,15.053-21.732,44.307-20.17
+	c19.716,0.997,37.107,2.592,71.633,19.285l34.005-59.238c-31.502-16.094-75.155-26.196-110.867-26.274h-0.221
+	c-41.66,0-76.374,13.58-97.907,35.811c-14.965,15.552-23.062,35.224-23.427,57.123c-0.554,29.996,10.49,51.285,33.606,68.31
+	c19.562,14.333,44.517,23.561,66.56,30.472c27.193,8.386,49.391,15.707,49.136,31.314c-0.221,5.682-2.337,11.01-6.446,15.219
+	c-6.768,7.034-17.169,9.637-31.558,9.958c-27.736,0.554-48.305-3.766-81.07-23.128l-30.228,60.068
+	c32.665,18.598,71.333,29.476,110.8,29.476h5.106c34.338-0.665,62.074-10.468,84.238-28.279l3.588-3.135l-9.792,26.318h88.89
+	l14.932-45.403c15.618,5.284,33.407,8.252,52.237,8.252c18.376,0,35.711-2.769,51.053-7.819l14.355,44.971h145.037v-94.041h31.646
+	c76.429,0,121.688-38.9,121.688-104.187c0-72.663-43.952-105.993-137.528-105.993'/>
+    </svg>
+  );
+}
diff --git a/components/logos/Salesforce.tsx b/components/logos/Salesforce.tsx
new file mode 100644
index 000000000000..b98d469ddf28
--- /dev/null
+++ b/components/logos/Salesforce.tsx
@@ -0,0 +1,22 @@
+/**
+ * @description Logo for Salesforce
+ */
+export default function SalesforceLogo({ className }: { className?: string }) {
+  return (
+    <svg className={className || 'inline-block'} fill='currentColor' viewBox='0 0 256 180'>
+      <g className='group'>
+        <path d='M106.553203,159.610976 C114.801129,168.204994 126.284107,173.534815 138.983873,173.534815 C155.865892,173.534815 170.594851,164.121105 178.438396,150.146262 C185.254593,153.191874 192.799405,154.885905 200.737669,154.885905 C231.186506,154.885905 255.871995,129.985475 255.871995,99.2706935 C255.871995,68.5522694 231.186506,43.651839 200.737669,43.651839 C197.021731,43.651839 193.389583,44.0234329 189.877657,44.7338328 C182.970383,32.4129469 169.807947,24.0885163 154.700107,24.0885163 C148.375726,24.0885163 142.393793,25.5493901 137.067615,28.1469039 C130.065621,11.6765534 113.751923,0.127999726 94.7387049,0.127999726 C74.9385822,0.127999726 58.0638501,12.6565411 51.5864595,30.2271008 C48.7557888,29.6259931 45.8231119,29.3126885 42.8139304,29.3126885 C19.23958,29.3126885 0.127998772,48.6209959 0.127998772,72.4430755 C0.127998772,88.4070383 8.71473094,102.34545 21.4727861,109.802829 C18.8461277,115.846693 17.3852539,122.517167 17.3852539,129.53009 C17.3852539,156.926028 39.6262381,179.134225 67.0586069,179.134225 C83.1646497,179.134225 97.4782987,171.476477 106.553203,159.610976' fill='currentColor' transform='translate(127.999997, 89.631112) scale(1, -1) translate(-127.999997, -89.631112)' className='group-hover:text-[#009EDB]'></path>
+        <path d='M37.1700744,75.3309413 C37.009779,74.9119875 37.2283636,74.8245536 37.2793667,74.7516921 C37.7602528,74.4019567 38.2484251,74.1505844 38.7402405,73.8700675 C41.3486835,72.4856983 43.8114035,72.0813168 46.3870588,72.0813168 C51.6330895,72.0813168 54.8900002,74.8719136 54.8900002,79.3638274 L54.8900002,79.4512613 C54.8900002,83.6043689 51.2141357,85.1126027 47.7641419,86.2018827 L47.3160434,86.3476058 C44.7148866,87.1927996 42.4707512,87.921415 42.4707512,89.6336611 L42.4707512,89.724738 C42.4707512,91.1892549 43.7822589,92.2676057 45.8150958,92.2676057 C48.0738034,92.2676057 50.755108,91.5171318 52.4819264,90.5626457 C52.4819264,90.5626457 52.9883141,90.2347688 53.174111,90.7265842 C53.2761172,90.9888857 54.1504556,93.3423133 54.2415326,93.5973287 C54.3398956,93.8742026 54.1650279,94.0782149 53.9865172,94.1875072 C52.0156126,95.3860795 49.2905911,96.2057718 46.4708496,96.2057718 L45.9462465,96.2021287 C41.1446712,96.2021287 37.7930405,93.3022395 37.7930405,89.1454888 L37.7930405,89.058055 C37.7930405,84.6754335 41.4907635,83.2546335 44.9553296,82.2637166 L45.5127204,82.092492 C48.0373727,81.3165166 50.2122895,80.6498336 50.2122895,78.872012 L50.2122895,78.7845782 C50.2122895,77.1597659 48.7987757,75.9502644 46.5182096,75.9502644 C45.6329419,75.9502644 42.8095574,75.9684798 39.760302,77.8956674 C39.3923513,78.110609 39.1774097,78.2672613 38.8932497,78.4384859 C38.7438836,78.5332059 38.3686467,78.6971444 38.2047082,78.2016859 L37.1700744,75.3309413 L37.1700744,75.3309413 Z' fill='#FFFFFF' transform='translate(46.001138, 84.143544) scale(1, -1) translate(-46.001138, -84.143544) '></path>
+        <path d='M113.969779,75.3309413 C113.809484,74.9119875 114.028068,74.8245536 114.079072,74.7516921 C114.559958,74.4019567 115.04813,74.1505844 115.539945,73.8700675 C118.148388,72.4856983 120.611108,72.0813168 123.186764,72.0813168 C128.432794,72.0813168 131.689705,74.8719136 131.689705,79.3638274 L131.689705,79.4512613 C131.689705,83.6043689 128.013841,85.1126027 124.563847,86.2018827 L124.115748,86.3476058 C121.514591,87.1927996 119.270456,87.921415 119.270456,89.6336611 L119.270456,89.724738 C119.270456,91.1892549 120.581964,92.2676057 122.614801,92.2676057 C124.873508,92.2676057 127.554813,91.5171318 129.281631,90.5626457 C129.281631,90.5626457 129.788019,90.2347688 129.973816,90.7265842 C130.075822,90.9888857 130.95016,93.3423133 131.041237,93.5973287 C131.1396,93.8742026 130.964733,94.0782149 130.786222,94.1875072 C128.815317,95.3860795 126.090296,96.2057718 123.270554,96.2057718 L122.745951,96.2021287 C117.944376,96.2021287 114.592745,93.3022395 114.592745,89.1454888 L114.592745,89.058055 C114.592745,84.6754335 118.290468,83.2546335 121.755034,82.2637166 L122.312425,82.092492 C124.837077,81.3165166 127.015637,80.6498336 127.015637,78.872012 L127.015637,78.7845782 C127.015637,77.1597659 125.598481,75.9502644 123.317914,75.9502644 C122.432647,75.9502644 119.609262,75.9684798 116.560007,77.8956674 C116.192056,78.110609 115.973471,78.2599751 115.696598,78.4384859 C115.601878,78.5004182 115.157422,78.6716428 115.004413,78.2016859 L113.969779,75.3309413 L113.969779,75.3309413 Z' fill='#FFFFFF' transform='translate(122.800843, 84.143544) scale(1, -1) translate(-122.800843, -84.143544) '></path>
+        <path d='M166.398769,84.1136744 C166.398769,81.5744499 165.925169,79.5744007 164.992541,78.1608868 C164.070843,76.7619453 162.675544,76.08069 160.730141,76.08069 C158.781095,76.08069 157.393083,76.7583022 156.485956,78.1608868 C155.567901,79.5707576 155.101587,81.5744499 155.101587,84.1136744 C155.101587,86.6492559 155.567901,88.6456621 156.485956,90.0446036 C157.393083,91.4289728 158.781095,92.102942 160.730141,92.102942 C162.675544,92.102942 164.070843,91.4289728 164.996184,90.0446036 C165.925169,88.6456621 166.398769,86.6492559 166.398769,84.1136744 M170.777747,88.8205297 C170.347864,90.2741174 169.677538,91.5564805 168.784984,92.623902 C167.89243,93.6949666 166.763076,94.5547327 165.422424,95.181342 C164.085415,95.8043081 162.504319,96.1212558 160.730141,96.1212558 C158.95232,96.1212558 157.371224,95.8043081 156.034215,95.181342 C154.693563,94.5547327 153.564209,93.6949666 152.668012,92.623902 C151.779101,91.5528374 151.108775,90.2704743 150.675249,88.8205297 C150.249009,87.3742282 150.034067,85.7931329 150.034067,84.1136744 C150.034067,82.434216 150.249009,80.8494776 150.675249,79.4068191 C151.108775,77.9568745 151.775458,76.6745115 152.671655,75.6034469 C153.564209,74.5323823 154.697206,73.6762592 156.034215,73.0678654 C157.374867,72.4594715 158.95232,72.14981 160.730141,72.14981 C162.504319,72.14981 164.081772,72.4594715 165.422424,73.0678654 C166.759433,73.6762592 167.89243,74.5323823 168.784984,75.6034469 C169.677538,76.6708684 170.347864,77.9532315 170.777747,79.4068191 C171.20763,80.8531206 171.422572,82.4378591 171.422572,84.1136744 C171.422572,85.7894898 171.20763,87.3742282 170.777747,88.8205297' fill='#FFFFFF' transform='translate(160.728320, 84.135533) scale(1, -1) translate(-160.728320, -84.135533) '></path>
+        <path d='M206.737482,76.7251427 C206.591759,77.1513827 206.180091,76.9910873 206.180091,76.9910873 C205.542553,76.7470012 204.864941,76.5211304 204.143612,76.408195 C203.411353,76.2952596 202.606233,76.2369704 201.742824,76.2369704 C199.622553,76.2369704 197.939452,76.8672227 196.733593,78.113155 C195.524092,79.3590873 194.846479,81.3737088 194.853766,84.0987303 C194.861052,86.5796656 195.458516,88.444921 196.533224,89.8657209 C197.600645,91.2792348 199.225458,92.0042071 201.393088,92.0042071 C203.200055,92.0042071 204.577138,91.7965517 206.019796,91.3411671 C206.019796,91.3411671 206.365888,91.1918009 206.529827,91.6435424 C206.91235,92.7073209 207.19651,93.468724 207.604535,94.6381516 C207.721113,94.9696716 207.436953,95.1117516 207.334947,95.1518255 C206.766627,95.3740532 205.425975,95.7347178 204.413199,95.887727 C203.465999,96.0334501 202.358504,96.1099547 201.127144,96.1099547 C199.28739,96.1099547 197.648005,95.7966501 196.245421,95.1700409 C194.846479,94.5470747 193.658836,93.6873086 192.718922,92.616244 C191.779009,91.5451794 191.064966,90.2628163 190.587723,88.8128717 C190.114123,87.3665702 189.873679,85.7781887 189.873679,84.0987303 C189.873679,80.4665826 190.853667,77.5302627 192.788141,75.3808473 C194.726258,73.2241458 197.637076,72.1275797 201.433162,72.1275797 C203.677298,72.1275797 205.979722,72.5829643 207.633679,73.2350751 C207.633679,73.2350751 207.950627,73.3880843 207.81219,73.756035 L206.737482,76.7251427 L206.737482,76.7251427 Z' fill='#FFFFFF' transform='translate(198.860433, 84.118767) scale(1, -1) translate(-198.860433, -84.118767) '></path>
+        <path d='M214.399204,86.5520198 C214.606859,87.9618906 214.996668,89.1349613 215.597776,90.0493736 C216.504902,91.4373859 217.889271,92.198789 219.834675,92.198789 C221.780078,92.198789 223.066084,91.4337428 223.987782,90.0493736 C224.599819,89.1349613 224.865764,87.9108875 224.971413,86.5520198 L214.399204,86.5520198 L214.399204,86.5520198 Z M229.142736,89.6522783 C228.771142,91.0548629 227.849444,92.4720198 227.244693,93.1204874 C226.290207,94.1478351 225.357579,94.8655213 224.432238,95.2662597 C223.222736,95.7835766 221.772791,96.1260258 220.18441,96.1260258 C218.333727,96.1260258 216.654268,95.8163643 215.291758,95.1751828 C213.925604,94.5340013 212.778035,93.6596628 211.878195,92.5703828 C210.978355,91.4847459 210.300742,90.1914536 209.870859,88.7232937 C209.437333,87.2624198 209.218749,85.6703952 209.218749,83.9909368 C209.218749,82.2823338 209.444619,80.6903092 209.892718,79.25858 C210.344459,77.8159215 211.065789,76.5444877 212.042133,75.4916385 C213.014835,74.4315031 214.268053,73.6008816 215.769001,73.0216324 C217.259019,72.4460262 219.069628,72.1472939 221.149825,72.150937 C225.430441,72.1655093 227.685505,73.1199955 228.61449,73.6336693 C228.778428,73.7247462 228.935081,73.8850416 228.738354,74.3440693 L227.769296,77.0581615 C227.623573,77.4625431 227.211905,77.3131769 227.211905,77.3131769 C226.15177,76.9197246 224.643536,76.2129677 221.127967,76.2202539 C218.829185,76.2238969 217.124225,76.9015092 216.056804,77.9616446 C214.960238,79.0472815 214.424705,80.6429492 214.329985,82.8943707 L229.153665,82.8797984 C229.153665,82.8797984 229.543474,82.8870845 229.583548,83.2659645 C229.598121,83.4262599 230.093579,86.3115768 229.142736,89.6522783 L229.142736,89.6522783 Z' fill='#FFFFFF' transform='translate(219.472103, 84.138465) scale(1, -1) translate(-219.472103, -84.138465) '></path>
+        <path d='M95.6829901,86.5520198 C95.8942885,87.9618906 96.2804547,89.1349613 96.8815624,90.0493736 C97.7886885,91.4373859 99.1730577,92.198789 101.118461,92.198789 C103.063864,92.198789 104.34987,91.4337428 105.275211,90.0493736 C105.883605,89.1349613 106.14955,87.9108875 106.255199,86.5520198 L95.6829901,86.5520198 L95.6829901,86.5520198 Z M110.422879,89.6522783 C110.051285,91.0548629 109.13323,92.4720198 108.528479,93.1204874 C107.573993,94.1478351 106.641365,94.8655213 105.716024,95.2662597 C104.506522,95.7835766 103.056578,96.1260258 101.468196,96.1260258 C99.6211562,96.1260258 97.9380547,95.8163643 96.5755439,95.1751828 C95.2093901,94.5340013 94.0618209,93.6596628 93.1619809,92.5703828 C92.2621409,91.4847459 91.5845286,90.1914536 91.1546455,88.7232937 C90.7247625,87.2624198 90.5025348,85.6703952 90.5025348,83.9909368 C90.5025348,82.2823338 90.7284055,80.6903092 91.176504,79.25858 C91.6282455,77.8159215 92.3495747,76.5444877 93.3259193,75.4916385 C94.2986209,74.4315031 95.5518393,73.6008816 97.052787,73.0216324 C98.5428054,72.4460262 100.353415,72.1472939 102.433612,72.150937 C106.714227,72.1655093 108.969291,73.1199955 109.898276,73.6336693 C110.062214,73.7247462 110.218867,73.8850416 110.022141,74.3440693 L109.056725,77.0581615 C108.907359,77.4625431 108.495691,77.3131769 108.495691,77.3131769 C107.435556,76.9197246 105.930965,76.2129677 102.40811,76.2202539 C100.112972,76.2238969 98.4080116,76.9015092 97.3405901,77.9616446 C96.2440239,79.0472815 95.7084916,80.6429492 95.6137716,82.8943707 L110.437451,82.8797984 C110.437451,82.8797984 110.827261,82.8870845 110.867334,83.2659645 C110.881907,83.4262599 111.377365,86.3115768 110.422879,89.6522783 L110.422879,89.6522783 Z' fill='#FFFFFF' transform='translate(100.755643, 84.138465) scale(1, -1) translate(-100.755643, -84.138465) '></path>
+        <path d='M63.6417638,76.8187739 C63.0625146,77.2814447 62.9823669,77.3980231 62.7856408,77.6967554 C62.4941946,78.15214 62.3448285,78.8006077 62.3448285,79.6239431 C62.3448285,80.9281646 62.7747115,81.8644354 63.6672654,82.4946877 C63.6563361,82.4910446 64.9423423,83.6058261 67.9660961,83.5657523 C70.0900099,83.5366076 71.9880529,83.223303 71.9880529,83.223303 L71.9880529,76.4836108 L71.991696,76.4836108 C71.991696,76.4836108 70.1082253,76.0792293 67.9879545,75.9517216 C64.9714869,75.7695678 63.6308346,76.822417 63.6417638,76.8187739 M69.5399053,87.2343307 C68.9387976,87.2780476 68.1591792,87.3035491 67.2265515,87.3035491 C65.9551176,87.3035491 64.7274007,87.1432537 63.5761885,86.8335922 C62.41769,86.5239307 61.37577,86.0394014 60.4795731,85.3982199 C59.5797331,84.7533953 58.8547608,83.9300599 58.3301578,82.9537153 C57.8055547,81.9773707 57.5396101,80.8261584 57.5396101,79.5365092 C57.5396101,78.2250016 57.7654809,77.0847185 58.2172224,76.1520908 C58.6689639,75.2158201 59.3210747,74.4362016 60.1516962,73.8350939 C60.9750316,73.2339863 61.99145,72.793174 63.1718069,72.5272294 C64.3339484,72.2612847 65.6527423,72.1264909 67.0954007,72.1264909 C68.6145638,72.1264909 70.1300837,72.2503555 71.5982437,72.5017278 C73.0518314,72.749457 74.836939,73.1101217 75.3323975,73.223057 C75.8242129,73.3396355 76.3706744,73.4890016 76.3706744,73.4890016 C76.7386252,73.5800786 76.7094806,73.9735309 76.7094806,73.9735309 L76.7021944,87.5294199 C76.7021944,90.5021706 75.9080036,92.7062321 74.3451237,94.0723859 C72.7895298,95.4348967 70.4980345,96.1234382 67.536213,96.1234382 C66.4250746,96.1234382 64.6363238,95.970429 63.5652592,95.7554874 C63.5652592,95.7554874 60.3265639,95.1288782 58.9931978,94.0869582 C58.9931978,94.0869582 58.7017516,93.9048044 58.862047,93.4967798 L59.9112531,90.6770383 C60.0424039,90.3127306 60.3957824,90.4365952 60.3957824,90.4365952 C60.3957824,90.4365952 60.5087177,90.4803121 60.6398685,90.5568168 C63.4923977,92.1087675 67.0990438,92.0614075 67.0990438,92.0614075 C68.7019976,92.0614075 69.9333576,91.7408167 70.7639791,91.1032783 C71.5727422,90.4839552 71.9844099,89.5476845 71.9844099,87.5731368 L71.9844099,86.9465276 C70.709333,87.1286814 69.5399053,87.2343307 69.5399053,87.2343307' fill='#FFFFFF' transform='translate(67.124818, 84.124965) scale(1, -1) translate(-67.124818, -84.124965) '></path>
+        <path d='M189.099133,94.6589745 C189.212069,94.9941376 188.975269,95.1544329 188.876906,95.1908637 C188.625533,95.2892268 187.365029,95.5551714 186.392327,95.6171037 C184.530715,95.7300391 183.496081,95.4167345 182.57074,95.0014237 C181.652684,94.586113 180.632623,93.9157868 180.064303,93.1543837 L180.064303,94.9577068 C180.064303,95.2090791 179.885792,95.4094483 179.638063,95.4094483 L175.838334,95.4094483 C175.590604,95.4094483 175.412094,95.2090791 175.412094,94.9577068 L175.412094,72.8478733 C175.412094,72.6001441 175.616106,72.3961318 175.863835,72.3961318 L179.758284,72.3961318 C180.006014,72.3961318 180.206383,72.6001441 180.206383,72.8478733 L180.206383,83.8936824 C180.206383,85.3764146 180.370321,86.8555038 180.698198,87.7844884 C181.018789,88.7025438 181.455958,89.4384453 181.995134,89.9666915 C182.537952,90.4912946 183.153632,90.8592453 183.827601,91.0669007 C184.516143,91.2781992 185.277546,91.3474176 185.816721,91.3474176 C186.592697,91.3474176 187.445177,91.1470484 187.445177,91.1470484 C187.729337,91.1142607 187.889632,91.2891284 187.984352,91.5477868 C188.239367,92.2253991 188.960697,94.254593 189.099133,94.6589745' fill='#FFFFFF' transform='translate(182.270544, 84.018248) scale(1, -1) translate(-182.270544, -84.018248) '></path>
+        <path d='M152.543767,105.761574 C152.070167,105.907297 151.640284,106.00566 151.07925,106.111309 C150.51093,106.213316 149.833318,106.264319 149.064629,106.264319 C146.383324,106.264319 144.270339,105.506559 142.787607,104.012897 C141.312161,102.526522 140.310315,100.264171 139.80757,97.2877773 L139.625416,96.2859312 L136.259213,96.2859312 C136.259213,96.2859312 135.851189,96.3005035 135.763755,95.8560481 L135.21365,92.770362 C135.173577,92.4789159 135.301084,92.2931189 135.694537,92.2931189 L138.969663,92.2931189 L135.647177,73.7425715 C135.388518,72.24891 135.089786,71.0211931 134.758266,70.0885655 C134.434032,69.1705101 134.117084,68.4819686 133.723632,67.9792239 C133.344752,67.4983378 132.98773,67.1413163 132.368407,66.9336609 C131.858377,66.7624363 131.268198,66.6822886 130.623374,66.6822886 C130.266352,66.6822886 129.789109,66.7405778 129.43573,66.8134393 C129.085995,66.8826578 128.900198,66.9591624 128.634254,67.0720978 C128.634254,67.0720978 128.251731,67.2178209 128.098721,66.8352978 C127.9785,66.5183501 127.104161,64.1175625 126.998512,63.8224732 C126.896506,63.527384 127.042229,63.2978702 127.228026,63.2286517 C127.665195,63.0756425 127.989429,62.9736363 128.583251,62.8315563 C129.406586,62.6384733 130.102414,62.627544 130.754524,62.627544 C132.117035,62.627544 133.362967,62.8206271 134.393958,63.1922209 C135.428592,63.5674579 136.332075,64.2195686 137.133552,65.1011932 C137.996961,66.0556794 138.53978,67.0538824 139.057096,68.4200362 C139.57077,69.7679747 140.011583,71.44379 140.361318,73.3964792 L143.702019,92.2931189 L148.583742,92.2931189 C148.583742,92.2931189 148.99541,92.2785466 149.079201,92.7266451 L149.632949,95.8086881 C149.669379,96.1037773 149.545515,96.2859312 149.148419,96.2859312 L144.408776,96.2859312 C144.434278,96.3915804 144.649219,98.0601096 145.192038,99.6302757 C145.425195,100.296959 145.862364,100.839777 146.230315,101.211371 C146.594623,101.575679 147.013576,101.834337 147.472604,101.983703 C147.942561,102.136713 148.478093,102.209574 149.064629,102.209574 C149.509084,102.209574 149.949896,102.158571 150.281416,102.089353 C150.740444,101.99099 150.918955,101.939986 151.039176,101.903556 C151.523706,101.757833 151.589281,101.899913 151.684001,102.13307 L152.816998,105.244257 C152.933576,105.57942 152.645773,105.7215 152.543767,105.761574' fill='#FFFFFF' transform='translate(139.904621, 84.445931) scale(1, -1) translate(-139.904621, -84.445931) '></path>
+        <path d='M86.3217408,63.553237 C86.3217408,63.3055078 86.14323,63.1051385 85.8955008,63.1051385 L81.9646209,63.1051385 C81.7168916,63.1051385 81.542024,63.3055078 81.542024,63.553237 L81.542024,95.1897165 C81.542024,95.4374457 81.7168916,95.6378149 81.9646209,95.6378149 L85.8955008,95.6378149 C86.14323,95.6378149 86.3217408,95.4374457 86.3217408,95.1897165 L86.3217408,63.553237 L86.3217408,63.553237 Z' fill='#FFFFFF' transform='translate(83.931882, 79.371477) scale(1, -1) translate(-83.931882, -79.371477) '></path>
+      </g>
+    </svg>
+  );
+}
diff --git a/components/logos/Slack.tsx b/components/logos/Slack.tsx
new file mode 100644
index 000000000000..29c88c09ec64
--- /dev/null
+++ b/components/logos/Slack.tsx
@@ -0,0 +1,54 @@
+/**
+ * @description Logo for Slack
+ */
+export default function SlackLogo({ className }: { className?: string }) {
+  return (
+    <svg className={className || 'inline-block'} fill='currentColor' viewBox='123.5 261.5 1033 269.25'>
+      <g>
+        <g>
+          <path d='M455.601,470.551l12.752-29.619c13.781,10.285,32.088,15.633,50.188,15.633c13.369,0,21.803-5.143,21.803-12.958
+			c-0.206-21.804-80.013-4.731-80.63-59.444c-0.206-27.768,24.477-49.16,59.444-49.16c20.774,0,41.549,5.143,56.358,16.867
+			l-11.93,30.236c-13.575-8.64-30.442-14.81-46.485-14.81c-10.902,0-18.102,5.142-18.102,11.724
+			c0.206,21.392,80.631,9.668,81.453,61.912c0,28.386-24.065,48.337-58.621,48.337C496.532,489.269,473.289,483.304,455.601,470.551
+			'/>
+          <path d='M944.934,430.236c-6.377,11.107-18.307,18.718-32.088,18.718c-20.363,0-36.818-16.455-36.818-36.818
+			s16.455-36.818,36.818-36.818c13.781,0,25.711,7.61,32.088,18.718l35.172-19.541c-13.163-23.448-38.463-39.492-67.26-39.492
+			c-42.577,0-77.133,34.557-77.133,77.134s34.556,77.133,77.133,77.133c29.002,0,54.096-15.838,67.26-39.492L944.934,430.236z'/>
+          <rect x='598.143' y='271.033' width='44.018' height='215.356' />
+          <polygon points='997.384,271.033 997.384,486.39 1041.401,486.39 1041.401,421.803 1093.646,486.39 1150.005,486.39
+			1083.567,409.667 1145.068,338.088 1091.178,338.088 1041.401,397.531 1041.401,271.033 		'/>
+          <path d='M772.978,430.647c-6.376,10.49-19.54,18.307-34.35,18.307c-20.363,0-36.818-16.455-36.818-36.818
+			s16.455-36.818,36.818-36.818c14.81,0,27.974,8.228,34.35,18.923V430.647z M772.978,338.088v17.483
+			c-7.199-12.136-25.094-20.569-43.812-20.569c-38.67,0-69.111,34.145-69.111,76.928s30.441,77.339,69.111,77.339
+			c18.718,0,36.612-8.433,43.812-20.568v17.483h44.018V338.088H772.978L772.978,338.088z'/>
+        </g>
+        <g>
+          <g className='group-hover:text-[#E01E5A]'>
+            <path d='M183.474,430.441c0,15.016-12.136,27.151-27.151,27.151s-27.151-12.136-27.151-27.151
+				c0-15.015,12.136-27.15,27.151-27.15h27.151V430.441z'/>
+            <path d='M197.05,430.441c0-15.015,12.136-27.15,27.151-27.15s27.151,12.136,27.151,27.15v67.878
+				c0,15.015-12.136,27.15-27.151,27.15s-27.151-12.136-27.151-27.15V430.441z'/>
+          </g>
+          <g className='group-hover:text-[#36C5F0]'>
+            <path d='M224.201,321.427c-15.016,0-27.151-12.136-27.151-27.151s12.136-27.151,27.151-27.151s27.151,12.136,27.151,27.151
+				v27.151H224.201z'/>
+            <path d='M224.201,335.208c15.015,0,27.151,12.136,27.151,27.151c0,15.015-12.136,27.15-27.151,27.15h-68.083
+				c-15.015,0-27.151-12.136-27.151-27.15c0-15.016,12.136-27.151,27.151-27.151H224.201z'/>
+          </g>
+          <g className='group-hover:text-[#2EB67D]'>
+            <path d='M333.01,362.359c0-15.016,12.136-27.151,27.151-27.151s27.151,12.136,27.151,27.151c0,15.015-12.136,27.15-27.151,27.15
+				H333.01V362.359z'/>
+            <path d='M319.435,362.359c0,15.015-12.136,27.15-27.151,27.15c-15.016,0-27.151-12.136-27.151-27.15v-68.083
+				c0-15.015,12.135-27.151,27.151-27.151c15.015,0,27.151,12.136,27.151,27.151V362.359z'/>
+          </g>
+          <g className='group-hover:text-[#ECB22E]'>
+            <path d='M292.284,471.168c15.015,0,27.151,12.136,27.151,27.151c0,15.015-12.136,27.15-27.151,27.15
+				c-15.016,0-27.151-12.136-27.151-27.15v-27.151H292.284z'/>
+            <path d='M292.284,457.593c-15.016,0-27.151-12.136-27.151-27.151c0-15.015,12.135-27.15,27.151-27.15h68.083
+				c15.016,0,27.151,12.136,27.151,27.15c0,15.016-12.136,27.151-27.151,27.151H292.284z'/>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}

From 032ff467565898a2e1917124e51bcaf15431c50b Mon Sep 17 00:00:00 2001
From: Ansh Goyal <anshgoyal1704@gmail.com>
Date: Tue, 12 Mar 2024 13:01:39 +0000
Subject: [PATCH 2/9] fix logos lint

---
 components/logos/Adidas.tsx | 44 ++++++++++++++++++-------------------
 components/logos/Axway.tsx  | 28 +++++++++++------------
 components/logos/SAP.tsx    | 23 ++++---------------
 components/logos/Slack.tsx  | 36 +++++++++++++++---------------
 4 files changed, 57 insertions(+), 74 deletions(-)

diff --git a/components/logos/Adidas.tsx b/components/logos/Adidas.tsx
index caf6155b3531..2664c8b4cd1b 100644
--- a/components/logos/Adidas.tsx
+++ b/components/logos/Adidas.tsx
@@ -7,35 +7,33 @@ export default function AdidasLogo({ className }: { className?: string }) {
       <g id='XMLID_1_'>
         <path
           id='XMLID_16_'
-          d='M1030.713,10.174c12.585,0,22.597,10.299,22.597,23.741c0,12.299-10.012,22.596-22.597,22.596
-		c-12.586,0-22.596-10.297-22.596-22.596C1008.117,20.473,1018.413,10.174,1030.713,10.174z M1030.713,13.322
-		c-11.44,0-19.45,9.15-19.45,20.593c0,10.297,8.296,19.449,19.45,19.449c10.298,0,19.449-9.152,19.449-19.449
-		C1050.448,22.76,1041.011,13.322,1030.713,13.322z M1035.86,34.201c1.146,0,4.005,0.857,4.005,5.148v7.15h-4.005v-3.146
-		c0-5.148-1.144-7.438-4.003-7.438h-5.148v10.297h-4.004V20.473h8.294c5.147,0,9.152,3.146,9.152,7.436
-		C1040.151,30.77,1037.863,34.201,1035.86,34.201z M1026.709,24.762v7.15h4.004c2.002,0,5.147-1.143,5.147-3.146
-		c0-2.289-2.286-4.005-4.003-4.005H1026.709'
+          d='M1030.713,10.174c12.585,0,22.597,10.299,22.597,23.741c0,12.299-10.012,22.596-22.597,22.596c-12.586,0-22.596-10.297-22.596-22.596C1008.117,20.473,1018.413,10.174,1030.713,10.174z M1030.713,13.322c-11.44,0-19.45,9.15-19.45,20.593c0,10.297,8.296,19.449,19.45,19.449c10.298,0,19.449-9.152,19.449-19.449
+C1050.448,22.76,1041.011,13.322,1030.713,13.322z M1035.86,34.201c1.146,0,4.005,0.857,4.005,5.148v7.15h-4.005v-3.146
+c0-5.148-1.144-7.438-4.003-7.438h-5.148v10.297h-4.004V20.473h8.294c5.147,0,9.152,3.146,9.152,7.436
+C1040.151,30.77,1037.863,34.201,1035.86,34.201z M1026.709,24.762v7.15h4.004c2.002,0,5.147-1.143,5.147-3.146
+c0-2.289-2.286-4.005-4.003-4.005H1026.709'
         />
         <path
           id='XMLID_17_'
           d='M974.937,248.436c43.19,0,79.517-17.447,79.517-60.638c0-24.598-17.447-41.188-45.478-48.625
-		c-28.889-7.15-65.787-6.007-65.787-24.598c2.002-12.299,13.444-15.445,30.892-15.445c26.886,0,28.029,14.302,29.175,23.739h44.048
-		c-3.146-34.037-30.892-57.778-75.226-57.778c-46.336,0-73.223,24.6-73.223,56.921c0,18.591,9.153,35.181,24.598,43.188
-		c11.155,5.15,26.601,9.153,45.479,12.586c19.449,2.002,36.896,4.005,38.04,17.448c0,9.153-9.151,20.594-30.032,20.594
-		c-30.033,0-36.038-16.589-36.038-27.744h-46.337C895.708,223.551,925.454,248.436,974.937,248.436'
+c-28.889-7.15-65.787-6.007-65.787-24.598c2.002-12.299,13.444-15.445,30.892-15.445c26.886,0,28.029,14.302,29.175,23.739h44.048
+c-3.146-34.037-30.892-57.778-75.226-57.778c-46.336,0-73.223,24.6-73.223,56.921c0,18.591,9.153,35.181,24.598,43.188
+c11.155,5.15,26.601,9.153,45.479,12.586c19.449,2.002,36.896,4.005,38.04,17.448c0,9.153-9.151,20.594-30.032,20.594
+c-30.033,0-36.038-16.589-36.038-27.744h-46.337C895.708,223.551,925.454,248.436,974.937,248.436'
         />
         <path
           id='XMLID_20_'
           d='M781.297,248.436c19.736,0,37.184-6.292,51.771-15.445v11.44h44.334V67.094h-44.62v13.443
-		c-14.302-10.296-31.749-15.444-51.771-15.444c-50.341,0-92.672,40.329-92.672,91.813
-		C688.625,207.247,730.956,248.436,781.297,248.436z M732.1,156.62c0-28.03,23.741-51.771,51.486-51.771
-		c26.885,0,49.482,23.74,49.482,51.771c0,26.601-22.598,50.627-49.482,50.627C755.555,207.247,732.1,183.221,732.1,156.62'
+c-14.302-10.296-31.749-15.444-51.771-15.444c-50.341,0-92.672,40.329-92.672,91.813
+C688.625,207.247,730.956,248.436,781.297,248.436z M732.1,156.62c0-28.03,23.741-51.771,51.486-51.771
+c26.885,0,49.482,23.74,49.482,51.771c0,26.601-22.598,50.627-49.482,50.627C755.555,207.247,732.1,183.221,732.1,156.62'
         />
         <path
           id='XMLID_23_'
           d='M630.847,6.171v74.08c-15.444-10.296-32.894-15.444-52.63-15.444c-50.625,0-91.813,40.329-91.813,91.813
-		c0,50.627,41.188,91.529,91.813,91.529c19.451,0,38.042-6.292,52.63-15.445v11.44h43.19V5.885h-43.19V6.171z M529.021,156.62
-		c0-28.03,23.741-51.771,50.341-51.771c28.03,0,51.771,23.74,51.771,51.771c0,26.601-23.74,50.627-51.771,50.627
-		C552.476,207.247,529.021,183.221,529.021,156.62'
+c0,50.627,41.188,91.529,91.813,91.529c19.451,0,38.042-6.292,52.63-15.445v11.44h43.19V5.885h-43.19V6.171z M529.021,156.62
+c0-28.03,23.741-51.771,50.341-51.771c28.03,0,51.771,23.74,51.771,51.771c0,26.601-23.74,50.627-51.771,50.627
+C552.476,207.247,529.021,183.221,529.021,156.62'
         />
         <path
           id='XMLID_26_'
@@ -44,16 +42,16 @@ export default function AdidasLogo({ className }: { className?: string }) {
         <path
           id='XMLID_29_'
           d='M306.206,248.436c19.45,0,36.897-6.292,52.628-15.445v11.44h44.333V6.171h-44.333v74.08
-		c-15.445-10.296-32.892-15.444-52.628-15.444c-50.627,0-92.674,40.329-92.674,91.813
-		C213.532,207.247,255.579,248.436,306.206,248.436z M255.579,156.62c0-28.03,23.741-51.771,52.628-51.771
-		c26.887,0,50.627,23.74,50.627,51.771c0,26.601-23.741,50.627-50.627,50.627C279.32,207.247,255.579,183.221,255.579,156.62'
+c-15.445-10.296-32.892-15.444-52.628-15.444c-50.627,0-92.674,40.329-92.674,91.813
+C213.532,207.247,255.579,248.436,306.206,248.436z M255.579,156.62c0-28.03,23.741-51.771,52.628-51.771
+c26.887,0,50.627,23.74,50.627,51.771c0,26.601-23.741,50.627-50.627,50.627C279.32,207.247,255.579,183.221,255.579,156.62'
         />
         <path
           id='XMLID_32_'
           d='M101.982,248.436c20.593,0,38.041-6.292,53.487-15.445v11.44h43.19V67.094h-43.19v13.443
-		c-15.446-10.296-34.037-15.444-53.487-15.444c-50.627,0-91.529,40.329-91.529,91.813
-		C10.453,207.247,51.641,248.436,101.982,248.436z M52.499,156.62c0-28.03,23.74-51.771,50.627-51.771
-		c28.889,0,52.629,23.74,52.629,51.771c0,26.601-23.741,50.627-52.629,50.627C76.239,207.247,52.499,183.221,52.499,156.62'
+c-15.446-10.296-34.037-15.444-53.487-15.444c-50.627,0-91.529,40.329-91.529,91.813
+C10.453,207.247,51.641,248.436,101.982,248.436z M52.499,156.62c0-28.03,23.74-51.771,50.627-51.771
+c28.889,0,52.629,23.74,52.629,51.771c0,26.601-23.741,50.627-52.629,50.627C76.239,207.247,52.499,183.221,52.499,156.62'
         />
       </g>
     </svg>
diff --git a/components/logos/Axway.tsx b/components/logos/Axway.tsx
index fbae4152f038..95e2b56723ea 100644
--- a/components/logos/Axway.tsx
+++ b/components/logos/Axway.tsx
@@ -9,27 +9,27 @@ export default function AxwayLogo({ className }: { className?: string }) {
           <g id='Nav'>
             <g id='Axway-Logo' transform='translate(380 13)'>
               <path id='Fill-1' d='M33.393,169.374l21.84-3.681c5.399-0.859,6.38-3.681,6.38-6.381c0-6.38-4.54-11.778-15.46-11.778
-					s-16.319,6.38-17.301,14.601l-21.84-4.54c1.84-14.601,14.601-29.938,39.019-29.938c28.221,0,39.018,16.319,39.018,34.479v44.54
-					c0,4.54,0.859,10.92,0.859,14.602H64.313c-0.859-2.7-0.859-7.239-0.859-10.921c-4.54,7.239-13.62,13.62-26.38,13.62
-					c-19.141,0-30.92-12.761-30.92-27.239C6.153,180.295,17.933,171.215,33.393,169.374 M62.472,184.834v-3.681l-20,2.699
-					c-6.38,0.859-10.92,4.54-10.92,11.779c0,5.398,3.681,10.92,11.779,10.92C52.534,205.816,62.472,200.295,62.472,184.834'/>
+s-16.319,6.38-17.301,14.601l-21.84-4.54c1.84-14.601,14.601-29.938,39.019-29.938c28.221,0,39.018,16.319,39.018,34.479v44.54
+c0,4.54,0.859,10.92,0.859,14.602H64.313c-0.859-2.7-0.859-7.239-0.859-10.921c-4.54,7.239-13.62,13.62-26.38,13.62
+c-19.141,0-30.92-12.761-30.92-27.239C6.153,180.295,17.933,171.215,33.393,169.374 M62.472,184.834v-3.681l-20,2.699
+c-6.38,0.859-10.92,4.54-10.92,11.779c0,5.398,3.681,10.92,11.779,10.92C52.534,205.816,62.472,200.295,62.472,184.834'/>
               <path id='Fill-3' d='M121.613,175.755l-31.779-45.399h29.08c2.699,4.54,14.601,21.841,18.16,27.239l18.159-27.239h27.24
-					l-31.779,44.54l32.761,46.381h-28.221l-19.141-28.221c-3.681,4.539-15.46,22.699-18.159,28.221H90.693
-					C90.693,221.153,121.613,175.755,121.613,175.755z'/>
+l-31.779,44.54l32.761,46.381h-28.221l-19.141-28.221c-3.681,4.539-15.46,22.699-18.159,28.221H90.693
+C90.693,221.153,121.613,175.755,121.613,175.755z'/>
               <path id='Fill-5' d='M266.03,130.355l20,58.16l16.319-58.16h24.54l-28.221,90.921h-24.54l-20.859-61.841l-20.858,61.841h-24.54
-					l-29.08-90.921h25.521l17.301,58.16l19.142-58.16H266.03z'/>
+l-29.08-90.921h25.521l17.301,58.16l19.142-58.16H266.03z'/>
               <path id='Fill-7' d='M351.552,169.374l21.841-3.681c5.398-0.859,6.381-3.681,6.381-6.381c0-6.38-4.54-11.778-15.461-11.778
-					c-10.92,0-16.318,6.38-17.301,14.601l-21.84-4.54c1.841-14.601,14.602-29.938,39.019-29.938
-					c28.221,0,39.019,16.319,39.019,34.479v44.54c0,4.54,0.858,10.92,0.858,14.602h-22.699c-0.859-2.7-0.859-7.239-0.859-10.921
-					c-4.54,7.239-13.619,13.62-26.38,13.62c-19.142,0-30.92-12.761-30.92-27.239C324.19,180.295,336.092,171.215,351.552,169.374
-					 M380.632,184.834v-3.681l-20,2.699c-6.38,0.859-10.92,4.54-10.92,11.779c0,5.398,3.681,10.92,11.779,10.92
-					C370.57,205.816,380.632,200.295,380.632,184.834'/>
+c-10.92,0-16.318,6.38-17.301,14.601l-21.84-4.54c1.841-14.601,14.602-29.938,39.019-29.938
+c28.221,0,39.019,16.319,39.019,34.479v44.54c0,4.54,0.858,10.92,0.858,14.602h-22.699c-0.859-2.7-0.859-7.239-0.859-10.921
+c-4.54,7.239-13.619,13.62-26.38,13.62c-19.142,0-30.92-12.761-30.92-27.239C324.19,180.295,336.092,171.215,351.552,169.374
+M380.632,184.834v-3.681l-20,2.699c-6.38,0.859-10.92,4.54-10.92,11.779c0,5.398,3.681,10.92,11.779,10.92
+C370.57,205.816,380.632,200.295,380.632,184.834'/>
               <path id='Fill-9' d='M419.65,256.613l20.858-47.239l-38.159-79.019h27.239l24.54,53.62l21.841-53.62h26.38l-57.301,126.381
-					H419.65V256.613z'/>
+H419.65V256.613z'/>
               <g className='group-hover:text-[#de262c]'>
                 <g id='Group-13' transform='translate(56.41 .062)'>
                   <path id='Fill-11' fill='currentColor' d='M685.952,97.241v-30.92l-46.381-22.699v46.38L462.394,5.462v30.92l202.699,96.319V87.302
-						L685.952,97.241z'/>
+L685.952,97.241z'/>
                 </g>
                 <path id='Fill-14' fill='currentColor' d='M564.19,119.436v30.92l32.761,15.461l-52.761,55.46h34.479l61.84-65.399L564.19,119.436z'
                 />
diff --git a/components/logos/SAP.tsx b/components/logos/SAP.tsx
index 1c599aa8ab24..87201608daf9 100644
--- a/components/logos/SAP.tsx
+++ b/components/logos/SAP.tsx
@@ -19,27 +19,12 @@ export default function SapLogo({ className }: { className?: string }) {
       onMouseLeave={handleMouseLeave}
     >
       <linearGradient id='path3060_1_' gradientUnits='userSpaceOnUse' x1='-127.4302' y1='661.6777' x2='-126.4722' y2='661.6777' gradientTransform='matrix(0 513.7015 -513.7015 0 340415.5625 65474.9453)'>
-        <stop offset='0' style={{ stopColor: !isHovered ? 'currentColor' : '#1661BE' }} />
-        <stop offset='1' style={{ stopColor: !isHovered ? 'currentColor' : '#019CE0' }} />
+        <stop offset='0' style={{ stopColor: isHovered ? '#1661BE' : 'currentColor' }} />
+        <stop offset='1' style={{ stopColor: isHovered ? '#019CE0' : 'currentColor' }} />
       </linearGradient>
       <path id='path3060' fill='url(#path3060_1_)' d='M13.43,13.621v491.971h502.559l491.915-491.915l0,0H13.43V13.621z' />
-      <path id='path5384' fill='url(#path3060_1_)' d='M649.993,455.304v36.691h5.538v-15.923h6.229l10.039,15.923h6.23l-10.731-15.923
-	c5.362-0.665,9.692-3.783,9.692-10.385c0-7.232-4.427-10.384-13.152-10.384H649.993z M655.531,460.149h7.614
-	c3.745,0,7.962,0.609,7.962,5.191c0,5.728-4.271,6.232-9,6.232h-6.576V460.149z M662.454,441.803
-	c-17.567,0-32.539,13.537-32.539,31.846c0,18.442,14.971,32.192,32.539,32.192c17.324,0,31.846-13.747,31.846-32.192
-	C694.3,455.34,679.778,441.803,662.454,441.803z M662.454,446.996c14.332,0,25.613,11.578,25.613,26.652
-	c0,15.332-11.281,26.654-25.613,26.654c-14.578,0-26.307-11.322-26.307-26.654C636.147,458.574,647.876,446.996,662.454,446.996z'/>
-      <path id='path3100' fill='#FFFFFF' d='M609.321,249.022h-21.555V170.19h21.555c28.777,0,51.684,9.481,51.684,38.913
-	C661.005,239.497,638.099,249.022,609.321,249.022 M377.321,305.381c-11.409,0-22.109-2.083-31.358-5.561l31.048-97.918h0.665
-	l30.405,98.184c-9.16,3.278-19.583,5.295-30.727,5.295 M603.606,106.145h-97.885v232.754l-85.512-232.754h-84.758l-73.062,194.595
-	c-7.72-49.047-58.529-66.028-98.472-78.688c-26.329-8.474-54.353-20.924-54.098-34.714c0.222-11.276,15.053-21.732,44.307-20.17
-	c19.716,0.997,37.107,2.592,71.633,19.285l34.005-59.238c-31.502-16.094-75.155-26.196-110.867-26.274h-0.221
-	c-41.66,0-76.374,13.58-97.907,35.811c-14.965,15.552-23.062,35.224-23.427,57.123c-0.554,29.996,10.49,51.285,33.606,68.31
-	c19.562,14.333,44.517,23.561,66.56,30.472c27.193,8.386,49.391,15.707,49.136,31.314c-0.221,5.682-2.337,11.01-6.446,15.219
-	c-6.768,7.034-17.169,9.637-31.558,9.958c-27.736,0.554-48.305-3.766-81.07-23.128l-30.228,60.068
-	c32.665,18.598,71.333,29.476,110.8,29.476h5.106c34.338-0.665,62.074-10.468,84.238-28.279l3.588-3.135l-9.792,26.318h88.89
-	l14.932-45.403c15.618,5.284,33.407,8.252,52.237,8.252c18.376,0,35.711-2.769,51.053-7.819l14.355,44.971h145.037v-94.041h31.646
-	c76.429,0,121.688-38.9,121.688-104.187c0-72.663-43.952-105.993-137.528-105.993'/>
+      <path id='path5384' fill='url(#path3060_1_)' d='M649.993,455.304v36.691h5.538v-15.923h6.229l10.039,15.923h6.23l-10.731-15.923c5.362-0.665,9.692-3.783,9.692-10.385c0-7.232-4.427-10.384-13.152-10.384H649.993z M655.531,460.149h7.614c3.745,0,7.962,0.609,7.962,5.191c0,5.728-4.271,6.232-9,6.232h-6.576V460.149z M662.454,441.803c-17.567,0-32.539,13.537-32.539,31.846c0,18.442,14.971,32.192,32.539,32.192c17.324,0,31.846-13.747,31.846-32.192C694.3,455.34,679.778,441.803,662.454,441.803z M662.454,446.996c14.332,0,25.613,11.578,25.613,26.652c0,15.332-11.281,26.654-25.613,26.654c-14.578,0-26.307-11.322-26.307-26.654C636.147,458.574,647.876,446.996,662.454,446.996z'/>
+      <path id='path3100' fill='#FFFFFF' d='M609.321,249.022h-21.555V170.19h21.555c28.777,0,51.684,9.481,51.684,38.913C661.005,239.497,638.099,249.022,609.321,249.022 M377.321,305.381c-11.409,0-22.109-2.083-31.358-5.561l31.048-97.918h0.665l30.405,98.184c-9.16,3.278-19.583,5.295-30.727,5.295 M603.606,106.145h-97.885v232.754l-85.512-232.754h-84.758l-73.062,194.595c-7.72-49.047-58.529-66.028-98.472-78.688c-26.329-8.474-54.353-20.924-54.098-34.714c0.222-11.276,15.053-21.732,44.307-20.17c19.716,0.997,37.107,2.592,71.633,19.285l34.005-59.238c-31.502-16.094-75.155-26.196-110.867-26.274h-0.221c-41.66,0-76.374,13.58-97.907,35.811c-14.965,15.552-23.062,35.224-23.427,57.123c-0.554,29.996,10.49,51.285,33.606,68.31c19.562,14.333,44.517,23.561,66.56,30.472c27.193,8.386,49.391,15.707,49.136,31.314c-0.221,5.682-2.337,11.01-6.446,15.219c-6.768,7.034-17.169,9.637-31.558,9.958c-27.736,0.554-48.305-3.766-81.07-23.128l-30.228,60.068c32.665,18.598,71.333,29.476,110.8,29.476h5.106c34.338-0.665,62.074-10.468,84.238-28.279l3.588-3.135l-9.792,26.318h88.89l14.932-45.403c15.618,5.284,33.407,8.252,52.237,8.252c18.376,0,35.711-2.769,51.053-7.819l14.355,44.971h145.037v-94.041h31.646c76.429,0,121.688-38.9,121.688-104.187c0-72.663-43.952-105.993-137.528-105.993'/>
     </svg>
   );
 }
diff --git a/components/logos/Slack.tsx b/components/logos/Slack.tsx
index 29c88c09ec64..864acb333f97 100644
--- a/components/logos/Slack.tsx
+++ b/components/logos/Slack.tsx
@@ -7,45 +7,45 @@ export default function SlackLogo({ className }: { className?: string }) {
       <g>
         <g>
           <path d='M455.601,470.551l12.752-29.619c13.781,10.285,32.088,15.633,50.188,15.633c13.369,0,21.803-5.143,21.803-12.958
-			c-0.206-21.804-80.013-4.731-80.63-59.444c-0.206-27.768,24.477-49.16,59.444-49.16c20.774,0,41.549,5.143,56.358,16.867
-			l-11.93,30.236c-13.575-8.64-30.442-14.81-46.485-14.81c-10.902,0-18.102,5.142-18.102,11.724
-			c0.206,21.392,80.631,9.668,81.453,61.912c0,28.386-24.065,48.337-58.621,48.337C496.532,489.269,473.289,483.304,455.601,470.551
-			'/>
+c-0.206-21.804-80.013-4.731-80.63-59.444c-0.206-27.768,24.477-49.16,59.444-49.16c20.774,0,41.549,5.143,56.358,16.867
+l-11.93,30.236c-13.575-8.64-30.442-14.81-46.485-14.81c-10.902,0-18.102,5.142-18.102,11.724
+c0.206,21.392,80.631,9.668,81.453,61.912c0,28.386-24.065,48.337-58.621,48.337C496.532,489.269,473.289,483.304,455.601,470.551
+'/>
           <path d='M944.934,430.236c-6.377,11.107-18.307,18.718-32.088,18.718c-20.363,0-36.818-16.455-36.818-36.818
-			s16.455-36.818,36.818-36.818c13.781,0,25.711,7.61,32.088,18.718l35.172-19.541c-13.163-23.448-38.463-39.492-67.26-39.492
-			c-42.577,0-77.133,34.557-77.133,77.134s34.556,77.133,77.133,77.133c29.002,0,54.096-15.838,67.26-39.492L944.934,430.236z'/>
+s16.455-36.818,36.818-36.818c13.781,0,25.711,7.61,32.088,18.718l35.172-19.541c-13.163-23.448-38.463-39.492-67.26-39.492
+c-42.577,0-77.133,34.557-77.133,77.134s34.556,77.133,77.133,77.133c29.002,0,54.096-15.838,67.26-39.492L944.934,430.236z'/>
           <rect x='598.143' y='271.033' width='44.018' height='215.356' />
           <polygon points='997.384,271.033 997.384,486.39 1041.401,486.39 1041.401,421.803 1093.646,486.39 1150.005,486.39
-			1083.567,409.667 1145.068,338.088 1091.178,338.088 1041.401,397.531 1041.401,271.033 		'/>
+1083.567,409.667 1145.068,338.088 1091.178,338.088 1041.401,397.531 1041.401,271.033'/>
           <path d='M772.978,430.647c-6.376,10.49-19.54,18.307-34.35,18.307c-20.363,0-36.818-16.455-36.818-36.818
-			s16.455-36.818,36.818-36.818c14.81,0,27.974,8.228,34.35,18.923V430.647z M772.978,338.088v17.483
-			c-7.199-12.136-25.094-20.569-43.812-20.569c-38.67,0-69.111,34.145-69.111,76.928s30.441,77.339,69.111,77.339
-			c18.718,0,36.612-8.433,43.812-20.568v17.483h44.018V338.088H772.978L772.978,338.088z'/>
+s16.455-36.818,36.818-36.818c14.81,0,27.974,8.228,34.35,18.923V430.647z M772.978,338.088v17.483
+c-7.199-12.136-25.094-20.569-43.812-20.569c-38.67,0-69.111,34.145-69.111,76.928s30.441,77.339,69.111,77.339
+c18.718,0,36.612-8.433,43.812-20.568v17.483h44.018V338.088H772.978L772.978,338.088z'/>
         </g>
         <g>
           <g className='group-hover:text-[#E01E5A]'>
             <path d='M183.474,430.441c0,15.016-12.136,27.151-27.151,27.151s-27.151-12.136-27.151-27.151
-				c0-15.015,12.136-27.15,27.151-27.15h27.151V430.441z'/>
+c0-15.015,12.136-27.15,27.151-27.15h27.151V430.441z'/>
             <path d='M197.05,430.441c0-15.015,12.136-27.15,27.151-27.15s27.151,12.136,27.151,27.15v67.878
-				c0,15.015-12.136,27.15-27.151,27.15s-27.151-12.136-27.151-27.15V430.441z'/>
+c0,15.015-12.136,27.15-27.151,27.15s-27.151-12.136-27.151-27.15V430.441z'/>
           </g>
           <g className='group-hover:text-[#36C5F0]'>
             <path d='M224.201,321.427c-15.016,0-27.151-12.136-27.151-27.151s12.136-27.151,27.151-27.151s27.151,12.136,27.151,27.151
-				v27.151H224.201z'/>
+v27.151H224.201z'/>
             <path d='M224.201,335.208c15.015,0,27.151,12.136,27.151,27.151c0,15.015-12.136,27.15-27.151,27.15h-68.083
-				c-15.015,0-27.151-12.136-27.151-27.15c0-15.016,12.136-27.151,27.151-27.151H224.201z'/>
+c-15.015,0-27.151-12.136-27.151-27.15c0-15.016,12.136-27.151,27.151-27.151H224.201z'/>
           </g>
           <g className='group-hover:text-[#2EB67D]'>
             <path d='M333.01,362.359c0-15.016,12.136-27.151,27.151-27.151s27.151,12.136,27.151,27.151c0,15.015-12.136,27.15-27.151,27.15
-				H333.01V362.359z'/>
+H333.01V362.359z'/>
             <path d='M319.435,362.359c0,15.015-12.136,27.15-27.151,27.15c-15.016,0-27.151-12.136-27.151-27.15v-68.083
-				c0-15.015,12.135-27.151,27.151-27.151c15.015,0,27.151,12.136,27.151,27.151V362.359z'/>
+c0-15.015,12.135-27.151,27.151-27.151c15.015,0,27.151,12.136,27.151,27.151V362.359z'/>
           </g>
           <g className='group-hover:text-[#ECB22E]'>
             <path d='M292.284,471.168c15.015,0,27.151,12.136,27.151,27.151c0,15.015-12.136,27.15-27.151,27.15
-				c-15.016,0-27.151-12.136-27.151-27.15v-27.151H292.284z'/>
+c-15.016,0-27.151-12.136-27.151-27.15v-27.151H292.284z'/>
             <path d='M292.284,457.593c-15.016,0-27.151-12.136-27.151-27.151c0-15.015,12.135-27.15,27.151-27.15h68.083
-				c15.016,0,27.151,12.136,27.151,27.15c0,15.016-12.136,27.151-27.151,27.151H292.284z'/>
+c15.016,0,27.151,12.136,27.151,27.15c0,15.016-12.136,27.151-27.151,27.151H292.284z'/>
           </g>
         </g>
       </g>

From 6dfcc14cec1e84f6268208504e142bb45b105edd Mon Sep 17 00:00:00 2001
From: Ansh Goyal <anshgoyal1704@gmail.com>
Date: Tue, 12 Mar 2024 13:31:27 +0000
Subject: [PATCH 3/9] add slack

---
 components/slack/Message.tsx | 59 +++++++++++++++++++++++++
 components/slack/index.tsx   | 84 ++++++++++++++++++++++++++++++++++++
 2 files changed, 143 insertions(+)
 create mode 100644 components/slack/Message.tsx
 create mode 100644 components/slack/index.tsx

diff --git a/components/slack/Message.tsx b/components/slack/Message.tsx
new file mode 100644
index 000000000000..49a3cdc56688
--- /dev/null
+++ b/components/slack/Message.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+
+interface ISlackMessageProps {
+    className?: string;
+    avatar: string;
+    name: string;
+    text: React.ReactNode;
+    reactions?: {
+      emoji?: string;
+      icon?: string;
+      count: number;
+      mine?: boolean;
+      name?: string;
+    }[];
+  }
+
+/**
+   * @description Component to render a Slack message.
+   * @param {Object} props - The component props.
+   * @param {string} [props.className=''] - Additional CSS classes for styling.
+   * @param {string} props.avatar - URL of the user's avatar.
+   * @param {string} props.name - Name of the user.
+   * @param {React.ReactNode} props.text - Text of the message.
+   * @param {Object[]} [props.reactions=[]] - Array of reaction objects.
+   * @param {string} props.reactions[].emoji - Emoji representing the reaction.
+   * @param {string} [props.reactions[].icon] - URL of the reaction icon.
+   * @param {string} [props.reactions[].name] - Name of the reaction icon.
+   * @param {number} props.reactions[].count - Number of reactions.
+   * @param {boolean} [props.reactions[].mine] - Indicates if the reaction is from the current user.
+   */
+export default function SlackMessage({
+  className = '',
+  avatar,
+  name,
+  text,
+  reactions = []
+}: ISlackMessageProps) {
+  return (
+    <div className={`my-2 flex pl-2 text-left ${className}`} data-testid='SlackMessage-main-div'>
+      <img className='mr-2 block size-9 rounded object-cover' src={avatar} alt={name} data-testid='SlackMessage-img'/>
+      <div>
+        <div className='-mt-1 text-sm font-bold'  data-testid='SlackMessage-name'>{name}</div>
+        <p className='text-sm' data-testid='SlackMessage-text'>
+          {text}
+        </p>
+        <div className='mt-0.5'>
+          {
+            reactions.map((reaction, index) => (
+              <div key={index} className={`mr-1 inline rounded-xl px-2 py-0.5 ${reaction.mine ? 'border border-blue-500 bg-blue-50' : 'bg-gray-100'}`} data-testid='SlackMessage-reaction'>
+                { reaction.icon ? (<img className='-mt-0.5 inline-block size-4 object-contain' src={reaction.icon} alt={reaction.name} data-testid='reactionIcon' />) : (<span className='mr-1 text-xs' data-testid='SlackMessage-span'>{reaction.emoji}</span>) }
+                <span className='ml-1 inline-block text-xs font-bold text-blue-500' data-testid='SlackMessage-count'>{reaction.count}</span>
+              </div>
+            ))
+          }
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/slack/index.tsx b/components/slack/index.tsx
new file mode 100644
index 000000000000..9a3355444c5a
--- /dev/null
+++ b/components/slack/index.tsx
@@ -0,0 +1,84 @@
+import SlackMessage from './Message';
+
+interface SlackProps {
+  className?: string;
+}
+
+/**
+ * @description Slack component for displaying Slack-like UI.
+ * @param {SlackProps} props - Slack component props.
+ */
+export default function Slack({
+  className = ''
+}: SlackProps) {
+  return (
+    <div className={`flex overflow-hidden rounded-md border border-gray-200 bg-white ${className}`}>
+      <div className='hidden w-1/5 bg-slack p-2 sm:block'>
+        <div className='mb-1 h-2 w-3/4 rounded-xl bg-white/25'></div>
+        <div className='mb-1 h-2 w-1/3 rounded-xl bg-white/25'></div>
+        <div className='mb-1 h-2 w-1/2 rounded-xl bg-white/25'></div>
+        <div className='mb-1 h-2 w-1/4 rounded-xl bg-white/25'></div>
+        <div className='mb-1 h-2 w-1/3 rounded-xl bg-white/25'></div>
+        <div className='mb-1 h-2 w-3/4 rounded-xl bg-white/25'></div>
+        <div className='mb-1 h-2 w-1/3 rounded-xl bg-white/25'></div>
+        <div className='mb-1 h-2 w-1/2 rounded-xl bg-white/25'></div>
+        <div className='mb-1 h-2 w-1/2 rounded-xl bg-white/25'></div>
+        <div className='mb-1 h-2 w-1/4 rounded-xl bg-white/25'></div>
+        <div className='mb-1 h-2 w-1/3 rounded-xl bg-white/25'></div>
+        <div className='mb-1 h-2 w-3/4 rounded-xl bg-white/25'></div>
+        <div className='mb-1 h-2 w-1/2 rounded-xl bg-white/25'></div>
+        <div className='mb-1 h-2 w-1/4 rounded-xl bg-white/25'></div>
+        <div className='mb-1 h-2 w-1/3 rounded-xl bg-white/25'></div>
+      </div>
+      <div className='flex-1 py-2'   data-testid='SlackMessage'>
+        <SlackMessage
+          avatar='/img/homepage/lukasz-homepage-slack.webp'
+          name='Lukasz Gornicki'
+          text={
+            <>
+              Good Morning
+              <img className='ml-1 inline-block size-5' src='/img/homepage/grain.png' alt='grain'/>
+              <img className='ml-1 inline-block size-5' src='/img/homepage/coffee.png' alt='coffee'/>
+            </>
+          }
+          reactions={[
+            { icon: '/img/homepage/coffee.png', name: 'coffee', count: 6, mine: true },
+            { icon: '/img/homepage/coffee-parrot.gif', name: 'coffee-parrot', count: 4, mine: true },
+            { icon: '/img/homepage/coffee-bean.png', name: 'coffee-bean', count: 6, mine: true },
+            { icon: '/img/homepage/parrotsleep.gif', name: 'parrotsleep', count: 1, mine: false }
+          ]}
+        />
+        <SlackMessage
+          avatar='/img/homepage/eve-and-chan.webp'
+          name='Eve & Chan'
+          text={
+            <span className='text-gray-500'>
+              Joined #general.
+            </span>
+          }
+        />
+        <SlackMessage
+          avatar='/img/homepage/eve-and-chan.webp'
+          name='Eve & Chan'
+          text={
+            <>
+              Hey folks! 👋
+            </>
+          }
+          reactions={[
+            { emoji: '👋', count: 21, mine: true }
+          ]}
+        />
+        <SlackMessage
+          avatar='/img/avatars/fmvilas.webp'
+          name='fmvilas'
+          text={
+            <>
+              Hey Eve & Chan! Welcome to the AsyncAPI workspace!
+            </>
+          }
+        />
+      </div>
+    </div>
+  );
+}

From ed770e37ed4fcacb9e288f493fa77716cba23c31 Mon Sep 17 00:00:00 2001
From: Ansh Goyal <anshgoyal1704@gmail.com>
Date: Tue, 12 Mar 2024 14:23:43 +0000
Subject: [PATCH 4/9] add roadmap

---
 components/Modal.tsx                 |  60 ++++++++++++
 components/roadmap/RoadmapColumn.tsx |  43 +++++++++
 components/roadmap/RoadmapItem.tsx   | 139 +++++++++++++++++++++++++++
 components/roadmap/RoadmapList.tsx   |  52 ++++++++++
 4 files changed, 294 insertions(+)
 create mode 100644 components/Modal.tsx
 create mode 100644 components/roadmap/RoadmapColumn.tsx
 create mode 100644 components/roadmap/RoadmapItem.tsx
 create mode 100644 components/roadmap/RoadmapList.tsx

diff --git a/components/Modal.tsx b/components/Modal.tsx
new file mode 100644
index 000000000000..eb1a3dd34e4d
--- /dev/null
+++ b/components/Modal.tsx
@@ -0,0 +1,60 @@
+import { useEffect, useRef } from 'react';
+
+interface IModalProps {
+    title: string;
+    children: React.ReactNode;
+    onModalClose?: () => void;
+    }
+
+/**
+ * @description Modal component.
+ * @param {ModalProps} props - The props for the Modal component.
+ */
+export default function Modal({
+  title,
+  children,
+  onModalClose = () => {}
+}: IModalProps) {
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  // Focus the modal when it mounts
+  useEffect(() => {
+    if (modalRef.current) modalRef.current.focus();
+  }, []);
+
+  /**
+   * @description Handles the backdrop click event.
+   * @param {React.MouseEvent<HTMLDivElement>} e - The event object.
+   */
+  function backdropClickHandler(e: React.MouseEvent<HTMLDivElement>) {
+    if (modalRef.current && (modalRef.current === e.target || !modalRef.current.contains(e.target as Node))) {
+      onModalClose();
+    }
+  }
+
+  /**
+   * @description Handles the key up event.
+   * @param {React.KeyboardEvent<HTMLDivElement>} e - The event object.
+   */
+  function onKeyUpHandler(e: React.KeyboardEvent<HTMLDivElement>) {
+    if (e.key === 'Escape') onModalClose();
+  }
+
+  return (
+    <div ref={modalRef} tabIndex={-1} className='fixed inset-0 z-30 my-auto mt-2 flex min-h-full items-end justify-center bg-black/30 p-4 text-center backdrop-blur sm:items-center sm:p-0' onClick={backdropClickHandler} onKeyUp={onKeyUpHandler}>
+      <div className='relative m-auto overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:w-full sm:max-w-4xl sm:p-6'>
+        <div className='mb-6 flex justify-between'>
+          <h1 className='mr-4 truncate text-lg font-bold'>{title}</h1>
+          <button onClick={() => onModalClose()} data-testid='Modal-close'>
+            <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' strokeWidth={1.5} stroke='currentColor' className='size-6'>
+              <path strokeLinecap='round' strokeLinejoin='round' d='M6 18L18 6M6 6l12 12' />
+            </svg>
+          </button>
+        </div>
+        <div className='max-h-[65vh] w-full overflow-auto lg:max-h-[70vh]'>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/roadmap/RoadmapColumn.tsx b/components/roadmap/RoadmapColumn.tsx
new file mode 100644
index 000000000000..bfe4438c86cb
--- /dev/null
+++ b/components/roadmap/RoadmapColumn.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
+import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
+
+import Heading from '../typography/Heading';
+import Paragraph from '../typography/Paragraph';
+import RoadmapList from './RoadmapList';
+
+interface IRoadmapColumnProps {
+  title: string;
+  description: string;
+  colorClass: string;
+  items?: any[];
+  childrenCollapsed?: boolean;
+}
+
+/**
+ * @description RoadmapColumn component.
+ * @param {RoadmapColumnProps} props - The props for the RoadmapColumn component.
+ */
+export default function RoadmapColumn({
+  title,
+  description,
+  colorClass,
+  items = [],
+  childrenCollapsed = false
+}: IRoadmapColumnProps): React.ReactElement {
+  return (
+    <div className='mt-8 lg:mt-4'>
+      <div className='p-4 text-center' data-testid='RoadmapColumn-heading'>
+        <Heading level={HeadingLevel.h3} typeStyle={HeadingTypeStyle.smSemibold} >{title}</Heading>
+        <Paragraph typeStyle={ParagraphTypeStyle.md} className='mt-2'>{description}</Paragraph>
+      </div>
+      <RoadmapList
+        items={items}
+        colorClass={colorClass}
+        showConnector={false}
+        childrenCollapsed={childrenCollapsed}
+      />
+    </div>
+  );
+}
diff --git a/components/roadmap/RoadmapItem.tsx b/components/roadmap/RoadmapItem.tsx
new file mode 100644
index 000000000000..f7cdf419adaf
--- /dev/null
+++ b/components/roadmap/RoadmapItem.tsx
@@ -0,0 +1,139 @@
+import { useState } from 'react';
+
+import IconArrowRight from '../icons/ArrowRight';
+import Modal from '../Modal';
+/* eslint-disable import/no-cycle*/
+import RoadmapList from './RoadmapList';
+
+interface IPillProps {
+  item: {
+    done?: boolean;
+    url?: string;
+    description?: string;
+    title: string;
+  };
+  colorClass?: string;
+  isCollapsible?: boolean;
+  isCollapsed?: boolean;
+  onClickCollapse?: () => void;
+}
+
+/**
+ * @description Pill is a component to display a roadmap item.
+ * @param {PillProps} props - The props for the Pill component.
+ */
+function Pill({
+  item,
+  colorClass = '',
+  isCollapsible = false,
+  isCollapsed = false,
+  onClickCollapse = () => {}
+}: IPillProps) {
+  const [isDescriptionVisible, setIsDescriptionVisible] = useState(false);
+
+  return (
+    <>
+      <div className={`w-full shadow-sm ${item.done && 'opacity-50'}`}>
+        <div className='flex flex-1'>
+          <div className={`flex w-4 shrink-0 items-center justify-center rounded-l-md text-sm font-medium ${colorClass}`}></div>
+          <div className={'flex flex-1 items-center justify-between rounded-r-md border-y border-r border-gray-200 bg-white'}>
+            <div className='px-4 py-2 text-sm'>
+              <a href={item.url} rel='noopener noreferrer' onClick={() => !item.url && item.description && setIsDescriptionVisible(true)} className={`block text-left font-medium text-gray-900 ${item.description || item.url ? 'cursor-pointer hover:text-gray-600' : 'cursor-default'}`}>
+                {
+                  item.done && (
+                    <span title='Done!'>
+                      <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' strokeWidth={1.5} stroke='currentColor' className='-mt-0.5 mr-2 inline-block size-6 text-green-600'>
+                        <path strokeLinecap='round' strokeLinejoin='round' d='M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z' />
+                      </svg>
+                    </span>
+                  )
+                }
+                <span>{ item.title }</span>
+              </a>
+            </div>
+            {isCollapsible && (
+              <button className='mr-2' onClick={onClickCollapse} data-testid='RoadmapItem-button'>
+                <IconArrowRight className={`h-4${isCollapsed ? 'rotate-90' : '-rotate-90'}`} />
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+      {
+        isDescriptionVisible && (
+          <Modal title={item.title} onModalClose={() => setIsDescriptionVisible(false)}>
+            <div className='prose'>{item.description}</div>
+          </Modal>
+        )
+      }
+    </>
+  );
+}
+
+export interface IRoadmapItemProps {
+  item: {
+    solutions?: any[];
+    implementations?: any[];
+    done?: boolean;
+    url?: string;
+    description?: string;
+    title: string;
+  };
+  colorClass: string;
+  showConnector?: boolean;
+  collapsed?: boolean;
+}
+
+/**
+ * @description RoadmapItem is a component to display a roadmap item.
+ * @param {RoadmapItemProps} props - The props for the RoadmapItem component.
+ */
+export default function RoadmapItem({
+  item,
+  colorClass,
+  showConnector = true,
+  collapsed = true
+}: IRoadmapItemProps) {
+  const [isCollapsed, setIsCollapsed] = useState(collapsed);
+  const isCollapsible = (item.solutions !== null) || (item.implementations !== null);
+
+  const connectorClasses = 'border-l-2 border-dashed border-gray-300';
+  const classNames = `pt-2 ${showConnector && connectorClasses}`;
+
+  return (
+    <li className={classNames} data-testid='RoadmapItem-list'>
+      <div className='flex'>
+        { showConnector && (
+          <div className='flex flex-col justify-center'>
+            <div className='my-2 ml-0 mr-2 h-1 w-5 border-b-2 border-dashed border-gray-300'></div>
+          </div>
+        )}
+        <Pill
+          item={item}
+          colorClass={colorClass}
+          isCollapsed={isCollapsed}
+          isCollapsible={isCollapsible}
+          onClickCollapse={() => setIsCollapsed(!isCollapsed)}
+        />
+      </div>
+
+      {!isCollapsed && item?.solutions?.length && (
+        <RoadmapList
+          className='ml-2 pt-3'
+          colorClass='bg-blue-400'
+          items={item.solutions}
+          collapsed={false}
+        />
+      )}
+
+      {!isCollapsed && item?.implementations?.length && (
+        <RoadmapList
+          className='ml-9 pt-3'
+          colorClass='bg-black'
+          items={item.implementations}
+          collapsed={false}
+        />
+      )}
+    </li>
+  );
+}
diff --git a/components/roadmap/RoadmapList.tsx b/components/roadmap/RoadmapList.tsx
new file mode 100644
index 000000000000..01d1d67b2ee7
--- /dev/null
+++ b/components/roadmap/RoadmapList.tsx
@@ -0,0 +1,52 @@
+/* eslint-disable import/no-cycle*/
+import RoadmapItem from './RoadmapItem';
+
+interface IRoadmapListProps {
+  colorClass: string;
+  className?: string;
+  items?: {
+    solutions?: any[];
+    implementations?: any[];
+    done?: boolean;
+    url?: string;
+    description?: string;
+    title: string;
+  }[];
+  showConnector?: boolean;
+  collapsed?: boolean;
+  childrenCollapsed?: boolean;
+}
+
+/**
+ * @description RoadmapList is a component to display a list of roadmap items.
+ * @param {RoadmapListProps} props - The props for the RoadmapList component.
+ * @returns {JSX.Element} A JSX.Element representing the RoadmapList component.
+ */
+export default function RoadmapList({
+  colorClass,
+  className = 'mt-3',
+  items = [],
+  showConnector = true,
+  collapsed = false,
+  childrenCollapsed = true
+}: IRoadmapListProps) {
+  return (
+    <>
+    items && items.length && (
+      <ul className={className} data-testid='RoadmapList-list'>
+        { !collapsed && (
+          items.map((item, index) => (
+            <RoadmapItem
+              key={index}
+              item={item}
+              colorClass={colorClass}
+              showConnector={showConnector}
+              collapsed={childrenCollapsed}
+            />
+          ))
+        )}
+      </ul>
+    )
+    </>
+  );
+}

From b171d86575f38d35ba14b97270b6a105508ab566 Mon Sep 17 00:00:00 2001
From: Ansh Goyal <anshgoyal1704@gmail.com>
Date: Wed, 13 Mar 2024 10:09:15 +0530
Subject: [PATCH 5/9] Update components/roadmap/RoadmapList.tsx

---
 components/roadmap/RoadmapList.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/roadmap/RoadmapList.tsx b/components/roadmap/RoadmapList.tsx
index 01d1d67b2ee7..0b1de1631be1 100644
--- a/components/roadmap/RoadmapList.tsx
+++ b/components/roadmap/RoadmapList.tsx
@@ -20,7 +20,6 @@ interface IRoadmapListProps {
 /**
  * @description RoadmapList is a component to display a list of roadmap items.
  * @param {RoadmapListProps} props - The props for the RoadmapList component.
- * @returns {JSX.Element} A JSX.Element representing the RoadmapList component.
  */
 export default function RoadmapList({
   colorClass,

From d863b743f8b4738df30878e993b34dc26cc27318 Mon Sep 17 00:00:00 2001
From: Ansh Goyal <anshgoyal1704@gmail.com>
Date: Wed, 13 Mar 2024 23:00:57 +0530
Subject: [PATCH 6/9] Update components/Modal.tsx

Co-authored-by: Akshat Nema <76521428+akshatnema@users.noreply.github.com>
---
 components/Modal.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/Modal.tsx b/components/Modal.tsx
index eb1a3dd34e4d..9c20971fc7ec 100644
--- a/components/Modal.tsx
+++ b/components/Modal.tsx
@@ -1,10 +1,10 @@
 import { useEffect, useRef } from 'react';
 
 interface IModalProps {
-    title: string;
-    children: React.ReactNode;
-    onModalClose?: () => void;
-    }
+  title: string;
+  children: React.ReactNode;
+  onModalClose?: () => void;
+}
 
 /**
  * @description Modal component.

From 77936b722ebd29ea2e5c76e8c9a3a63b6eebdc0a Mon Sep 17 00:00:00 2001
From: Ansh Goyal <anshgoyal1704@gmail.com>
Date: Wed, 13 Mar 2024 23:22:58 +0530
Subject: [PATCH 7/9] fix jsdoc comments

---
 components/roadmap/RoadmapColumn.tsx |  6 +++++-
 components/roadmap/RoadmapItem.tsx   | 19 +++++++++++++++++--
 components/roadmap/RoadmapList.tsx   |  7 ++++++-
 components/slack/Message.tsx         | 10 +++++-----
 components/slack/index.tsx           | 10 +++++-----
 5 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/components/roadmap/RoadmapColumn.tsx b/components/roadmap/RoadmapColumn.tsx
index bfe4438c86cb..9d879182618c 100644
--- a/components/roadmap/RoadmapColumn.tsx
+++ b/components/roadmap/RoadmapColumn.tsx
@@ -17,7 +17,11 @@ interface IRoadmapColumnProps {
 
 /**
  * @description RoadmapColumn component.
- * @param {RoadmapColumnProps} props - The props for the RoadmapColumn component.
+ * @param {string} props.title - The title of the column.
+ * @param {string} props.description - The description of the column.
+ * @param {string} props.colorClass - The color class for styling.
+ * @param {array} props.items - The array of items.
+ * @param {boolean} props.childrenCollapsed - Whether children items are collapsed.
  */
 export default function RoadmapColumn({
   title,
diff --git a/components/roadmap/RoadmapItem.tsx b/components/roadmap/RoadmapItem.tsx
index f7cdf419adaf..02f0aa7ba169 100644
--- a/components/roadmap/RoadmapItem.tsx
+++ b/components/roadmap/RoadmapItem.tsx
@@ -20,7 +20,15 @@ interface IPillProps {
 
 /**
  * @description Pill is a component to display a roadmap item.
- * @param {PillProps} props - The props for the Pill component.
+ * @param {object} props.item - The roadmap item.
+ * @param {boolean} props.item.done - Whether the item is done.
+ * @param {string} props.item.url - The URL associated with the item.
+ * @param {string} props.item.description - The description of the item.
+ * @param {string} props.item.title - The title of the item.
+ * @param {string} props.colorClass - The color class for styling.
+ * @param {boolean} props.isCollapsible - Whether the item is collapsible.
+ * @param {boolean} props.isCollapsed - Whether the item is collapsed.
+ * @param {function} props.onClickCollapse - Function to handle click on collapse.
  */
 function Pill({
   item,
@@ -86,7 +94,14 @@ export interface IRoadmapItemProps {
 
 /**
  * @description RoadmapItem is a component to display a roadmap item.
- * @param {RoadmapItemProps} props - The props for the RoadmapItem component.
+ * @param {object} props.item - The roadmap item.
+ * @param {boolean} props.item.done - Whether the item is done.
+ * @param {string} props.item.url - The URL associated with the item.
+ * @param {string} props.item.description - The description of the item.
+ * @param {string} props.item.title - The title of the item.
+ * @param {string} props.colorClass - The color class for styling.
+ * @param {boolean} props.showConnector - Whether to show the connector.
+ * @param {boolean} props.collapsed - Whether the list is collapsed.
  */
 export default function RoadmapItem({
   item,
diff --git a/components/roadmap/RoadmapList.tsx b/components/roadmap/RoadmapList.tsx
index 0b1de1631be1..08d4f478c7fc 100644
--- a/components/roadmap/RoadmapList.tsx
+++ b/components/roadmap/RoadmapList.tsx
@@ -19,7 +19,12 @@ interface IRoadmapListProps {
 
 /**
  * @description RoadmapList is a component to display a list of roadmap items.
- * @param {RoadmapListProps} props - The props for the RoadmapList component.
+ * @param {string} props.colorClass - The color class for styling.
+ * @param {string} props.className='mt-3' - The optional CSS class name.
+ * @param {object[]} props.items=[] - The array of roadmap items.
+ * @param {boolean} props.showConnector=true - Whether to show the connector.
+ * @param {boolean} props.collapsed=false - Whether the list is collapsed.
+ * @param {boolean} props.childrenCollapsed=true - Whether children items are collapsed.
  */
 export default function RoadmapList({
   colorClass,
diff --git a/components/slack/Message.tsx b/components/slack/Message.tsx
index 49a3cdc56688..26b0014db16b 100644
--- a/components/slack/Message.tsx
+++ b/components/slack/Message.tsx
@@ -17,16 +17,16 @@ interface ISlackMessageProps {
 /**
    * @description Component to render a Slack message.
    * @param {Object} props - The component props.
-   * @param {string} [props.className=''] - Additional CSS classes for styling.
+   * @param {string} props.className - Additional CSS classes for styling.
    * @param {string} props.avatar - URL of the user's avatar.
    * @param {string} props.name - Name of the user.
    * @param {React.ReactNode} props.text - Text of the message.
-   * @param {Object[]} [props.reactions=[]] - Array of reaction objects.
+   * @param {Object[]} props.reactions - Array of reaction objects.
    * @param {string} props.reactions[].emoji - Emoji representing the reaction.
-   * @param {string} [props.reactions[].icon] - URL of the reaction icon.
-   * @param {string} [props.reactions[].name] - Name of the reaction icon.
+   * @param {string} props.reactions[].icon - URL of the reaction icon.
+   * @param {string} props.reactions[].name - Name of the reaction icon.
    * @param {number} props.reactions[].count - Number of reactions.
-   * @param {boolean} [props.reactions[].mine] - Indicates if the reaction is from the current user.
+   * @param {boolean} props.reactions[].mine - Indicates if the reaction is from the current user.
    */
 export default function SlackMessage({
   className = '',
diff --git a/components/slack/index.tsx b/components/slack/index.tsx
index 9a3355444c5a..3c49b2eee58d 100644
--- a/components/slack/index.tsx
+++ b/components/slack/index.tsx
@@ -6,7 +6,7 @@ interface SlackProps {
 
 /**
  * @description Slack component for displaying Slack-like UI.
- * @param {SlackProps} props - Slack component props.
+ * @param {string} props.className - Additional CSS classes for styling.
  */
 export default function Slack({
   className = ''
@@ -61,9 +61,9 @@ export default function Slack({
           avatar='/img/homepage/eve-and-chan.webp'
           name='Eve & Chan'
           text={
-            <>
+            <span>
               Hey folks! 👋
-            </>
+            </span>
           }
           reactions={[
             { emoji: '👋', count: 21, mine: true }
@@ -73,9 +73,9 @@ export default function Slack({
           avatar='/img/avatars/fmvilas.webp'
           name='fmvilas'
           text={
-            <>
+            <span>
               Hey Eve & Chan! Welcome to the AsyncAPI workspace!
-            </>
+            </span>
           }
         />
       </div>

From 962075dcffab6e60c804fe4d2b43996a8d1a7d74 Mon Sep 17 00:00:00 2001
From: Ansh Goyal <anshgoyal1704@gmail.com>
Date: Wed, 13 Mar 2024 23:24:38 +0530
Subject: [PATCH 8/9] fix jsdoc comments

---
 components/Modal.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/Modal.tsx b/components/Modal.tsx
index 9c20971fc7ec..396c5daa48d1 100644
--- a/components/Modal.tsx
+++ b/components/Modal.tsx
@@ -8,7 +8,9 @@ interface IModalProps {
 
 /**
  * @description Modal component.
- * @param {ModalProps} props - The props for the Modal component.
+ * @param {string} props.title - The title of the modal.
+ * @param {React.ReactNode} props.children - The content of the modal.
+ * @param {function} props.onModalClose=()=>{} - Function to handle modal close event.
  */
 export default function Modal({
   title,

From d3675b4ca71897f87949c96600dada234e63a245 Mon Sep 17 00:00:00 2001
From: Ansh Goyal <anshgoyal1704@gmail.com>
Date: Thu, 14 Mar 2024 15:18:56 +0000
Subject: [PATCH 9/9] fix code review suggestions

---
 components/logos/Adidas.tsx        |   1 +
 components/logos/Axway.tsx         |   1 +
 components/logos/SAP.tsx           |   1 +
 components/logos/Salesforce.tsx    |   1 +
 components/logos/Slack.tsx         |   1 +
 components/roadmap/RoadmapItem.tsx | 102 ++--------------------------
 components/roadmap/RoadmapList.tsx |  10 +--
 components/roadmap/RoadmapPill.tsx | 104 +++++++++++++++++++++++++++++
 8 files changed, 121 insertions(+), 100 deletions(-)
 create mode 100644 components/roadmap/RoadmapPill.tsx

diff --git a/components/logos/Adidas.tsx b/components/logos/Adidas.tsx
index 2664c8b4cd1b..f9e8fd285a91 100644
--- a/components/logos/Adidas.tsx
+++ b/components/logos/Adidas.tsx
@@ -1,5 +1,6 @@
 /**
  * @description Logo for Adidas
+ * @param {string} className - used to style the svg
  */
 export default function AdidasLogo({ className }: { className?: string }) {
   return (
diff --git a/components/logos/Axway.tsx b/components/logos/Axway.tsx
index 95e2b56723ea..8ef1650d74d1 100644
--- a/components/logos/Axway.tsx
+++ b/components/logos/Axway.tsx
@@ -1,5 +1,6 @@
 /**
  * @description Logo for Axway
+ * @param {string} className - used to style the svg
  */
 export default function AxwayLogo({ className }: { className?: string }) {
   return (
diff --git a/components/logos/SAP.tsx b/components/logos/SAP.tsx
index 87201608daf9..897a325d09a8 100644
--- a/components/logos/SAP.tsx
+++ b/components/logos/SAP.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 
 /**
  * @description Logo for SAP
+ * @param {string} className - used to style the svg
  */
 export default function SapLogo({ className }: { className?: string }) {
   const [isHovered, setIsHovered] = useState(false);
diff --git a/components/logos/Salesforce.tsx b/components/logos/Salesforce.tsx
index b98d469ddf28..e75247a186c7 100644
--- a/components/logos/Salesforce.tsx
+++ b/components/logos/Salesforce.tsx
@@ -1,5 +1,6 @@
 /**
  * @description Logo for Salesforce
+ * @param {string} className - used to style the svg
  */
 export default function SalesforceLogo({ className }: { className?: string }) {
   return (
diff --git a/components/logos/Slack.tsx b/components/logos/Slack.tsx
index 864acb333f97..603d817a774d 100644
--- a/components/logos/Slack.tsx
+++ b/components/logos/Slack.tsx
@@ -1,5 +1,6 @@
 /**
  * @description Logo for Slack
+ * @param {string} className - used to style the svg
  */
 export default function SlackLogo({ className }: { className?: string }) {
   return (
diff --git a/components/roadmap/RoadmapItem.tsx b/components/roadmap/RoadmapItem.tsx
index 02f0aa7ba169..f53cf850473a 100644
--- a/components/roadmap/RoadmapItem.tsx
+++ b/components/roadmap/RoadmapItem.tsx
@@ -1,82 +1,9 @@
 import { useState } from 'react';
 
-import IconArrowRight from '../icons/ArrowRight';
-import Modal from '../Modal';
+// Since a roadmap item can contain nested roadmap lists, we need to import RoadmapList to display them.
 /* eslint-disable import/no-cycle*/
 import RoadmapList from './RoadmapList';
-
-interface IPillProps {
-  item: {
-    done?: boolean;
-    url?: string;
-    description?: string;
-    title: string;
-  };
-  colorClass?: string;
-  isCollapsible?: boolean;
-  isCollapsed?: boolean;
-  onClickCollapse?: () => void;
-}
-
-/**
- * @description Pill is a component to display a roadmap item.
- * @param {object} props.item - The roadmap item.
- * @param {boolean} props.item.done - Whether the item is done.
- * @param {string} props.item.url - The URL associated with the item.
- * @param {string} props.item.description - The description of the item.
- * @param {string} props.item.title - The title of the item.
- * @param {string} props.colorClass - The color class for styling.
- * @param {boolean} props.isCollapsible - Whether the item is collapsible.
- * @param {boolean} props.isCollapsed - Whether the item is collapsed.
- * @param {function} props.onClickCollapse - Function to handle click on collapse.
- */
-function Pill({
-  item,
-  colorClass = '',
-  isCollapsible = false,
-  isCollapsed = false,
-  onClickCollapse = () => {}
-}: IPillProps) {
-  const [isDescriptionVisible, setIsDescriptionVisible] = useState(false);
-
-  return (
-    <>
-      <div className={`w-full shadow-sm ${item.done && 'opacity-50'}`}>
-        <div className='flex flex-1'>
-          <div className={`flex w-4 shrink-0 items-center justify-center rounded-l-md text-sm font-medium ${colorClass}`}></div>
-          <div className={'flex flex-1 items-center justify-between rounded-r-md border-y border-r border-gray-200 bg-white'}>
-            <div className='px-4 py-2 text-sm'>
-              <a href={item.url} rel='noopener noreferrer' onClick={() => !item.url && item.description && setIsDescriptionVisible(true)} className={`block text-left font-medium text-gray-900 ${item.description || item.url ? 'cursor-pointer hover:text-gray-600' : 'cursor-default'}`}>
-                {
-                  item.done && (
-                    <span title='Done!'>
-                      <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' strokeWidth={1.5} stroke='currentColor' className='-mt-0.5 mr-2 inline-block size-6 text-green-600'>
-                        <path strokeLinecap='round' strokeLinejoin='round' d='M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z' />
-                      </svg>
-                    </span>
-                  )
-                }
-                <span>{ item.title }</span>
-              </a>
-            </div>
-            {isCollapsible && (
-              <button className='mr-2' onClick={onClickCollapse} data-testid='RoadmapItem-button'>
-                <IconArrowRight className={`h-4${isCollapsed ? 'rotate-90' : '-rotate-90'}`} />
-              </button>
-            )}
-          </div>
-        </div>
-      </div>
-      {
-        isDescriptionVisible && (
-          <Modal title={item.title} onModalClose={() => setIsDescriptionVisible(false)}>
-            <div className='prose'>{item.description}</div>
-          </Modal>
-        )
-      }
-    </>
-  );
-}
+import Pill from './RoadmapPill';
 
 export interface IRoadmapItemProps {
   item: {
@@ -103,14 +30,9 @@ export interface IRoadmapItemProps {
  * @param {boolean} props.showConnector - Whether to show the connector.
  * @param {boolean} props.collapsed - Whether the list is collapsed.
  */
-export default function RoadmapItem({
-  item,
-  colorClass,
-  showConnector = true,
-  collapsed = true
-}: IRoadmapItemProps) {
+export default function RoadmapItem({ item, colorClass, showConnector = true, collapsed = true }: IRoadmapItemProps) {
   const [isCollapsed, setIsCollapsed] = useState(collapsed);
-  const isCollapsible = (item.solutions !== null) || (item.implementations !== null);
+  const isCollapsible = item.solutions !== null || item.implementations !== null;
 
   const connectorClasses = 'border-l-2 border-dashed border-gray-300';
   const classNames = `pt-2 ${showConnector && connectorClasses}`;
@@ -118,7 +40,7 @@ export default function RoadmapItem({
   return (
     <li className={classNames} data-testid='RoadmapItem-list'>
       <div className='flex'>
-        { showConnector && (
+        {showConnector && (
           <div className='flex flex-col justify-center'>
             <div className='my-2 ml-0 mr-2 h-1 w-5 border-b-2 border-dashed border-gray-300'></div>
           </div>
@@ -133,21 +55,11 @@ export default function RoadmapItem({
       </div>
 
       {!isCollapsed && item?.solutions?.length && (
-        <RoadmapList
-          className='ml-2 pt-3'
-          colorClass='bg-blue-400'
-          items={item.solutions}
-          collapsed={false}
-        />
+        <RoadmapList className='ml-2 pt-3' colorClass='bg-blue-400' items={item.solutions} collapsed={false} />
       )}
 
       {!isCollapsed && item?.implementations?.length && (
-        <RoadmapList
-          className='ml-9 pt-3'
-          colorClass='bg-black'
-          items={item.implementations}
-          collapsed={false}
-        />
+        <RoadmapList className='ml-9 pt-3' colorClass='bg-black' items={item.implementations} collapsed={false} />
       )}
     </li>
   );
diff --git a/components/roadmap/RoadmapList.tsx b/components/roadmap/RoadmapList.tsx
index 08d4f478c7fc..fbe9b6f4ca5a 100644
--- a/components/roadmap/RoadmapList.tsx
+++ b/components/roadmap/RoadmapList.tsx
@@ -1,3 +1,4 @@
+// Since a RoadmapList may contain other RoadmapItems, we need to import RoadmapItem to display them.
 /* eslint-disable import/no-cycle*/
 import RoadmapItem from './RoadmapItem';
 
@@ -36,9 +37,9 @@ export default function RoadmapList({
 }: IRoadmapListProps) {
   return (
     <>
-    items && items.length && (
+      items && items.length && (
       <ul className={className} data-testid='RoadmapList-list'>
-        { !collapsed && (
+        {!collapsed &&
           items.map((item, index) => (
             <RoadmapItem
               key={index}
@@ -47,10 +48,9 @@ export default function RoadmapList({
               showConnector={showConnector}
               collapsed={childrenCollapsed}
             />
-          ))
-        )}
+          ))}
       </ul>
-    )
+      )
     </>
   );
 }
diff --git a/components/roadmap/RoadmapPill.tsx b/components/roadmap/RoadmapPill.tsx
new file mode 100644
index 000000000000..322fbaed627f
--- /dev/null
+++ b/components/roadmap/RoadmapPill.tsx
@@ -0,0 +1,104 @@
+import { useState } from 'react';
+
+import IconArrowRight from '../icons/ArrowRight';
+import Modal from '../Modal';
+
+/**
+ * @description Icon for Done (Tick)
+ */
+function DoneIcon() {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      fill='none'
+      viewBox='0 0 24 24'
+      strokeWidth={1.5}
+      stroke='currentColor'
+      className='-mt-0.5 mr-2 inline-block size-6 text-green-600'
+    >
+      <path
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        d='M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
+      />
+    </svg>
+  );
+}
+
+interface IPillProps {
+  item: {
+    done?: boolean;
+    url?: string;
+    description?: string;
+    title: string;
+  };
+  colorClass?: string;
+  isCollapsible?: boolean;
+  isCollapsed?: boolean;
+  onClickCollapse?: () => void;
+}
+
+/**
+ * @description Pill is a component to display a roadmap item.
+ * @param {object} props.item - The roadmap item.
+ * @param {boolean} props.item.done - Whether the item is done.
+ * @param {string} props.item.url - The URL associated with the item.
+ * @param {string} props.item.description - The description of the item.
+ * @param {string} props.item.title - The title of the item.
+ * @param {string} props.colorClass - The color class for styling.
+ * @param {boolean} props.isCollapsible - Whether the item is collapsible.
+ * @param {boolean} props.isCollapsed - Whether the item is collapsed.
+ * @param {function} props.onClickCollapse - Function to handle click on collapse.
+ */
+export default function Pill({
+  item,
+  colorClass = '',
+  isCollapsible = false,
+  isCollapsed = false,
+  onClickCollapse = () => {}
+}: IPillProps) {
+  const [isDescriptionVisible, setIsDescriptionVisible] = useState(false);
+
+  return (
+    <>
+      <div className={`w-full shadow-sm ${item.done && 'opacity-50'}`}>
+        <div className='flex flex-1'>
+          <div
+            className={`flex w-4 shrink-0 items-center justify-center rounded-l-md text-sm font-medium ${colorClass}`}
+          ></div>
+          <div
+            className={
+              'flex flex-1 items-center justify-between rounded-r-md border-y border-r border-gray-200 bg-white'
+            }
+          >
+            <div className='px-4 py-2 text-sm'>
+              <a
+                href={item.url}
+                rel='noopener noreferrer'
+                onClick={() => !item.url && item.description && setIsDescriptionVisible(true)}
+                className={`block text-left font-medium text-gray-900 ${item.description || item.url ? 'cursor-pointer hover:text-gray-600' : 'cursor-default'}`}
+              >
+                {item.done && (
+                  <span title='Done!'>
+                    <DoneIcon />
+                  </span>
+                )}
+                <span>{item.title}</span>
+              </a>
+            </div>
+            {isCollapsible && (
+              <button className='mr-2' onClick={onClickCollapse} data-testid='RoadmapItem-button'>
+                <IconArrowRight className={`h-4${isCollapsed ? 'rotate-90' : '-rotate-90'}`} />
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+      {isDescriptionVisible && (
+        <Modal title={item.title} onModalClose={() => setIsDescriptionVisible(false)}>
+          <div className='prose'>{item.description}</div>
+        </Modal>
+      )}
+    </>
+  );
+}