96 lines
2.9 KiB
TypeScript
96 lines
2.9 KiB
TypeScript
import routes from "@/routes";
|
|
import styles from "./styles.module.scss";
|
|
import Title from "@/components/Title";
|
|
import Button from "../../components/Button";
|
|
import Policy from "@/components/Policy";
|
|
import { useTranslations } from "@/hooks/translations";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { ELocalesPlacement } from "@/locales";
|
|
// import { DotLottieReact } from "@lottiefiles/dotlottie-react";
|
|
import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
|
|
import { selectors } from "@/store";
|
|
import { useSelector } from "react-redux";
|
|
import { getZodiacSignByDate } from "@/services/zodiac-sign";
|
|
|
|
function PalmsInformation() {
|
|
const { translate } = useTranslations(ELocalesPlacement.CompatibilityV3);
|
|
const { gender, birthdate } = useSelector(selectors.selectQuestionnaire);
|
|
const zodiacSign = getZodiacSignByDate(birthdate);
|
|
const navigate = useNavigate();
|
|
// const { animationData } =
|
|
useLottie({
|
|
// loadKey: ELottieKeys.handSymbols,
|
|
preloadKey: ELottieKeys.scalesHeadPalmistry,
|
|
});
|
|
|
|
const handleNext = () => {
|
|
navigate(routes.client.compatibilityV3RelationshipStatus());
|
|
};
|
|
|
|
return (
|
|
<div className={styles["page-container"]}>
|
|
{/* {animationData && (
|
|
<DotLottieReact
|
|
className={`${styles["lottie-animation"]} ym-hide-content`}
|
|
data={animationData}
|
|
autoplay
|
|
loop={false}
|
|
width={1920}
|
|
/>
|
|
)} */}
|
|
<div className={styles.zodiac}>
|
|
<img
|
|
className={styles.image}
|
|
// src={images(`zodiacs/${gender}/${zodiacSign.toUpperCase()}.webp`)}
|
|
src={`/zodiac-signs/${gender?.toLowerCase()}/${zodiacSign.toLowerCase()}.svg`}
|
|
alt="Zodiac sign"
|
|
/>
|
|
</div>
|
|
<Title variant="h2" className={styles.title}>
|
|
{translate(`/palms-information.${zodiacSign.toLowerCase()}.title`)}
|
|
</Title>
|
|
<p className={styles.description}>
|
|
{translate(`/palms-information.${zodiacSign.toLowerCase()}.description`, {
|
|
br: <br />,
|
|
})}
|
|
</p>
|
|
<Button onClick={handleNext}>
|
|
{translate("next")}
|
|
</Button>
|
|
<Policy>
|
|
{translate("privacy_policy", {
|
|
eulaLink: (
|
|
<a
|
|
href="https://aura.wit.life/terms"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{translate("eula_link")}
|
|
</a>
|
|
),
|
|
privacyLink: (
|
|
<a
|
|
href="https://aura.wit.life/privacy"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{translate("privacy_notice")}
|
|
</a>
|
|
),
|
|
clickHere: (
|
|
<a
|
|
href="https://aura.wit.life/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{translate("policy_here")}
|
|
</a>
|
|
),
|
|
})}
|
|
</Policy>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default PalmsInformation;
|