changed background #1
|
|
@ -24,7 +24,7 @@
|
|||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
<title>Loop Sustainability </title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,25 @@
|
|||
import React, { useRef } from "react";
|
||||
import { Box, Grid, Typography } from "@mui/material";
|
||||
import logo from "../loopslogo2.png";
|
||||
import backone from "../components/imageandgif/backgroundone.png";
|
||||
import backthree from "../components/imageandgif/backgroundthree.png";
|
||||
import backfour from "../components/imageandgif/backgroundfour.png";
|
||||
import backfive from "../components/imageandgif/backgroundfive.png";
|
||||
import backsix from "../components/imageandgif/backgroundsix.png";
|
||||
import gifone from "../components/imageandgif/gifone.gif"
|
||||
import giftwo from "../components/imageandgif/giftwo.gif"
|
||||
import gifthree from "../components/imageandgif/gifthree.gif"
|
||||
import giffour from "../components/imageandgif/giffour.gif"
|
||||
import giffive from "../components/imageandgif/giffive.gif"
|
||||
import gifsix from "../components/imageandgif/gifsix.gif"
|
||||
import gifseven from "../components/imageandgif/gifseven.gif"
|
||||
import gifeight from "../components/imageandgif/gifeight.gif"
|
||||
import loopgreen from "../components/imageandgif/newloop.png"
|
||||
import backone from "../components/imageandgif/newbgone.png";
|
||||
import backtwo from "../components/imageandgif/newnewtwo.png";
|
||||
import backthree from "../components/imageandgif/newthree.png";
|
||||
import gifone from "../components/imageandgif/gifone.gif";
|
||||
import giftwo from "../components/imageandgif/giftwo.gif";
|
||||
import gifthree from "../components/imageandgif/gifthree.gif";
|
||||
import giffour from "../components/imageandgif/giffour.gif";
|
||||
import giffive from "../components/imageandgif/giffive.gif";
|
||||
import gifsix from "../components/imageandgif/gifsix.gif";
|
||||
import gifseven from "../components/imageandgif/gifseven.gif";
|
||||
import gifeight from "../components/imageandgif/gifeight.gif";
|
||||
import loopgreen from "../components/imageandgif/newloop.png";
|
||||
import PartnerWork from "./ourwork";
|
||||
import Footer from "./footer";
|
||||
import loopgreenback from "../components/imageandgif/loopgreenbackground.png"
|
||||
import OurTeam from "./ourteam";
|
||||
import mobileLogo from "../components/imageandgif/loopsMoblogo.png"
|
||||
import { createTheme, ThemeProvider } from "@mui/material/styles";
|
||||
|
||||
|
||||
const HomePage: React.FC = () => {
|
||||
// Create refs for each content box
|
||||
|
|
@ -29,382 +32,430 @@ const HomePage: React.FC = () => {
|
|||
const remineRef = useRef<HTMLDivElement>(null);
|
||||
const impactRef = useRef<HTMLDivElement>(null);
|
||||
const reuseRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Function to scroll to the ref
|
||||
const scrollToRef = (ref: React.RefObject<HTMLDivElement>) => {
|
||||
if (ref.current) {
|
||||
ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
|
||||
}
|
||||
};
|
||||
const theme = createTheme({
|
||||
breakpoints: {
|
||||
values: {
|
||||
xs: 0, // Default
|
||||
sm: 600, // Default
|
||||
md: 1000, // Default
|
||||
lg: 1400, // Default
|
||||
xl: 1800, // Default
|
||||
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Grid container sx={{ position: "relative", marginTop: '119px' }}>
|
||||
{/* Grid 1 */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
sx={{
|
||||
marginTop: "0px",
|
||||
height: "300px",
|
||||
backgroundColor: "white",
|
||||
position: "relative",
|
||||
backgroundImage: `url(${logo})`,
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "right center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
<ThemeProvider theme={theme}>
|
||||
<Box>
|
||||
<Grid container sx={{ position: "relative", marginTop: '119px' }}>
|
||||
{/* Grid 1 */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "80%",
|
||||
left: "5%",
|
||||
transform: "translateY(-30%)",
|
||||
height: "440px",
|
||||
width: "220px",
|
||||
backgroundColor: "#eee0e0a3",
|
||||
zIndex: 1,
|
||||
padding: "20px",
|
||||
overflowY: "auto",
|
||||
borderRadius: "8px",
|
||||
marginTop: "0px",
|
||||
height: { xs: "190px", md: "300px" },
|
||||
backgroundColor: "white",
|
||||
position: "relative",
|
||||
backgroundImage: {
|
||||
xs: `url(${mobileLogo})`, // Mobile background image
|
||||
md: `url(${logo})`, // Desktop background image
|
||||
},
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "right center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
marginBottom: { xs: "10px", md: "399px" },
|
||||
}}
|
||||
>
|
||||
<ul style={{
|
||||
listStyleType: "none",
|
||||
padding: "0",
|
||||
margin: "0",
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: { xs: "70%", md: "80%" },
|
||||
left: { xs: "2%", md: "5%" },
|
||||
transform: "translateY(-30%)",
|
||||
height: { xs: "235px", md: "440px" },
|
||||
width: { xs: "150px", md: "220px" },
|
||||
backgroundColor: "#eee0e0a3",
|
||||
zIndex: 1,
|
||||
padding: "20px",
|
||||
overflowY: "auto",
|
||||
borderRadius: "8px",
|
||||
display: { xs: "none", md: "block" },
|
||||
}}
|
||||
>
|
||||
<ul style={{
|
||||
listStyleType: "none",
|
||||
padding: "0",
|
||||
margin: "0",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "10px"
|
||||
}}>
|
||||
<li onClick={() => scrollToRef(mineRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Mine</li>
|
||||
<li onClick={() => scrollToRef(manufactureRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Manufacture</li>
|
||||
<li onClick={() => scrollToRef(assembleRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Assemble</li>
|
||||
<li onClick={() => scrollToRef(useRefBox)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Use</li>
|
||||
<li onClick={() => scrollToRef(reuseRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Reuse</li>
|
||||
<li onClick={() => scrollToRef(repairRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Repair</li>
|
||||
<li onClick={() => scrollToRef(disintegrateRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Disintegrate</li>
|
||||
<li onClick={() => scrollToRef(remineRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Remine</li>
|
||||
<li onClick={() => scrollToRef(impactRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Impact</li>
|
||||
</ul>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
{/* Grid 2 */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
sx={{
|
||||
height: { xs: "900px", md: "965px" }, // Increased height for mobile view
|
||||
backgroundColor: "white",
|
||||
position: "relative",
|
||||
backgroundImage: {
|
||||
xs: null,
|
||||
md: `url(${backone})`,
|
||||
},
|
||||
backgroundSize: "contain",
|
||||
backgroundPositionX: "50.5%",
|
||||
backgroundPositionY: "60%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "10px"
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
textAlign: 'center',
|
||||
padding: { xs: "20px", md: "0" },
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
ref={mineRef}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: { xs: "15%", lg: "4%" },
|
||||
left: { lg: "10%" },
|
||||
transform: "translateY(-50%)",
|
||||
height: { xs: "332px", lg: "200px" },
|
||||
width: { xs: "80%", lg: "470px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", lg: "row" },
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
textAlign: 'center',
|
||||
marginBottom: { xs: "20px", md: "0" }, // Add margin bottom for spacing
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: { xs: "60%", md: "100%" } }}>
|
||||
<img src={gifone} alt="Gif" style={{ width: "100%" }} />
|
||||
</Box>
|
||||
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" } }}>
|
||||
<Typography variant="h4">Mine from nature</Typography>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis doloremque architecto eos provident et deserunt temporibus non iusto quis inventore expedita neque</p>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
ref={manufactureRef}
|
||||
sx={{
|
||||
position: "relative",
|
||||
top: { xs: "11%", lg: "-10%" }, // Adjust top for mobile
|
||||
right: { lg: "-22%" },
|
||||
height: { xs: "300px", md: "215px" },
|
||||
width: { xs: "80%", md: "560px" },
|
||||
backgroundColor: "white",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column-reverse", lg: "row" },
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
textAlign: 'center',
|
||||
marginBottom: { xs: "20px", md: "0" }, // Add margin bottom for spacing
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: "60%", paddingLeft: { xs: "0", md: "10px" } }}>
|
||||
<Typography variant="h4">Manufacture</Typography>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis doloremque architecto eos provident et deserunt temporibus non iusto</p>
|
||||
</Box>
|
||||
<Box sx={{ width: "45%" }}>
|
||||
<img src={giftwo} alt="Gif" style={{ width: "70%", height: "auto" }} />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
ref={assembleRef}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: { xs: "74%", lg: "66%" },
|
||||
left: { lg: "12%" },
|
||||
height: { xs: "300px", md: "167px" },
|
||||
width: { xs: "80%", md: "534px" },
|
||||
backgroundColor: "white",
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column-reverse", lg: "row" },
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
textAlign: 'center',
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: "70%", paddingLeft: { xs: "0", md: "10px" } }}>
|
||||
<Typography variant="h4">Assemble</Typography>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis!</p>
|
||||
</Box>
|
||||
<Box sx={{ width: "70%" }}>
|
||||
<img src={gifthree} alt="Gif" style={{ width: "85%", height: "auto" }} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
{/* Grid 3 */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
sx={{
|
||||
height: { xs: "600px", lg: "615px" },
|
||||
backgroundColor: "white",
|
||||
position: "relative",
|
||||
backgroundImage: {
|
||||
xs: null,
|
||||
md: `url(${backtwo})`,
|
||||
},
|
||||
backgroundSize: "contain",
|
||||
backgroundPositionX: "41.5%",
|
||||
backgroundPositionY: "60%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
display: { xs: "flex" },
|
||||
flexDirection: { xs: "column-reverse", lg: "row" },
|
||||
justifyContent: { xs: "center" },
|
||||
alignItems: { xs: "center" },
|
||||
textAlign: { xs: 'center' }
|
||||
}}>
|
||||
<li onClick={() => scrollToRef(mineRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Mine</li>
|
||||
<li onClick={() => scrollToRef(manufactureRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Manufacture</li>
|
||||
<li onClick={() => scrollToRef(assembleRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Assemble</li>
|
||||
<li onClick={() => scrollToRef(useRefBox)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Use</li>
|
||||
<li onClick={() => scrollToRef(reuseRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Reuse</li>
|
||||
<li onClick={() => scrollToRef(repairRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Repair</li>
|
||||
<li onClick={() => scrollToRef(disintegrateRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Disintegrate</li>
|
||||
<li onClick={() => scrollToRef(remineRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Remine</li>
|
||||
<li onClick={() => scrollToRef(impactRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Impact</li>
|
||||
</ul>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Box
|
||||
ref={useRefBox}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: { xs: "65%", lg: "17%" },
|
||||
right: { xs: "8%", md: "25%" },
|
||||
transform: "translateY(-50%)",
|
||||
height: { xs: "150px", md: "167px" },
|
||||
width: { xs: "80%", md: "523px" },
|
||||
backgroundColor: "white",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column-reverse", lg: 'row' },
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: "70%", paddingLeft: "10px" }}>
|
||||
<Typography variant="h4">Use</Typography>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
|
||||
</Box>
|
||||
<Box sx={{ width: "70%" }}>
|
||||
<img src={giffour} alt="Gif" style={{ width: "69%", height: "auto" }} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
|
||||
sx={{
|
||||
height: "400px",
|
||||
backgroundColor: "white",
|
||||
position: "relative",
|
||||
backgroundImage: `url(${backone})`,
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}>
|
||||
<Box
|
||||
ref={mineRef} // Attach ref here
|
||||
{/* Grid 4 */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "80%",
|
||||
right: "3%",
|
||||
transform: "translateY(-50%)",
|
||||
height: "400px",
|
||||
width: "630px",
|
||||
height: { xs: "707px", md: "830px" },
|
||||
backgroundColor: "white",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: "70%" }}>
|
||||
<img src={gifone} alt="Gif" style={{ width: "100%", height: "auto" }} />
|
||||
position: "relative",
|
||||
backgroundImage: { lg: `url(${backthree})`, xs: null },
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "46.2% 50%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}>
|
||||
<Box
|
||||
ref={reuseRef}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: { xs: "5%", md: "7%" },
|
||||
left: { xs: "-1%", md: "17%" },
|
||||
transform: "translateY(-23%)",
|
||||
height: { xs: "150px", md: "167px" },
|
||||
width: { xs: "49%", md: "388px" },
|
||||
backgroundColor: "white",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flexDirection: { xs: 'column', md: 'row-reverse' }, // Reverse for mobile
|
||||
alignItems: "center",
|
||||
justifyContent: "center", // Center vertically
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "80%",
|
||||
paddingLeft: "10px",
|
||||
backgroundColor: { xs: 'green', md: 'transparent' }, // Green background for mobile
|
||||
display: 'flex', // Make the text box a flex container to center content vertically
|
||||
flexDirection: 'column', // Align text content vertically
|
||||
justifyContent: 'center', // Vertically center the text
|
||||
}}
|
||||
>
|
||||
<Typography variant="h4">Reuse</Typography>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendisss !</p>
|
||||
</Box>
|
||||
<Box sx={{
|
||||
width: "80%",
|
||||
display: 'flex',
|
||||
justifyContent: 'center', // Center the gif horizontally
|
||||
alignItems: 'center', // Center the gif vertically
|
||||
}}>
|
||||
<img src={gifsix} alt="Gif" style={{ width: "132%", height: "110%" }} />
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{ width: "70%", paddingLeft: "10px" }}>
|
||||
<Typography variant="h4">Mine from nature</Typography>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis doloremque architecto eos provident et deserunt temporibus non iusto quis inventore expedita neque, dolorum ea consectetur repudiandae iste. Aliquid, aspernatur in!</p>
|
||||
|
||||
|
||||
<Box
|
||||
ref={repairRef}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: { xs: "1%", md: "20%" },
|
||||
right: { xs: "1%", md: "13%" },
|
||||
transform: "translateY(-23%)",
|
||||
height: { xs: "150px", md: "167px" },
|
||||
width: { xs: "47%", md: "390px" },
|
||||
backgroundColor: "white",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flexDirection: { xs: 'column', md: 'row-reverse' }, // Reverse for mobile
|
||||
alignItems: "center",
|
||||
justifyContent: "center", // Center vertically
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "80%",
|
||||
paddingLeft: "10px",
|
||||
backgroundColor: { xs: 'green', md: 'transparent' },
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Typography variant="h4">Repair</Typography>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
|
||||
</Box>
|
||||
<Box sx={{ width: "80%" }}>
|
||||
<img src={giffive} alt="Gif" style={{ width: "100%", height: "100%" }} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
{/* Grid 3 */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
<Box
|
||||
ref={disintegrateRef}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: { xs: "61%", md: "61%" },
|
||||
left: { xs: "-2%", md: "6%" },
|
||||
transform: "translateY(-23%)",
|
||||
height: { xs: "150px", md: "167px" },
|
||||
width: { xs: "51%", md: "409px" },
|
||||
backgroundColor: "white",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flexDirection: { xs: 'column-reverse', md: 'row-reverse' }, // Reverse for mobile
|
||||
alignItems: "center",
|
||||
justifyContent: "center", // Center vertically
|
||||
padding: "10px",
|
||||
|
||||
sx={{
|
||||
height: "400px",
|
||||
backgroundColor: "white",
|
||||
position: "relative",
|
||||
backgroundImage: `url(${backone})`,
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "50.5% 50%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "80%",
|
||||
paddingLeft: "10px",
|
||||
backgroundColor: { xs: 'green', md: 'transparent' },
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Typography variant="h4" sx={{fontSize:'2rem'}}>Disintegrate</Typography>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
|
||||
</Box>
|
||||
<Box sx={{ width: "70%" }}>
|
||||
<img src={gifseven} alt="Gif" style={{ width: "100%", height: "auto" }} />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
}}>
|
||||
<Box
|
||||
ref={manufactureRef} // Attach ref here
|
||||
<Box
|
||||
ref={remineRef}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: { xs: "60%", md: "65%" },
|
||||
right: { xs: "-3%", md: "8%" },
|
||||
transform: "translateY(-23%)",
|
||||
height: { xs: "150px", md: "167px" },
|
||||
width: { xs: "50%", md: "309px" },
|
||||
backgroundColor: "white",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flexDirection: { xs: 'column', md: 'row-reverse' }, // Reverse for mobile
|
||||
alignItems: "center",
|
||||
justifyContent: "center", // Center vertically
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "80%",
|
||||
paddingLeft: "10px",
|
||||
|
||||
}}
|
||||
>
|
||||
<img src={gifeight} alt="Gif" style={{ width: "100%", height: "auto" }} />
|
||||
</Box>
|
||||
<Box sx={{ width: "70%", paddingLeft: "10px", backgroundColor: { xs: 'green', md: 'transparent' },
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center', }}>
|
||||
<Typography variant="h4">Remine</Typography>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
{/* Grid 5 */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
ref={mineRef}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "73%",
|
||||
left: "2%",
|
||||
transform: "translateY(-50%)",
|
||||
height: "400px",
|
||||
width: "630px",
|
||||
backgroundColor: "white",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: "70%", paddingLeft: "10px" }}>
|
||||
<Typography variant="h4">Manufacture</Typography>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis doloremque architecto eos provident et deserunt temporibus non iusto quis inventore expedita neque, dolorum ea consectetur repudiandae iste. Aliquid, aspernatur in!</p>
|
||||
</Box>
|
||||
<Box sx={{ width: "70%" }}>
|
||||
<img src={giftwo} alt="Gif" style={{ width: "100%", height: "auto" }} />
|
||||
</Box>
|
||||
</Box>
|
||||
height: { xs: "200px", md: "300px" },
|
||||
backgroundImage: `url(${loopgreen})`,
|
||||
position: "relative",
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Grid 4 */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
|
||||
sx={{
|
||||
height: "308px",
|
||||
backgroundColor: "white",
|
||||
position: "relative",
|
||||
backgroundImage: `url(${backthree})`,
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "61.2% 50%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
|
||||
}}>
|
||||
<Box
|
||||
ref={assembleRef}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "-12%",
|
||||
right: "5%",
|
||||
transform: "translateY(-50%)",
|
||||
height: "167px",
|
||||
width: "534px",
|
||||
backgroundColor: "white",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: "70%", paddingLeft: "10px" }}>
|
||||
<Typography variant="h4">Assemble</Typography>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
|
||||
</Box>
|
||||
<Box sx={{ width: "70%" }}>
|
||||
<img src={gifthree} alt="Gif" style={{ width: "100%", height: "auto" }} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
{/* Grid 5 */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
sx={{
|
||||
height: "408px",
|
||||
backgroundColor: "white",
|
||||
position: "relative",
|
||||
backgroundImage: `url(${backfour})`,
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "58% 50%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
|
||||
}}>
|
||||
<Box
|
||||
ref={useRefBox}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "10%",
|
||||
left: "8%",
|
||||
transform: "translateY(-50%)",
|
||||
height: "167px",
|
||||
width: "523px",
|
||||
backgroundColor: "white",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: "70%", paddingLeft: "10px" }}>
|
||||
<Typography variant="h4">Use</Typography>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
|
||||
</Box>
|
||||
<Box sx={{ width: "70%" }}>
|
||||
<img src={giffour} alt="Gif" style={{ width: "100%", height: "auto" }} />
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
ref={reuseRef}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "60%",
|
||||
left: "7%",
|
||||
transform: "translateY(-23%)",
|
||||
height: "167px",
|
||||
width: "388px",
|
||||
backgroundColor: "white",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flexDirection: 'column',
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: "80%", paddingLeft: "10px" }}>
|
||||
<Typography variant="h4">Reuse</Typography>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendisss !</p>
|
||||
</Box>
|
||||
<Box sx={{ width: "80%" }}>
|
||||
<img src={gifsix} alt="Gif" style={{ width: "100%", height: "100%" }} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
{/* Grid 6 */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
|
||||
sx={{
|
||||
height: "400px",
|
||||
position: "relative",
|
||||
backgroundImage: `url(${backfive})`,
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "63% 50%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
|
||||
}}>
|
||||
<Box
|
||||
ref={repairRef}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "12%",
|
||||
left: "39%",
|
||||
transform: "translateY(-23%)",
|
||||
height: "167px",
|
||||
width: "390px",
|
||||
backgroundColor: "white",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: "100%", paddingLeft: "10px" }}>
|
||||
<Typography variant="h4">Repair</Typography>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
|
||||
</Box>
|
||||
<Box sx={{ width: "80%" }}>
|
||||
<img src={giffive} alt="Gif" style={{ width: "100%", height: "100%" }} />
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
ref={disintegrateRef}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "70%",
|
||||
left: "22%",
|
||||
transform: "translateY(-23%)",
|
||||
height: "167px",
|
||||
width: "409px",
|
||||
backgroundColor: "white",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: "70%", paddingLeft: "10px" }}>
|
||||
<Typography variant="h4">Disintegrate</Typography>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
|
||||
</Box>
|
||||
<Box sx={{ width: "70%" }}>
|
||||
<img src={gifseven} alt="Gif" style={{ width: "100%", height: "auto" }} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
{/* grid */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
// Attach ref here
|
||||
sx={{
|
||||
height: "285px",
|
||||
position: "relative",
|
||||
backgroundImage: `url(${backsix})`,
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "56% 50%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
|
||||
}}>
|
||||
<Box
|
||||
ref={remineRef}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "44%",
|
||||
left: "56%",
|
||||
transform: "translateY(-23%)",
|
||||
height: "167px",
|
||||
width: "309px",
|
||||
backgroundColor: "white",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: "70%" }}>
|
||||
<img src={gifeight} alt="Gif" style={{ width: "100%", height: "auto" }} />
|
||||
</Box>
|
||||
<Box sx={{ width: "70%", paddingLeft: "10px" }}>
|
||||
<Typography variant="h4">Remine</Typography>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
ref={mineRef} // Attach ref here
|
||||
sx={{
|
||||
height: "300px",
|
||||
backgroundImage: `url(${loopgreen})`,
|
||||
|
||||
position: "relative",
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}>
|
||||
|
||||
</Grid>
|
||||
</Grid>
|
||||
<PartnerWork/>
|
||||
<Footer/>
|
||||
</Box>
|
||||
<PartnerWork />
|
||||
<OurTeam />
|
||||
<Footer />
|
||||
</Box>
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 210 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 353 KiB After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 100 KiB After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 246 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 398 KiB After Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 145 KiB After Width: | Height: | Size: 843 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 145 KiB After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 480 KiB After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
|
|
@ -0,0 +1,97 @@
|
|||
import React from "react";
|
||||
import { Grid, Typography, Card, CardContent, CardMedia, Divider } from "@mui/material";
|
||||
import color from "../components/imageandgif/color.png"
|
||||
import robert from "../components/imageandgif/robert.png"
|
||||
|
||||
interface TeamMember {
|
||||
name: string;
|
||||
role: string;
|
||||
image: string;
|
||||
}
|
||||
|
||||
const teamMembers: TeamMember[] = [
|
||||
{ name: "John Doe", role: "Software Engineer", image: robert },
|
||||
{ name: "Jane Smith", role: "UI/UX Designer", image: robert },
|
||||
{ name: "Alice Johnson", role: "Project Manager", image: robert },
|
||||
{ name: "Robert Brown", role: "Marketing Lead", image: robert },
|
||||
{ name: "Emma Wilson", role: "Backend Developer", image: robert },
|
||||
{ name: "Michael Davis", role: "Data Analyst", image: robert },
|
||||
];
|
||||
|
||||
const OurTeam: React.FC = () => {
|
||||
return (
|
||||
<Grid
|
||||
container
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
sx={{
|
||||
position: "relative",
|
||||
minHeight: "100vh",
|
||||
backgroundImage: `url(${color})`,
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
fontWeight: "bold",
|
||||
color: "#333",
|
||||
marginBottom: "30px",
|
||||
}}
|
||||
>
|
||||
Our Team
|
||||
</Typography>
|
||||
|
||||
<Grid container spacing={1} justifyContent="center">
|
||||
{teamMembers.map((member, index) => (
|
||||
<Grid item xs={12} sm={6} md={4} key={index}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "0 4px 10px rgba(0,0,0,0.15)",
|
||||
borderRadius: "12px",
|
||||
textAlign: "center",
|
||||
transition: "transform 0.3s",
|
||||
"&:hover": { transform: "translateY(-5px)" },
|
||||
backgroundColor: "white",
|
||||
maxWidth: "230px",
|
||||
margin: "0 auto",
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ paddingBottom: 1 }}>
|
||||
<Typography variant="h6" sx={{ fontSize: "1rem", fontWeight: "bold" }}>
|
||||
{member.name}
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontSize: "0.875rem", color: "gray" }}>
|
||||
{member.role}
|
||||
</Typography>
|
||||
</CardContent>
|
||||
|
||||
{/* Divider Line */}
|
||||
<Divider sx={{ width: "80%", margin: "0 auto 10px auto" }} />
|
||||
|
||||
<CardMedia
|
||||
component="img"
|
||||
height="140" // Reduced height slightly
|
||||
image={member.image}
|
||||
alt={member.name}
|
||||
sx={{
|
||||
objectFit: "contain", // Ensure the entire image is visible
|
||||
width: "80%", // Make the image width smaller
|
||||
margin: "0 auto", // Center the image
|
||||
padding: "10px", // Add some spacing around the image
|
||||
}}
|
||||
/>
|
||||
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
export default OurTeam;
|
||||
|
|
@ -1,5 +1,8 @@
|
|||
import React from "react";
|
||||
import { Box, Card, CardContent, CardMedia, Typography, Button, Grid } from "@mui/material";
|
||||
import loopgreenback from "../components/imageandgif/loopgreenbackground.png"
|
||||
import { useMediaQuery, createTheme, ThemeProvider } from "@mui/material";
|
||||
|
||||
|
||||
const data = [
|
||||
{ img: "https://s3-alpha-sig.figma.com/img/8e1a/c73a/f4e18134521c4a2ef1c70e0ba02fa636?Expires=1739750400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=iKYXVc~k5~LoiM0ep167AJSywxHpPueTEeheiHfxA-TT8SrzhLb0CZIR08zl9nMDz4gBOqlnKavcTEs~h3tu9gRAyIDMIgcFHIeFQ6IBSoeHabuJxmyP0qcdnWXNYJXze0oO8B~VDFHG0lOagJW~fnb8j8gB2W7M4oL2QPPQFsY3oFzEKW3Gydq7ijohnCXdQP5CPgJ2MPhMFQ59DDQsxv5YihKByOgVx3boAx1ABL05w25ab0DFrcPmSgx93rHzikBmmPNVoiLWW6-rYijbFaxZ~2wEbK4zwGZNtIYw~YGR9EG~h595FJDl1XeCaoMWVJFkfqqHcYDD2-1fLu3JFA__", title: "Lorem Ipsum Heading" },
|
||||
|
|
@ -14,116 +17,140 @@ const workImages = [
|
|||
"https://s3-alpha-sig.figma.com/img/2b3c/e165/b717d5a80e0f35b7422343ef37fa73eb?Expires=1739750400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=YgPY40uIT20P0C9JDcCBJeLLAtQU1HTvgO2EmlA3yWVHKcaOIA5UNmFYcxHF5Je5s8nRl9ReC5f2Vh5LNvAG0Q86gV6OTt3JJwgTixaR6YNFBvYeJY5qZlchheys92XgMkvDntrzWQ-dRNK72fDBbPjR8tR31XBt6lGbjoj0HySI9lKXg5x9yF0y~hqC7qtkTfwYJlHHScFXaQnbicMzKZUjTMa5BHwlmGOSG6IFHhmovKJKAZtW5BY0xWiEPXnq19XDnvSdLf3OY-tpG-itRPfA02ztThrqdBv5XWQpCQN4CWn4qNZRdnEYB8BsSKFXKVocAPnqKNziTXDDJvdVgQ__",
|
||||
];
|
||||
|
||||
const theme = createTheme({
|
||||
breakpoints: {
|
||||
values: {
|
||||
xs: 0, // Default
|
||||
sm: 600, // Tablets
|
||||
md: 1000, // Laptops
|
||||
lg: 1400, // Desktops
|
||||
xl: 1800, // Large Screens
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const PartnerWork = () => {
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down("sm")); // Below 600px
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down("md")); // Below 1000px
|
||||
|
||||
return (
|
||||
<Box sx={{ textAlign: "center", padding: "80px 10%" }}>
|
||||
{/* Why Partner with Us? Section */}
|
||||
<Typography variant="h4" gutterBottom>
|
||||
Why Partner with Us?
|
||||
</Typography>
|
||||
<Grid container spacing={4} justifyContent="center" sx={{ paddingTop: 5 }}>
|
||||
{data.map((item, index) => (
|
||||
<Grid item key={index} xs={12} sm={6} md={4}>
|
||||
<Card
|
||||
<ThemeProvider theme={theme}>
|
||||
<Box
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
padding: isMobile ? 5 : 20,
|
||||
backgroundImage: isMobile ? "none" : `url(${loopgreenback})`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}
|
||||
>
|
||||
{/* Why Partner with Us? Section */}
|
||||
<Typography variant="h4" gutterBottom>
|
||||
Why Partner with Us?
|
||||
</Typography>
|
||||
<Grid container spacing={4} justifyContent="center" sx={{ paddingTop: 5 }}>
|
||||
{data.map((item, index) => (
|
||||
<Grid item key={index} xs={12} sm={6} md={4}>
|
||||
<Card
|
||||
sx={{
|
||||
maxWidth: isMobile ? "100%" : 350,
|
||||
mx: "auto",
|
||||
boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.36)",
|
||||
borderRadius: 4,
|
||||
p: 2,
|
||||
background: "linear-gradient(to bottom, #ffffff, #fff5e6)",
|
||||
overflow: "visible",
|
||||
border: "1px solid rgba(0, 0, 0, 0.1)",
|
||||
"&:after": {
|
||||
content: '""',
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: "10px",
|
||||
background: "rgb(255, 255, 255)",
|
||||
borderRadius: "0 0 4px 4px",
|
||||
zIndex: -1,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: "left" }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: "bold" }}>
|
||||
{item.title}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
|
||||
Lorem Ipsum subheading
|
||||
</Typography>
|
||||
</CardContent>
|
||||
<CardMedia
|
||||
component="img"
|
||||
height={isMobile ? "150" : "200"}
|
||||
image={item.img}
|
||||
alt={item.title}
|
||||
sx={{ borderRadius: 2, marginX: "auto" }}
|
||||
/>
|
||||
<CardContent>
|
||||
<Button variant="text" sx={{ textTransform: "none", fontWeight: "bold", color: "black" }}>
|
||||
Learn more →
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
{/* Our Work Section */}
|
||||
<Typography variant="h4" sx={{ mt: 10, mb: 6 }}>
|
||||
Our Work
|
||||
</Typography>
|
||||
<Grid container spacing={3} justifyContent="center">
|
||||
{workImages.map((img, index) => (
|
||||
<Grid item key={index}>
|
||||
<Box
|
||||
sx={{
|
||||
width: isMobile ? 100 : 140,
|
||||
height: isMobile ? 100 : 140,
|
||||
borderRadius: "50%",
|
||||
backgroundImage: `url(${img})`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
boxShadow: 3,
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
{/* Call to Action Section */}
|
||||
<Grid container spacing={4} justifyContent="center" sx={{ mt: 8 }}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Box sx={{ p: 3, border: "1px solid #ddd", borderRadius: 3, boxShadow: 2 }}>
|
||||
<Typography variant="body2" sx={{ fontSize: "1rem" }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</Typography>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{
|
||||
maxWidth: 350,
|
||||
mx: "auto",
|
||||
boxShadow: "0px 4px 10px rgba(0,0,0,0.1)", // General shadow
|
||||
borderRadius: 4,
|
||||
p: 2,
|
||||
background: "linear-gradient(to bottom, #ffffff, #fff5e6)",
|
||||
overflow: "visible",
|
||||
border: "1px solid rgba(0, 0, 0, 0.1)", // Light border around the card
|
||||
borderTop: "none", // Remove top border if you want only edges
|
||||
borderBottom: "none", // Remove bottom border if you want only edges
|
||||
"&:after": {
|
||||
content: '""',
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: "10px", // Height of the shadow effect
|
||||
background: "rgba(0, 0, 0, 0.1)", // Shadow color
|
||||
borderRadius: "0 0 4px 4px", // Match the card's border radius
|
||||
zIndex: -1, // Place it behind the card
|
||||
},
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
fontSize: "1rem",
|
||||
borderRadius: 3,
|
||||
py: 2,
|
||||
backgroundColor: "#000",
|
||||
color: "#fff",
|
||||
"&:hover": { backgroundColor: "#333" },
|
||||
}}
|
||||
>
|
||||
<CardContent sx={{ textAlign: "left" }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: "bold" }}>
|
||||
{item.title}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
|
||||
Lorem Ipsum subheading
|
||||
</Typography>
|
||||
</CardContent>
|
||||
<CardMedia
|
||||
component="img"
|
||||
height="200"
|
||||
image={item.img}
|
||||
alt={item.title}
|
||||
sx={{ borderRadius: 2, marginX: "auto" }}
|
||||
/>
|
||||
<CardContent>
|
||||
<Button variant="text" sx={{ textTransform: "none", fontWeight: "bold", color: "black" }}>
|
||||
Learn more →
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
Explore our projects →
|
||||
</Button>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
{/* Our Work Section */}
|
||||
<Typography variant="h4" sx={{ mt: 10, mb: 6 }}>
|
||||
Our Work
|
||||
</Typography>
|
||||
<Grid container spacing={3} justifyContent="center">
|
||||
{workImages.map((img, index) => (
|
||||
<Grid item key={index}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 140,
|
||||
height: 140,
|
||||
borderRadius: "50%",
|
||||
backgroundImage: `url(${img})`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
boxShadow: 3,
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
{/* Call to Action Section */}
|
||||
<Grid container spacing={4} justifyContent="center" sx={{ mt: 8 }}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Box sx={{ p: 3, border: "1px solid #ddd", borderRadius: 3, boxShadow: 2 }}>
|
||||
<Typography variant="body2" sx={{ fontSize: "1rem" }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</Typography>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
fontSize: "1rem",
|
||||
borderRadius: 3,
|
||||
py: 2,
|
||||
backgroundColor: "#000",
|
||||
color: "#fff",
|
||||
'&:hover': { backgroundColor: "#333" },
|
||||
}}
|
||||
>
|
||||
Explore our projects →
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue