feat module 6, 7 : [UI] modifie atome diolog content, add redirect link, modified dialog view for web and mobile

src/components/ProductDetails/ProductDetails.jsx

@@ -541,17 +541,19 @@ const ProductDetails = () => {
         </Alert>
       )}
 
+      {/* Atome Popup */}
       <Dialog
         open={atomeOpen}
         onClose={() => setAtomeOpen(false)}
-        maxWidth="md"
-        fullWidth
+        maxWidth={false}
         PaperProps={{
           sx: {
             borderRadius: 0,
             backgroundColor: "#FFF",
+            width: { xs: "calc(100% - 48px)", md: 860 },
+            maxWidth: { xs: 340, md: "calc(100% - 160px)" },
             px: { xs: 3, md: 8 },
-            py: { xs: 6, md: 7 },
+            py: { xs: 3.5, md: 7 },
             position: "relative"
           }
         }}
@@ -561,51 +563,43 @@ const ProductDetails = () => {
           onClick={() => setAtomeOpen(false)}
           sx={{
             position: "absolute",
-            right: 16,
-            top: 12,
+            right: { xs: 8, md: 16 },
+            top: { xs: 6, md: 12 },
             color: "#000"
           }}
         >
-          <CloseIcon sx={{ fontSize: 34 }} />
+          <CloseIcon sx={{ fontSize: { xs: 24, md: 34 } }} />
         </IconButton>
 
         <Box sx={{ textAlign: "center" }}>
-          <Box sx={{ display: "inline-flex", alignItems: "center", gap: 1, mb: 4 }}>
+          <Box sx={{ display: "inline-flex", alignItems: "center", gap: 1, mb: { xs: 2, md: 4 } }}>
             <Typography
               component="span"
               sx={{
-                fontSize: { xs: "2.25rem", md: "3rem" },
+                fontSize: { xs: "2rem", md: "3rem" },
                 fontWeight: 700,
                 lineHeight: 1,
                 color: "#000"
               }}
             >
-              atome
+              Atome
             </Typography>
             <Box
-              component="span"
+              component="img"
+              src={atomeLogo}
+              alt="Atome"
               sx={{
-                display: "inline-flex",
-                alignItems: "center",
-                justifyContent: "center",
-                width: { xs: 42, md: 50 },
-                height: { xs: 42, md: 50 },
-                borderRadius: "9px",
-                backgroundColor: "#F0FF4F",
-                color: "#000",
-                fontWeight: 700,
-                fontSize: { xs: "2rem", md: "2.35rem" },
-                lineHeight: 1
+                width: { xs: 36, md: 50 },
+                height: { xs: 36, md: 50 },
+                objectFit: "contain"
               }}
-            >
-              A
-            </Box>
+            />
           </Box>
 
-          <Typography sx={{ fontSize: "1.35rem", fontWeight: 500, mb: 1 }}>
+          <Typography sx={{ fontSize: { xs: "1rem", md: "1.35rem" }, fontWeight: 700, mb: 1 }}>
             Time to own it
           </Typography>
-          <Typography sx={{ color: "#7D8799", fontSize: "1.1rem", mb: { xs: 6, md: 9 } }}>
+          <Typography sx={{ color: "#7D8799", fontSize: { xs: "0.8rem", md: "1.1rem" }, fontWeight: 600, mb: { xs: 4, md: 9 } }}>
             Why wait? Shop today, 3 easy payments.
           </Typography>
 
@@ -613,8 +607,8 @@ const ProductDetails = () => {
             sx={{
               display: "grid",
               gridTemplateColumns: { xs: "1fr", md: "repeat(3, 1fr)" },
-              gap: { xs: 5, md: 6 },
-              mb: { xs: 6, md: 9 }
+              gap: { xs: 2.5, md: 6 },
+              mb: { xs: 4, md: 9 }
             }}
           >
             {[
@@ -634,53 +628,87 @@ const ProductDetails = () => {
                 text: "Vast variety"
               }
             ].map((item) => (
-              <Box key={item.title} sx={{ textAlign: "center" }}>
+              <Box
+                key={item.title}
+                sx={{
+                  display: { xs: "grid", md: "block" },
+                  gridTemplateColumns: { xs: "60px 1fr", md: "none" },
+                  alignItems: "center",
+                  columnGap: 1.5,
+                  textAlign: { xs: "left", md: "center" }
+                }}
+              >
                 <Box
                   sx={{
                     color: "#111827",
                     "& svg": {
-                      fontSize: 72,
+                      fontSize: { xs: 42, md: 72 },
                       stroke: "#111827",
                       strokeWidth: 0.6
                     },
-                    mb: 3
+                    mb: { xs: 0, md: 3 },
+                    textAlign: "center"
                   }}
                 >
                   {item.icon}
                 </Box>
-                <Typography sx={{ fontWeight: 700, fontSize: "1.05rem", mb: 1 }}>
-                  {item.title}
-                </Typography>
-                <Typography sx={{ color: "#7D8799", fontSize: "1rem" }}>
-                  {item.text}
-                </Typography>
+                <Box>
+                  <Typography sx={{ fontWeight: 700, fontSize: { xs: "0.875rem", md: "1.05rem" }, mb: { xs: 0.25, md: 1 } }}>
+                    {item.title}
+                  </Typography>
+                  <Typography sx={{ color: "#7D8799", fontSize: { xs: "0.8rem", md: "1rem" }, fontWeight: 600 }}>
+                    {item.text}
+                  </Typography>
+                </Box>
               </Box>
             ))}
           </Box>
 
-          <Typography sx={{ fontWeight: 700, mb: 2 }}>
-            Terms & Conditions
-          </Typography>
-          <Button
-            component="a"
-            href="https://www.atome.sg/how-it-works"
-            target="_blank"
-            rel="noopener noreferrer"
-            variant="contained"
+          <Box
             sx={{
-              backgroundColor: "#F0FF4F",
-              color: "#071021",
-              minWidth: 260,
-              fontWeight: 700,
-              fontSize: "1.35rem",
-              textTransform: "none",
-              "&:hover": {
-                backgroundColor: "#E5F33F"
-              }
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center"
             }}
           >
-            How it works
-          </Button>
+            <Typography
+              component="a"
+              href="https://www.atome.sg/en-sg/terms-of-service"
+              target="_blank"
+              rel="noopener noreferrer"
+              sx={{
+                display: "inline-block",
+                color: "inherit",
+                textDecoration: "none",
+                fontWeight: 700,
+                mb: 2,
+                fontSize: { xs: "0.85rem", md: "1rem" }
+              }}
+            >
+              Terms & Conditions
+            </Typography>
+            <Button
+              component="a"
+              href="https://www.atome.sg/how-it-works"
+              target="_blank"
+              rel="noopener noreferrer"
+              variant="contained"
+              sx={{
+                backgroundColor: "#F0FF4F",
+                color: "#071021",
+                minWidth: { xs: 220, md: 260 },
+                fontWeight: 700,
+                fontSize: { xs: "1.15rem", md: "1.35rem" },
+                textTransform: "none",
+                borderRadius: 0,
+                "&:hover": {
+                  backgroundColor: "#E5F33F"
+                }
+              }}
+            >
+              How it works
+            </Button>
+          </Box>
         </Box>
       </Dialog>
     </Box>