55 lines
1.7 KiB
TypeScript
Executable File
55 lines
1.7 KiB
TypeScript
Executable File
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 (
|
||
<section className={`${styles.page} page`}>
|
||
<img src="/clouds.svg" alt="The clouds" style={{ minHeight: "175px" }} />
|
||
<div>
|
||
<Title variant="h1" className={styles.title}>
|
||
It’s totally normal to feel nervous,{" "}
|
||
<span style={{ color: "#f2c94c" }}>{zodiacSign}</span>.
|
||
</Title>
|
||
<p className={styles.text}>
|
||
But we know you can do this. Let’s keep going so we can build a
|
||
guidance plan based on your astrological blueprint.
|
||
</p>
|
||
</div>
|
||
<div className={styles["buttons-container"]}>
|
||
<MainButton
|
||
className={`${styles.button} ${styles["back-button"]}`}
|
||
onClick={handleBack}
|
||
>
|
||
Back
|
||
</MainButton>
|
||
<MainButton
|
||
className={`${styles.button} ${styles["next-button"]}`}
|
||
onClick={handleNext}
|
||
>
|
||
Next
|
||
</MainButton>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
export default PartnerTotallyNormalPage;
|