+ 2024, Wit Apps LLC,
+ 123, Rimer Dr, Moraga, California, 94556, US
+
+
+ );
+}
+
+export default AnimateMessages;
diff --git a/src/components/ChatsPath/components/AnimateMessages/styles.module.scss b/src/components/ChatsPath/components/AnimateMessages/styles.module.scss
new file mode 100644
index 0000000..3428967
--- /dev/null
+++ b/src/components/ChatsPath/components/AnimateMessages/styles.module.scss
@@ -0,0 +1,78 @@
+.container {
+ margin-top: 20vh;
+ margin-bottom: 8vh;
+}
+
+.list {
+ position: relative;
+ height: 60px;
+ transform-origin: center bottom;
+
+ &::before,
+ &::after {
+ content: "";
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: var(--primary-800);
+ border-radius: 16px;
+ opacity: 0.65;
+ z-index: -1;
+ }
+
+ &::before {
+ transform: translateY(40%) scale(0.8);
+ }
+
+ &::after {
+ transform: translateY(20%) scale(0.9);
+ }
+
+ & > .item {
+ position: absolute;
+ width: 100%;
+ opacity: 0;
+ display: flex;
+ padding: 8px 10px;
+ border-radius: 16px;
+ background: var(--primary-800);
+ bottom: 0;
+ transform: translateY(40%) scale(0.8);
+ transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
+ box-shadow: 0 2px 6px 0 var(--primary-900-with-opacity-40);
+ z-index: 0;
+
+ &.hide-up {
+ transform: translateY(-80%) scale(1);
+ }
+
+ &.active {
+ transform: translate(0);
+ opacity: 1;
+ }
+
+ & > img {
+ width: 34px;
+ height: 34px;
+ border-radius: 8px;
+ margin-right: 12px;
+ color: transparent;
+ }
+
+ & .name {
+ color: var(--typography-100);
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 135%;
+ }
+
+ & .text {
+ color: var(--typography-100);
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 135%;
+ }
+ }
+}
diff --git a/src/components/ChatsPath/components/Answer/index.tsx b/src/components/ChatsPath/components/Answer/index.tsx
new file mode 100644
index 0000000..5dd50c1
--- /dev/null
+++ b/src/components/ChatsPath/components/Answer/index.tsx
@@ -0,0 +1,43 @@
+import { useDispatch } from "react-redux";
+import { IAnswer } from "../../data";
+import styles from "./styles.module.scss";
+import { actions } from "@/store";
+
+interface IAnswerProps {
+ answer: IAnswer;
+ classNameContainer?: string;
+ active?: boolean;
+ onClick?: () => void;
+}
+
+function Answer({
+ answer,
+ classNameContainer = "",
+ active = false,
+ onClick,
+}: IAnswerProps) {
+ const dispatch = useDispatch();
+
+ const handleClick = () => {
+ dispatch(
+ actions.chats.updateAnswers({
+ [answer.questionId]: answer.value,
+ })
+ );
+ onClick && onClick();
+ };
+
+ return (
+ -
+ {messages.map(({ name, text, avatar }, index) => (
+
-
+
+
++{name}
+{text}
+
+ ))}
+
+ {answer.name}
+
+ );
+}
+
+export default Answer;
diff --git a/src/components/ChatsPath/components/Answer/styles.module.scss b/src/components/ChatsPath/components/Answer/styles.module.scss
new file mode 100644
index 0000000..0d29f1e
--- /dev/null
+++ b/src/components/ChatsPath/components/Answer/styles.module.scss
@@ -0,0 +1,37 @@
+.container {
+ min-height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.15s ease-in 0ms;
+
+ padding: 16px;
+ border: 1px solid var(--primary);
+ box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+ border-radius: 16px;
+
+ &:hover {
+ transform: scale(1.03);
+ background-color: rgba(#8e8cf0, 0.2);
+ }
+
+ &:active {
+ transform: scale(1.1);
+ background: var(--gradient-tranquil);
+ }
+
+ &.active {
+ background-color: var(--primary);
+ }
+}
+
+.text {
+ color: var(--typography-100);
+ line-height: 21px;
+ font-weight: 400;
+ display: flex;
+ align-items: center;
+ font-size: 16px;
+}
diff --git a/src/components/ChatsPath/components/AnswerDescription/index.tsx b/src/components/ChatsPath/components/AnswerDescription/index.tsx
new file mode 100644
index 0000000..75daaad
--- /dev/null
+++ b/src/components/ChatsPath/components/AnswerDescription/index.tsx
@@ -0,0 +1,29 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.scss";
+import React from "react";
+
+export interface IAnswerDescriptionProps {
+ title: string;
+ description: string;
+ footer?: string | React.ReactNode;
+}
+
+function AnswerDescription({
+ title,
+ description,
+ footer,
+}: IAnswerDescriptionProps) {
+ return (
+
+
+ );
+}
+
+export default AnswerDescription;
diff --git a/src/components/ChatsPath/components/AnswerDescription/styles.module.scss b/src/components/ChatsPath/components/AnswerDescription/styles.module.scss
new file mode 100644
index 0000000..f752f6b
--- /dev/null
+++ b/src/components/ChatsPath/components/AnswerDescription/styles.module.scss
@@ -0,0 +1,39 @@
+.container {
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ border-radius: 16px;
+ border: 1px solid var(--white-with-opacity-15);
+ margin-top: 34px;
+}
+
+.wrapper {
+ display: flex;
+ flex-direction: column;
+ padding: 16px 16px 20px;
+ background-color: var(--secondary);
+}
+
+.title {
+ margin: 0;
+ color: var(--primary-100);
+ font-size: 14px;
+ font-weight: 700;
+ line-height: 135%;
+ text-align: left;
+}
+
+.text {
+ color: var(--primary-100);
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 135%;
+ text-align: left;
+ margin-top: 8px;
+}
+
+.footer {
+ padding: 7px 10px;
+ font-size: 14px;
+ font-weight: 400;
+}
diff --git a/src/components/ChatsPath/components/Answers/index.tsx b/src/components/ChatsPath/components/Answers/index.tsx
new file mode 100644
index 0000000..fdbe46b
--- /dev/null
+++ b/src/components/ChatsPath/components/Answers/index.tsx
@@ -0,0 +1,34 @@
+import { IAnswer } from "../../data";
+import Answer from "../Answer";
+import styles from "./styles.module.scss";
+
+interface IAnswersProps {
+ answers: IAnswer[];
+ classNameAnswer?: string;
+ activeAnswer?: string;
+}
+
+function Answers({
+ answers,
+ activeAnswer,
+ classNameAnswer = "",
+}: IAnswersProps) {
+ return (
+
+
+ {title}
+
+
+ {footer && {description}
+{footer}
} +
+
+ );
+}
+
+export default Answers;
diff --git a/src/components/ChatsPath/components/Answers/styles.module.scss b/src/components/ChatsPath/components/Answers/styles.module.scss
new file mode 100644
index 0000000..4a2c9de
--- /dev/null
+++ b/src/components/ChatsPath/components/Answers/styles.module.scss
@@ -0,0 +1,11 @@
+.container {
+ width: 100%;
+}
+
+.list {
+ margin-bottom: -20px;
+
+ & > .item {
+ padding-bottom: 10px;
+ }
+}
diff --git a/src/components/ChatsPath/components/AppStoreReviews/index.tsx b/src/components/ChatsPath/components/AppStoreReviews/index.tsx
new file mode 100644
index 0000000..d800f87
--- /dev/null
+++ b/src/components/ChatsPath/components/AppStoreReviews/index.tsx
@@ -0,0 +1,36 @@
+import { images } from "../../data";
+import Stars from "../Stars";
+import styles from "./styles.module.scss";
+
+function AppStoreReviews() {
+ return (
+ -
+ {answers.map((answer, index) => (
+
-
+
+
+ ))}
+
+
+ );
+}
+
+export default AppStoreReviews;
diff --git a/src/components/ChatsPath/components/AppStoreReviews/styles.module.scss b/src/components/ChatsPath/components/AppStoreReviews/styles.module.scss
new file mode 100644
index 0000000..2465824
--- /dev/null
+++ b/src/components/ChatsPath/components/AppStoreReviews/styles.module.scss
@@ -0,0 +1,49 @@
+.app-wrapper {
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 40px;
+}
+
+.app-review {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 8px;
+}
+
+.wing {
+ width: 27px;
+ height: 58px;
+ color: transparent;
+}
+
+.wing-right {
+ width: 27px;
+ height: 58px;
+ transform: scaleX(-1);
+ color: transparent;
+}
+
+.app-info {
+ text-align: center;
+ margin-left: 5px;
+ margin-right: 5px;
+}
+
+.app-title {
+ font-weight: 700;
+ font-size: 14px;
+ margin-bottom: 5px;
+}
+
+.app-text {
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 24px;
+}
+
+.app-rating {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
diff --git a/src/components/ChatsPath/components/Astrologers/index.tsx b/src/components/ChatsPath/components/Astrologers/index.tsx
new file mode 100644
index 0000000..383b898
--- /dev/null
+++ b/src/components/ChatsPath/components/Astrologers/index.tsx
@@ -0,0 +1,28 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.scss";
+import { images } from "../../data";
+import Button from "../../ui/Button";
+
+interface IAstrologersProps {
+ onButtonClick: () => void;
+}
+
+function Astrologers({ onButtonClick }: IAstrologersProps) {
+ return (
+
+ ![wing]({images("wing.webp")})
+
+
+
+
+
+
+ App Store
+215K reviews
+
+
+
+
+
+ );
+}
+
+export default Astrologers;
diff --git a/src/components/ChatsPath/components/Astrologers/styles.module.scss b/src/components/ChatsPath/components/Astrologers/styles.module.scss
new file mode 100644
index 0000000..19d58ba
--- /dev/null
+++ b/src/components/ChatsPath/components/Astrologers/styles.module.scss
@@ -0,0 +1,30 @@
+.container {
+ padding: 50px 15px;
+ background: var(--secondary-800);
+}
+
+.wrapper {
+ margin: 0 auto;
+ max-width: 1068px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.title {
+ font-family: Open Sans, sans-serif;
+ font-size: 24px;
+ line-height: 32px;
+ font-weight: 600;
+ text-align: center;
+ margin-bottom: 30px;
+ max-width: 796px;
+}
+
+.image {
+ max-width: 500px;
+ width: 100%;
+ position: relative;
+ margin-left: auto;
+ margin-right: auto;
+}
diff --git a/src/components/ChatsPath/components/ChooseGender/index.tsx b/src/components/ChatsPath/components/ChooseGender/index.tsx
new file mode 100644
index 0000000..02c97db
--- /dev/null
+++ b/src/components/ChatsPath/components/ChooseGender/index.tsx
@@ -0,0 +1,68 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.scss";
+import { images } from "../../data";
+import { useDispatch } from "react-redux";
+import { actions } from "@/store";
+
+interface IChooseGenderProps {
+ onSelectGender?: (gender: string) => void;
+}
+
+function ChooseGender({ onSelectGender }: IChooseGenderProps) {
+ const dispatch = useDispatch();
+
+ const selectGender = (gender: string) => {
+ dispatch(actions.questionnaire.update({ gender }));
+ onSelectGender && onSelectGender(gender);
+ };
+
+ return (
+
+
+ Best psychics in the love & relationship area
+
+ ![Astrologers]({images("astrologers-card-mobile.webp")})
+
+
+
+
+
+
+ );
+}
+
+export default ChooseGender;
diff --git a/src/components/ChatsPath/components/ChooseGender/styles.module.scss b/src/components/ChatsPath/components/ChooseGender/styles.module.scss
new file mode 100644
index 0000000..d9b3a16
--- /dev/null
+++ b/src/components/ChatsPath/components/ChooseGender/styles.module.scss
@@ -0,0 +1,77 @@
+.container {
+ border-top-left-radius: 16px;
+ border-top-right-radius: 16px;
+ border: 1px solid var(--secondary);
+ background: var(--secondary-600);
+ padding: 20px 16px;
+}
+
+.title {
+ margin-bottom: 14px;
+ text-align: center;
+ font-size: 20px;
+ font-weight: 600;
+}
+
+.list {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 8px;
+
+ & > .item {
+ width: auto;
+ margin-left: 10px;
+ margin-right: 10px;
+
+ & > .button-wrapper {
+ margin-top: 0;
+ margin-bottom: 30px;
+
+ & > button {
+ padding: 0;
+ border: none;
+ height: auto;
+ width: auto;
+ background: transparent;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ text-decoration: none;
+ vertical-align: middle;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ align-self: center;
+ border-radius: 30px;
+ outline: none;
+ color: var(--typography-100);
+ font-size: 16px;
+ line-height: 24px;
+ transition: all 0.15s ease-in-out 0ms;
+
+ &:active {
+ transform: scale(1.03);
+ }
+
+ & > .button-label {
+ display: inherit;
+ align-items: inherit;
+ justify-content: inherit;
+
+ & > img {
+ object-fit: contain;
+ width: 100%;
+ height: auto;
+ }
+ }
+ }
+ }
+ }
+}
+
+.description {
+ font-size: 12px;
+ line-height: 130%;
+ text-align: center;
+}
diff --git a/src/components/ChatsPath/components/DrawerMenu/index.tsx b/src/components/ChatsPath/components/DrawerMenu/index.tsx
new file mode 100644
index 0000000..c69a512
--- /dev/null
+++ b/src/components/ChatsPath/components/DrawerMenu/index.tsx
@@ -0,0 +1,37 @@
+import Drawer from "@mui/material/Drawer";
+import styles from "./styles.module.scss";
+import DrawerMenuList from "../DrawerMenuList";
+import { drawerMenuItems, sprites } from "../../data";
+
+interface IDrawerMenuProps {
+ open: boolean;
+ toggleDrawer: (newOpen: boolean) => () => void;
+}
+
+function DrawerMenu({ open, toggleDrawer }: IDrawerMenuProps) {
+ return (
+
+
+ Choose your gender
+
+
+ -
+
-
+ + ++
+
-
+ + ++
+
+ Our algorithm will match you to our top psychics. Get readings, + guidance and accurate answers from your psychic expert +
+
+
+
+
+
+
+
+ );
+}
+
+export default Feedback;
diff --git a/src/components/ChatsPath/components/Feedback/styles.module.scss b/src/components/ChatsPath/components/Feedback/styles.module.scss
new file mode 100644
index 0000000..46d35d2
--- /dev/null
+++ b/src/components/ChatsPath/components/Feedback/styles.module.scss
@@ -0,0 +1,11 @@
+.container {
+ padding: 50px 15px;
+ background: var(--secondary-800);
+}
+
+.wrapper {
+ margin: 0 auto;
+ max-width: 1108px;
+ padding-left: 10px;
+ padding-right: 10px;
+}
diff --git a/src/components/ChatsPath/components/Header/index.tsx b/src/components/ChatsPath/components/Header/index.tsx
new file mode 100644
index 0000000..e8e8037
--- /dev/null
+++ b/src/components/ChatsPath/components/Header/index.tsx
@@ -0,0 +1,45 @@
+import { useNavigate } from "react-router-dom";
+import styles from "./styles.module.scss";
+import BackButton from "@/components/pages/ABDesign/v1/ui/BackButton";
+import Title from "@/components/Title";
+import Burger from "../../ui/Burger";
+
+interface IHeaderProps {
+ isBackButtonVisible?: boolean;
+ isBurgerVisible?: boolean;
+ className?: string;
+ classNameTitle?: string;
+ onBack?: () => void;
+ onBurger?: () => void;
+}
+
+function Header({
+ classNameTitle = "",
+ isBackButtonVisible = true,
+ isBurgerVisible = true,
+ onBurger,
+ onBack,
+}: IHeaderProps) {
+ const navigate = useNavigate();
+ const handleBack = onBack ? onBack : () => navigate(-1);
+
+ return (
+
+
+
+ {welcomeReviews.map((review, index) => (
+
+
+
+ );
+}
+
+export default HowItWorks;
diff --git a/src/components/ChatsPath/components/HowItWorks/styles.module.scss b/src/components/ChatsPath/components/HowItWorks/styles.module.scss
new file mode 100644
index 0000000..82630a1
--- /dev/null
+++ b/src/components/ChatsPath/components/HowItWorks/styles.module.scss
@@ -0,0 +1,49 @@
+.container {
+ padding: 50px 15px;
+ background: var(--secondary-800);
+}
+
+.wrapper {
+ margin: 0 auto;
+ max-width: 1068px;
+}
+
+.title {
+ font-family: Open Sans, sans-serif;
+ font-size: 24px;
+ text-align: center;
+ line-height: 32px;
+ font-weight: 600;
+ margin-bottom: 50px;
+}
+
+.list {
+ display: flex;
+ flex-direction: column;
+
+ & > .item {
+ display: flex;
+ margin-bottom: 40px;
+ text-align: left;
+
+ & > img {
+ position: relative;
+ width: 75px;
+ height: 75px;
+ flex-shrink: 0;
+ margin-right: 20px;
+ color: transparent;
+ }
+
+ & .item-title {
+ font-weight: 600;
+ margin-bottom: 5px;
+ text-align: left;
+ }
+
+ & .item-description {
+ font-size: 14px;
+ line-height: 24px;
+ }
+ }
+}
diff --git a/src/components/ChatsPath/components/InputAnswerModal/index.tsx b/src/components/ChatsPath/components/InputAnswerModal/index.tsx
new file mode 100644
index 0000000..2c45ab0
--- /dev/null
+++ b/src/components/ChatsPath/components/InputAnswerModal/index.tsx
@@ -0,0 +1,64 @@
+import Modal from "@mui/material/Modal";
+import styles from "./styles.module.scss";
+import Button, { IButtonProps } from "../../ui/Button";
+import { DetailedHTMLProps, InputHTMLAttributes } from "react";
+
+interface IInputAnswerModalProps {
+ open: boolean;
+ inputProps: DetailedHTMLProps<
+ InputHTMLAttributes
+
+ How it works
+
+
+ -
+
-
+
![one]({images("1.webp")})
+ +++ Create account + ++ Answer simple questions to help us design your profile and + personalize your experience +
+
+ -
+
![two]({images("2.webp")})
+ +++ Meet our best psychics + ++ Get matched based on your answers and choose the best psychic to + chat with +
+
+ -
+
![three]({images("3.webp")})
+ +++ Ask your questions + ++ Start online chat to connect with relationship psychics and gain + clarity today +
+
+
+
+
+ Enter your own answer
+
+
+
+
+
+
+
+ {answer.name}
+
+ );
+}
+
+export default MultiplyAnswer;
diff --git a/src/components/ChatsPath/components/MultiplyAnswer/styles.module.scss b/src/components/ChatsPath/components/MultiplyAnswer/styles.module.scss
new file mode 100644
index 0000000..acfcf84
--- /dev/null
+++ b/src/components/ChatsPath/components/MultiplyAnswer/styles.module.scss
@@ -0,0 +1,27 @@
+.container {
+ min-height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.15s ease-in 0ms;
+
+ padding: 16px;
+ border: 1px solid var(--primary);
+ box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+ border-radius: 16px;
+
+ &.active {
+ background-color: rgba(#8e8cf0, 0.2);
+ }
+}
+
+.text {
+ color: var(--typography-100);
+ line-height: 21px;
+ font-weight: 400;
+ display: flex;
+ align-items: center;
+ font-size: 16px;
+}
diff --git a/src/components/ChatsPath/components/MultiplyAnswers/index.tsx b/src/components/ChatsPath/components/MultiplyAnswers/index.tsx
new file mode 100644
index 0000000..9c5fda0
--- /dev/null
+++ b/src/components/ChatsPath/components/MultiplyAnswers/index.tsx
@@ -0,0 +1,78 @@
+import { useDispatch, useSelector } from "react-redux";
+import { IAnswer } from "../../data";
+import MultiplyAnswer from "../MultiplyAnswer";
+import styles from "./styles.module.scss";
+import { actions, selectors } from "@/store";
+
+interface IAnswersProps {
+ answers: IAnswer[];
+ classNameAnswer?: string;
+ activeAnswer?: string;
+}
+
+function MultiplyAnswers({ answers, classNameAnswer = "" }: IAnswersProps) {
+ const dispatch = useDispatch();
+ const storeAnswers = useSelector(selectors.selectAnswers);
+
+ const handleClickAll = (answer: IAnswer, storeAnswer: string[]) => {
+ if (storeAnswer?.length === answers.length) {
+ return dispatch(
+ actions.chats.updateAnswers({
+ [answer.questionId]: [],
+ })
+ );
+ }
+ return dispatch(
+ actions.chats.updateAnswers({
+ [answer.questionId]: answers.map((item) => item.value),
+ })
+ );
+ };
+
+ const handleClick = (answer: IAnswer) => {
+ const storeAnswer = (storeAnswers?.[
+ answer.questionId as keyof typeof storeAnswers
+ ] || []) as string[];
+
+ if (answer.value === "all") {
+ return handleClickAll(answer, storeAnswer);
+ }
+
+ if (storeAnswer?.includes(answer.value)) {
+ dispatch(
+ actions.chats.updateAnswers({
+ [answer.questionId]: storeAnswer?.filter(
+ (item) => item !== answer.value && item !== "all"
+ ),
+ })
+ );
+ } else {
+ dispatch(
+ actions.chats.updateAnswers({
+ [answer.questionId]: [...storeAnswer, answer.value],
+ })
+ );
+ }
+ };
+
+ return (
+
+
+ );
+}
+
+export default MultiplyAnswers;
diff --git a/src/components/ChatsPath/components/MultiplyAnswers/styles.module.scss b/src/components/ChatsPath/components/MultiplyAnswers/styles.module.scss
new file mode 100644
index 0000000..4a2c9de
--- /dev/null
+++ b/src/components/ChatsPath/components/MultiplyAnswers/styles.module.scss
@@ -0,0 +1,11 @@
+.container {
+ width: 100%;
+}
+
+.list {
+ margin-bottom: -20px;
+
+ & > .item {
+ padding-bottom: 10px;
+ }
+}
diff --git a/src/components/ChatsPath/components/Partners/index.tsx b/src/components/ChatsPath/components/Partners/index.tsx
new file mode 100644
index 0000000..f3e09e1
--- /dev/null
+++ b/src/components/ChatsPath/components/Partners/index.tsx
@@ -0,0 +1,64 @@
+import { images } from "../../data";
+import styles from "./styles.module.scss";
+
+function Partners() {
+ return (
+ -
+ {answers.map((answer, index) => (
+
-
+
+
+ ))}
+
+
+ );
+}
+
+export default Partners;
diff --git a/src/components/ChatsPath/components/Partners/styles.module.scss b/src/components/ChatsPath/components/Partners/styles.module.scss
new file mode 100644
index 0000000..46e92da
--- /dev/null
+++ b/src/components/ChatsPath/components/Partners/styles.module.scss
@@ -0,0 +1,60 @@
+.container {
+ background: var(--typography-900);
+ padding: 30px 15px;
+}
+
+.title {
+ font-family: Open Sans, sans-serif;
+ font-size: 24px;
+ text-align: center;
+ line-height: 32px;
+ font-weight: 600;
+ margin-bottom: 30px;
+}
+
+.list {
+ max-width: 360px;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: -30px;
+
+ & > .item {
+ margin-bottom: 30px;
+
+ & img {
+ display: inline-block;
+ width: 100%;
+ height: 100%;
+ color: transparent;
+ }
+ }
+}
+
+.newYorkTimes {
+ width: 215px;
+ height: 28px;
+}
+
+.bustle {
+ width: 74px;
+ height: 20px;
+}
+
+.hypebae {
+ width: 85px;
+ height: 22px;
+}
+
+.refinery {
+ width: 60px;
+ height: 37px;
+}
+
+.cosmopolitan {
+ width: 131px;
+ height: 19px;
+}
diff --git a/src/components/ChatsPath/components/ProgressBar/index.tsx b/src/components/ChatsPath/components/ProgressBar/index.tsx
new file mode 100644
index 0000000..df6cb1a
--- /dev/null
+++ b/src/components/ChatsPath/components/ProgressBar/index.tsx
@@ -0,0 +1,121 @@
+import { progressBarSteps } from "../../data";
+import styles from "./styles.module.scss";
+
+interface IProgressBarProps {
+ currentStep: number;
+}
+
+function calculateProgress(currentStep: number) {
+ const totalProgress: number[] = [];
+ let accumulatedLength = 0;
+
+ progressBarSteps.forEach((step) => {
+ if (currentStep >= accumulatedLength + step.length) {
+ totalProgress.push(100);
+ } else if (
+ currentStep > accumulatedLength &&
+ currentStep < accumulatedLength + step.length
+ ) {
+ const stepProgress =
+ ((currentStep - accumulatedLength) / step.length) * 100;
+ totalProgress.push(stepProgress);
+ } else {
+ totalProgress.push(0);
+ }
+ accumulatedLength += step.length;
+ });
+
+ return totalProgress;
+}
+
+function ProgressBar({ currentStep }: IProgressBarProps) {
+ const totalProgress = calculateProgress(currentStep);
+ const totalLength = progressBarSteps.reduce(
+ (acc, step) => acc + step.length,
+ 0
+ );
+
+ return (
+ As featured in
+-
+
-
+ ++
![The New York Times]({images("new-york-times.webp")})
+
+ -
+ ++
![Bustle]({images("bustle.webp")})
+
+ -
+ ++
![Hypebae]({images("hypebae.webp")})
+
+ -
+ ++
![Refinery]({images("refinery29.webp")})
+
+ -
+ ++
![Cosmopolitan]({images("cosmopolitian.webp")})
+
+
+
+ );
+}
+
+export default ProgressBar;
diff --git a/src/components/ChatsPath/components/ProgressBar/styles.module.scss b/src/components/ChatsPath/components/ProgressBar/styles.module.scss
new file mode 100644
index 0000000..d004019
--- /dev/null
+++ b/src/components/ChatsPath/components/ProgressBar/styles.module.scss
@@ -0,0 +1,162 @@
+.container {
+ margin-bottom: 15px;
+ text-align: center;
+ max-width: 330px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.wrapper {
+ margin-bottom: 15px;
+}
+
+.header {
+ margin-bottom: 12px;
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+
+ & .text {
+ display: inline-block;
+ margin-left: 4px;
+ color: var(--typography-200-with-opacity-50);
+ text-align: center;
+ font-size: 12px;
+ line-height: 120%;
+ }
+
+ & > .counter {
+ margin-left: 36px;
+ padding: 4px 8px;
+ border-radius: 50px;
+ background: var(--primary-800);
+ color: var(--primary-200);
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 1;
+ }
+}
+
+.stepper {
+ display: flex;
+ flex-direction: row;
+ -webkit-box-align: center;
+ align-items: center;
+ justify-content: center;
+ background: transparent !important;
+ z-index: 1;
+ padding: 0 0 32px !important;
+}
+
+.step {
+ padding: 0 !important;
+ display: flex;
+ position: relative;
+
+ &.completed {
+ .circle {
+ background: var(--primary-300);
+ color: var(--typography-800);
+ }
+
+ .progress::after {
+ font-weight: 700;
+ color: var(--typography-100);
+ }
+ }
+
+ & > .circle {
+ background: var(--primary-800);
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ position: absolute;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: var(--typography-300);
+ text-align: center;
+ font-size: 10px;
+ font-weight: 600;
+ line-height: 150%;
+ }
+
+ .step-label {
+ display: flex;
+ -webkit-box-align: center;
+ align-items: center;
+
+ & > .svg {
+ flex-shrink: 0;
+ display: flex;
+ padding-right: 0;
+
+ & > svg {
+ user-select: none;
+ fill: currentcolor;
+ flex-shrink: 0;
+ font-size: 1.5rem;
+ display: block;
+ transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+
+ &.completed {
+ color: var(--primary-800);
+ border: none;
+ }
+ }
+ }
+ }
+}
+
+.progress {
+ position: relative;
+ padding: 0 !important;
+ background: none !important;
+ width: 92px;
+ color: rgba(0, 0, 0, 0.87);
+ box-shadow: none;
+ display: flex;
+ flex-direction: row;
+ -webkit-box-pack: justify;
+ justify-content: space-between;
+ -webkit-box-align: center;
+ align-items: center;
+ transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+ &::after {
+ content: attr(data-label);
+ width: 95px;
+ position: absolute;
+ left: 50%;
+ top: 16px;
+ transform: translateX(-50%);
+ text-align: center;
+ font-size: 12px;
+ line-height: 150%;
+ color: var(--typography-400);
+ }
+
+ & > .progress-bar {
+ position: relative;
+ overflow: hidden;
+ display: block;
+ width: 100%;
+ height: 4px;
+ background: var(--primary-800);
+ z-index: 0;
+
+ & > .progress-bar-fill {
+ width: 100%;
+ position: absolute;
+ left: 0px;
+ bottom: 0px;
+ top: 0px;
+ transition: transform 0.4s linear;
+ transform-origin: left center;
+ background: var(--primary-300);
+ }
+ }
+}
diff --git a/src/components/ChatsPath/components/Review/index.tsx b/src/components/ChatsPath/components/Review/index.tsx
new file mode 100644
index 0000000..71b0738
--- /dev/null
+++ b/src/components/ChatsPath/components/Review/index.tsx
@@ -0,0 +1,46 @@
+import { images, IReview } from "../../data";
+import Stars from "../Stars";
+import styles from "./styles.module.scss";
+
+type TReviewProps = IReview;
+
+function Review({ avatar, name, date, text }: TReviewProps) {
+ return (
+
+
+
+
+
+ 
+ Your answers are confidential
+
+
+ Your answers are confidential
+
+ {currentStep}/{totalLength}
+
+
+ {progressBarSteps.map((step, index) => (
+
+
+
+ ))}
+ {index + 1}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {progressBarSteps.length + 1}
+
+
+
+
+
+
+
+ );
+}
+
+export default Review;
diff --git a/src/components/ChatsPath/components/Review/styles.module.scss b/src/components/ChatsPath/components/Review/styles.module.scss
new file mode 100644
index 0000000..13a835a
--- /dev/null
+++ b/src/components/ChatsPath/components/Review/styles.module.scss
@@ -0,0 +1,76 @@
+.container {
+ margin-left: auto;
+ margin-right: auto;
+ border-radius: 20px;
+ width: 100%;
+ position: relative;
+ background: var(--typography-100);
+ color: var(--typography-800);
+ padding: 16px 25px 16px 16px;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ height: auto !important;
+ margin-bottom: 20px;
+}
+
+.info-wrapper {
+ display: flex;
+ align-items: flex-start;
+}
+
+.avatar {
+ display: block;
+ border-radius: 50%;
+ color: transparent;
+}
+
+.info {
+ display: flex;
+ flex-direction: column;
+ margin-left: 10px;
+ max-width: 55%;
+ flex-basis: 50%;
+ overflow: hidden;
+ text-align: left;
+}
+
+.name {
+ font-weight: 600;
+ font-size: 18px;
+ line-height: 24px;
+ max-height: 48px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.date {
+ font-size: 12px;
+ line-height: 16px;
+ color: var(--typography-300);
+}
+
+.quote-wrapper {
+ flex-grow: 1;
+ overflow-y: auto;
+}
+
+.quote-container {
+ display: flex;
+ margin-top: 10px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-bottom: 10px;
+}
+
+.text {
+ width: 100%;
+ font-size: 14px;
+ line-height: 24px;
+ margin-left: 8px;
+ text-align: left;
+}
+
+.stars {
+ margin-left: auto;
+}
diff --git a/src/components/ChatsPath/components/Review2/index.tsx b/src/components/ChatsPath/components/Review2/index.tsx
new file mode 100644
index 0000000..d54fd2e
--- /dev/null
+++ b/src/components/ChatsPath/components/Review2/index.tsx
@@ -0,0 +1,39 @@
+import { images, IReview, sprites } from "../../data";
+import Stars from "../Stars";
+import styles from "./styles.module.scss";
+
+type TReviewProps = IReview;
+
+function Review2({ avatar, name, date, text }: TReviewProps) {
+ return (
+
+
+
+
+ {name}
+ {date}
+
+
+
+
+
+
+ {text}
+
+
+ );
+}
+
+export default Review2;
diff --git a/src/components/ChatsPath/components/Review2/styles.module.scss b/src/components/ChatsPath/components/Review2/styles.module.scss
new file mode 100644
index 0000000..f6d042c
--- /dev/null
+++ b/src/components/ChatsPath/components/Review2/styles.module.scss
@@ -0,0 +1,69 @@
+.container {
+ margin-left: auto;
+ margin-right: auto;
+ border-radius: 20px;
+ width: 100%;
+ position: relative;
+ background: var(--secondary-600);
+ color: var(--typography-800);
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ overflow: hidden;
+ margin-bottom: 20px;
+ text-align: left;
+ height: 310px;
+ width: 303px;
+}
+
+.text {
+ margin-top: 16px;
+ color: var(--typography-100);
+ font-size: 16px;
+ line-height: 1.65;
+}
+
+.footer {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+}
+
+.info-wrapper {
+ display: flex;
+}
+
+.info {
+ margin-left: 12px;
+
+ & > .name {
+ color: var(--typography-100);
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 1.35;
+ }
+
+ & > .verified {
+ margin-top: 2px;
+ display: flex;
+
+ & > svg {
+ fill: #219653;
+ flex-shrink: 0;
+ }
+
+ & > span {
+ margin-left: 4px;
+ color: var(--typography-300);
+ font-size: 12px;
+ line-height: 1.3;
+ }
+ }
+}
+
+.date {
+ color: var(--typography-300);
+ font-size: 12px;
+ line-height: 1.3334;
+}
diff --git a/src/components/ChatsPath/components/Stars/index.tsx b/src/components/ChatsPath/components/Stars/index.tsx
new file mode 100644
index 0000000..a252b99
--- /dev/null
+++ b/src/components/ChatsPath/components/Stars/index.tsx
@@ -0,0 +1,83 @@
+import styles from "./styles.module.scss";
+
+interface IStarsProps {
+ containerClassName?: string;
+ color?: string;
+}
+
+function Stars({
+ color = "rgb(250, 175, 0)",
+ containerClassName = "",
+}: IStarsProps) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Stars;
diff --git a/src/components/ChatsPath/components/Stars/styles.module.scss b/src/components/ChatsPath/components/Stars/styles.module.scss
new file mode 100644
index 0000000..6924152
--- /dev/null
+++ b/src/components/ChatsPath/components/Stars/styles.module.scss
@@ -0,0 +1,27 @@
+.stars {
+ display: inline-flex;
+ position: relative;
+ font-size: 1.5rem;
+ color: rgb(250, 175, 0);
+ cursor: pointer;
+ text-align: left;
+ width: min-content;
+ -webkit-tap-highlight-color: transparent;
+ pointer-events: none;
+}
+
+.star {
+ display: flex;
+ pointer-events: none;
+ transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+
+ & > svg {
+ width: 1em;
+ height: 1em;
+ display: inline-block;
+ fill: currentcolor;
+ flex-shrink: 0;
+ font-size: inherit;
+ transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
+ }
+}
diff --git a/src/components/ChatsPath/components/Summary/index.tsx b/src/components/ChatsPath/components/Summary/index.tsx
new file mode 100644
index 0000000..d829c44
--- /dev/null
+++ b/src/components/ChatsPath/components/Summary/index.tsx
@@ -0,0 +1,456 @@
+import { images } from "../../data";
+import styles from "./styles.module.scss";
+
+function Summary() {
+ return (
+
+
+ {text}
+
+
+
+
+
+ {date}
+
+
+ {name}
+
+
+ Verified user
+
+
+
+ );
+}
+
+export default Summary;
diff --git a/src/components/ChatsPath/components/Summary/styles.module.scss b/src/components/ChatsPath/components/Summary/styles.module.scss
new file mode 100644
index 0000000..41efc6e
--- /dev/null
+++ b/src/components/ChatsPath/components/Summary/styles.module.scss
@@ -0,0 +1,61 @@
+.container {
+ background: var(--secondary-700);
+ padding: 50px 15px;
+}
+
+.wrapper {
+ margin: 0 auto;
+ max-width: 1068px;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+}
+
+.title {
+ font-family: Open Sans, sans-serif;
+ font-size: 24px;
+ text-align: center;
+ line-height: 32px;
+ font-weight: 600;
+ margin-bottom: 50px;
+ max-width: 796px;
+
+ & > .title-gradient {
+ background: var(--gradient-pink-base);
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+}
+
+.astrologers {
+ width: 100%;
+ max-width: 539px;
+ margin-bottom: 50px;
+}
+
+.list {
+ display: flex;
+ flex-direction: column;
+ max-width: 590px;
+ margin-left: auto;
+ margin-right: auto;
+ text-align: left;
+
+ & > .list-item {
+ display: flex;
+ align-items: center;
+ margin-bottom: 30px;
+
+ & > svg {
+ width: 48px;
+ flex-shrink: 0;
+ }
+
+ & > .item-text {
+ font-size: 14px;
+ line-height: 24px;
+ margin-left: 20px;
+ }
+ }
+}
diff --git a/src/components/ChatsPath/components/Tip/index.tsx b/src/components/ChatsPath/components/Tip/index.tsx
new file mode 100644
index 0000000..1db97e6
--- /dev/null
+++ b/src/components/ChatsPath/components/Tip/index.tsx
@@ -0,0 +1,18 @@
+import styles from "./styles.module.scss";
+
+interface ITipProps {
+ icon: string;
+ text: string;
+}
+
+function Tip({ icon, text }: ITipProps) {
+ return (
+
+
+ + Exclusive livechats with + professional + psychics +
+
+
+
+ ![astrologers]({images("astrologers.webp")})
+
+
+
+
+ -
+
- + + + Learn about the possible twists of fate in your love life + (marriage, divorce, pregnancy and more). + + +
- + + + Gain insight on what you need to do in order to find your way to + happiness in the present and in the future. + + +
- + + + Get peace of mind, insight on relationships and closure. + + +
- + + + Resolve unanswered questions through a professional medium + reading. + + +
- + + + Find out if your partner is your soul mate or a recipe for + disaster. + + +
+
+ );
+}
+
+export default Tip;
diff --git a/src/components/ChatsPath/components/Tip/styles.module.scss b/src/components/ChatsPath/components/Tip/styles.module.scss
new file mode 100644
index 0000000..548a5d0
--- /dev/null
+++ b/src/components/ChatsPath/components/Tip/styles.module.scss
@@ -0,0 +1,22 @@
+.tip-container {
+ text-align: left;
+ padding: 10px 15px;
+ background: var(--white-with-opacity-5);
+ border: 1px solid var(--white-with-opacity-15);
+ border-radius: 8px;
+ margin-bottom: 20px;
+ display: flex;
+
+ & > .tip {
+ display: flex;
+ font-size: 13px;
+ line-height: 145%;
+
+ & > span {
+ margin-top: 7px;
+ font-size: 24px;
+ margin-right: 10px;
+ height: 100%;
+ }
+ }
+}
diff --git a/src/components/ChatsPath/components/YesNoButtons/index.tsx b/src/components/ChatsPath/components/YesNoButtons/index.tsx
new file mode 100644
index 0000000..51c5128
--- /dev/null
+++ b/src/components/ChatsPath/components/YesNoButtons/index.tsx
@@ -0,0 +1,60 @@
+import styles from "./styles.module.scss";
+
+interface IYesNoButtonProps {
+ onClick: (answer: "yes" | "no") => void;
+}
+
+function YesNoButtons({ onClick }: IYesNoButtonProps) {
+ return (
+ + {icon} {text} +
+
+
+ );
+}
+
+export default YesNoButtons;
diff --git a/src/components/ChatsPath/components/YesNoButtons/styles.module.scss b/src/components/ChatsPath/components/YesNoButtons/styles.module.scss
new file mode 100644
index 0000000..0be3a87
--- /dev/null
+++ b/src/components/ChatsPath/components/YesNoButtons/styles.module.scss
@@ -0,0 +1,58 @@
+.container {
+ margin-top: 24px;
+ width: 100%;
+ display: flex;
+}
+
+.button-container {
+ height: 50px;
+ flex-basis: calc(50% - 6px);
+ margin-top: 0;
+ margin-bottom: 0;
+
+ &:not(:last-child) {
+ margin-right: 12px;
+ }
+
+ & > .button {
+ display: inline-flex;
+ align-items: center;
+ text-align: center;
+ text-decoration: none;
+ vertical-align: middle;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ padding: 5px 10px;
+ align-self: center;
+ outline: none;
+ color: var(--typography-100);
+ font-size: 16px;
+ line-height: 24px;
+ transition: all 0.15s ease-in-out 0ms;
+ width: 100%;
+ height: 100%;
+ justify-content: center;
+ background: none;
+ border-radius: 30px;
+ border: 1px solid var(--primary);
+
+ &:active {
+ transform: scale(1.03);
+ }
+
+ & > .label {
+ display: inherit;
+ align-items: inherit;
+ justify-content: inherit;
+
+ & > .text {
+ margin-left: 8px;
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 135%;
+ padding-right: 6px;
+ }
+ }
+ }
+}
diff --git a/src/components/ChatsPath/components/ZodiacWheel/index.tsx b/src/components/ChatsPath/components/ZodiacWheel/index.tsx
new file mode 100644
index 0000000..d677ded
--- /dev/null
+++ b/src/components/ChatsPath/components/ZodiacWheel/index.tsx
@@ -0,0 +1,52 @@
+import { getZodiacSignByDate } from "@/services/zodiac-sign";
+import { images } from "../../data";
+import ZodiacWheelSVG from "../../ui/ZodiacWheelSVG";
+import styles from "./styles.module.scss";
+
+interface IZodiacWheelProps {
+ date: string;
+}
+
+const zodiacs = [
+ "Gemini",
+ "Cancer",
+ "Leo",
+ "Virgo",
+ "Libra",
+ "Scorpio",
+ "Sagittarius",
+ "Capricorn",
+ "Aquarius",
+ "Pisces",
+ "Aries",
+ "Taurus",
+];
+
+function ZodiacWheel({ date }: IZodiacWheelProps) {
+ const zodiac = getZodiacSignByDate(date);
+
+ const getWheelRotation = () => {
+ const index = zodiacs.indexOf(zodiac);
+ if (index === -1) return 0;
+ return index * 30;
+ };
+
+ return (
+
+
+
+
+
+
+
+ ![wheel arrow]({images("zodiac-wheel-arrow.svg")})
+
+ );
+}
+
+export default ZodiacWheel;
diff --git a/src/components/ChatsPath/components/ZodiacWheel/styles.module.scss b/src/components/ChatsPath/components/ZodiacWheel/styles.module.scss
new file mode 100644
index 0000000..a1f8eb8
--- /dev/null
+++ b/src/components/ChatsPath/components/ZodiacWheel/styles.module.scss
@@ -0,0 +1,23 @@
+.container {
+ position: relative;
+ width: 250px;
+ height: 125px;
+ overflow: hidden;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.zodiac-wheel {
+ & path {
+ fill: var(--secondary);
+ }
+}
+
+.wheel-arrow {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ right: 50%;
+ transform: translateX(-50%);
+ color: transparent;
+}
diff --git a/src/components/ChatsPath/data/index.tsx b/src/components/ChatsPath/data/index.tsx
new file mode 100644
index 0000000..b1a9087
--- /dev/null
+++ b/src/components/ChatsPath/data/index.tsx
@@ -0,0 +1,96 @@
+import React from "react";
+
+export const sprites = "/chats/sprites.svg";
+export const images = (path: string) => `/chats/${path}`;
+
+export interface IReview {
+ avatar: string;
+ name: string;
+ date: string;
+ text: string;
+}
+
+export const welcomeReviews: IReview[] = [
+ {
+ avatar: "angel.webp",
+ name: "Angel",
+ date: "06/09/2021",
+ text: "Absolutely incredible - readings have helped me in ways I never knew were possible. Thank you isn’t enough to describe how grateful I am. The consultation helped me figure out my relationship and mend fences with my husband. ",
+ },
+ {
+ avatar: "hanna.webp",
+ name: "Hanna",
+ date: "29/08/2021",
+ text: "It was really helpful. Finally, I let go of my ex-boyfriend, knowing he no longer felt anything for me. It made me feel so much better! Now I clearly understand what I should do with my life. I'll contact you again for advice and support. ",
+ },
+ {
+ avatar: "christofer.webp",
+ name: "Christofer",
+ date: "11/10/2021",
+ text: "So accurate with readings! I am shocked! Such a great soul that will do his best to help as much as possible and be very transparent if needed! Very happy with this site! ❤️",
+ },
+];
+
+interface IProgressBarSteps {
+ name: string;
+ length: number;
+ index: number;
+}
+
+export const progressBarSteps: IProgressBarSteps[] = [
+ {
+ index: 1,
+ name: "Your profile",
+ length: 5,
+ },
+ {
+ index: 2,
+ name: "Personal traits",
+ length: 16,
+ },
+ {
+ index: 3,
+ name: "Preferences",
+ length: 8,
+ },
+];
+
+export interface IAnswer {
+ id: number;
+ value: string;
+ name: string | React.ReactNode;
+ questionId: string;
+ onClick?: () => void;
+}
+
+export interface IDrawerMenuItem {
+ text: string;
+ link: string;
+}
+
+export const drawerMenuItems: IDrawerMenuItem[] = [
+ {
+ text: "Privacy policy",
+ link: "https://aura.wit.life/privacy",
+ },
+ {
+ text: "Terms of use",
+ link: "https://aura.wit.life/terms",
+ },
+ {
+ text: "Money back policy",
+ link: "https://aura.wit.life/privacy",
+ },
+ {
+ text: "Cookie policy",
+ link: "https://aura.wit.life/privacy",
+ },
+ {
+ text: "FAQ",
+ link: "https://aura.wit.life/privacy",
+ },
+ {
+ text: "Contact us",
+ link: "https://witapps.us/en#contact-us",
+ },
+];
diff --git a/src/components/ChatsPath/hooks/useUpdateStep.ts b/src/components/ChatsPath/hooks/useUpdateStep.ts
new file mode 100644
index 0000000..9b1622a
--- /dev/null
+++ b/src/components/ChatsPath/hooks/useUpdateStep.ts
@@ -0,0 +1,12 @@
+import { actions } from "@/store";
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+
+
+export const useUpdateStep = (step: number) => {
+ const dispatch = useDispatch();
+
+ useEffect(() => {
+ dispatch(actions.chats.updateCurrentStep(step));
+ }, [dispatch, step]);
+};
\ No newline at end of file
diff --git a/src/components/ChatsPath/pages/AnswerHub/index.tsx b/src/components/ChatsPath/pages/AnswerHub/index.tsx
new file mode 100644
index 0000000..ca5e902
--- /dev/null
+++ b/src/components/ChatsPath/pages/AnswerHub/index.tsx
@@ -0,0 +1,65 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.scss";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+import Button from "../../ui/Button";
+import AnimateMessages, {
+ IAnimateMessage,
+} from "../../components/AnimateMessages";
+
+const messages: IAnimateMessage[] = [
+ {
+ name: "Taylor",
+ text: "Will my ex and I get back together?",
+ avatar: "Avatar-2.webp",
+ },
+ {
+ name: "Shawn",
+ text: "When will I start a new relationship?",
+ avatar: "Avatar-4.webp",
+ },
+ {
+ name: "Philip",
+ text: "How is my ex feeling about me?",
+ avatar: "Avatar-6.webp",
+ },
+ {
+ name: "Darrell",
+ text: "Is there anything unresolved with my ex?",
+ avatar: "Avatar-8.webp",
+ },
+ {
+ name: "Arthur",
+ text: "Does my ex think about me?",
+ avatar: "Avatar-10.webp",
+ },
+];
+
+function AnswerHub() {
+ const navigate = useNavigate();
+
+ const handleNext = () => {
+ navigate(routes.client.chatsQuizWhatYouWant());
+ };
+
+ return (
+
+ + Our experts already helped 10 million men with their + personal questions, and look forward to{" "} + + guiding you towards confident choices + +
+ ++ Do you believe in spirituality? +
++ What is your birthday? +
+ ++ Do you feel that you need guidance on which important decision to make? +
+How can our psychic help you?
++ What area do you need help with? +
+Select all that apply
++ Do you make decisions with your head or heart? +
++ How confident do you feel in making important life decisions? +
++ How long have you been interested in the psychic field? +
++ What makes you consider getting a psychic reading now? +
++ Do you always know exactly what you want? +
++ Do you struggle with questions that deal with uncertainty? +
+Are you a parent?
+Are you prone to overthinking?
++ Which psychic would you be comfortable talking to? +
++ Are you aware of what a psychic reading is? +
++ Have you ever received a psychic reading? +
+What is your relationship status?
++ Does this topic sound interesting to you? +
+![Image]({images("resonate-4.webp")})
+ + Does this topic sound interesting to you? +
+![Image]({images("resonate-2.webp")})
+ + Does this topic sound interesting to you? +
+![Image]({images("resonate-3.webp")})
+ + Are you happy with the way things are going in your life? +
+Are you sensitive to criticism?
++ Do you feel worried when thinking about your goal? +
++ What is your name? +
++ Which emotion best describes you in the moment? +
++ What are you looking to gain from our psychic? +
++ Do you always know exactly what you want? +
++ How often do you let your worries impact your decisions? +
+What is your goal?
++ Great! You just set your first goal! +
+
+
+
+ + {goal === "about_ex" && ( + <> + Every once in a while, we all need some{" "} + guidance about our relationships. We will do our best + to help you! + + )} + {goal === "give_advice" && ( + <> + Every once in a while, we all need some{" "} + guidance about our love lives. We will do our best to + help you! + + )} + {goal === "give_guidance" && ( + <> + Every once in a while, we all need some{" "} + advice on what the future holds. We will do our best to + help you! + + )} + {goal === "all" && ( + <> + Every once in a while, we all need some{" "} + advice about different aspects of life. We will do our + best to help you! + + )} +
+
+
+ Do not worry! You can change your goal anytime.
+ + ++ {psychicReading === "yes" && ( + <> + Our psychics provide a personalized approach to readings on various + topics to meet your needs + + )} + {psychicReading === "no" && ( + <> + A psychic reading dives into your past, present, and future to + provide answers on various topics + + )} +
+-
+
+
-
+
![Love & Relationship]({images("LoveRelationship.webp")})
+ Love & Relationship
+
+ -
+
![Guidance & Life path]({images("GuidanceLifePath.webp")})
+ Guidance & Life path
+
+ -
+
![Career & Work]({images("CareerWork.webp")})
+ Career & Work
+
+ -
+
![Future telling]({images("FutureTelling.webp")})
+ Future telling
+
+
![orbited heart]({images("orbited_heart.webp")})
+
+
+
+
+
+
+ ![Star]({images("profile-intro-star.svg")})
+
+
+ -
+
-
+
You are
++ Confused about choices +
+
+ -
+
Goal to achieve
+Get back with ex
+
+ -
+
Area of improvement
+Love happiness
+
+
+ Your responses indicate you need a specific approach. That’s why the + last section is designed to match you with the psychic for your goal. +
+ +
+
+
+
+ -
+
-
+ ++ Analyzing your answers... +
![done]({images("done.webp")})
+
+ -
+ ++ Fetching a list of available psychics... +
+
+
-
+ ++ Matching you to the best psychics... +
+
+
-
+ ++ Personalizing your experience... +
+
+
![Thumbs up]({images("big_thumbs_up.webp")})
+
+
+
+
+
+
+
+
+
+ -
+
-
+
Zodiac sign
++ Capricorn +
++
+ -
+
Your goal
+Improve various life areas
+
+ -
+
Relationship status
+Single
+
+
+ Exploring aspects of your life requires detailed + answers to personal questions, so the next section aims to understand + your goal better. +
+ +![Life goal pic]({images("life_goal_pic.webp")})
+
+
+ 💖
+ {/* // add goal */}
+ You want to find out about your ex
+
+
+ + To address your needs it is important to understand your intent better, + so let’s get into some details about your goal! +
+ +
+
+
+
+
+
+ Reviews are from the Aura app
+ +
+ Start with our 2-min quiz to match you with a
psychic who meets
+ your needs
+
-
+
- + + Guaranteed privacy + +
-
+ + ++ Guaranteed privacy +
+
+
+ Join over 60 million people who decided to get answers and get happy
+ with Aura
+
+ ![smile people]({images("smile-people.webp")})
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Button;
diff --git a/src/components/ChatsPath/ui/Button/styles.module.scss b/src/components/ChatsPath/ui/Button/styles.module.scss
new file mode 100644
index 0000000..dea49a1
--- /dev/null
+++ b/src/components/ChatsPath/ui/Button/styles.module.scss
@@ -0,0 +1,43 @@
+.button-wrapper {
+ text-align: center;
+ margin-top: 50px;
+ margin-bottom: 0;
+
+ & > button {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ text-decoration: none;
+ vertical-align: middle;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ width: 300px;
+ padding: 5px 10px;
+ align-self: center;
+ border-radius: 30px;
+ outline: none;
+ border: none;
+ color: var(--typography-100);
+ font-size: 16px;
+ line-height: 24px;
+ height: 40px;
+ background: var(--gradient-pink-base);
+ transition: all 0.15s ease-in-out 0ms;
+
+ &:disabled {
+ opacity: 0.5;
+ }
+
+ &:active {
+ transform: scale(1.03);
+ }
+
+ & > .button-label {
+ display: inherit;
+ align-items: inherit;
+ justify-content: inherit;
+ }
+ }
+}
diff --git a/src/components/ChatsPath/ui/Checkbox/index.tsx b/src/components/ChatsPath/ui/Checkbox/index.tsx
new file mode 100644
index 0000000..59ec3ef
--- /dev/null
+++ b/src/components/ChatsPath/ui/Checkbox/index.tsx
@@ -0,0 +1,28 @@
+import styles from "./styles.module.scss";
+
+interface ICheckboxProps {
+ id: string;
+ name: string;
+ active: boolean;
+}
+
+function Checkbox({ id, name, active }: ICheckboxProps) {
+ return (
+ <>
+
+
+
+ );
+}
+
+export default Checkbox;
diff --git a/src/components/ChatsPath/ui/Checkbox/styles.module.scss b/src/components/ChatsPath/ui/Checkbox/styles.module.scss
new file mode 100644
index 0000000..e34a0bb
--- /dev/null
+++ b/src/components/ChatsPath/ui/Checkbox/styles.module.scss
@@ -0,0 +1,38 @@
+.checkbox-input {
+ display: none;
+}
+
+.checkbox-label {
+ display: inline-flex;
+ align-items: center;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: pointer;
+ font-size: 14px;
+
+ &::before {
+ content: "";
+ display: inline-block;
+ width: 14px;
+ height: 14px;
+ flex-shrink: 0;
+ flex-grow: 0;
+ background-color: transparent;
+ margin-right: 8px;
+ background-repeat: no-repeat;
+ background-position: 50%;
+ border: 2px solid var(--primary);
+ border-radius: 3px;
+ }
+
+ &.active::before {
+ background-color: var(--primary);
+ background-image: url(/chats/done.svg) !important;
+ border-radius: 3px;
+ }
+
+ &.active > .checkbox-content {
+ display: inline-block;
+ }
+}
diff --git a/src/components/ChatsPath/ui/ZodiacIconSVG/index.tsx b/src/components/ChatsPath/ui/ZodiacIconSVG/index.tsx
new file mode 100644
index 0000000..62b906d
--- /dev/null
+++ b/src/components/ChatsPath/ui/ZodiacIconSVG/index.tsx
@@ -0,0 +1,88 @@
+import styles from "./styles.module.scss";
+
+interface IZodiacIconSVGProps {
+ zodiac: string;
+}
+
+function ZodiacIconSVG({ zodiac }: IZodiacIconSVGProps) {
+ return (
+ <>
+
+
+
+ );
+}
+
+export default ZodiacIconSVG;
diff --git a/src/components/ChatsPath/ui/ZodiacIconSVG/styles.module.scss b/src/components/ChatsPath/ui/ZodiacIconSVG/styles.module.scss
new file mode 100644
index 0000000..848dd58
--- /dev/null
+++ b/src/components/ChatsPath/ui/ZodiacIconSVG/styles.module.scss
@@ -0,0 +1,13 @@
+.svg {
+ min-width: 22px;
+ min-height: 22px;
+}
+
+.gradient {
+ position: absolute;
+ z-index: -9999;
+ top: 0;
+ left: 0;
+ width: 0;
+ height: 0;
+}
diff --git a/src/components/ChatsPath/ui/ZodiacWheelSVG/index.tsx b/src/components/ChatsPath/ui/ZodiacWheelSVG/index.tsx
new file mode 100644
index 0000000..23168a6
--- /dev/null
+++ b/src/components/ChatsPath/ui/ZodiacWheelSVG/index.tsx
@@ -0,0 +1,119 @@
+import { SVGProps } from "react";
+import styles from "./styles.module.scss";
+
+interface IZodiacWheelSVG {
+ currentZodiac?: string;
+}
+
+function ZodiacWheelSVG({
+ currentZodiac,
+ ...props
+}: SVGProps
+
+
+
+
+
+
+ toggleDrawer(false)} />
+ {bgImage && (
+ <>
+ 
+
+ )}
+
+ );
+}
+
+export default Layout;
diff --git a/src/routerComponents/Chats/Layouts/styles.module.scss b/src/routerComponents/Chats/Layouts/styles.module.scss
new file mode 100644
index 0000000..4ac8c3d
--- /dev/null
+++ b/src/routerComponents/Chats/Layouts/styles.module.scss
@@ -0,0 +1,35 @@
+.container {
+ position: relative;
+ width: 100%;
+ min-height: 100dvh;
+ height: fit-content;
+ background-color: var(--secondary-800);
+ color: #fafafa;
+ text-align: center;
+}
+
+.background-image {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ inset: 0px;
+ object-fit: cover;
+ color: transparent;
+ opacity: 0.85;
+ z-index: 1;
+}
+
+.gradient-overlay {
+ position: fixed;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ overflow-y: auto;
+ background-image: linear-gradient(
+ 180deg,
+ rgba(32, 34, 97, 0.35),
+ rgba(6, 5, 23, 0.8)
+ );
+ z-index: 1;
+}
diff --git a/src/routerComponents/Chats/index.tsx b/src/routerComponents/Chats/index.tsx
new file mode 100644
index 0000000..35da618
--- /dev/null
+++ b/src/routerComponents/Chats/index.tsx
@@ -0,0 +1,229 @@
+import "./styles.scss";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import { Route, Routes } from "react-router-dom";
+import { useEffect } from "react";
+import { ELocalesPlacement } from "@/locales";
+import Layout from "./Layouts";
+import routes, { chatsPrefix } from "@/routes";
+import Welcome from "@/components/ChatsPath/pages/Welcome";
+import Quiz from "./Layouts/Quiz";
+import PsychicReading from "@/components/ChatsPath/pages/Answers/PsychicReading";
+import Guidance from "@/components/ChatsPath/pages/Guidance";
+import Goal from "@/components/ChatsPath/pages/Answers/Goal";
+import GoalSetup from "@/components/ChatsPath/pages/GoalSetup";
+import Reviews from "@/components/ChatsPath/pages/Reviews";
+import RelationshipStatus from "@/components/ChatsPath/pages/Answers/RelationshipStatus";
+import Date from "@/components/ChatsPath/pages/Answers/Date";
+import ParentStatus from "@/components/ChatsPath/pages/Answers/ParentStatus";
+import ProfileIntro from "@/components/ChatsPath/pages/ProfileIntro";
+import SatisfiedWithLife from "@/components/ChatsPath/pages/Answers/SatisfiedWithLife";
+import WhatEmotion from "@/components/ChatsPath/pages/Answers/WhatEmotion";
+import AnswerHub from "@/components/ChatsPath/pages/AnswerHub";
+import WhatYouWant from "@/components/ChatsPath/pages/Answers/WhatYouWant";
+import MissingInLife from "@/components/ChatsPath/pages/Answers/MissingInLife";
+import Recognize from "@/components/ChatsPath/pages/Recognize";
+import YourGoal from "@/components/ChatsPath/pages/Answers/YourGoal";
+import SomethingWorrying from "@/components/ChatsPath/pages/Answers/SomethingWorrying";
+import ProneToOverthinking from "@/components/ChatsPath/pages/Answers/ProneToOverthinking";
+import WorriesImpact from "@/components/ChatsPath/pages/Answers/WorriesImpact";
+import SensitiveToCriticism from "@/components/ChatsPath/pages/Answers/SensitiveToCriticism";
+import HeadOrHeart from "@/components/ChatsPath/pages/Answers/HeadOrHeart";
+import HowConfident from "@/components/ChatsPath/pages/Answers/HowConfident";
+import NeedGuidance from "@/components/ChatsPath/pages/Answers/NeedGuidance";
+import DecisionGuidance from "@/components/ChatsPath/pages/Answers/DecisionGuidance";
+import ResonateLove from "@/components/ChatsPath/pages/Answers/ResonateLove";
+import ResonateLife from "@/components/ChatsPath/pages/Answers/ResonateLife";
+import ResonateFuture from "@/components/ChatsPath/pages/Answers/ResonateFuture";
+import PreferencesIntro from "@/components/ChatsPath/pages/PreferencesIntro";
+import BelieveInSpirituality from "@/components/ChatsPath/pages/Answers/BelieveInSpirituality";
+import ReadingExperience from "@/components/ChatsPath/pages/Answers/ReadingExperience";
+import InterestedHowLong from "@/components/ChatsPath/pages/Answers/InterestedHowLong";
+import MainReason from "@/components/ChatsPath/pages/Answers/MainReason";
+import WhatToExpect from "@/components/ChatsPath/pages/Answers/WhatToExpect";
+import GuidanceArea from "@/components/ChatsPath/pages/Answers/GuidanceArea";
+import PsychicComfortable from "@/components/ChatsPath/pages/Answers/PsychicComfortable";
+import UserName from "@/components/ChatsPath/pages/Answers/UserName";
+import Processing from "@/components/ChatsPath/pages/Processing";
+
+const removePrefix = (path: string) => path.replace(chatsPrefix, "");
+const removePrefixQuiz = (path: string) =>
+ path.replace(`${chatsPrefix}/quiz/`, "");
+
+function ChatsRoutes() {
+ useEffect(() => {
+ localStorage.setItem("locales-placement", ELocalesPlacement.V1);
+ }, []);
+
+ return (
+
+
+