dev-jaanvi #1

Open
jaanvi wants to merge 155 commits from dev-jaanvi into main
8 changed files with 695 additions and 498 deletions
Showing only changes of commit 7f4914c695 - Show all commits

View file

@ -57,10 +57,9 @@ const AddManagerStationModal = ({ open, handleClose }: any) => {
top: "50%", top: "50%",
left: "50%", left: "50%",
transform: "translate(-50%, -50%)", transform: "translate(-50%, -50%)",
width: 400, width: 500,
bgcolor: "background.paper",
boxShadow: 24, boxShadow: 24,
p: 3, p: 0,
borderRadius: 2, borderRadius: 2,
}} }}
> >
@ -70,6 +69,10 @@ const AddManagerStationModal = ({ open, handleClose }: any) => {
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
backgroundColor: "#000000",
color: "#D0E1E9",
padding: "20px 24px",
borderRadius: "10px 10px 0 0",
}} }}
> >
<Typography variant="h6" fontWeight={600} fontSize={"16px"}> <Typography variant="h6" fontWeight={600} fontSize={"16px"}>
@ -81,10 +84,23 @@ const AddManagerStationModal = ({ open, handleClose }: any) => {
</Box> </Box>
{/* Divider */} {/* Divider */}
<Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} /> {/* <Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} /> */}
<Box
sx={{
backgroundColor: "#b5c4cb", // light background for body
padding: "20px",
borderRadius: "0 0 10px 10px",
}}
>
{/* Connector Type */} {/* Connector Type */}
<Typography variant="body2" fontWeight={500} mb={0.5}> <Typography
variant="body2"
fontWeight={500}
mb={0.5}
color="#000000"
fontSize={"16px"}
mt={1}
>
Connector Type Connector Type
</Typography> </Typography>
<TextField <TextField
@ -97,18 +113,34 @@ const AddManagerStationModal = ({ open, handleClose }: any) => {
/> />
{/* Power */} {/* Power */}
<Typography variant="body2" fontWeight={500} mb={0.5}> <Typography
variant="body2"
fontWeight={500}
mb={0.5}
color="#000000"
fontSize={"16px"}
mt={1}
>
Power (kW) Power (kW)
</Typography> </Typography>
<TextField <TextField
{...register("power", { required: "Power is required" })} {...register("power", {
required: "Power is required",
})}
fullWidth fullWidth
error={!!errors.power} error={!!errors.power}
helperText={errors.power?.message} helperText={errors.power?.message}
/> />
{/* Price */} {/* Price */}
<Typography variant="body2" fontWeight={500} mb={0.5}> <Typography
variant="body2"
fontWeight={500}
mb={0.5}
color="#000000"
fontSize={"16px"}
mt={1}
>
Price () Price ()
</Typography> </Typography>
<TextField <TextField
@ -138,23 +170,28 @@ const AddManagerStationModal = ({ open, handleClose }: any) => {
{/* Submit */} {/* Submit */}
<Box <Box
sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }} sx={{
display: "flex",
justifyContent: "flex-end",
mt: 3,
}}
> >
<Button <Button
type="submit" type="submit"
sx={{ sx={{
backgroundColor: "#52ACDF", backgroundColor: "#000000",
color: "white", color: "#D0E1E9",
borderRadius: "8px", borderRadius: "8px",
fontSize: "16px", fontSize: "16px",
width: "117px", width: "117px",
"&:hover": { backgroundColor: "#439BC1" }, "&:hover": { backgroundColor: "#454545" },
}} }}
> >
Add Station Add Station
</Button> </Button>
</Box> </Box>
</Box> </Box>
</Box>
</Modal> </Modal>
); );
}; };

View file

@ -98,10 +98,10 @@ const AddSlotModal = ({ open, handleClose }: any) => {
top: "50%", top: "50%",
left: "50%", left: "50%",
transform: "translate(-50%, -50%)", transform: "translate(-50%, -50%)",
width: 400, width: 500,
bgcolor: "background.paper",
boxShadow: 24, boxShadow: 24,
p: 3, p: 0,
borderRadius: 2, borderRadius: 2,
}} }}
> >
@ -111,6 +111,11 @@ const AddSlotModal = ({ open, handleClose }: any) => {
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
backgroundColor: "#000000",
color: "#D0E1E9",
padding: "16px 24px",
borderRadius: "10px 10px 0 0",
}} }}
> >
<Typography variant="h6" fontWeight={600} fontSize={"16px"}> <Typography variant="h6" fontWeight={600} fontSize={"16px"}>
@ -122,8 +127,15 @@ const AddSlotModal = ({ open, handleClose }: any) => {
</Box> </Box>
{/* Horizontal Line */} {/* Horizontal Line */}
<Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} /> {/* <Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} /> */}
<Box
sx={{
backgroundColor: "#b5c4cb",
padding: "24px",
borderRadius: "0 0 10px 10px",
}}
>
{/* Date Range Toggle */} {/* Date Range Toggle */}
<FormControlLabel <FormControlLabel
control={ control={
@ -137,13 +149,22 @@ const AddSlotModal = ({ open, handleClose }: any) => {
fontWeight: 500, fontWeight: 500,
fontSize: "16px", fontSize: "16px",
margin: 0, margin: 0,
color: "#000000",
mb: 1,
}} }}
/> />
{/* Date Input Fields */} {/* Date Input Fields */}
{isDateRange ? ( {isDateRange ? (
<> <>
<Typography variant="body2" fontWeight={500} mb={0.5}> <Typography
variant="body2"
fontWeight={500}
mb={1}
mt={1}
color="#000000"
fontSize={"16px"}
>
Start Date Start Date
</Typography> </Typography>
<TextField <TextField
@ -159,7 +180,14 @@ const AddSlotModal = ({ open, handleClose }: any) => {
helperText={errors.startingDate?.message} helperText={errors.startingDate?.message}
inputProps={{ min: today }} inputProps={{ min: today }}
/> />
<Typography variant="body2" fontWeight={500} mb={0.5}> <Typography
variant="body2"
fontWeight={500}
fontSize={"16px"}
mb={1}
mt={1}
color="#000000"
>
End Date End Date
</Typography> </Typography>
<TextField <TextField
@ -178,7 +206,14 @@ const AddSlotModal = ({ open, handleClose }: any) => {
</> </>
) : ( ) : (
<> <>
<Typography variant="body2" fontWeight={500} mb={0.5}> <Typography
variant="body2"
fontWeight={500}
mb={1}
color="#000000"
fontSize={"16px"}
mt={1}
>
Date Date
</Typography> </Typography>
<TextField <TextField
@ -198,7 +233,15 @@ const AddSlotModal = ({ open, handleClose }: any) => {
)} )}
{/* Start Hour */} {/* Start Hour */}
<Typography variant="body2" fontWeight={500} mb={0.5}>
<Typography
variant="body2"
fontWeight={500}
mb={1}
color="#000000"
fontSize={"16px"}
mt={1}
>
Start Hour Start Hour
</Typography> </Typography>
<TextField <TextField
@ -212,7 +255,14 @@ const AddSlotModal = ({ open, handleClose }: any) => {
/> />
{/* End Hour */} {/* End Hour */}
<Typography variant="body2" fontWeight={500} mb={0.5}> <Typography
variant="body2"
fontWeight={500}
mb={1}
color="#000000"
fontSize={"16px"}
mt={1}
>
End Hour End Hour
</Typography> </Typography>
<TextField <TextField
@ -230,7 +280,14 @@ const AddSlotModal = ({ open, handleClose }: any) => {
/> />
{/* Duration and Duration Unit */} {/* Duration and Duration Unit */}
<Typography variant="body2" fontWeight={500} mb={0.5}> <Typography
variant="body2"
fontWeight={500}
mb={1}
color="#000000"
fontSize={"16px"}
mt={1}
>
Slot Duration Slot Duration
</Typography> </Typography>
<Box display="flex" alignItems="center" gap={2}> <Box display="flex" alignItems="center" gap={2}>
@ -253,7 +310,9 @@ const AddSlotModal = ({ open, handleClose }: any) => {
<InputLabel>Unit</InputLabel> <InputLabel>Unit</InputLabel>
<Select <Select
value={durationUnit} value={durationUnit}
onChange={(e) => setDurationUnit(e.target.value)} onChange={(e) =>
setDurationUnit(e.target.value)
}
> >
<MenuItem value="minutes">Minutes</MenuItem> <MenuItem value="minutes">Minutes</MenuItem>
<MenuItem value="hours">Hours</MenuItem> <MenuItem value="hours">Hours</MenuItem>
@ -267,12 +326,16 @@ const AddSlotModal = ({ open, handleClose }: any) => {
alignItems="center" alignItems="center"
justifyContent="space-between" justifyContent="space-between"
gap={2} gap={2}
mt={1}
> >
<Button <Button
onClick={() => setIsAvailable((prev) => !prev)} onClick={() => setIsAvailable((prev) => !prev)}
variant={isAvailable ? "contained" : "outlined"} sx={{
color="primary" marginTop: 1,
sx={{ marginTop: 1 }} color: "#D0E1E9",
backgroundColor: "#000000",
"&:hover": { backgroundColor: "#454545" },
}}
> >
Check Availability Check Availability
</Button> </Button>
@ -283,23 +346,28 @@ const AddSlotModal = ({ open, handleClose }: any) => {
{/* Submit Button */} {/* Submit Button */}
<Box <Box
sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }} sx={{
display: "flex",
justifyContent: "flex-end",
mt: 3,
}}
> >
<Button <Button
type="submit" type="submit"
sx={{ sx={{
backgroundColor: "#52ACDF", backgroundColor: "#000000",
color: "white", color: "#D0E1E9",
borderRadius: "8px", borderRadius: "8px",
fontSize: "16px", fontSize: "16px",
width: "117px", width: "117px",
"&:hover": { backgroundColor: "#439BC1" }, "&:hover": { backgroundColor: "#454545" },
}} }}
> >
Add Slot Add Slot
</Button> </Button>
</Box> </Box>
</Box> </Box>
</Box>
</Modal> </Modal>
); );
}; };

View file

@ -31,7 +31,7 @@ const AddStationLocationModal = ({
}; };
return ( return (
<Dialog open={open} onClose={handleClose}> <Dialog open={open} onClose={handleClose} >
<DialogTitle>Search Near By Stations</DialogTitle> <DialogTitle>Search Near By Stations</DialogTitle>
<DialogContent> <DialogContent>
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>

View file

@ -648,6 +648,10 @@ const CustomTable: React.FC<CustomTableProps> = ({
}, },
}} }}
> >
{user?.userType !==
"manager" &&
user?.userType !==
"user" && (
<MenuItem <MenuItem
onClick={() => onClick={() =>
handleMenuAction( handleMenuAction(
@ -658,7 +662,8 @@ const CustomTable: React.FC<CustomTableProps> = ({
color: "#000000", color: "#000000",
fontSize: fontSize:
"16px", "16px",
display: "flex", display:
"flex",
alignItems: alignItems:
"center", "center",
gap: 1, gap: 1,
@ -673,6 +678,9 @@ const CustomTable: React.FC<CustomTableProps> = ({
/> />
View View
</MenuItem> </MenuItem>
)}
{ user?.userType !==
"user" && (
<MenuItem <MenuItem
onClick={() => onClick={() =>
handleMenuAction( handleMenuAction(
@ -697,7 +705,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
}} }}
/> />
Edit Edit
</MenuItem> </MenuItem>)}
<MenuItem <MenuItem
onClick={() => onClick={() =>
handleMenuAction( handleMenuAction(

View file

@ -128,7 +128,7 @@ const EditManagerStationModal: React.FC<EditManagerStationModalProps> = ({
width: 400, width: 400,
bgcolor: "background.paper", bgcolor: "background.paper",
boxShadow: 24, boxShadow: 24,
p: 3, p: 0,
borderRadius: 2, borderRadius: 2,
}} }}
> >
@ -138,6 +138,10 @@ const EditManagerStationModal: React.FC<EditManagerStationModalProps> = ({
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
backgroundColor: "#000000",
color: "#D0E1E9",
padding: "20px 24px",
borderRadius: "10px 10px 0 0",
}} }}
> >
<Typography variant="h6" fontWeight={600}> <Typography variant="h6" fontWeight={600}>
@ -148,26 +152,43 @@ const EditManagerStationModal: React.FC<EditManagerStationModalProps> = ({
</CustomIconButton> </CustomIconButton>
</Box> </Box>
<Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} /> {/* <Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} /> */}
<Box
sx={{
backgroundColor: "#b5c4cb", // light background for body
padding: "20px",
borderRadius: "0 0 10px 10px",
}}
>
{/* Input Fields */} {/* Input Fields */}
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }}> <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }}>
{/* Connector Type */} {/* Connector Type */}
<Box sx={{ flex: "1 1 100%" }}> <Box sx={{ flex: "1 1 100%" }}>
<Typography variant="body2" fontWeight={500} mb={0.5}> <Typography
variant="body2"
fontWeight={500}
mb={0.5}
color="#000000"
fontSize={"16px"}
>
Connector Type Connector Type
</Typography> </Typography>
<Controller <Controller
name="connectorType" name="connectorType"
control={control} control={control}
rules={{ required: "Connector type is required" }} rules={{
required: "Connector type is required",
}}
render={({ field }) => ( render={({ field }) => (
<CustomTextField <CustomTextField
{...field} {...field}
fullWidth fullWidth
size="small" size="small"
error={!!errors.connectorType} error={!!errors.connectorType}
helperText={errors.connectorType?.message} helperText={
errors.connectorType?.message
}
/> />
)} )}
/> />
@ -175,7 +196,13 @@ const EditManagerStationModal: React.FC<EditManagerStationModalProps> = ({
{/* Power */} {/* Power */}
<Box sx={{ flex: "1 1 48%" }}> <Box sx={{ flex: "1 1 48%" }}>
<Typography variant="body2" fontWeight={500} mb={0.5}> <Typography
variant="body2"
fontWeight={500}
mb={0.5}
color="#000000"
fontSize={"16px"}
>
Power Power
</Typography> </Typography>
<Controller <Controller
@ -197,7 +224,13 @@ const EditManagerStationModal: React.FC<EditManagerStationModalProps> = ({
{/* Price */} {/* Price */}
<Box sx={{ flex: "1 1 48%" }}> <Box sx={{ flex: "1 1 48%" }}>
<Typography variant="body2" fontWeight={500} mb={0.5}> <Typography
variant="body2"
fontWeight={500}
mb={0.5}
color="#000000"
fontSize={"16px"}
>
Price Price
</Typography> </Typography>
<Controller <Controller
@ -235,7 +268,9 @@ const EditManagerStationModal: React.FC<EditManagerStationModalProps> = ({
}} }}
/> />
} }
label={available ? "Available" : "Not Available"} label={
available ? "Available" : "Not Available"
}
sx={{ mt: 1 }} sx={{ mt: 1 }}
/> />
</Box> </Box>
@ -243,17 +278,21 @@ const EditManagerStationModal: React.FC<EditManagerStationModalProps> = ({
{/* Submit Button */} {/* Submit Button */}
<Box <Box
sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }} sx={{
display: "flex",
justifyContent: "flex-end",
mt: 3,
}}
> >
<Button <Button
type="submit" type="submit"
sx={{ sx={{
backgroundColor: "#52ACDF", backgroundColor: "#000000",
color: "white", color: "#D0E1E9",
borderRadius: "8px", borderRadius: "8px",
fontSize: "16px", fontSize: "16px",
width: "117px", width: "117px",
"&:hover": { backgroundColor: "#439BC1" }, "&:hover": { backgroundColor: "#454545" },
}} }}
disabled={loading} disabled={loading}
> >
@ -265,6 +304,7 @@ const EditManagerStationModal: React.FC<EditManagerStationModalProps> = ({
</Button> </Button>
</Box> </Box>
</Box> </Box>
</Box>
</Modal> </Modal>
); );
}; };

View file

@ -73,7 +73,6 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
setLoading(true); setLoading(true);
try { try {
await dispatch( await dispatch(
updateSlot({ updateSlot({
id: editRow.id, id: editRow.id,
@ -112,9 +111,9 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
left: "50%", left: "50%",
transform: "translate(-50%, -50%)", transform: "translate(-50%, -50%)",
width: 400, width: 400,
bgcolor: "#000000",
boxShadow: 24, boxShadow: 24,
p: 3, p: 0,
borderRadius: 2, borderRadius: 2,
}} }}
> >
@ -124,6 +123,10 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
backgroundColor: "#000000",
color: "#D0E1E9",
padding: "20px 24px",
borderRadius: "10px 10px 0 0",
}} }}
> >
<Typography <Typography
@ -143,8 +146,14 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
</Box> </Box>
{/* Horizontal Line */} {/* Horizontal Line */}
<Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} /> {/* <Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} /> */}
<Box
sx={{
backgroundColor: "#b5c4cb", // light background for body
padding: "20px",
borderRadius: "0 0 10px 10px",
}}
>
{/* Input Fields */} {/* Input Fields */}
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }}> <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2 }}>
{/* Start Time */} {/* Start Time */}
@ -153,7 +162,8 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
variant="body2" variant="body2"
fontWeight={500} fontWeight={500}
mb={0.5} mb={0.5}
color="#D0E1E9" color="#000000"
fontSize={"16px"}
> >
Start Time Start Time
</Typography> </Typography>
@ -180,7 +190,8 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
variant="body2" variant="body2"
fontWeight={500} fontWeight={500}
mb={0.5} mb={0.5}
color="#D0E1E9" color="#000000"
fontSize={"16px"}
> >
End Time End Time
</Typography> </Typography>
@ -204,17 +215,21 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
{/* Submit Button */} {/* Submit Button */}
<Box <Box
sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }} sx={{
display: "flex",
justifyContent: "flex-end",
mt: 3,
}}
> >
<Button <Button
type="submit" type="submit"
sx={{ sx={{
backgroundColor: "#D0E1E9", backgroundColor: "#000000",
color: "#000000", color: "#D0E1E9",
borderRadius: "8px", borderRadius: "8px",
fontSize: "16px", fontSize: "16px",
width: "117px", width: "117px",
"&:hover": { backgroundColor: "#D0E1E9" }, "&:hover": { backgroundColor: "#454545" },
}} }}
disabled={loading} // Disable the button during loading state disabled={loading} // Disable the button during loading state
> >
@ -226,6 +241,7 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
</Button> </Button>
</Box> </Box>
</Box> </Box>
</Box>
</Modal> </Modal>
); );
}; };

View file

@ -11,9 +11,9 @@ const MenuItem = styled(MuiMenuItem)({
margin: "2px 10px", margin: "2px 10px",
borderBottom: "none", borderBottom: "none",
"& .MuiButtonBase-root-MuiButton-root":{ "& .MuiButtonBase-root-MuiButton-root": {
fontSize:"16px", fontSize: "16px",
} },
}); });
export default function OptionsMenu({ export default function OptionsMenu({
@ -48,20 +48,21 @@ export default function OptionsMenu({
paper: { paper: {
elevation: 0, elevation: 0,
sx: { sx: {
borderRadius: "12px",
overflow: "visible", overflow: "visible",
//filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))", // filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
mt: 1.5, mt: 1,
backgroundColor: "#000000",
"& .MuiList-root": { // "& .MuiList-root": {
background: "#D0E1E9", // background: "#000000",
// },
},
"& .MuiMenuItem-root": { "& .MuiMenuItem-root": {
borderBottom: "none", // Remove any divider under menu items borderBottom: "none",
}, },
}, },
}, },
}} }}
transformOrigin={{ horizontal: "right", vertical: "top" }} transformOrigin={{ horizontal: "right", vertical: "top" }}
anchorOrigin={{ horizontal: "right", vertical: "bottom" }} anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
> >
@ -72,6 +73,7 @@ export default function OptionsMenu({
"&::before": { "&::before": {
display: "none", display: "none",
}, },
color: "#D0E1E9",
}} }}
> >
<MenuItem onClick={onClose}>Profile</MenuItem> <MenuItem onClick={onClose}>Profile</MenuItem>

View file

@ -56,7 +56,7 @@ const LandingPage = () => {
xs: " #000000", xs: " #000000",
}, },
color: "white", color: "white",
fontFamily: "Gilory", fontFamily: '"Publica Sans Round Medium", sans-serif',
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
}} }}
@ -79,7 +79,7 @@ const LandingPage = () => {
// "linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(30, 44, 47, 0.2) 100%)", // "linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(30, 44, 47, 0.2) 100%)",
background: "#141615", background: "#141615",
boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.2)", boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.2)",
fontFamily: "Gilory", fontFamily: '"Publica Sans Round Medium", sans-serif',
}} }}
> >
<img <img
@ -112,7 +112,8 @@ const LandingPage = () => {
color: "#FFFFFF", color: "#FFFFFF",
borderRadius: "6px", borderRadius: "6px",
width: { xs: "90px", sm: "117px" }, width: { xs: "90px", sm: "117px" },
fontFamily: "Gilory", fontFamily:
'"Publica Sans Round Medium", sans-serif',
textTransform: "none", textTransform: "none",
"&:hover": { backgroundColor: "#439BC1" }, "&:hover": { backgroundColor: "#439BC1" },
fontWeight: 500, fontWeight: 500,
@ -129,7 +130,7 @@ const LandingPage = () => {
sx={{ sx={{
py: 8, py: 8,
justifyContent: "space-between", justifyContent: "space-between",
fontFamily: "Gilory", fontFamily: '"Publica Sans Round Medium", sans-serif',
backgroundImage: { backgroundImage: {
lg: 'url("/bgev.svg")', lg: 'url("/bgev.svg")',
sm: 'url("/bgev.svg")', sm: 'url("/bgev.svg")',
@ -146,7 +147,7 @@ const LandingPage = () => {
sx={{ sx={{
py: { xs: 4, sm: 6, md: 8 }, py: { xs: 4, sm: 6, md: 8 },
justifyContent: "space-between", justifyContent: "space-between",
fontFamily: "Gilory", fontFamily: '"Publica Sans Round Medium", sans-serif',
width: { lg: "100%", md: "90%", sm: "90%", xs: "90%" }, width: { lg: "100%", md: "90%", sm: "90%", xs: "90%" },
}} }}
> >
@ -176,7 +177,8 @@ const LandingPage = () => {
> >
<Typography <Typography
sx={{ sx={{
fontFamily: "Gilory", fontFamily:
'"Publica Sans Round Medium", sans-serif',
fontWeight: 600, fontWeight: 600,
fontSize: { fontSize: {
xs: "28px", xs: "28px",
@ -196,7 +198,8 @@ const LandingPage = () => {
<Typography <Typography
variant="body1" variant="body1"
sx={{ sx={{
fontFamily: "Gilory", fontFamily:
'"Publica Sans Round Medium", sans-serif',
color: "#CACACA", color: "#CACACA",
marginBottom: "24px", marginBottom: "24px",
fontWeight: 400, fontWeight: 400,
@ -222,7 +225,8 @@ const LandingPage = () => {
width: { xs: "120px", md: "140px" }, width: { xs: "120px", md: "140px" },
height: "48px", height: "48px",
textTransform: "none", textTransform: "none",
fontFamily: "Gilory", fontFamily:
'"Publica Sans Round Medium", sans-serif',
"&:hover": { backgroundColor: "#439BC1" }, "&:hover": { backgroundColor: "#439BC1" },
fontSize: { xs: "14px", md: "16px" }, fontSize: { xs: "14px", md: "16px" },
fontWeight: 500, fontWeight: 500,
@ -332,14 +336,18 @@ const LandingPage = () => {
sm: "80px", sm: "80px",
md: "100px", md: "100px",
}} }}
fontFamily={"Gilory"} fontFamily={
'"Publica Sans Round Medium", sans-serif'
}
> >
50+ 50+
</Typography> </Typography>
<Typography <Typography
variant="body2" variant="body2"
color="#FFFFFF" color="#FFFFFF"
fontFamily={"Gilory"} fontFamily={
'"Publica Sans Round Medium", sans-serif'
}
fontWeight={400} fontWeight={400}
fontSize={{ fontSize={{
xs: "12px", xs: "12px",
@ -379,14 +387,18 @@ const LandingPage = () => {
sm: "80px", sm: "80px",
md: "100px", md: "100px",
}} }}
fontFamily={"Gilory"} fontFamily={
'"Publica Sans Round Medium", sans-serif'
}
> >
100% 100%
</Typography> </Typography>
<Typography <Typography
variant="body2" variant="body2"
color="#FFFFFF" color="#FFFFFF"
fontFamily={"Gilory"} fontFamily={
'"Publica Sans Round Medium", sans-serif'
}
fontWeight={400} fontWeight={400}
fontSize={{ fontSize={{
xs: "12px", xs: "12px",
@ -426,14 +438,18 @@ const LandingPage = () => {
sm: "80px", sm: "80px",
md: "100px", md: "100px",
}} }}
fontFamily={"Gilory"} fontFamily={
'"Publica Sans Round Medium", sans-serif'
}
> >
20+ 20+
</Typography> </Typography>
<Typography <Typography
variant="body2" variant="body2"
color="#FFFFFF" color="#FFFFFF"
fontFamily={"Gilory"} fontFamily={
'"Publica Sans Round Medium", sans-serif'
}
fontWeight={400} fontWeight={400}
fontSize={{ fontSize={{
xs: "12px", xs: "12px",
@ -473,14 +489,18 @@ const LandingPage = () => {
sm: "80px", sm: "80px",
md: "100px", md: "100px",
}} }}
fontFamily={"Gilory"} fontFamily={
'"Publica Sans Round Medium", sans-serif'
}
> >
10+ 10+
</Typography> </Typography>
<Typography <Typography
variant="body2" variant="body2"
color="#FFFFFF" color="#FFFFFF"
fontFamily={"Gilory"} fontFamily={
'"Publica Sans Round Medium", sans-serif'
}
fontWeight={400} fontWeight={400}
fontSize={{ fontSize={{
xs: "12px", xs: "12px",
@ -512,7 +532,7 @@ const LandingPage = () => {
<Typography <Typography
variant="h4" variant="h4"
fontWeight={600} fontWeight={600}
fontFamily={"Gilory"} fontFamily={'"Publica Sans Round Medium", sans-serif'}
fontSize={{ xs: "24px", sm: "30px", md: "40px" }} fontSize={{ xs: "24px", sm: "30px", md: "40px" }}
lineHeight={"100%"} lineHeight={"100%"}
color="#FFFFFF" color="#FFFFFF"
@ -537,7 +557,7 @@ const LandingPage = () => {
mt={2} mt={2}
maxWidth="600px" maxWidth="600px"
mx="auto" mx="auto"
fontFamily={"Gilory"} fontFamily={'"Publica Sans Round Medium", sans-serif'}
fontSize={{ xs: "14px", sm: "16px", md: "20px" }} fontSize={{ xs: "14px", sm: "16px", md: "20px" }}
fontWeight={400} fontWeight={400}
lineHeight={"140%"} lineHeight={"140%"}
@ -626,7 +646,8 @@ const LandingPage = () => {
variant="h6" variant="h6"
sx={{ sx={{
color: "#52ACDF", color: "#52ACDF",
fontFamily: "Gilory", fontFamily:
'"Publica Sans Round Medium", sans-serif',
fontWeight: 600, fontWeight: 600,
fontSize: { fontSize: {
xs: "16px", xs: "16px",
@ -641,7 +662,8 @@ const LandingPage = () => {
variant="body2" variant="body2"
sx={{ sx={{
color: "#D9D8D8", color: "#D9D8D8",
fontFamily: "Gilory", fontFamily:
'"Publica Sans Round Medium", sans-serif',
fontWeight: 400, fontWeight: 400,
fontSize: { fontSize: {
xs: "12px", xs: "12px",
@ -670,7 +692,7 @@ const LandingPage = () => {
borderRadius: "16px", borderRadius: "16px",
mt: { xs: 6, md: 10 }, mt: { xs: 6, md: 10 },
fontFamily: "Gilory", fontFamily: '"Publica Sans Round Medium", sans-serif',
}} }}
> >
Key Features Key Features
@ -690,7 +712,7 @@ const LandingPage = () => {
py: { xs: 2, md: 5 }, py: { xs: 2, md: 5 },
px: { xs: 2, md: 3 }, px: { xs: 2, md: 3 },
mt: { xs: 6, md: 5 }, mt: { xs: 6, md: 5 },
fontFamily: "Gilory", fontFamily: '"Publica Sans Round Medium", sans-serif',
}} }}
> >
<Box <Box
@ -1184,7 +1206,7 @@ const LandingPage = () => {
px: { xs: 2, sm: 3, md: 4 }, px: { xs: 2, sm: 3, md: 4 },
mt: { xs: 6, sm: 8, md: 10 }, mt: { xs: 6, sm: 8, md: 10 },
// height: { xs: "auto", lg: "261px", sm: "208px" }, // height: { xs: "auto", lg: "261px", sm: "208px" },
fontFamily: "Gilory", fontFamily: '"Publica Sans Round Medium", sans-serif',
borderRadius: "12px", borderRadius: "12px",
}} }}
> >
@ -1239,7 +1261,9 @@ const LandingPage = () => {
{/* Text */} {/* Text */}
<Typography <Typography
fontFamily={"Gilory"} fontFamily={
'"Publica Sans Round Medium", sans-serif'
}
fontWeight={500} fontWeight={500}
fontSize={{ xs: "20px", sm: "24px", md: "27px" }} fontSize={{ xs: "20px", sm: "24px", md: "27px" }}
lineHeight={"130%"} lineHeight={"130%"}
@ -1271,7 +1295,8 @@ const LandingPage = () => {
lg: "54px", lg: "54px",
md: "44px", md: "44px",
}, },
fontFamily: "Gilory", fontFamily:
'"Publica Sans Round Medium", sans-serif',
textTransform: "none", textTransform: "none",
fontWeight: 500, fontWeight: 500,
fontSize: { fontSize: {
@ -1306,7 +1331,7 @@ const LandingPage = () => {
px: { xs: 2, sm: 3, md: 4 }, px: { xs: 2, sm: 3, md: 4 },
mt: { xs: 6, sm: 8, md: 10 }, mt: { xs: 6, sm: 8, md: 10 },
mb: { xs: 6, sm: 8, md: 10 }, mb: { xs: 6, sm: 8, md: 10 },
fontFamily: "Gilory", fontFamily: '"Publica Sans Round Medium", sans-serif',
height: "auto", height: "auto",
borderRadius: { xs: "8px", lg: "12px" }, borderRadius: { xs: "8px", lg: "12px" },
}} }}
@ -1317,13 +1342,13 @@ const LandingPage = () => {
py: 4, py: 4,
px: 3, px: 3,
mt: 2, mt: 2,
fontFamily: "Gilory", fontFamily: '"Publica Sans Round Medium", sans-serif',
}} }}
> >
<Typography <Typography
variant="h5" variant="h5"
fontWeight={600} fontWeight={600}
fontFamily={"Gilory"} fontFamily={'"Publica Sans Round Medium", sans-serif'}
fontSize={{ xs: "24px", sm: "30px", md: "40px" }} fontSize={{ xs: "24px", sm: "30px", md: "40px" }}
lineHeight={"120%"} lineHeight={"120%"}
> >
@ -1338,7 +1363,8 @@ const LandingPage = () => {
variant="body2" variant="body2"
sx={{ sx={{
my: { xs: 2, sm: 3 }, my: { xs: 2, sm: 3 },
fontFamily: "Gilory", fontFamily:
'"Publica Sans Round Medium", sans-serif',
fontWeight: 400, fontWeight: 400,
fontSize: { xs: "14px", sm: "18px", md: "20px" }, fontSize: { xs: "14px", sm: "18px", md: "20px" },
color: "#FFFFFF", color: "#FFFFFF",