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;

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;

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;

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;

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;

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;

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;

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;