diff --git a/src/components/ourwork/ourwork.tsx b/src/components/ourwork/ourwork.tsx
index d952b94..d275a68 100644
--- a/src/components/ourwork/ourwork.tsx
+++ b/src/components/ourwork/ourwork.tsx
@@ -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 (
-
-
- Our Works
-
-
- We’ve helped brands grow through bold strategy and creative execution.
- Explore our recent success stories.
-
+ const theme = useTheme();
+ const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
-
- {works.map((work, index) => (
-
-
-
-
- {work.title}
-
-
-
-
-
-
-
-
- ))}
-
+
+
+
+
+
+ {work.title}
+
+
+ {work.description}
+
+
+
+
+
+
+
+
+ ))}
+
-
-
-
+
+
+
+
+
+
);
};
diff --git a/src/components/services/services.tsx b/src/components/services/services.tsx
index 59282d6..76236f8 100644
--- a/src/components/services/services.tsx
+++ b/src/components/services/services.tsx
@@ -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(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" }}
>
- Services
+ Our Services
-
- We offer design, development & marketing services
+
+ Professional solutions tailored to your needs
{isMobile ? (
-
+
{
padding: "0 16px",
}}
>
-
-
-
-
-
-
- {services[currentIndex].title}
-
-
- {services[currentIndex].description}
-
-
-
+
+
+
+
+
+
+ {services[currentIndex].title}
+
+
+ {services[currentIndex].description}
+
+
+
+ Learn more →
+
+
+
+
+
- {/* Dots indicator */}
{services.map((_, index) => (
- setCurrentIndex(index)}
- sx={{
- width: 10,
- height: 10,
- borderRadius: "50%",
- bgcolor: index === currentIndex ? "#00E0FF" : "#ffffff80",
- cursor: "pointer",
- }}
- />
+ whileHover={{ scale: 1.2 }}
+ whileTap={{ scale: 0.9 }}
+ >
+
+
))}
) : (
-
+
{services.map((service, index) => (
-
- setHoveredCard(index)}
+ onHoverEnd={() => setHoveredCard(null)}
+ style={{ width: "100%", maxWidth: 280 }}
>
-
-
-
-
-
-
-
- {service.title}
-
-
- {service.description}
-
-
-
-
+
+
+
+
+
+
+
+ {service.title}
+
+
+ {service.description}
+
+
+
+ Learn more →
+
+
+
+
+
+
+
))}
-
+
)}