54 lines
1.4 KiB
TypeScript
54 lines
1.4 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",
|
|
[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={{ fontWeight: "bold" , color:'#333333' ,mb:4}}>
|
|
Why Choose Us?
|
|
</Typography>
|
|
<Grid
|
|
container
|
|
spacing={1}
|
|
justifyContent="center"
|
|
alignItems="center"
|
|
>
|
|
{items.map((item, index) => (
|
|
<Grid item key={index} xs={6} sm={2} display="flex" justifyContent="center">
|
|
<Circle sx={{ borderColor: item.color }}>
|
|
<Typography variant="body1" fontWeight="500">
|
|
{item.text}
|
|
</Typography>
|
|
</Circle>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default WhyChooseUs;
|