feat: migrate logos, slack and roadmap components to typescript

components/Modal.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useRef } from 'react';
+
+interface IModalProps {
+  title: string;
+  children: React.ReactNode;
+  onModalClose?: () => void;
+}
+
+/**
+ * @description 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,
+  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>
+  );
+}

components/logos/Adidas.tsx

@@ -0,0 +1,60 @@
+/**
+ * @description Logo for Adidas
+ * @param {string} className - used to style the svg
+ */
+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.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'
+        />
+        <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>
+  );
+}

components/logos/Axway.tsx

@@ -0,0 +1,45 @@
+/**
+ * @description Logo for Axway
+ * @param {string} className - used to style the svg
+ */
+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>
+  );
+}

components/logos/SAP.tsx

@@ -0,0 +1,31 @@
+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);
+
+  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 ? '#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.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>
+  );
+}