diff --git a/public/locales/compatibility-v3/en/male_en.json b/public/locales/compatibility-v3/en/male_en.json index c27f9cd..6445e04 100644 --- a/public/locales/compatibility-v3/en/male_en.json +++ b/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 ?", "why_love_color": "love AURA", - "as_seen_in": " As Seen in " + "as_seen_in": " 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", diff --git a/public/zodiac-signs/female/aquarius.svg b/public/zodiac-signs/female/aquarius.svg new file mode 100644 index 0000000..0a09b38 --- /dev/null +++ b/public/zodiac-signs/female/aquarius.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/zodiac-signs/female/aries.svg b/public/zodiac-signs/female/aries.svg new file mode 100644 index 0000000..15ae4ec --- /dev/null +++ b/public/zodiac-signs/female/aries.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/zodiac-signs/female/cancer.svg b/public/zodiac-signs/female/cancer.svg new file mode 100644 index 0000000..7ef4d85 --- /dev/null +++ b/public/zodiac-signs/female/cancer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/zodiac-signs/female/capricorn.svg b/public/zodiac-signs/female/capricorn.svg new file mode 100644 index 0000000..1f76a07 --- /dev/null +++ b/public/zodiac-signs/female/capricorn.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/zodiac-signs/female/gemini.svg b/public/zodiac-signs/female/gemini.svg new file mode 100644 index 0000000..c14776f --- /dev/null +++ b/public/zodiac-signs/female/gemini.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/zodiac-signs/female/leo.svg b/public/zodiac-signs/female/leo.svg new file mode 100644 index 0000000..a7953d1 --- /dev/null +++ b/public/zodiac-signs/female/leo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/zodiac-signs/female/libra.svg b/public/zodiac-signs/female/libra.svg new file mode 100644 index 0000000..9636c9e --- /dev/null +++ b/public/zodiac-signs/female/libra.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/zodiac-signs/female/pisces.svg b/public/zodiac-signs/female/pisces.svg new file mode 100644 index 0000000..48ccfb0 --- /dev/null +++ b/public/zodiac-signs/female/pisces.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/zodiac-signs/female/sagittarius.svg b/public/zodiac-signs/female/sagittarius.svg new file mode 100644 index 0000000..4ad121c --- /dev/null +++ b/public/zodiac-signs/female/sagittarius.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/zodiac-signs/female/scorpio.svg b/public/zodiac-signs/female/scorpio.svg new file mode 100644 index 0000000..64efe6e --- /dev/null +++ b/public/zodiac-signs/female/scorpio.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/zodiac-signs/female/taurus.svg b/public/zodiac-signs/female/taurus.svg new file mode 100644 index 0000000..c18c5fb --- /dev/null +++ b/public/zodiac-signs/female/taurus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/zodiac-signs/female/virgo.svg b/public/zodiac-signs/female/virgo.svg new file mode 100644 index 0000000..f9f5390 --- /dev/null +++ b/public/zodiac-signs/female/virgo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/zodiac-signs/male/aquarius.svg b/public/zodiac-signs/male/aquarius.svg new file mode 100644 index 0000000..ce15a6d --- /dev/null +++ b/public/zodiac-signs/male/aquarius.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/zodiac-signs/male/aries.svg b/public/zodiac-signs/male/aries.svg new file mode 100644 index 0000000..0571656 --- /dev/null +++ b/public/zodiac-signs/male/aries.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/zodiac-signs/male/cancer.svg b/public/zodiac-signs/male/cancer.svg new file mode 100644 index 0000000..2e25840 --- /dev/null +++ b/public/zodiac-signs/male/cancer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/zodiac-signs/male/capricorn.svg b/public/zodiac-signs/male/capricorn.svg new file mode 100644 index 0000000..7eee355 --- /dev/null +++ b/public/zodiac-signs/male/capricorn.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/zodiac-signs/male/gemini.svg b/public/zodiac-signs/male/gemini.svg new file mode 100644 index 0000000..466c5d7 --- /dev/null +++ b/public/zodiac-signs/male/gemini.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/zodiac-signs/male/leo.svg b/public/zodiac-signs/male/leo.svg new file mode 100644 index 0000000..207d6c2 --- /dev/null +++ b/public/zodiac-signs/male/leo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/zodiac-signs/male/libra.svg b/public/zodiac-signs/male/libra.svg new file mode 100644 index 0000000..ad6c9b4 --- /dev/null +++ b/public/zodiac-signs/male/libra.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/zodiac-signs/male/pisces.svg b/public/zodiac-signs/male/pisces.svg new file mode 100644 index 0000000..47ee6ea --- /dev/null +++ b/public/zodiac-signs/male/pisces.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/zodiac-signs/male/sagittarius.svg b/public/zodiac-signs/male/sagittarius.svg new file mode 100644 index 0000000..64267ca --- /dev/null +++ b/public/zodiac-signs/male/sagittarius.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/zodiac-signs/male/scorpio.svg b/public/zodiac-signs/male/scorpio.svg new file mode 100644 index 0000000..ce09bde --- /dev/null +++ b/public/zodiac-signs/male/scorpio.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/zodiac-signs/male/taurus.svg b/public/zodiac-signs/male/taurus.svg new file mode 100644 index 0000000..396f96a --- /dev/null +++ b/public/zodiac-signs/male/taurus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/zodiac-signs/male/virgo.svg b/public/zodiac-signs/male/virgo.svg new file mode 100644 index 0000000..0d61a45 --- /dev/null +++ b/public/zodiac-signs/male/virgo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/CompatibilityV2/components/Answer/index.tsx b/src/components/CompatibilityV2/components/Answer/index.tsx index 2829ab5..dcb619b 100644 --- a/src/components/CompatibilityV2/components/Answer/index.tsx +++ b/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 = { diff --git a/src/components/CompatibilityV2/pages/Gender/index.tsx b/src/components/CompatibilityV2/pages/Gender/index.tsx index 2af7a27..9752826 100644 --- a/src/components/CompatibilityV2/pages/Gender/index.tsx +++ b/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" && + + {gender.id === "male" ? "🙋‍♂️" : "🙋‍♀️"} + + } + {translate(gender.id, undefined, ELocalesPlacement.V1)} + , })); useEffect(() => { diff --git a/src/components/CompatibilityV2/pages/Gender/styles.module.scss b/src/components/CompatibilityV2/pages/Gender/styles.module.scss index d23c15c..ad5594c 100644 --- a/src/components/CompatibilityV2/pages/Gender/styles.module.scss +++ b/src/components/CompatibilityV2/pages/Gender/styles.module.scss @@ -62,4 +62,9 @@ font-size: 16px; } } +} + +.genderIcon { + font-size: 50px; + margin-right: 4px; } \ No newline at end of file diff --git a/src/components/CompatibilityV3/components/Answer/index.tsx b/src/components/CompatibilityV3/components/Answer/index.tsx index 2829ab5..dcb619b 100644 --- a/src/components/CompatibilityV3/components/Answer/index.tsx +++ b/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 = { diff --git a/src/components/CompatibilityV3/pages/Gender/index.tsx b/src/components/CompatibilityV3/pages/Gender/index.tsx index 1a97be1..721dea1 100644 --- a/src/components/CompatibilityV3/pages/Gender/index.tsx +++ b/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" && + + {gender.id === "male" ? "🙋‍♂️" : "🙋‍♀️"} + + } + {translate(gender.id, undefined, ELocalesPlacement.V1)} + , })); useEffect(() => { diff --git a/src/components/CompatibilityV3/pages/Gender/styles.module.scss b/src/components/CompatibilityV3/pages/Gender/styles.module.scss index d23c15c..ad5594c 100644 --- a/src/components/CompatibilityV3/pages/Gender/styles.module.scss +++ b/src/components/CompatibilityV3/pages/Gender/styles.module.scss @@ -62,4 +62,9 @@ font-size: 16px; } } +} + +.genderIcon { + font-size: 50px; + margin-right: 4px; } \ No newline at end of file diff --git a/src/components/CompatibilityV3/pages/PalmsInformation/index.tsx b/src/components/CompatibilityV3/pages/PalmsInformation/index.tsx index debe2b7..0dbd102 100644 --- a/src/components/CompatibilityV3/pages/PalmsInformation/index.tsx +++ b/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() {
Zodiac sign
diff --git a/src/components/CompatibilityV3/pages/PalmsInformation/styles.module.scss b/src/components/CompatibilityV3/pages/PalmsInformation/styles.module.scss index bd40adf..cee8b3e 100644 --- a/src/components/CompatibilityV3/pages/PalmsInformation/styles.module.scss +++ b/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 { - 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; - } + // &::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; + // } } .description { diff --git a/src/components/CompatibilityV3/pages/PalmsInformationPartner/index.tsx b/src/components/CompatibilityV3/pages/PalmsInformationPartner/index.tsx index 8dfca37..a66899d 100644 --- a/src/components/CompatibilityV3/pages/PalmsInformationPartner/index.tsx +++ b/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() {
Zodiac sign
diff --git a/src/components/CompatibilityV3/pages/PalmsInformationPartner/styles.module.scss b/src/components/CompatibilityV3/pages/PalmsInformationPartner/styles.module.scss index bd40adf..816a03f 100644 --- a/src/components/CompatibilityV3/pages/PalmsInformationPartner/styles.module.scss +++ b/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 { - 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; - } + // &::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; + // } } .description { diff --git a/src/components/CompatibilityV3/pages/ScannedPhoto/index.tsx b/src/components/CompatibilityV3/pages/ScannedPhoto/index.tsx index fbc23e1..1b7a66c 100644 --- a/src/components/CompatibilityV3/pages/ScannedPhoto/index.tsx +++ b/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); }; diff --git a/src/components/CompatibilityV3/pages/TryApp/components/YourReading/index.tsx b/src/components/CompatibilityV3/pages/TryApp/components/YourReading/index.tsx new file mode 100644 index 0000000..ec8207b --- /dev/null +++ b/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 ( +
+ + {translate("/try-app.your-reading.title")} + + + + {translate("/try-app.your-reading.subtitle")} + +
    + {ready && Array.from({ length: 8 }).map((_, index) => ( +
  • 3 ? styles.point_blur : ""}`}> + {translate(`/try-app.your-reading.points.${version}.point${index + 1}`)} +
    • + ))} +
+

+ {translate("/try-app.your-reading.description")} +

+
+ ) +} + +export default YourReading \ No newline at end of file diff --git a/src/components/CompatibilityV3/pages/TryApp/components/YourReading/styles.module.scss b/src/components/CompatibilityV3/pages/TryApp/components/YourReading/styles.module.scss new file mode 100644 index 0000000..42cf6d9 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/components/CompatibilityV3/pages/TryApp/components/ZodiacImages/index.tsx b/src/components/CompatibilityV3/pages/TryApp/components/ZodiacImages/index.tsx new file mode 100644 index 0000000..af16b69 --- /dev/null +++ b/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 ( +
+ Profile zodiac sign + {relationshipStatus !== "single" && Partner zodiac sign} +
+ ) +} + +export default ZodiacImages \ No newline at end of file diff --git a/src/components/CompatibilityV3/pages/TryApp/components/ZodiacImages/styles.module.scss b/src/components/CompatibilityV3/pages/TryApp/components/ZodiacImages/styles.module.scss new file mode 100644 index 0000000..65a6491 --- /dev/null +++ b/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; + // } +} \ No newline at end of file diff --git a/src/components/CompatibilityV3/pages/TryApp/index.tsx b/src/components/CompatibilityV3/pages/TryApp/index.tsx index 8f9e532..67eebdd 100644 --- a/src/components/CompatibilityV3/pages/TryApp/index.tsx +++ b/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(null); const [isHeaderVisible, setIsHeaderVisible] = useState(false); - - const { height, elementRef } = useDynamicSize({}); 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")} {/* */} -
- Profile zodiac sign - {relationshipStatus !== "single" && Partner zodiac sign} -
+ {(relationshipStatus === "single" || !partnerBirthdate) &&

{translate("/trial-payment.information-description-single", { @@ -142,6 +140,13 @@ function TryApp() {

{translate("/try-app.not_share_description")}

+ {/* */} - {/* */} + {/* */} {/* diff --git a/src/components/CompatibilityV3/pages/TryApp/styles.module.scss b/src/components/CompatibilityV3/pages/TryApp/styles.module.scss index 42ad75f..1f0ce6b 100644 --- a/src/components/CompatibilityV3/pages/TryApp/styles.module.scss +++ b/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 { - margin-right: -30%; - } + // &>img:first-child { + // margin-right: -30%; + // } &>img:last-child { // margin-left: -10px; @@ -132,23 +133,39 @@ z-index: -2; } - &::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; + &.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; + // } } .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 { diff --git a/src/services/metric/metricService.ts b/src/services/metric/metricService.ts index ea5dc1f..bff1bd4 100644 --- a/src/services/metric/metricService.ts +++ b/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 = () => {