Merge pull request 'fix/layout' (#2) from fix/layout into main
Reviewed-on: #2 Reviewed-by: Mihir Motiyani <mihir@midastix.com>
This commit is contained in:
commit
cf4f1acee4
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,42 +2,29 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/loopsLogo.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
|
||||
<!-- SEO Meta Tags -->
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
content="Loop Sustainability - Promoting urban recycling, sustainable waste management, and eco-friendly solutions for a cleaner future."
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
<meta
|
||||
name="keywords"
|
||||
content="urban recycling, sustainability, waste management, eco-friendly, circular economy, green living, plastic recycling, composting"
|
||||
/>
|
||||
<meta name="author" content="Loop Sustainability" />
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
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>Loop Sustainability </title>
|
||||
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
|
||||
<title>Loop Sustainability - Urban Recycling</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 73 KiB |
|
|
@ -5,26 +5,13 @@ import {
|
|||
ListItemIcon, ListItemText, Divider
|
||||
} from "@mui/material";
|
||||
import MenuIcon from "@mui/icons-material/Menu";
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
import InfoIcon from "@mui/icons-material/Info";
|
||||
import PersonIcon from "@mui/icons-material/Person";
|
||||
import GroupsIcon from "@mui/icons-material/Groups";
|
||||
import HomeIcon from "@mui/icons-material/Home";
|
||||
import BuildIcon from "@mui/icons-material/Build";
|
||||
import ContactMailIcon from "@mui/icons-material/ContactMail";
|
||||
import FileDownloadIcon from "@mui/icons-material/FileDownload";
|
||||
|
||||
const Header: React.FC = () => {
|
||||
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
||||
const [mobileOpen, setMobileOpen] = useState<boolean>(false);
|
||||
|
||||
const handleMenuOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleMenuClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
const toggleMobileMenu = () => {
|
||||
setMobileOpen(!mobileOpen);
|
||||
};
|
||||
|
|
@ -33,26 +20,25 @@ const Header: React.FC = () => {
|
|||
<AppBar
|
||||
position="fixed"
|
||||
sx={{
|
||||
backgroundColor: "#eee0e0a3",
|
||||
padding: "10px 20px" ,
|
||||
margin: "10px 20px 10px 20px",
|
||||
backgroundColor: "#e6e6e6cf",
|
||||
margin: "20px 20px 10px 20px",
|
||||
width: {
|
||||
xs: "91.6vw", // Small screens (mobile)
|
||||
sm: "95.5vw", // Tablets
|
||||
md: "91.6vw", // Medium screens (laptops)
|
||||
lg: "96.8vw", // Large screens (desktops)
|
||||
xl: "96.4vw" // Extra-large screens
|
||||
xs: "91.6vw",
|
||||
sm: "95.5vw",
|
||||
md: "91.6vw",
|
||||
lg: "96.8vw",
|
||||
xl: "96.4vw"
|
||||
},
|
||||
color:'black'
|
||||
|
||||
}}>
|
||||
color: "black"
|
||||
}}
|
||||
>
|
||||
<Toolbar>
|
||||
{/* Mobile Menu Button */}
|
||||
<IconButton
|
||||
edge="start"
|
||||
color="inherit"
|
||||
aria-label="menu"
|
||||
sx={{ display: { xs: "block", md: "none", } }}
|
||||
sx={{ display: { xs: "block", md: "none" } }}
|
||||
onClick={toggleMobileMenu}
|
||||
>
|
||||
<MenuIcon />
|
||||
|
|
@ -64,67 +50,44 @@ const Header: React.FC = () => {
|
|||
</Typography>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<Box sx={{ display: { xs: "none", md: "flex" }, gap: 2 }}>
|
||||
<Box sx={{ display: { xs: "none", md: "flex" }, gap: 3 }}>
|
||||
<Button color="inherit">Home</Button>
|
||||
<Button color="inherit" >About</Button>
|
||||
<Button color="inherit" >Team</Button>
|
||||
{/* Download Button */}
|
||||
<Button
|
||||
sx={{
|
||||
padding:'7px 20px 7px 20px',
|
||||
backgroundColor: "#0841adcc",
|
||||
color: "white",
|
||||
"&:hover": { backgroundColor: "darkblue" }
|
||||
}}
|
||||
|
||||
{/* Dropdown Menu */}
|
||||
<Button color="inherit" endIcon={<ExpandMoreIcon />} onClick={handleMenuOpen}>
|
||||
About
|
||||
>
|
||||
Contact-Us
|
||||
</Button>
|
||||
|
||||
<Button color="inherit">Services</Button>
|
||||
<Button color="inherit">Contact</Button>
|
||||
</Box>
|
||||
|
||||
{/* About Dropdown Menu */}
|
||||
<Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose}>
|
||||
<MenuItem onClick={handleMenuClose}>
|
||||
<InfoIcon sx={{ mr: 1 }} /> About Us
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleMenuClose}>
|
||||
<PersonIcon sx={{ mr: 1 }} /> About CEO
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleMenuClose}>
|
||||
<GroupsIcon sx={{ mr: 1 }} /> Team
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
|
||||
{/* Mobile Drawer Menu */}
|
||||
<Drawer anchor="left" open={mobileOpen} onClose={toggleMobileMenu}>
|
||||
<Box sx={{ width: 250 }} role="presentation" onClick={toggleMobileMenu} onKeyDown={toggleMobileMenu}>
|
||||
<List>
|
||||
<ListItem disablePadding>
|
||||
<ListItemButton>
|
||||
<ListItemIcon><HomeIcon /></ListItemIcon>
|
||||
|
||||
<ListItemText primary="Home" />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
|
||||
<ListItem disablePadding>
|
||||
<ListItemButton>
|
||||
<ListItemIcon><BuildIcon /></ListItemIcon>
|
||||
|
||||
<ListItemText primary="Services" />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
<ListItem disablePadding>
|
||||
<ListItemButton>
|
||||
<ListItemIcon><ContactMailIcon /></ListItemIcon>
|
||||
<ListItemText primary="Contact" />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
</List>
|
||||
<Divider />
|
||||
<List>
|
||||
<ListItem disablePadding>
|
||||
<ListItemButton>
|
||||
<ListItemIcon><PersonIcon /></ListItemIcon>
|
||||
<ListItemText primary="About CEO" />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
<ListItem disablePadding>
|
||||
<ListItemButton>
|
||||
<ListItemIcon><GroupsIcon /></ListItemIcon>
|
||||
<ListItemText primary="Team" />
|
||||
<ListItemButton sx={{ backgroundColor: "blue", color: "white", "&:hover": { backgroundColor: "darkblue" } }}>
|
||||
|
||||
<ListItemText primary="Download" />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
</List>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { useRef } from "react";
|
||||
import { Box, Grid, Typography } from "@mui/material";
|
||||
import logo from "../loopslogo2.png";
|
||||
import logo from "../components/imageandgif/newlogo.png";
|
||||
import backone from "../components/imageandgif/newbgone.png";
|
||||
import backtwo from "../components/imageandgif/newnewtwo.png";
|
||||
import backthree from "../components/imageandgif/newthree.png";
|
||||
|
|
@ -18,7 +18,14 @@ import Footer from "./footer";
|
|||
import loopgreenback from "../components/imageandgif/loopgreenbackground.png"
|
||||
import OurTeam from "./ourteam";
|
||||
import mobileLogo from "../components/imageandgif/loopsMoblogo.png"
|
||||
import mobileback from "../components/imageandgif/mobileback.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 = () => {
|
||||
|
|
@ -62,12 +69,12 @@ const HomePage: React.FC = () => {
|
|||
xs={12}
|
||||
sx={{
|
||||
marginTop: "0px",
|
||||
height: { xs: "190px", md: "300px" },
|
||||
height: { xs: "190px", lg: "337px" },
|
||||
backgroundColor: "white",
|
||||
position: "relative",
|
||||
backgroundImage: {
|
||||
xs: `url(${mobileLogo})`, // Mobile background image
|
||||
md: `url(${logo})`, // Desktop background image
|
||||
lg: `url(${logo})`, // Desktop background image
|
||||
},
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "right center",
|
||||
|
|
@ -84,7 +91,8 @@ const HomePage: React.FC = () => {
|
|||
transform: "translateY(-30%)",
|
||||
height: { xs: "235px", md: "440px" },
|
||||
width: { xs: "150px", md: "220px" },
|
||||
backgroundColor: "#eee0e0a3",
|
||||
// backgroundColor: "#eee0e0a3",
|
||||
backgroundColor: "white",
|
||||
zIndex: 1,
|
||||
padding: "20px",
|
||||
overflowY: "auto",
|
||||
|
|
@ -112,40 +120,31 @@ const HomePage: React.FC = () => {
|
|||
</ul>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
{/* Grid 2 */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
<Box
|
||||
sx={{
|
||||
height: { xs: "900px", md: "965px" }, // Increased height for mobile view
|
||||
backgroundColor: "white",
|
||||
position: "relative",
|
||||
backgroundImage: {
|
||||
xs: null,
|
||||
md: `url(${backone})`,
|
||||
},
|
||||
height: { xl: 1800, lg: 2000 , xs:2500 },
|
||||
width: '100%',
|
||||
backgroundImage:{lg: `url(${newbackground})`, xs:`url(${mobileback})`},
|
||||
backgroundSize: "contain",
|
||||
backgroundPositionX: "50.5%",
|
||||
backgroundPositionY: "60%",
|
||||
backgroundPosition: { lg: "center", xs: "50% 93%" },
|
||||
backgroundRepeat: "no-repeat",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
textAlign: 'center',
|
||||
padding: { xs: "20px", md: "0" },
|
||||
paddingBottom: {lg:20,xs:0}
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
ref={mineRef}
|
||||
<Grid
|
||||
container
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: { xs: "15%", lg: "4%" },
|
||||
left: { lg: "10%" },
|
||||
transform: "translateY(-50%)",
|
||||
height: { xs: "332px", lg: "200px" },
|
||||
width: { xs: "80%", lg: "470px" },
|
||||
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{/* ROW 1 */}
|
||||
<Grid item xs={12} lg={6} 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,27 +152,25 @@ const HomePage: React.FC = () => {
|
|||
alignItems: "center",
|
||||
padding: "10px",
|
||||
textAlign: 'center',
|
||||
marginBottom: { xs: "20px", md: "0" }, // Add margin bottom for spacing
|
||||
}}
|
||||
>
|
||||
marginBottom: { xs: "20px", md: "0" },
|
||||
}}>
|
||||
<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" } }}>
|
||||
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'} }}>
|
||||
<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>
|
||||
<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>
|
||||
</Grid>
|
||||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' } }}></Grid>
|
||||
|
||||
<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",
|
||||
{/* ROW 2 */}
|
||||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' } }}></Grid>
|
||||
<Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: "flex-start" ,xs:"center" }, alignItems: "center" }}>
|
||||
<Box ref={manufactureRef} sx={{
|
||||
height: { xs: "472px", lg: "215px" },
|
||||
width: { xs: "80%", lg: "552px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column-reverse", lg: "row" },
|
||||
|
|
@ -181,276 +178,195 @@ const HomePage: React.FC = () => {
|
|||
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" }} />
|
||||
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={assembleRef}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: { xs: "74%", lg: "66%" },
|
||||
left: { lg: "12%" },
|
||||
height: { xs: "300px", md: "167px" },
|
||||
width: { xs: "80%", md: "534px" },
|
||||
backgroundColor: "white",
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
{/* ROW 3 */}
|
||||
<Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '401px' }, display: "flex", justifyContent: { lg: 'flex-end' ,xs:'center' }, alignItems: "center" }}>
|
||||
<Box ref={assembleRef} sx={{
|
||||
height: { xs: "332px", lg: "215px" },
|
||||
width: { xs: "80%", lg: "595px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column-reverse", lg: "row" },
|
||||
flexDirection: { xs: "column", lg: "row" },
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
textAlign: 'center',
|
||||
zIndex: 1,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: "70%", paddingLeft: { xs: "0", md: "10px" } }}>
|
||||
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 dolor sit amet consectetur adipisicing elit. Perferendis!</p>
|
||||
</Box>
|
||||
<Box sx={{ width: "70%" }}>
|
||||
<img src={gifthree} alt="Gif" style={{ width: "85%", height: "auto" }} />
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } ,display: { xs: 'none', sm: 'block' } }}></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" },
|
||||
{/* ROW 4 */}
|
||||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' }}}></Grid>
|
||||
<Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: 'flex-start' ,xs:'center' }, alignItems: "center" }}>
|
||||
<Box ref={useRefBox} sx={{
|
||||
height: { xs: "332px", lg: "215px" },
|
||||
width: { xs: "80%", lg: "550px" },
|
||||
zIndex: 1,
|
||||
display: "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",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: "70%", paddingLeft: "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 dolor sit amet consectetur adipisicing elit. Perferendis !</p>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
||||
</Box>
|
||||
<Box sx={{ width: "70%" }}>
|
||||
<img src={giffour} alt="Gif" style={{ width: "69%", height: "auto" }} />
|
||||
<Box sx={{ width: { xs: "60%", md: "100%" } }}>
|
||||
<img src={giffour} alt="Gif" style={{ width: "100%" }} />
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
</Grid>
|
||||
{/* new2 */}
|
||||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' } }}></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",
|
||||
|
||||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
|
||||
{/* newnew */}
|
||||
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||||
<Box ref={reuseRef} 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",
|
||||
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
|
||||
}}
|
||||
>
|
||||
textAlign: 'center',
|
||||
marginBottom: { xs: "20px", md: "0" },
|
||||
}}>
|
||||
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'}, background:{xs:'green', lg:'white'} }}>
|
||||
<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%" }} />
|
||||
<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
|
||||
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
|
||||
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",
|
||||
|
||||
}}
|
||||
>
|
||||
<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",
|
||||
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 item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||||
<Box ref={repairRef} 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'}, background:{xs:'green', lg:'white'} }}>
|
||||
<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>
|
||||
|
||||
{/* Grid 5 */}
|
||||
</Box>
|
||||
</Grid>
|
||||
{/* newnewnwe */}
|
||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||||
<Box ref={disintegrateRef} sx={{
|
||||
height: { xs: "332px", lg: "115px" },
|
||||
width: { xs: "92%", lg: "250px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", lg: "column" },
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
textAlign: 'center',
|
||||
marginBottom: { xs: "20px", md: "0" },
|
||||
marginTop: { xs: "20px"},
|
||||
}}>
|
||||
<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'}, background:{xs:'green', lg:'white'} }}>
|
||||
<Typography variant="h4">Disintegrate</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: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||||
<Box ref={remineRef} sx={{
|
||||
height: { xs: "332px", lg: "115px" },
|
||||
width: { xs: "92%", lg: "250px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", lg: "column" },
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
textAlign: 'center',
|
||||
marginBottom: { xs: "20px", md: "0" },
|
||||
marginTop: { xs: "20px"},
|
||||
}}>
|
||||
<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'} , background:{xs:'green', lg:'white'} }}>
|
||||
<Typography variant="h4">Remine</Typography>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
||||
</Box>
|
||||
|
||||
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
ref={mineRef}
|
||||
ref={mineRef} // Attach ref here
|
||||
sx={{
|
||||
height: { xs: "200px", md: "300px" },
|
||||
height: "300px",
|
||||
backgroundImage: `url(${loopgreen})`,
|
||||
marginTop:{lg:20 , xs:0},
|
||||
position: "relative",
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}>
|
||||
|
||||
</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: 88 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 |
Binary file not shown.
|
After Width: | Height: | Size: 94 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,34 +31,45 @@ 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",
|
||||
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{
|
||||
minHeight: showTeam ? "100vh" : "auto",
|
||||
background: "white",
|
||||
textAlign: "center",
|
||||
fontWeight: "bold",
|
||||
color: "#333",
|
||||
marginBottom: "30px",
|
||||
padding: "40px 20px",
|
||||
}}
|
||||
>
|
||||
{/* Title with Expand Icon */}
|
||||
<Box
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={1}
|
||||
sx={{ cursor: "pointer" }}
|
||||
onClick={() => setShowTeam(!showTeam)}
|
||||
>
|
||||
<Typography variant="h5" sx={{ fontWeight: "bold" }}>
|
||||
Our Team
|
||||
</Typography>
|
||||
<IconButton sx={{ color: "black" }}>
|
||||
{showTeam ? <ExpandLessIcon /> : <ExpandMoreIcon />}
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
<Grid container spacing={1} justifyContent="center">
|
||||
{/* 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
|
||||
|
|
@ -70,26 +93,26 @@ const OurTeam: React.FC = () => {
|
|||
</Typography>
|
||||
</CardContent>
|
||||
|
||||
{/* Divider Line */}
|
||||
{/* Divider */}
|
||||
<Divider sx={{ width: "80%", margin: "0 auto 10px auto" }} />
|
||||
|
||||
<CardMedia
|
||||
component="img"
|
||||
height="140" // Reduced height slightly
|
||||
height="140"
|
||||
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
|
||||
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 { 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,34 +43,33 @@ 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 }}>
|
||||
|
||||
{/* 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) => (
|
||||
<Grid item key={index} xs={12} sm={6} md={4}>
|
||||
<SwiperSlide key={index}>
|
||||
<Card
|
||||
sx={{
|
||||
maxWidth: isMobile ? "100%" : 350,
|
||||
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)",
|
||||
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" }}>
|
||||
|
|
@ -85,7 +82,46 @@ const PartnerWork = () => {
|
|||
</CardContent>
|
||||
<CardMedia
|
||||
component="img"
|
||||
height={isMobile ? "150" : "200"}
|
||||
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" }}
|
||||
|
|
@ -99,29 +135,34 @@ const PartnerWork = () => {
|
|||
</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 container spacing={1} justifyContent="center">
|
||||
{workImages.map((image, index) => (
|
||||
<Grid item key={index}>
|
||||
<Box
|
||||
component="img"
|
||||
src={image}
|
||||
alt={`Work ${index + 1}`}
|
||||
sx={{
|
||||
width: isMobile ? 100 : 140,
|
||||
height: isMobile ? 100 : 140,
|
||||
borderRadius: "50%",
|
||||
backgroundImage: `url(${img})`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
width: isMobile ? 100 : 190,
|
||||
height: isMobile ? 100 : 190,
|
||||
borderRadius: index % 2 === 0 ? "50%" : "7%", // Circle for 1st & 3rd, Square for 2nd & 4th
|
||||
backgroundColor: "gray",
|
||||
boxShadow: 3,
|
||||
objectFit: "cover",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
|
||||
|
||||
{/* Call to Action Section */}
|
||||
<Grid container spacing={4} justifyContent="center" sx={{ mt: 8 }}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
|
|
|
|||
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