first commit
This commit is contained in:
hardik
parent
52e2d1c0f7
commit
db696178cc
File diff suppressed because it is too large
Load Diff
|
|
@ -3,6 +3,10 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.0",
|
||||
"@mui/icons-material": "^6.4.2",
|
||||
"@mui/material": "^6.4.2",
|
||||
"@testing-library/jest-dom": "^5.14.1",
|
||||
"@testing-library/react": "^13.0.0",
|
||||
"@testing-library/user-event": "^13.2.1",
|
||||
|
|
|
|||
25
src/App.tsx
25
src/App.tsx
|
|
@ -1,25 +1,18 @@
|
|||
import React from 'react';
|
||||
import logo from './logo.svg';
|
||||
import './App.css';
|
||||
import Header from './components/header';
|
||||
import HomePage from './components/homepage';
|
||||
import { Box } from '@mui/material';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src={logo} className="App-logo" alt="logo" />
|
||||
<p>
|
||||
Edit <code>src/App.tsx</code> and save to reload.
|
||||
</p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://reactjs.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn React
|
||||
</a>
|
||||
</header>
|
||||
</div>
|
||||
<Box>
|
||||
|
||||
<Header />
|
||||
<HomePage />
|
||||
</Box>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,93 @@
|
|||
import React from "react";
|
||||
import { Box, Container, Grid, Typography, Link, IconButton, Divider } from "@mui/material";
|
||||
import { LocationOn, Email, Phone } from "@mui/icons-material";
|
||||
import InstagramIcon from "@mui/icons-material/Instagram";
|
||||
import TwitterIcon from "@mui/icons-material/Twitter";
|
||||
import FacebookIcon from "@mui/icons-material/Facebook";
|
||||
import YouTubeIcon from "@mui/icons-material/YouTube";
|
||||
|
||||
const Footer: React.FC = () => {
|
||||
return (
|
||||
<Box component="footer" sx={{ bgcolor: "#f7f7f7", py: 6 }}>
|
||||
<Container maxWidth="lg">
|
||||
<Grid container spacing={4}>
|
||||
{/* Loop Sustainability */}
|
||||
<Grid item xs={12} md={4}>
|
||||
<Typography variant="h6" fontWeight="bold">
|
||||
Loop Sustainability
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ mt: 1, color: "gray" }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
|
||||
</Typography>
|
||||
</Grid>
|
||||
|
||||
{/* Get in Touch */}
|
||||
<Grid item xs={12} md={4}>
|
||||
<Typography variant="h6" fontWeight="bold">
|
||||
Get in Touch
|
||||
</Typography>
|
||||
<Box display="flex" alignItems="center" sx={{ mt: 1 }}>
|
||||
<LocationOn color="primary" />
|
||||
<Typography variant="body2" sx={{ ml: 1 }}>8819 Ohio St. South Gate, CA 90280</Typography>
|
||||
</Box>
|
||||
<Box display="flex" alignItems="center" sx={{ mt: 1 }}>
|
||||
<Email color="primary" />
|
||||
<Typography variant="body2" sx={{ ml: 1 }}>Ourstudio@hello.com</Typography>
|
||||
</Box>
|
||||
<Box display="flex" alignItems="center" sx={{ mt: 1 }}>
|
||||
<Phone color="primary" />
|
||||
<Typography variant="body2" sx={{ ml: 1 }}>+1 386-688-3295</Typography>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
{/* Company Links */}
|
||||
<Grid item xs={12} md={4}>
|
||||
<Typography variant="h6" fontWeight="bold">
|
||||
Company
|
||||
</Typography>
|
||||
<Box sx={{ mt: 1 }}>
|
||||
{["Service", "Features", "Our Team", "Portfolio", "Blog", "Contact Us"].map((text) => (
|
||||
<Link href="#" key={text} variant="body2" display="block" sx={{ color: "gray", mt: 0.5, textDecoration: "none", "&:hover": { textDecoration: "underline" } }}>
|
||||
{text}
|
||||
</Link>
|
||||
))}
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Social Media Icons */}
|
||||
<Box display="flex" justifyContent="flex-end" sx={{ mt: 4 }}>
|
||||
<IconButton color="default">
|
||||
<InstagramIcon />
|
||||
</IconButton>
|
||||
<IconButton color="default">
|
||||
<TwitterIcon />
|
||||
</IconButton>
|
||||
<IconButton color="default">
|
||||
<FacebookIcon />
|
||||
</IconButton>
|
||||
<IconButton color="default">
|
||||
<YouTubeIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
{/* Footer Links */}
|
||||
<Divider sx={{ my: 4 }} />
|
||||
<Box textAlign="center">
|
||||
<Box display="flex" justifyContent="center" gap={3}>
|
||||
{["Privacy Policy", "Terms of Use", "Sales and Refunds", "Legal", "Site Map"].map((text) => (
|
||||
<Link href="#" key={text} variant="body2" sx={{ color: "gray", textDecoration: "none", "&:hover": { textDecoration: "underline" } }}>
|
||||
{text}
|
||||
</Link>
|
||||
))}
|
||||
</Box>
|
||||
<Typography variant="body2" sx={{ mt: 2, color: "gray" }}>
|
||||
© 2021 All Rights Reserved
|
||||
</Typography>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
import React, { useState } from "react";
|
||||
import {
|
||||
AppBar, Toolbar, Typography, Button, IconButton, Menu,
|
||||
MenuItem, Box, Drawer, List, ListItem, ListItemButton,
|
||||
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";
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
return (
|
||||
<AppBar
|
||||
position="fixed"
|
||||
sx={{
|
||||
backgroundColor: "#eee0e0a3",
|
||||
padding: "10px 20px" ,
|
||||
margin: "10px 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
|
||||
},
|
||||
color:'black'
|
||||
|
||||
}}>
|
||||
<Toolbar>
|
||||
{/* Mobile Menu Button */}
|
||||
<IconButton
|
||||
edge="start"
|
||||
color="inherit"
|
||||
aria-label="menu"
|
||||
sx={{ display: { xs: "block", md: "none", } }}
|
||||
onClick={toggleMobileMenu}
|
||||
>
|
||||
<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: 2 }}>
|
||||
<Button color="inherit">Home</Button>
|
||||
|
||||
{/* Dropdown Menu */}
|
||||
<Button color="inherit" endIcon={<ExpandMoreIcon />} onClick={handleMenuOpen}>
|
||||
About
|
||||
</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>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Box>
|
||||
</Drawer>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
|
|
@ -0,0 +1,411 @@
|
|||
import React, { useRef } from "react";
|
||||
import { Box, Grid, Typography } from "@mui/material";
|
||||
import logo from "../loopslogo2.png";
|
||||
import backone from "../components/imageandgif/backgroundone.png";
|
||||
import backthree from "../components/imageandgif/backgroundthree.png";
|
||||
import backfour from "../components/imageandgif/backgroundfour.png";
|
||||
import backfive from "../components/imageandgif/backgroundfive.png";
|
||||
import backsix from "../components/imageandgif/backgroundsix.png";
|
||||
import gifone from "../components/imageandgif/gifone.gif"
|
||||
import giftwo from "../components/imageandgif/giftwo.gif"
|
||||
import gifthree from "../components/imageandgif/gifthree.gif"
|
||||
import giffour from "../components/imageandgif/giffour.gif"
|
||||
import giffive from "../components/imageandgif/giffive.gif"
|
||||
import gifsix from "../components/imageandgif/gifsix.gif"
|
||||
import gifseven from "../components/imageandgif/gifseven.gif"
|
||||
import gifeight from "../components/imageandgif/gifeight.gif"
|
||||
import loopgreen from "../components/imageandgif/newloop.png"
|
||||
import PartnerWork from "./ourwork";
|
||||
import Footer from "./footer";
|
||||
|
||||
const HomePage: React.FC = () => {
|
||||
// Create refs for each content box
|
||||
const mineRef = useRef<HTMLDivElement>(null);
|
||||
const manufactureRef = useRef<HTMLDivElement>(null);
|
||||
const assembleRef = useRef<HTMLDivElement>(null);
|
||||
const useRefBox = useRef<HTMLDivElement>(null);
|
||||
const repairRef = useRef<HTMLDivElement>(null);
|
||||
const disintegrateRef = useRef<HTMLDivElement>(null);
|
||||
const remineRef = useRef<HTMLDivElement>(null);
|
||||
const impactRef = useRef<HTMLDivElement>(null);
|
||||
const reuseRef = useRef<HTMLDivElement>(null);
|
||||
// Function to scroll to the ref
|
||||
const scrollToRef = (ref: React.RefObject<HTMLDivElement>) => {
|
||||
if (ref.current) {
|
||||
ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Grid container sx={{ position: "relative", marginTop: '119px' }}>
|
||||
{/* Grid 1 */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
sx={{
|
||||
marginTop: "0px",
|
||||
height: "300px",
|
||||
backgroundColor: "white",
|
||||
position: "relative",
|
||||
backgroundImage: `url(${logo})`,
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "right center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "80%",
|
||||
left: "5%",
|
||||
transform: "translateY(-30%)",
|
||||
height: "440px",
|
||||
width: "220px",
|
||||
backgroundColor: "#eee0e0a3",
|
||||
zIndex: 1,
|
||||
padding: "20px",
|
||||
overflowY: "auto",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
|
||||
sx={{
|
||||
height: "400px",
|
||||
backgroundColor: "white",
|
||||
position: "relative",
|
||||
backgroundImage: `url(${backone})`,
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}>
|
||||
<Box
|
||||
ref={mineRef} // Attach ref here
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "80%",
|
||||
right: "3%",
|
||||
transform: "translateY(-50%)",
|
||||
height: "400px",
|
||||
width: "630px",
|
||||
backgroundColor: "white",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: "70%" }}>
|
||||
<img src={gifone} alt="Gif" style={{ width: "100%", height: "auto" }} />
|
||||
</Box>
|
||||
<Box sx={{ width: "70%", paddingLeft: "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, dolorum ea consectetur repudiandae iste. Aliquid, aspernatur in!</p>
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
{/* Grid 3 */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
|
||||
sx={{
|
||||
height: "400px",
|
||||
backgroundColor: "white",
|
||||
position: "relative",
|
||||
backgroundImage: `url(${backone})`,
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "50.5% 50%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
|
||||
}}>
|
||||
<Box
|
||||
ref={manufactureRef} // Attach ref here
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "73%",
|
||||
left: "2%",
|
||||
transform: "translateY(-50%)",
|
||||
height: "400px",
|
||||
width: "630px",
|
||||
backgroundColor: "white",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: "70%", paddingLeft: "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 quis inventore expedita neque, dolorum ea consectetur repudiandae iste. Aliquid, aspernatur in!</p>
|
||||
</Box>
|
||||
<Box sx={{ width: "70%" }}>
|
||||
<img src={giftwo} alt="Gif" style={{ width: "100%", height: "auto" }} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
{/* Grid 4 */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
|
||||
sx={{
|
||||
height: "308px",
|
||||
backgroundColor: "white",
|
||||
position: "relative",
|
||||
backgroundImage: `url(${backthree})`,
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "61.2% 50%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
|
||||
}}>
|
||||
<Box
|
||||
ref={assembleRef}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "-12%",
|
||||
right: "5%",
|
||||
transform: "translateY(-50%)",
|
||||
height: "167px",
|
||||
width: "534px",
|
||||
backgroundColor: "white",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: "70%", paddingLeft: "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: "100%", height: "auto" }} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
{/* Grid 5 */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
sx={{
|
||||
height: "408px",
|
||||
backgroundColor: "white",
|
||||
position: "relative",
|
||||
backgroundImage: `url(${backfour})`,
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "58% 50%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
|
||||
}}>
|
||||
<Box
|
||||
ref={useRefBox}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "10%",
|
||||
left: "8%",
|
||||
transform: "translateY(-50%)",
|
||||
height: "167px",
|
||||
width: "523px",
|
||||
backgroundColor: "white",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
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: "100%", height: "auto" }} />
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
ref={reuseRef}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "60%",
|
||||
left: "7%",
|
||||
transform: "translateY(-23%)",
|
||||
height: "167px",
|
||||
width: "388px",
|
||||
backgroundColor: "white",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
flexDirection: 'column',
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: "80%", paddingLeft: "10px" }}>
|
||||
<Typography variant="h4">Reuse</Typography>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendisss !</p>
|
||||
</Box>
|
||||
<Box sx={{ width: "80%" }}>
|
||||
<img src={gifsix} alt="Gif" style={{ width: "100%", height: "100%" }} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
{/* Grid 6 */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
|
||||
sx={{
|
||||
height: "400px",
|
||||
position: "relative",
|
||||
backgroundImage: `url(${backfive})`,
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "63% 50%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
|
||||
}}>
|
||||
<Box
|
||||
ref={repairRef}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "12%",
|
||||
left: "39%",
|
||||
transform: "translateY(-23%)",
|
||||
height: "167px",
|
||||
width: "390px",
|
||||
backgroundColor: "white",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: "100%", paddingLeft: "10px" }}>
|
||||
<Typography variant="h4">Repair</Typography>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
|
||||
</Box>
|
||||
<Box sx={{ width: "80%" }}>
|
||||
<img src={giffive} alt="Gif" style={{ width: "100%", height: "100%" }} />
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
ref={disintegrateRef}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "70%",
|
||||
left: "22%",
|
||||
transform: "translateY(-23%)",
|
||||
height: "167px",
|
||||
width: "409px",
|
||||
backgroundColor: "white",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: "70%", paddingLeft: "10px" }}>
|
||||
<Typography variant="h4">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>
|
||||
</Grid>
|
||||
{/* grid */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
// Attach ref here
|
||||
sx={{
|
||||
height: "285px",
|
||||
position: "relative",
|
||||
backgroundImage: `url(${backsix})`,
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "56% 50%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
|
||||
}}>
|
||||
<Box
|
||||
ref={remineRef}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "44%",
|
||||
left: "56%",
|
||||
transform: "translateY(-23%)",
|
||||
height: "167px",
|
||||
width: "309px",
|
||||
backgroundColor: "white",
|
||||
zIndex: 1,
|
||||
display: "flex",
|
||||
justifyContent: "flex-start",
|
||||
alignItems: "center",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: "70%" }}>
|
||||
<img src={gifeight} alt="Gif" style={{ width: "100%", height: "auto" }} />
|
||||
</Box>
|
||||
<Box sx={{ width: "70%", paddingLeft: "10px" }}>
|
||||
<Typography variant="h4">Remine</Typography>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !</p>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
ref={mineRef} // Attach ref here
|
||||
sx={{
|
||||
height: "300px",
|
||||
backgroundImage: `url(${loopgreen})`,
|
||||
|
||||
position: "relative",
|
||||
backgroundSize: "contain",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}>
|
||||
|
||||
</Grid>
|
||||
</Grid>
|
||||
<PartnerWork/>
|
||||
<Footer/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 353 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 398 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 480 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 462 KiB |
|
|
@ -0,0 +1,130 @@
|
|||
import React from "react";
|
||||
import { Box, Card, CardContent, CardMedia, Typography, Button, Grid } from "@mui/material";
|
||||
|
||||
const data = [
|
||||
{ img: "https://s3-alpha-sig.figma.com/img/8e1a/c73a/f4e18134521c4a2ef1c70e0ba02fa636?Expires=1739750400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=iKYXVc~k5~LoiM0ep167AJSywxHpPueTEeheiHfxA-TT8SrzhLb0CZIR08zl9nMDz4gBOqlnKavcTEs~h3tu9gRAyIDMIgcFHIeFQ6IBSoeHabuJxmyP0qcdnWXNYJXze0oO8B~VDFHG0lOagJW~fnb8j8gB2W7M4oL2QPPQFsY3oFzEKW3Gydq7ijohnCXdQP5CPgJ2MPhMFQ59DDQsxv5YihKByOgVx3boAx1ABL05w25ab0DFrcPmSgx93rHzikBmmPNVoiLWW6-rYijbFaxZ~2wEbK4zwGZNtIYw~YGR9EG~h595FJDl1XeCaoMWVJFkfqqHcYDD2-1fLu3JFA__", title: "Lorem Ipsum Heading" },
|
||||
{ img: "https://s3-alpha-sig.figma.com/img/7cf1/0d68/a23d760a5c95fc2a5ab5fb4e6e59deec?Expires=1739750400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=LJgcQKDXC323lViIWgemZBwZ2jUeEQY3t~y9XKfH3Fpg3njl0njNtFQFMCiwEjwXxS4Fl711FZGY-f-qf~m7pn60FtcOLNyigwNzabHL-a7AIg9Y0aivbsRyy-Lpe-HsV33-QpPENtci8SWvTZrOQkZ0lRIiwmybKiLv3twuexnx-jlGvUKsdKuX8WxT0jYxIfQcn93FFQaaHKyHH2ZlgwTj~~R4MJO8-K0oO-JX7EVTlLwK3V2~-WUS400GiThR4~-iqmCPVnvoUI2uHW29BpZFV48wfCcreOJVG3AKbQXlSWe23HWzprUWqiGHDlDOKlkfeJEErDMqCYvqnKPxmQ__", title: "Lorem Ipsum Heading" },
|
||||
{ img: "https://s3-alpha-sig.figma.com/img/0db3/dd53/bfa76ce7f4e1b5e5b7e0463be4d5e711?Expires=1739750400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=KQYig8GD7A0zTsU97U5zKmCKYWBLOlKelMR44YmRvfw0jzdZITBnCxM9RawvrjuqN5lsZtXh1elIbqDDIo8xUli1f6uOSmtvDr~3Oq5ba1oAIIzrDc9V2iGXWGi03gGKWWgrtje4Q0pXidnMTv3J3RueowzABpnH3DqCHicpzWIqxaJ5z0PNfJxFTPkxfkW0F6A9Uzj76Vk4YnGZCr7bQGuRwP1z30pqxJwCMNMMcIVA1yGO2VdNLXxJMCit4Wf5wa23fCyal5evfpTqxnw9Tz3CUzLu3dac~daiHIuzjHRIB5IVT7-IIcej~ghxDWdkmzVPTsVHxQNiZrVtIn9ZbQ__", title: "Lorem Ipsum Heading" },
|
||||
];
|
||||
|
||||
const workImages = [
|
||||
"https://s3-alpha-sig.figma.com/img/0d43/e78a/801b2f3112a2e247f745e336fd85727d?Expires=1739750400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=eWOGZBjo6HQJPPwvms3qsYK7Yz6AZiD6GcpbTy11-dEJ4ITDWXMO5HRKMwJVsireXkUCym2WOtEx-7SdfYfyafODp1Ll6qOUc2-gXtllO7r75pIbvj74BeEVYb4hji8oeNaveAMQEpYGtNNOAtjGjfqgGtqw~E~6jiJ14z4ZArE6kcxUGbYO7GDlZDnK9Jg8eeCg56quRknbEPmtePG5ZdKBiJ53tXZppNvvPWffJ8v~hYwiNhNH1FiOnnLLmHOUKkeOV8U7evEhPmQJMI6z5YVT2bH7mZwqD4tFrvRN4m9MXencEf6zA8F7lhYCut-7MbwK9r9PFBq70AlTmDvpJw__",
|
||||
"https://s3-alpha-sig.figma.com/img/f819/9a31/d651da4bd8aa1a3df75c44d2d9664976?Expires=1739750400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=rr-gB6wrG5p5-uMq-oOxG4S~JaGEva8FpJk7YTQpH4XR1P-ULdY70EfAmaYx1ULeLY3LQQP1sNpVoWfAITdhrgBJIB6L3R1CJT~9rCvl8AMOk0VqO7msbcjAQdV1toRRy6ec3VYMVtf672aGma-ucsAxsjmuY9UyL64MMCzNjjJAJRkVvB5OpRzQReOreWGgAhBXslCtfq~qOnIIrHfwTHREyitxtknlN-CAzilzoFwcF5hUkFUHd8DGNwITU3LFYkFBmclmTWTOhuLO5G2yeDEz2pWFIBCwAKyZ8RoS0y-ujmyG6Sfp4x2dkzz17inS0CkZad0fJMTQzzDG1xVXTQ__",
|
||||
"https://s3-alpha-sig.figma.com/img/5ac7/e708/3546a709a7a689bb01b317bf3052d646?Expires=1739750400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=X50K4TlrAawstut~urwB~VbLQNeSAEJh5ZzJ9s3rijY-~s2xe8ydeDEoo4ahfGzCAV-7oMd5QGl~mFpvzC-BHxMfPRENe5hWoWC5QVFna7yt1o~mj3eh1VXDWvbD4ESC1IszZOy~-m5NdOYkXqFPvnpwG1wnwg9DF1WpXRJAMX79DvftxBNURciSScyiySSdi9-7aiMwh9Kr9jYaFdOzP1YjupnmebXbiBa4A5JggubAgG0ysJtLju3AxZMdfA-2Gef8L5LDEcnBfLNcyAlc2ZoW5aO6iWSZzS3nHb0AxcIA~BjZvoUjX0htazGTtu-PGoKWQ4wCUIhvvnEJLusvMQ__",
|
||||
"https://s3-alpha-sig.figma.com/img/2b3c/e165/b717d5a80e0f35b7422343ef37fa73eb?Expires=1739750400&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=YgPY40uIT20P0C9JDcCBJeLLAtQU1HTvgO2EmlA3yWVHKcaOIA5UNmFYcxHF5Je5s8nRl9ReC5f2Vh5LNvAG0Q86gV6OTt3JJwgTixaR6YNFBvYeJY5qZlchheys92XgMkvDntrzWQ-dRNK72fDBbPjR8tR31XBt6lGbjoj0HySI9lKXg5x9yF0y~hqC7qtkTfwYJlHHScFXaQnbicMzKZUjTMa5BHwlmGOSG6IFHhmovKJKAZtW5BY0xWiEPXnq19XDnvSdLf3OY-tpG-itRPfA02ztThrqdBv5XWQpCQN4CWn4qNZRdnEYB8BsSKFXKVocAPnqKNziTXDDJvdVgQ__",
|
||||
];
|
||||
|
||||
const PartnerWork = () => {
|
||||
return (
|
||||
<Box sx={{ textAlign: "center", padding: "80px 10%" }}>
|
||||
{/* Why Partner with Us? Section */}
|
||||
<Typography variant="h4" gutterBottom>
|
||||
Why Partner with Us?
|
||||
</Typography>
|
||||
<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.1)", // General shadow
|
||||
borderRadius: 4,
|
||||
p: 2,
|
||||
background: "linear-gradient(to bottom, #ffffff, #fff5e6)",
|
||||
overflow: "visible",
|
||||
border: "1px solid rgba(0, 0, 0, 0.1)", // Light border around the card
|
||||
borderTop: "none", // Remove top border if you want only edges
|
||||
borderBottom: "none", // Remove bottom border if you want only edges
|
||||
"&:after": {
|
||||
content: '""',
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: "10px", // Height of the shadow effect
|
||||
background: "rgba(0, 0, 0, 0.1)", // Shadow color
|
||||
borderRadius: "0 0 4px 4px", // Match the card's border radius
|
||||
zIndex: -1, // Place it behind the card
|
||||
},
|
||||
}}
|
||||
>
|
||||
<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 */}
|
||||
<Typography variant="h4" sx={{ mt: 10, mb: 6 }}>
|
||||
Our Work
|
||||
</Typography>
|
||||
<Grid container spacing={3} justifyContent="center">
|
||||
{workImages.map((img, index) => (
|
||||
<Grid item key={index}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 140,
|
||||
height: 140,
|
||||
borderRadius: "50%",
|
||||
backgroundImage: `url(${img})`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
boxShadow: 3,
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
{/* Call to Action Section */}
|
||||
<Grid container spacing={4} justifyContent="center" sx={{ mt: 8 }}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Box sx={{ p: 3, border: "1px solid #ddd", borderRadius: 3, boxShadow: 2 }}>
|
||||
<Typography variant="body2" sx={{ fontSize: "1rem" }}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</Typography>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
fontSize: "1rem",
|
||||
borderRadius: 3,
|
||||
py: 2,
|
||||
backgroundColor: "#000",
|
||||
color: "#fff",
|
||||
'&:hover': { backgroundColor: "#333" },
|
||||
}}
|
||||
>
|
||||
Explore our projects →
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default PartnerWork;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Loading…
Reference in New Issue