Fix Health Sector Page

components/ddoc-doc-component/ddoc-doc-step3.jsx

@@ -16,7 +16,7 @@ export default function DdocDocPage3({ handleNext, handlers }) {
   const [openModal, setOpenModal] = useState(false);
   const [step, setStep] = useState(0);
 
-  const handleMisClick = (event) => {
+  const handleMissClick = (event) => {
     if (
       !event.target.closest(".clickable-box") &&
       !event.target.closest(".arrow-button") &&
@@ -50,7 +50,7 @@ export default function DdocDocPage3({ handleNext, handlers }) {
 
   return (
     <Box
-      onClick={handleMisClick}
+      onClick={handleMissClick}
       sx={{
         display: "flex",
         flexDirection: "column",
@@ -60,7 +60,7 @@ export default function DdocDocPage3({ handleNext, handlers }) {
         backgroundRepeat: "no-repeat",
         backgroundPosition: "bottom",
         height: "100vh",
-        width: "97vw",
+        width: "100vw",
         position: "relative",
       }}
       {...handlers}
@@ -73,9 +73,12 @@ export default function DdocDocPage3({ handleNext, handlers }) {
           border: `5px solid ${theme.palette.primary.main}`,
           borderRadius: "12px",
           p: "4%",
-          bottom: "66%",
-          left: "2%",
+          bottom: "68%",
+          left: "3%",
           animation: `${step === 0 ? glow : ""} 2s infinite`,
+          [theme.breakpoints.down("md")]: {
+            left: "5%",
+          },
         }}
       ></Box>
       <Typography

components/ddoc-doc-component/ddoc-doc-step9.jsx

@@ -15,7 +15,7 @@ export default function DdocDocPage9({ handleNext, handlers }) {
   const [missClicksCount, setMissclickCount] = useState(0);
   const [openModal, setOpenModal] = useState(false);
 
-  const handleMisClick = (event) => {
+  const handleMissClick = (event) => {
     if (
       !event.target.closest(".clickable-box") &&
       !event.target.closest(".arrow-button") &&
@@ -35,7 +35,7 @@ export default function DdocDocPage9({ handleNext, handlers }) {
 
   return (
     <Box
-      onClick={handleMisClick}
+      onClick={handleMissClick}
       sx={{
         display: "flex",
         flexDirection: "column",
@@ -57,7 +57,7 @@ export default function DdocDocPage9({ handleNext, handlers }) {
           position: "absolute",
           border: `5px solid ${theme.palette.primary.main}`,
           borderRadius: "12px",
-          py: "9%",
+          py: "13%",
           px: "49%",
           bottom: "1%",
           animation: `${glow} 2s infinite`,

components/doctor-now-component/doctor-now-step4.jsx

@@ -43,7 +43,7 @@ export default function DoctorNowPage5({ handleNext, handlers }) {
         backgroundImage: `url(${Screen.src})`,
         backgroundSize: "contain",
         backgroundRepeat: "no-repeat",
-        backgroundPosition: "bottom",
+        backgroundPosition: "top",
         height: "100vh",
         width: "97vw",
         position: "relative",
@@ -59,7 +59,7 @@ export default function DoctorNowPage5({ handleNext, handlers }) {
           borderRadius: "12px",
           px: "48%",
           py: "17%",
-          bottom: "43%",
+          top: "25%",
           animation: `${glow} 2s infinite`,
         }}
       ></Box>

components/e-gen-component/e-gen-step1.jsx

@@ -41,9 +41,9 @@ export default function EGenPage1({ handleNext, handlers }) {
         flexDirection: "column",
         alignItems: "center",
         backgroundImage: `url(${Screen.src})`,
-        backgroundSize: "contain",
+        backgroundSize: "fixed",
         backgroundRepeat: "no-repeat",
-        backgroundPosition: "bottom",
+        backgroundPosition: "top",
         height: "100vh",
         width: "97vw",
         position: "relative",
@@ -59,7 +59,7 @@ export default function EGenPage1({ handleNext, handlers }) {
           borderRadius: "12px",
           py: "4%",
           px: "15%",
-          bottom: "47%",
+          top: "10%",
           left: "6%",
           animation: `${glow} 2s infinite`,
         }}

components/e-gen-component/e-gen-step3.jsx

@@ -43,9 +43,9 @@ export default function EGenPage3({ handleNext, handlers }) {
         backgroundImage: `url(${Screen.src})`,
         backgroundSize: "contain",
         backgroundRepeat: "no-repeat",
-        backgroundPosition: "bottom",
+        backgroundPosition: "top",
         height: "100vh",
-        width: "97vw",
+        width: "100vw",
         position: "relative",
       }}
       {...handlers}
@@ -59,9 +59,17 @@ export default function EGenPage3({ handleNext, handlers }) {
           borderRadius: "12px",
           py: "5%",
           px: "12%",
-          bottom: "40%",
+          top: "32%",
           left: "3%",
           animation: `${glow} 2s infinite`,
+          [theme.breakpoints.up("sm")]: {
+            top: "30%",
+            left: "3%",
+          },
+          [theme.breakpoints.up("md")]: {
+            top: "35%",
+            left: "3%",
+          },
         }}
       ></Box>
       <Button

theme.js

@@ -60,5 +60,14 @@ export const createCustomTheme = (fontSize) => {
         fontWeight: 500,
       },
     },
+    breakpoints: {
+      values: {
+        xs: 0,
+        sm: 360, // Galaxy small
+        md: 390, // iPhone base
+        lg: 412, // Galaxy large
+        xl: 428, // iPhone Pro Max
+      },
+    },
   });
 };