Develop

src/components/pages/ABDesign/v1/components/Questionnaire/index.tsx

@@ -16,6 +16,7 @@ import Stepper from "../Stepper";
 import { useLottie } from "@/hooks/lottie/useLottie";
 import { useMetricABFlags } from "@/services/metric/metricService.ts";
 import { preloadImages } from "@/hooks/preload/images";
+import { useTouchAction } from "@/hooks/touchAction/useTouchAction";
 
 function QuestionnairePage(): JSX.Element {
   const { question, stepId } = useParams();
@@ -36,6 +37,11 @@ function QuestionnairePage(): JSX.Element {
   useLottie({
     preloadKey: currentQuestion?.lottie?.preloadKey,
   });
+  useTouchAction(
+    currentQuestion?.answers?.length && currentQuestion?.answers?.length < 3
+      ? "none"
+      : currentQuestion?.touchAction
+  );
 
   useEffect(() => {
     if (currentQuestion?.preloadImages?.length) {

src/components/pages/ABDesign/v1/components/Questionnaire/styles.module.css

@@ -13,6 +13,7 @@
   background-repeat: no-repeat;
   color: #fff;
   padding-top: 26px;
+  padding-bottom: calc(0dvh + 64px);
   width: 100%;
   max-width: 460px;
 }

src/components/pages/ABDesign/v1/data/stepsQuestionary.tsx

@@ -188,6 +188,7 @@ export const stepsQuestionary: IStep[] = [
         id: "birthdate",
         question: "What's your date of birth?",
         preloadImages: ["/single-zodiac-info.webp"],
+        touchAction: "none",
         answersElement: <BirthdateCustomAnswer />,
         navigateToUrl: routes.client.singleZodiacInfoV1(),
       },
@@ -226,6 +227,7 @@ export const stepsQuestionary: IStep[] = [
         question: "Where were you born?",
         description:
           "This determines the time zone at the place of your birth.",
+        touchAction: "none",
         answersElement: <BirthPlaceCustomAnswer />,
         backgroundImage: "/birthPlace.webp",
         backgroundColor: "#0000004d",
@@ -544,6 +546,7 @@ export const stepsQuestionary: IStep[] = [
       {
         id: "partnerBirthdate",
         question: "What’s your partner’s date of birth?",
+        touchAction: "none",
         answersElement: <BirthdateCustomAnswer affiliation="partner" />,
       },
       // TODO: add compatibility page
@@ -575,6 +578,7 @@ export const stepsQuestionary: IStep[] = [
       {
         id: "partnerBirthPlace",
         question: "Where was your partner born?",
+        touchAction: "none",
         description:
           "If you don’t know the exact place of birth just type in the country of birth.",
         answersElement: <BirthPlaceCustomAnswer affiliation="partner" />,

src/components/pages/ABDesign/v1/pages/AllRight/styles.module.css

@@ -11,9 +11,9 @@
     background-position-x: center;
     background-size: cover;
     color: #fff;
-    padding-top: 64px;
     background-color: #0F1323;
     padding-top: 32px;
+    padding-bottom: calc(0dvh + 64px);
     width: 100%;
     max-width: 460px;
 }

src/components/pages/ABDesign/v1/pages/AlmostThere/index.tsx

@@ -39,6 +39,7 @@ function AlmostTherePage() {
 
   return (
     <section className={`${styles.page} page`}>
+      <div className={styles["background_wrap"]} />
       <Header
         isBackButtonVisible={false}
         classNameTitle={styles["header-title"]}

src/components/pages/ABDesign/v1/pages/AlmostThere/styles.module.css

@@ -6,17 +6,30 @@
     grid-template-rows: repeat(4, min-content);
     min-height: 100vh;
     gap: 40px;
+    color: #fff;
+    background-color: #0F1323;
+    padding-top: 32px;
+    padding-bottom: calc(0dvh + 64px);
+    width: 100%;
+    max-width: 460px;
+}
+
+.page > * {
+    z-index: 1;
+}
+
+.background_wrap {
+    z-index: 0;
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-image: url("/almost-there.webp");
     background-position-y: top;
     background-position-x: center;
     background-size: contain;
     background-repeat: no-repeat;
-    color: #fff;
-    padding-top: 64px;
-    background-color: #0F1323;
-    padding-top: 32px;
-    background-image: url("/almost-there.webp");
-    width: 100%;
-    max-width: 460px;
 }
 
 .header-title {

src/components/pages/ABDesign/v1/pages/Both/styles.module.css

@@ -12,6 +12,7 @@
     background-size: cover;
     color: #fff;
     padding-top: 32px;
+    padding-bottom: calc(0dvh + 64px);
     width: 100%;
     max-width: 460px;
 }

src/components/pages/ABDesign/v1/pages/HyperPersonalizedAstrologyPage/styles.module.css

@@ -9,6 +9,7 @@
     background-repeat: no-repeat;
     color: #fff;
     padding: 33px 16px;
+    padding-bottom: calc(0dvh + 64px);
     background-color: #171717;
     width: 100%;
     max-width: 460px;

src/components/pages/ABDesign/v1/pages/LoadingInRelationship/index.tsx

@@ -13,6 +13,7 @@ import BackgroundTopBlob from "../../ui/BackgroundTopBlob";
 import Header from "../../components/Header";
 import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
 import { usePreloadImages } from "@/hooks/preload/images";
+import { useTouchAction } from "@/hooks/touchAction/useTouchAction";
 
 function LoadingInRelationshipPage() {
   const navigate = useNavigate();
@@ -51,6 +52,7 @@ function LoadingInRelationshipPage() {
     "/crystal_ball.webp",
     "/technologist.webp",
   ]);
+  useTouchAction("none");
 
   useLottie({
     preloadKey: ELottieKeys.key,

src/components/pages/ABDesign/v1/pages/NoBirthtime/styles.module.css

@@ -9,6 +9,7 @@
     background: #0F1323;
     color: #fff;
     padding-top: 32px;
+    padding-bottom: calc(0dvh + 64px);
     width: 100%;
     max-width: 460px;
 }

src/components/pages/ABDesign/v1/pages/NotAlone/index.tsx

@@ -29,6 +29,7 @@ function NotAlonePage() {
 
   return (
     <section className={`${styles.page} page`}>
+      <div className={styles["background_wrap"]} />
       <Header
         isBackButtonVisible={false}
         classNameTitle={styles["header-title"]}

src/components/pages/ABDesign/v1/pages/NotAlone/styles.module.css

@@ -6,17 +6,31 @@
     justify-items: center;
     grid-template-rows: repeat(4, min-content);
     gap: 40px;
-    background: url("/DeWatermark2.webp");
-    background-position-y: bottom;
-    background-position-x: center;
-    background-size: cover;
     color: #fff;
-    padding-top: 64px;
     background-color: #0F1323;
     padding-top: 32px;
+    padding-bottom: calc(0dvh + 64px);
     width: 100%;
     max-width: 460px;
 }
+
+.page > * {
+    z-index: 1;
+}
+
+.background_wrap {
+    z-index: 0;
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-size: cover;
+    background-image: url("/DeWatermark2.webp");
+    background-position-y: bottom;
+    background-position-x: center;
+    background-repeat: no-repeat;
+}
   
 .header-title {
     color: #fff !important;

src/components/pages/ABDesign/v1/pages/PartnerRightPlace/styles.module.css

@@ -12,6 +12,7 @@
     background-size: cover;
     color: #fff;
     padding-top: 32px;
+    padding-bottom: calc(0dvh + 64px);
     width: 100%;
     max-width: 460px;
 }

src/components/pages/ABDesign/v1/pages/PartnerThing/styles.module.css

@@ -12,6 +12,7 @@
     background-size: cover;
     color: #fff;
     padding-top: 32px;
+    padding-bottom: calc(0dvh + 64px);
     width: 100%;
     max-width: 460px;
 }

src/components/pages/ABDesign/v1/pages/PartnerTotallyNormal/styles.module.css

@@ -12,6 +12,7 @@
     background-size: cover;
     color: #fff;
     padding-top: 32px;
+    padding-bottom: calc(0dvh + 64px);
     width: 100%;
     max-width: 460px;
 }

src/components/pages/ABDesign/v1/pages/Problems/styles.module.css

@@ -12,6 +12,7 @@
     background-repeat: no-repeat;
     color: #fff;
     padding-top: 32px;
+    padding-bottom: calc(0dvh + 64px);
     width: 100%;
     max-width: 460px;
 }

src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/index.tsx

@@ -25,6 +25,7 @@ function RelationshipAlmostTherePage() {
 
   return (
     <section className={`${styles.page} page`}>
+      <div className={styles["background_wrap"]} />
       <Header
         classNameTitle={styles["header-title"]}
         isBackButtonVisible={false}

src/components/pages/ABDesign/v1/pages/RelationshipAlmostThere/styles.module.css

@@ -12,11 +12,29 @@
   background-repeat: no-repeat;
   color: #fff;
   padding: 32px 16px;
+  padding-bottom: calc(0dvh + 64px);
   background-color: #171717;
   width: 100%;
   max-width: 460px;
 }
 
+.page > * {
+    z-index: 1;
+}
+
+.background_wrap {
+  z-index: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-image: url("/almost-there.webp");
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
 .title {
   font-size: 28px;
   line-height: auto;

src/components/pages/ABDesign/v1/pages/RelationshipZodiacInfo/index.tsx

@@ -55,6 +55,7 @@ function RelationshipZodiacInfoPage() {
 
   return (
     <section className={`${styles.page} page`}>
+      <div className={styles["background_wrap"]} />
       <Header
         isBackButtonVisible={false}
         classNameTitle={styles["header-title"]}

src/components/pages/ABDesign/v1/pages/RelationshipZodiacInfo/styles.module.css

@@ -15,10 +15,28 @@
   background-repeat: no-repeat;
   color: #fff;
   padding-top: 32px;
+  padding-bottom: calc(0dvh + 64px);
   width: 100%;
   max-width: 460px;
 }
 
+.page > * {
+    z-index: 1;
+}
+
+.background_wrap {
+    z-index: 0;
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-size: cover;
+    background-image: url("/single-zodiac-info.webp");
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
 .image-container {
   display: grid;
   align-items: center;

src/components/pages/ABDesign/v1/pages/Satisfied/index.tsx

@@ -39,12 +39,13 @@ function Satisfied() {
   };
 
   return (
-    <section
+    <section className={`${styles.page} page`}>
-      className={`${styles.page} page`}
+      <div
-      style={{
+        className={styles["background_wrap"]}
-        backgroundImage: `url(/satisfied-${satisfied}.webp)`,
+        style={{
-      }}
+          backgroundImage: `url(/satisfied-${satisfied}.webp)`,
-    >
+        }}
+      />
       <Header
         classNameTitle={styles["header-title"]}
         isBackButtonVisible={false}

src/components/pages/ABDesign/v1/pages/Satisfied/styles.module.css

@@ -2,16 +2,11 @@
   position: relative;
   height: fit-content;
   min-height: 100dvh;
-  background-position-y: top;
-  background-position-x: center;
-  background-repeat: no-repeat;
-  background-size: contain;
   color: #fff;
   padding-top: 32px;
   background-color: #0F1323;
   width: 100%;
   max-width: 460px;
-  background-image: url(/satisfied-yes.webp);
   display: grid;
   justify-content: center;
   justify-items: center;
@@ -19,6 +14,24 @@
   padding-bottom: calc(0dvh + 160px);
 }
 
+.page > * {
+    z-index: 1;
+}
+
+.background_wrap {
+    z-index: 0;
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-image: url(/satisfied-yes.webp);
+    background-position-y: top;
+    background-position-x: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
 .title {
   font-size: 27px;
   line-height: 125%;

src/components/pages/ABDesign/v1/pages/SingleZodiacInfo/index.tsx

@@ -15,7 +15,7 @@ function SingleZodiacInfoPage() {
   const birthdate = useSelector(selectors.selectQuestionnaire).birthdate;
   const gender = useSelector(selectors.selectQuestionnaire).gender;
   const zodiac = getZodiacSignByDate(birthdate);
-  const zodiacInfo = zodiacSignsInfo[gender as keyof IZodicSignsInfo].find(
+  const zodiacInfo = zodiacSignsInfo[gender as keyof IZodicSignsInfo]?.find(
     (sign) => sign.name === zodiac
   );
 
@@ -27,6 +27,7 @@ function SingleZodiacInfoPage() {
 
   return (
     <section className={`${styles.page} page`}>
+      <div className={styles["background_wrap"]} />
       <div className={styles.substrate} />
       <Header
         isBackButtonVisible={false}

src/components/pages/ABDesign/v1/pages/SingleZodiacInfo/styles.module.css

@@ -9,13 +9,9 @@
     flex-direction: column;
     gap: 40px;
     background-color: #0F1323;
-    background-image: url("/single-zodiac-info.webp");
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
     color: #fff;
     padding-top: 32px;
-    padding-bottom: 32px;
+    padding-bottom: calc(0dvh + 64px);
     width: 100%;
     max-width: 460px;
 }
@@ -23,6 +19,19 @@
 .page > * {
     z-index: 1;
 }
+
+.background_wrap {
+    z-index: 0;
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-size: cover;
+    background-image: url("/single-zodiac-info.webp");
+    background-position: center;
+    background-repeat: no-repeat;
+}
   
 .image {
     height: 285px;

src/components/pages/ABDesign/v1/pages/WithHead/styles.module.css

@@ -12,6 +12,7 @@
     background-size: cover;
     color: #fff;
     padding-top: 32px;
+    padding-bottom: calc(0dvh + 64px);
     width: 100%;
     max-width: 460px;
 }

src/components/pages/ABDesign/v1/pages/WithHeart/styles.module.css

@@ -12,6 +12,7 @@
     background-size: cover;
     color: #fff;
     padding-top: 32px;
+    padding-bottom: calc(0dvh + 64px);
     width: 100%;
     max-width: 460px;
 }

src/data.tsx

@@ -55,6 +55,7 @@ export interface IStep {
 export interface IQuestion {
   id: string;
   question: string;
+  touchAction?: string;
   answers?: IAnswer[];
   answersElement?: JSX.Element;
   answerClassName?: string;
@@ -106,8 +107,8 @@ export const aboutUsAnswersA: IAnswer[] = [
     id: "other",
     answer: "Other",
     icon: "",
-  }
+  },
-]
+];
 export const aboutUsAnswersB: IAnswer[] = [
   {
     id: "forbes",
@@ -128,8 +129,8 @@ export const aboutUsAnswersB: IAnswer[] = [
     id: "other",
     answer: "Other",
     icon: "",
-  }
+  },
-]
+];
 
 export const aboutUsAnswersNormal: IAnswer[] = [
   {
@@ -210,12 +211,12 @@ export const aboutUsAnswersNormal: IAnswer[] = [
 ];
 
 export const aboutUsAnswers: {
-  [key: string]: IAnswer[]
+  [key: string]: IAnswer[];
 } = {
-  'aboutUsAnswersA': aboutUsAnswersNormal,
+  aboutUsAnswersA: aboutUsAnswersNormal,
-  'aboutUsAnswersB': aboutUsAnswersB,
+  aboutUsAnswersB: aboutUsAnswersB,
-  'aboutUsAnswersNormal': aboutUsAnswersA
+  aboutUsAnswersNormal: aboutUsAnswersA,
-}
+};
 
 const currentlyAffectingAnswers: IAnswer[] = [
   {

src/hooks/touchAction/useTouchAction.ts

@@ -0,0 +1,11 @@
+import { useEffect } from "react"
+
+
+export const useTouchAction = (touchAction = 'pan-y') => {
+    useEffect(() => {
+        document.body.style.touchAction = touchAction
+        return () => {
+            document.body.style.touchAction = 'pan-y'
+        }
+    }, [touchAction])
+}

src/index.css

@@ -255,4 +255,8 @@ html {
 
 input, textarea {
   font-size: 16px !important;
+}
+
+html, body {
+  touch-action: pan-y;
 }