diff --git a/package-lock.json b/package-lock.json index 5f59dcc..b0fbc4e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,9 +19,11 @@ "@types/node": "^16.7.13", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", + "framer-motion": "^12.4.2", "react": "^19.0.0", "react-dom": "^19.0.0", "react-scripts": "5.0.1", + "swiper": "^11.2.2", "typescript": "^4.4.2", "web-vitals": "^2.1.0" } @@ -9145,6 +9147,33 @@ "url": "https://github.com/sponsors/rawify" } }, + "node_modules/framer-motion": { + "version": "12.4.2", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.2.tgz", + "integrity": "sha512-pW307cQKjDqEuO1flEoIFf6TkuJRfKr+c7qsHAJhDo4368N/5U8/7WU8J+xhd9+gjmOgJfgp+46evxRRFM39dA==", + "license": "MIT", + "dependencies": { + "motion-dom": "^12.0.0", + "motion-utils": "^12.0.0", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -12367,6 +12396,21 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/motion-dom": { + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.0.0.tgz", + "integrity": "sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg==", + "license": "MIT", + "dependencies": { + "motion-utils": "^12.0.0" + } + }, + "node_modules/motion-utils": { + "version": "12.0.0", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz", + "integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==", + "license": "MIT" + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -16729,6 +16773,25 @@ "node": ">=4" } }, + "node_modules/swiper": { + "version": "11.2.2", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.2.tgz", + "integrity": "sha512-FmAN6zACpVUbd/1prO9xQ9gKo9cc6RE2UKU/z4oXtS8fNyX4sdOW/HHT/e444WucLJs0jeMId6WjdWM2Lrs8zA==", + "funding": [ + { + "type": "patreon", + "url": "https://www.patreon.com/swiperjs" + }, + { + "type": "open_collective", + "url": "http://opencollective.com/swiper" + } + ], + "license": "MIT", + "engines": { + "node": ">= 4.7.0" + } + }, "node_modules/symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", diff --git a/package.json b/package.json index 41958e0..92b48b6 100644 --- a/package.json +++ b/package.json @@ -14,9 +14,11 @@ "@types/node": "^16.7.13", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", + "framer-motion": "^12.4.2", "react": "^19.0.0", "react-dom": "^19.0.0", "react-scripts": "5.0.1", + "swiper": "^11.2.2", "typescript": "^4.4.2", "web-vitals": "^2.1.0" }, 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 a0497aa..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,7 +18,14 @@ 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" + + + const HomePage: React.FC = () => { @@ -62,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", @@ -84,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", @@ -112,40 +120,31 @@ const HomePage: React.FC = () => { - - {/* Grid 2 */} + + {/* Grid 2 */} + - + { alignItems: "center", padding: "10px", textAlign: 'center', - marginBottom: { xs: "20px", md: "0" }, // Add margin bottom for spacing - }} - > - - Gif - - - Mine from nature -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis doloremque architecto eos provident et deserunt temporibus non iusto quis inventore expedita neque

- - - - - - Manufacture -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis doloremque architecto eos provident et deserunt temporibus non iusto

- - - Gif - - - - - - Assemble -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis!

- - - Gif - - - - - {/* Grid 3 */} - - - - Use -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !

- - - Gif - - - - - {/* Grid 4 */} - - - - Reuse -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendisss !

- - - Gif + + Gif + + + Mine from nature +

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. 

+ - + + - - + + - - Repair -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !

- - - Gif - - + textAlign: 'center', + marginBottom: { xs: "20px", md: "0" }, + }}> + + Manufacturing +

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

+ + + Gif + - + + + {/* ROW 3 */} + + + + + Gif + + + Assemble +

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

+ + + + + + + {/* ROW 4 */} + + + + + Use +

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

+ + + Gif + + + + + {/* new2 */} + + + + + {/* newnew */} + + + + Reuse +

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

+ + + Gif + + + + + + + + Repair +

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

+ + + Gif + + + + + {/* newnewnwe */} + + + + Gif + + + Disintegrate +

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

+ - }} - > - - Disintegrate -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !

- - - Gif - - - + + + - - Gif - - - Remine -

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis !

- - - + textAlign: 'center', + marginBottom: { xs: "20px", md: "0" }, + marginTop: { xs: "20px"}, + }}> + + Gif + + + Remine +

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

+ + - {/* Grid 5 */} - + + + + + + + + +