import { Box, Button, Card, CardActions, CardContent, CardMedia, Grid, Typography,
} from "@mui/material";
import React from "react";
import Title from "../UI/Title";
import { styled } from "@mui/material/styles";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation,Grid as swiperGrid } from "swiper";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/grid";
const Services = () => { const services = [ { title: "Frontend", img: "./images/hire-dev-1.png", description: "A Front-End Developer is responsible for developing new user-facing features, determining the structure and design of web pages.", }, { title: "WordPress", img: "./images/hire-dev-2.png", description: "WordPress developers design and implement websites for companies using the WordPress creation tool. They are responsible for both front-end and back-end development", }, { title: "E-commerce", img: "./images/hire-dev-3.png", description: "E-commerce associates ensure that online stores are visually appealing, easy to navigate, and furnished with accurate, up-to-date content.", }, { title: "Mern Stack", img: "./images/bgtransparent.png", description: "MERN developers are responsible for writing reusable, testable, and efficient code and developing and designing front end web applications.", }, ]; return ( <Box> <Title title='Services' /> <Grid container spacing={4} my={5}> <Swiper slidesPerView={3} navigation={true} modules={[Navigation,swiperGrid]} loop={true} grid={{rows:1}} breakpoints={{ 600: { slidesPerView: 1, }, 900: { slidesPerView: 2, }, 1200: { slidesPerView: 3, }, }} style={{padding:'1rem 0'}} > {services.map((service) => { return ( <SwiperSlide> <Grid item xs={12} sm={6} md={4} container justifyContent='center' // most important style regarding centering item while sliding // style={{maxWidth:'350px', minHeight:'511px', display:'flex', flexBasis:'100%'}} > <Card raised sx={{ maxWidth: "350px", overflow: "visible", position: "relative", marginTop: "5rem", borderRadius: "20px", }} > <Media component='img' image={service.img}></Media> <CardContent sx={{ paddingTop: "11rem", textAlign: "center" }} > <Typography variant='h4'>{service.title}</Typography> <Typography variant='body1'> {service.description} </Typography> </CardContent> <CardActions> <Button variant='contained' sx={{ margin: "0 auto 10px" }} > Contact </Button> </CardActions> </Card> </Grid> </SwiperSlide> ); })} </Swiper> </Grid> </Box> );
};