fixed mobile view
This commit is contained in:
hardik
parent
2f15b0b8e5
commit
82294460bf
|
|
@ -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" />
|
||||||
<meta
|
|
||||||
name="description"
|
<!-- SEO Meta Tags -->
|
||||||
content="Web site created using create-react-app"
|
<meta
|
||||||
|
name="description"
|
||||||
|
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>
|
||||||
{/* Dropdown Menu */}
|
<Button color="inherit" >Team</Button>
|
||||||
<Button color="inherit" endIcon={<ExpandMoreIcon />} onClick={handleMenuOpen}>
|
{/* Download Button */}
|
||||||
About
|
<Button
|
||||||
|
sx={{
|
||||||
|
padding:'7px 20px 7px 20px',
|
||||||
|
backgroundColor: "#0841adcc",
|
||||||
|
color: "white",
|
||||||
|
"&:hover": { backgroundColor: "darkblue" }
|
||||||
|
}}
|
||||||
|
|
||||||
|
>
|
||||||
|
Contact-Us
|
||||||
</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,6 +18,8 @@ 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 newbackground from "../components/imageandgif/full.png"
|
||||||
import newbackgroundtwo from "../components/imageandgif/newbacktwo.png"
|
import newbackgroundtwo from "../components/imageandgif/newbacktwo.png"
|
||||||
|
|
@ -25,6 +27,7 @@ import newbackgroundtwo from "../components/imageandgif/newbacktwo.png"
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const HomePage: React.FC = () => {
|
const HomePage: React.FC = () => {
|
||||||
// Create refs for each content box
|
// Create refs for each content box
|
||||||
const mineRef = useRef<HTMLDivElement>(null);
|
const mineRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
@ -66,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",
|
||||||
|
|
@ -88,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",
|
||||||
|
|
@ -122,11 +126,11 @@ const HomePage: React.FC = () => {
|
||||||
sx={{
|
sx={{
|
||||||
height: { xl: 1800, lg: 2000 , xs:2500 },
|
height: { xl: 1800, lg: 2000 , xs:2500 },
|
||||||
width: '100%',
|
width: '100%',
|
||||||
backgroundImage:{lg: `url(${newbackground})`, xs:null},
|
backgroundImage:{lg: `url(${newbackground})`, xs:`url(${mobileback})`},
|
||||||
backgroundSize: "contain",
|
backgroundSize: "contain",
|
||||||
backgroundPosition: "center",
|
backgroundPosition: { lg: "center", xs: "50% 93%" },
|
||||||
backgroundRepeat: "no-repeat",
|
backgroundRepeat: "no-repeat",
|
||||||
paddingBottom: 20
|
paddingBottom: {lg:20,xs:0}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Grid
|
<Grid
|
||||||
|
|
@ -137,7 +141,7 @@ const HomePage: React.FC = () => {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* ROW 1 */}
|
{/* ROW 1 */}
|
||||||
<Grid item xs={12} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '328px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
|
<Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '328px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
|
||||||
<Box ref={mineRef} sx={{
|
<Box ref={mineRef} sx={{
|
||||||
height: { xs: "495px", lg: "215px" },
|
height: { xs: "495px", lg: "215px" },
|
||||||
width: { xs: "80%", lg: "870px" },
|
width: { xs: "80%", lg: "870px" },
|
||||||
|
|
@ -159,12 +163,12 @@ const HomePage: React.FC = () => {
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' } }}></Grid>
|
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' } }}></Grid>
|
||||||
|
|
||||||
{/* ROW 2 */}
|
{/* ROW 2 */}
|
||||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' } }}></Grid>
|
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' } }}></Grid>
|
||||||
<Grid item xs={12} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: "flex-start" ,xs:"center" }, alignItems: "center" }}>
|
<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={mineRef} sx={{
|
<Box ref={manufactureRef} sx={{
|
||||||
height: { xs: "472px", lg: "215px" },
|
height: { xs: "472px", lg: "215px" },
|
||||||
width: { xs: "80%", lg: "552px" },
|
width: { xs: "80%", lg: "552px" },
|
||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
|
|
@ -188,8 +192,8 @@ const HomePage: React.FC = () => {
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
{/* ROW 3 */}
|
{/* ROW 3 */}
|
||||||
<Grid item xs={12} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '401px' }, display: "flex", justifyContent: { lg: 'flex-end' ,xs:'center' }, alignItems: "center" }}>
|
<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={mineRef} sx={{
|
<Box ref={assembleRef} sx={{
|
||||||
height: { xs: "332px", lg: "215px" },
|
height: { xs: "332px", lg: "215px" },
|
||||||
width: { xs: "80%", lg: "595px" },
|
width: { xs: "80%", lg: "595px" },
|
||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
|
|
@ -212,12 +216,12 @@ const HomePage: React.FC = () => {
|
||||||
|
|
||||||
</Box>
|
</Box>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } ,display: { xs: 'none', sm: 'block' } }}></Grid>
|
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } ,display: { xs: 'none', sm: 'block' } }}></Grid>
|
||||||
|
|
||||||
{/* ROW 4 */}
|
{/* ROW 4 */}
|
||||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' }}}></Grid>
|
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' }}}></Grid>
|
||||||
<Grid item xs={12} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: 'flex-start' ,xs:'center' }, alignItems: "center" }}>
|
<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={mineRef} sx={{
|
<Box ref={useRefBox} sx={{
|
||||||
height: { xs: "332px", lg: "215px" },
|
height: { xs: "332px", lg: "215px" },
|
||||||
width: { xs: "80%", lg: "550px" },
|
width: { xs: "80%", lg: "550px" },
|
||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
|
|
@ -240,13 +244,13 @@ const HomePage: React.FC = () => {
|
||||||
</Box>
|
</Box>
|
||||||
</Grid>
|
</Grid>
|
||||||
{/* new2 */}
|
{/* new2 */}
|
||||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' } }}></Grid>
|
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' } }}></Grid>
|
||||||
|
|
||||||
|
|
||||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
|
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
|
||||||
{/* newnew */}
|
{/* newnew */}
|
||||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
<Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||||||
<Box ref={mineRef} sx={{
|
<Box ref={reuseRef} sx={{
|
||||||
height: { xs: "332px", lg: "115px" },
|
height: { xs: "332px", lg: "115px" },
|
||||||
width: { xs: "80%", lg: "250px" },
|
width: { xs: "80%", lg: "250px" },
|
||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
|
|
@ -258,7 +262,7 @@ const HomePage: React.FC = () => {
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
marginBottom: { xs: "20px", md: "0" },
|
marginBottom: { xs: "20px", md: "0" },
|
||||||
}}>
|
}}>
|
||||||
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'} }}>
|
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'}, background:{xs:'green', lg:'white'} }}>
|
||||||
<Typography variant="h4">Reuse</Typography>
|
<Typography variant="h4">Reuse</Typography>
|
||||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
@ -269,7 +273,7 @@ const HomePage: React.FC = () => {
|
||||||
</Box>
|
</Box>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||||||
<Box ref={mineRef} sx={{
|
<Box ref={repairRef} sx={{
|
||||||
height: { xs: "332px", lg: "115px" },
|
height: { xs: "332px", lg: "115px" },
|
||||||
width: { xs: "80%", lg: "250px" },
|
width: { xs: "80%", lg: "250px" },
|
||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
|
|
@ -281,7 +285,7 @@ const HomePage: React.FC = () => {
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
marginBottom: { xs: "20px", md: "0" },
|
marginBottom: { xs: "20px", md: "0" },
|
||||||
}}>
|
}}>
|
||||||
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'} }}>
|
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'}, background:{xs:'green', lg:'white'} }}>
|
||||||
<Typography variant="h4">Repair</Typography>
|
<Typography variant="h4">Repair</Typography>
|
||||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
@ -293,9 +297,9 @@ const HomePage: React.FC = () => {
|
||||||
</Grid>
|
</Grid>
|
||||||
{/* newnewnwe */}
|
{/* newnewnwe */}
|
||||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||||||
<Box ref={mineRef} sx={{
|
<Box ref={disintegrateRef} sx={{
|
||||||
height: { xs: "332px", lg: "115px" },
|
height: { xs: "332px", lg: "115px" },
|
||||||
width: { xs: "80%", lg: "250px" },
|
width: { xs: "92%", lg: "250px" },
|
||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: { xs: "column", lg: "column" },
|
flexDirection: { xs: "column", lg: "column" },
|
||||||
|
|
@ -304,11 +308,12 @@ const HomePage: React.FC = () => {
|
||||||
padding: "10px",
|
padding: "10px",
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
marginBottom: { xs: "20px", md: "0" },
|
marginBottom: { xs: "20px", md: "0" },
|
||||||
|
marginTop: { xs: "20px"},
|
||||||
}}>
|
}}>
|
||||||
<Box sx={{ width: { xs: "60%", md: "100%" } }}>
|
<Box sx={{ width: { xs: "60%", md: "100%" } }}>
|
||||||
<img src={gifseven} alt="Gif" style={{ width: "100%" }} />
|
<img src={gifseven} alt="Gif" style={{ width: "100%" }} />
|
||||||
</Box>
|
</Box>
|
||||||
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'} }}>
|
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'}, background:{xs:'green', lg:'white'} }}>
|
||||||
<Typography variant="h4">Disintegrate</Typography>
|
<Typography variant="h4">Disintegrate</Typography>
|
||||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
@ -317,9 +322,9 @@ const HomePage: React.FC = () => {
|
||||||
</Box>
|
</Box>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||||||
<Box ref={mineRef} sx={{
|
<Box ref={remineRef} sx={{
|
||||||
height: { xs: "332px", lg: "115px" },
|
height: { xs: "332px", lg: "115px" },
|
||||||
width: { xs: "80%", lg: "250px" },
|
width: { xs: "92%", lg: "250px" },
|
||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: { xs: "column", lg: "column" },
|
flexDirection: { xs: "column", lg: "column" },
|
||||||
|
|
@ -328,11 +333,12 @@ const HomePage: React.FC = () => {
|
||||||
padding: "10px",
|
padding: "10px",
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
marginBottom: { xs: "20px", md: "0" },
|
marginBottom: { xs: "20px", md: "0" },
|
||||||
|
marginTop: { xs: "20px"},
|
||||||
}}>
|
}}>
|
||||||
<Box sx={{ width: { xs: "60%", md: "100%" } }}>
|
<Box sx={{ width: { xs: "60%", md: "100%" } }}>
|
||||||
<img src={gifeight} alt="Gif" style={{ width: "100%" }} />
|
<img src={gifeight} alt="Gif" style={{ width: "100%" }} />
|
||||||
</Box>
|
</Box>
|
||||||
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'} }}>
|
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'} , background:{xs:'green', lg:'white'} }}>
|
||||||
<Typography variant="h4">Remine</Typography>
|
<Typography variant="h4">Remine</Typography>
|
||||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
@ -342,22 +348,21 @@ const HomePage: React.FC = () => {
|
||||||
</Grid>
|
</Grid>
|
||||||
</Grid>
|
</Grid>
|
||||||
</Box>
|
</Box>
|
||||||
{/* <Grid
|
<Grid
|
||||||
container
|
item
|
||||||
|
xs={12}
|
||||||
|
ref={mineRef} // Attach ref here
|
||||||
sx={{
|
sx={{
|
||||||
height: { xl: 1800, lg: 188 },
|
height: "300px",
|
||||||
width: '100%',
|
backgroundImage: `url(${loopgreen})`,
|
||||||
backgroundImage: `url(${newbackgroundtwo})`,
|
marginTop:{lg:20 , xs:0},
|
||||||
|
position: "relative",
|
||||||
backgroundSize: "contain",
|
backgroundSize: "contain",
|
||||||
backgroundPosition: "center",
|
backgroundPosition: "center",
|
||||||
backgroundRepeat: "no-repeat",
|
backgroundRepeat: "no-repeat",
|
||||||
}}
|
}}>
|
||||||
>
|
|
||||||
<Grid item>
|
|
||||||
|
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
</Grid> */}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
|
|
@ -141,22 +141,28 @@ const PartnerWork = () => {
|
||||||
<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">
|
||||||
{[1, 2, 3].map((_, 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
|
||||||
backgroundColor: "gray",
|
backgroundColor: "gray",
|
||||||
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}>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue