diff --git a/public/locales/compatibility-v2/en/male_en.json b/public/locales/compatibility-v2/en/male_en.json index 931a5da..6daac44 100644 --- a/public/locales/compatibility-v2/en/male_en.json +++ b/public/locales/compatibility-v2/en/male_en.json @@ -317,12 +317,14 @@ "why_love": "Why does everyone ?", "why_love_color": "love AURA", "reviews": { - "username1": "Rebecca Bauman", + "username1": "Emma Johnson", "tagline1": "\"It’s changed my life!\"", - "text1": "I'm thankful for this app and Akho! She's an excellent palm reader and astrologer—clear, thorough, and reassuring. I eagerly look forward to more sessions with her!", - "username2": "Mika Ryan", + "date1": "Jan 25", + "text1": "I used to keep running into failed relationships—things would start off well, but then everything would fall apart. It was exhausting, and I started wondering if the problem was me. Your service immediately felt different: instead of generic advice and random matches, I got precise insights about who I actually have a real chance of building something strong with. I still remember seeing my first compatibility analysis—it aligned so perfectly that I just knew: this was it. Now, I waste less time on pointless connections and am finally building a relationship that feels effortless and right.", + "username2": "Olivia Smith", "tagline2": "\"After years of seeking, I’ve finally found a true love.\"", - "text2": "I was hesitant about whether it was really worth trying, but now I have no regrets and I'm enjoying my new relationships!", + "date2": "1m ago", + "text2": "I spent a long time doubting whether we were truly right for each other. Everything seemed fine, but at times, I felt like we were just too different. I searched online for answers, but all I found were vague, contradictory pieces of advice. The feelings were there, but so were the doubts. I just wanted to know if we had a future together, but nothing gave me a clear answer. Then I came across your service, decided to give it a shot—and I’m so glad I did. Your analysis of our personalities, compatibility, and potential challenges in the relationship matched perfectly from the very first pages. And suddenly, it hit me! I finally understood why he acts the way he does and how to build a stronger relationship with him. Your 30-day step-by-step guide is already making a difference—there’s more trust between us, and we argue less. Thank you!", "username3": "Amanda Holmes", "tagline3": "\"I’ve found a job I really enjoy.\"", "text3": "Thanks to Vladana, I've finally discovered a clue about what my life's purpose really is and what kind of job resonates with me better!" @@ -532,8 +534,12 @@ }, "your_access_code": "Your Access Code", "copy": "COPY", - "instruction_point_1": "1. Download App", - "instruction_point_2": "2. Enter Your Access Code", + "instruction_point_1": "1. Copy Your Access Code", + "instruction_point_2": "2. Download the App", + "instruction_point_3": "3. Enter Your Access Code in the App", + "instruction_point_4": "1. Copy Your Access Code", + "instruction_point_5": "2. Enter Your Access Code in the App 👇", + "your_palm_reading_is_ready": "Your Palm Reading is READY", "not_share_description": "Enter your access code in the app to access Your Personalized Reading. Do not share your code with anyone.", "get_prediction_in_app": "Get personal prediction in the App", "enter-code-title": "Enter Your Access Code:", diff --git a/public/locales/palmistry-v1/en/male_en.json b/public/locales/palmistry-v1/en/male_en.json index b090d66..5031569 100644 --- a/public/locales/palmistry-v1/en/male_en.json +++ b/public/locales/palmistry-v1/en/male_en.json @@ -234,13 +234,16 @@ "reviews": { "username1": "Rebecca Bauman", "tagline1": "\"It’s changed my life!\"", - "text1": "I'm thankful for this app and Akho! She's an excellent palm reader and astrologer—clear, thorough, and reassuring. I eagerly look forward to more sessions with her!", + "date1": "Jan 9", + "text1": "For years, I felt lost, questioning every decision and never fully trusting myself. I tried journaling, personality tests, and even meditation, but nothing gave me real answers—it all felt surface-level. Then I got my reading. The moment I saw the details mapped out from the lines on my hands, something shifted. It wasn’t just vague descriptions; it was me—my strengths, my struggles, my patterns, all laid bare. Suddenly, everything made sense. I understood why I kept making the same mistakes and what I truly needed to focus on. For the first time, I feel grounded in my choices, like I’m finally walking a path that belongs to me.", "username2": "Mika Ryan", "tagline2": "\"After years of seeking, I’ve finally found a true love.\"", - "text2": "I was hesitant about whether it was really worth trying, but now I have no regrets and I'm enjoying my new relationships!", + "date2": "1m ago", + "text2": "The feeling of being stuck weighed on me, pushing me to bounce between options. My reading was a breakthrough—analyzing the lines on my right hand revealed my strengths and hidden abilities. As I read through it, I saw myself in every word and knew—this was exactly what I had been looking for. Now, I have clarity and confidence, and decisions come easily. Huge thanks to your team of professionals—and for the bonus reading for 2025!", "username3": "Amanda Holmes", "tagline3": "\"I’ve found a job I really enjoy.\"", - "text3": "Thanks to Vladana, I've finally discovered a clue about what my life's purpose really is and what kind of job resonates with me better!" + "date3": "1m ago", + "text3": "I'm a deeply sensitive person and have always known I was capable of more, but I had no idea which direction to take. I tried courses, switched jobs, but never felt like I was where I truly belonged. The uncertainty started to weigh on me, filling me with anxiety. Then I came across this app and decided to give it a shot. The analysis of my deep, well-defined Fate Line gave me precise answers about my talents and hidden potential. When I saw how perfectly it aligned with what I genuinely love, a long-awaited sense of clarity washed over me. Now I know where I'm headed—and what destiny has in store for me." }, "success_story": "Become a AURA Success Story!", "as_seen_in": " As Seen in", @@ -314,8 +317,12 @@ }, "your_access_code": "Your Access Code", "copy": "COPY", - "instruction_point_1": "1. Download App", - "instruction_point_2": "2. Enter Your Access Code", + "instruction_point_1": "1. Copy Your Access Code", + "instruction_point_2": "2. Download the App", + "instruction_point_3": "3. Enter Your Access Code in the App", + "instruction_point_4": "1. Copy Your Access Code", + "instruction_point_5": "2. Enter Your Access Code in the App 👇", + "your_palm_reading_is_ready": "Your Palm Reading is READY", "not_share_description": "Enter your access code in the app to access Your Personalized Reading. Do not share your code with anyone.", "get_prediction_in_app": "Get personal prediction in the App", "enter-code-title": "Enter Your Access Code:", diff --git a/src/components/CompatibilityV2/components/Review/index.tsx b/src/components/CompatibilityV2/components/Review/index.tsx index fd967f0..b154e71 100644 --- a/src/components/CompatibilityV2/components/Review/index.tsx +++ b/src/components/CompatibilityV2/components/Review/index.tsx @@ -3,13 +3,14 @@ import styles from "./styles.module.scss"; export interface IReviewProps { username: string; - tagline: string; + tagline?: string; stars?: number; + date?: string; avatar: string; text: string; } -function Review({ username, tagline, stars = 5, avatar, text }: IReviewProps) { +function Review({ username, tagline, stars = 5, date, avatar, text }: IReviewProps) { return (
@@ -26,9 +27,14 @@ function Review({ username, tagline, stars = 5, avatar, text }: IReviewProps) { ))}
+ {date &&

{date}

} -

{tagline}

-

{text}

+ {tagline &&

{tagline}

} +

{text}

); } diff --git a/src/components/CompatibilityV2/components/Review/styles.module.scss b/src/components/CompatibilityV2/components/Review/styles.module.scss index 8de8b34..504f3bd 100644 --- a/src/components/CompatibilityV2/components/Review/styles.module.scss +++ b/src/components/CompatibilityV2/components/Review/styles.module.scss @@ -6,25 +6,37 @@ } .header { + position: relative; margin-left: 8px; display: flex; flex-direction: row; align-items: center; gap: 6px; - & > .info { + &>.info { display: flex; flex-direction: column; align-items: start; gap: 2px; - & > .stars { + &>.stars { display: flex; flex-direction: row; align-items: center; gap: 1px; } } + + &>.date { + position: absolute; + right: 0; + font-family: SF Pro Text; + font-weight: 500; + font-size: 16px; + line-height: 20px; + text-align: right; + color: rgba(0, 0, 0, 0.45); + } } .tagline { @@ -35,4 +47,4 @@ .text { margin-top: 16px; line-height: 125%; -} +} \ No newline at end of file diff --git a/src/components/CompatibilityV2/components/Reviews/index.tsx b/src/components/CompatibilityV2/components/Reviews/index.tsx index a5c1b68..f3b75b0 100644 --- a/src/components/CompatibilityV2/components/Reviews/index.tsx +++ b/src/components/CompatibilityV2/components/Reviews/index.tsx @@ -12,21 +12,24 @@ function Reviews() { { avatar: `${compatibilityV2Prefix}/reviews/rebecca.png`, username: translate("/trial-payment.reviews.username1"), - tagline: translate("/trial-payment.reviews.tagline1"), + // tagline: translate("/trial-payment.reviews.tagline1"), text: translate("/trial-payment.reviews.text1"), + date: translate("/trial-payment.reviews.date1") }, { avatar: `${compatibilityV2Prefix}/reviews/mika.png`, username: translate("/trial-payment.reviews.username2"), - tagline: translate("/trial-payment.reviews.tagline2"), + // tagline: translate("/trial-payment.reviews.tagline2"), text: translate("/trial-payment.reviews.text2"), + date: translate("/trial-payment.reviews.date2") }, - { - avatar: `${compatibilityV2Prefix}/reviews/amanda.png`, - username: translate("/trial-payment.reviews.username3"), - tagline: translate("/trial-payment.reviews.tagline3"), - text: translate("/trial-payment.reviews.text3"), - }, + // { + // avatar: `${compatibilityV2Prefix}/reviews/amanda.png`, + // username: translate("/trial-payment.reviews.username3"), + // // tagline: translate("/trial-payment.reviews.tagline3"), + // text: translate("/trial-payment.reviews.text3"), + // date: translate("/trial-payment.reviews.date3") + // }, ], [translate] ); diff --git a/src/components/CompatibilityV2/pages/TryApp/components/EnterCode/index.tsx b/src/components/CompatibilityV2/pages/TryApp/components/EnterCode/index.tsx index e0271ae..d3ed572 100644 --- a/src/components/CompatibilityV2/pages/TryApp/components/EnterCode/index.tsx +++ b/src/components/CompatibilityV2/pages/TryApp/components/EnterCode/index.tsx @@ -4,11 +4,11 @@ import { useTranslations } from "@/hooks/translations"; import { ELocalesPlacement } from "@/locales"; import CopyCode from "../CopyCode"; -function EnterCode() { +function EnterCode(props: React.HTMLAttributes) { const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2); return ( -
+
{translate("/try-app.enter-code-title")} diff --git a/src/components/CompatibilityV2/pages/TryApp/components/Header/index.tsx b/src/components/CompatibilityV2/pages/TryApp/components/Header/index.tsx index abe1236..968c90e 100644 --- a/src/components/CompatibilityV2/pages/TryApp/components/Header/index.tsx +++ b/src/components/CompatibilityV2/pages/TryApp/components/Header/index.tsx @@ -11,10 +11,12 @@ import { copyToClipboard } from "@/services/data"; import Toast from "@/components/pages/ABDesign/v1/components/Toast"; interface IHeaderProps { + classNameContainer?: string; onButtonClick: () => void; } function Header({ + classNameContainer = "", onButtonClick }: IHeaderProps) { const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2); @@ -38,7 +40,7 @@ function Header({ }, [isCopied]); return ( -
+
{translate("/try-app.header.title")} diff --git a/src/components/CompatibilityV2/pages/TryApp/components/Header/styles.module.scss b/src/components/CompatibilityV2/pages/TryApp/components/Header/styles.module.scss index e9dd620..e3285fa 100644 --- a/src/components/CompatibilityV2/pages/TryApp/components/Header/styles.module.scss +++ b/src/components/CompatibilityV2/pages/TryApp/components/Header/styles.module.scss @@ -6,10 +6,12 @@ max-width: 560px; padding: 0 6px 8px; background-color: #EFF0FC; - position: sticky; + position: fixed; top: calc(0dvh); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.11); margin-bottom: 46px; + opacity: 0; + transition: opacity 0.15s ease-in-out; z-index: 9999; &>* { diff --git a/src/components/CompatibilityV2/pages/TryApp/index.tsx b/src/components/CompatibilityV2/pages/TryApp/index.tsx index 5bbddc7..2ed50ca 100644 --- a/src/components/CompatibilityV2/pages/TryApp/index.tsx +++ b/src/components/CompatibilityV2/pages/TryApp/index.tsx @@ -11,7 +11,7 @@ import Footer from "../../components/Footer"; import { useTranslations } from "@/hooks/translations"; import { ELocalesPlacement } from "@/locales"; import { usePreloadImages } from "@/hooks/preload/images"; -import { useEffect } from "react"; +import { useEffect, useRef, useState } from "react"; import metricService, { EGoals, EMetrics } from "@/services/metric/metricService"; import Header from "./components/Header"; import PalmPhoto from "./components/PalmPhoto"; @@ -19,14 +19,22 @@ import YourAccessCode from "./components/YourAccessCode"; import { images } from "../../data"; import CopyCode from "./components/CopyCode"; import EnterCode from "./components/EnterCode"; +import { copyToClipboard } from "@/services/data"; +import { useSelector } from "react-redux"; +import { selectors } from "@/store"; function TryApp() { const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2); usePreloadImages([ "/v1/palmistry/ticket.svg", ]) + const code = useSelector(selectors.selectAuthCode); - const downloadApp = () => { + const readingReadyRef = useRef(null); + const [isHeaderVisible, setIsHeaderVisible] = useState(false); + + const downloadApp = async () => { + await copyToClipboard(code); // TODO window.location.href = "https://apps.apple.com/us/app/aura-astrology-horoscope/id1601978549"; @@ -37,19 +45,45 @@ function TryApp() { metricService.reachGoal(EGoals.AURA_TRIAL_PAYMENT_PAGE_VISIT, [EMetrics.KLAVIYO]); }, []); + useEffect(() => { + const handleScroll = () => { + if (readingReadyRef.current) { + const rect = readingReadyRef.current.getBoundingClientRect(); + const distanceFromTop = Math.round(rect.top); + const viewportHeight = window.innerHeight; + if (distanceFromTop < (viewportHeight / 2 - readingReadyRef.current.clientHeight / 2)) { + setIsHeaderVisible(true); + } else { + setIsHeaderVisible(false); + } + } + }; + + window.addEventListener('scroll', handleScroll); + + return () => { + window.removeEventListener('scroll', handleScroll); + }; + }, []); + return ( <> -
+
- - {translate("/try-app.reading_ready.title")} - +
+ + {translate("/try-app.reading_ready.title")} + +
+

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

-

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

- Download app

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

- + Download app +

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

+ {/* */}

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

@@ -62,15 +96,34 @@ function TryApp() { {/* */} - + {/* */} + + {translate("/try-app.your_palm_reading_is_ready")} + +

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

+ +

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

- + {/* */} + + {translate("/try-app.your_palm_reading_is_ready")} + +

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

+ +

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

+ {translate("/try-app.why_love", { @@ -78,7 +131,7 @@ function TryApp() { })} - + diff --git a/src/components/CompatibilityV2/pages/TryApp/styles.module.scss b/src/components/CompatibilityV2/pages/TryApp/styles.module.scss index 1e3271b..266d827 100644 --- a/src/components/CompatibilityV2/pages/TryApp/styles.module.scss +++ b/src/components/CompatibilityV2/pages/TryApp/styles.module.scss @@ -209,7 +209,7 @@ box-shadow: 2px 5px 2.5px -1px rgba(0, 0, 0, 0.2); font-family: SF Pro Text; font-weight: 500; - font-size: 24px; + font-size: 20px; line-height: 30px; text-align: left; display: flex; @@ -221,4 +221,15 @@ &>img { width: 38px; } +} + +.headerVisible { + opacity: 1 !important; +} + +.instructionPoint2 { + font-weight: 600; + font-size: 22px; + line-height: 26.63px; + text-align: center; } \ No newline at end of file diff --git a/src/components/PalmistryV1/components/Review/index.tsx b/src/components/PalmistryV1/components/Review/index.tsx index ffce570..8a2a1f9 100644 --- a/src/components/PalmistryV1/components/Review/index.tsx +++ b/src/components/PalmistryV1/components/Review/index.tsx @@ -3,13 +3,14 @@ import styles from "./styles.module.scss"; export interface IReviewProps { username: string; - tagline: string; + tagline?: string; stars?: number; + date?: string; avatar: string; text: string; } -function Review({ username, tagline, stars = 5, avatar, text }: IReviewProps) { +function Review({ username, tagline, stars = 5, date, avatar, text }: IReviewProps) { return (
@@ -26,9 +27,14 @@ function Review({ username, tagline, stars = 5, avatar, text }: IReviewProps) { ))}
+ {date &&

{date}

}
-

{tagline}

-

{text}

+ {tagline &&

{tagline}

} +

{text}

); } diff --git a/src/components/PalmistryV1/components/Review/styles.module.scss b/src/components/PalmistryV1/components/Review/styles.module.scss index 8de8b34..504f3bd 100644 --- a/src/components/PalmistryV1/components/Review/styles.module.scss +++ b/src/components/PalmistryV1/components/Review/styles.module.scss @@ -6,25 +6,37 @@ } .header { + position: relative; margin-left: 8px; display: flex; flex-direction: row; align-items: center; gap: 6px; - & > .info { + &>.info { display: flex; flex-direction: column; align-items: start; gap: 2px; - & > .stars { + &>.stars { display: flex; flex-direction: row; align-items: center; gap: 1px; } } + + &>.date { + position: absolute; + right: 0; + font-family: SF Pro Text; + font-weight: 500; + font-size: 16px; + line-height: 20px; + text-align: right; + color: rgba(0, 0, 0, 0.45); + } } .tagline { @@ -35,4 +47,4 @@ .text { margin-top: 16px; line-height: 125%; -} +} \ No newline at end of file diff --git a/src/components/PalmistryV1/components/Reviews/index.tsx b/src/components/PalmistryV1/components/Reviews/index.tsx index 6564fe7..202fa7b 100644 --- a/src/components/PalmistryV1/components/Reviews/index.tsx +++ b/src/components/PalmistryV1/components/Reviews/index.tsx @@ -12,20 +12,23 @@ function Reviews() { { avatar: `${palmistryV1Prefix}/reviews/rebecca.png`, username: translate("/trial-payment.reviews.username1"), - tagline: translate("/trial-payment.reviews.tagline1"), + // tagline: translate("/trial-payment.reviews.tagline1"), text: translate("/trial-payment.reviews.text1"), + date: translate("/trial-payment.reviews.date1") }, { avatar: `${palmistryV1Prefix}/reviews/mika.png`, username: translate("/trial-payment.reviews.username2"), - tagline: translate("/trial-payment.reviews.tagline2"), + // tagline: translate("/trial-payment.reviews.tagline2"), text: translate("/trial-payment.reviews.text2"), + date: translate("/trial-payment.reviews.date2") }, { avatar: `${palmistryV1Prefix}/reviews/amanda.png`, username: translate("/trial-payment.reviews.username3"), - tagline: translate("/trial-payment.reviews.tagline3"), + // tagline: translate("/trial-payment.reviews.tagline3"), text: translate("/trial-payment.reviews.text3"), + date: translate("/trial-payment.reviews.date3") }, ], [translate] diff --git a/src/components/PalmistryV1/pages/TryApp/components/EnterCode/index.tsx b/src/components/PalmistryV1/pages/TryApp/components/EnterCode/index.tsx index 900ebbf..719bfde 100644 --- a/src/components/PalmistryV1/pages/TryApp/components/EnterCode/index.tsx +++ b/src/components/PalmistryV1/pages/TryApp/components/EnterCode/index.tsx @@ -4,11 +4,11 @@ import { useTranslations } from "@/hooks/translations"; import { ELocalesPlacement } from "@/locales"; import CopyCode from "../CopyCode"; -function EnterCode() { +function EnterCode(props: React.HTMLAttributes) { const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); return ( -
+
{translate("/try-app.enter-code-title")} diff --git a/src/components/PalmistryV1/pages/TryApp/components/Header/index.tsx b/src/components/PalmistryV1/pages/TryApp/components/Header/index.tsx index 275004c..6ec09dd 100644 --- a/src/components/PalmistryV1/pages/TryApp/components/Header/index.tsx +++ b/src/components/PalmistryV1/pages/TryApp/components/Header/index.tsx @@ -11,10 +11,12 @@ import { copyToClipboard } from "@/services/data"; import Toast from "@/components/pages/ABDesign/v1/components/Toast"; interface IHeaderProps { + classNameContainer?: string; onButtonClick: () => void; } function Header({ + classNameContainer = "", onButtonClick }: IHeaderProps) { const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); @@ -38,7 +40,7 @@ function Header({ }, [isCopied]); return ( -
+
{translate("/try-app.header.title")} diff --git a/src/components/PalmistryV1/pages/TryApp/components/Header/styles.module.scss b/src/components/PalmistryV1/pages/TryApp/components/Header/styles.module.scss index e9dd620..e3285fa 100644 --- a/src/components/PalmistryV1/pages/TryApp/components/Header/styles.module.scss +++ b/src/components/PalmistryV1/pages/TryApp/components/Header/styles.module.scss @@ -6,10 +6,12 @@ max-width: 560px; padding: 0 6px 8px; background-color: #EFF0FC; - position: sticky; + position: fixed; top: calc(0dvh); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.11); margin-bottom: 46px; + opacity: 0; + transition: opacity 0.15s ease-in-out; z-index: 9999; &>* { diff --git a/src/components/PalmistryV1/pages/TryApp/index.tsx b/src/components/PalmistryV1/pages/TryApp/index.tsx index 8c585a5..6b7008f 100644 --- a/src/components/PalmistryV1/pages/TryApp/index.tsx +++ b/src/components/PalmistryV1/pages/TryApp/index.tsx @@ -11,7 +11,7 @@ import Footer from "../../components/Footer"; import { useTranslations } from "@/hooks/translations"; import { ELocalesPlacement } from "@/locales"; import { usePreloadImages } from "@/hooks/preload/images"; -import { useEffect } from "react"; +import { useEffect, useRef, useState } from "react"; import metricService, { EGoals, EMetrics } from "@/services/metric/metricService"; import Header from "./components/Header"; import PalmPhoto from "./components/PalmPhoto"; @@ -19,14 +19,22 @@ import YourAccessCode from "./components/YourAccessCode"; import { images } from "../../data"; import CopyCode from "./components/CopyCode"; import EnterCode from "./components/EnterCode"; +import { useSelector } from "react-redux"; +import { selectors } from "@/store"; +import { copyToClipboard } from "@/services/data"; function TryApp() { const { translate } = useTranslations(ELocalesPlacement.PalmistryV1); usePreloadImages([ "/v1/palmistry/ticket.svg", ]) + const code = useSelector(selectors.selectAuthCode); - const downloadApp = () => { + const readingReadyRef = useRef(null); + const [isHeaderVisible, setIsHeaderVisible] = useState(false); + + const downloadApp = async () => { + await copyToClipboard(code); // TODO window.location.href = "https://apps.apple.com/us/app/aura-astrology-horoscope/id1601978549"; @@ -37,19 +45,45 @@ function TryApp() { metricService.reachGoal(EGoals.AURA_TRIAL_PAYMENT_PAGE_VISIT, [EMetrics.KLAVIYO]); }, []); + useEffect(() => { + const handleScroll = () => { + if (readingReadyRef.current) { + const rect = readingReadyRef.current.getBoundingClientRect(); + const distanceFromTop = Math.round(rect.top); + const viewportHeight = window.innerHeight; + if (distanceFromTop < (viewportHeight / 2 - readingReadyRef.current.clientHeight / 2)) { + setIsHeaderVisible(true); + } else { + setIsHeaderVisible(false); + } + } + }; + + window.addEventListener('scroll', handleScroll); + + return () => { + window.removeEventListener('scroll', handleScroll); + }; + }, []); + return ( <> -
+
- - {translate("/try-app.reading_ready.title")} - +
+ + {translate("/try-app.reading_ready.title")} + +
+

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

-

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

- Download app

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

- + Download app +

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

+ {/* */}

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

@@ -62,15 +96,34 @@ function TryApp() { {/* */} - + {/* */} + + {translate("/try-app.your_palm_reading_is_ready")} + +

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

+ +

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

- + {/* */} + + {translate("/try-app.your_palm_reading_is_ready")} + +

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

+ +

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

+ {translate("/try-app.why_love", { @@ -78,7 +131,7 @@ function TryApp() { })} - + diff --git a/src/components/PalmistryV1/pages/TryApp/styles.module.scss b/src/components/PalmistryV1/pages/TryApp/styles.module.scss index 1e3271b..266d827 100644 --- a/src/components/PalmistryV1/pages/TryApp/styles.module.scss +++ b/src/components/PalmistryV1/pages/TryApp/styles.module.scss @@ -209,7 +209,7 @@ box-shadow: 2px 5px 2.5px -1px rgba(0, 0, 0, 0.2); font-family: SF Pro Text; font-weight: 500; - font-size: 24px; + font-size: 20px; line-height: 30px; text-align: left; display: flex; @@ -221,4 +221,15 @@ &>img { width: 38px; } +} + +.headerVisible { + opacity: 1 !important; +} + +.instructionPoint2 { + font-weight: 600; + font-size: 22px; + line-height: 26.63px; + text-align: center; } \ No newline at end of file