AW-493-additional-purchases

pages

messages/en.json

@@ -215,5 +215,71 @@
   },
   "ActionFieldsForm": {
     "required_field": "This field is required"
+  },
+  "AdditionalPurchases": {
+    "caution": {
+      "title": "Caution!",
+      "description": "To prevent double charges please don`t close the page and don`t go back."
+    },
+    "add-consultant": {
+      "title": "More for you",
+      "exclusive_offer": "Exclusive offer recommended for you to achieve your goals faster",
+      "your_unique_consultation": "Your unique individual consultation",
+      "30-minute": "30-minute private consultation with an expert",
+      "unlock_profound": "Unlock profound insights into your personality, relationships, career trajectory, and life's pivotal moments through astrology, empowering you to make informed decisions and achieve greater fulfillment.",
+      "one_time_price_offer": "One time price offer: <price></price>",
+      "choose_from": "Choose from 80+ experts astrologers.",
+      "original_price": "Original price: {oldPrice} ",
+      "save": "Economisez 50",
+      "get_my_consultation": "Get my consultation",
+      "skip_this_offer": "Skip this offer"
+    },
+    "add-guides": {
+      "title": "Choose your sign-up offer 🔥",
+      "subtitle": "Available only now",
+      "description": "*You will be charged for the add-on services or offers selected at the time of purchase. This is a non-recuring payment.",
+      "button": "Get my copy",
+
+      "products": {
+        "main_ultra_pack": {
+          "title": "ULTRA PACK",
+          "discount": "{discount}% OFF",
+          "subtitle": "(3 in 1 + 2 secret bonus reading)",
+          "price": "<price></price> ( regular price <oldPrice></oldPrice> )",
+          "emoji": "star_struck.webp"
+        },
+        "main_numerology_analysis": {
+          "title": "NUMEROLOGY ANALYSIS",
+          "discount": "{discount}% OFF",
+          "price": "<price></price> ( was <oldPrice></oldPrice> )",
+          "emoji": "input_numbers.webp"
+        },
+        "main_tarot_reading": {
+          "title": "TAROT READING",
+          "discount": "{discount}% OFF",
+          "price": "<price></price> ( was <oldPrice></oldPrice> )",
+          "emoji": "sunset.webp"
+        },
+        "main_palmistry_guide": {
+          "title": "PALMISTRY GUIDE",
+          "discount": "{discount}% OFF",
+          "price": "<price></price> ( was <oldPrice></oldPrice> )",
+          "emoji": "rised_hand.webp"
+        },
+        "main_money_reading": {
+          "title": "MONEY READING",
+          "discount": "{discount}% OFF",
+          "price": "<price></price> ( was <oldPrice></oldPrice> )",
+          "emoji": "money.png"
+        },
+        "main_skip_offer": {
+          "title": "SKIP OFFER",
+          "discount": "{discount}% OFF",
+          "price": "<price></price> ( was <oldPrice></oldPrice> )",
+          "subtitle": "You are missing out on both readings",
+          "emoji": "rised_hand.webp"
+        }
+      }
+    }
   }
 }

public/check-mark-1.svg

@@ -0,0 +1,7 @@
+<svg width="14" height="12" viewBox="0 0 60 46" fill="#066FDF"
+    style="display: block; width: 14px; height: 12px; color: rgb(106, 58, 162);" xmlns="http://www.w3.org/2000/svg"
+    class="sc-424b5a3f-12 knbDkO">
+    <path
+        d="M19.5009 35.9989L5.5009 21.9989L0.834229 26.6655L19.5009 45.3322L59.5009 5.33219L54.8342 0.665527L19.5009 35.9989Z">
+    </path>
+</svg>

src/app/[locale]/(additional-purchases)/add-consultant/page.module.scss

@@ -0,0 +1,14 @@
+.title.title {
+  color: #086de5;
+  margin-top: 24px;
+  margin-bottom: 6px;
+  line-height: 150%;
+}
+
+.exclusiveOffer.exclusiveOffer {
+  width: 100%;
+  background-color: #e7f5fd;
+  padding: 8px 16px;
+  border-radius: 8px;
+  line-height: 125%;
+}

src/app/[locale]/(additional-purchases)/add-consultant/page.tsx

@@ -0,0 +1,33 @@
+import { useTranslations } from "next-intl";
+
+import {
+  AddConsultantButton,
+  Caution,
+  ConsultationTable,
+} from "@/components/domains/additional-purchases";
+import { Typography } from "@/components/ui";
+
+import styles from "./page.module.scss";
+
+export default function AddConsultant() {
+  const t = useTranslations("AdditionalPurchases.add-consultant");
+
+  return (
+    <>
+      <Caution />
+      <Typography as="h2" size="xl" weight="semiBold" className={styles.title}>
+        {t("title")}
+      </Typography>
+      <Typography
+        as="p"
+        size="sm"
+        color="black"
+        className={styles.exclusiveOffer}
+      >
+        {t("exclusive_offer")}
+      </Typography>
+      <ConsultationTable />
+      <AddConsultantButton />
+    </>
+  );
+}

src/app/[locale]/(additional-purchases)/add-guides/page.module.scss

@@ -0,0 +1,18 @@
+.title {
+  font-size: 18px;
+  line-height: 135%;
+  margin-top: 16px;
+}
+
+.subtitle {
+  color: #066fdf;
+  margin-block: 8px;
+  line-height: 135%;
+}
+
+.description {
+  display: block;
+  margin: 20px auto;
+  font-size: 10px;
+  line-height: 125%;
+}

src/app/[locale]/(additional-purchases)/add-guides/page.tsx

@@ -0,0 +1,70 @@
+import { useTranslations } from "next-intl";
+
+import {
+  AddGuidesButton,
+  Caution,
+  IOffer,
+  Offers,
+} from "@/components/domains/additional-purchases";
+import { Typography } from "@/components/ui";
+
+import styles from "./page.module.scss";
+
+const PRODUCTS: (Omit<IOffer, "productKey"> & { key: string })[] = [
+  {
+    id: "67ae7c05b29427c9ae695039",
+    key: "main.ultra.pack",
+    type: "one_time",
+    price: 4999,
+    oldPrice: 2499.5,
+  },
+  {
+    id: "67ae7c05b29427c9ae69503c",
+    key: "main.numerology.analysis",
+    type: "one_time",
+    price: 1499,
+    oldPrice: 749.5,
+  },
+  {
+    id: "67ae7c05b29427c9ae69503e",
+    key: "main.tarot.reading",
+    type: "one_time",
+    price: 1999,
+    oldPrice: 999.5,
+  },
+  {
+    id: "6839ece6960824e7bba3e7bb",
+    key: "main.money.reading",
+    type: "one_time",
+    price: 1999,
+    oldPrice: 999.5,
+  },
+  {
+    id: "main_skip_offer",
+    key: "main.skip.offer",
+    type: "one_time",
+    price: 0,
+    oldPrice: 0,
+  },
+];
+
+export default function AddGuides() {
+  const t = useTranslations("AdditionalPurchases.add-guides");
+
+  return (
+    <>
+      <Caution />
+      <Typography as="h2" size="xl" weight="semiBold" className={styles.title}>
+        {t("title")}
+      </Typography>
+      <Typography as="h3" size="sm" className={styles.subtitle}>
+        {t("subtitle")}
+      </Typography>
+      <Offers products={PRODUCTS} />
+      <Typography align="left" color="secondary" className={styles.description}>
+        {t("description")}
+      </Typography>
+      <AddGuidesButton />
+    </>
+  );
+}

src/app/[locale]/(additional-purchases)/layout.module.scss

@@ -0,0 +1,7 @@
+.layout {
+  position: relative;
+  padding: 24px;
+  padding-bottom: 120px;
+  min-height: 100dvh;
+  height: fit-content;
+}

src/app/[locale]/(additional-purchases)/layout.tsx

@@ -0,0 +1,9 @@
+import styles from "./layout.module.scss";
+
+export default function AdditionalPurchasesLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <section className={styles.layout}>{children}</section>;
+}

src/components/domains/additional-purchases/AddConsultantButton/AddConsultantButton.module.scss

@@ -0,0 +1,26 @@
+.container.container {
+  display: flex;
+  flex-direction: column;
+  -webkit-box-align: center;
+  align-items: center;
+  width: 100%;
+  height: fit-content;
+  max-width: 560px;
+  position: fixed;
+  bottom: 0dvh;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 0px;
+  padding-bottom: 20px;
+  padding-inline: 15px;
+  z-index: 5;
+}
+
+.button.button {
+  padding-block: 16px;
+}
+
+.skipButton.skipButton {
+  background-color: transparent;
+  text-decoration: underline;
+}

src/components/domains/additional-purchases/AddConsultantButton/AddConsultantButton.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+
+import { Button, Typography } from "@/components/ui";
+import { BlurComponent } from "@/components/widgets";
+import { ROUTES } from "@/shared/constants/client-routes";
+
+import styles from "./AddConsultantButton.module.scss";
+
+export default function AddConsultantButton() {
+  const router = useRouter();
+  const t = useTranslations("AdditionalPurchases.add-consultant");
+
+  const handleSkipOffer = () => {
+    router.push(ROUTES.addGuides());
+  };
+
+  return (
+    <BlurComponent isActiveBlur={true} className={styles.container}>
+      <Button className={styles.button}>
+        <Typography weight="semiBold" color="white">
+          {t("get_my_consultation")}
+        </Typography>
+      </Button>
+      <Button className={styles.skipButton} onClick={handleSkipOffer}>
+        <Typography size="sm" color="black">
+          {t("skip_this_offer")}
+        </Typography>
+      </Button>
+    </BlurComponent>
+  );
+}

src/components/domains/additional-purchases/AddGuidesButton/AddGuidesButton.module.scss

@@ -0,0 +1,14 @@
+.container {
+  position: fixed;
+  bottom: calc(0dvh + 16px);
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  padding-inline: 24px;
+  max-width: 560px;
+  height: fit-content;
+}
+
+.button {
+  padding-block: 16px;
+}

src/components/domains/additional-purchases/AddGuidesButton/AddGuidesButton.tsx

@@ -0,0 +1,20 @@
+import { useTranslations } from "next-intl";
+
+import { Button, Typography } from "@/components/ui";
+import { BlurComponent } from "@/components/widgets";
+
+import styles from "./AddGuidesButton.module.scss";
+
+export default function AddGuidesButton() {
+  const t = useTranslations("AdditionalPurchases.add-guides");
+
+  return (
+    <BlurComponent isActiveBlur={true} className={styles.container}>
+      <Button className={styles.button}>
+        <Typography weight="semiBold" color="white">
+          {t("button")}
+        </Typography>
+      </Button>
+    </BlurComponent>
+  );
+}

src/components/domains/additional-purchases/Caution/Caution.module.scss

@@ -0,0 +1,20 @@
+.container.container {
+  width: 100%;
+  padding: 20px;
+  background-color: #aaddff;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 15px;
+  height: min-content;
+  margin-top: 12px;
+}
+
+.title.title {
+  line-height: 135%;
+}
+
+.text.text {
+  line-height: 125%;
+}

src/components/domains/additional-purchases/Caution/Caution.tsx

@@ -0,0 +1,37 @@
+import Image from "next/image";
+import { useTranslations } from "next-intl";
+
+import { Typography } from "@/components/ui";
+
+import styles from "./Caution.module.scss";
+
+function Caution() {
+  const t = useTranslations("AdditionalPurchases.caution");
+
+  return (
+    <div className={styles.container}>
+      <Image
+        src="/emoji/smiling-face-with-hearts.webp"
+        alt="Love"
+        width={34}
+        height={34}
+      />
+      <div className={styles["text-container"]}>
+        <Typography
+          as="h4"
+          size="sm"
+          weight="bold"
+          align="left"
+          className={styles.title}
+        >
+          {t("title")}
+        </Typography>
+        <Typography as="p" size="xs" align="left" className={styles.text}>
+          {t("description")}
+        </Typography>
+      </div>
+    </div>
+  );
+}
+
+export default Caution;

src/components/domains/additional-purchases/ConsultationTable/ConsultationTable.module.scss

@@ -0,0 +1,83 @@
+.container {
+  margin: 12px auto 0;
+  display: flex;
+  flex-direction: column;
+  -webkit-box-align: center;
+  align-items: center;
+  position: relative;
+  border-radius: 16px;
+  width: 100%;
+
+  & > .title {
+    font-size: 18px;
+    line-height: 135%;
+    margin-bottom: 16px;
+    margin-top: 0;
+  }
+}
+
+.header {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+
+  & > .textContainer {
+    & > .title {
+      color: #1b6acb;
+      line-height: 125%;
+      margin-bottom: 8px;
+    }
+
+    & > .text {
+      font-size: 13px;
+      line-height: 125%;
+    }
+  }
+
+  & > img {
+    height: 100px;
+  }
+}
+
+.line {
+  width: 100%;
+  height: 1px;
+  background: rgb(203, 203, 203);
+}
+
+.footer {
+  margin-top: 16px;
+  width: 100%;
+
+  & > .oneTimePrice {
+    line-height: 24px;
+  }
+
+  & > .oldPrice {
+    line-height: 24px;
+    margin-bottom: 16px;
+
+    & > .save {
+      color: #1b6acb;
+    }
+  }
+}
+
+.chooseContainer {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  margin-top: 16px;
+
+  & > .chooseText {
+    color: #066fdf;
+    line-height: 125%;
+  }
+}

src/components/domains/additional-purchases/ConsultationTable/ConsultationTable.tsx

@@ -0,0 +1,89 @@
+import Image from "next/image";
+import { useTranslations } from "next-intl";
+
+import { Typography } from "@/components/ui";
+import { getFormattedPrice } from "@/shared/utils/price";
+import { Currency } from "@/types";
+
+import styles from "./ConsultationTable.module.scss";
+
+export default function ConsultationTable() {
+  const t = useTranslations("AdditionalPurchases.add-consultant");
+  const currency = Currency.USD;
+
+  const price = getFormattedPrice(4985, currency);
+
+  return (
+    <div className={styles.container}>
+      <Typography as="h2" weight="bold" className={styles.title}>
+        {t("your_unique_consultation")}
+      </Typography>
+      <div className={styles.header}>
+        <div className={styles.textContainer}>
+          <Typography
+            as="h3"
+            align="left"
+            weight="semiBold"
+            className={styles.title}
+          >
+            {t("30-minute")}
+          </Typography>
+          <Typography as="p" align="left" className={styles.text}>
+            {t("unlock_profound")}
+          </Typography>
+        </div>
+        <Image
+          src="/paywall__spiritist-spiritualist.png"
+          alt="spiritualist"
+          width={76.3}
+          height={100}
+        />
+      </div>
+      <div className={styles.line} />
+      <div className={styles.footer}>
+        <Typography
+          as="p"
+          color="black"
+          weight="bold"
+          align="left"
+          className={styles.oneTimePrice}
+        >
+          {t.rich("one_time_price_offer", {
+            price: () => (
+              <Typography as="span" weight="bold" size="xl" color="black">
+                {price}
+              </Typography>
+            ),
+          })}
+        </Typography>
+        <Typography
+          as="p"
+          color="black"
+          size="sm"
+          align="left"
+          className={styles.oldPrice}
+        >
+          {t("original_price", {
+            oldPrice: getFormattedPrice(9999, currency),
+          })}
+          <Typography weight="bold" className={styles.save}>
+            {t("save")}
+          </Typography>
+        </Typography>
+        <div className={styles.line} />
+        <div className={styles.chooseContainer}>
+          <Typography as="p" align="left" className={styles.chooseText}>
+            {t("choose_from")}
+          </Typography>
+
+          <Image
+            src="/paywall__astrologers-image.png"
+            alt="astrologers"
+            width={106}
+            height={40}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/domains/additional-purchases/Offer/Offer.module.scss

@@ -0,0 +1,92 @@
+.container.container {
+  display: grid;
+  grid-template-columns: 24px 1fr auto;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  justify-content: space-between;
+  padding: 12px 16px;
+  margin-inline: auto;
+  max-width: 450px;
+  width: 100%;
+}
+
+.container.active {
+  background: #066fdf;
+  border: 2px solid #066fdf;
+}
+
+.mark {
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  justify-content: center;
+  border: 1px solid #aaddff;
+  background: #fff;
+}
+
+.textContainer {
+  display: flex;
+  flex-direction: column;
+  -webkit-box-flex: 1;
+  flex-grow: 1;
+  margin-left: 16px;
+
+  & > * {
+    word-break: break-all;
+  }
+
+  & > .title {
+    text-transform: uppercase;
+    line-height: 135%;
+  }
+
+  & > .subtitle {
+    line-height: 135%;
+    margin-bottom: 5px;
+  }
+}
+
+.priceContainer {
+  font-size: 12px;
+  font-weight: 600;
+  color: rgb(79, 79, 79);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.description {
+  max-width: 140px;
+}
+
+.oldPrice {
+  text-decoration: line-through;
+}
+
+.discountContainer {
+  background: #a7ddff;
+  border-radius: 4px;
+  display: inline-block;
+  margin-left: 4px;
+  padding-inline: 4px;
+
+  & > .discount {
+    color: #066fdf;
+    line-height: 170%;
+  }
+}
+
+.emoji {
+  display: inline-block;
+  background-size: contain;
+  background-position: center center;
+  background-repeat: no-repeat;
+  width: 24px;
+  height: 24px;
+  margin-left: 3px;
+}

src/components/domains/additional-purchases/Offer/Offer.tsx

@@ -0,0 +1,146 @@
+import Image from "next/image";
+import { useTranslations } from "next-intl";
+
+import { Card, Typography } from "@/components/ui";
+import { getFormattedPrice } from "@/shared/utils/price";
+import { Currency } from "@/types";
+
+import styles from "./Offer.module.scss";
+
+export interface IOffer {
+  id: string;
+  productKey: string;
+  type: "one_time" | string;
+  price: number;
+  oldPrice: number;
+}
+
+interface OfferProps extends IOffer {
+  isActive: boolean;
+  className?: string;
+  onClick: () => void;
+}
+
+export default function Offer(props: OfferProps) {
+  const { id, productKey, isActive, price, oldPrice, className, onClick } =
+    props;
+
+  const t = useTranslations(
+    `AdditionalPurchases.add-guides.products.${productKey?.replaceAll(".", "_")}`
+  );
+
+  const currency = Currency.USD;
+
+  const subtitle = t.has("subtitle") ? t("subtitle") : undefined;
+
+  const discount = (((oldPrice || 0) - price) / (oldPrice || 0)) * 100;
+
+  const emoji = t.has("emoji") ? t("emoji") : undefined;
+
+  const typographyColor = isActive ? "white" : "default";
+
+  return (
+    <Card
+      className={`${styles.container} ${
+        isActive && styles.active
+      } ${className}`}
+      onClick={onClick}
+    >
+      <div className={styles.mark}>
+        {/* TODO: add icon after merge with chat */}
+        {isActive && (
+          <Image
+            src="/check-mark-1.svg"
+            alt="Checkmark"
+            width={14}
+            height={12}
+          />
+        )}
+      </div>
+      <div className={styles.textContainer}>
+        <Typography
+          as="p"
+          align="left"
+          weight="semiBold"
+          className={styles.title}
+          color={typographyColor}
+        >
+          {t("title")}
+        </Typography>
+        {!!subtitle?.length && id !== "main_skip_offer" && (
+          <Typography
+            align="left"
+            size="sm"
+            color={typographyColor}
+            className={styles.subtitle}
+          >
+            {subtitle}
+          </Typography>
+        )}
+        <div className={styles.priceContainer}>
+          {id !== "main_skip_offer" && (
+            <Typography
+              align="left"
+              color={typographyColor}
+              size="xs"
+              weight="semiBold"
+              className={styles.price}
+            >
+              {t.rich("price", {
+                price: () => (
+                  <Typography
+                    size="sm"
+                    color={typographyColor}
+                    weight="semiBold"
+                    className={styles.currentPrice}
+                  >
+                    {getFormattedPrice(price, currency)}
+                  </Typography>
+                ),
+                oldPrice: () => (
+                  <Typography
+                    size="xs"
+                    color={typographyColor}
+                    weight="semiBold"
+                    className={styles.oldPrice}
+                  >
+                    {getFormattedPrice(oldPrice || 0, currency)}
+                  </Typography>
+                ),
+              })}
+            </Typography>
+          )}
+
+          {id === "main_skip_offer" && (
+            <Typography
+              align="left"
+              size="xs"
+              color={typographyColor}
+              className={styles.description}
+            >
+              {subtitle}
+            </Typography>
+          )}
+
+          {id !== "ultra_pack" && (
+            <div className={styles.discountContainer}>
+              <Typography
+                size="xs"
+                weight="semiBold"
+                className={styles.discount}
+              >
+                {t("discount", {
+                  discount: discount || 0,
+                })}
+              </Typography>
+            </div>
+          )}
+        </div>
+      </div>
+      <span
+        className={styles.emoji}
+        style={{ backgroundImage: `url(/emoji/${emoji})` }}
+      />
+    </Card>
+  );
+}

src/components/domains/additional-purchases/Offers/Offers.module.scss

@@ -0,0 +1,6 @@
+.container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}

src/components/domains/additional-purchases/Offers/Offers.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useState } from "react";
+
+import styles from "./Offers.module.scss";
+
+import { IOffer, Offer } from "..";
+
+interface OffersProps {
+  products: (Omit<IOffer, "productKey"> & { key: string })[];
+}
+
+export default function Offers({ products }: OffersProps) {
+  const [activeOffer, setActiveOffer] = useState<string>(products[0].id);
+
+  return (
+    <div className={styles.container}>
+      {products.map(product => (
+        <Offer
+          {...product}
+          key={product.id}
+          productKey={product.key}
+          isActive={activeOffer === product.id}
+          onClick={() => setActiveOffer(product.id)}
+        />
+      ))}
+    </div>
+  );
+}

src/components/domains/additional-purchases/index.ts

@@ -0,0 +1,6 @@
+export { default as AddConsultantButton } from "./AddConsultantButton/AddConsultantButton";
+export { default as AddGuidesButton } from "./AddGuidesButton/AddGuidesButton";
+export { default as Caution } from "./Caution/Caution";
+export { default as ConsultationTable } from "./ConsultationTable/ConsultationTable";
+export { type IOffer, default as Offer } from "./Offer/Offer";
+export { default as Offers } from "./Offers/Offers";

src/components/ui/Card/Card.tsx

@@ -1,17 +1,12 @@
-import { ReactNode } from "react";
 import clsx from "clsx";
 
 import styles from "./Card.module.scss";
 
-type CardProps = {
+type CardProps = React.HTMLAttributes<HTMLDivElement>;
-  children: ReactNode;
-  className?: string;
-  style?: React.CSSProperties;
-};
 
-export default function Card({ children, className, style }: CardProps) {
+export default function Card({ children, className, ...props }: CardProps) {
   return (
-    <div className={clsx(styles.card, className)} style={style}>
+    <div className={clsx(styles.card, className)} {...props}>
       {children}
     </div>
   );

src/components/widgets/BlurComponent/BlurComponent.module.scss

@@ -5,6 +5,11 @@
   text-align: center;
   text-align: -webkit-center;
 
+  & > * {
+    position: relative;
+    z-index: 10;
+  }
+
   .gradientBlur {
     position: absolute;
     z-index: 5;

src/shared/constants/client-routes.ts

@@ -63,6 +63,10 @@ export const ROUTES = {
   // Chat
   chat: () => createRoute(["chat"]),
 
+  // Additional Purchases
+  addConsultant: () => createRoute(["add-consultant"]),
+  addGuides: () => createRoute(["add-guides"]),
+
   // // Compatibility
   // compatibilities: () => createRoute(["compatibilities"]),