feat: update section4 layout to match landing page and add responsive design; refs #50 #51

Author: elainefan331

public/img/click_icon.png

@@ -1,4 +1,5 @@
 import { Box, Typography } from "@mui/material";
+import { Colors } from "design/theme";
 import React from "react";
 
 const Section4: React.FC = () => {
@@ -11,19 +12,60 @@ const Section4: React.FC = () => {
         backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2371feed'/%3E%3Cstop offset='1' stop-color='%2371feed' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23abb2f9'/%3E%3Cstop offset='1' stop-color='%23abb2f9' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%231fa0f6'/%3E%3Cstop offset='1' stop-color='%231fa0f6' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='1' stop-color='%23FFFFFF' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2302DEC4'/%3E%3Cstop offset='1' stop-color='%2302DEC4' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%235865F2'/%3E%3Cstop offset='1' stop-color='%235865F2' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E")`,
         backgroundAttachment: "fixed",
         backgroundSize: "cover",
-        padding: "5rem 7rem",
+        minHeight: "100vh",
         display: "flex",
-        flexDirection: "row",
+        flexDirection: { xs: "column", md: "row-reverse" },
         alignItems: "center",
-        gap: 6,
+        justifyContent: "center",
+        gap: 15,
+        px: { xs: 2, md: 6 },
+        py: { xs: 8, md: 12 },
       }}
     >
+      {/* title and text container */}
       <Box
         sx={{
+          flex: 1,
           display: "flex",
           flexDirection: "column",
-          maxWidth: "43%",
-          position: "relative",
+          justifyContent: "center",
+          maxWidth: "600px",
+          alignItems: { xs: "center", md: "flex-start" },
+          textAlign: { xs: "center", md: "left" },
+          gap: 4,
+          mt: { xs: 4, md: 4 },
+          px: 2,
+        }}
+      >
+        <Typography
+          variant="h3"
+          sx={{ color: Colors.lightGray, fontWeight: "bold" }}
+        >
+          Plateform Workflow
+        </Typography>
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "row",
+            gap: "10px",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <Typography variant="h6" sx={{ color: Colors.lightGray }}>
+            click each card to learn more
+          </Typography>
+          <img
+            src={`${process.env.PUBLIC_URL}/img/click_icon.png`}
+            style={{ width: "50px", height: "auto", display: "block" }}
+          />
+        </Box>
+      </Box>
+
+      {/* img container */}
+      <Box
+        sx={{
+          marginTop: 3,
         }}
       >
         {[
@@ -48,11 +90,12 @@ const Section4: React.FC = () => {
             key={index}
             onClick={card.onClick}
             sx={{
+              maxWidth: "700px",
               width: "100%",
               cursor: "pointer",
               position: "relative",
               zIndex: arr.length - index,
-              marginTop: index === 0 ? 0 : "-17px", // adjust overlap
+              marginTop: index === 0 ? 0 : "-20px", // adjust overlap
               transition: "transform 0.2s",
               "&:hover": {
                 transform: "scale(1.02)",
@@ -63,14 +106,16 @@ const Section4: React.FC = () => {
             <img
               src={process.env.PUBLIC_URL + card.src}
               alt={`card-${index}`}
-              style={{ width: "100%", height: "auto", display: "block" }}
+              style={{
+                width: "100%",
+                height: "auto",
+                display: "block",
+                minWidth: "300px",
+              }}
             />
           </Box>
         ))}
       </Box>
-      <Box>
-        <Typography variant="h6">click each card to learn more</Typography>
-      </Box>
     </Box>
   );
 };