AW-92-trial-payment-page-v1

src/components/pages/ABDesign/v1/pages/TrialPayment/components/Header/index.tsx

@@ -1,6 +1,8 @@
+import { useSelector } from "react-redux";
 import CustomButton from "../CustomButton";
 import DiscountExpires from "../DiscountExpires";
 import styles from "./styles.module.css";
+import { selectors } from "@/store";
 
 interface IHeaderProps {
   buttonText?: string;
@@ -13,8 +15,14 @@ function Header({
   buttonText = "get my reading",
   buttonClassName = "",
 }: IHeaderProps) {
+  const { gender } = useSelector(selectors.selectQuestionnaire);
   return (
-    <header className={styles.header}>
+    <header
+      className={styles.header}
+      style={{
+        backgroundColor: gender === "male" ? "#C1E5FF" : "#F7EBFF",
+      }}
+    >
       <DiscountExpires />
       <CustomButton
         className={`${styles.button} ${buttonClassName}`}

src/components/pages/ABDesign/v1/pages/TrialPayment/components/Header/styles.module.css

@@ -1,5 +1,7 @@
 .header {
-  position: relative;
+  position: sticky;
+  top: 0;
+  z-index: 30;
   height: 62px;
   width: 100%;
   max-width: 560px;

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

@@ -6,6 +6,8 @@
   padding-bottom: 62px;
   width: 100%;
   max-width: 460px;
+  overflow: inherit;
+  overflow-x: clip;
 }
 
 .title {