85 lines
2.4 KiB
TypeScript
85 lines
2.4 KiB
TypeScript
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 Header from "../../components/Header";
|
|
import { DotLottieReact } from "@lottiefiles/dotlottie-react";
|
|
import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
|
|
import { usePreloadImages } from "@/hooks/preload/images";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
function AlmostTherePage() {
|
|
const navigate = useNavigate();
|
|
const { t } = useTranslation();
|
|
usePreloadImages([
|
|
"/raising_hands.webp",
|
|
"/fork_and_knife_with_plate.webp",
|
|
"/mountain.webp",
|
|
"/cityscape_at_dusk.webp",
|
|
"/national_park.webp",
|
|
"/parachute.webp",
|
|
"/microscope.webp",
|
|
"/paperclip.webp",
|
|
"/blue_book.webp",
|
|
"/party_popper.webp",
|
|
]);
|
|
|
|
const { animationData } = useLottie({
|
|
loadKey: ELottieKeys.magnifyingGlassAndPlanet,
|
|
});
|
|
|
|
const handleBack = () => {
|
|
navigate(-1);
|
|
};
|
|
|
|
const handleNext = () => {
|
|
navigate(
|
|
`${routes.client.questionnaireV1()}/relationship_pattern/priority`
|
|
);
|
|
};
|
|
|
|
return (
|
|
<section className={`${styles.page} page`}>
|
|
<div className={styles["background_wrap"]} />
|
|
<Header
|
|
isBackButtonVisible={false}
|
|
classNameTitle={styles["header-title"]}
|
|
/>
|
|
<div className={`${styles["lottie-animation"]} ym-hide-content`}>
|
|
{animationData && (
|
|
<DotLottieReact data={animationData} autoplay loop={false} />
|
|
)}
|
|
</div>
|
|
<div>
|
|
<Title variant="h1" className={styles.title}>
|
|
{t("/almost-there.title", {
|
|
gradient: (
|
|
<span className={styles.gradient}>
|
|
{t("/almost-there.title_gradient")}
|
|
</span>
|
|
),
|
|
})}
|
|
</Title>
|
|
<p className={styles.text}>{t("/almost-there.description")}</p>
|
|
</div>
|
|
<div className={styles["buttons-container"]}>
|
|
<MainButton
|
|
className={`${styles.button} ${styles["back-button"]}`}
|
|
onClick={handleBack}
|
|
>
|
|
{t("back")}
|
|
</MainButton>
|
|
<MainButton
|
|
className={`${styles.button} ${styles["next-button"]}`}
|
|
onClick={handleNext}
|
|
>
|
|
{t("next")}
|
|
</MainButton>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default AlmostTherePage;
|