Merge pull request 'added a new segment' (#3) from fix/layout into main
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
Reviewed-on: #3 Reviewed-by: Mihir Motiyani <mihir@midastix.com>
This commit is contained in:
commit
b923e5ac44
|
|
@ -3,7 +3,7 @@
|
|||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"src": "loops",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,13 +1,10 @@
|
|||
import React, { useState } from "react";
|
||||
import {
|
||||
AppBar, Toolbar, Typography, Button, IconButton, Menu,
|
||||
MenuItem, Box, Drawer, List, ListItem, ListItemButton,
|
||||
ListItemIcon, ListItemText, Divider
|
||||
AppBar, Toolbar, Typography, Button, IconButton, Box, Drawer, List,
|
||||
ListItem, ListItemButton, ListItemText
|
||||
} from "@mui/material";
|
||||
import MenuIcon from "@mui/icons-material/Menu";
|
||||
import HomeIcon from "@mui/icons-material/Home";
|
||||
import BuildIcon from "@mui/icons-material/Build";
|
||||
import FileDownloadIcon from "@mui/icons-material/FileDownload";
|
||||
import headerlogo from "../components/imageandgif/newlogo.png"
|
||||
|
||||
const Header: React.FC = () => {
|
||||
const [mobileOpen, setMobileOpen] = useState<boolean>(false);
|
||||
|
|
@ -20,7 +17,7 @@ const Header: React.FC = () => {
|
|||
<AppBar
|
||||
position="fixed"
|
||||
sx={{
|
||||
backgroundColor: "#e6e6e6cf",
|
||||
backgroundColor: "#7c77770d",
|
||||
margin: "20px 20px 10px 20px",
|
||||
width: {
|
||||
xs: "91.6vw",
|
||||
|
|
@ -32,10 +29,19 @@ const Header: React.FC = () => {
|
|||
color: "black"
|
||||
}}
|
||||
>
|
||||
<Toolbar>
|
||||
{/* Mobile Menu Button */}
|
||||
<Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
|
||||
{/* Logo in Desktop, Centered in Mobile */}
|
||||
<Box sx={{ display: "flex", alignItems: "center", flexGrow: { xs: 1, md: 0 } }}>
|
||||
<img
|
||||
src={headerlogo}
|
||||
alt="Logo"
|
||||
style={{ height: "40px", cursor: "pointer", width:'190px' }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Mobile Menu Button on the Right */}
|
||||
<IconButton
|
||||
edge="start"
|
||||
edge="end"
|
||||
color="inherit"
|
||||
aria-label="menu"
|
||||
sx={{ display: { xs: "block", md: "none" } }}
|
||||
|
|
@ -44,49 +50,39 @@ const Header: React.FC = () => {
|
|||
<MenuIcon />
|
||||
</IconButton>
|
||||
|
||||
{/* Logo or Title */}
|
||||
<Typography variant="h6" sx={{ flexGrow: 1, textAlign: { xs: "center", md: "left" } }}>
|
||||
My Website
|
||||
</Typography>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<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',
|
||||
padding: "7px 20px",
|
||||
backgroundColor: "#0841adcc",
|
||||
color: "white",
|
||||
"&:hover": { backgroundColor: "darkblue" }
|
||||
}}
|
||||
|
||||
>
|
||||
Contact-Us
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{/* Mobile Drawer Menu */}
|
||||
<Drawer anchor="left" open={mobileOpen} onClose={toggleMobileMenu}>
|
||||
<Drawer anchor="right" open={mobileOpen} onClose={toggleMobileMenu}>
|
||||
<Box sx={{ width: 250 }} role="presentation" onClick={toggleMobileMenu} onKeyDown={toggleMobileMenu}>
|
||||
<List>
|
||||
<ListItem disablePadding>
|
||||
<ListItemButton>
|
||||
|
||||
<ListItemText primary="Home" />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
<ListItem disablePadding>
|
||||
<ListItemButton>
|
||||
|
||||
<ListItemText primary="Services" />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
<ListItem disablePadding>
|
||||
<ListItemButton sx={{ backgroundColor: "blue", color: "white", "&:hover": { backgroundColor: "darkblue" } }}>
|
||||
|
||||
<ListItemText primary="Download" />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import gifeight from "../components/imageandgif/gifeight.gif";
|
|||
import loopgreen from "../components/imageandgif/newloop.png";
|
||||
import PartnerWork from "./ourwork";
|
||||
import Footer from "./footer";
|
||||
import loopgreenback from "../components/imageandgif/loopgreenbackground.png"
|
||||
import loopgreenback from "../components/imageandgif/newloop.png"
|
||||
import OurTeam from "./ourteam";
|
||||
import mobileLogo from "../components/imageandgif/loopsMoblogo.png"
|
||||
import mobileback from "../components/imageandgif/mobileback.png"
|
||||
|
|
@ -23,6 +23,7 @@ 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"
|
||||
import wasteimage from "../components/imageandgif/loopwastemanage.png"
|
||||
|
||||
|
||||
|
||||
|
|
@ -39,7 +40,11 @@ const HomePage: React.FC = () => {
|
|||
const remineRef = useRef<HTMLDivElement>(null);
|
||||
const impactRef = useRef<HTMLDivElement>(null);
|
||||
const reuseRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const items = [
|
||||
"Our mission is to maximize the reuse of nature’s precious resources, fostering a circular economy and driving true sustainability.",
|
||||
"Loop Sustainability extends the life cycle of electronics through advanced technology and smart algorithms, enabling efficient reuse and responsible recycling.",
|
||||
"We collaborate with consumer brands, retailers, recyclers, repair centers, policymakers, and more—all working together to reduce e-waste and drive sustainability.",
|
||||
];
|
||||
// Function to scroll to the ref
|
||||
const scrollToRef = (ref: React.RefObject<HTMLDivElement>) => {
|
||||
if (ref.current) {
|
||||
|
|
@ -69,66 +74,49 @@ const HomePage: React.FC = () => {
|
|||
xs={12}
|
||||
sx={{
|
||||
marginTop: "0px",
|
||||
height: { xs: "190px", lg: "337px" },
|
||||
height: { xs: "190px", lg: "58vh" },
|
||||
width: { lg: "100vw" },
|
||||
backgroundColor: "white",
|
||||
position: "relative",
|
||||
backgroundImage: {
|
||||
xs: `url(${mobileLogo})`, // Mobile background image
|
||||
lg: `url(${logo})`, // Desktop background image
|
||||
},
|
||||
backgroundImage:
|
||||
|
||||
`url(${loopgreenback})`
|
||||
,
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "right center",
|
||||
backgroundPosition: " center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
marginBottom: { xs: "10px", md: "399px" },
|
||||
marginBottom: { xs: "10px", md: "39px" },
|
||||
}}
|
||||
>
|
||||
|
||||
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container spacing={4} justifyContent="center" sx={{ padding: 4 }}>
|
||||
{items.map((text, index) => (
|
||||
<Grid item xs={12} sm={6} md={4} key={index} >
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: { xs: "70%", md: "80%" },
|
||||
left: { xs: "2%", md: "5%" },
|
||||
transform: "translateY(-30%)",
|
||||
height: { xs: "235px", md: "440px" },
|
||||
width: { xs: "150px", md: "220px" },
|
||||
// backgroundColor: "#eee0e0a3",
|
||||
backgroundColor: "white",
|
||||
zIndex: 1,
|
||||
padding: "20px",
|
||||
overflowY: "auto",
|
||||
borderRadius: "8px",
|
||||
display: { xs: "none", md: "block" },
|
||||
p: 3,
|
||||
borderRadius: "12px",
|
||||
backgroundColor: "#7c77770d",
|
||||
textAlign: "left",
|
||||
|
||||
}}
|
||||
>
|
||||
<ul style={{
|
||||
listStyleType: "none",
|
||||
padding: "0",
|
||||
margin: "0",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "10px"
|
||||
}}>
|
||||
<li onClick={() => scrollToRef(mineRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Mine</li>
|
||||
<li onClick={() => scrollToRef(manufactureRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Manufacture</li>
|
||||
<li onClick={() => scrollToRef(assembleRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Assemble</li>
|
||||
<li onClick={() => scrollToRef(useRefBox)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Use</li>
|
||||
<li onClick={() => scrollToRef(reuseRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Reuse</li>
|
||||
<li onClick={() => scrollToRef(repairRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Repair</li>
|
||||
<li onClick={() => scrollToRef(disintegrateRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Disintegrate</li>
|
||||
<li onClick={() => scrollToRef(remineRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Remine</li>
|
||||
<li onClick={() => scrollToRef(impactRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Impact</li>
|
||||
</ul>
|
||||
<Typography variant="body1">{text}</Typography>
|
||||
</Box>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
{/* Grid 2 */}
|
||||
<Box
|
||||
sx={{
|
||||
height: { xl: 1800, lg: 2000 , xs:2500 },
|
||||
height: { xl: 1800, lg: 2000, xs: 2830, sm: 2400 },
|
||||
width: '100%',
|
||||
backgroundImage: { lg: `url(${newbackground})`, xs: `url(${mobileback})` },
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: { lg: "center", xs: "50% 93%" },
|
||||
backgroundPosition: { lg: "center", xs: "50% 87%" },
|
||||
backgroundRepeat: "no-repeat",
|
||||
paddingBottom: { lg: 20, xs: 0 }
|
||||
}}
|
||||
|
|
@ -159,7 +147,7 @@ const HomePage: React.FC = () => {
|
|||
</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>
|
||||
<p>Raw materials are extracted through destructive mining practices, causing habitat loss, soil erosion, and water contamination. </p>
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
|
@ -182,7 +170,7 @@ const HomePage: React.FC = () => {
|
|||
}}>
|
||||
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
|
||||
<Typography variant="h4">Manufacturing</Typography>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
||||
<p>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </p>
|
||||
</Box>
|
||||
<Box sx={{ width: { lg: '50%' } }}>
|
||||
<img src={giftwo} alt="Gif" style={{ width: "100%" }} />
|
||||
|
|
@ -211,7 +199,7 @@ const HomePage: React.FC = () => {
|
|||
</Box>
|
||||
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
|
||||
<Typography variant="h4">Assemble</Typography>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
||||
<p>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </p>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
|
|
@ -235,7 +223,7 @@ const HomePage: React.FC = () => {
|
|||
}}>
|
||||
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
|
||||
<Typography variant="h4">Use</Typography>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
||||
<p>Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.</p>
|
||||
</Box>
|
||||
<Box sx={{ width: { xs: "60%", md: "100%" } }}>
|
||||
<img src={giffour} alt="Gif" style={{ width: "100%" }} />
|
||||
|
|
@ -251,22 +239,22 @@ const HomePage: React.FC = () => {
|
|||
{/* 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" },
|
||||
height: { xs: "442px", lg: "115px" },
|
||||
width: { xs: "100%", lg: "250px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", lg: "column" },
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
textAlign: 'center',
|
||||
textAlign: 'left',
|
||||
marginBottom: { xs: "20px", md: "0" },
|
||||
}}>
|
||||
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'}, background:{xs:'green', lg:'white'} }}>
|
||||
<Box sx={{ width: "100%", paddingLeft: { xs: "8px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
|
||||
<Typography variant="h4">Reuse</Typography>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
||||
<p>We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.</p>
|
||||
</Box>
|
||||
<Box sx={{ width: { xs: "60%", md: "100%" } }}>
|
||||
<Box sx={{ width: { xs: "100%", md: "100%" } }}>
|
||||
<img src={giffive} alt="Gif" style={{ width: "100%" }} />
|
||||
</Box>
|
||||
|
||||
|
|
@ -275,21 +263,21 @@ const HomePage: React.FC = () => {
|
|||
<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" },
|
||||
width: { xs: "87%", lg: "250px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", lg: "column" },
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
textAlign: 'center',
|
||||
textAlign: 'left',
|
||||
marginBottom: { xs: "20px", md: "0" },
|
||||
}}>
|
||||
<Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'}, background:{xs:'green', lg:'white'} }}>
|
||||
<Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, paddingRight: { xs: "2px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
|
||||
<Typography variant="h4">Repair</Typography>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
||||
<p>Loop Sustainability steps in to repair damaged or outdated electronics. Our repair services extend the life of devices, minimizing waste and reducing the need for new products.</p>
|
||||
</Box>
|
||||
<Box sx={{ width: { xs: "60%", md: "100%" } }}>
|
||||
<Box sx={{ width: { xs: "100%", md: "100%" } }}>
|
||||
<img src={gifsix} alt="Gif" style={{ width: "100%" }} />
|
||||
</Box>
|
||||
|
||||
|
|
@ -298,7 +286,7 @@ const HomePage: React.FC = () => {
|
|||
{/* 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" },
|
||||
height: { xs: "600px", lg: "115px" },
|
||||
width: { xs: "92%", lg: "250px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
|
|
@ -306,16 +294,16 @@ const HomePage: React.FC = () => {
|
|||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
textAlign: 'center',
|
||||
textAlign: 'left',
|
||||
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'} }}>
|
||||
<Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
|
||||
<Typography variant="h4">Disintegrate</Typography>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
||||
<p>When electronics can no longer be repaired or reused, we safely disintegrate them into valuable materials, ensuring they are properly processed and recycled.</p>
|
||||
</Box>
|
||||
|
||||
|
||||
|
|
@ -323,7 +311,7 @@ const HomePage: React.FC = () => {
|
|||
</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" },
|
||||
height: { xs: "660px", lg: "115px" },
|
||||
width: { xs: "92%", lg: "250px" },
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
|
|
@ -338,36 +326,42 @@ const HomePage: React.FC = () => {
|
|||
<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'} }}>
|
||||
<Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
|
||||
<Typography variant="h4">Remine</Typography>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
|
||||
<p>We take the disintegrated materials and remines them for precious metals ,turning waste back into usable resources, closing the loop on electronic waste.</p>
|
||||
</Box>
|
||||
|
||||
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
</Box>
|
||||
<Grid
|
||||
item
|
||||
container
|
||||
xs={12}
|
||||
ref={mineRef} // Attach ref here
|
||||
|
||||
sx={{
|
||||
height: "300px",
|
||||
backgroundImage: `url(${loopgreen})`,
|
||||
height: "66 0px",
|
||||
marginTop: { lg: 20, xs: 0 },
|
||||
position: "relative",
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}>
|
||||
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
overflow: "hidden"
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={wasteimage}
|
||||
alt="Waste Image"
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "fill"
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
|
||||
|
||||
|
||||
<PartnerWork />
|
||||
|
||||
<OurTeam />
|
||||
<Footer />
|
||||
</Box>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 550 KiB |
Loading…
Reference in New Issue