develop

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

@@ -317,12 +317,14 @@
         "why_love": "Why does everyone <color> ?",
         "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:",

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": "<color> 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:",

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 (
     <div className={styles.container}>
       <div className={styles.header}>
@@ -26,9 +27,14 @@ function Review({ username, tagline, stars = 5, avatar, text }: IReviewProps) {
             ))}
           </div>
         </div>
+        {date && <p className={styles.date}>{date}</p>}
       </div>
-      <p className={styles.tagline}>{tagline}</p>
-      <p className={styles.text}>{text}</p>
+      {tagline && <p className={styles.tagline}>{tagline}</p>}
+      <p className={styles.text}
+        style={{
+          marginTop: tagline ? "16px" : "4px"
+        }}
+      >{text}</p>
     </div>
   );
 }

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%;
-}
+}

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]
   );

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<HTMLDivElement>) {
     const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
 
     return (
-        <div className={styles.container}>
+        <div className={styles.container} {...props}>
             <Title className={styles.title}>
                 {translate("/try-app.enter-code-title")}
             </Title>

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 (
-        <div className={styles.container}>
+        <div className={`${styles.container} ${classNameContainer}`}>
             <Title variant="h3" className={styles.title}>
                 {translate("/try-app.header.title")}
             </Title>

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;
 
     &>* {

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<HTMLDivElement>(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 (
     <>
-      <Header onButtonClick={downloadApp} />
+      <Header classNameContainer={isHeaderVisible ? styles.headerVisible : ""} onButtonClick={downloadApp} />
       <AppNumberOne />
       <PalmPhoto />
-      <Title className={styles["reading-ready"]}>
-        {translate("/try-app.reading_ready.title")}
-      </Title>
+      <div ref={readingReadyRef}>
+        <Title className={styles["reading-ready"]}>
+          {translate("/try-app.reading_ready.title")}
+        </Title>
+      </div>
+      <p className={styles.instructionPoint} style={{
+        marginBottom: "16px"
+      }}>{translate("/try-app.instruction_point_1")}</p>
       <YourAccessCode />
-      <p className={styles.instructionPoint}>{translate("/try-app.instruction_point_1")}</p>
-      <img className={styles.downloadApp} src={images("download-app.png")} alt="Download app" onClick={downloadApp} />
       <p className={styles.instructionPoint}>{translate("/try-app.instruction_point_2")}</p>
-      <CopyCode />
+      <img className={styles.downloadApp} src={images("download-app.png")} alt="Download app" onClick={downloadApp} />
+      <p className={styles.instructionPoint}>{translate("/try-app.instruction_point_3")}</p>
+      {/* <CopyCode /> */}
       <p className={styles.notShareDescription}>
         {translate("/try-app.not_share_description")}
       </p>
@@ -62,15 +96,34 @@ function TryApp() {
       </Title>
       <HowWork />
       {/* <MoneyBackGuarantee /> */}
-      <EnterCode />
+      {/* <EnterCode  /> */}
+      <Title variant="h2" className={styles.title} style={{
+        fontSize: "26px"
+      }}>
+        {translate("/try-app.your_palm_reading_is_ready")}
+      </Title>
+      <p className={styles.instructionPoint2}>{translate("/try-app.instruction_point_4")}</p>
+      <CopyCode variant="black" />
+      <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>
       <WhatIncluded />
       <PalmsSayAbout />
-      <EnterCode />
+      {/* <EnterCode />
       <Button className={styles["discover-more"]} onClick={downloadApp}>
         {translate("/try-app.get-my-reading-in-app")}
+      </Button> */}
+      <Title variant="h2" className={styles.title} style={{
+        fontSize: "26px"
+      }}>
+        {translate("/try-app.your_palm_reading_is_ready")}
+      </Title>
+      <p className={styles.instructionPoint2}>{translate("/try-app.instruction_point_4")}</p>
+      <CopyCode variant="black" />
+      <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>
       <Title className={styles["why-love"]}>
         {translate("/try-app.why_love", {
@@ -78,7 +131,7 @@ function TryApp() {
         })}
       </Title>
       <Reviews />
-      <EnterCode />
+      <EnterCode style={{ marginTop: "42px" }} />
       <Button className={styles["success-story"]} onClick={downloadApp}>
         {translate("/try-app.get-my-reading-in-app")}
       </Button>

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;
 }

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 (
     <div className={styles.container}>
       <div className={styles.header}>
@@ -26,9 +27,14 @@ function Review({ username, tagline, stars = 5, avatar, text }: IReviewProps) {
             ))}
           </div>
         </div>
+        {date && <p className={styles.date}>{date}</p>}
       </div>
-      <p className={styles.tagline}>{tagline}</p>
-      <p className={styles.text}>{text}</p>
+      {tagline && <p className={styles.tagline}>{tagline}</p>}
+      <p className={styles.text}
+        style={{
+          marginTop: tagline ? "16px" : "4px"
+        }}
+      >{text}</p>
     </div>
   );
 }

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%;
-}
+}

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]

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<HTMLDivElement>) {
     const { translate } = useTranslations(ELocalesPlacement.PalmistryV1);
 
     return (
-        <div className={styles.container}>
+        <div className={styles.container} {...props}>
             <Title className={styles.title}>
                 {translate("/try-app.enter-code-title")}
             </Title>

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 (
-        <div className={styles.container}>
+        <div className={`${styles.container} ${classNameContainer}`}>
             <Title variant="h3" className={styles.title}>
                 {translate("/try-app.header.title")}
             </Title>

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;
 
     &>* {

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<HTMLDivElement>(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 (
     <>
-      <Header onButtonClick={downloadApp} />
+      <Header classNameContainer={isHeaderVisible ? styles.headerVisible : ""} onButtonClick={downloadApp} />
       <AppNumberOne />
       <PalmPhoto />
-      <Title className={styles["reading-ready"]}>
-        {translate("/try-app.reading_ready.title")}
-      </Title>
+      <div ref={readingReadyRef}>
+        <Title className={styles["reading-ready"]}>
+          {translate("/try-app.reading_ready.title")}
+        </Title>
+      </div>
+      <p className={styles.instructionPoint} style={{
+        marginBottom: "16px"
+      }}>{translate("/try-app.instruction_point_1")}</p>
       <YourAccessCode />
-      <p className={styles.instructionPoint}>{translate("/try-app.instruction_point_1")}</p>
-      <img className={styles.downloadApp} src={images("download-app.png")} alt="Download app" onClick={downloadApp} />
       <p className={styles.instructionPoint}>{translate("/try-app.instruction_point_2")}</p>
-      <CopyCode />
+      <img className={styles.downloadApp} src={images("download-app.png")} alt="Download app" onClick={downloadApp} />
+      <p className={styles.instructionPoint}>{translate("/try-app.instruction_point_3")}</p>
+      {/* <CopyCode /> */}
       <p className={styles.notShareDescription}>
         {translate("/try-app.not_share_description")}
       </p>
@@ -62,15 +96,34 @@ function TryApp() {
       </Title>
       <HowWork />
       {/* <MoneyBackGuarantee /> */}
-      <EnterCode />
+      {/* <EnterCode /> */}
+      <Title variant="h2" className={styles.title} style={{
+        fontSize: "26px"
+      }}>
+        {translate("/try-app.your_palm_reading_is_ready")}
+      </Title>
+      <p className={styles.instructionPoint2}>{translate("/try-app.instruction_point_4")}</p>
+      <CopyCode variant="black" />
+      <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>
       <WhatIncluded />
       <PalmsSayAbout />
-      <EnterCode />
+      {/* <EnterCode />
       <Button className={styles["discover-more"]} onClick={downloadApp}>
         {translate("/try-app.get-my-reading-in-app")}
+      </Button> */}
+      <Title variant="h2" className={styles.title} style={{
+        fontSize: "26px"
+      }}>
+        {translate("/try-app.your_palm_reading_is_ready")}
+      </Title>
+      <p className={styles.instructionPoint2}>{translate("/try-app.instruction_point_4")}</p>
+      <CopyCode variant="black" />
+      <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>
       <Title className={styles["why-love"]}>
         {translate("/try-app.why_love", {
@@ -78,7 +131,7 @@ function TryApp() {
         })}
       </Title>
       <Reviews />
-      <EnterCode />
+      <EnterCode style={{ marginTop: "42px" }} />
       <Button className={styles["success-story"]} onClick={downloadApp}>
         {translate("/try-app.get-my-reading-in-app")}
       </Button>

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;
 }