From 907c9ee805496d5072e284e064b1516e6d1fa6c6 Mon Sep 17 00:00:00 2001 From: hardik Date: Thu, 13 Feb 2025 13:57:30 +0530 Subject: [PATCH 1/2] added a new segment --- public/manifest.json | 2 +- src/components/header.tsx | 44 ++-- src/components/homepage.tsx | 190 +++++++++--------- .../imageandgif/loopwastemanage.png | Bin 0 -> 562940 bytes 4 files changed, 113 insertions(+), 123 deletions(-) create mode 100644 src/components/imageandgif/loopwastemanage.png diff --git a/public/manifest.json b/public/manifest.json index 080d6c7..94b5524 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -3,7 +3,7 @@ "name": "Create React App Sample", "icons": [ { - "src": "favicon.ico", + "src": "loops", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" }, diff --git a/src/components/header.tsx b/src/components/header.tsx index 537e817..3948687 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -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(false); @@ -20,7 +17,7 @@ const Header: React.FC = () => { { color: "black" }} > - - {/* Mobile Menu Button */} + + {/* Logo in Desktop, Centered in Mobile */} + + Logo + + + {/* Mobile Menu Button on the Right */} { - {/* Logo or Title */} - - My Website - - {/* Desktop Navigation */} - - - {/* Download Button */} + + {/* Mobile Drawer Menu */} - + - - - diff --git a/src/components/homepage.tsx b/src/components/homepage.tsx index 6d41db6..94943e6 100644 --- a/src/components/homepage.tsx +++ b/src/components/homepage.tsx @@ -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(null); const impactRef = useRef(null); const reuseRef = useRef(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) => { if (ref.current) { @@ -69,68 +74,51 @@ 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" }, }} > - -
    -
  • scrollToRef(mineRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Mine
    • -
  • scrollToRef(manufactureRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Manufacture
    • -
  • scrollToRef(assembleRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Assemble
    • -
  • scrollToRef(useRefBox)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Use
    • -
  • scrollToRef(reuseRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Reuse
    • -
  • scrollToRef(repairRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Repair
    • -
  • scrollToRef(disintegrateRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Disintegrate
    • -
  • scrollToRef(remineRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Remine
    • -
  • scrollToRef(impactRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Impact
    • -
- + + + {items.map((text, index) => ( + + + {text} + + + ))} + {/* Grid 2 */} { 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. 

 - + {/* ROW 2 */} - - + + { textAlign: 'center', marginBottom: { xs: "20px", md: "0" }, }}> - + Manufacturing

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

 @@ -192,7 +180,7 @@ const HomePage: React.FC = () => { {/* ROW 3 */} - + { Gif - + Assemble

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

 - + {/* ROW 4 */} - - + + { textAlign: 'center', marginBottom: { xs: "20px", md: "0" }, }}> - + Use

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

 @@ -244,29 +232,29 @@ const HomePage: React.FC = () => { {/* new2 */} - + {/* newnew */} - + Reuse -

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

+

We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.

 - + Gif @@ -275,21 +263,21 @@ const HomePage: React.FC = () => { - + Repair -

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

+

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.

 - + Gif @@ -298,7 +286,7 @@ const HomePage: React.FC = () => { {/* newnewnwe */} { justifyContent: "center", alignItems: "center", padding: "10px", - textAlign: 'center', + textAlign: 'left', marginBottom: { xs: "20px", md: "0" }, - marginTop: { xs: "20px"}, + marginTop: { xs: "20px" }, }}> Gif - + Disintegrate -

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

+

When electronics can no longer be repaired or reused, we safely disintegrate them into valuable materials, ensuring they are properly processed and recycled.

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

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

+

We take the disintegrated materials and remines them for precious metals ,turning waste back into usable resources, closing the loop on electronic waste.

 - + + - + height: "660px", + marginTop: { lg: 20, xs: 0 }, + display: "flex", + justifyContent: "center", + alignItems: "center", + overflow: "hidden" + }} + > + Waste Image - - - - +