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/node": "^16.7.13",
|
||||||
"@types/react": "^18.0.0",
|
"@types/react": "^18.0.0",
|
||||||
"@types/react-dom": "^18.0.0",
|
"@types/react-dom": "^18.0.0",
|
||||||
|
"framer-motion": "^12.4.2",
|
||||||
"react": "^19.0.0",
|
"react": "^19.0.0",
|
||||||
"react-dom": "^19.0.0",
|
"react-dom": "^19.0.0",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
|
"swiper": "^11.2.2",
|
||||||
"typescript": "^4.4.2",
|
"typescript": "^4.4.2",
|
||||||
"web-vitals": "^2.1.0"
|
"web-vitals": "^2.1.0"
|
||||||
}
|
}
|
||||||
|
|
@ -9145,6 +9147,33 @@
|
||||||
"url": "https://github.com/sponsors/rawify"
|
"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": {
|
"node_modules/fresh": {
|
||||||
"version": "0.5.2",
|
"version": "0.5.2",
|
||||||
"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
|
"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
|
||||||
|
|
@ -12367,6 +12396,21 @@
|
||||||
"mkdirp": "bin/cmd.js"
|
"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": {
|
"node_modules/ms": {
|
||||||
"version": "2.1.3",
|
"version": "2.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||||
|
|
@ -16729,6 +16773,25 @@
|
||||||
"node": ">=4"
|
"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": {
|
"node_modules/symbol-tree": {
|
||||||
"version": "3.2.4",
|
"version": "3.2.4",
|
||||||
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
|
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
|
||||||
|
|
|
||||||
|
|
@ -14,9 +14,11 @@
|
||||||
"@types/node": "^16.7.13",
|
"@types/node": "^16.7.13",
|
||||||
"@types/react": "^18.0.0",
|
"@types/react": "^18.0.0",
|
||||||
"@types/react-dom": "^18.0.0",
|
"@types/react-dom": "^18.0.0",
|
||||||
|
"framer-motion": "^12.4.2",
|
||||||
"react": "^19.0.0",
|
"react": "^19.0.0",
|
||||||
"react-dom": "^19.0.0",
|
"react-dom": "^19.0.0",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
|
"swiper": "^11.2.2",
|
||||||
"typescript": "^4.4.2",
|
"typescript": "^4.4.2",
|
||||||
"web-vitals": "^2.1.0"
|
"web-vitals": "^2.1.0"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -2,42 +2,29 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<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="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<meta name="theme-color" content="#000000" />
|
<meta name="theme-color" content="#000000" />
|
||||||
|
|
||||||
|
<!-- SEO Meta Tags -->
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
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" />
|
<meta
|
||||||
<!--
|
name="keywords"
|
||||||
manifest.json provides metadata used when your web app is installed on a
|
content="urban recycling, sustainability, waste management, eco-friendly, circular economy, green living, plastic recycling, composting"
|
||||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
/>
|
||||||
-->
|
<meta name="author" content="Loop Sustainability" />
|
||||||
<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.
|
|
||||||
|
|
||||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
|
||||||
work correctly both with client-side routing and a non-root public URL.
|
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||||
Learn how to configure a non-root public URL by running `npm run build`.
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||||
-->
|
|
||||||
<title>Loop Sustainability </title>
|
<title>Loop Sustainability - Urban Recycling</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
<div id="root"></div>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 73 KiB |
|
|
@ -5,26 +5,13 @@ import {
|
||||||
ListItemIcon, ListItemText, Divider
|
ListItemIcon, ListItemText, Divider
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
import MenuIcon from "@mui/icons-material/Menu";
|
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 HomeIcon from "@mui/icons-material/Home";
|
||||||
import BuildIcon from "@mui/icons-material/Build";
|
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 Header: React.FC = () => {
|
||||||
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
|
||||||
const [mobileOpen, setMobileOpen] = useState<boolean>(false);
|
const [mobileOpen, setMobileOpen] = useState<boolean>(false);
|
||||||
|
|
||||||
const handleMenuOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
|
|
||||||
setAnchorEl(event.currentTarget);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMenuClose = () => {
|
|
||||||
setAnchorEl(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleMobileMenu = () => {
|
const toggleMobileMenu = () => {
|
||||||
setMobileOpen(!mobileOpen);
|
setMobileOpen(!mobileOpen);
|
||||||
};
|
};
|
||||||
|
|
@ -33,26 +20,25 @@ const Header: React.FC = () => {
|
||||||
<AppBar
|
<AppBar
|
||||||
position="fixed"
|
position="fixed"
|
||||||
sx={{
|
sx={{
|
||||||
backgroundColor: "#eee0e0a3",
|
backgroundColor: "#e6e6e6cf",
|
||||||
padding: "10px 20px" ,
|
margin: "20px 20px 10px 20px",
|
||||||
margin: "10px 20px 10px 20px",
|
|
||||||
width: {
|
width: {
|
||||||
xs: "91.6vw", // Small screens (mobile)
|
xs: "91.6vw",
|
||||||
sm: "95.5vw", // Tablets
|
sm: "95.5vw",
|
||||||
md: "91.6vw", // Medium screens (laptops)
|
md: "91.6vw",
|
||||||
lg: "96.8vw", // Large screens (desktops)
|
lg: "96.8vw",
|
||||||
xl: "96.4vw" // Extra-large screens
|
xl: "96.4vw"
|
||||||
},
|
},
|
||||||
color:'black'
|
color: "black"
|
||||||
|
}}
|
||||||
}}>
|
>
|
||||||
<Toolbar>
|
<Toolbar>
|
||||||
{/* Mobile Menu Button */}
|
{/* Mobile Menu Button */}
|
||||||
<IconButton
|
<IconButton
|
||||||
edge="start"
|
edge="start"
|
||||||
color="inherit"
|
color="inherit"
|
||||||
aria-label="menu"
|
aria-label="menu"
|
||||||
sx={{ display: { xs: "block", md: "none", } }}
|
sx={{ display: { xs: "block", md: "none" } }}
|
||||||
onClick={toggleMobileMenu}
|
onClick={toggleMobileMenu}
|
||||||
>
|
>
|
||||||
<MenuIcon />
|
<MenuIcon />
|
||||||
|
|
@ -64,67 +50,44 @@ const Header: React.FC = () => {
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|
||||||
{/* Desktop Navigation */}
|
{/* 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">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}>
|
Contact-Us
|
||||||
About
|
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
<Button color="inherit">Services</Button>
|
|
||||||
<Button color="inherit">Contact</Button>
|
|
||||||
</Box>
|
</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 */}
|
{/* Mobile Drawer Menu */}
|
||||||
<Drawer anchor="left" open={mobileOpen} onClose={toggleMobileMenu}>
|
<Drawer anchor="left" open={mobileOpen} onClose={toggleMobileMenu}>
|
||||||
<Box sx={{ width: 250 }} role="presentation" onClick={toggleMobileMenu} onKeyDown={toggleMobileMenu}>
|
<Box sx={{ width: 250 }} role="presentation" onClick={toggleMobileMenu} onKeyDown={toggleMobileMenu}>
|
||||||
<List>
|
<List>
|
||||||
<ListItem disablePadding>
|
<ListItem disablePadding>
|
||||||
<ListItemButton>
|
<ListItemButton>
|
||||||
<ListItemIcon><HomeIcon /></ListItemIcon>
|
|
||||||
<ListItemText primary="Home" />
|
<ListItemText primary="Home" />
|
||||||
</ListItemButton>
|
</ListItemButton>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
|
|
||||||
<ListItem disablePadding>
|
<ListItem disablePadding>
|
||||||
<ListItemButton>
|
<ListItemButton>
|
||||||
<ListItemIcon><BuildIcon /></ListItemIcon>
|
|
||||||
<ListItemText primary="Services" />
|
<ListItemText primary="Services" />
|
||||||
</ListItemButton>
|
</ListItemButton>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
<ListItem disablePadding>
|
<ListItem disablePadding>
|
||||||
<ListItemButton>
|
<ListItemButton sx={{ backgroundColor: "blue", color: "white", "&:hover": { backgroundColor: "darkblue" } }}>
|
||||||
<ListItemIcon><ContactMailIcon /></ListItemIcon>
|
|
||||||
<ListItemText primary="Contact" />
|
<ListItemText primary="Download" />
|
||||||
</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>
|
</ListItemButton>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
</List>
|
</List>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import React, { useRef } from "react";
|
import React, { useRef } from "react";
|
||||||
import { Box, Grid, Typography } from "@mui/material";
|
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 backone from "../components/imageandgif/newbgone.png";
|
||||||
import backtwo from "../components/imageandgif/newnewtwo.png";
|
import backtwo from "../components/imageandgif/newnewtwo.png";
|
||||||
import backthree from "../components/imageandgif/newthree.png";
|
import backthree from "../components/imageandgif/newthree.png";
|
||||||
|
|
@ -18,7 +18,14 @@ import Footer from "./footer";
|
||||||
import loopgreenback from "../components/imageandgif/loopgreenbackground.png"
|
import loopgreenback from "../components/imageandgif/loopgreenbackground.png"
|
||||||
import OurTeam from "./ourteam";
|
import OurTeam from "./ourteam";
|
||||||
import mobileLogo from "../components/imageandgif/loopsMoblogo.png"
|
import mobileLogo from "../components/imageandgif/loopsMoblogo.png"
|
||||||
|
import mobileback from "../components/imageandgif/mobileback.png"
|
||||||
|
|
||||||
import { createTheme, ThemeProvider } from "@mui/material/styles";
|
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 = () => {
|
const HomePage: React.FC = () => {
|
||||||
|
|
@ -62,12 +69,12 @@ const HomePage: React.FC = () => {
|
||||||
xs={12}
|
xs={12}
|
||||||
sx={{
|
sx={{
|
||||||
marginTop: "0px",
|
marginTop: "0px",
|
||||||
height: { xs: "190px", md: "300px" },
|
height: { xs: "190px", lg: "337px" },
|
||||||
backgroundColor: "white",
|
backgroundColor: "white",
|
||||||
position: "relative",
|
position: "relative",
|
||||||
backgroundImage: {
|
backgroundImage: {
|
||||||
xs: `url(${mobileLogo})`, // Mobile background image
|
xs: `url(${mobileLogo})`, // Mobile background image
|
||||||
md: `url(${logo})`, // Desktop background image
|
lg: `url(${logo})`, // Desktop background image
|
||||||
},
|
},
|
||||||
backgroundSize: "contain",
|
backgroundSize: "contain",
|
||||||
backgroundPosition: "right center",
|
backgroundPosition: "right center",
|
||||||
|
|
@ -84,7 +91,8 @@ const HomePage: React.FC = () => {
|
||||||
transform: "translateY(-30%)",
|
transform: "translateY(-30%)",
|
||||||
height: { xs: "235px", md: "440px" },
|
height: { xs: "235px", md: "440px" },
|
||||||
width: { xs: "150px", md: "220px" },
|
width: { xs: "150px", md: "220px" },
|
||||||
backgroundColor: "#eee0e0a3",
|
// backgroundColor: "#eee0e0a3",
|
||||||
|
backgroundColor: "white",
|
||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
padding: "20px",
|
padding: "20px",
|
||||||
overflowY: "auto",
|
overflowY: "auto",
|
||||||
|
|
@ -112,40 +120,31 @@ const HomePage: React.FC = () => {
|
||||||
</ul>
|
</ul>
|
||||||
</Box>
|
</Box>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
</Grid>
|
||||||
{/* Grid 2 */}
|
{/* Grid 2 */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
height: { xl: 1800, lg: 2000 , xs:2500 },
|
||||||
|
width: '100%',
|
||||||
|
backgroundImage:{lg: `url(${newbackground})`, xs:`url(${mobileback})`},
|
||||||
|
backgroundSize: "contain",
|
||||||
|
backgroundPosition: { lg: "center", xs: "50% 93%" },
|
||||||
|
backgroundRepeat: "no-repeat",
|
||||||
|
paddingBottom: {lg:20,xs:0}
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Grid
|
<Grid
|
||||||
item
|
container
|
||||||
xs={12}
|
|
||||||
sx={{
|
sx={{
|
||||||
height: { xs: "900px", md: "965px" }, // Increased height for mobile view
|
|
||||||
backgroundColor: "white",
|
width: '100%',
|
||||||
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" },
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Box
|
{/* ROW 1 */}
|
||||||
ref={mineRef}
|
<Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '328px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
|
||||||
sx={{
|
<Box ref={mineRef} sx={{
|
||||||
position: "absolute",
|
height: { xs: "495px", lg: "215px" },
|
||||||
top: { xs: "15%", lg: "4%" },
|
width: { xs: "80%", lg: "870px" },
|
||||||
left: { lg: "10%" },
|
|
||||||
transform: "translateY(-50%)",
|
|
||||||
height: { xs: "332px", lg: "200px" },
|
|
||||||
width: { xs: "80%", lg: "470px" },
|
|
||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: { xs: "column", lg: "row" },
|
flexDirection: { xs: "column", lg: "row" },
|
||||||
|
|
@ -153,304 +152,221 @@ const HomePage: React.FC = () => {
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
padding: "10px",
|
padding: "10px",
|
||||||
textAlign: 'center',
|
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" } }}>
|
|
||||||
<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
|
|
||||||
}}>
|
}}>
|
||||||
<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>
|
||||||
</Box>
|
</Grid>
|
||||||
|
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' } }}></Grid>
|
||||||
|
|
||||||
|
{/* ROW 2 */}
|
||||||
<Box
|
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' } }}></Grid>
|
||||||
ref={repairRef}
|
<Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: "flex-start" ,xs:"center" }, alignItems: "center" }}>
|
||||||
sx={{
|
<Box ref={manufactureRef} sx={{
|
||||||
position: "absolute",
|
height: { xs: "472px", lg: "215px" },
|
||||||
top: { xs: "1%", md: "20%" },
|
width: { xs: "80%", lg: "552px" },
|
||||||
right: { xs: "1%", md: "13%" },
|
|
||||||
transform: "translateY(-23%)",
|
|
||||||
height: { xs: "150px", md: "167px" },
|
|
||||||
width: { xs: "47%", md: "390px" },
|
|
||||||
backgroundColor: "white",
|
|
||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: { xs: 'column', md: 'row-reverse' }, // Reverse for mobile
|
flexDirection: { xs: "column-reverse", lg: "row" },
|
||||||
|
justifyContent: "center",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "center", // Center vertically
|
|
||||||
padding: "10px",
|
padding: "10px",
|
||||||
}}
|
textAlign: 'center',
|
||||||
>
|
marginBottom: { xs: "20px", md: "0" },
|
||||||
<Box
|
}}>
|
||||||
sx={{
|
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'} }}>
|
||||||
width: "80%",
|
<Typography variant="h4">Manufacturing</Typography>
|
||||||
paddingLeft: "10px",
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
||||||
backgroundColor: { xs: 'green', md: 'transparent' },
|
</Box>
|
||||||
display: 'flex',
|
<Box sx={{ width: { lg: '50%' } }}>
|
||||||
flexDirection: 'column',
|
<img src={giftwo} alt="Gif" style={{ width: "100%" }} />
|
||||||
justifyContent: 'center',
|
</Box>
|
||||||
}}
|
|
||||||
>
|
|
||||||
<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
|
</Box>
|
||||||
ref={disintegrateRef}
|
</Grid>
|
||||||
sx={{
|
|
||||||
position: "absolute",
|
{/* ROW 3 */}
|
||||||
top: { xs: "61%", md: "61%" },
|
<Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '401px' }, display: "flex", justifyContent: { lg: 'flex-end' ,xs:'center' }, alignItems: "center" }}>
|
||||||
left: { xs: "-2%", md: "6%" },
|
<Box ref={assembleRef} sx={{
|
||||||
transform: "translateY(-23%)",
|
height: { xs: "332px", lg: "215px" },
|
||||||
height: { xs: "150px", md: "167px" },
|
width: { xs: "80%", lg: "595px" },
|
||||||
width: { xs: "51%", md: "409px" },
|
|
||||||
backgroundColor: "white",
|
|
||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: { xs: 'column-reverse', md: 'row-reverse' }, // Reverse for mobile
|
flexDirection: { xs: "column", lg: "row" },
|
||||||
|
justifyContent: "center",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "center", // Center vertically
|
|
||||||
padding: "10px",
|
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={{
|
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'} }}>
|
||||||
width: "80%",
|
<Typography variant="h4">Assemble</Typography>
|
||||||
paddingLeft: "10px",
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
||||||
backgroundColor: { xs: 'green', md: 'transparent' },
|
</Box>
|
||||||
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
|
</Box>
|
||||||
ref={remineRef}
|
</Grid>
|
||||||
sx={{
|
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } ,display: { xs: 'none', sm: 'block' } }}></Grid>
|
||||||
position: "absolute",
|
|
||||||
top: { xs: "60%", md: "65%" },
|
{/* ROW 4 */}
|
||||||
right: { xs: "-3%", md: "8%" },
|
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' }}}></Grid>
|
||||||
transform: "translateY(-23%)",
|
<Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: 'flex-start' ,xs:'center' }, alignItems: "center" }}>
|
||||||
height: { xs: "150px", md: "167px" },
|
<Box ref={useRefBox} sx={{
|
||||||
width: { xs: "50%", md: "309px" },
|
height: { xs: "332px", lg: "215px" },
|
||||||
backgroundColor: "white",
|
width: { xs: "80%", lg: "550px" },
|
||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: { xs: 'column', md: 'row-reverse' }, // Reverse for mobile
|
flexDirection: { xs: "column-reverse", lg: "row" },
|
||||||
|
justifyContent: "center",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "center", // Center vertically
|
|
||||||
padding: "10px",
|
padding: "10px",
|
||||||
}}
|
textAlign: 'center',
|
||||||
>
|
marginBottom: { xs: "20px", md: "0" },
|
||||||
<Box
|
}}>
|
||||||
sx={{
|
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'} }}>
|
||||||
width: "80%",
|
<Typography variant="h4">Use</Typography>
|
||||||
paddingLeft: "10px",
|
<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>
|
||||||
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<img src={gifeight} alt="Gif" style={{ width: "100%", height: "auto" }} />
|
|
||||||
</Box>
|
</Box>
|
||||||
<Box sx={{ width: "70%", paddingLeft: "10px", backgroundColor: { xs: 'green', md: 'transparent' },
|
</Grid>
|
||||||
display: 'flex',
|
{/* new2 */}
|
||||||
flexDirection: 'column',
|
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' } }}></Grid>
|
||||||
justifyContent: 'center', }}>
|
|
||||||
<Typography variant="h4">Remine</Typography>
|
|
||||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
|
<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", 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">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>
|
</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>
|
||||||
|
|
||||||
|
</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>
|
</Grid>
|
||||||
|
</Box>
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
xs={12}
|
||||||
|
ref={mineRef} // Attach ref here
|
||||||
|
sx={{
|
||||||
|
height: "300px",
|
||||||
|
backgroundImage: `url(${loopgreen})`,
|
||||||
|
marginTop:{lg:20 , xs:0},
|
||||||
|
position: "relative",
|
||||||
|
backgroundSize: "contain",
|
||||||
|
backgroundPosition: "center",
|
||||||
|
backgroundRepeat: "no-repeat",
|
||||||
|
}}>
|
||||||
|
|
||||||
{/* 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 />
|
<PartnerWork />
|
||||||
<OurTeam />
|
<OurTeam />
|
||||||
<Footer />
|
<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 React, { useState } from "react";
|
||||||
import { Grid, Typography, Card, CardContent, CardMedia, Divider } from "@mui/material";
|
import {
|
||||||
import color from "../components/imageandgif/color.png"
|
Grid,
|
||||||
import robert from "../components/imageandgif/robert.png"
|
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 {
|
interface TeamMember {
|
||||||
name: string;
|
name: string;
|
||||||
|
|
@ -19,77 +31,88 @@ const teamMembers: TeamMember[] = [
|
||||||
];
|
];
|
||||||
|
|
||||||
const OurTeam: React.FC = () => {
|
const OurTeam: React.FC = () => {
|
||||||
|
const [showTeam, setShowTeam] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Grid
|
<Grid
|
||||||
container
|
container
|
||||||
|
direction="column"
|
||||||
justifyContent="center"
|
justifyContent="center"
|
||||||
alignItems="center"
|
alignItems="center"
|
||||||
sx={{
|
sx={{
|
||||||
position: "relative",
|
minHeight: showTeam ? "100vh" : "auto",
|
||||||
minHeight: "100vh",
|
background: "white",
|
||||||
backgroundImage: `url(${color})`,
|
textAlign: "center",
|
||||||
backgroundSize: "contain",
|
padding: "40px 20px",
|
||||||
backgroundPosition: "center",
|
|
||||||
backgroundRepeat: "no-repeat",
|
|
||||||
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography
|
{/* Title with Expand Icon */}
|
||||||
variant="h4"
|
<Box
|
||||||
sx={{
|
display="flex"
|
||||||
textAlign: "center",
|
alignItems="center"
|
||||||
fontWeight: "bold",
|
gap={1}
|
||||||
color: "#333",
|
sx={{ cursor: "pointer" }}
|
||||||
marginBottom: "30px",
|
onClick={() => setShowTeam(!showTeam)}
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
Our Team
|
<Typography variant="h5" sx={{ fontWeight: "bold" }}>
|
||||||
</Typography>
|
Our Team
|
||||||
|
</Typography>
|
||||||
|
<IconButton sx={{ color: "black" }}>
|
||||||
|
{showTeam ? <ExpandLessIcon /> : <ExpandMoreIcon />}
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
|
||||||
<Grid container spacing={1} justifyContent="center">
|
{/* Expanding Team Section */}
|
||||||
{teamMembers.map((member, index) => (
|
<motion.div
|
||||||
<Grid item xs={12} sm={6} md={4} key={index}>
|
initial={{ opacity: 0, height: 0 }}
|
||||||
<Card
|
animate={{ opacity: showTeam ? 1 : 0, height: showTeam ? "auto" : 0 }}
|
||||||
sx={{
|
transition={{ duration: 0.5, ease: "easeInOut" }}
|
||||||
boxShadow: "0 4px 10px rgba(0,0,0,0.15)",
|
style={{ overflow: "hidden", width: "100%" }}
|
||||||
borderRadius: "12px",
|
>
|
||||||
textAlign: "center",
|
<Grid container spacing={2} justifyContent="center" sx={{ marginTop: "20px" }}>
|
||||||
transition: "transform 0.3s",
|
{teamMembers.map((member, index) => (
|
||||||
"&:hover": { transform: "translateY(-5px)" },
|
<Grid item xs={12} sm={6} md={4} key={index}>
|
||||||
backgroundColor: "white",
|
<Card
|
||||||
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={{
|
sx={{
|
||||||
objectFit: "contain", // Ensure the entire image is visible
|
boxShadow: "0 4px 10px rgba(0,0,0,0.15)",
|
||||||
width: "80%", // Make the image width smaller
|
borderRadius: "12px",
|
||||||
margin: "0 auto", // Center the image
|
textAlign: "center",
|
||||||
padding: "10px", // Add some spacing around the image
|
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>
|
{/* Divider */}
|
||||||
</Grid>
|
<Divider sx={{ width: "80%", margin: "0 auto 10px auto" }} />
|
||||||
))}
|
|
||||||
</Grid>
|
<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>
|
</Grid>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,13 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { Box, Card, CardContent, CardMedia, Typography, Button, Grid } from "@mui/material";
|
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 { useMediaQuery, createTheme, ThemeProvider } from "@mui/material";
|
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 = [
|
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/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" },
|
{ 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__",
|
"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({
|
const theme = createTheme({
|
||||||
breakpoints: {
|
breakpoints: {
|
||||||
values: {
|
values: { xs: 0, sm: 600, md: 1000, lg: 1400, xl: 1800 },
|
||||||
xs: 0, // Default
|
|
||||||
sm: 600, // Tablets
|
|
||||||
md: 1000, // Laptops
|
|
||||||
lg: 1400, // Desktops
|
|
||||||
xl: 1800, // Large Screens
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const PartnerWork = () => {
|
const PartnerWork = () => {
|
||||||
const isMobile = useMediaQuery(theme.breakpoints.down("sm")); // Below 600px
|
const isMobile = useMediaQuery(theme.breakpoints.down("sm")); // Below 600px
|
||||||
const isTablet = useMediaQuery(theme.breakpoints.down("md")); // Below 1000px
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider theme={theme}>
|
<ThemeProvider theme={theme}>
|
||||||
|
|
@ -45,83 +43,126 @@ const PartnerWork = () => {
|
||||||
backgroundRepeat: "no-repeat",
|
backgroundRepeat: "no-repeat",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* Why Partner with Us? Section */}
|
{/* Why Partner with Us? */}
|
||||||
<Typography variant="h4" gutterBottom>
|
<Typography variant="h4" gutterBottom>
|
||||||
Why Partner with Us?
|
Why Partner with Us?
|
||||||
</Typography>
|
</Typography>
|
||||||
<Grid container spacing={4} justifyContent="center" sx={{ paddingTop: 5 }}>
|
|
||||||
{data.map((item, index) => (
|
{/* Swiper for Mobile View */}
|
||||||
<Grid item key={index} xs={12} sm={6} md={4}>
|
{isMobile ? (
|
||||||
<Card
|
<Swiper
|
||||||
sx={{
|
modules={[Autoplay, Pagination]}
|
||||||
maxWidth: isMobile ? "100%" : 350,
|
autoplay={{ delay: 3000, disableOnInteraction: false }}
|
||||||
mx: "auto",
|
pagination={{ clickable: true }}
|
||||||
boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.36)",
|
loop={true}
|
||||||
borderRadius: 4,
|
spaceBetween={10}
|
||||||
p: 2,
|
slidesPerView={1}
|
||||||
background: "linear-gradient(to bottom, #ffffff, #fff5e6)",
|
style={{ width: "100%", maxWidth: 350 }}
|
||||||
overflow: "visible",
|
>
|
||||||
border: "1px solid rgba(0, 0, 0, 0.1)",
|
{data.map((item, index) => (
|
||||||
"&:after": {
|
<SwiperSlide key={index}>
|
||||||
content: '""',
|
<Card
|
||||||
position: "absolute",
|
sx={{
|
||||||
bottom: 0,
|
maxWidth: 350,
|
||||||
left: 0,
|
mx: "auto",
|
||||||
right: 0,
|
boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.36)",
|
||||||
height: "10px",
|
borderRadius: 4,
|
||||||
background: "rgb(255, 255, 255)",
|
p: 2,
|
||||||
borderRadius: "0 0 4px 4px",
|
background: "linear-gradient(to bottom, #ffffff, #fff5e6)",
|
||||||
zIndex: -1,
|
border: "1px solid rgba(0, 0, 0, 0.1)",
|
||||||
},
|
}}
|
||||||
}}
|
>
|
||||||
>
|
<CardContent sx={{ textAlign: "left" }}>
|
||||||
<CardContent sx={{ textAlign: "left" }}>
|
<Typography variant="h6" sx={{ fontWeight: "bold" }}>
|
||||||
<Typography variant="h6" sx={{ fontWeight: "bold" }}>
|
{item.title}
|
||||||
{item.title}
|
</Typography>
|
||||||
</Typography>
|
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
|
||||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
|
Lorem Ipsum subheading
|
||||||
Lorem Ipsum subheading
|
</Typography>
|
||||||
</Typography>
|
</CardContent>
|
||||||
</CardContent>
|
<CardMedia
|
||||||
<CardMedia
|
component="img"
|
||||||
component="img"
|
height="150"
|
||||||
height={isMobile ? "150" : "200"}
|
image={item.img}
|
||||||
image={item.img}
|
alt={item.title}
|
||||||
alt={item.title}
|
sx={{ borderRadius: 2, marginX: "auto" }}
|
||||||
sx={{ borderRadius: 2, marginX: "auto" }}
|
/>
|
||||||
/>
|
<CardContent>
|
||||||
<CardContent>
|
<Button variant="text" sx={{ textTransform: "none", fontWeight: "bold", color: "black" }}>
|
||||||
<Button variant="text" sx={{ textTransform: "none", fontWeight: "bold", color: "black" }}>
|
Learn more →
|
||||||
Learn more →
|
</Button>
|
||||||
</Button>
|
</CardContent>
|
||||||
</CardContent>
|
</Card>
|
||||||
</Card>
|
</SwiperSlide>
|
||||||
</Grid>
|
))}
|
||||||
))}
|
</Swiper>
|
||||||
</Grid>
|
) : (
|
||||||
|
<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 */}
|
{/* Our Work Section */}
|
||||||
<Typography variant="h4" sx={{ mt: 10, mb: 6 }}>
|
<Typography variant="h4" sx={{ mt: 10, mb: 6 }}>
|
||||||
Our Work
|
Our Work
|
||||||
</Typography>
|
</Typography>
|
||||||
<Grid container spacing={3} justifyContent="center">
|
<Grid container spacing={1} justifyContent="center">
|
||||||
{workImages.map((img, index) => (
|
{workImages.map((image, index) => (
|
||||||
<Grid item key={index}>
|
<Grid item key={index}>
|
||||||
<Box
|
<Box
|
||||||
|
component="img"
|
||||||
|
src={image}
|
||||||
|
alt={`Work ${index + 1}`}
|
||||||
sx={{
|
sx={{
|
||||||
width: isMobile ? 100 : 140,
|
width: isMobile ? 100 : 190,
|
||||||
height: isMobile ? 100 : 140,
|
height: isMobile ? 100 : 190,
|
||||||
borderRadius: "50%",
|
borderRadius: index % 2 === 0 ? "50%" : "7%", // Circle for 1st & 3rd, Square for 2nd & 4th
|
||||||
backgroundImage: `url(${img})`,
|
backgroundColor: "gray",
|
||||||
backgroundSize: "cover",
|
|
||||||
backgroundPosition: "center",
|
|
||||||
boxShadow: 3,
|
boxShadow: 3,
|
||||||
|
objectFit: "cover",
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Grid>
|
</Grid>
|
||||||
))}
|
))}
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{/* Call to Action Section */}
|
{/* Call to Action Section */}
|
||||||
<Grid container spacing={4} justifyContent="center" sx={{ mt: 8 }}>
|
<Grid container spacing={4} justifyContent="center" sx={{ mt: 8 }}>
|
||||||
<Grid item xs={12} sm={6}>
|
<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"
|
resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz"
|
||||||
integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
|
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:
|
fresh@0.5.2:
|
||||||
version "0.5.2"
|
version "0.5.2"
|
||||||
resolved "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz"
|
resolved "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz"
|
||||||
|
|
@ -6961,6 +6970,18 @@ mkdirp@~0.5.1:
|
||||||
dependencies:
|
dependencies:
|
||||||
minimist "^1.2.6"
|
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:
|
ms@^2.1.1, ms@^2.1.3, ms@2.1.3:
|
||||||
version "2.1.3"
|
version "2.1.3"
|
||||||
resolved "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz"
|
resolved "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz"
|
||||||
|
|
@ -9325,6 +9346,11 @@ svgo@^2.7.0:
|
||||||
picocolors "^1.0.0"
|
picocolors "^1.0.0"
|
||||||
stable "^0.1.8"
|
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:
|
symbol-tree@^3.2.4:
|
||||||
version "3.2.4"
|
version "3.2.4"
|
||||||
resolved "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz"
|
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"
|
resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
|
||||||
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
|
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
|
||||||
|
|
||||||
tslib@^2.0.3:
|
tslib@^2.0.3, tslib@^2.4.0:
|
||||||
version "2.8.1"
|
version "2.8.1"
|
||||||
resolved "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz"
|
resolved "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz"
|
||||||
integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
|
integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue