fix/layout #2
|
|
@ -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,6 +18,8 @@ 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"
|
||||
|
|
@ -25,6 +27,7 @@ import newbackgroundtwo from "../components/imageandgif/newbacktwo.png"
|
|||
|
||||
|
||||
|
||||
|
||||
const HomePage: React.FC = () => {
|
||||
// Create refs for each content box
|
||||
const mineRef = useRef<HTMLDivElement>(null);
|
||||
|
|
@ -66,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",
|
||||
|
|
@ -88,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",
|
||||
|
|
@ -122,11 +126,11 @@ const HomePage: React.FC = () => {
|
|||
sx={{
|
||||
height: { xl: 1800, lg: 2000 , xs:2500 },
|
||||
width: '100%',
|
||||
backgroundImage:{lg: `url(${newbackground})`, xs:null},
|
||||
backgroundImage:{lg: `url(${newbackground})`, xs:`url(${mobileback})`},
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "center",
|
||||
backgroundPosition: { lg: "center", xs: "50% 93%" },
|
||||
backgroundRepeat: "no-repeat",
|
||||
paddingBottom: 20
|
||||
paddingBottom: {lg:20,xs:0}
|
||||
}}
|
||||
>
|
||||
<Grid
|
||||
|
|
@ -137,7 +141,7 @@ const HomePage: React.FC = () => {
|
|||
}}
|
||||
>
|
||||
{/* 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={{
|
||||
height: { xs: "495px", lg: "215px" },
|
||||
width: { xs: "80%", lg: "870px" },
|
||||
|
|
@ -159,12 +163,12 @@ const HomePage: React.FC = () => {
|
|||
</Box>
|
||||
</Box>
|
||||
</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 */}
|
||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' } }}></Grid>
|
||||
<Grid item xs={12} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: "flex-start" ,xs:"center" }, alignItems: "center" }}>
|
||||
<Box ref={mineRef} sx={{
|
||||
<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,
|
||||
|
|
@ -188,8 +192,8 @@ const HomePage: React.FC = () => {
|
|||
</Grid>
|
||||
|
||||
{/* ROW 3 */}
|
||||
<Grid item xs={12} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '401px' }, display: "flex", justifyContent: { lg: 'flex-end' ,xs:'center' }, alignItems: "center" }}>
|
||||
<Box ref={mineRef} sx={{
|
||||
<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,
|
||||
|
|
@ -212,12 +216,12 @@ const HomePage: React.FC = () => {
|
|||
|
||||
</Box>
|
||||
</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 */}
|
||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' }}}></Grid>
|
||||
<Grid item xs={12} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: 'flex-start' ,xs:'center' }, alignItems: "center" }}>
|
||||
<Box ref={mineRef} sx={{
|
||||
<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,
|
||||
|
|
@ -240,13 +244,13 @@ const HomePage: React.FC = () => {
|
|||
</Box>
|
||||
</Grid>
|
||||
{/* new2 */}
|
||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' } }}></Grid>
|
||||
<Grid item xs={6} 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 */}
|
||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||||
<Box ref={mineRef} sx={{
|
||||
<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,
|
||||
|
|
@ -258,7 +262,7 @@ const HomePage: React.FC = () => {
|
|||
textAlign: 'center',
|
||||
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>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
||||
</Box>
|
||||
|
|
@ -269,7 +273,7 @@ const HomePage: React.FC = () => {
|
|||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||||
<Box ref={mineRef} sx={{
|
||||
<Box ref={repairRef} sx={{
|
||||
height: { xs: "332px", lg: "115px" },
|
||||
width: { xs: "80%", lg: "250px" },
|
||||
zIndex: 1,
|
||||
|
|
@ -281,7 +285,7 @@ const HomePage: React.FC = () => {
|
|||
textAlign: 'center',
|
||||
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>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
||||
</Box>
|
||||
|
|
@ -293,9 +297,9 @@ const HomePage: React.FC = () => {
|
|||
</Grid>
|
||||
{/* newnewnwe */}
|
||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||||
<Box ref={mineRef} sx={{
|
||||
<Box ref={disintegrateRef} sx={{
|
||||
height: { xs: "332px", lg: "115px" },
|
||||
width: { xs: "80%", lg: "250px" },
|
||||
width: { xs: "92%", lg: "250px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", lg: "column" },
|
||||
|
|
@ -304,11 +308,12 @@ const HomePage: React.FC = () => {
|
|||
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'} }}>
|
||||
<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>
|
||||
|
|
@ -317,9 +322,9 @@ const HomePage: React.FC = () => {
|
|||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
|
||||
<Box ref={mineRef} sx={{
|
||||
<Box ref={remineRef} sx={{
|
||||
height: { xs: "332px", lg: "115px" },
|
||||
width: { xs: "80%", lg: "250px" },
|
||||
width: { xs: "92%", lg: "250px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", lg: "column" },
|
||||
|
|
@ -328,11 +333,12 @@ const HomePage: React.FC = () => {
|
|||
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'} }}>
|
||||
<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>
|
||||
|
|
@ -342,23 +348,22 @@ const HomePage: React.FC = () => {
|
|||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
{/* <Grid
|
||||
container
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
ref={mineRef} // Attach ref here
|
||||
sx={{
|
||||
height: { xl: 1800, lg: 188 },
|
||||
width: '100%',
|
||||
backgroundImage: `url(${newbackgroundtwo})`,
|
||||
height: "300px",
|
||||
backgroundImage: `url(${loopgreen})`,
|
||||
marginTop:{lg:20 , xs:0},
|
||||
position: "relative",
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}
|
||||
>
|
||||
<Grid item>
|
||||
}}>
|
||||
|
||||
</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 }}>
|
||||
Our Work
|
||||
</Typography>
|
||||
<Grid container spacing={3} justifyContent="center">
|
||||
{[1, 2, 3].map((_, 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%",
|
||||
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}>
|
||||
|
|
|
|||
Loading…
Reference in New Issue