75 lines
1.8 KiB
TypeScript
75 lines
1.8 KiB
TypeScript
import React from "react";
|
|
import { Box, Grid, Typography } from "@mui/material";
|
|
import { styled } from "@mui/system";
|
|
|
|
const Circle = styled(Box)(({ theme }) => ({
|
|
width: 170, // Increased size
|
|
height: 170,
|
|
borderRadius: "50%",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
border: "5px solid",
|
|
transition: "0.3s",
|
|
textAlign: "center",
|
|
padding: "10px",
|
|
[theme.breakpoints.down("sm")]: {
|
|
width: 120, // Adjusting for mobile
|
|
height: 120,
|
|
},
|
|
}));
|
|
|
|
const items = [
|
|
{ text: "Partnerships", color: "#E3C34D" },
|
|
{ text: "Technology", color: "#90B5D4" },
|
|
{ text: "Professionalism", color: "#A2C08A" },
|
|
{ text: "Transparency", color: "#EDEAE3" },
|
|
];
|
|
|
|
const WhyChooseUs: React.FC = () => {
|
|
return (
|
|
<Box sx={{ textAlign: "center", mt: 5 }}>
|
|
<Typography
|
|
variant="h4"
|
|
sx={{
|
|
|
|
color: "#333333",
|
|
mb: 4,
|
|
fontSize: { xs: "20px", sm: "48px" },
|
|
fontFamily: "SF Pro Rounded, sans-serif",
|
|
}}
|
|
>
|
|
Why Choose Us?
|
|
</Typography>
|
|
<Grid container spacing={2} justifyContent="center" alignItems="center">
|
|
{items.map((item, index) => (
|
|
<Grid
|
|
item
|
|
key={index}
|
|
xs={6}
|
|
sm={6}
|
|
display="flex"
|
|
justifyContent="center"
|
|
>
|
|
<Circle sx={{ borderColor: item.color }}>
|
|
<Typography
|
|
variant="body1"
|
|
fontWeight="400"
|
|
sx={{
|
|
fontSize: { xs: "12px", sm: "20px" },
|
|
fontFamily: "Roboto, sans-serif",
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
{item.text}
|
|
</Typography>
|
|
</Circle>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default WhyChooseUs;
|