+ {type !== "only-text-single" && (
+ 
+ )}
);
}
diff --git a/src/components/Answer/styles.module.css b/src/components/Answer/styles.module.css
old mode 100644
new mode 100755
index 361279a..6243f62
--- a/src/components/Answer/styles.module.css
+++ b/src/components/Answer/styles.module.css
@@ -19,6 +19,16 @@
background: rgb(234, 238, 247);
}
+.container.active {
+ background: linear-gradient(
+ 165.54deg,
+ rgb(20, 19, 51) -33.39%,
+ rgb(32, 34, 97) 15.89%,
+ rgb(84, 60, 151) 55.84%,
+ rgb(105, 57, 162) 74.96%
+ );
+}
+
.icon {
width: 48px;
height: 48px;
@@ -29,3 +39,27 @@
line-height: 20px;
color: #000;
}
+
+.active .answer {
+ color: #fff;
+}
+
+.circle {
+ background: rgb(251, 251, 255);
+ border: 1px solid rgb(224, 224, 224);
+ border-radius: 50%;
+ width: 24px;
+ height: 24px;
+ margin-left: auto;
+ display: flex;
+ -webkit-box-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ justify-content: center;
+}
+
+.circle > img {
+ display: block;
+ width: 14px;
+ height: 12px;
+}
diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
old mode 100644
new mode 100755
index 789ba1b..0f7ed0e
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -66,10 +66,25 @@ import GoalSetupPage from "../pages/GoalSetup";
import HyperPersonalizedAstrologyPage from "../pages/HyperPersonalizedAstrologyPage";
import NoBirthtimePage from "../pages/NoBirthtime";
import LoadingInRelationshipPage from "../pages/LoadingInRelationship";
-import WorksForUsPage from "../pages/WorksForUs";
+import QuestionnaireIntermediatePage from "../pages/QuestionnaireIntermediate";
import RelationshipAlmostTherePage from "../pages/RelationshipAlmostThere";
import Modal from "../Modal";
import FullDataModal from "../FullDataModal";
+import SingleZodiacInfoPage from "../pages/SingleZodiacInfo";
+import ProblemsPage from "../pages/Problems";
+import WorksRouterPage from "../pages/WorksRouter";
+import NotAlonePage from "../pages/NotAlone";
+import AlmostTherePage from "../pages/AlmostThere";
+import AllRightPage from "../pages/AllRight";
+import PartnerRightPlacePage from "../pages/PartnerRightPlace";
+import PartnerThingPage from "../pages/PartnerThing";
+import PartnerTotallyNormalPage from "../pages/PartnerTotallyNormal";
+import WithHeartPage from "../pages/WithHeart";
+import WithHeadPage from "../pages/WithHead";
+import BothPage from "../pages/Both";
+import RelationshipZodiacInfoPage from "../pages/RelationshipZodiacInfo";
+import Satisfied from "../pages/Satisfied";
+import AboutUsPage from "../pages/AboutUs";
function App(): JSX.Element {
const [isSpecialOfferOpen, setIsSpecialOfferOpen] = useState{answer.answer}
+ {type === "multiply" && ( +
+ {active && 
}
+
+ )}
}
+
- {steps.map((step, index) => {
+ {filterSteps.map((step, index) => {
return (
);
diff --git a/src/components/pages/AboutUs/index.tsx b/src/components/pages/AboutUs/index.tsx
new file mode 100755
index 0000000..a45d7bf
--- /dev/null
+++ b/src/components/pages/AboutUs/index.tsx
@@ -0,0 +1,44 @@
+import { IAnswer, aboutUsAnswers } from "@/data";
+import styles from "./styles.module.css";
+import Title from "@/components/Title";
+import Answer from "@/components/Answer";
+import { useDispatch } from "react-redux";
+import { actions } from "@/store";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+
+function AboutUsPage() {
+ const navigate = useNavigate();
+ const dispatch = useDispatch();
+
+ const handleClick = (answer: IAnswer) => {
+ dispatch(
+ actions.questionnaire.update({
+ aboutUs: answer.id,
+ })
+ );
+ navigate(routes.client.priceList());
+ };
+
+ return (
+
+ 
+
+ );
+}
+
+export default AllRightPage;
diff --git a/src/components/pages/AllRight/styles.module.css b/src/components/pages/AllRight/styles.module.css
new file mode 100644
index 0000000..73b6b97
--- /dev/null
+++ b/src/components/pages/AllRight/styles.module.css
@@ -0,0 +1,59 @@
+.page {
+ position: relative;
+ height: fit-content;
+ min-height: 100vh;
+ display: flex;
+ justify-content: start;
+ align-items: center;
+ flex-direction: column;
+ gap: 40px;
+ background: url("/laughing_women.webp");
+ background-position-y: bottom;
+ background-position-x: center;
+ background-size: cover;
+ color: #fff;
+ padding-top: 64px;
+}
+
+.title {
+ font-size: 16px;
+ line-height: 28px;
+ max-width: 322px;
+}
+
+.text {
+ font-size: 14px;
+ text-align: center;
+ line-height: 140%;
+ max-width: 322px;
+}
+
+.blue {
+ font-weight: bolder;
+ color: #56ccf2;
+}
+
+.buttons-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+}
+
+.button {
+ width: 160px;
+ min-width: fit-content;
+ height: 48px;
+ min-height: fit-content;
+ border: solid 1px #fff;
+ border-radius: 16px;
+ font-size: 18px;
+ font-weight: 500;
+ background-color: transparent;
+}
+
+.next-button {
+ background-color: #fff;
+ color: #6a3aa2;
+}
diff --git a/src/components/pages/AlmostThere/index.tsx b/src/components/pages/AlmostThere/index.tsx
new file mode 100644
index 0000000..4c6649f
--- /dev/null
+++ b/src/components/pages/AlmostThere/index.tsx
@@ -0,0 +1,49 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.css";
+import MainButton from "@/components/MainButton";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+
+function AlmostTherePage() {
+ const navigate = useNavigate();
+
+ const handleBack = () => {
+ navigate(-1);
+ };
+
+ const handleNext = () => {
+ navigate(`${routes.client.questionnaire()}/relationship_pattern/priority`);
+ };
+
+ return (
+
+ 
+
+ );
+}
+
+export default AlmostTherePage;
diff --git a/src/components/pages/AlmostThere/styles.module.css b/src/components/pages/AlmostThere/styles.module.css
new file mode 100644
index 0000000..d1b9343
--- /dev/null
+++ b/src/components/pages/AlmostThere/styles.module.css
@@ -0,0 +1,59 @@
+.page {
+ position: relative;
+ height: fit-content;
+ min-height: 100vh;
+ display: flex;
+ justify-content: start;
+ align-items: center;
+ flex-direction: column;
+ gap: 40px;
+ background: url("/couple_and_sunset_2.webp");
+ background-position-y: bottom;
+ background-position-x: center;
+ background-size: cover;
+ color: #fff;
+ padding-top: 64px;
+}
+
+.title {
+ font-size: 16px;
+ line-height: 28px;
+ max-width: 322px;
+}
+
+.text {
+ font-size: 14px;
+ text-align: center;
+ line-height: 140%;
+ max-width: 322px;
+}
+
+.blue {
+ font-weight: bolder;
+ color: #56ccf2;
+}
+
+.buttons-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+}
+
+.button {
+ width: 160px;
+ min-width: fit-content;
+ height: 48px;
+ min-height: fit-content;
+ border: solid 1px #fff;
+ border-radius: 16px;
+ font-size: 18px;
+ font-weight: 500;
+ background-color: transparent;
+}
+
+.next-button {
+ background-color: #fff;
+ color: #6a3aa2;
+}
diff --git a/src/components/pages/Both/index.tsx b/src/components/pages/Both/index.tsx
new file mode 100755
index 0000000..e3cce15
--- /dev/null
+++ b/src/components/pages/Both/index.tsx
@@ -0,0 +1,53 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.css";
+import MainButton from "@/components/MainButton";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+import { useSelector } from "react-redux";
+import { selectors } from "@/store";
+import { getZodiacSignByDate } from "@/services/zodiac-sign";
+
+function BothPage() {
+ const navigate = useNavigate();
+ const birthdate = useSelector(selectors.selectBirthdate);
+ const zodiacSign = getZodiacSignByDate(birthdate);
+
+ const handleBack = () => {
+ navigate(-1);
+ };
+
+ const handleNext = () => {
+ navigate(routes.client.aboutUs());
+ };
+
+ return (
+
+ 
+
+ );
+}
+
+export default BothPage;
diff --git a/src/components/pages/Both/styles.module.css b/src/components/pages/Both/styles.module.css
new file mode 100755
index 0000000..2cb498b
--- /dev/null
+++ b/src/components/pages/Both/styles.module.css
@@ -0,0 +1,65 @@
+.page {
+ position: relative;
+ height: fit-content;
+ min-height: 100vh;
+ display: flex;
+ justify-content: start;
+ align-items: center;
+ flex-direction: column;
+ gap: 40px;
+ background: linear-gradient(
+ 165.54deg,
+ rgb(20, 19, 51) -33.39%,
+ rgb(32, 34, 97) 15.89%,
+ rgb(84, 60, 151) 55.84%,
+ rgb(105, 57, 162) 74.96%
+ );
+ background-position-y: bottom;
+ background-position-x: center;
+ background-size: cover;
+ color: #fff;
+ padding-top: 64px;
+}
+
+.title {
+ font-size: 16px;
+ line-height: 28px;
+ max-width: 322px;
+}
+
+.text {
+ font-size: 14px;
+ text-align: center;
+ line-height: 140%;
+ max-width: 322px;
+}
+
+.blue {
+ font-weight: bolder;
+ color: #56ccf2;
+}
+
+.buttons-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+}
+
+.button {
+ width: 160px;
+ min-width: fit-content;
+ height: 48px;
+ min-height: fit-content;
+ border: solid 1px #fff;
+ border-radius: 16px;
+ font-size: 18px;
+ font-weight: 500;
+ background-color: transparent;
+}
+
+.next-button {
+ background-color: #fff;
+ color: #6a3aa2;
+}
diff --git a/src/components/pages/LoadingInRelationship/index.tsx b/src/components/pages/LoadingInRelationship/index.tsx
index d7d213b..0ec8731 100644
--- a/src/components/pages/LoadingInRelationship/index.tsx
+++ b/src/components/pages/LoadingInRelationship/index.tsx
@@ -32,7 +32,7 @@ function LoadingInRelationshipPage() {
}, [loadingProgress]);
const handleNext = () => {
- navigate(`${routes.client.questionnaire()}/profile/relationshipProblem`);
+ navigate(routes.client.problems());
};
return (
diff --git a/src/components/pages/NotAlone/index.tsx b/src/components/pages/NotAlone/index.tsx
new file mode 100644
index 0000000..b73401a
--- /dev/null
+++ b/src/components/pages/NotAlone/index.tsx
@@ -0,0 +1,52 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.css";
+import MainButton from "@/components/MainButton";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+import { selectors } from "@/store";
+import { useSelector } from "react-redux";
+import { getZodiacSignByDate } from "@/services/zodiac-sign";
+
+function NotAlonePage() {
+ const navigate = useNavigate();
+ const { birthdate } = useSelector(selectors.selectQuestionnaire);
+ const zodiacSign = getZodiacSignByDate(birthdate);
+
+ const handleBack = () => {
+ navigate(-1);
+ };
+
+ const handleNext = () => {
+ navigate(`${routes.client.questionnaire()}/personalityTraits/attitude`);
+ };
+
+ return (
+
+ 
+
+ );
+}
+
+export default NotAlonePage;
diff --git a/src/components/pages/NotAlone/styles.module.css b/src/components/pages/NotAlone/styles.module.css
new file mode 100644
index 0000000..b3f3a75
--- /dev/null
+++ b/src/components/pages/NotAlone/styles.module.css
@@ -0,0 +1,59 @@
+.page {
+ position: relative;
+ height: fit-content;
+ min-height: 100vh;
+ display: flex;
+ justify-content: start;
+ align-items: center;
+ flex-direction: column;
+ gap: 40px;
+ background: url("/company_and_sunset.webp");
+ background-position-y: bottom;
+ background-position-x: center;
+ background-size: cover;
+ color: #fff;
+ padding-top: 64px;
+}
+
+.title {
+ font-size: 16px;
+ line-height: 28px;
+ max-width: 322px;
+}
+
+.text {
+ font-size: 14px;
+ text-align: center;
+ line-height: 140%;
+ max-width: 322px;
+}
+
+.blue {
+ font-weight: bolder;
+ color: #56ccf2;
+}
+
+.buttons-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+}
+
+.button {
+ width: 160px;
+ min-width: fit-content;
+ height: 48px;
+ min-height: fit-content;
+ border: solid 1px #fff;
+ border-radius: 16px;
+ font-size: 18px;
+ font-weight: 500;
+ background-color: transparent;
+}
+
+.next-button {
+ background-color: #fff;
+ color: #6a3aa2;
+}
diff --git a/src/components/pages/PartnerRightPlace/index.tsx b/src/components/pages/PartnerRightPlace/index.tsx
new file mode 100755
index 0000000..a95a54c
--- /dev/null
+++ b/src/components/pages/PartnerRightPlace/index.tsx
@@ -0,0 +1,55 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.css";
+import MainButton from "@/components/MainButton";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+import { useSelector } from "react-redux";
+import { selectors } from "@/store";
+import { getZodiacSignByDate } from "@/services/zodiac-sign";
+
+function PartnerRightPlacePage() {
+ const navigate = useNavigate();
+ const birthdate = useSelector(selectors.selectBirthdate);
+ const zodiacSign = getZodiacSignByDate(birthdate);
+
+ const handleBack = () => {
+ navigate(-1);
+ };
+
+ const handleNext = () => {
+ navigate(`${routes.client.questionnaire()}/relationships/appreciated`);
+ };
+
+ return (
+
+ 
+
+ );
+}
+
+export default PartnerRightPlacePage;
diff --git a/src/components/pages/PartnerRightPlace/styles.module.css b/src/components/pages/PartnerRightPlace/styles.module.css
new file mode 100755
index 0000000..2cb498b
--- /dev/null
+++ b/src/components/pages/PartnerRightPlace/styles.module.css
@@ -0,0 +1,65 @@
+.page {
+ position: relative;
+ height: fit-content;
+ min-height: 100vh;
+ display: flex;
+ justify-content: start;
+ align-items: center;
+ flex-direction: column;
+ gap: 40px;
+ background: linear-gradient(
+ 165.54deg,
+ rgb(20, 19, 51) -33.39%,
+ rgb(32, 34, 97) 15.89%,
+ rgb(84, 60, 151) 55.84%,
+ rgb(105, 57, 162) 74.96%
+ );
+ background-position-y: bottom;
+ background-position-x: center;
+ background-size: cover;
+ color: #fff;
+ padding-top: 64px;
+}
+
+.title {
+ font-size: 16px;
+ line-height: 28px;
+ max-width: 322px;
+}
+
+.text {
+ font-size: 14px;
+ text-align: center;
+ line-height: 140%;
+ max-width: 322px;
+}
+
+.blue {
+ font-weight: bolder;
+ color: #56ccf2;
+}
+
+.buttons-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+}
+
+.button {
+ width: 160px;
+ min-width: fit-content;
+ height: 48px;
+ min-height: fit-content;
+ border: solid 1px #fff;
+ border-radius: 16px;
+ font-size: 18px;
+ font-weight: 500;
+ background-color: transparent;
+}
+
+.next-button {
+ background-color: #fff;
+ color: #6a3aa2;
+}
diff --git a/src/components/pages/PartnerThing/index.tsx b/src/components/pages/PartnerThing/index.tsx
new file mode 100755
index 0000000..a0e9deb
--- /dev/null
+++ b/src/components/pages/PartnerThing/index.tsx
@@ -0,0 +1,56 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.css";
+import MainButton from "@/components/MainButton";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+import { useSelector } from "react-redux";
+import { selectors } from "@/store";
+import { getZodiacSignByDate } from "@/services/zodiac-sign";
+
+function PartnerThingPage() {
+ const navigate = useNavigate();
+ const birthdate = useSelector(selectors.selectBirthdate);
+ const zodiacSign = getZodiacSignByDate(birthdate);
+
+ const handleBack = () => {
+ navigate(-1);
+ };
+
+ const handleNext = () => {
+ navigate(`${routes.client.questionnaire()}/relationships/appreciated`);
+ };
+
+ return (
+
+ 
+
+ );
+}
+
+export default PartnerThingPage;
diff --git a/src/components/pages/PartnerThing/styles.module.css b/src/components/pages/PartnerThing/styles.module.css
new file mode 100755
index 0000000..0772a10
--- /dev/null
+++ b/src/components/pages/PartnerThing/styles.module.css
@@ -0,0 +1,66 @@
+.page {
+ position: relative;
+ height: fit-content;
+ min-height: 100vh;
+ display: flex;
+ justify-content: start;
+ align-items: center;
+ flex-direction: column;
+ gap: 40px;
+ background: linear-gradient(
+ 165.54deg,
+ rgb(20, 19, 51) -33.39%,
+ rgb(32, 34, 97) 15.89%,
+ rgb(84, 60, 151) 55.84%,
+ rgb(105, 57, 162) 74.96%
+ );
+ background-position-y: bottom;
+ background-position-x: center;
+ background-size: cover;
+ color: #fff;
+ padding-top: 64px;
+ }
+
+ .title {
+ font-size: 16px;
+ line-height: 28px;
+ max-width: 322px;
+ }
+
+ .text {
+ font-size: 14px;
+ text-align: center;
+ line-height: 140%;
+ max-width: 322px;
+ }
+
+ .blue {
+ font-weight: bolder;
+ color: #56ccf2;
+ }
+
+ .buttons-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+ }
+
+ .button {
+ width: 160px;
+ min-width: fit-content;
+ height: 48px;
+ min-height: fit-content;
+ border: solid 1px #fff;
+ border-radius: 16px;
+ font-size: 18px;
+ font-weight: 500;
+ background-color: transparent;
+ }
+
+ .next-button {
+ background-color: #fff;
+ color: #6a3aa2;
+ }
+
\ No newline at end of file
diff --git a/src/components/pages/PartnerTotallyNormal/index.tsx b/src/components/pages/PartnerTotallyNormal/index.tsx
new file mode 100755
index 0000000..85498d7
--- /dev/null
+++ b/src/components/pages/PartnerTotallyNormal/index.tsx
@@ -0,0 +1,54 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.css";
+import MainButton from "@/components/MainButton";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+import { useSelector } from "react-redux";
+import { selectors } from "@/store";
+import { getZodiacSignByDate } from "@/services/zodiac-sign";
+
+function PartnerTotallyNormalPage() {
+ const navigate = useNavigate();
+ const birthdate = useSelector(selectors.selectBirthdate);
+ const zodiacSign = getZodiacSignByDate(birthdate);
+
+ const handleBack = () => {
+ navigate(-1);
+ };
+
+ const handleNext = () => {
+ navigate(`${routes.client.questionnaire()}/relationships/appreciated`);
+ };
+
+ return (
+
+ 
+
+ );
+}
+
+export default PartnerTotallyNormalPage;
diff --git a/src/components/pages/PartnerTotallyNormal/styles.module.css b/src/components/pages/PartnerTotallyNormal/styles.module.css
new file mode 100755
index 0000000..0772a10
--- /dev/null
+++ b/src/components/pages/PartnerTotallyNormal/styles.module.css
@@ -0,0 +1,66 @@
+.page {
+ position: relative;
+ height: fit-content;
+ min-height: 100vh;
+ display: flex;
+ justify-content: start;
+ align-items: center;
+ flex-direction: column;
+ gap: 40px;
+ background: linear-gradient(
+ 165.54deg,
+ rgb(20, 19, 51) -33.39%,
+ rgb(32, 34, 97) 15.89%,
+ rgb(84, 60, 151) 55.84%,
+ rgb(105, 57, 162) 74.96%
+ );
+ background-position-y: bottom;
+ background-position-x: center;
+ background-size: cover;
+ color: #fff;
+ padding-top: 64px;
+ }
+
+ .title {
+ font-size: 16px;
+ line-height: 28px;
+ max-width: 322px;
+ }
+
+ .text {
+ font-size: 14px;
+ text-align: center;
+ line-height: 140%;
+ max-width: 322px;
+ }
+
+ .blue {
+ font-weight: bolder;
+ color: #56ccf2;
+ }
+
+ .buttons-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+ }
+
+ .button {
+ width: 160px;
+ min-width: fit-content;
+ height: 48px;
+ min-height: fit-content;
+ border: solid 1px #fff;
+ border-radius: 16px;
+ font-size: 18px;
+ font-weight: 500;
+ background-color: transparent;
+ }
+
+ .next-button {
+ background-color: #fff;
+ color: #6a3aa2;
+ }
+
\ No newline at end of file
diff --git a/src/components/pages/Problems/index.tsx b/src/components/pages/Problems/index.tsx
new file mode 100644
index 0000000..1b4f80b
--- /dev/null
+++ b/src/components/pages/Problems/index.tsx
@@ -0,0 +1,179 @@
+import { useNavigate } from "react-router-dom";
+import styles from "./styles.module.css";
+import Stepper from "@/components/Stepper";
+import { useEffect, useState } from "react";
+import { IAnswer, IQuestion, relationshipAnswers, singleAnswers, stepsQuestionary } from "@/data";
+import Title from "@/components/Title";
+import Answer from "@/components/Answer";
+import routes from "@/routes";
+import { useDispatch, useSelector } from "react-redux";
+import { actions } from "@/store";
+import { selectQuestionnaire } from "@/store/questionnaire";
+import { getAge } from "@/services/date";
+
+function ProblemsPage(): JSX.Element {
+ const question = "problems";
+ const stepId = "profile";
+ const navigate = useNavigate();
+ const dispatch = useDispatch();
+ const [currentStep, setCurrentStep] = useState();
+ const [currentQuestion, setCurrentQuestion] = useState();
+ const steps = stepsQuestionary.filter((item) => !!item.questions.length);
+ const [questionTitle, setQuestionTitle] = useState("");
+ const [answers, setAnswers] = useState([]);
+ const questionsAnswers = useSelector(selectQuestionnaire);
+ const gender =
+ questionsAnswers.gender[0].toUpperCase() + questionsAnswers.gender.slice(1);
+
+ useEffect(() => {
+ const flowChoice = questionsAnswers.flowChoice;
+ if (["relationship", "married"].includes(flowChoice)) {
+ return setAnswers(relationshipAnswers);
+ }
+ if (["single", "complicated", "other"].includes(flowChoice)) {
+ return setAnswers(singleAnswers);
+ }
+ }, [questionsAnswers.flowChoice]);
+
+ useEffect(() => {
+ const flowChoice = questionsAnswers.flowChoice;
+ if (["relationship", "married"].includes(flowChoice)) {
+ return setQuestionTitle(
+ `${gender} in their ${getAge(questionsAnswers.birthdate)}s ${
+ questionsAnswers.parent === "yes" && "who have children"
+ } need a slightly different approach to improve their relationship. Which statement best describes you?`
+ );
+ }
+ if (["single", "complicated", "other"].includes(flowChoice)) {
+ return setQuestionTitle(
+ `Single ${gender} in their ${getAge(questionsAnswers.birthdate)}s ${
+ questionsAnswers.parent === "yes" && "who have children"
+ } need a slightly different approach to find their perfect partner. But first, how did you feel in your last relationship?`
+ );
+ }
+ }, [
+ questionsAnswers.birthdate,
+ questionsAnswers.flowChoice,
+ gender,
+ questionsAnswers.parent,
+ ]);
+
+ useEffect(() => {
+ const currentStepIndex = steps.findIndex((item) => item.id === stepId);
+ if (currentStepIndex === -1) return navigate(routes.client.notFound());
+ setCurrentStep(currentStepIndex || 0);
+ const _currentQuestion = steps[currentStepIndex].questions.find(
+ (item) => item.id === question
+ );
+ if (!_currentQuestion) return navigate(routes.client.gender());
+ setCurrentQuestion(_currentQuestion);
+ }, [navigate, question, stepId, steps]);
+
+ const answerClickHandler = (answer: IAnswer) => {
+ if (!stepId || !question) return;
+ const questionIndex = getIndexOfQuestion(question);
+ if (questionIndex === -1) return;
+ const currentStepIndex = steps.findIndex((item) => item.id === stepId);
+
+ const questionsLength = steps[currentStepIndex].questions.length;
+
+ const currentQuestion = steps[currentStepIndex].questions[questionIndex];
+
+ dispatch(
+ actions.questionnaire.update({
+ [currentQuestion.id]: answer.id,
+ })
+ );
+
+ if (answer.navigateToUrl?.length) {
+ return navigate(answer.navigateToUrl);
+ }
+
+ if (currentQuestion.navigateToUrl?.length) {
+ return navigate(currentQuestion.navigateToUrl);
+ }
+
+ if (
+ currentStepIndex >= steps.length - 1 &&
+ questionIndex >= questionsLength - 1
+ ) {
+ return navigate(routes.client.priceList());
+ }
+
+ if (questionIndex < questionsLength - 1) {
+ return navigate(
+ `${routes.client.questionnaire()}/${steps[currentStepIndex].id}/${
+ steps[currentStepIndex].questions[questionIndex + 1].id
+ }`
+ );
+ }
+
+ if (
+ currentStepIndex < steps.length - 1 &&
+ questionIndex >= questionsLength - 1
+ ) {
+ return navigate(
+ `${routes.client.questionnaire()}/${steps[currentStepIndex + 1].id}/${
+ steps[currentStepIndex + 1].questions[0].id
+ }`
+ );
+ }
+ };
+
+ const getIndexOfQuestion = (questionId: string) => {
+ const currentStepIndex = steps.findIndex((item) => item.id === stepId);
+ if (currentStepIndex === -1) return -1;
+ return steps[currentStepIndex].questions.findIndex(
+ (item) => item.id === questionId
+ );
+ };
+
+ return (
+
+ {currentQuestion && (!!currentStep || currentStep === 0) && (
+ <>
+
+ {questionTitle}
+
+ {!!currentQuestion.description && (
+
+ );
+}
+
+export default ProblemsPage;
diff --git a/src/components/pages/Problems/styles.module.css b/src/components/pages/Problems/styles.module.css
new file mode 100644
index 0000000..b323dfa
--- /dev/null
+++ b/src/components/pages/Problems/styles.module.css
@@ -0,0 +1,52 @@
+.page {
+ position: relative;
+ height: fit-content;
+ min-height: calc(100vh - 50px);
+ display: flex;
+ justify-content: start;
+ align-items: center;
+ flex-direction: column;
+ background-position-y: bottom;
+ background-position-x: center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ color: #fff;
+}
+
+.current-step {
+ font-weight: 600;
+ font-size: 14px;
+ text-align: center;
+ color: rgb(142, 140, 240);
+ margin-top: 5px;
+ margin-bottom: 20px;
+ position: relative;
+}
+
+.title {
+ font-size: 24px;
+ line-height: 28px;
+ align-self: flex-start;
+ margin-bottom: 30px;
+ text-align: left;
+ color: rgb(51, 51, 51);
+}
+
+.answers-container {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 20px;
+}
+
+.description {
+ font-size: 14px;
+ line-height: 24px;
+ font-weight: normal;
+ margin-top: -20px;
+ margin-bottom: 30px;
+ align-self: flex-start;
+ text-align: left;
+ color: rgb(79, 79, 79);
+}
diff --git a/src/components/pages/Questionnaire/CustomAnswers/Birthdate/index.tsx b/src/components/pages/Questionnaire/CustomAnswers/Birthdate/index.tsx
old mode 100644
new mode 100755
index d1b7a69..0fa2dc4
--- a/src/components/pages/Questionnaire/CustomAnswers/Birthdate/index.tsx
+++ b/src/components/pages/Questionnaire/CustomAnswers/Birthdate/index.tsx
@@ -35,13 +35,11 @@ function BirthdateCustomAnswer({
const handleNext = () => {
if (affiliation === "self") {
dispatch(actions.questionnaire.update({ birthdate }));
- navigate(`${routes.client.questionnaire()}/profile/isBirthTime`);
+ navigate(routes.client.singleZodiacInfo());
}
if (affiliation === "partner") {
dispatch(actions.questionnaire.update({ partnerBirthdate: birthdate }));
- navigate(
- `${routes.client.questionnaire()}/partnerProfile/partnerIsBirthTime`
- );
+ navigate(routes.client.relationshipZodiacInfo());
}
};
diff --git a/src/components/pages/Questionnaire/CustomAnswers/MultipleAnswers/index.tsx b/src/components/pages/Questionnaire/CustomAnswers/MultipleAnswers/index.tsx
new file mode 100755
index 0000000..e30f3c8
--- /dev/null
+++ b/src/components/pages/Questionnaire/CustomAnswers/MultipleAnswers/index.tsx
@@ -0,0 +1,65 @@
+import { IAnswer } from "@/data";
+import styles from "./styles.module.css";
+import Answer from "@/components/Answer";
+import { useState } from "react";
+import MainButton from "@/components/MainButton";
+import { useTranslation } from "react-i18next";
+import { useDispatch, useSelector } from "react-redux";
+import { actions, selectors } from "@/store";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+
+interface IMultiplyAnswersProps {
+ answers: IAnswer[];
+}
+
+function MultiplyAnswers({ answers }: IMultiplyAnswersProps) {
+ const { t } = useTranslation();
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+ const { currentlyAffecting } = useSelector(selectors.selectQuestionnaire);
+ const [selectedAnswers, setSelectedAnswers] = useState(
+ currentlyAffecting?.split("$") || []
+ );
+
+ const handleClick = (answer: IAnswer) => {
+ if (selectedAnswers.includes(answer.id)) {
+ return setSelectedAnswers((prevState) =>
+ prevState.filter((item) => item !== answer.id)
+ );
+ }
+ return setSelectedAnswers((prevState) => [...prevState, answer.id]);
+ };
+
+ const handleNext = () => {
+ dispatch(
+ actions.questionnaire.update({
+ currentlyAffecting: selectedAnswers.join("$"),
+ })
+ );
+ navigate(`${routes.client.questionnaire()}/relationships/partnerPriority`);
+ };
+
+ return (
+ <>
+ {answers.map((answer, index) => (
+ handleClick(answer)}
+ />
+ ))}
+
+ {t("next")}
+
+
+ );
+}
+
+export default MultiplyAnswers;
diff --git a/src/components/pages/Questionnaire/CustomAnswers/MultipleAnswers/styles.module.css b/src/components/pages/Questionnaire/CustomAnswers/MultipleAnswers/styles.module.css
new file mode 100755
index 0000000..fc42bac
--- /dev/null
+++ b/src/components/pages/Questionnaire/CustomAnswers/MultipleAnswers/styles.module.css
@@ -0,0 +1,10 @@
+.button {
+ margin-top: 8px;
+ background: linear-gradient(
+ 165.54deg,
+ rgb(20, 19, 51) -33.39%,
+ rgb(32, 34, 97) 15.89%,
+ rgb(84, 60, 151) 55.84%,
+ rgb(105, 57, 162) 74.96%
+ );
+}
diff --git a/src/components/pages/Questionnaire/index.tsx b/src/components/pages/Questionnaire/index.tsx
old mode 100644
new mode 100755
index d5d2038..eff3a34
--- a/src/components/pages/Questionnaire/index.tsx
+++ b/src/components/pages/Questionnaire/index.tsx
@@ -30,27 +30,6 @@ function QuestionnairePage(): JSX.Element {
setCurrentQuestion(_currentQuestion);
}, [navigate, question, stepId, steps]);
- // useEffect(() => {
- // if (!question) {
- // navigate(routes.client.gender());
- // }
-
- // console.log(question);
-
- // const currentQuestionIndex = questions.findIndex(
- // (item) => item.id === question
- // );
-
- // const _currentQuestion = questions[currentQuestionIndex];
-
- // setCurrentQuestion(_currentQuestion);
- // console.log(_currentQuestion);
-
- // if (!_currentQuestion) {
- // navigate(routes.client.gender());
- // }
- // }, [currentQuestion, navigate, question]);
-
const answerClickHandler = (answer: IAnswer) => {
if (!stepId || !question) return;
const questionIndex = getIndexOfQuestion(question);
@@ -79,7 +58,7 @@ function QuestionnairePage(): JSX.Element {
currentStepIndex >= steps.length - 1 &&
questionIndex >= questionsLength - 1
) {
- return navigate(routes.client.priceList());
+ return navigate(routes.client.aboutUs());
}
if (questionIndex < questionsLength - 1) {
diff --git a/src/components/pages/QuestionnaireIntermediate/WorksForUsDescription/index.tsx b/src/components/pages/QuestionnaireIntermediate/WorksForUsDescription/index.tsx
new file mode 100644
index 0000000..bdb5519
--- /dev/null
+++ b/src/components/pages/QuestionnaireIntermediate/WorksForUsDescription/index.tsx
@@ -0,0 +1,13 @@
+import styles from "../styles.module.css";
+
+function WorksForUsDescription() {
+ return (
+
+ 
+
+ );
+}
+
+export default QuestionnaireIntermediatePage;
diff --git a/src/components/pages/QuestionnaireIntermediate/styles.module.css b/src/components/pages/QuestionnaireIntermediate/styles.module.css
new file mode 100644
index 0000000..2b294a6
--- /dev/null
+++ b/src/components/pages/QuestionnaireIntermediate/styles.module.css
@@ -0,0 +1,59 @@
+.page {
+ position: relative;
+ height: fit-content;
+ min-height: 100vh;
+ display: flex;
+ justify-content: start;
+ align-items: center;
+ flex-direction: column;
+ gap: 40px;
+ background: url("/couple_holding_hands_1.webp");
+ background-position-y: bottom;
+ background-position-x: center;
+ background-size: cover;
+ color: #fff;
+ padding-top: 64px;
+}
+
+.title {
+ font-size: 16px;
+ line-height: 28px;
+ max-width: 322px;
+}
+
+.text {
+ font-size: 14px;
+ text-align: center;
+ line-height: 140%;
+ max-width: 322px;
+}
+
+.blue {
+ font-weight: bolder;
+ color: #56ccf2;
+}
+
+.buttons-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+}
+
+.button {
+ width: 160px;
+ min-width: fit-content;
+ height: 48px;
+ min-height: fit-content;
+ border: solid 1px #fff;
+ border-radius: 16px;
+ font-size: 18px;
+ font-weight: 500;
+ background-color: transparent;
+}
+
+.next-button {
+ background-color: #fff;
+ color: #6a3aa2;
+}
diff --git a/src/components/pages/RelationshipZodiacInfo/index.tsx b/src/components/pages/RelationshipZodiacInfo/index.tsx
new file mode 100755
index 0000000..e6842b6
--- /dev/null
+++ b/src/components/pages/RelationshipZodiacInfo/index.tsx
@@ -0,0 +1,98 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.css";
+import MainButton from "@/components/MainButton";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+import { useSelector } from "react-redux";
+import { selectors } from "@/store";
+import { getZodiacSignByDate } from "@/services/zodiac-sign";
+import { getRandomArbitrary } from "@/services/random-value";
+import { zodiacSignsCompatibility } from "@/data/zodiacSignsCompatibility";
+import { useMemo } from "react";
+
+function RelationshipZodiacInfoPage() {
+ const navigate = useNavigate();
+ const { gender, partnerGender, birthdate, partnerBirthdate } = useSelector(
+ selectors.selectQuestionnaire
+ );
+ const [zodiacSign, partnerZodiacSign] = [
+ getZodiacSignByDate(birthdate),
+ getZodiacSignByDate(partnerBirthdate),
+ ];
+ const randomCompatibility = useMemo(() => {
+ const replaceValues = {
+ _gender_: gender,
+ _zodiacSign_: zodiacSign,
+ _partnerGender_: partnerGender,
+ _partnerZodiacSign_: partnerZodiacSign,
+ };
+
+ let result =
+ zodiacSignsCompatibility[
+ getRandomArbitrary(0, zodiacSignsCompatibility.length)
+ ];
+
+ for (const key in replaceValues) {
+ result = result.replace(
+ key,
+ String(replaceValues[key as keyof typeof replaceValues])
+ );
+ }
+
+ return result;
+ }, [gender, partnerGender, partnerZodiacSign, zodiacSign]);
+
+ const handleBack = () => {
+ navigate(-1);
+ };
+
+ const handleNext = () => {
+ navigate(
+ `${routes.client.questionnaire()}/partnerProfile/partnerIsBirthTime`
+ );
+ };
+
+ return (
+
+
+ );
+}
+
+export default RelationshipZodiacInfoPage;
diff --git a/src/components/pages/RelationshipZodiacInfo/styles.module.css b/src/components/pages/RelationshipZodiacInfo/styles.module.css
new file mode 100755
index 0000000..01d4610
--- /dev/null
+++ b/src/components/pages/RelationshipZodiacInfo/styles.module.css
@@ -0,0 +1,104 @@
+.page {
+ position: relative;
+ height: fit-content;
+ min-height: 100vh;
+ display: flex;
+ justify-content: start;
+ align-items: center;
+ flex-direction: column;
+ gap: 40px;
+ background: linear-gradient(
+ 165.54deg,
+ rgb(20, 19, 51) -33.39%,
+ rgb(32, 34, 97) 15.89%,
+ rgb(84, 60, 151) 55.84%,
+ rgb(105, 57, 162) 74.96%
+ );
+ background-position-y: bottom;
+ background-position-x: center;
+ background-size: cover;
+ color: #fff;
+ padding-top: 64px;
+}
+
+.image-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ gap: 32px;
+}
+
+.image-container > img {
+ max-width: 118px;
+}
+
+.compatibility-description-container {
+ color: rgb(255, 255, 255);
+ border-radius: 12px;
+ overflow: hidden;
+ padding: 10px 14px;
+ font-weight: 600;
+ background: rgba(234, 238, 247, 0.15);
+}
+
+.text-container {
+ width: 100%;
+ border-radius: 12px;
+ overflow: hidden;
+ padding: 10px 14px;
+ font-weight: 600;
+ background: linear-gradient(
+ 95deg,
+ rgb(207, 139, 243) -16.49%,
+ rgb(167, 112, 239) -15.14%,
+ rgb(253, 185, 155) 115.23%
+ );
+}
+
+.title {
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 28px;
+ max-width: 322px;
+ text-align: left;
+ margin: 0;
+}
+
+.text {
+ font-size: 18px;
+ text-align: left;
+ line-height: 140%;
+ max-width: 322px;
+ margin-top: 8px;
+}
+
+.blue {
+ font-weight: bolder;
+ color: #56ccf2;
+}
+
+.buttons-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+}
+
+.button {
+ width: 160px;
+ min-width: fit-content;
+ height: 48px;
+ min-height: fit-content;
+ border: solid 1px #fff;
+ border-radius: 16px;
+ font-size: 18px;
+ font-weight: 500;
+ background-color: transparent;
+}
+
+.next-button {
+ background-color: #fff;
+ color: #6a3aa2;
+}
diff --git a/src/components/pages/Satisfied/index.tsx b/src/components/pages/Satisfied/index.tsx
new file mode 100755
index 0000000..0052f73
--- /dev/null
+++ b/src/components/pages/Satisfied/index.tsx
@@ -0,0 +1,72 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.css";
+import MainButton from "@/components/MainButton";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+import { selectors } from "@/store";
+import { useSelector } from "react-redux";
+import { getZodiacSignByDate } from "@/services/zodiac-sign";
+
+function Satisfied() {
+ const navigate = useNavigate();
+ const { birthdate, partnerBirthdate, satisfied } = useSelector(
+ selectors.selectQuestionnaire
+ );
+ const [zodiacSign, partnerZodiacSign] = [
+ getZodiacSignByDate(birthdate),
+ getZodiacSignByDate(partnerBirthdate),
+ ];
+
+ const handleBack = () => {
+ navigate(-1);
+ };
+
+ const handleNext = () => {
+ navigate(`${routes.client.questionnaire()}/relationships/emotionalConnection`);
+ };
+
+ return (
+
+ 
+
+ );
+}
+
+export default Satisfied;
diff --git a/src/components/pages/Satisfied/styles.module.css b/src/components/pages/Satisfied/styles.module.css
new file mode 100755
index 0000000..35f7c37
--- /dev/null
+++ b/src/components/pages/Satisfied/styles.module.css
@@ -0,0 +1,59 @@
+.page {
+ position: relative;
+ height: fit-content;
+ min-height: 100vh;
+ display: flex;
+ justify-content: start;
+ align-items: center;
+ flex-direction: column;
+ gap: 40px;
+ background: url("/girl_talking.webp");
+ background-position-y: bottom;
+ background-position-x: center;
+ background-size: cover;
+ color: #fff;
+ padding-top: 64px;
+}
+
+.title {
+ font-size: 16px;
+ line-height: 28px;
+ max-width: 322px;
+}
+
+.text {
+ font-size: 14px;
+ text-align: center;
+ line-height: 140%;
+ max-width: 322px;
+}
+
+.blue {
+ font-weight: bolder;
+ color: #56ccf2;
+}
+
+.buttons-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+}
+
+.button {
+ width: 160px;
+ min-width: fit-content;
+ height: 48px;
+ min-height: fit-content;
+ border: solid 1px #fff;
+ border-radius: 16px;
+ font-size: 18px;
+ font-weight: 500;
+ background-color: transparent;
+}
+
+.next-button {
+ background-color: #fff;
+ color: #6a3aa2;
+}
diff --git a/src/components/pages/SingleZodiacInfo/index.tsx b/src/components/pages/SingleZodiacInfo/index.tsx
new file mode 100644
index 0000000..ddc542c
--- /dev/null
+++ b/src/components/pages/SingleZodiacInfo/index.tsx
@@ -0,0 +1,61 @@
+import { useSelector } from "react-redux";
+import styles from "./styles.module.css";
+import { selectors } from "@/store";
+import { getZodiacSignByDate } from "@/services/zodiac-sign";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+import { IZodicSignsInfo, zodicSignsInfo } from "@/data";
+import Title from "@/components/Title";
+import MainButton from "@/components/MainButton";
+
+function SingleZodiacInfoPage() {
+ const navigate = useNavigate();
+ const birthdate = useSelector(selectors.selectQuestionnaire).birthdate;
+ const gender = useSelector(selectors.selectQuestionnaire).gender;
+ const zodiac = getZodiacSignByDate(birthdate);
+ const zodiacInfo = zodicSignsInfo[gender as keyof IZodicSignsInfo].find(
+ (sign) => sign.name === zodiac
+ );
+
+ const image = zodiacInfo?.img;
+
+ const handleNext = () => {
+ navigate(`${routes.client.questionnaire()}/profile/isBirthTime`);
+ };
+
+ const handleBack = () => {
+ navigate(-1);
+ };
+
+ return (
+
+ 
+
+ );
+}
+
+export default SingleZodiacInfoPage;
diff --git a/src/components/pages/SingleZodiacInfo/styles.module.css b/src/components/pages/SingleZodiacInfo/styles.module.css
new file mode 100644
index 0000000..4ee023c
--- /dev/null
+++ b/src/components/pages/SingleZodiacInfo/styles.module.css
@@ -0,0 +1,77 @@
+.page {
+ position: relative;
+ height: fit-content;
+ min-height: 100vh;
+ height: fit-content;
+ display: flex;
+ justify-content: start;
+ align-items: center;
+ flex-direction: column;
+ gap: 40px;
+ background: linear-gradient(
+ 165.54deg,
+ rgb(20, 19, 51) -33.39%,
+ rgb(32, 34, 97) 15.89%,
+ rgb(84, 60, 151) 55.84%,
+ rgb(105, 57, 162) 74.96%
+ );
+ background-position: center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ color: #fff;
+ padding-top: 64px;
+}
+
+.image {
+ height: 285px;
+}
+
+.zodiac-info-container {
+ width: 100%;
+ color: rgb(255, 255, 255);
+ border-radius: 12px;
+ overflow: hidden;
+ padding: 10px 14px;
+ font-weight: 600;
+ background: rgba(234, 238, 247, 0.15);
+}
+
+.title {
+ font-size: 18px;
+ line-height: 1.5;
+ font-weight: 700;
+ text-align: left;
+ margin: 0;
+}
+
+.description {
+ margin-top: 4px;
+ font-size: 16px;
+ line-height: 1.5;
+ text-align: left;
+}
+
+.buttons-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+}
+
+.button {
+ width: 160px;
+ min-width: fit-content;
+ height: 48px;
+ min-height: fit-content;
+ border: solid 1px #fff;
+ border-radius: 16px;
+ font-size: 18px;
+ font-weight: 500;
+ background-color: transparent;
+}
+
+.next-button {
+ background-color: #fff;
+ color: #6a3aa2;
+}
diff --git a/src/components/pages/WithHead/index.tsx b/src/components/pages/WithHead/index.tsx
new file mode 100755
index 0000000..44dcf56
--- /dev/null
+++ b/src/components/pages/WithHead/index.tsx
@@ -0,0 +1,52 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.css";
+import MainButton from "@/components/MainButton";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+import { useSelector } from "react-redux";
+import { selectors } from "@/store";
+import { getZodiacSignByDate } from "@/services/zodiac-sign";
+
+function WithHeadPage() {
+ const navigate = useNavigate();
+ const birthdate = useSelector(selectors.selectBirthdate);
+ const zodiacSign = getZodiacSignByDate(birthdate);
+
+ const handleBack = () => {
+ navigate(-1);
+ };
+
+ const handleNext = () => {
+ navigate(routes.client.aboutUs());
+ };
+
+ return (
+
+ 
+
+ );
+}
+
+export default WithHeadPage;
diff --git a/src/components/pages/WithHead/styles.module.css b/src/components/pages/WithHead/styles.module.css
new file mode 100755
index 0000000..2cb498b
--- /dev/null
+++ b/src/components/pages/WithHead/styles.module.css
@@ -0,0 +1,65 @@
+.page {
+ position: relative;
+ height: fit-content;
+ min-height: 100vh;
+ display: flex;
+ justify-content: start;
+ align-items: center;
+ flex-direction: column;
+ gap: 40px;
+ background: linear-gradient(
+ 165.54deg,
+ rgb(20, 19, 51) -33.39%,
+ rgb(32, 34, 97) 15.89%,
+ rgb(84, 60, 151) 55.84%,
+ rgb(105, 57, 162) 74.96%
+ );
+ background-position-y: bottom;
+ background-position-x: center;
+ background-size: cover;
+ color: #fff;
+ padding-top: 64px;
+}
+
+.title {
+ font-size: 16px;
+ line-height: 28px;
+ max-width: 322px;
+}
+
+.text {
+ font-size: 14px;
+ text-align: center;
+ line-height: 140%;
+ max-width: 322px;
+}
+
+.blue {
+ font-weight: bolder;
+ color: #56ccf2;
+}
+
+.buttons-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+}
+
+.button {
+ width: 160px;
+ min-width: fit-content;
+ height: 48px;
+ min-height: fit-content;
+ border: solid 1px #fff;
+ border-radius: 16px;
+ font-size: 18px;
+ font-weight: 500;
+ background-color: transparent;
+}
+
+.next-button {
+ background-color: #fff;
+ color: #6a3aa2;
+}
diff --git a/src/components/pages/WithHeart/index.tsx b/src/components/pages/WithHeart/index.tsx
new file mode 100755
index 0000000..946d9df
--- /dev/null
+++ b/src/components/pages/WithHeart/index.tsx
@@ -0,0 +1,52 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.css";
+import MainButton from "@/components/MainButton";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+import { useSelector } from "react-redux";
+import { selectors } from "@/store";
+import { getZodiacSignByDate } from "@/services/zodiac-sign";
+
+function WithHeartPage() {
+ const navigate = useNavigate();
+ const birthdate = useSelector(selectors.selectBirthdate);
+ const zodiacSign = getZodiacSignByDate(birthdate);
+
+ const handleBack = () => {
+ navigate(-1);
+ };
+
+ const handleNext = () => {
+ navigate(routes.client.aboutUs());
+ };
+
+ return (
+
+ 
+
+ );
+}
+
+export default WithHeartPage;
diff --git a/src/components/pages/WithHeart/styles.module.css b/src/components/pages/WithHeart/styles.module.css
new file mode 100755
index 0000000..2cb498b
--- /dev/null
+++ b/src/components/pages/WithHeart/styles.module.css
@@ -0,0 +1,65 @@
+.page {
+ position: relative;
+ height: fit-content;
+ min-height: 100vh;
+ display: flex;
+ justify-content: start;
+ align-items: center;
+ flex-direction: column;
+ gap: 40px;
+ background: linear-gradient(
+ 165.54deg,
+ rgb(20, 19, 51) -33.39%,
+ rgb(32, 34, 97) 15.89%,
+ rgb(84, 60, 151) 55.84%,
+ rgb(105, 57, 162) 74.96%
+ );
+ background-position-y: bottom;
+ background-position-x: center;
+ background-size: cover;
+ color: #fff;
+ padding-top: 64px;
+}
+
+.title {
+ font-size: 16px;
+ line-height: 28px;
+ max-width: 322px;
+}
+
+.text {
+ font-size: 14px;
+ text-align: center;
+ line-height: 140%;
+ max-width: 322px;
+}
+
+.blue {
+ font-weight: bolder;
+ color: #56ccf2;
+}
+
+.buttons-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+}
+
+.button {
+ width: 160px;
+ min-width: fit-content;
+ height: 48px;
+ min-height: fit-content;
+ border: solid 1px #fff;
+ border-radius: 16px;
+ font-size: 18px;
+ font-weight: 500;
+ background-color: transparent;
+}
+
+.next-button {
+ background-color: #fff;
+ color: #6a3aa2;
+}
diff --git a/src/components/pages/WorksRouter/index.tsx b/src/components/pages/WorksRouter/index.tsx
new file mode 100644
index 0000000..b0efb10
--- /dev/null
+++ b/src/components/pages/WorksRouter/index.tsx
@@ -0,0 +1,14 @@
+import routes from "@/routes";
+import { selectors } from "@/store";
+import { useSelector } from "react-redux";
+import { Navigate } from "react-router-dom";
+
+function WorksRouterPage() {
+ const { flowChoice } = useSelector(selectors.selectQuestionnaire);
+ if (["relationship", "married"].includes(flowChoice)) {
+ return
A lot of{" "} + $zodiac people find it + difficult to control emotions due to their zodiac sign traits. Don’t + worry, we know how to address that! + + ), + sometimes: ( + <> + You’re not alone.
A lot of{" "} + $zodiac people find it + difficult to control emotions due to their zodiac sign traits. Don’t + worry, we know how to address that! + + ), + rarely: ( + <> + All right!
You keep your emotions in check{" "} + $zodiac, but sometimes + people might want you to show more passion. We can give you some + insights about that! + + ), + not_all: ( + <> + All right!
You keep your emotions in check{" "} + $zodiac, but sometimes + people might want you to show more passion. We can give you some + insights about that! + + ), + }, + description: "", + backgroundImages: { + yes: "/company_and_sunset.webp", + sometimes: "/company_and_sunset.webp", + rarely: "/laughing_women.webp", + not_all: "/laughing_women.webp", + }, + }, +}; + +export const relationshipAnswers: IAnswer[] = [ + { + id: "very_unhappy", + answer: "I’m very unhappy with how things are going in my relationship", + icon: "/slightly_frowning_face.png", + }, + { + id: "unhappy", + answer: + "I’m unhappy with parts of my relationship, but some things are working well", + icon: "/neutral_face.png", + }, + { + id: "happy", + answer: "I’m generally happy in my relationship", + icon: "/slightly_smiling_face.png", + }, +]; + +export const singleAnswers: IAnswer[] = [ + { + id: "very_unhappy", + answer: "I was unhappy with low things were going in my relationship", + icon: "/slightly_frowning_face.png", + }, + { + id: "unhappy", + answer: + "I was unhappy with parts of my relationship, but some thing were working", + icon: "/neutral_face.png", + }, + { + id: "happy", + answer: "I was generally happy with my relationship", + icon: "/slightly_smiling_face.png", + }, + { + id: "never_been", + answer: "I’ve never been in a relationship", + icon: "/wink.png", + }, +]; diff --git a/src/data/zodiacSignsCompatibility.ts b/src/data/zodiacSignsCompatibility.ts new file mode 100755 index 0000000..0ee3a45 --- /dev/null +++ b/src/data/zodiacSignsCompatibility.ts @@ -0,0 +1,7 @@ +export const zodiacSignsCompatibility = [ + "In the celestial orchestra, the notes played by a _gender_s _zodiacSign_ and a _partnerGender_s _partnerZodiacSign_ create a melody of their own.", + "Each interaction between a _gender_s _zodiacSign_ and a _partnerGender_s _partnerZodiacSign_ weaves a new starry tale.", + "The stars shimmer differently when a _gender_s _zodiacSign_ aligns paths with a _partnerGender_s _partnerZodiacSign_.", + "The astral energies of a _gender_s _zodiacSign_ merge uniquely with those of a _partnerGender_s _partnerZodiacSign_.", + "The astral realms take notice when a _gender_s _zodiacSign_ and a _partnerGender_s _partnerZodiacSign_ form a connection." +]; diff --git a/src/routes.ts b/src/routes.ts old mode 100644 new mode 100755 index 1a98043..d49f354 --- a/src/routes.ts +++ b/src/routes.ts @@ -50,9 +50,25 @@ const routes = { [host, "hyper-personalized-astrology"].join("/"), noTime: () => [host, "no-time"].join("/"), loadingInRelationship: () => [host, "loading-in-relationship"].join("/"), + worksRouter: () => [host, "works-router"].join("/"), worksForUs: () => [host, "works-for-us"].join("/"), + worksTraits: () => [host, "works-traits"].join("/"), relationshipAlmostThere: () => [host, "relationship-almost-there"].join("/"), + singleZodiacInfo: () => [host, "single-zodiac-info"].join("/"), + problems: () => [host, "problems"].join("/"), + notAlone: () => [host, "not-alone"].join("/"), + allRight: () => [host, "all-right"].join("/"), + almostThere: () => [host, "almost-there"].join("/"), + partnerRightPlace: () => [host, "partner-right-place"].join("/"), + partnerThing: () => [host, "partner-thing"].join("/"), + partnerTotallyNormal: () => [host, "partner-totally-normal"].join("/"), + withHeart: () => [host, "with-heart"].join("/"), + withHead: () => [host, "with-head"].join("/"), + both: () => [host, "both"].join("/"), + relationshipZodiacInfo: () => [host, "relationship-zodiac-info"].join("/"), + satisfiedResult: () => [host, "satisfied-result"].join("/"), + aboutUs: () => [host, "about-us"].join("/"), notFound: () => [host, "404"].join("/"), }, server: { @@ -181,6 +197,20 @@ export const withoutFooterRoutes = [ routes.client.loadingInRelationship(), routes.client.worksForUs(), routes.client.relationshipAlmostThere(), + routes.client.singleZodiacInfo(), + routes.client.worksTraits(), + routes.client.notAlone(), + routes.client.allRight(), + routes.client.almostThere(), + routes.client.partnerRightPlace(), + routes.client.partnerThing(), + routes.client.partnerTotallyNormal(), + routes.client.withHeart(), + routes.client.withHead(), + routes.client.both(), + routes.client.relationshipZodiacInfo(), + routes.client.satisfiedResult(), + routes.client.aboutUs(), ]; export const withoutFooterPartOfRoutes = [routes.client.questionnaire()]; @@ -226,6 +256,19 @@ export const withoutHeaderRoutes = [ routes.client.loadingInRelationship(), routes.client.worksForUs(), routes.client.relationshipAlmostThere(), + routes.client.singleZodiacInfo(), + routes.client.worksTraits(), + routes.client.notAlone(), + routes.client.allRight(), + routes.client.almostThere(), + routes.client.partnerRightPlace(), + routes.client.partnerThing(), + routes.client.partnerTotallyNormal(), + routes.client.withHeart(), + routes.client.withHead(), + routes.client.both(), + routes.client.relationshipZodiacInfo(), + routes.client.satisfiedResult(), ]; export const hasNoHeader = (path: string) => { return !withoutHeaderRoutes.includes(`/${path.split("/")[1]}`); diff --git a/src/services/date/index.ts b/src/services/date/index.ts index 5150550..aa3fed7 100644 --- a/src/services/date/index.ts +++ b/src/services/date/index.ts @@ -8,8 +8,19 @@ export const getDateAsString = (date: Date | IDate | string): string => { if (date instanceof Date) { return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`; } - if (typeof date === 'string') { + if (typeof date === "string") { return date; } return `${date.year}-${date.month}-${date.day}`; }; + +export const getAge = (date: Date | string) => { + const today = new Date(); + const birthDate = new Date(date); + let age = today.getFullYear() - birthDate.getFullYear(); + const m = today.getMonth() - birthDate.getMonth(); + if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) { + age--; + } + return age; +}; diff --git a/src/store/questionnaire.ts b/src/store/questionnaire.ts old mode 100644 new mode 100755 index a1f3ee4..35f9491 --- a/src/store/questionnaire.ts +++ b/src/store/questionnaire.ts @@ -2,6 +2,7 @@ import { createSlice, createSelector } from "@reduxjs/toolkit"; import type { PayloadAction } from "@reduxjs/toolkit"; export interface IQuestionnaire { + // profile gender: string; flowChoice: string; goal: string; @@ -11,12 +12,26 @@ export interface IQuestionnaire { isBirthTime: string; birthtime: string; birthPlace: string; - relationshipProblem: string; + problems: string; + // personality traits + relateToStatement: string; + notice: string; + sensitive: string; + tendToOverthink: string; + mostImportant: string; + emotionalControl: string; + attitude: string; + want: string; + relaxing: string; + // partner partnerGender: string; partnerBirthdate: string; + partnerIsBirthTime: string; partnerBirthtime: string; partnerBirthPlace: string; + // relationships issueTogether: string; + currentlyAffecting: string; partnerPriority: string; satisfied: string; emotionalConnection: string; @@ -27,6 +42,19 @@ export interface IQuestionnaire { aboutGoals: string; appreciated: string; decisions: string; + // relationship_pattern + priority: string; + comfortable: string; + goodEnough: string; + angry: string; + innerSelf: string; + aboutPeople: string; + idealDate: string; + futurePartner: string; + idealPartner: string; + relationshipGoal: string; + // aboutUs + aboutUs: string; } const initialState: IQuestionnaire = { @@ -39,7 +67,7 @@ const initialState: IQuestionnaire = { isBirthTime: "", birthtime: "12:00", birthPlace: "", - relationshipProblem: "", + problems: "", partnerGender: "", partnerBirthdate: "", partnerBirthtime: "12:00", @@ -55,6 +83,28 @@ const initialState: IQuestionnaire = { aboutGoals: "", appreciated: "", decisions: "", + relateToStatement: "", + notice: "", + sensitive: "", + tendToOverthink: "", + mostImportant: "", + emotionalControl: "", + attitude: "", + want: "", + relaxing: "", + partnerIsBirthTime: "", + currentlyAffecting: "", + aboutUs: "", + priority: "", + comfortable: "", + goodEnough: "", + angry: "", + innerSelf: "", + aboutPeople: "", + idealDate: "", + futurePartner: "", + idealPartner: "", + relationshipGoal: "" }; const questionnaireSlice = createSlice({ diff --git a/src/store/token.ts b/src/store/token.ts old mode 100644 new mode 100755
currentStep ? "transparent" : step.color,
+ index > currentStepIndex ? "transparent" : step.color,
borderColor: step.color,
color: step.color,
}}
>
- {index > currentStep ? getIndexOfStep(step.id) : null}
+ {index > currentStepIndex ? getIndexOfStep(step.id) : null}
= currentStep ? "transparent" : "#bb6bd9",
+ lastStepIndex >= currentStepIndex ? "transparent" : "#bb6bd9",
borderColor: "#bb6bd9",
color: "#bb6bd9",
}}
>
- {lastStepIndex >= currentStep ? lastStepIndex + 1 : null}
+ {lastStepIndex >= currentStepIndex ? lastStepIndex + 1 : null}
+
+ Where did you hear about us?
+
+
+
+ );
+}
+
+export default AboutUsPage;
diff --git a/src/components/pages/AboutUs/styles.module.css b/src/components/pages/AboutUs/styles.module.css
new file mode 100755
index 0000000..8a557cb
--- /dev/null
+++ b/src/components/pages/AboutUs/styles.module.css
@@ -0,0 +1,36 @@
+.page {
+ position: relative;
+ height: fit-content;
+ min-height: calc(100vh - 50px);
+ display: flex;
+ justify-content: start;
+ align-items: center;
+ flex-direction: column;
+ background-position-y: bottom;
+ background-position-x: center;
+ background-size: cover;
+ background-repeat: no-repeat;
+ color: #fff;
+ padding-bottom: 64px;
+}
+
+.title {
+ font-size: 24px;
+ line-height: 28px;
+ align-self: flex-start;
+ margin-bottom: 30px;
+ text-align: left;
+ color: rgb(51, 51, 51);
+}
+
+.answers-container {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 20px;
+}
+
+.answer-container {
+ justify-content: center;
+}
diff --git a/src/components/pages/AllRight/index.tsx b/src/components/pages/AllRight/index.tsx
new file mode 100644
index 0000000..f33e4f3
--- /dev/null
+++ b/src/components/pages/AllRight/index.tsx
@@ -0,0 +1,52 @@
+import Title from "@/components/Title";
+import styles from "./styles.module.css";
+import MainButton from "@/components/MainButton";
+import { useNavigate } from "react-router-dom";
+import routes from "@/routes";
+import { selectors } from "@/store";
+import { useSelector } from "react-redux";
+import { getZodiacSignByDate } from "@/services/zodiac-sign";
+
+function AllRightPage() {
+ const navigate = useNavigate();
+ const { birthdate } = useSelector(selectors.selectQuestionnaire);
+ const zodiacSign = getZodiacSignByDate(birthdate);
+
+ const handleBack = () => {
+ navigate(-1);
+ };
+
+ const handleNext = () => {
+ navigate(`${routes.client.questionnaire()}/personalityTraits/attitude`);
+ };
+
+ return (
+
+ {aboutUsAnswers.map((answer, index) => (
+ handleClick(answer)}
+ />
+ ))}
+
+
+
+
+ All right! <br /> You keep your emotions in check{" "}
+ <span style={{ color: "#f2c94c" }}>{zodiacSign}</span>, but sometimes
+ people might want you to show more passion. We can give you some
+ insights about that!
+
+
+
+
+ Back
+
+
+ Next
+
+
+
+
+
+ Almost there! <br /> Now let's tailor your plan by understanding the{" "}
+ <span style={{ color: "#bb6cd9" }}>Relationship Pattern</span>.
+
+
+ + Please take your time when answering. Each response is used to craft + your guidance plan. +
+
+
+ Back
+
+
+ Next
+
+
+
+
+
+ Wonderful! <br />
+ Based on our data, only the top 17% of{" "}
+ <span style={{ color: "#f2c94c" }}>{zodiacSign}</span> people make
+ decisions with their heart and head. Using both in equal measure is
+ the key to feeling harmonious in your relationships.
+
+
+
+
+ Back
+
+
+ Next
+
+
+
+
+
+ You’re not alone. <br /> A lot of{" "}
+ <span style={{ color: "#f2c94c" }}>{zodiacSign}</span> people find it
+ difficult to control emotions due to their zodiac sign traits. Don’t
+ worry, we know how to address that!
+
+
+
+
+ Back
+
+
+ Next
+
+
+
+
+
+ You’ve come to the right place, <br />
+ <span style={{ color: "#f2c94c" }}>{zodiacSign}</span>!
+
+
+ + Knowing that your goal is already doable puts you ahead. Let’s keep + going so we can build a guidance plan based on your astrological + blueprint. +
+
+
+ Back
+
+
+ Next
+
+
+
+
+
+ <span style={{ color: "#f2c94c" }}>{zodiacSign}</span>, here’s the
+ thing... <br />
+ You can do this!
+
+
+ + We'll start with small insights so it doesn't feel too overwhelming. + Let'skeep going and build a guidance plan based on your astrological + blueprint. +
+
+
+ Back
+
+
+ Next
+
+
+
+
+
+ It’s totally normal to feel nervous,{" "}
+ <span style={{ color: "#f2c94c" }}>{zodiacSign}</span>.
+
+
+ + But we know you can do this. Let’s keep going so we can build a + guidance plan based on your astrological blueprint. +
+
+
+ Back
+
+
+ Next
+
+
+ {currentQuestion.description}
+ )} +
+ {!currentQuestion.answersElement &&
+ (currentQuestion.answers?.length
+ ? currentQuestion.answers
+ : answers
+ ).map((answer) => {
+ // if (!isShowAnswer(answer)) return null;
+ return (
+ {
+ answerClickHandler(answer);
+ }}
+ />
+ );
+ })}
+ {!!currentQuestion.answersElement && currentQuestion.answersElement}
+
+
+ )}
+ + Now, we need some information about{" "} + Your Partner’s Profile to create the + astrological synastry blueprint between you and your partner. +
+ ); +} + +export default WorksForUsDescription; diff --git a/src/components/pages/QuestionnaireIntermediate/WorksTraitsDescription/index.tsx b/src/components/pages/QuestionnaireIntermediate/WorksTraitsDescription/index.tsx new file mode 100644 index 0000000..5a3b7d3 --- /dev/null +++ b/src/components/pages/QuestionnaireIntermediate/WorksTraitsDescription/index.tsx @@ -0,0 +1,12 @@ +import styles from "../styles.module.css"; + +function WorksTraitsDescription() { + return ( ++ Now, we need some information about your{" "} + Personality Traits to dig deeper! +
+ ); +} + +export default WorksTraitsDescription; diff --git a/src/components/pages/QuestionnaireIntermediate/index.tsx b/src/components/pages/QuestionnaireIntermediate/index.tsx new file mode 100644 index 0000000..9728c0d --- /dev/null +++ b/src/components/pages/QuestionnaireIntermediate/index.tsx @@ -0,0 +1,68 @@ +import Title from "@/components/Title"; +import styles from "./styles.module.css"; +import MainButton from "@/components/MainButton"; +import { useNavigate } from "react-router-dom"; +import routes from "@/routes"; +import { useSelector } from "react-redux"; +import { selectors } from "@/store"; +import { textVariables } from "@/data"; + +function QuestionnaireIntermediatePage() { + const navigate = useNavigate(); + const { problems } = useSelector(selectors.selectQuestionnaire); + const path = window.location.href.split("/").pop(); + const backgroundImages = + textVariables[path as keyof typeof textVariables].backgroundImages; + const backgroundImage = + backgroundImages && backgroundImages[problems] + ? backgroundImages[problems] + : "/couple_holding_hands_1.webp"; + + const handleBack = () => { + navigate(-1); + }; + + const handleNext = () => { + if (path === "works-traits") { + return navigate(`${routes.client.questionnaire()}/personalityTraits/relateToStatement`); + } + navigate(`${routes.client.questionnaire()}/partnerProfile/partnerGender`); + }; + + return ( +
+
+ {path && (
+
+ {textVariables[path as keyof typeof textVariables].titles[
+ problems
+ ] || ""}
+
+ )}
+ {textVariables[path as keyof typeof textVariables].description}
+
+
+
+ Back
+
+
+ Next
+
+
+
+ }.webp`})
+ 
+ }.webp`})
+
+
+
+
+
+
+ {partnerZodiacSign} {partnerGender}s
+
+
+ {randomCompatibility}
+
+
+ So how compatible are you?
+
+
+ Let's go further and find out
+
+
+ Back
+
+
+ Next
+
+
+
+ {satisfied === "yes" && (
+
+ Well done! <br /> Based on our data only the top 30% of{" "}
+ <span style={{ color: "#f2c94c" }}>{zodiacSign}</span> find it easy
+ to communicate with their{" "}
+ <span style={{ color: "#f2c94c" }}>{partnerZodiacSign}</span>{" "}
+ partner.
+
+ )}
+ {satisfied !== "yes" && (
+
+ You’re not alone. <br /> Based on our data 74% of{" "}
+ <span style={{ color: "#f2c94c" }}>{zodiacSign}</span> find it
+ difficult to communicate with their{" "}
+ <span style={{ color: "#f2c94c" }}>{partnerZodiacSign}</span>{" "}
+ partner. <br /> We can help you improve this.
+
+ )}
+
+
+
+ Back
+
+
+ Next
+
+
+
+
+ {zodiac} {gender}s
+
+
+ {zodiacInfo?.description}
+
+
+ Back
+
+
+ Next
+
+
+
+
+
+ Based on our data, 39% of{" "}
+ <span style={{ color: "#f2c94c" }}>{zodiacSign}</span> people also
+ make decisions with their head. But don't worry, we'll consider that
+ while creating your guidance plan.
+
+
+
+
+ Back
+
+
+ Next
+
+
+
+
+
+ Based on our data, 49% of{" "}
+ <span style={{ color: "#f2c94c" }}>{zodiacSign}</span> people also
+ make decisions with their heart. But don't worry, we'll consider that
+ while creating your guidance plan.
+
+
+
+
+ Back
+
+
+ Next
+
+
+ A lot of{" "} + $zodiac people find it + difficult to control emotions due to their zodiac sign traits. Don’t + worry, we know how to address that! + + ), + sometimes: ( + <> + You’re not alone.
A lot of{" "} + $zodiac people find it + difficult to control emotions due to their zodiac sign traits. Don’t + worry, we know how to address that! + + ), + rarely: ( + <> + All right!
You keep your emotions in check{" "} + $zodiac, but sometimes + people might want you to show more passion. We can give you some + insights about that! + + ), + not_all: ( + <> + All right!
You keep your emotions in check{" "} + $zodiac, but sometimes + people might want you to show more passion. We can give you some + insights about that! + + ), + }, + description: "", + backgroundImages: { + yes: "/company_and_sunset.webp", + sometimes: "/company_and_sunset.webp", + rarely: "/laughing_women.webp", + not_all: "/laughing_women.webp", + }, + }, +}; + +export const relationshipAnswers: IAnswer[] = [ + { + id: "very_unhappy", + answer: "I’m very unhappy with how things are going in my relationship", + icon: "/slightly_frowning_face.png", + }, + { + id: "unhappy", + answer: + "I’m unhappy with parts of my relationship, but some things are working well", + icon: "/neutral_face.png", + }, + { + id: "happy", + answer: "I’m generally happy in my relationship", + icon: "/slightly_smiling_face.png", + }, +]; + +export const singleAnswers: IAnswer[] = [ + { + id: "very_unhappy", + answer: "I was unhappy with low things were going in my relationship", + icon: "/slightly_frowning_face.png", + }, + { + id: "unhappy", + answer: + "I was unhappy with parts of my relationship, but some thing were working", + icon: "/neutral_face.png", + }, + { + id: "happy", + answer: "I was generally happy with my relationship", + icon: "/slightly_smiling_face.png", + }, + { + id: "never_been", + answer: "I’ve never been in a relationship", + icon: "/wink.png", + }, +]; diff --git a/src/data/zodiacSignsCompatibility.ts b/src/data/zodiacSignsCompatibility.ts new file mode 100755 index 0000000..0ee3a45 --- /dev/null +++ b/src/data/zodiacSignsCompatibility.ts @@ -0,0 +1,7 @@ +export const zodiacSignsCompatibility = [ + "In the celestial orchestra, the notes played by a _gender_s _zodiacSign_ and a _partnerGender_s _partnerZodiacSign_ create a melody of their own.", + "Each interaction between a _gender_s _zodiacSign_ and a _partnerGender_s _partnerZodiacSign_ weaves a new starry tale.", + "The stars shimmer differently when a _gender_s _zodiacSign_ aligns paths with a _partnerGender_s _partnerZodiacSign_.", + "The astral energies of a _gender_s _zodiacSign_ merge uniquely with those of a _partnerGender_s _partnerZodiacSign_.", + "The astral realms take notice when a _gender_s _zodiacSign_ and a _partnerGender_s _partnerZodiacSign_ form a connection." +]; diff --git a/src/routes.ts b/src/routes.ts old mode 100644 new mode 100755 index 1a98043..d49f354 --- a/src/routes.ts +++ b/src/routes.ts @@ -50,9 +50,25 @@ const routes = { [host, "hyper-personalized-astrology"].join("/"), noTime: () => [host, "no-time"].join("/"), loadingInRelationship: () => [host, "loading-in-relationship"].join("/"), + worksRouter: () => [host, "works-router"].join("/"), worksForUs: () => [host, "works-for-us"].join("/"), + worksTraits: () => [host, "works-traits"].join("/"), relationshipAlmostThere: () => [host, "relationship-almost-there"].join("/"), + singleZodiacInfo: () => [host, "single-zodiac-info"].join("/"), + problems: () => [host, "problems"].join("/"), + notAlone: () => [host, "not-alone"].join("/"), + allRight: () => [host, "all-right"].join("/"), + almostThere: () => [host, "almost-there"].join("/"), + partnerRightPlace: () => [host, "partner-right-place"].join("/"), + partnerThing: () => [host, "partner-thing"].join("/"), + partnerTotallyNormal: () => [host, "partner-totally-normal"].join("/"), + withHeart: () => [host, "with-heart"].join("/"), + withHead: () => [host, "with-head"].join("/"), + both: () => [host, "both"].join("/"), + relationshipZodiacInfo: () => [host, "relationship-zodiac-info"].join("/"), + satisfiedResult: () => [host, "satisfied-result"].join("/"), + aboutUs: () => [host, "about-us"].join("/"), notFound: () => [host, "404"].join("/"), }, server: { @@ -181,6 +197,20 @@ export const withoutFooterRoutes = [ routes.client.loadingInRelationship(), routes.client.worksForUs(), routes.client.relationshipAlmostThere(), + routes.client.singleZodiacInfo(), + routes.client.worksTraits(), + routes.client.notAlone(), + routes.client.allRight(), + routes.client.almostThere(), + routes.client.partnerRightPlace(), + routes.client.partnerThing(), + routes.client.partnerTotallyNormal(), + routes.client.withHeart(), + routes.client.withHead(), + routes.client.both(), + routes.client.relationshipZodiacInfo(), + routes.client.satisfiedResult(), + routes.client.aboutUs(), ]; export const withoutFooterPartOfRoutes = [routes.client.questionnaire()]; @@ -226,6 +256,19 @@ export const withoutHeaderRoutes = [ routes.client.loadingInRelationship(), routes.client.worksForUs(), routes.client.relationshipAlmostThere(), + routes.client.singleZodiacInfo(), + routes.client.worksTraits(), + routes.client.notAlone(), + routes.client.allRight(), + routes.client.almostThere(), + routes.client.partnerRightPlace(), + routes.client.partnerThing(), + routes.client.partnerTotallyNormal(), + routes.client.withHeart(), + routes.client.withHead(), + routes.client.both(), + routes.client.relationshipZodiacInfo(), + routes.client.satisfiedResult(), ]; export const hasNoHeader = (path: string) => { return !withoutHeaderRoutes.includes(`/${path.split("/")[1]}`); diff --git a/src/services/date/index.ts b/src/services/date/index.ts index 5150550..aa3fed7 100644 --- a/src/services/date/index.ts +++ b/src/services/date/index.ts @@ -8,8 +8,19 @@ export const getDateAsString = (date: Date | IDate | string): string => { if (date instanceof Date) { return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`; } - if (typeof date === 'string') { + if (typeof date === "string") { return date; } return `${date.year}-${date.month}-${date.day}`; }; + +export const getAge = (date: Date | string) => { + const today = new Date(); + const birthDate = new Date(date); + let age = today.getFullYear() - birthDate.getFullYear(); + const m = today.getMonth() - birthDate.getMonth(); + if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) { + age--; + } + return age; +}; diff --git a/src/store/questionnaire.ts b/src/store/questionnaire.ts old mode 100644 new mode 100755 index a1f3ee4..35f9491 --- a/src/store/questionnaire.ts +++ b/src/store/questionnaire.ts @@ -2,6 +2,7 @@ import { createSlice, createSelector } from "@reduxjs/toolkit"; import type { PayloadAction } from "@reduxjs/toolkit"; export interface IQuestionnaire { + // profile gender: string; flowChoice: string; goal: string; @@ -11,12 +12,26 @@ export interface IQuestionnaire { isBirthTime: string; birthtime: string; birthPlace: string; - relationshipProblem: string; + problems: string; + // personality traits + relateToStatement: string; + notice: string; + sensitive: string; + tendToOverthink: string; + mostImportant: string; + emotionalControl: string; + attitude: string; + want: string; + relaxing: string; + // partner partnerGender: string; partnerBirthdate: string; + partnerIsBirthTime: string; partnerBirthtime: string; partnerBirthPlace: string; + // relationships issueTogether: string; + currentlyAffecting: string; partnerPriority: string; satisfied: string; emotionalConnection: string; @@ -27,6 +42,19 @@ export interface IQuestionnaire { aboutGoals: string; appreciated: string; decisions: string; + // relationship_pattern + priority: string; + comfortable: string; + goodEnough: string; + angry: string; + innerSelf: string; + aboutPeople: string; + idealDate: string; + futurePartner: string; + idealPartner: string; + relationshipGoal: string; + // aboutUs + aboutUs: string; } const initialState: IQuestionnaire = { @@ -39,7 +67,7 @@ const initialState: IQuestionnaire = { isBirthTime: "", birthtime: "12:00", birthPlace: "", - relationshipProblem: "", + problems: "", partnerGender: "", partnerBirthdate: "", partnerBirthtime: "12:00", @@ -55,6 +83,28 @@ const initialState: IQuestionnaire = { aboutGoals: "", appreciated: "", decisions: "", + relateToStatement: "", + notice: "", + sensitive: "", + tendToOverthink: "", + mostImportant: "", + emotionalControl: "", + attitude: "", + want: "", + relaxing: "", + partnerIsBirthTime: "", + currentlyAffecting: "", + aboutUs: "", + priority: "", + comfortable: "", + goodEnough: "", + angry: "", + innerSelf: "", + aboutPeople: "", + idealDate: "", + futurePartner: "", + idealPartner: "", + relationshipGoal: "" }; const questionnaireSlice = createSlice({ diff --git a/src/store/token.ts b/src/store/token.ts old mode 100644 new mode 100755