chore: added missing animation of header.

public/robots.txt

@@ -25,5 +25,3 @@ Disallow: /hy/all-about-user-stories/
 Disallow: /hy/client-dev-company-workflow-birds-eye-view/
 Disallow: /hy/career-path-of-a-manager-and-a-few-universal-tips/
 Disallow: /hy/overengineering_and_demo_readiness/
-
-Sitemap: https://staging-strapi.keepsimple.io/sitemap/index.xml

src/api/uxcat/force-stop.ts

@@ -1,5 +1,7 @@
+import { UxCatRoute } from '@api/uxcat/configs';
+
 export const getForceStop = async token => {
-  const url = `https://uxcat.keepsimple.io/tests/force-stop`;
+  const url = `${UxCatRoute}tests/force-stop`;
 
   try {
     const response = await fetch(url, {

src/api/uxcat/getUser.ts

@@ -1,5 +1,7 @@
+import { UxCatRoute } from '@api/uxcat/configs';
+
 export const getPublicUserInfo = async (username: string | string[]) => {
-  const url = `https://uxcat.keepsimple.io/users/${username}`;
+  const url = `${UxCatRoute}users/${username}`;
 
   try {
     const response = await fetch(url, {

src/components/CustomModal/CustomModal.tsx

@@ -14,7 +14,7 @@ type ContentTypes = 'contactUs' | 'addQuestion';
 type CustomModalProps = {
   isVisible: boolean;
   contentType: ContentTypes;
-  tags: TagType[];
+  tags?: TagType[];
   onClose: () => void;
 };
 

src/components/NewUpdateModal/NewUpdateModal.module.scss

@@ -1,20 +1,25 @@
 .modalBody {
   padding: 0 0 22px 0 !important;
+
   .img {
+    object-fit: cover;
     position: relative;
     width: 100%;
   }
 }
+
 .content {
   text-align: center;
   padding: 8px 30px 0 30px;
 }
+
 .instaIcon {
   position: absolute;
   right: 34%;
   top: 21%;
   cursor: pointer;
 }
+
 .closeBtn {
   border-radius: 0;
   background-color: #000;

src/components/NewUpdateModal/NewUpdateModal.tsx

@@ -11,6 +11,9 @@ import type { NewUpdateModalProps } from './NewUpdateModal.types';
 import styles from './NewUpdateModal.module.scss';
 
 const NewUpdateModal: FC<NewUpdateModalProps> = ({ data, onClose }) => {
+  const closeText = data?.['Close button text'];
+  const socialLink = data?.['Social media link'];
+
   return (
     <Modal
       onClick={onClose}
@@ -21,13 +24,13 @@ const NewUpdateModal: FC<NewUpdateModalProps> = ({ data, onClose }) => {
     >
       <div>
         <Image
-          src={`${process.env.NEXT_PUBLIC_STRAPI}${data?.image?.data.attributes.url}`}
+          src={`${process.env.NEXT_PUBLIC_STRAPI}${data?.image?.data?.attributes?.url}`}
           width={481}
           height={121}
           className={styles.img}
           alt={'New Update'}
         />
-        <Link href={data?.socialMediaLink} target={'_blank'}>
+        <Link href={socialLink} target={'_blank'}>
           <Image
             src={'/assets/insta-icon.svg'}
             alt={'Insta Icon'}
@@ -38,12 +41,22 @@ const NewUpdateModal: FC<NewUpdateModalProps> = ({ data, onClose }) => {
         </Link>
       </div>
       <div className={styles.content}>
-        <ReactMarkdown>{data?.description}</ReactMarkdown>
-        <Button
-          label={data?.buttonText}
-          onClick={onClose}
-          className={styles['closeBtn']}
-        />
+        <ReactMarkdown
+          components={{
+            a: ({ node, ...props }) => (
+              <a {...props} target="_blank" rel="noopener noreferrer" />
+            ),
+          }}
+        >
+          {data.description}
+        </ReactMarkdown>
+        <div className={styles.btnWrapper}>
+          <Button
+            label={closeText}
+            onClick={onClose}
+            className={styles['closeBtn']}
+          />
+        </div>
       </div>
     </Modal>
   );

src/components/ToolFooter/ToolFooter.tsx

@@ -9,7 +9,6 @@ import CustomModal from '@components/CustomModal';
 import toolFooterData from '@data/toolFooter';
 
 import type { TRouter } from '@local-types/global';
-import type { TagType } from '@local-types/data';
 
 import styles from './ToolFooter.module.scss';
 
@@ -22,10 +21,9 @@ const releaseIndexes = {
 
 type TToolFooter = {
   page: 'uxcore' | 'uxcg' | 'uxcp' | 'api';
-  tags: TagType[];
 };
 
-const ToolFooter: FC<TToolFooter> = ({ page, tags }) => {
+const ToolFooter: FC<TToolFooter> = ({ page }) => {
   const router = useRouter();
   const { locale } = router as TRouter;
   const { release, contactUs, contributors, tooltipTxt } =
@@ -84,7 +82,6 @@ const ToolFooter: FC<TToolFooter> = ({ page, tags }) => {
       <CustomModal
         isVisible={!!openedModal}
         contentType={openedModal}
-        tags={tags}
         onClose={() => toggleModal()}
       />
     </Fragment>

src/components/ToolHeader/ToolHeader.module.scss

@@ -37,17 +37,73 @@ $headerHeight: 46px;
       display: flex;
       margin-left: 50px;
       align-items: center;
+      position: relative;
+
+      width: -webkit-fill-available;
 
       .Description {
         padding-top: 3px;
       }
+
       .openLink {
         padding-left: 6px;
       }
     }
+
+    .Links.is-uxcore {
+      --pill-w: 96px;
+    }
+
+    .Links.is-uxcg {
+      --pill-w: 79px;
+    }
+
+    .Links.is-uxcp {
+      --pill-w: 101px;
+    }
+
+    .Links.is-uxcat {
+      --pill-w: 157px;
+    }
+
+    .Links.is-uxcore .Indicator {
+      transform: translateX(calc((96px + 8px) * 0));
+      color: #fff;
+    }
+
+    .Links.is-uxcg .Indicator {
+      transform: translateX(calc((94px + 8px) * 1));
+      color: #fff;
+    }
+
+    .Links.is-uxcp .Indicator {
+      transform: translateX(calc((85px + 8px) * 2));
+      color: #fff;
+    }
+
+    .Links.is-uxcat .Indicator {
+      transform: translateX(calc((89px + 8px) * 3));
+      color: #fff;
+    }
+  }
+
+  .Indicator {
+    position: absolute;
+    top: 6px;
+    bottom: 4px;
+    left: 0;
+    width: var(--pill-w, 120px);
+    background-color: #000000d9;
+    border-radius: 4px;
+    transform: translateX(0);
+    transition: transform 450ms cubic-bezier(0.22, 0.95, 0.35, 1);
+    will-change: transform;
+    pointer-events: none;
+    height: 33px;
   }
 
   .MenuItem {
+    position: relative;
     font-size: 14px;
     display: flex;
     cursor: pointer;
@@ -86,10 +142,27 @@ $headerHeight: 46px;
 
     &.Active {
       color: #fafafa;
+      z-index: 2;
+
+      & svg path {
+        z-index: 1;
+        fill: #fafafa;
+      }
+
+      &:hover {
+        background-color: unset;
+      }
+    }
+
+    &.ActivePodcast,
+    &.ActiveProjects {
       background-color: #000000d9;
       border-radius: 4px;
+      color: #fff;
+
       & svg path {
-        fill: #fafafa;
+        z-index: 1;
+        fill: #fff;
       }
     }
   }
@@ -348,6 +421,7 @@ $headerHeight: 46px;
 
     & .PageSwitcherContainer {
       padding: 16px 16px 0;
+
       .PageSwitcherItem {
         box-sizing: border-box;
         width: -webkit-fill-available;