develop

public/locales/compatibility-v3/en/male_en.json

@@ -58,7 +58,34 @@
         "get-my-reading-in-app": "GET MY READING IN THE APP",
         "why_love": "Why does everyone <color> ?",
         "why_love_color": "love AURA",
-        "as_seen_in": "<color> As Seen in "
+        "as_seen_in": "<color> As Seen in ",
+        "your-reading": {
+            "title": "Your Reading",
+            "subtitle": "Что ты получишь",
+            "points": {
+                "v1": {
+                    "point1": "Разбор вашего притяжения и скрытых сил, управляющих вашими чувствами.",
+                    "point2": "Индивидуальный прогноз на развитие отношений: что ждет вас впереди.",
+                    "point3": "Вопросы и персональные рекомендации от эксперта.",
+                    "point4": "Уникальная информация, которую нельзя найти в стандартных гороскопах.",
+                    "point5": "Полная картина вашей совместимости: уровни в процентах — без иллюзий и догадок.",
+                    "point6": "Подробный астрологический разбор: что сближает и что вызывает напряжение.",
+                    "point7": "Глубокое понимание партнера: как он любит и что для него важно.",
+                    "point8": "Графики, схемы и объяснения для наглядной динамики ваших отношений."
+                },
+                "v2": {
+                    "point1": "Полная картина вашей совместимости: уровни в процентах — без иллюзий и догадок.",
+                    "point2": "Подробный астрологический разбор: что сближает и что вызывает напряжение.",
+                    "point3": "Глубокое понимание партнера: как он любит и что для него важно.",
+                    "point4": "Графики, схемы и объяснения для наглядной динамики ваших отношений.",
+                    "point5": "Разбор вашего притяжения и скрытых сил, управляющих вашими чувствами.",
+                    "point6": "Индивидуальный прогноз на развитие отношений: что ждет вас впереди.",
+                    "point7": "Вопросы и персональные рекомендации от эксперта.",
+                    "point8": "Уникальная информация, которую нельзя найти в стандартных гороскопах."
+                }
+            },
+            "description": "To read the full reading, you need to get access through the app for your iPhone"
+        }
     },
     "/find-your-happiness": {
         "title": "Gain Clarity and Confidence in Life",

src/components/CompatibilityV2/components/Answer/index.tsx

@@ -3,7 +3,7 @@ import styles from "./styles.module.scss";
 
 interface IAnswer {
   id: string;
-  title: string;
+  title: string | React.ReactNode;
 }
 
 type TAnswerProps = {

src/components/CompatibilityV2/pages/Gender/index.tsx

@@ -39,9 +39,18 @@ function GenderPage() {
 
   const { flags, ready } = useMetricABFlags();
   const pageType = flags?.genderPageType?.[0] || "v2";
+  const genderButtonIcon = flags?.genderButtonIcon?.[0] || "hide";
+
   const localGenders = genders.map((gender) => ({
     id: gender.id,
-    title: translate(gender.id, undefined, ELocalesPlacement.V1),
+    title: <>
+      {genderButtonIcon === "show" &&
+        <span className={styles.genderIcon}>
+          {gender.id === "male" ? "🙋‍♂️" : "🙋‍♀️"}
+        </span>
+      }
+      {translate(gender.id, undefined, ELocalesPlacement.V1)}
+    </>,
   }));
 
   useEffect(() => {

src/components/CompatibilityV2/pages/Gender/styles.module.scss

@@ -63,3 +63,8 @@
     }
   }
 }
+
+.genderIcon {
+  font-size: 50px;
+  margin-right: 4px;
+}

src/components/CompatibilityV3/components/Answer/index.tsx

@@ -3,7 +3,7 @@ import styles from "./styles.module.scss";
 
 interface IAnswer {
   id: string;
-  title: string;
+  title: string | React.ReactNode;
 }
 
 type TAnswerProps = {

src/components/CompatibilityV3/pages/Gender/index.tsx

@@ -39,9 +39,18 @@ function GenderPage() {
 
   const { flags, ready } = useMetricABFlags();
   const pageType = flags?.genderPageType?.[0] || "v2";
+  const genderButtonIcon = flags?.genderButtonIcon?.[0] || "hide";
+
   const localGenders = genders.map((gender) => ({
     id: gender.id,
-    title: translate(gender.id, undefined, ELocalesPlacement.V1),
+    title: <>
+      {genderButtonIcon === "show" &&
+        <span className={styles.genderIcon}>
+          {gender.id === "male" ? "🙋‍♂️" : "🙋‍♀️"}
+        </span>
+      }
+      {translate(gender.id, undefined, ELocalesPlacement.V1)}
+    </>,
   }));
 
   useEffect(() => {

src/components/CompatibilityV3/pages/Gender/styles.module.scss

@@ -63,3 +63,8 @@
     }
   }
 }
+
+.genderIcon {
+  font-size: 50px;
+  margin-right: 4px;
+}

src/components/CompatibilityV3/pages/PalmsInformation/index.tsx

@@ -10,7 +10,6 @@ import { ELocalesPlacement } from "@/locales";
 import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { selectors } from "@/store";
 import { useSelector } from "react-redux";
-import { images } from "../../data";
 import { getZodiacSignByDate } from "@/services/zodiac-sign";
 
 function PalmsInformation() {
@@ -42,7 +41,8 @@ function PalmsInformation() {
       <div className={styles.zodiac}>
         <img
           className={styles.image}
-          src={images(`zodiacs/${gender}/${zodiacSign.toUpperCase()}.webp`)}
+          // src={images(`zodiacs/${gender}/${zodiacSign.toUpperCase()}.webp`)}
+          src={`/zodiac-signs/${gender?.toLowerCase()}/${zodiacSign.toLowerCase()}.svg`}
           alt="Zodiac sign"
         />
       </div>

src/components/CompatibilityV3/pages/PalmsInformation/styles.module.scss

@@ -26,31 +26,31 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: -150px;
 
   & > img {
     height: 100%;
     position: relative;
+    max-width: 260px;
     z-index: -2;
   }
 
-  &::after {
+  // &::after {
-    content: "";
+  //   content: "";
-    position: absolute;
+  //   position: absolute;
-    bottom: 0;
+  //   bottom: 0;
-    left: 0;
+  //   left: 0;
-    width: 100%;
+  //   width: 100%;
-    height: 60%;
+  //   height: 60%;
-    background: linear-gradient(to bottom,
+  //   background: linear-gradient(to bottom,
-        rgba(255, 255, 255, 0) 0%,
+  //       rgba(255, 255, 255, 0) 0%,
-        rgba(255, 255, 255, .7) 10%,
+  //       rgba(255, 255, 255, .7) 10%,
-        rgba(255, 255, 255, 1) 15%,
+  //       rgba(255, 255, 255, 1) 15%,
-        rgba(255, 255, 255, 1) 30%,
+  //       rgba(255, 255, 255, 1) 30%,
-        rgba(255, 255, 255, 1) 40%,
+  //       rgba(255, 255, 255, 1) 40%,
-        rgba(255, 255, 255, 1) 100%);
+  //       rgba(255, 255, 255, 1) 100%);
-    pointer-events: none;
+  //   pointer-events: none;
-    z-index: -1;
+  //   z-index: -1;
-  }
+  // }
 }
 
 .description {

src/components/CompatibilityV3/pages/PalmsInformationPartner/index.tsx

@@ -9,7 +9,6 @@ import { ELocalesPlacement } from "@/locales";
 import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { selectors } from "@/store";
 import { useSelector } from "react-redux";
-import { images } from "../../data";
 import { getZodiacSignByDate } from "@/services/zodiac-sign";
 
 function PalmsInformationPartner() {
@@ -42,7 +41,8 @@ function PalmsInformationPartner() {
       <div className={styles.zodiac}>
         <img
           className={styles.image}
-          src={images(`zodiacs/${partnerGender}/${zodiacSign?.toUpperCase()}.webp`)}
+          // src={images(`zodiacs/${partnerGender}/${zodiacSign?.toUpperCase()}.webp`)}
+          src={`/zodiac-signs/${partnerGender?.toLowerCase()}/${zodiacSign.toLowerCase()}.svg`}
           alt="Zodiac sign"
         />
       </div>

src/components/CompatibilityV3/pages/PalmsInformationPartner/styles.module.scss

@@ -26,31 +26,31 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: -150px;
 
   & > img {
     height: 100%;
+    max-width: 260px;
     position: relative;
     z-index: -2;
   }
 
-  &::after {
+  // &::after {
-    content: "";
+  //   content: "";
-    position: absolute;
+  //   position: absolute;
-    bottom: 0;
+  //   bottom: 0;
-    left: 0;
+  //   left: 0;
-    width: 100%;
+  //   width: 100%;
-    height: 60%;
+  //   height: 60%;
-    background: linear-gradient(to bottom,
+  //   background: linear-gradient(to bottom,
-        rgba(255, 255, 255, 0) 0%,
+  //       rgba(255, 255, 255, 0) 0%,
-        rgba(255, 255, 255, .7) 10%,
+  //       rgba(255, 255, 255, .7) 10%,
-        rgba(255, 255, 255, 1) 15%,
+  //       rgba(255, 255, 255, 1) 15%,
-        rgba(255, 255, 255, 1) 30%,
+  //       rgba(255, 255, 255, 1) 30%,
-        rgba(255, 255, 255, 1) 40%,
+  //       rgba(255, 255, 255, 1) 40%,
-        rgba(255, 255, 255, 1) 100%);
+  //       rgba(255, 255, 255, 1) 100%);
-    pointer-events: none;
+  //   pointer-events: none;
-    z-index: -1;
+  //   z-index: -1;
-  }
+  // }
 }
 
 .description {

src/components/CompatibilityV3/pages/ScannedPhoto/index.tsx

@@ -208,12 +208,20 @@ function ScannedPhoto() {
     if (progress >= loadingProfilePoints.length * 100) {
       return onEndLoading();
     }
+
+    const getDelay = () => {
+      if (progress < 15) return 50;
+      if (progress === 15) return 2500;
+      return 100;
+    }
+
     interval.current = setTimeout(() => {
       setProgress((prevProgress) => {
         if (!isPause && !isDecorationShown) return prevProgress + 1;
         return prevProgress;
       });
-    }, 100);
+    }, getDelay());
+
     return () => {
       clearTimeout(interval.current);
     };

src/components/CompatibilityV3/pages/TryApp/components/YourReading/index.tsx

@@ -0,0 +1,63 @@
+import { useTranslations } from "@/hooks/translations";
+import styles from "./styles.module.scss"
+import Title from "@/components/Title";
+import ZodiacImages from "../ZodiacImages";
+import { ELocalesPlacement } from "@/locales";
+import { useMetricABFlags } from "@/services/metric/metricService";
+
+interface YourReadingProps {
+    gender: string;
+    zodiacSign: string;
+    relationshipStatus: string;
+    partnerGender?: string;
+    partnerZodiacSign?: string;
+}
+
+function YourReading({
+    gender,
+    zodiacSign,
+    relationshipStatus,
+    partnerGender,
+    partnerZodiacSign
+}: YourReadingProps) {
+    const { translate } = useTranslations(ELocalesPlacement.CompatibilityV3);
+    const { flags, ready } = useMetricABFlags();
+    const version = flags?.yourReading?.[0] ?? "v1";
+
+    return (
+        <div className={styles.container}>
+            <Title
+                className={styles.title}
+                variant="h3"
+            >
+                {translate("/try-app.your-reading.title")}
+            </Title>
+            <ZodiacImages
+                gender={gender}
+                zodiacSign={zodiacSign}
+                relationshipStatus={relationshipStatus}
+                partnerGender={partnerGender}
+                partnerZodiacSign={partnerZodiacSign}
+                classNameContainer={styles.zodiacImages}
+            />
+            <Title
+                className={styles.subtitle}
+                variant="h4"
+            >
+                {translate("/try-app.your-reading.subtitle")}
+            </Title>
+            <ul className={styles.points}>
+                {ready && Array.from({ length: 8 }).map((_, index) => (
+                    <li key={index} className={`${index > 3 ? styles.point_blur : ""}`}>
+                        {translate(`/try-app.your-reading.points.${version}.point${index + 1}`)}
+                    </li>
+                ))}
+            </ul>
+            <p className={styles.description}>
+                {translate("/try-app.your-reading.description")}
+            </p>
+        </div>
+    )
+}
+
+export default YourReading

src/components/CompatibilityV3/pages/TryApp/components/YourReading/styles.module.scss

@@ -0,0 +1,69 @@
+.container {
+    width: 100dvw;
+    background: linear-gradient(0.63deg, rgba(255, 255, 255, 0.3) 0.53%, rgba(75, 136, 255, 0.31) 99.45%);
+    border-radius: 30px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 46px 24px 0;
+
+    & * {
+        font-family: SF Pro Text;
+    }
+
+    &>.title {
+        font-weight: 600;
+        font-size: 24px;
+        line-height: 30px;
+        text-align: center;
+        color: #057DD4;
+        margin-bottom: 0;
+    }
+
+    &>.subtitle {
+        font-weight: 700;
+        font-size: 20px;
+        line-height: 25px;
+        text-align: center;
+        color: #0860A0;
+        margin-top: 22px;
+        margin-bottom: 0;
+    }
+}
+
+.points {
+    list-style: none;
+    padding: 0;
+    margin: 22px 0 0 24px;
+
+    li {
+        font-weight: 400;
+        font-size: 20px;
+        line-height: 25px;
+        list-style-type: disc;
+
+        &::marker {
+            font-size: 12px;
+        }
+
+        &.point_blur {
+            filter: blur(4px);
+            opacity: 0.7;
+            user-select: none;
+            pointer-events: none;
+        }
+    }
+}
+
+.zodiacImages {
+    width: 170dvw;
+}
+
+.description {
+    font-weight: 700;
+    font-size: 19px;
+    line-height: 22.99px;
+    text-align: center;
+    color: #0860A0;
+}

src/components/CompatibilityV3/pages/TryApp/components/ZodiacImages/index.tsx

@@ -0,0 +1,39 @@
+import styles from "./styles.module.scss"
+
+interface ZodiacImagesProps {
+    gender: string;
+    partnerGender?: string;
+    zodiacSign: string;
+    partnerZodiacSign?: string;
+    relationshipStatus: string;
+    classNameContainer?: string;
+}
+
+function ZodiacImages({
+    gender,
+    partnerGender,
+    zodiacSign,
+    partnerZodiacSign,
+    relationshipStatus,
+    classNameContainer = ""
+}: ZodiacImagesProps) {
+
+    const getZodiacImagesWithPartnerClassName = () => {
+        if (relationshipStatus === "single") {
+            return "";
+        }
+        return `${styles["with-partner"]} ${styles[`with-partner-${gender}-${partnerGender}`]}`;
+    }
+
+    return (
+        <div
+            className={`${styles["zodiac-images"]} ${getZodiacImagesWithPartnerClassName()} ${classNameContainer}`}
+        // style={{ marginBottom: `${-height / 2}px` }}
+        >
+            <img src={`/zodiac-signs/${gender?.toLowerCase()}/${zodiacSign?.toLowerCase()}.svg`} alt="Profile zodiac sign" />
+            {relationshipStatus !== "single" && <img src={`/zodiac-signs/${partnerGender?.toLowerCase()}/${partnerZodiacSign?.toLowerCase()}.svg`} alt="Partner zodiac sign" />}
+        </div>
+    )
+}
+
+export default ZodiacImages

src/components/CompatibilityV3/pages/TryApp/components/ZodiacImages/styles.module.scss

@@ -0,0 +1,65 @@
+.zodiac-images {
+    position: relative;
+    width: 100dvw;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0px;
+    margin-top: 8px;
+
+    &.with-partner {
+        // &>img:first-child {
+        //   margin-right: -30%;
+        // }
+
+        &>img:last-child {
+            // margin-left: -10px;
+            z-index: 2;
+        }
+
+        &>img {
+            width: 50%;
+        }
+    }
+
+    img {
+        position: relative;
+        width: 70%;
+        object-fit: cover;
+        z-index: 3;
+    }
+
+    &.with-partner-male-female {
+        flex-direction: row-reverse;
+    }
+
+    &.with-partner-male-male {
+        &>img:first-child {
+            transform: scaleX(-1);
+        }
+    }
+
+    &.with-partner-female-female {
+        &>img:last-child {
+            transform: scaleX(-1);
+        }
+    }
+
+    // &::after {
+    //   content: "";
+    //   position: absolute;
+    //   bottom: 0;
+    //   left: 0;
+    //   width: 100%;
+    //   height: 60%;
+    //   background: linear-gradient(to bottom,
+    //       rgba(255, 255, 255, 0) 0%,
+    //       rgba(255, 255, 255, .7) 10%,
+    //       rgba(255, 255, 255, 1) 15%,
+    //       rgba(255, 255, 255, 1) 30%,
+    //       rgba(255, 255, 255, 1) 40%,
+    //       rgba(255, 255, 255, 1) 100%);
+    //   pointer-events: none;
+    //   z-index: -1;
+    // }
+}

src/components/CompatibilityV3/pages/TryApp/index.tsx

@@ -22,9 +22,10 @@ import CopyCode from "./components/CopyCode";
 import { copyToClipboard } from "@/services/data";
 import { useSelector } from "react-redux";
 import { selectors } from "@/store";
-import { useDynamicSize } from "@/hooks/useDynamicSize";
 import { getZodiacSignByDate } from "@/services/zodiac-sign";
 import { formatDateToLocale } from "@/locales/localFormats";
+import ZodiacImages from "./components/ZodiacImages";
+import YourReading from "./components/YourReading";
 
 function TryApp() {
   const { translate } = useTranslations(ELocalesPlacement.CompatibilityV3);
@@ -35,8 +36,6 @@ function TryApp() {
 
   const readingReadyRef = useRef<HTMLDivElement>(null);
   const [isHeaderVisible, setIsHeaderVisible] = useState(false);
-
-  const { height, elementRef } = useDynamicSize<HTMLDivElement>({});
   const { gender, birthdate, partnerGender, partnerBirthdate } = useSelector(selectors.selectQuestionnaire);
   const { dateEvent } = useSelector(selectors.selectCompatibilityV3Answers);
   const { relationshipStatus } = useSelector(selectors.selectCompatibilityV3Answers);
@@ -80,14 +79,13 @@ function TryApp() {
         {translate("/trial-payment.information-title")}
       </Title>
       {/* <PalmPhoto /> */}
-      <div
+      <ZodiacImages
-        className={`${styles["zodiac-images"]} ${relationshipStatus !== "single" ? styles["with-partner"] : ""}`}
+        gender={gender}
-        ref={elementRef}
+        zodiacSign={zodiacSign}
-        style={{ marginBottom: `${-height / 2}px` }}
+        relationshipStatus={relationshipStatus}
-      >
+        partnerGender={partnerGender}
-        <img src={images(`zodiacs/${gender}/${zodiacSign?.toUpperCase()}.webp`)} alt="Profile zodiac sign" />
+        partnerZodiacSign={partnerZodiacSign}
-        {relationshipStatus !== "single" && <img src={images(`zodiacs/${partnerGender}/${partnerZodiacSign?.toUpperCase()}.webp`)} alt="Partner zodiac sign" />}
+      />
-      </div>
       {(relationshipStatus === "single" || !partnerBirthdate) &&
         <p className={styles["information-description"]}>
           {translate("/trial-payment.information-description-single", {
@@ -142,6 +140,13 @@ function TryApp() {
       <p className={styles.notShareDescription}>
         {translate("/try-app.not_share_description")}
       </p>
+      <YourReading
+        gender={gender}
+        zodiacSign={zodiacSign}
+        relationshipStatus={relationshipStatus}
+        partnerGender={partnerGender}
+        partnerZodiacSign={partnerZodiacSign}
+      />
       {/* <Button className={styles.getPredictionInApp} onClick={downloadApp}>
         <img src={images("apple-icon.png")} alt="Apple icon" />
         {translate("/try-app.get_prediction_in_app")}
@@ -156,17 +161,17 @@ function TryApp() {
         fontSize: "26px"
       }}>
         {translate("/try-app.your_palm_reading_is_ready")}
-      </Title>
+      </Title> */}
-      <p className={styles.instructionPoint2}>{translate("/try-app.instruction_point_4")}</p>
+      <p className={styles.instructionPoint2} style={{ marginTop: "32px" }}>{translate("/try-app.instruction_point_4")}</p>
       <CopyCode variant="black" />
-      <p className={styles.instructionPoint2} style={{ marginTop: "24px" }}>{translate("/try-app.instruction_point_5")}</p> */}
+      <p className={styles.instructionPoint2} style={{ marginTop: "24px" }}>{translate("/try-app.instruction_point_5")}</p>
       {/* <Button className={styles["begin-trial"]} onClick={downloadApp}>
         {translate("/try-app.get-my-reading-in-app")}
       </Button> */}
-      {/* <Button className={styles.getPredictionInApp} onClick={downloadApp}>
+      <Button className={styles.getPredictionInApp} style={{ marginBottom: "50px" }} onClick={downloadApp}>
         <img src={images("apple-icon.png")} alt="Apple icon" />
         {translate("/try-app.get_prediction_in_app")}
-      </Button> */}
+      </Button>
       <WhatIncluded />
       {/* <PalmsSayAbout /> */}
       {/* <EnterCode />

src/components/CompatibilityV3/pages/TryApp/styles.module.scss

@@ -99,21 +99,22 @@
   font-size: 24px;
   font-weight: 700;
   margin-bottom: 0;
+  margin-top: 24px;
 }
 
 .zodiac-images {
   position: relative;
-  width: 100%;
+  width: 100dvw;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
   gap: 0px;
   margin-top: 8px;
 
   &.with-partner {
-    &>img:first-child {
+    // &>img:first-child {
-      margin-right: -30%;
+    //   margin-right: -30%;
-    }
+    // }
 
     &>img:last-child {
       // margin-left: -10px;
@@ -132,23 +133,39 @@
     z-index: -2;
   }
 
-  &::after {
+  &.with-partner-male-female {
-    content: "";
+    flex-direction: row-reverse;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 60%;
-    background: linear-gradient(to bottom,
-        rgba(255, 255, 255, 0) 0%,
-        rgba(255, 255, 255, .7) 10%,
-        rgba(255, 255, 255, 1) 15%,
-        rgba(255, 255, 255, 1) 30%,
-        rgba(255, 255, 255, 1) 40%,
-        rgba(255, 255, 255, 1) 100%);
-    pointer-events: none;
-    z-index: -1;
   }
+
+  &.with-partner-male-male {
+    &>img:first-child {
+      transform: scaleX(-1);
+    }
+  }
+
+  &.with-partner-female-female {
+    &>img:last-child {
+      transform: scaleX(-1);
+    }
+  }
+
+  // &::after {
+  //   content: "";
+  //   position: absolute;
+  //   bottom: 0;
+  //   left: 0;
+  //   width: 100%;
+  //   height: 60%;
+  //   background: linear-gradient(to bottom,
+  //       rgba(255, 255, 255, 0) 0%,
+  //       rgba(255, 255, 255, .7) 10%,
+  //       rgba(255, 255, 255, 1) 15%,
+  //       rgba(255, 255, 255, 1) 30%,
+  //       rgba(255, 255, 255, 1) 40%,
+  //       rgba(255, 255, 255, 1) 100%);
+  //   pointer-events: none;
+  //   z-index: -1;
+  // }
 }
 
 .information-description {
@@ -156,7 +173,7 @@
   font-size: 16px;
   line-height: 125%;
   font-weight: 400;
-  margin-top: 8px;
+  margin-top: 28px;
   margin-bottom: 8px;
 
   &>span {

src/services/metric/metricService.ts

@@ -213,6 +213,8 @@ type TABFlags = {
     trialChoicePageType: "v1" | "v2";
     welcomePageImage: "v1" | "v2";
     cameraRequestModal: "with" | "without";
+    yourReading: "v1" | "v2";
+    genderButtonIcon: "show" | "hide";
 }
 
 export const useMetricABFlags = () => {