221 lines
6.9 KiB
TypeScript
221 lines
6.9 KiB
TypeScript
import {
|
|
Box,
|
|
Card,
|
|
CardContent,
|
|
CardMedia,
|
|
Grid,
|
|
Typography,
|
|
Button,
|
|
Container,
|
|
useMediaQuery,
|
|
useTheme,
|
|
} from "@mui/material";
|
|
import { motion } from "framer-motion";
|
|
import portfolioImg from "../ourwork/Rectangle 6.png";
|
|
|
|
const works = [
|
|
{
|
|
title: "Project Aurora",
|
|
image: portfolioImg,
|
|
description: "Modern web design with seamless user experience",
|
|
},
|
|
{
|
|
title: "Project Nexus",
|
|
image: portfolioImg,
|
|
description: "Mobile application development for enterprise",
|
|
},
|
|
{
|
|
title: "Project Horizon",
|
|
image: portfolioImg,
|
|
description: "Brand identity and marketing campaign",
|
|
},
|
|
];
|
|
|
|
const OurWorks = () => {
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
backgroundColor: "#1d2733",
|
|
color: "#fff",
|
|
py: 8,
|
|
px: { xs: 2, sm: 4 },
|
|
}}
|
|
>
|
|
<Container maxWidth="md">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<Typography
|
|
variant="h4"
|
|
align="center"
|
|
fontWeight={700}
|
|
gutterBottom
|
|
sx={{
|
|
mb: 2,
|
|
fontFamily: "'Montserrat', sans-serif",
|
|
letterSpacing: 0.5,
|
|
}}
|
|
>
|
|
Our Portfolio
|
|
</Typography>
|
|
<Typography
|
|
variant="subtitle1"
|
|
align="center"
|
|
mb={6}
|
|
sx={{
|
|
maxWidth: 600,
|
|
mx: "auto",
|
|
color: "rgba(255,255,255,0.8)",
|
|
fontFamily: "'Open Sans', sans-serif",
|
|
}}
|
|
>
|
|
We craft digital experiences that drive results
|
|
</Typography>
|
|
</motion.div>
|
|
|
|
<Grid container spacing={isMobile ? 3 : 4} justifyContent="center">
|
|
{works.map((work, index) => (
|
|
<Grid item xs={12} sm={6} md={4} key={index}>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -5 }}
|
|
>
|
|
<Card
|
|
sx={{
|
|
borderRadius: 2,
|
|
overflow: "hidden",
|
|
bgcolor: "#fff",
|
|
maxWidth: 320,
|
|
height: "100%",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
|
|
transition: "all 0.3s ease",
|
|
"&:hover": {
|
|
boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
|
|
},
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
height: 180,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
bgcolor: "#f8f9fa",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<CardMedia
|
|
component="img"
|
|
image={work.image}
|
|
alt={work.title}
|
|
sx={{
|
|
width: "90%",
|
|
height: "90%",
|
|
objectFit: "contain",
|
|
transition: "transform 0.3s ease",
|
|
"&:hover": {
|
|
transform: "scale(1.05)",
|
|
},
|
|
}}
|
|
/>
|
|
</Box>
|
|
<CardContent sx={{ flexGrow: 1, px: 3, py: 2 }}>
|
|
<Typography
|
|
variant="h6"
|
|
fontWeight={600}
|
|
color="#000"
|
|
gutterBottom
|
|
sx={{
|
|
fontFamily: "'Montserrat', sans-serif",
|
|
fontSize: "1.1rem",
|
|
}}
|
|
>
|
|
{work.title}
|
|
</Typography>
|
|
<Typography
|
|
variant="body2"
|
|
color="#000"
|
|
sx={{
|
|
mb: 2,
|
|
fontFamily: "'Open Sans', sans-serif",
|
|
fontSize: "0.875rem",
|
|
}}
|
|
>
|
|
{work.description}
|
|
</Typography>
|
|
</CardContent>
|
|
<CardContent sx={{ px: 3, py: 0, pb: 3 }}>
|
|
<Button
|
|
variant="outlined"
|
|
fullWidth
|
|
sx={{
|
|
borderRadius: "20px",
|
|
border: "1px solid #000",
|
|
color: "#000",
|
|
fontWeight: 600,
|
|
py: 1,
|
|
fontSize: "0.8rem",
|
|
textTransform: "none",
|
|
letterSpacing: 0.5,
|
|
fontFamily: "'Montserrat', sans-serif",
|
|
"&:hover": {
|
|
backgroundColor: "#000",
|
|
color: "#fff",
|
|
border: "1px solid #000",
|
|
},
|
|
transition: "all 0.3s ease",
|
|
}}
|
|
>
|
|
View Case Study
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
|
|
<Box mt={6} display="flex" justifyContent="center">
|
|
<motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }}>
|
|
<Button
|
|
variant="outlined"
|
|
sx={{
|
|
borderRadius: "20px",
|
|
border: "1px solid #00E0FF",
|
|
color: "#00E0FF",
|
|
px: 4,
|
|
py: 1,
|
|
fontWeight: 600,
|
|
fontSize: "0.9rem",
|
|
textTransform: "none",
|
|
letterSpacing: 0.5,
|
|
fontFamily: "'Montserrat', sans-serif",
|
|
"&:hover": {
|
|
backgroundColor: "rgba(0, 225, 255, 0.19)",
|
|
border: "1px solid #00e1ff",
|
|
},
|
|
transition: "all 0.3s ease",
|
|
}}
|
|
>
|
|
Explore Full Portfolio
|
|
</Button>
|
|
</motion.div>
|
|
</Box>
|
|
</Container>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default OurWorks;
|