import React, { useRef } from "react";
import { Box, Grid, Typography } from "@mui/material";
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";
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";
import loopgreenback from "../components/imageandgif/lsbg.png"
import OurTeam from "./ourteam";
import mobileLogo from "../components/imageandgif/loopsMoblogo.png"
import mobileback from "../components/imageandgif/mobileback.png"
import { useMediaQuery, useTheme } from "@mui/material";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import newbackground from "../components/imageandgif/full.png"
import sustainability from "../components/imageandgif/Untitled-2.png"
import wasteimage from "../components/imageandgif/loopwastemanage.png"
import WhyChooseUs from "./whyus";
import WasteImageSection from "./wastemanagement";
import loopgif from "../components/imageandgif/loop hero new (1).gif"
import gifsevenm from "../components/imageandgif/disintegrate mobile (2).gif";
import gifeightm from "../components/imageandgif/reminemobile.gif";
import giffivem from "../components/imageandgif/repairm.gif";
import gifsixm from "../components/imageandgif/newusenewuse.gif";
import gifonem from "../components/imageandgif/mine mobile.gif";



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);
    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.",
    ];
    // const theme = useTheme();
    // const isMobile = useMediaQuery(theme.breakpoints.down("sm"));

    // Function to scroll to the ref
    const scrollToRef = (ref: React.RefObject<HTMLDivElement>) => {
        if (ref.current) {
            ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
        }
    };

    const theme = createTheme({
        breakpoints: {
            values: {
                xs: 0,     // Default
                sm: 600,   // Default
                md: 1000,   // Default
                lg: 1400,  // Default
                xl: 1600,  // Default

            },
        },
        typography: {
            fontFamily: "SF Pro Regular, Arial, sans-serif",
            h4: {
                color: "#333333",
            },
            body2: {
                color: "#4D4D4D"
            }
        },

    });

    return (
        <ThemeProvider theme={theme}>
            <Box>
                <Grid container sx={{ position: "relative", marginTop: { lg: '79px', xs: '65px' } }}>
                    {/* Grid 1 */}
                    <Grid
                        item
                        xs={12}
                        sx={{
                            marginTop: "0px",
                            height: { xs: "190px", lg: "100px", sm: "300px", md: '400px' },
                            width: { lg: "100vw" },
                            backgroundColor: "white",
                            position: "relative",
                            paddingTop: { xs: '50px', lg: '5px' },
                            marginBottom: { xs: "10px", md: "39px", lg: '60px' },
                        }}
                    >
                        <img src={loopgif} alt="Gif" style={{ width: "100%" }} />

                    </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={{
                                    p: 3,
                                    borderRadius: "12px",
                                    backgroundColor: "#7c77770d",
                                    textAlign: "center",
                                    color: '#333333',
                                    height: '107px',
                                    fontSize: { xs: '12px', sm: '16px' },
                                    fontFamily: "SF Pro Regular, Arial, sans-serif",
                                }}
                            >
                                <Typography variant="body1">{text}</Typography>
                            </Box>
                        </Grid>
                    ))}
                </Grid>
                {/* Grid 2 */}
                <Box
                    sx={{
                        height: { xl: 1800, lg: 2000, xs: 2729, sm: 3630, md: 2790 },
                        width: '100%',
                        backgroundImage: { lg: `url(${newbackground})`, xs: null },
                        backgroundSize: "contain",
                        backgroundPosition: { lg: "center" },
                        backgroundRepeat: "no-repeat",
                        paddingBottom: { lg: 20, xs: 0 }
                    }}
                >

                    <Grid
                        container

                        sx={{

                            width: '100%',
                        }}
                    >
                        {/* <Grid item xs={6} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "200px", lg: '221px' }, display: { xs: 'none', md: 'none', sm: 'block', lg: 'block' } }}></Grid>

                        <Grid item xs={6} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "200px", lg: '221px' }, display: { xs: 'none', md: 'none', sm: 'block', lg: 'block' } }}></Grid> */}

                        {/* ROW 1 */}
                        <Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '358px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
                            <Box ref={mineRef} sx={{
                                height: { xs: "70%", lg: "215px" },
                                width: { xs: "83%", lg: "870px" },
                                zIndex: 1,
                                display: "flex",
                                flexDirection: { xs: "column", lg: "row" },
                                justifyContent: "center",
                                alignItems: "center",
                                padding: "10px",
                                textAlign: 'center',
                                marginBottom: { xs: "20px", md: "0" },

                            }}>
                                <Box sx={{ width: { xs: "60%", md: "70%" } }}>
                                    <img
                                        src={window.innerWidth <= 1400 ? gifone : gifonem}
                                        alt="Gif"
                                        style={{ width: "91%" }}
                                    />

                                </Box>
                                <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
                                    <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Mine from nature</Typography>
                                    <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >Raw materials are extracted through destructive mining practices, causing habitat loss, soil erosion, and water contamination. </Typography>
                                </Box>
                            </Box>
                        </Grid>
                        <Grid item xs={6} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', md: 'none', sm: 'block', lg: 'block' } }}></Grid>

                        {/* ROW 2 */}
                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', md: 'none', lg: 'block' } }}></Grid>
                        <Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px', }, display: "flex", justifyContent: { lg: "flex-start", xs: "center" }, alignItems: "center" }}>
                            <Box ref={manufactureRef} sx={{
                                height: { xs: "472px", lg: "215px" },
                                width: { xs: "80%", lg: "552px" },
                                zIndex: 1,
                                display: "flex",
                                flexDirection: { xs: "column-reverse", lg: "row" },
                                justifyContent: "center",
                                alignItems: "center",
                                padding: "10px",
                                textAlign: 'center',
                                marginBottom: { xs: "20px", md: "0" },
                            }}>
                                <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
                                    <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Manufacturing</Typography>
                                    <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </Typography>
                                </Box>
                                <Box sx={{ width: { lg: '50%', md: '67%' } }}>
                                    <img src={giftwo} alt="Gif" style={{ width: "100%" }} />
                                </Box>

                            </Box>
                        </Grid>

                        {/* ROW 3 */}
                        <Grid item xs={12} lg={6} md={6} sx={{
                            background: '#ffffff00', height: { xl: "500px", lg: '378px' },
                            display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center"
                        }}>
                            <Box ref={assembleRef} sx={{
                                height: { xs: "332px", lg: "215px", sm: '500px', md: '500px' },
                                width: { xs: "80%", lg: "595px" },
                                zIndex: 1,
                                display: "flex",
                                flexDirection: { xs: "column", lg: "row" },
                                justifyContent: "center",
                                alignItems: "center",
                                padding: "10px",
                                textAlign: 'center',
                                marginBottom: { xs: "20px", md: "0" },
                            }}>

                                <Box sx={{ width: { xs: "60%", md: '70%' } }}>
                                    <img src={gifthree} alt="Gif" style={{ width: "100%" }} />
                                </Box>
                                <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
                                    <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Assemble</Typography>
                                    <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </Typography>
                                </Box>

                            </Box>
                        </Grid>
                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', md: 'none', lg: 'block' } }}></Grid>

                        {/* ROW 4 */}
                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', md: 'none', lg: 'block' } }}></Grid>
                        <Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: 'flex-start', xs: 'center' }, alignItems: "center" }}>
                            <Box ref={useRefBox} sx={{
                                height: { xs: "451px", lg: "215px", sm: '555px' },
                                width: { xs: "80%", lg: "550px" },
                                zIndex: 1,
                                display: "flex",
                                flexDirection: { xs: "column-reverse", lg: "row" },
                                justifyContent: "center",
                                alignItems: "center",
                                padding: "10px",
                                textAlign: 'center',
                                marginBottom: { xs: "20px", md: "0" },
                            }}>
                                <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
                                    <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Use</Typography>
                                    <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.</Typography>
                                </Box>

                                <Box sx={{ width: { xs: "60%", md: '70%' } }}>
                                    <img src={giffour} alt="Gif" style={{ width: "100%" }} />
                                </Box>
                            </Box>

                        </Grid>
                        {/* new2 */}
                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', lg: 'block' } }}></Grid>


                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
                        {/* newnew */}
                        {/* desktop view */}
                        {/* Reuse Section */}
                        <Grid item xs={5} sm={6} lg={6}
                            sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '378px' }, display: { lg: 'flex', xs: 'none' }, justifyContent: "center", alignItems: "center" }}>
                            <Box ref={reuseRef}
                                sx={{
                                    width: { xs: "90%", lg: "350px" },
                                    height: { xs: "340px", lg: "240px" },
                                    textAlign: "left",
                                    display: "flex",
                                    flexDirection: "column",
                                    justifyContent: "center",
                                    alignItems: "center",
                                    margin: { xs: 1 }
                                }}>
                                <Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}>
                                    <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Reuse</Typography>
                                    <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
                                        We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.
                                    </Typography>
                                </Box>
                                <Box sx={{ width: "100%", maxWidth: "300px", mt: 2 }}>
                                    <img src={gifsix} alt="Gif" style={{ width: "100%" }} />
                                </Box>
                            </Box>
                        </Grid>

                        {/* Repair Section */}
                        <Grid item xs={5} sm={6} lg={6}
                            sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '378px' }, display: { lg: 'flex', xs: 'none' }, justifyContent: "center", alignItems: "center" }}>
                            <Box ref={reuseRef}
                                sx={{
                                    width: { xs: "90%", lg: "350px" },
                                    height: { xs: "340px", lg: "240px" },
                                    textAlign: "left",
                                    display: "flex",
                                    flexDirection: "column",
                                    justifyContent: "center",
                                    alignItems: "center",
                                    margin: { xs: 1 }
                                }}>
                                <Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}>
                                    <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Repair</Typography>
                                    <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
                                        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.
                                    </Typography>
                                </Box>
                                <Box sx={{ width: "100%", maxWidth: "300px", mt: 2 }}>
                                    <img src={giffive} alt="Gif" style={{ width: "100%" }} />
                                </Box>
                            </Box>
                        </Grid>


                        {/* newnewnwe */}
                        <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '363px' }, display: { lg: 'flex', xs: 'none' }, justifyContent: { lg: 'center' }, alignItems: "center" }}>
                            <Box ref={disintegrateRef}
                                sx={{
                                    height: { xs: "332px", lg: "115px" },
                                    width: { xs: "92%", lg: "250px" },
                                    zIndex: 1,
                                    display: "flex",
                                    flexDirection: { xs: "column", lg: "column" },
                                    justifyContent: "center",
                                    alignItems: "center",
                                    padding: "10px",
                                    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: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
                                    <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Disintegrate</Typography>
                                    <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>When electronics can no longer be repaired or reused, we safely disintegrate them into valuable materials, ensuring they are properly processed and recycled.</Typography>
                                </Box>


                            </Box>
                        </Grid>
                        <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px', xs: '363px' }, display: { lg: 'flex', xs: 'none' }, justifyContent: { lg: 'center' }, alignItems: "center" }}>
                            <Box ref={remineRef} sx={{
                                height: { xs: "332px", lg: "115px" },
                                width: { xs: "92%", lg: "250px" },
                                zIndex: 1,
                                display: "flex",
                                flexDirection: { xs: "column", lg: "column" },
                                justifyContent: "center",
                                alignItems: "center",
                                padding: "10px",
                                textAlign: 'center',
                                marginBottom: { xs: "20px", md: "0" },
                                marginTop: { xs: "20px" },
                            }}>
                                <Box sx={{ width: { xs: "60%", md: "100%" } }}>
                                    <img src={gifeight} alt="Gif" style={{ width: "100%" }} />
                                </Box>
                                <Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
                                    <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Remine</Typography>
                                    <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >We take the disintegrated materials and remines them for precious metals, turning waste back into usable resources. closing the loop on electronic waste.</Typography>
                                </Box>


                            </Box>
                        </Grid>
                        {/* mobile only */}
                        <Grid container spacing={2} rowSpacing={{ xs: 24, sm: 36, md: 30 }}
                            sx={{
                                display: { xs: "flex", md: "flex", lg: 'none' },
                                backgroundImage: { lg: null, xs: `url(${mobileback})` },
                                backgroundSize: { xs: "60%", md: "50%", sm: '70%' },
                                backgroundPosition: { xs: "50% 60%", md: '50% 57%' },
                                backgroundRepeat: "no-repeat",
                            }}>
                            {/* Reuse */}
                            <Grid item xs={6}>
                                <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
                                    <Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 138, md: 118 }, maxHeight: 270 }}>
                                        <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Reuse</Typography>
                                        <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
                                            We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.
                                        </Typography>
                                    </Box>
                                    <Box sx={{ display: "flex", justifyContent: "center" }}>
                                        <Box sx={{ width: { xs: "100%", md: "60%" } }}>
                                            <img
                                                src={gifsixm}
                                                alt="Reuse Gif"
                                                style={{ width: "100%" }}
                                            />
                                        </Box>
                                    </Box>

                                </Box>
                            </Grid>

                            {/* Repair */}
                            <Grid item xs={6}>
                                <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
                                    <Box sx={{ background: "#95CD41", marginBottom: '30px', p: 1, height: { xs: 175, sm: 138, md: 118 }, maxHeight: 270 }}>
                                        <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Repair</Typography>
                                        <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
                                            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.
                                        </Typography>
                                    </Box>
                                    <Box sx={{ display: "flex", justifyContent: "center" }}>
                                        <Box sx={{ width: { xs: "100%", md: "60%" } }}>
                                            <img
                                                src={giffivem}
                                                alt="Reuse Gif"
                                                style={{ width: "100%" }}
                                            />
                                        </Box>
                                    </Box>
                                </Box>
                            </Grid>

                            {/* Disintegrate (Added Extra Margin to Separate from Top Row) */}
                            <Grid item xs={6} sx={{ mt: 2 }}>
                                <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
                                    <Box sx={{ display: "flex", justifyContent: "center" }}>
                                        <Box sx={{ width: { xs: "100%", md: "60%" } }}>
                                            <img
                                                src={gifsevenm}
                                                alt="Reuse Gif"
                                                style={{ width: "100%" }}
                                            />
                                        </Box>
                                    </Box>
                                    <Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 138, md: 118 }, maxHeight: 270 }}>
                                        <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Disintegrate</Typography>
                                        <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >When electronics can no longer be repaired or reused, we safely disintegrate them into valuable materials, ensuring they are properly processed and recycled.</Typography>

                                    </Box>
                                </Box>
                            </Grid>

                            {/* Remine */}
                            <Grid item xs={6} sx={{ mt: 2 }}>
                                <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2, maxHeight: 270 }}>
                                    <Box sx={{ display: "flex", justifyContent: "center" }}>
                                        <Box sx={{ width: { xs: "100%", md: "60%" }, marginTop: '27px' }}>
                                            <img
                                                src={gifeightm}
                                                alt="Reuse Gif"
                                                style={{ width: "100%" }}
                                            />
                                        </Box>
                                    </Box>
                                    <Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 175, sm: 138, md: 118 } }}>
                                        <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Remine</Typography>
                                        <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >We take the disintegrated materials and remines them for precious metals, turning waste back into usable resources. closing the loop on electronic waste.</Typography>
                                    </Box>
                                </Box>
                            </Grid>
                        </Grid>

                    </Grid>

                </Box>
                <WasteImageSection />
                <WhyChooseUs />
                <OurTeam />

                <Footer />

            </Box>
        </ThemeProvider>
    );
};

export default HomePage;