fix : added animation and responsiveness in portfolio segment
This commit is contained in:
hardik
parent
ae41722019
commit
f20e8591cb
|
|
@ -6,109 +6,213 @@ import {
|
|||
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 Name",
|
||||
title: "Project Aurora",
|
||||
image: portfolioImg,
|
||||
description: "Modern web design with seamless user experience",
|
||||
},
|
||||
{
|
||||
title: "Project Name",
|
||||
title: "Project Nexus",
|
||||
image: portfolioImg,
|
||||
description: "Mobile application development for enterprise",
|
||||
},
|
||||
{
|
||||
title: "Project Name",
|
||||
title: "Project Horizon",
|
||||
image: portfolioImg,
|
||||
description: "Brand identity and marketing campaign",
|
||||
},
|
||||
];
|
||||
|
||||
const OurWorks = () => {
|
||||
return (
|
||||
<Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 8, px: 2 }}>
|
||||
<Typography variant="h4" align="center" fontWeight="bold" gutterBottom>
|
||||
Our Works
|
||||
</Typography>
|
||||
<Typography variant="subtitle1" align="center" mb={6}>
|
||||
We’ve helped brands grow through bold strategy and creative execution.
|
||||
Explore our recent success stories.
|
||||
</Typography>
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
|
||||
|
||||
<Grid container spacing={4} justifyContent="center">
|
||||
{works.map((work, index) => (
|
||||
<Grid item xs={12} sm={6} md={4} key={index}>
|
||||
<Card
|
||||
sx={{
|
||||
borderRadius: 3,
|
||||
overflow: "hidden",
|
||||
bgcolor: "#fff",
|
||||
maxWidth: 320,
|
||||
margin: "0 auto",
|
||||
}}
|
||||
elevation={3}
|
||||
>
|
||||
<CardContent>
|
||||
<Typography
|
||||
variant="subtitle1"
|
||||
fontWeight="bold"
|
||||
color="Black"
|
||||
gutterBottom
|
||||
>
|
||||
{work.title}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
<CardMedia
|
||||
component="img"
|
||||
image={work.image}
|
||||
alt={work.title}
|
||||
sx={{
|
||||
objectFit: "contain",
|
||||
height: 250,
|
||||
px: 2,
|
||||
}}
|
||||
/>
|
||||
<CardContent>
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
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={{
|
||||
backgroundColor: "#000",
|
||||
color: "#00FFD1",
|
||||
fontWeight: "bold",
|
||||
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": {
|
||||
backgroundColor: "#333",
|
||||
boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
|
||||
},
|
||||
borderRadius: "30px",
|
||||
}}
|
||||
>
|
||||
VIEW DEMO
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
<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">
|
||||
<Button
|
||||
variant="outlined"
|
||||
sx={{
|
||||
borderRadius: "30px",
|
||||
borderColor: "#00FFD1",
|
||||
color: "#00FFD1",
|
||||
px: 4,
|
||||
py: 1.5,
|
||||
fontWeight: "bold",
|
||||
"&:hover": {
|
||||
backgroundColor: "#00FFD1",
|
||||
color: "#000",
|
||||
},
|
||||
}}
|
||||
>
|
||||
VIEW FULL PORTFOLIO →
|
||||
</Button>
|
||||
</Box>
|
||||
<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 #00FFD1",
|
||||
color: "#00FFD1",
|
||||
px: 4,
|
||||
py: 1,
|
||||
fontWeight: 600,
|
||||
fontSize: "0.9rem",
|
||||
textTransform: "none",
|
||||
letterSpacing: 0.5,
|
||||
fontFamily: "'Montserrat', sans-serif",
|
||||
"&:hover": {
|
||||
backgroundColor: "rgba(0, 255, 209, 0.1)",
|
||||
border: "1px solid #00FFD1",
|
||||
},
|
||||
transition: "all 0.3s ease",
|
||||
}}
|
||||
>
|
||||
Explore Full Portfolio
|
||||
</Button>
|
||||
</motion.div>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import {
|
|||
Container,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
Grid,
|
||||
} from "@mui/material";
|
||||
import { motion, AnimatePresence, PanInfo } from "framer-motion";
|
||||
import { useState } from "react";
|
||||
|
|
@ -35,18 +36,17 @@ const services = [
|
|||
|
||||
const Services = () => {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down("md"));
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
const [hoveredCard, setHoveredCard] = useState<number | null>(null);
|
||||
|
||||
const handleDragEnd = (
|
||||
event: MouseEvent | TouchEvent | PointerEvent,
|
||||
info: PanInfo
|
||||
) => {
|
||||
if (info.offset.x > 50) {
|
||||
// Swiped right
|
||||
setCurrentIndex((prev) => (prev === 0 ? services.length - 1 : prev - 1));
|
||||
} else if (info.offset.x < -50) {
|
||||
// Swiped left
|
||||
setCurrentIndex((prev) => (prev === services.length - 1 ? 0 : prev + 1));
|
||||
}
|
||||
};
|
||||
|
|
@ -58,23 +58,29 @@ const Services = () => {
|
|||
initial={{ opacity: 0, y: -20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
>
|
||||
<Typography
|
||||
variant="h4"
|
||||
align="center"
|
||||
fontWeight="bold"
|
||||
gutterBottom
|
||||
sx={{ mb: 2 }}
|
||||
>
|
||||
Services
|
||||
Our Services
|
||||
</Typography>
|
||||
<Typography variant="subtitle1" align="center" mb={6}>
|
||||
We offer design, development & marketing services
|
||||
<Typography
|
||||
variant="subtitle1"
|
||||
align="center"
|
||||
mb={6}
|
||||
sx={{ maxWidth: 600, mx: "auto" }}
|
||||
>
|
||||
Professional solutions tailored to your needs
|
||||
</Typography>
|
||||
</motion.div>
|
||||
|
||||
{isMobile ? (
|
||||
<Box sx={{ position: "relative", height: 400, overflow: "hidden" }}>
|
||||
<Box sx={{ position: "relative", height: 380 }}>
|
||||
<AnimatePresence initial={false}>
|
||||
<motion.div
|
||||
key={currentIndex}
|
||||
|
|
@ -91,144 +97,216 @@ const Services = () => {
|
|||
padding: "0 16px",
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
sx={{
|
||||
borderRadius: 5,
|
||||
overflow: "hidden",
|
||||
height: "100%",
|
||||
bgcolor: "#fff",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
maxWidth: 345,
|
||||
mx: "auto",
|
||||
}}
|
||||
elevation={3}
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<Box
|
||||
<Card
|
||||
sx={{
|
||||
height: 200,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderRadius: 2,
|
||||
overflow: "hidden",
|
||||
height: "100%",
|
||||
bgcolor: "#fff",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
maxWidth: 300,
|
||||
mx: "auto",
|
||||
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
|
||||
}}
|
||||
>
|
||||
<CardMedia
|
||||
component="img"
|
||||
image={services[currentIndex].image}
|
||||
alt={services[currentIndex].title}
|
||||
<Box
|
||||
sx={{
|
||||
objectFit: "contain",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
height: 150,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
bgcolor: "#f8f9fa",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<CardContent sx={{ flexGrow: 1 }}>
|
||||
<Typography
|
||||
variant="h6"
|
||||
fontWeight="bold"
|
||||
gutterBottom
|
||||
color="black"
|
||||
>
|
||||
{services[currentIndex].title}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="black">
|
||||
{services[currentIndex].description}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<motion.div
|
||||
animate={{
|
||||
scale: hoveredCard === currentIndex ? 1.05 : 1,
|
||||
y: hoveredCard === currentIndex ? -5 : 0,
|
||||
}}
|
||||
transition={{ duration: 0.3 }}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
<CardMedia
|
||||
component="img"
|
||||
image={services[currentIndex].image}
|
||||
alt={services[currentIndex].title}
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "auto",
|
||||
objectFit: "cover",
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
</Box>
|
||||
<CardContent sx={{ flexGrow: 1 }}>
|
||||
<Typography
|
||||
variant="h6"
|
||||
fontWeight="bold"
|
||||
gutterBottom
|
||||
color="#000"
|
||||
>
|
||||
{services[currentIndex].title}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="#000" sx={{ mb: 2 }}>
|
||||
{services[currentIndex].description}
|
||||
</Typography>
|
||||
<motion.div
|
||||
whileHover={{ x: 5 }}
|
||||
transition={{ type: "spring", stiffness: 300 }}
|
||||
>
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="primary"
|
||||
fontWeight="bold"
|
||||
sx={{ cursor: "pointer" }}
|
||||
>
|
||||
Learn more →
|
||||
</Typography>
|
||||
</motion.div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Dots indicator */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
mt: 2,
|
||||
gap: 1,
|
||||
mt: 3,
|
||||
gap: 1.5,
|
||||
}}
|
||||
>
|
||||
{services.map((_, index) => (
|
||||
<Box
|
||||
<motion.div
|
||||
key={index}
|
||||
onClick={() => setCurrentIndex(index)}
|
||||
sx={{
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: "50%",
|
||||
bgcolor: index === currentIndex ? "#00E0FF" : "#ffffff80",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
/>
|
||||
whileHover={{ scale: 1.2 }}
|
||||
whileTap={{ scale: 0.9 }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: "50%",
|
||||
bgcolor: index === currentIndex ? "#00E0FF" : "#ffffff80",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
|
||||
gap: 4,
|
||||
}}
|
||||
>
|
||||
<Grid container spacing={3} justifyContent="center">
|
||||
{services.map((service, index) => (
|
||||
<motion.div
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
sm={6}
|
||||
md={4}
|
||||
key={index}
|
||||
whileHover={{ y: -5 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
sx={{ display: "flex", justifyContent: "center" }}
|
||||
>
|
||||
<Card
|
||||
sx={{
|
||||
borderRadius: 5,
|
||||
overflow: "hidden",
|
||||
height: "100%",
|
||||
bgcolor: "#fff",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
elevation={3}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
onHoverStart={() => setHoveredCard(index)}
|
||||
onHoverEnd={() => setHoveredCard(null)}
|
||||
style={{ width: "100%", maxWidth: 280 }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
height: 200,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
overflow: "hidden",
|
||||
<motion.div
|
||||
whileHover={{
|
||||
y: -8,
|
||||
boxShadow: "0 15px 30px -5px rgba(0, 0, 0, 0.2)",
|
||||
}}
|
||||
transition={{ type: "spring", stiffness: 400, damping: 10 }}
|
||||
style={{ height: "100%" }}
|
||||
>
|
||||
<motion.div whileHover={{ scale: 1.05 }}>
|
||||
<CardMedia
|
||||
component="img"
|
||||
image={service.image}
|
||||
alt={service.title}
|
||||
sx={{
|
||||
objectFit: "contain",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
</Box>
|
||||
<CardContent sx={{ flexGrow: 1 }}>
|
||||
<Typography
|
||||
variant="h6"
|
||||
fontWeight="bold"
|
||||
gutterBottom
|
||||
color="black"
|
||||
<Card
|
||||
sx={{
|
||||
borderRadius: 2,
|
||||
overflow: "hidden",
|
||||
height: "100%",
|
||||
bgcolor: "#fff",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
boxShadow: "0 5px 15px rgba(0, 0, 0, 0.1)",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
{service.title}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="black">
|
||||
{service.description}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: 160,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
bgcolor: "#f8f9fa",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<motion.div
|
||||
animate={{
|
||||
scale: hoveredCard === index ? 1.1 : 1,
|
||||
y: hoveredCard === index ? -5 : 0,
|
||||
}}
|
||||
transition={{ duration: 0.3 }}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
<CardMedia
|
||||
component="img"
|
||||
image={service.image}
|
||||
alt={service.title}
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "auto",
|
||||
objectFit: "cover",
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
</Box>
|
||||
<CardContent sx={{ flexGrow: 1 }}>
|
||||
<Typography
|
||||
variant="h6"
|
||||
fontWeight="bold"
|
||||
gutterBottom
|
||||
color="#000"
|
||||
>
|
||||
{service.title}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="#000" sx={{ mb: 2 }}>
|
||||
{service.description}
|
||||
</Typography>
|
||||
<motion.div
|
||||
whileHover={{ x: 5 }}
|
||||
transition={{ type: "spring", stiffness: 300 }}
|
||||
>
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="primary"
|
||||
fontWeight="bold"
|
||||
sx={{ cursor: "pointer" }}
|
||||
>
|
||||
Learn more →
|
||||
</Typography>
|
||||
</motion.div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</Grid>
|
||||
))}
|
||||
</Box>
|
||||
</Grid>
|
||||
)}
|
||||
</Container>
|
||||
</Box>
|
||||
|
|
|
|||
Loading…
Reference in New Issue