This commit is contained in:
Daniil Chemerkin 2025-02-10 22:53:30 +00:00
parent 170720d316
commit 6cc3ec39a4
3 changed files with 38 additions and 23 deletions

View File

@ -10,6 +10,7 @@ import { useEffect } from "react";
import { actions } from "@/store";
// import StarSVG from "../../images/SVG/Star";
import { usePreloadImages } from "@/hooks/preload/images";
import { DotLottieReact } from "@lottiefiles/dotlottie-react";
function FindHappiness() {
const navigate = useNavigate();
@ -50,6 +51,13 @@ function FindHappiness() {
</ol>
</div>
</div> */}
<DotLottieReact
className={`${styles["lottie-animation"]} ym-hide-content`}
// data={animationData}
autoplay
loop={false}
width={1920}
/>
<img
className={styles.image}
src={`${compatibilityV2Prefix}/hand-with-lines.png`}
@ -59,24 +67,24 @@ function FindHappiness() {
{translate("/find-your-happiness.title")}
</Title>
<div className={styles.advantages}>
<ul className={styles.list}>
<li>
{translate("/find-your-happiness.advantage1")}
</li>
<li>
{translate("/find-your-happiness.advantage2")}
</li>
<li>
{translate("/find-your-happiness.advantage3")}
</li>
</ul>
<ul className={styles.list}>
<li>
{translate("/find-your-happiness.advantage1")}
</li>
<li>
{translate("/find-your-happiness.advantage2")}
</li>
<li>
{translate("/find-your-happiness.advantage3")}
</li>
</ul>
</div>
<div className={styles["button-container"]}>
<Button onClick={() => navigate(`${compatibilityV2Prefix}/gender`)}>
{translate("next")}
</Button>
</div>
<p className={styles.description}>
<div className={styles["button-container"]}>
<Button onClick={() => navigate(`${compatibilityV2Prefix}/gender`)}>
{translate("next")}
</Button>
</div>
<p className={styles.description}>
{translate("/find-your-happiness.text")}
</p>
</>

View File

@ -74,4 +74,10 @@
.list li {
margin-bottom: 8px;
}
.lottie-animation {
width: 0;
height: 0;
opacity: 0;
}

View File

@ -21,8 +21,9 @@ import routes from "@/routes";
function HeadOrHeartResult() {
const navigate = useNavigate();
const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
const { headOrHeart } = useSelector(selectors.selectCompatibilityV2Answers);
const { headOrHeart, relationshipStatus } = useSelector(selectors.selectCompatibilityV2Answers);
const { gender, partnerGender, partnerBirthdate } = useSelector(selectors.selectQuestionnaire);
const translatePrefix = relationshipStatus === "single" ? "single" : "with-partner";
// const { animationData } = useLottie({
// loadKey: animations[headOrHeart as keyof typeof animations],
@ -55,9 +56,9 @@ function HeadOrHeartResult() {
</div> */}
<Title variant="h1" className={styles.title}>
{headOrHeart === "both" &&
translate("/both.title", {
translate(`/both.${translatePrefix}.title`, {
wonderful: (
<b style={{ color: "#224e90" }}>{translate("/both.wonderful")}</b>
<b style={{ color: "#224e90" }}>{translate(`/both.${translatePrefix}.wonderful`)}</b>
),
zodiacSign: (
<b style={{ color: "#224e90" }}>
@ -73,7 +74,7 @@ function HeadOrHeartResult() {
partnerGender: translate(partnerGender?.toLowerCase()).toLowerCase()
})}
{headOrHeart === "head" &&
translate("/with-head.title", {
translate(`/with-head.${translatePrefix}.title`, {
zodiacSign: (
<b style={{ color: "#224e90" }}>
{translate(`zodiac_signs.${zodiacSign?.toLowerCase()}`)}
@ -88,7 +89,7 @@ function HeadOrHeartResult() {
partnerGender: translate(partnerGender?.toLowerCase()).toLowerCase()
})}
{headOrHeart === "heart" &&
translate("/with-heart.title", {
translate(`/with-heart.${translatePrefix}.title`, {
zodiacSign: (
<b style={{ color: "#224e90" }}>
{translate(`zodiac_signs.${zodiacSign?.toLowerCase()}`)}
@ -103,7 +104,7 @@ function HeadOrHeartResult() {
partnerGender: translate(partnerGender?.toLowerCase()).toLowerCase()
})}
{headOrHeart === "depends" &&
translate("/depends.title", {
translate(`/depends.${translatePrefix}.title`, {
zodiacSign: (
<b style={{ color: "#224e90" }}>
{translate(`zodiac_signs.${zodiacSign?.toLowerCase()}`)}