diff --git a/public/index.html b/public/index.html index dff3868..4db918f 100644 --- a/public/index.html +++ b/public/index.html @@ -2,42 +2,29 @@ - + - + - - - - - Loop Sustainability + + + + + Loop Sustainability - Urban Recycling
- diff --git a/src/components/imageandgif/loopsLogo.png b/public/loopsLogo.png similarity index 100% rename from src/components/imageandgif/loopsLogo.png rename to public/loopsLogo.png diff --git a/src/components/header.tsx b/src/components/header.tsx index 417d9df..537e817 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -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); const [mobileOpen, setMobileOpen] = useState(false); - const handleMenuOpen = (event: React.MouseEvent) => { - setAnchorEl(event.currentTarget); - }; - - const handleMenuClose = () => { - setAnchorEl(null); - }; - const toggleMobileMenu = () => { setMobileOpen(!mobileOpen); }; @@ -33,26 +20,25 @@ const Header: React.FC = () => { + xs: "91.6vw", + sm: "95.5vw", + md: "91.6vw", + lg: "96.8vw", + xl: "96.4vw" + }, + color: "black" + }} + > {/* Mobile Menu Button */} @@ -64,67 +50,44 @@ const Header: React.FC = () => { {/* Desktop Navigation */} - + - - {/* Dropdown Menu */} - + + {/* Download Button */} + - - - - {/* About Dropdown Menu */} - - - About Us - - - About CEO - - - Team - - - {/* Mobile Drawer Menu */} - + - - + - - - - - - - - - - - - - - - - - - + + + diff --git a/src/components/homepage.tsx b/src/components/homepage.tsx index 5379fd4..6d41db6 100644 --- a/src/components/homepage.tsx +++ b/src/components/homepage.tsx @@ -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(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} }} > { }} > {/* ROW 1 */} - + { - + {/* ROW 2 */} - - - + + { {/* ROW 3 */} - - + { - + {/* ROW 4 */} - - - + + { {/* new2 */} - + - + {/* newnew */} - - + { textAlign: 'center', marginBottom: { xs: "20px", md: "0" }, }}> - + Reuse

Lorem Ipsum is simply dummy text of the printing and typesetting industry...

 @@ -269,7 +273,7 @@ const HomePage: React.FC = () => { - { textAlign: 'center', marginBottom: { xs: "20px", md: "0" }, }}> - + Repair

Lorem Ipsum is simply dummy text of the printing and typesetting industry...

 @@ -293,9 +297,9 @@ const HomePage: React.FC = () => { {/* newnewnwe */} - { padding: "10px", textAlign: 'center', marginBottom: { xs: "20px", md: "0" }, + marginTop: { xs: "20px"}, }}> Gif - + Disintegrate

Lorem Ipsum is simply dummy text of the printing and typesetting industry...

 @@ -317,9 +322,9 @@ const HomePage: React.FC = () => { - { padding: "10px", textAlign: 'center', marginBottom: { xs: "20px", md: "0" }, + marginTop: { xs: "20px"}, }}> Gif - + Remine

Lorem Ipsum is simply dummy text of the printing and typesetting industry...

 @@ -342,22 +348,21 @@ const HomePage: React.FC = () => { - {/* - + }}> - - - */} + diff --git a/src/components/imageandgif/mobileback.png b/src/components/imageandgif/mobileback.png new file mode 100644 index 0000000..56edbaf Binary files /dev/null and b/src/components/imageandgif/mobileback.png differ diff --git a/src/components/imageandgif/newlogo.png b/src/components/imageandgif/newlogo.png new file mode 100644 index 0000000..aaf00a8 Binary files /dev/null and b/src/components/imageandgif/newlogo.png differ diff --git a/src/components/ourwork.tsx b/src/components/ourwork.tsx index bdb56f0..9114521 100644 --- a/src/components/ourwork.tsx +++ b/src/components/ourwork.tsx @@ -141,22 +141,28 @@ const PartnerWork = () => { Our Work - - {[1, 2, 3].map((_, index) => ( + + {workImages.map((image, index) => ( ))} + + {/* Call to Action Section */}