internal
/
QuadraEdge
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix/landing_page #7

Merged
mihir merged 6 commits from fix/landing_page into main 2025-08-06 10:46:49 +05:30
Conversation 0 Commits 6 Files Changed 76 +375 -193
2 changed files with 375 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f20e8591cb - Show all commits

196
src/components/ourwork/ourwork.tsx
View File

@ -6,109 +6,213 @@ import {
Grid, Grid,
Typography, Typography,
Button, Button,
Container,
useMediaQuery,
useTheme,
} from "@mui/material"; } from "@mui/material";
import { motion } from "framer-motion";
import portfolioImg from "../ourwork/Rectangle 6.png"; import portfolioImg from "../ourwork/Rectangle 6.png";
const works = [ const works = [
{ {
title: "Project Name", title: "Project Aurora",
image: portfolioImg, image: portfolioImg,
description: "Modern web design with seamless user experience",
}, },
{ {
title: "Project Name", title: "Project Nexus",
image: portfolioImg, image: portfolioImg,
description: "Mobile application development for enterprise",
}, },
{ {
title: "Project Name", title: "Project Horizon",
image: portfolioImg, image: portfolioImg,
description: "Brand identity and marketing campaign",
}, },
]; ];
const OurWorks = () => { const OurWorks = () => {
return ( const theme = useTheme();
<Box sx={{ backgroundColor: "#1d2733", color: "#fff", py: 8, px: 2 }}> const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
<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>
<Grid container spacing={4} justifyContent="center"> 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) => ( {works.map((work, index) => (
<Grid item xs={12} sm={6} md={4} key={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 <Card
sx={{ sx={{
borderRadius: 3, borderRadius: 2,
overflow: "hidden", overflow: "hidden",
bgcolor: "#fff", bgcolor: "#fff",
maxWidth: 320, maxWidth: 320,
margin: "0 auto", 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)",
},
}} }}
elevation={3}
> >
<CardContent> <Box
<Typography sx={{
variant="subtitle1" height: 180,
fontWeight="bold" display: "flex",
color="Black" alignItems: "center",
gutterBottom justifyContent: "center",
bgcolor: "#f8f9fa",
overflow: "hidden",
}}
> >
{work.title}
</Typography>
</CardContent>
<CardMedia <CardMedia
component="img" component="img"
image={work.image} image={work.image}
alt={work.title} alt={work.title}
sx={{ sx={{
width: "90%",
height: "90%",
objectFit: "contain", objectFit: "contain",
height: 250, transition: "transform 0.3s ease",
px: 2, "&:hover": {
transform: "scale(1.05)",
},
}} }}
/> />
<CardContent> </Box>
<Button <CardContent sx={{ flexGrow: 1, px: 3, py: 2 }}>
variant="contained" <Typography
fullWidth variant="h6"
fontWeight={600}
color="#000"
gutterBottom
sx={{ sx={{
backgroundColor: "#000", fontFamily: "'Montserrat', sans-serif",
color: "#00FFD1", fontSize: "1.1rem",
fontWeight: "bold",
"&:hover": {
backgroundColor: "#333",
},
borderRadius: "30px",
}} }}
> >
VIEW DEMO {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> </Button>
</CardContent> </CardContent>
</Card> </Card>
</motion.div>
</Grid> </Grid>
))} ))}
</Grid> </Grid>
<Box mt={6} display="flex" justifyContent="center"> <Box mt={6} display="flex" justifyContent="center">
<motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }}>
<Button <Button
variant="outlined" variant="outlined"
sx={{ sx={{
borderRadius: "30px", borderRadius: "20px",
borderColor: "#00FFD1", border: "1px solid #00FFD1",
color: "#00FFD1", color: "#00FFD1",
px: 4, px: 4,
py: 1.5, py: 1,
fontWeight: "bold", fontWeight: 600,
fontSize: "0.9rem",
textTransform: "none",
letterSpacing: 0.5,
fontFamily: "'Montserrat', sans-serif",
"&:hover": { "&:hover": {
backgroundColor: "#00FFD1", backgroundColor: "rgba(0, 255, 209, 0.1)",
color: "#000", border: "1px solid #00FFD1",
}, },
transition: "all 0.3s ease",
}} }}
> >
VIEW FULL PORTFOLIO → Explore Full Portfolio
</Button> </Button>
</motion.div>
</Box> </Box>
</Container>
</Box> </Box>
); );
}; };

156
src/components/services/services.tsx
View File

@ -7,6 +7,7 @@ import {
Container, Container,
useMediaQuery, useMediaQuery,
useTheme, useTheme,
Grid,
} from "@mui/material"; } from "@mui/material";
import { motion, AnimatePresence, PanInfo } from "framer-motion"; import { motion, AnimatePresence, PanInfo } from "framer-motion";
import { useState } from "react"; import { useState } from "react";
@ -35,18 +36,17 @@ const services = [
const Services = () => { const Services = () => {
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("sm")); const isMobile = useMediaQuery(theme.breakpoints.down("md"));
const [currentIndex, setCurrentIndex] = useState(0); const [currentIndex, setCurrentIndex] = useState(0);
const [hoveredCard, setHoveredCard] = useState<number | null>(null);
const handleDragEnd = ( const handleDragEnd = (
event: MouseEvent | TouchEvent | PointerEvent, event: MouseEvent | TouchEvent | PointerEvent,
info: PanInfo info: PanInfo
) => { ) => {
if (info.offset.x > 50) { if (info.offset.x > 50) {
// Swiped right
setCurrentIndex((prev) => (prev === 0 ? services.length - 1 : prev - 1)); setCurrentIndex((prev) => (prev === 0 ? services.length - 1 : prev - 1));
} else if (info.offset.x < -50) { } else if (info.offset.x < -50) {
// Swiped left
setCurrentIndex((prev) => (prev === services.length - 1 ? 0 : prev + 1)); setCurrentIndex((prev) => (prev === services.length - 1 ? 0 : prev + 1));
} }
}; };
@ -58,23 +58,29 @@ const Services = () => {
initial={{ opacity: 0, y: -20 }} initial={{ opacity: 0, y: -20 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }} transition={{ duration: 0.6 }}
viewport={{ once: true }} viewport={{ once: true, margin: "-100px" }}
> >
<Typography <Typography
variant="h4" variant="h4"
align="center" align="center"
fontWeight="bold" fontWeight="bold"
gutterBottom gutterBottom
sx={{ mb: 2 }}
> >
Services Our Services
</Typography> </Typography>
<Typography variant="subtitle1" align="center" mb={6}> <Typography
We offer design, development & marketing services variant="subtitle1"
align="center"
mb={6}
sx={{ maxWidth: 600, mx: "auto" }}
>
Professional solutions tailored to your needs
</Typography> </Typography>
</motion.div> </motion.div>
{isMobile ? ( {isMobile ? (
<Box sx={{ position: "relative", height: 400, overflow: "hidden" }}> <Box sx={{ position: "relative", height: 380 }}>
<AnimatePresence initial={false}> <AnimatePresence initial={false}>
<motion.div <motion.div
key={currentIndex} key={currentIndex}
@ -90,70 +96,102 @@ const Services = () => {
width: "100%", width: "100%",
padding: "0 16px", padding: "0 16px",
}} }}
>
<motion.div
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
> >
<Card <Card
sx={{ sx={{
borderRadius: 5, borderRadius: 2,
overflow: "hidden", overflow: "hidden",
height: "100%", height: "100%",
bgcolor: "#fff", bgcolor: "#fff",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
maxWidth: 345, maxWidth: 300,
mx: "auto", mx: "auto",
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
}} }}
elevation={3}
> >
<Box <Box
sx={{ sx={{
height: 200, width: "100%",
height: 150,
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
bgcolor: "#f8f9fa",
overflow: "hidden", overflow: "hidden",
}} }}
>
<motion.div
animate={{
scale: hoveredCard === currentIndex ? 1.05 : 1,
y: hoveredCard === currentIndex ? -5 : 0,
}}
transition={{ duration: 0.3 }}
style={{ width: "100%" }}
> >
<CardMedia <CardMedia
component="img" component="img"
image={services[currentIndex].image} image={services[currentIndex].image}
alt={services[currentIndex].title} alt={services[currentIndex].title}
sx={{ sx={{
objectFit: "contain",
width: "100%", width: "100%",
height: "100%", height: "auto",
objectFit: "cover",
}} }}
/> />
</motion.div>
</Box> </Box>
<CardContent sx={{ flexGrow: 1 }}> <CardContent sx={{ flexGrow: 1 }}>
<Typography <Typography
variant="h6" variant="h6"
fontWeight="bold" fontWeight="bold"
gutterBottom gutterBottom
color="black" color="#000"
> >
{services[currentIndex].title} {services[currentIndex].title}
</Typography> </Typography>
<Typography variant="body2" color="black"> <Typography variant="body2" color="#000" sx={{ mb: 2 }}>
{services[currentIndex].description} {services[currentIndex].description}
</Typography> </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> </CardContent>
</Card> </Card>
</motion.div> </motion.div>
</motion.div>
</AnimatePresence> </AnimatePresence>
{/* Dots indicator */}
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
mt: 2, mt: 3,
gap: 1, gap: 1.5,
}} }}
> >
{services.map((_, index) => ( {services.map((_, index) => (
<Box <motion.div
key={index} key={index}
onClick={() => setCurrentIndex(index)} onClick={() => setCurrentIndex(index)}
whileHover={{ scale: 1.2 }}
whileTap={{ scale: 0.9 }}
>
<Box
sx={{ sx={{
width: 10, width: 10,
height: 10, height: 10,
@ -162,52 +200,77 @@ const Services = () => {
cursor: "pointer", cursor: "pointer",
}} }}
/> />
</motion.div>
))} ))}
</Box> </Box>
</Box> </Box>
) : ( ) : (
<Box <Grid container spacing={3} justifyContent="center">
sx={{
display: "grid",
gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
gap: 4,
}}
>
{services.map((service, index) => ( {services.map((service, index) => (
<motion.div <Grid
item
xs={12}
sm={6}
md={4}
key={index} key={index}
whileHover={{ y: -5 }} sx={{ display: "flex", justifyContent: "center" }}
transition={{ duration: 0.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 }}
>
<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%" }}
> >
<Card <Card
sx={{ sx={{
borderRadius: 5, borderRadius: 2,
overflow: "hidden", overflow: "hidden",
height: "100%", height: "100%",
bgcolor: "#fff", bgcolor: "#fff",
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
boxShadow: "0 5px 15px rgba(0, 0, 0, 0.1)",
width: "100%",
}} }}
elevation={3}
> >
<Box <Box
sx={{ sx={{
height: 200, width: "100%",
height: 160,
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
bgcolor: "#f8f9fa",
overflow: "hidden", overflow: "hidden",
}} }}
> >
<motion.div whileHover={{ scale: 1.05 }}> <motion.div
animate={{
scale: hoveredCard === index ? 1.1 : 1,
y: hoveredCard === index ? -5 : 0,
}}
transition={{ duration: 0.3 }}
style={{ width: "100%" }}
>
<CardMedia <CardMedia
component="img" component="img"
image={service.image} image={service.image}
alt={service.title} alt={service.title}
sx={{ sx={{
objectFit: "contain",
width: "100%", width: "100%",
height: "100%", height: "auto",
objectFit: "cover",
}} }}
/> />
</motion.div> </motion.div>
@ -217,18 +280,33 @@ const Services = () => {
variant="h6" variant="h6"
fontWeight="bold" fontWeight="bold"
gutterBottom gutterBottom
color="black" color="#000"
> >
{service.title} {service.title}
</Typography> </Typography>
<Typography variant="body2" color="black"> <Typography variant="body2" color="#000" sx={{ mb: 2 }}>
{service.description} {service.description}
</Typography> </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> </CardContent>
</Card> </Card>
</motion.div> </motion.div>
</motion.div>
</Grid>
))} ))}
</Box> </Grid>
)} )}
</Container> </Container>
</Box> </Box>