fix/layout #2
|
|
@ -19,9 +19,11 @@
|
|||
"@types/node": "^16.7.13",
|
||||
"@types/react": "^18.0.0",
|
||||
"@types/react-dom": "^18.0.0",
|
||||
"framer-motion": "^12.4.2",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"swiper": "^11.2.2",
|
||||
"typescript": "^4.4.2",
|
||||
"web-vitals": "^2.1.0"
|
||||
}
|
||||
|
|
@ -9145,6 +9147,33 @@
|
|||
"url": "https://github.com/sponsors/rawify"
|
||||
}
|
||||
},
|
||||
"node_modules/framer-motion": {
|
||||
"version": "12.4.2",
|
||||
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.2.tgz",
|
||||
"integrity": "sha512-pW307cQKjDqEuO1flEoIFf6TkuJRfKr+c7qsHAJhDo4368N/5U8/7WU8J+xhd9+gjmOgJfgp+46evxRRFM39dA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-dom": "^12.0.0",
|
||||
"motion-utils": "^12.0.0",
|
||||
"tslib": "^2.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/is-prop-valid": "*",
|
||||
"react": "^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/is-prop-valid": {
|
||||
"optional": true
|
||||
},
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/fresh": {
|
||||
"version": "0.5.2",
|
||||
"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
|
||||
|
|
@ -12367,6 +12396,21 @@
|
|||
"mkdirp": "bin/cmd.js"
|
||||
}
|
||||
},
|
||||
"node_modules/motion-dom": {
|
||||
"version": "12.0.0",
|
||||
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.0.0.tgz",
|
||||
"integrity": "sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"motion-utils": "^12.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/motion-utils": {
|
||||
"version": "12.0.0",
|
||||
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz",
|
||||
"integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
|
|
@ -16729,6 +16773,25 @@
|
|||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/swiper": {
|
||||
"version": "11.2.2",
|
||||
"resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.2.tgz",
|
||||
"integrity": "sha512-FmAN6zACpVUbd/1prO9xQ9gKo9cc6RE2UKU/z4oXtS8fNyX4sdOW/HHT/e444WucLJs0jeMId6WjdWM2Lrs8zA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/swiperjs"
|
||||
},
|
||||
{
|
||||
"type": "open_collective",
|
||||
"url": "http://opencollective.com/swiper"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 4.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/symbol-tree": {
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
|
||||
|
|
|
|||
|
|
@ -14,9 +14,11 @@
|
|||
"@types/node": "^16.7.13",
|
||||
"@types/react": "^18.0.0",
|
||||
"@types/react-dom": "^18.0.0",
|
||||
"framer-motion": "^12.4.2",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"swiper": "^11.2.2",
|
||||
"typescript": "^4.4.2",
|
||||
"web-vitals": "^2.1.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@ 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";
|
||||
import newbackground from "../components/imageandgif/full.png"
|
||||
import newbackgroundtwo from "../components/imageandgif/newbacktwo.png"
|
||||
|
||||
|
||||
|
||||
|
||||
const HomePage: React.FC = () => {
|
||||
|
|
@ -112,40 +116,31 @@ const HomePage: React.FC = () => {
|
|||
</ul>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
{/* Grid 2 */}
|
||||
</Grid>
|
||||
{/* Grid 2 */}
|
||||
<Box
|
||||
sx={{
|
||||
height: { xl: 1800, lg: 2000 , xs:2500 },
|
||||
width: '100%',
|
||||
backgroundImage:{lg: `url(${newbackground})`, xs:null},
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
paddingBottom: 20
|
||||
}}
|
||||
>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
container
|
||||
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",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
textAlign: 'center',
|
||||
padding: { xs: "20px", md: "0" },
|
||||
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<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" },
|
||||
{/* ROW 1 */}
|
||||
<Grid item xs={12} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '328px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
|
||||
<Box ref={mineRef} sx={{
|
||||
height: { xs: "495px", lg: "215px" },
|
||||
width: { xs: "80%", lg: "870px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", lg: "row" },
|
||||
|
|
@ -153,304 +148,220 @@ const HomePage: React.FC = () => {
|
|||
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' }
|
||||
}}>
|
||||
<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 4 */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
sx={{
|
||||
height: { xs: "707px", md: "830px" },
|
||||
backgroundColor: "white",
|
||||
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
|
||||
marginBottom: { xs: "20px", md: "0" },
|
||||
}}>
|
||||
<img src={gifsix} alt="Gif" style={{ width: "132%", height: "110%" }} />
|
||||
<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" }, textAlign: {lg:'left' , xs:'center'} }}>
|
||||
<Typography variant="h4">Mine from nature</Typography>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' } }}></Grid>
|
||||
|
||||
|
||||
<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",
|
||||
{/* ROW 2 */}
|
||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' } }}></Grid>
|
||||
<Grid item xs={12} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: "flex-start" ,xs:"center" }, alignItems: "center" }}>
|
||||
<Box ref={mineRef} sx={{
|
||||
height: { xs: "472px", lg: "215px" },
|
||||
width: { xs: "80%", lg: "552px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flexDirection: { xs: 'column', md: 'row-reverse' }, // Reverse for mobile
|
||||
flexDirection: { xs: "column-reverse", lg: "row" },
|
||||
justifyContent: "center",
|
||||
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>
|
||||
textAlign: 'center',
|
||||
marginBottom: { xs: "20px", md: "0" },
|
||||
}}>
|
||||
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'} }}>
|
||||
<Typography variant="h4">Manufacturing</Typography>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
||||
</Box>
|
||||
<Box sx={{ width: { lg: '50%' } }}>
|
||||
<img src={giftwo} alt="Gif" style={{ width: "100%" }} />
|
||||
</Box>
|
||||
|
||||
<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",
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
{/* ROW 3 */}
|
||||
<Grid item xs={12} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '401px' }, display: "flex", justifyContent: { lg: 'flex-end' ,xs:'center' }, alignItems: "center" }}>
|
||||
<Box ref={mineRef} sx={{
|
||||
height: { xs: "332px", lg: "215px" },
|
||||
width: { xs: "80%", lg: "595px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flexDirection: { xs: 'column-reverse', md: 'row-reverse' }, // Reverse for mobile
|
||||
flexDirection: { xs: "column", lg: "row" },
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
justifyContent: "center", // Center vertically
|
||||
padding: "10px",
|
||||
textAlign: 'center',
|
||||
marginBottom: { xs: "20px", md: "0" },
|
||||
}}>
|
||||
|
||||
<Box sx={{ width: { xs: "60%", md: "100%" } }}>
|
||||
<img src={gifthree} alt="Gif" style={{ width: "100%" }} />
|
||||
</Box>
|
||||
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'} }}>
|
||||
<Typography variant="h4">Assemble</Typography>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } ,display: { xs: 'none', sm: 'block' } }}></Grid>
|
||||
|
||||
{/* ROW 4 */}
|
||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' }}}></Grid>
|
||||
<Grid item xs={12} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: 'flex-start' ,xs:'center' }, alignItems: "center" }}>
|
||||
<Box ref={mineRef} sx={{
|
||||
height: { xs: "332px", lg: "215px" },
|
||||
width: { xs: "80%", lg: "550px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column-reverse", lg: "row" },
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
textAlign: 'center',
|
||||
marginBottom: { xs: "20px", md: "0" },
|
||||
}}>
|
||||
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'} }}>
|
||||
<Typography variant="h4">Use</Typography>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
||||
</Box>
|
||||
<Box sx={{ width: { xs: "60%", md: "100%" } }}>
|
||||
<img src={giffour} alt="Gif" style={{ width: "100%" }} />
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
</Grid>
|
||||
{/* new2 */}
|
||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' } }}></Grid>
|
||||
|
||||
|
||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
|
||||
{/* newnew */}
|
||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||||
<Box ref={mineRef} sx={{
|
||||
height: { xs: "332px", lg: "115px" },
|
||||
width: { xs: "80%", lg: "250px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", lg: "column" },
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
textAlign: 'center',
|
||||
marginBottom: { xs: "20px", md: "0" },
|
||||
}}>
|
||||
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'} }}>
|
||||
<Typography variant="h4">Reuse</Typography>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
||||
</Box>
|
||||
<Box sx={{ width: { xs: "60%", md: "100%" } }}>
|
||||
<img src={giffive} alt="Gif" style={{ width: "100%" }} />
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||||
<Box ref={mineRef} sx={{
|
||||
height: { xs: "332px", lg: "115px" },
|
||||
width: { xs: "80%", lg: "250px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", lg: "column" },
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
textAlign: 'center',
|
||||
marginBottom: { xs: "20px", md: "0" },
|
||||
}}>
|
||||
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'} }}>
|
||||
<Typography variant="h4">Repair</Typography>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
||||
</Box>
|
||||
<Box sx={{ width: { xs: "60%", md: "100%" } }}>
|
||||
<img src={gifsix} alt="Gif" style={{ width: "100%" }} />
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
</Grid>
|
||||
{/* newnewnwe */}
|
||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||||
<Box ref={mineRef} sx={{
|
||||
height: { xs: "332px", lg: "115px" },
|
||||
width: { xs: "80%", lg: "250px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", lg: "column" },
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
textAlign: 'center',
|
||||
marginBottom: { xs: "20px", md: "0" },
|
||||
}}>
|
||||
<Box sx={{ width: { xs: "60%", md: "100%" } }}>
|
||||
<img src={gifseven} alt="Gif" style={{ width: "100%" }} />
|
||||
</Box>
|
||||
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'} }}>
|
||||
<Typography variant="h4">Disintegrate</Typography>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
||||
</Box>
|
||||
|
||||
}}
|
||||
>
|
||||
<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={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",
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||||
<Box ref={mineRef} sx={{
|
||||
height: { xs: "332px", lg: "115px" },
|
||||
width: { xs: "80%", lg: "250px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flexDirection: { xs: 'column', md: 'row-reverse' }, // Reverse for mobile
|
||||
flexDirection: { xs: "column", lg: "column" },
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
justifyContent: "center", // Center vertically
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "80%",
|
||||
paddingLeft: "10px",
|
||||
|
||||
}}
|
||||
>
|
||||
<img src={gifeight} alt="Gif" style={{ width: "100%", height: "auto" }} />
|
||||
textAlign: 'center',
|
||||
marginBottom: { xs: "20px", md: "0" },
|
||||
}}>
|
||||
<Box sx={{ width: { xs: "60%", md: "100%" } }}>
|
||||
<img src={gifeight} alt="Gif" style={{ width: "100%" }} />
|
||||
</Box>
|
||||
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'} }}>
|
||||
<Typography variant="h4">Remine</Typography>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
||||
</Box>
|
||||
|
||||
|
||||
</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>
|
||||
</Box>
|
||||
{/* <Grid
|
||||
container
|
||||
sx={{
|
||||
height: { xl: 1800, lg: 188 },
|
||||
width: '100%',
|
||||
backgroundImage: `url(${newbackgroundtwo})`,
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}
|
||||
>
|
||||
<Grid item>
|
||||
|
||||
</Grid>
|
||||
|
||||
{/* Grid 5 */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
ref={mineRef}
|
||||
sx={{
|
||||
height: { xs: "200px", md: "300px" },
|
||||
backgroundImage: `url(${loopgreen})`,
|
||||
position: "relative",
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid> */}
|
||||
|
||||
|
||||
|
||||
|
||||
<PartnerWork />
|
||||
<OurTeam />
|
||||
<Footer />
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
|
|
@ -1,7 +1,19 @@
|
|||
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"
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
Grid,
|
||||
Typography,
|
||||
Card,
|
||||
CardContent,
|
||||
CardMedia,
|
||||
Divider,
|
||||
IconButton,
|
||||
Box,
|
||||
} from "@mui/material";
|
||||
import { motion } from "framer-motion";
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
|
||||
|
||||
import robert from "../components/imageandgif/robert.png";
|
||||
|
||||
interface TeamMember {
|
||||
name: string;
|
||||
|
|
@ -19,77 +31,88 @@ const teamMembers: TeamMember[] = [
|
|||
];
|
||||
|
||||
const OurTeam: React.FC = () => {
|
||||
const [showTeam, setShowTeam] = useState(false);
|
||||
|
||||
return (
|
||||
<Grid
|
||||
container
|
||||
direction="column"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
sx={{
|
||||
position: "relative",
|
||||
minHeight: "100vh",
|
||||
backgroundImage: `url(${color})`,
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
|
||||
minHeight: showTeam ? "100vh" : "auto",
|
||||
background: "white",
|
||||
textAlign: "center",
|
||||
padding: "40px 20px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
fontWeight: "bold",
|
||||
color: "#333",
|
||||
marginBottom: "30px",
|
||||
}}
|
||||
{/* Title with Expand Icon */}
|
||||
<Box
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={1}
|
||||
sx={{ cursor: "pointer" }}
|
||||
onClick={() => setShowTeam(!showTeam)}
|
||||
>
|
||||
Our Team
|
||||
</Typography>
|
||||
<Typography variant="h5" sx={{ fontWeight: "bold" }}>
|
||||
Our Team
|
||||
</Typography>
|
||||
<IconButton sx={{ color: "black" }}>
|
||||
{showTeam ? <ExpandLessIcon /> : <ExpandMoreIcon />}
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
<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}
|
||||
{/* Expanding Team Section */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: showTeam ? 1 : 0, height: showTeam ? "auto" : 0 }}
|
||||
transition={{ duration: 0.5, ease: "easeInOut" }}
|
||||
style={{ overflow: "hidden", width: "100%" }}
|
||||
>
|
||||
<Grid container spacing={2} justifyContent="center" sx={{ marginTop: "20px" }}>
|
||||
{teamMembers.map((member, index) => (
|
||||
<Grid item xs={12} sm={6} md={4} key={index}>
|
||||
<Card
|
||||
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
|
||||
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>
|
||||
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
{/* Divider */}
|
||||
<Divider sx={{ width: "80%", margin: "0 auto 10px auto" }} />
|
||||
|
||||
<CardMedia
|
||||
component="img"
|
||||
height="140"
|
||||
image={member.image}
|
||||
alt={member.name}
|
||||
sx={{
|
||||
objectFit: "contain",
|
||||
width: "80%",
|
||||
margin: "0 auto",
|
||||
padding: "10px",
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</motion.div>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
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";
|
||||
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { Autoplay, Pagination } from "swiper/modules";
|
||||
import "swiper/css";
|
||||
import "swiper/css/pagination";
|
||||
import loopgreenback from "../components/imageandgif/loopgreenbackground.png";
|
||||
import { useMediaQuery, createTheme, ThemeProvider } from "@mui/material";
|
||||
|
||||
// Define Data
|
||||
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" },
|
||||
{ img: "https://s3-alpha-sig.figma.com/img/7cf1/0d68/a23d760a5c95fc2a5ab5fb4e6e59deec?Expires=1739750400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=LJgcQKDXC323lViIWgemZBwZ2jUeEQY3t~y9XKfH3Fpg3njl0njNtFQFMCiwEjwXxS4Fl711FZGY-f-qf~m7pn60FtcOLNyigwNzabHL-a7AIg9Y0aivbsRyy-Lpe-HsV33-QpPENtci8SWvTZrOQkZ0lRIiwmybKiLv3twuexnx-jlGvUKsdKuX8WxT0jYxIfQcn93FFQaaHKyHH2ZlgwTj~~R4MJO8-K0oO-JX7EVTlLwK3V2~-WUS400GiThR4~-iqmCPVnvoUI2uHW29BpZFV48wfCcreOJVG3AKbQXlSWe23HWzprUWqiGHDlDOKlkfeJEErDMqCYvqnKPxmQ__", title: "Lorem Ipsum Heading" },
|
||||
|
|
@ -17,21 +21,15 @@ const workImages = [
|
|||
"https://s3-alpha-sig.figma.com/img/2b3c/e165/b717d5a80e0f35b7422343ef37fa73eb?Expires=1739750400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=YgPY40uIT20P0C9JDcCBJeLLAtQU1HTvgO2EmlA3yWVHKcaOIA5UNmFYcxHF5Je5s8nRl9ReC5f2Vh5LNvAG0Q86gV6OTt3JJwgTixaR6YNFBvYeJY5qZlchheys92XgMkvDntrzWQ-dRNK72fDBbPjR8tR31XBt6lGbjoj0HySI9lKXg5x9yF0y~hqC7qtkTfwYJlHHScFXaQnbicMzKZUjTMa5BHwlmGOSG6IFHhmovKJKAZtW5BY0xWiEPXnq19XDnvSdLf3OY-tpG-itRPfA02ztThrqdBv5XWQpCQN4CWn4qNZRdnEYB8BsSKFXKVocAPnqKNziTXDDJvdVgQ__",
|
||||
];
|
||||
|
||||
// Theme for responsiveness
|
||||
const theme = createTheme({
|
||||
breakpoints: {
|
||||
values: {
|
||||
xs: 0, // Default
|
||||
sm: 600, // Tablets
|
||||
md: 1000, // Laptops
|
||||
lg: 1400, // Desktops
|
||||
xl: 1800, // Large Screens
|
||||
},
|
||||
values: { xs: 0, sm: 600, md: 1000, lg: 1400, xl: 1800 },
|
||||
},
|
||||
});
|
||||
|
||||
const PartnerWork = () => {
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down("sm")); // Below 600px
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down("md")); // Below 1000px
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
|
|
@ -45,76 +43,113 @@ const PartnerWork = () => {
|
|||
backgroundRepeat: "no-repeat",
|
||||
}}
|
||||
>
|
||||
{/* Why Partner with Us? Section */}
|
||||
{/* Why Partner with Us? */}
|
||||
<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>
|
||||
|
||||
{/* Swiper for Mobile View */}
|
||||
{isMobile ? (
|
||||
<Swiper
|
||||
modules={[Autoplay, Pagination]}
|
||||
autoplay={{ delay: 3000, disableOnInteraction: false }}
|
||||
pagination={{ clickable: true }}
|
||||
loop={true}
|
||||
spaceBetween={10}
|
||||
slidesPerView={1}
|
||||
style={{ width: "100%", maxWidth: 350 }}
|
||||
>
|
||||
{data.map((item, index) => (
|
||||
<SwiperSlide key={index}>
|
||||
<Card
|
||||
sx={{
|
||||
maxWidth: 350,
|
||||
mx: "auto",
|
||||
boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.36)",
|
||||
borderRadius: 4,
|
||||
p: 2,
|
||||
background: "linear-gradient(to bottom, #ffffff, #fff5e6)",
|
||||
border: "1px solid rgba(0, 0, 0, 0.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="150"
|
||||
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>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
) : (
|
||||
<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: 350,
|
||||
mx: "auto",
|
||||
boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.36)",
|
||||
borderRadius: 4,
|
||||
p: 2,
|
||||
background: "linear-gradient(to bottom, #ffffff, #fff5e6)",
|
||||
border: "1px solid rgba(0, 0, 0, 0.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="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) => (
|
||||
{[1, 2, 3].map((_, index) => (
|
||||
<Grid item key={index}>
|
||||
<Box
|
||||
sx={{
|
||||
width: isMobile ? 100 : 140,
|
||||
height: isMobile ? 100 : 140,
|
||||
borderRadius: "50%",
|
||||
backgroundImage: `url(${img})`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
backgroundColor: "gray",
|
||||
boxShadow: 3,
|
||||
}}
|
||||
/>
|
||||
|
|
|
|||
28
yarn.lock
28
yarn.lock
|
|
@ -5041,6 +5041,15 @@ fraction.js@^4.3.7:
|
|||
resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz"
|
||||
integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
|
||||
|
||||
framer-motion@^12.4.2:
|
||||
version "12.4.2"
|
||||
resolved "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.2.tgz"
|
||||
integrity sha512-pW307cQKjDqEuO1flEoIFf6TkuJRfKr+c7qsHAJhDo4368N/5U8/7WU8J+xhd9+gjmOgJfgp+46evxRRFM39dA==
|
||||
dependencies:
|
||||
motion-dom "^12.0.0"
|
||||
motion-utils "^12.0.0"
|
||||
tslib "^2.4.0"
|
||||
|
||||
fresh@0.5.2:
|
||||
version "0.5.2"
|
||||
resolved "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz"
|
||||
|
|
@ -6961,6 +6970,18 @@ mkdirp@~0.5.1:
|
|||
dependencies:
|
||||
minimist "^1.2.6"
|
||||
|
||||
motion-dom@^12.0.0:
|
||||
version "12.0.0"
|
||||
resolved "https://registry.npmjs.org/motion-dom/-/motion-dom-12.0.0.tgz"
|
||||
integrity sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg==
|
||||
dependencies:
|
||||
motion-utils "^12.0.0"
|
||||
|
||||
motion-utils@^12.0.0:
|
||||
version "12.0.0"
|
||||
resolved "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz"
|
||||
integrity sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==
|
||||
|
||||
ms@^2.1.1, ms@^2.1.3, ms@2.1.3:
|
||||
version "2.1.3"
|
||||
resolved "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz"
|
||||
|
|
@ -9325,6 +9346,11 @@ svgo@^2.7.0:
|
|||
picocolors "^1.0.0"
|
||||
stable "^0.1.8"
|
||||
|
||||
swiper@^11.2.2:
|
||||
version "11.2.2"
|
||||
resolved "https://registry.npmjs.org/swiper/-/swiper-11.2.2.tgz"
|
||||
integrity sha512-FmAN6zACpVUbd/1prO9xQ9gKo9cc6RE2UKU/z4oXtS8fNyX4sdOW/HHT/e444WucLJs0jeMId6WjdWM2Lrs8zA==
|
||||
|
||||
symbol-tree@^3.2.4:
|
||||
version "3.2.4"
|
||||
resolved "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz"
|
||||
|
|
@ -9516,7 +9542,7 @@ tslib@^1.8.1:
|
|||
resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
|
||||
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
|
||||
|
||||
tslib@^2.0.3:
|
||||
tslib@^2.0.3, tslib@^2.4.0:
|
||||
version "2.8.1"
|
||||
resolved "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz"
|
||||
integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
|
||||
|
|
|
|||
Loading…
Reference in New Issue