{"version":3,"sources":["components/Navbar.js","components/Home/Section1.js","components/Home/Section2.js","invaders/Rock 1.png","invaders/Ice 1.png","invaders/Lava 1.png","invaders/Midnight 1.png","invaders/Moon 1.png","invaders/Ocean 1.png","invaders/Star 1.png","components/Home/Section3.js","components/Home/Carousel/Forest 1.png","components/Home/Carousel/Desert 1.png","components/Home/Carousel/Ocean 1.png","components/Home/Carousel/Moon 1.png","components/Home/Carousel/Rock 1.png","components/Home/Carousel/Lava 1.png","components/Home/Carousel/Ice 1.png","components/Home/Carousel/Gas 1.png","components/Home/Carousel/Star 1.png","components/Home/Carousel/Midnight 1.png","components/Home/Section3Carousel.js","components/Home/Section4.js","components/Home/Section5.js","components/Home/Section6.js","pages/Home.js","App.js","reportWebVitals.js","index.js"],"names":["Navbar","Container","Wrap","href","Logo","src","Other","SocialMedia","className","alt","styled","header","div","img","button","Section1","Section","Intro","Title","Countdown","MintButton","Desc","section","form","Section2","SubWrapper","Left","Description","Right","Section3","DCarousel","state","goToSlide","offsetRadius","showNavigation","config","molasses","slides","key","uuidv4","content","img1","img2","img3","img4","img5","img6","img7","img8","img9","img10","map","slide","index","onClick","setState","onChangeInput","e","target","name","parseInt","value","id","Box","sx","flexGrow","Grid","container","alignItems","spacing","item","xs","md","minWidth","style","marginBottom","marginTop","width","height","position","left","right","marginLeft","marginRight","this","goToSlideDelay","animationConfig","maxWidth","Component","Section4","React","useState","Phase1","Phase2","Phase3","Phase4","scrollElement","setScrollElement","scrollUpdate","current","sections","document","querySelectorAll","Progress","getElementById","pageYOffset","window","progressTop","offsetTop","progressheight","offsetHeight","forEach","sectionTop","sectionHeight","getAttribute","sec","Math","round","scrollY","console","log","toString","prev","useEffect","addEventListener","removeEventListener","ProgressWrap","Phase","Rect","Stick","Name","Content","Team","TeamContainer","MemberName","Position","p","props","Section5","class","Join","DiscordImg","Text","Section6","Social","Security","Home","App","reportWebVitals","onPerfEntry","Function","then","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode"],"mappings":"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","file":"static/js/main.ae4d56ba.chunk.js","sourcesContent":["import { Link } from '@mui/material'\nimport React from 'react'\nimport styled from 'styled-components'\nimport '../App.css'\n\nfunction Navbar() {\n    return (\n        <Container>\n            <Wrap>\n                <a href=\"/\"><Logo src={'/assests/Logo.png'} /></a>\n\n                <Other>\n                    <a href=\"https://discord.com/invite/otherorigins\"><SocialMedia className='social_media'><img src=\"/assests/Vector.png\" alt=\"\" /></SocialMedia></a>\n                    <a href=\"https://twitter.com/other_origins\"><SocialMedia><img src=\"/assests/twitter.png\" alt=\"\" /></SocialMedia></a>\n                    {/* <a class=\"connect_btn\" href=\"#\"><ConnectButton>Connect wallet</ConnectButton></a> */}\n                </Other>\n            </Wrap>\n        </Container>\n    )\n}\n\nexport default Navbar\nconst Container = styled.header`\n\n`\n\nconst Wrap = styled.div`\n    padding: 48px 0;\n    display: flex;\n    justify-content: space-evenly;\n    align-items: center;\n`\n\nconst Logo = styled.img`\n    \n   // @media(max-width: 700px){\n        width: 148px;\n    }\n`\nconst Links = styled.div`\n    font-family: Poppins;\n    font-style: normal;\n    font-weight: 500;\n    font-size: 18px;\n    text-align: center;\n    margin: 16px 0;\n    color: #FFFFFF; \n    }\n`\nconst Other = styled.div`\n    display: flex;\n    justify-content: space-evenly;\n    align-items: center;\n`\n\nconst SocialMedia = styled.div`\n    height: 48px;\n    width: 48px;\n    border-radius: 0px;\n    border: 1px solid #FFFFFF;\n    position: relative;\n    // background: #000;\n    display: flex;\n    justify-content: center;   \n    align-items: center; \n    margin: 0 10px;\n    transition: 0.3s;\n    :hover {\n        background: #7877e6 !important;\n      }\n    img {\n        height: 12px;\n        width: 16px;\n        border-radius: 0px;\n    }\n    @media(max-width: 700px){\n        height: 36px;\n        width: 36px; \n        img {\n            height: 12px;\n            width: 18px;\n        }\n    }\n    \n    @media(max-width: 460px){\n        height: 0;\n        width: 0;\n        img {\n            height: 12px;\n            width: 18px; \n        }\n    }\n`\n\nconst ConnectButton = styled.button`\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    text-decoration: none;\n    // padding: 15px 28px 14px;\n    width: 144px;\n    height: 52px;\n    border-radius: 0px;\n    border: 1px solid #FFFFFF;\n    margin: 10px 10px;\n    background: #FFFFFF;\n    font-family: Poppins;\n    font-style: normal;\n    font-weight: 600;\n    font-size: 14px;\n    outline-width: 0px;\n    cursor: pointer;\n    transition: 0.3s;\n    :hover {\n        background: #7877e6 !important;\n        color: white;\n      }\n    // line-height: 111.5%;\n    @media(max-width: 700px){\n        min-width: 144px;\n        max-width: 128px;\n        width: 100%;\n        font-size: 14px;\n    }\n`","import React from \"react\";\nimport styled from \"styled-components\";\nimport Navbar from \"../Navbar\";\n\nfunction Section1() {\n  return (\n    <Section>\n      <Navbar />\n      <Intro>\n        <Title>4,444 Other Invaders looking for a new home.</Title>\n        <Countdown>Mint is Live!</Countdown>\n        <MintButton>\n          <a href=\"https://other-invaders-mint.pages.dev/\">\n          <p >MINT</p>\n          </a>\n\n          </MintButton>\n        <Desc>As Seen On</Desc>\n        <a href=\" https://nftsolana.io/\"><img src=\"/assests/nft-sol-calendar-white.png\" alt=\"\" /></a> \n      </Intro>\n    </Section>\n  );\n}\n\n\n/*function Section1() {\n  \n  const [error, setError] = React.useState(false)\n  const [showMint, setShowMint] = React.useState(false)\n  const [value, setValue] = React.useState()\n\n  const validList = [\n    {\n      id: 'hjfd768rhbnsdbtry48rk'\n    }, \n    {\n      id: 'd2s4dsdcds5sd6v7s4vc6'\n    }, \n    {\n      id: '1q2s3d42d3v42s3c4d34v'\n    }, \n  ]\n\n  const onSubmit = (e) => {\n    e.preventDefault()\n    const condition = Boolean(validList.find(data => data.id === value))\n    if (condition) {\n      setShowMint(true)\n      setError(false)\n    } else {\n      setShowMint(false)\n      setError(true)\n    }\n    console.log(condition)\n  }\n\n  const inputForm = (e) => {\n    const wallet = e.target.value\n    setValue(wallet)\n    console.log(wallet)\n  }\n\n  return (\n    <Section>\n      <Navbar />\n      <Intro>\n        <Title>4,444 Other Invaders looking for a new home.</Title>\n        <ValidWrap>\n          {\n            showMint ? \n              \"\":\n            <CheckValidity>\n              <input name='walletid' id='walletid' onChange={inputForm} type=\"text\" placeholder='Enter wallet address to check for presale eligibility' />\n              <button onClick={onSubmit} className='check'>Check</button>\n            </CheckValidity>\n          }\n          {error ? \n            <div \n            style={{ display: \"flex\", justifyContent: 'flex-start', flex: 1, width: '100%', margin: '6px 2px', color: 'red', fontSize: '1.2em' }} \n            className=\"message\">ERROR: Wallet Address Not Found</div>\n            : ''\n          }\n        </ValidWrap>\n        <Countdown>Presale Mint 11/12 9PM UTC</Countdown>\n        <MintButton style={{ display: showMint ? 'flex' : 'none'}}><p id=\"demo\"></p></MintButton>\n      </Intro>\n    </Section>\n  );\n}\n*/\n\n\n\n\n\nexport default Section1;\n\n\nconst Section = styled.section`\n  min-height: 100vh;\n  // min-width: 100vw;\n  background-image: url(/assests/Banner.jpg);\n  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.1);\n  background-position: center;\n  background-size: cover;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  // justify-content: center;\n`;\n\nconst Intro = styled.div`\n  display: flex;\n  // flex: 1;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  margin-top: 20px;\n  @media (max-width: 700px) {\n    margin-top: 80px;\n  }\n  @media (max-width: 300px) {\n    margin-left: 26px;\n    margin-right: 26px;\n  }\n`;\n\nconst Title = styled.div`\n  display: flex;\n  justify-content: center;\n  font-weight: 1000;\n  font-size: 48px;\n  color: white;\n  text-align: center;\n  font-family: Poppins;\n  font-style: normal;\n  letter-spacing: 0.03em;\n  width: 100%;\n  max-width: 614px;\n  min-width: 240px;\n  margin-bottom: 15px;\n  @media (max-width: 700px) {\n    font-size: 36px;\n  }\n`;\n\n\nconst ValidWrap = styled.div`\n  max-width: 550px;\n  width: 100%;\n  min-width: 100px;\n  margin: 32px 16px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  .message {\n    font-family: Poppins;\n  }\n`\n\nconst CheckValidity = styled.form`\n  border: 3px solid white;\n  display: flex;\n  max-width: 550px;\n  width: 100%;\n  min-width: 100px;\n  /* margin: 32px 16px; */\n  input {\n    outline-width: 0;\n    border: none;\n    flex: 1;\n    display: flex;\n    font-size: 1.2em;\n    /* width: 100%; */\n    font-weight: 500;\n    color: white;\n    background: inherit;\n    padding: 12px;\n  }\n  .check {\n    font-size: 1.2em;\n    font-weight: 500;\n    background-color: green;\n    border: none;\n    color: white;\n    padding: 12px 16px;\n    border-left: 3px solid white;\n  }\n  \n  @media(max-width: 650px) {\n    flex-direction: column;\n    max-width: 450px;\n    .check {\n      border-left: 0px;\n      border-top: 3px solid white;\n    }\n  }\n  @media(max-width: 450px) {\n    max-width: 320px;\n  }\n`\n\nconst Countdown = styled.div`\n  display: flex;\n  justify-content: center;\n  font-weight: 1000;\n  font-size: 24px;\n  color: white;\n  text-align: center;\n  font-family: Poppins;\n  margin-bottom: 64px;\n\n  \n`;\n\nconst MintButton = styled.button`\ndisplay: flex;\n// flex-direction: row;\njustify-content: center;\nalign-items: center;\npadding: 2px 36px;\nfont-family: Poppins;\n//width: 250x;\n//height: 76px;\nbackground: #7877e6;\n\nfont-weight: 600;\ncolor: white;\ncursor: pointer;\nfont-size: 18px;\ntransition: 0.5s;\n:hover {\n  padding: 6px 40px;\n  font-size: 24px;\n}\n \n`;\n\nconst Desc = styled.div`\n  display: flex;\n  justify-content: center;\n  font-weight: 1000;\n  font-size: 18px;\n  color: white;\n  text-align: center;\n  font-family: Poppins;\n  font-style: normal;\n  letter-spacing: 0.03em;\n  width: 100%;\n  max-width: 614px;\n  min-width: 240px;\n  margin-top: 64px;\n  @media (max-width: 700px) {\n    font-size: 36px;\n  }\n`;","import React from 'react'\nimport styled from 'styled-components'\n\nfunction Section2() {\n    return (\n        <Container>\n            <Wrap>\n                <SubWrapper>\n                    <Left>\n                        <Title>Other Invaders</Title>\n                        <Description>\n                            <p>The Other Invaders are a collection of randomly generated NFT characters exploring the Solana blockchain. It continues the lore of the initial <a href=\"https://www.otherorigins.com/\">100 Other Origins Collection</a></p>\n\n                            <p>The Invaders are created from over 300+ hand-drawn traits, resulting in millions of variations that make each Invader 1/1 unique. There are only 4,444 Invaders in existence.</p>\n\n                            <p>There are 10 different races based on the 10 Origin types. You can see the rarity of each race below.</p>\n\n                            <p>Origin holders aka “Originators” are guaranteed an exclusive Invader from the Origin type they hold.</p>\n                        </Description>\n                    </Left>\n                    <Right>\n                        <img src=\"assests/Invader.gif\" alt=\"\" />\n                    </Right>\n                </SubWrapper>\n            </Wrap>\n        </Container>\n    )\n}\n\nexport default Section2\n\nconst Container = styled.section`\n    min-height: 10vh;\n    background: #02080d;\n    // min-width: 100vw;\n`   \n\nconst Wrap = styled.div`\n    margin: 64px 64px;\n    display: flex;\n    justify-content: center;\n    @media(max-width: 800px) {\n        margin: 64px 32px;\n    }\n`\n\nconst SubWrapper = styled.div`\n    max-width: 1100px;\n    width: 100%;\n    min-width: 200px;\n    display: flex;\n    justify-content: space-evenly;\n    @media(max-width: 800px) {\n        flex-direction: column;\n        align-items: center;\n    }\n`\n\nconst Left = styled.div`\n\n`\n\nconst Title = styled.div`\n    font-family: Poppins;\n    font-style: normal;\n    font-weight: 500;\n    font-size: 48px;\n    color: #7877e6;\n    @media(max-width: 1100px) {\n        font-size: 36px;\n    }\n`\n\nconst Description = styled.div`\n    font-family: Poppins;\n    font-size: 24px;\n    font-style: normal;\n    font-weight: 300;\n    line-height: 27px;\n    letter-spacing: 0em;\n    \n    text-align: justified;\n    color: #ffffff;\n    max-width: 610px;\n    width: 100%;\n    min-width: 200px;\n    @media(max-width: 1100px) {\n        font-size: 18px;\n    }\n`\n\nconst Right = styled.div`\n    img {\n        width: 410px;\n        height: 410px;\n    }\n    @media(max-width: 1100px) {\n        img {\n            max-width: 410px;\n            max-height: 410px;\n            width: 100%;\n            height: auto;\n            min-width: 240px;\n            min-height: 240px;\n        }\n    }\n    @media(max-width: 800px) {\n        margin-top: 64px;\n    }\n`","export default __webpack_public_path__ + \"static/media/Rock 1.1a15219b.png\";","export default __webpack_public_path__ + \"static/media/Ice 1.ddbabd1b.png\";","export default __webpack_public_path__ + \"static/media/Lava 1.eefca4ab.png\";","export default __webpack_public_path__ + \"static/media/Midnight 1.e4cd5bad.png\";","export default __webpack_public_path__ + \"static/media/Moon 1.d0ae79e9.png\";","export default __webpack_public_path__ + \"static/media/Ocean 1.4e3a6862.png\";","export default __webpack_public_path__ + \"static/media/Star 1.62614efa.png\";","import React from 'react'\nimport Slider from 'react-slick'\nimport styled from 'styled-components'\nimport Rock from '../../invaders/Rock 1.png'\nimport Ice from '../../invaders/Ice 1.png'\nimport Lava from '../../invaders/Lava 1.png'\nimport Midnight from '../../invaders/Midnight 1.png'\nimport Moon from '../../invaders/Moon 1.png'\nimport Ocean from '../../invaders/Ocean 1.png'\nimport Star from '../../invaders/Star 1.png'\n\nconst images = [ Rock, Lava, Star, Ocean, Midnight, Moon, Ice]\n\nfunction Section3() {\n\n    const settings = {\n        infinite: true,\n        lazyLoad: true,\n        speed: 300,\n        slidesToShow: 3,\n        centerMode: true,\n        centerPadding: 0,\n        mobileFirst: true,\n        beforeChange: (current, next) => setImageIndex(next) \n    }\n\n    const [imageIndex, setImageIndex] = React.useState(0)\n\n    return (\n        <Container>\n            <Wrap>\n                <CarouselWrap>\n                    <Slider {...settings}>\n                        {images.map((img, index) => (\n                            <div className={index === imageIndex ? 'slide activeSlide' : index < imageIndex ? 'slide slideLeft' : 'slide slideRight'}>\n                                <img src={img} alt={img} />\n                            </div>\n                        ))}\n                    </Slider>\n                    <Progress>\n                        {images.map((img, index) => (\n                                <div className={index === imageIndex ? 'progressbar Active': 'progressbar'} />\n                            ))}\n                    </Progress>\n                </CarouselWrap>\n            </Wrap>\n        </Container>\n    )\n}\n\nexport default Section3\n\nconst Container = styled.div`\n    background: #7877e6;\n`\n\nconst Wrap = styled.div`\n    margin: 64px 45px;\n`\n\nconst Title = styled.div`\n    font-family: Poppins;\n    font-style: normal;\n    font-weight: 500;\n    font-size: 32px;\n    text-align: center;\n    color: #FA8FD2;\n\n`\n\nconst CarouselWrap = styled.div`\n    margin: 64px 0;\n\n    .slide img {\n        width: 450px;\n        height: 450px;\n        margin: 0 0;\n    }\n\n    .slide {\n        transform: scale(0.8);\n        transition: transform 300ms;\n    }\n    \n    .slideLeft {\n        transform: scale(0.7);\n        // transform: translateX(60%);\n        // transition: transform 300ms;\n        // z-index: 1;\n    }\n\n    .slideRight {\n        transform: scale(0.7);\n        // z-index: 1;\n        // transform: translateX(-60%);\n        // transition: transform 300ms;\n    }\n\n    .activeSlide {\n        transform: scale(1.1);\n        opacity: 1;\n        z-index: 100;\n    }\n\n`\n\nconst Progress = styled.div`\n    display: flex;\n    justify-content: center;\n    .progressbar{\n        margin: 64px 12px;\n        margin-bottom: 0px;\n        width: 32px;\n        height: 0px;\n        border: 5px solid #FFFFFF66;\n        transition: border: 300ms;\n    }\n    .Active {\n        margin: 64px 12px;\n        margin-bottom: 0px;\n        width: 32px;\n        height: 0px;\n        border: 5px solid #FFFFFF;\n        transition: border: 300ms;\n    }\n`","export default __webpack_public_path__ + \"static/media/Forest 1.3928fe3e.png\";","export default __webpack_public_path__ + \"static/media/Desert 1.d00fb2f7.png\";","export default __webpack_public_path__ + \"static/media/Ocean 1.4e3a6862.png\";","export default __webpack_public_path__ + \"static/media/Moon 1.d0ae79e9.png\";","export default __webpack_public_path__ + \"static/media/Rock 1.1a15219b.png\";","export default __webpack_public_path__ + \"static/media/Lava 1.eefca4ab.png\";","export default __webpack_public_path__ + \"static/media/Ice 1.ddbabd1b.png\";","export default __webpack_public_path__ + \"static/media/Gas 1.4c4739a0.png\";","export default __webpack_public_path__ + \"static/media/Star 1.62614efa.png\";","export default __webpack_public_path__ + \"static/media/Midnight 1.e4cd5bad.png\";","import React, { Component } from \"react\";\nimport Carousel from \"react-spring-3d-carousel\";\nimport { v4 as uuidv4 } from \"uuid\";\nimport { config } from \"react-spring\";\nimport img1 from \"./Carousel/Forest 1.png\";\nimport img2 from \"./Carousel/Desert 1.png\";\nimport img3 from \"./Carousel/Ocean 1.png\";\nimport img4 from \"./Carousel/Moon 1.png\";\nimport img5 from \"./Carousel/Rock 1.png\";\nimport img6 from \"./Carousel/Lava 1.png\";\nimport img7 from \"./Carousel/Ice 1.png\";\nimport img8 from \"./Carousel/Gas 1.png\";\nimport img9 from \"./Carousel/Star 1.png\";\nimport img10 from \"./Carousel/Midnight 1.png\";\nimport \"./Section3Carousel.css\";\nimport MediaQuery from \"react-responsive\";\nimport { Box, Paper, Grid, Button } from \"@mui/material\";\nexport default class DCarousel extends Component {\n  state = {\n    goToSlide: 0,\n    offsetRadius: 3,\n    showNavigation: true,\n    config: config.molasses,\n  };\n\n  slides = [\n    {\n      key: uuidv4(),\n      content: <img className=\"flip-card\" src={img1} alt=\"1\" />,\n    },\n    {\n      key: uuidv4(),\n      content: <img className=\"flip-card\" src={img2} alt=\"2\" />,\n    },\n    {\n      key: uuidv4(),\n      content: <img className=\"flip-card\" src={img3} alt=\"3\" />,\n    },\n    {\n      key: uuidv4(),\n      content: <img className=\"flip-card\" src={img4} alt=\"4\" />,\n    },\n\n    {\n      key: uuidv4(),\n      content: <img className=\"flip-card\" src={img5} alt=\"5\" />,\n    },\n    {\n      key: uuidv4(),\n      content: <img className=\"flip-card\" src={img6} alt=\"6\" />,\n    },\n    {\n      key: uuidv4(),\n      content: <img className=\"flip-card\" src={img7} alt=\"7\" />,\n    },\n    {\n      key: uuidv4(),\n      content: <img className=\"flip-card\" src={img8} alt=\"8\" />,\n    },\n    {\n      key: uuidv4(),\n      content: <img className=\"flip-card\" src={img9} alt=\"9\" />,\n    },\n    {\n      key: uuidv4(),\n      content: <img className=\"flip-card\" src={img10} alt=\"10\" />,\n    },\n  ].map((slide, index) => {\n    return { ...slide, onClick: () => this.setState({ goToSlide: index }) };\n  });\n\n  onChangeInput = (e) => {\n    this.setState({\n      [e.target.name]: parseInt(e.target.value, 10) || 0,\n    });\n  };\n\n  render() {\n    return (\n      <>\n        <div id=\"gallery\" className=\"part3__bg\">\n          <div>\n            <h1 className=\"artGallery\"></h1>\n          </div>\n          <Box sx={{ flexGrow: 1 }}>\n            <Grid container alignItems=\"center\" spacing={2}>\n              <Grid item xs={2} md={2}></Grid>\n              <Grid item xs={8} md={8}>\n                <MediaQuery minWidth={1200}>\n                  <div\n                    className=\"carousel__body\"\n                    style={{\n                      marginBottom: \"10rem\",\n                      marginTop: \"4rem\",\n                      width: \"100%\",\n                      height: \"35rem\",\n                      position: \"relative\",\n                      left: 0,\n                      right: 0,\n                      marginLeft: \"auto\",\n                      marginRight: \"auto\",\n                    }}\n                  >\n                    <Carousel\n                      slides={this.slides}\n                      goToSlide={this.state.goToSlide}\n                      offsetRadius={this.state.offsetRadius}\n                      showNavigation={true}\n                      goToSlideDelay={200}\n                      animationConfig={this.state.config}\n                    />\n                  </div>{\" \"}\n                </MediaQuery>\n                <MediaQuery minWidth={750} maxWidth={1200}>\n                  <div\n                    className=\"carousel__body\"\n                    style={{\n                      width: \"100%\",\n                      marginTop: \"4rem\",\n                      marginBottom: \"4rem\",\n                      height: \"25rem\",\n                      position: \"relative\",\n                      left: 0,\n                      right: 0,\n                      marginLeft: \"auto\",\n                      marginRight: \"auto\",\n                    }}\n                  >\n                    <Carousel\n                      slides={this.slides}\n                      goToSlide={this.state.goToSlide}\n                      offsetRadius={this.state.offsetRadius}\n                      showNavigation={false}\n                      goToSlideDelay={200}\n                      animationConfig={this.state.config}\n                    />\n                  </div>\n                </MediaQuery>\n                <MediaQuery maxWidth={750}>\n                  <div\n                    className=\"carousel__body\"\n                    style={{\n                      width: \"100%\",\n                      height: \"10rem\",\n                      marginBottom: \"4rem\",\n                      position: \"relative\",\n                      left: 0,\n                      right: 0,\n                      marginLeft: \"auto\",\n                      marginRight: \"auto\",\n                    }}\n                  >\n                    <Carousel\n                      slides={this.slides}\n                      goToSlide={this.state.goToSlide}\n                      offsetRadius={this.state.offsetRadius}\n                      showNavigation={false}\n                      goToSlideDelay={200}\n                      animationConfig={this.state.config}\n                    />\n                  </div>\n                </MediaQuery>\n              </Grid>\n              <Grid item xs={12} md={2}></Grid>\n            </Grid>\n          </Box>\n        </div>\n      </>\n    );\n  }\n}\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport Fade from \"react-reveal\";\n\nfunction Section4() {\n  const [scrollElement, setScrollElement] = React.useState({\n    Phase1: \"0%\",\n    Phase2: \"0%\",\n    Phase3: \"0%\",\n    Phase4: \"0%\",\n  });\n\n  const scrollUpdate = () => {\n    let current = \"\";\n    const sections = document.querySelectorAll(\"section\");\n    const Progress = document.getElementById(\"Progress\");\n    const { pageYOffset } = window;\n    const progressTop = Progress.offsetTop;\n    const progressheight = Progress.offsetHeight;\n    sections.forEach((section) => {\n      const sectionTop = section.offsetTop;\n      const sectionHeight = section.offsetHeight;\n\n      if (pageYOffset >= sectionTop - sectionHeight) {\n        current = section.getAttribute(\"id\");\n        if (current) {\n          const sec = document.getElementById(current);\n          const secTop = sec.offsetTop;\n          const secHeight = sec.offsetHeight;\n          let value = Math.round(window.scrollY + 250 - sec.offsetTop);\n          console.log(current, value);\n          // console.log((pageYOffset/(sectionTop-sectionHeight/6)))\n          const updatedValue = {};\n\n          if (value < 100 && value > 0) {\n            value = value.toString() + \"%\";\n          } else if (value > 100) {\n            value = \"100%\";\n          } else {\n            value = \"0%\";\n          }\n          setScrollElement((prev) => ({ ...prev, [current]: value }));\n        }\n      } else if (pageYOffset <= progressTop - progressheight) {\n        setScrollElement((prev) => ({\n          ...prev,\n          Phase1: \"0%\",\n          Phase2: \"0%\",\n          Phase3: \"0%\",\n          Phase4: \"0%\",\n        }));\n      }\n    });\n  };\n\n  React.useEffect(() => {\n    scrollUpdate();\n    window.addEventListener(\"scroll\", scrollUpdate);\n    return () => {\n      window.removeEventListener(\"scroll\", scrollUpdate);\n    };\n  }, []);\n  console.log(scrollElement);\n\n  return (\n    <Container>\n      <Wrap>\n        <Title>Roadmap</Title>\n        <Description>\n          This roadmap is a framework for our goals and where we want to take\n          the project. We have a lot of ideas and concepts in the works, so\n          we’ve outlined the plan in four main phases. It will evolve over time\n          based on feedback from the community.{\" \"}\n        </Description>\n        <ProgressWrap id=\"Progress\">\n          {/* <Fade bottom> */}\n          <Phase id=\"Phase1\">\n            <Left>\n              <Box height={scrollElement.Phase1}>\n                <Rect height={scrollElement.Phase1} />\n              </Box>\n              <Stick>\n                <Progress height={scrollElement.Phase1} />\n              </Stick>\n            </Left>\n            <Right height={scrollElement.Phase1}>\n              <Name height={scrollElement.Phase1}>Phase I</Name>\n              <Desc height={scrollElement.Phase1}>\n                100 Other Origins Collection\n              </Desc>\n              <ul>\n                <li>Launch 100-unit Other Origins collection. ✓</li>\n                <li>Open Merch Stash. ✓</li>\n                <li>Update website. ✓</li>\n                <li>Boost marketing efforts. ✓ </li>\n                <li>Release concept art exploring Origins lore. ✓</li>\n              </ul>\n            </Right>\n          </Phase>\n          <Phase id=\"Phase2\">\n            <Left>\n              <Box height={scrollElement.Phase2}>\n                <Rect height={scrollElement.Phase2} />\n              </Box>\n              <Stick>\n                <Progress height={scrollElement.Phase2} />\n              </Stick>\n            </Left>\n            <Right height={scrollElement.Phase2}>\n              <Name height={scrollElement.Phase2}>Phase II</Name>\n              <Desc height={scrollElement.Phase2}>\n                Other Invaders Collection\n              </Desc>\n              <ul>\n                <li>Launch Other Invaders collection.</li>\n                <li>Formation of OriginDAO.</li>\n                <li>Airdrop exclusive NFT to Invader holders.</li>\n                <li>Announce special event.</li>\n                <li>Release comicbook series exploring Faction lore.</li>\n              </ul>\n            </Right>\n          </Phase>\n          <Phase id=\"Phase3\">\n            <Left>\n              <Box height={scrollElement.Phase3}>\n                <Rect height={scrollElement.Phase3} />\n              </Box>\n              <Stick>\n                <Progress height={scrollElement.Phase3} />\n              </Stick>\n            </Left>\n            <Right height={scrollElement.Phase3}>\n              <Name height={scrollElement.Phase3}>Phase III</Name>\n              <Desc height={scrollElement.Phase3}>The Game</Desc>\n              <ul>\n                <li>Launch [CLASSIFIED] Collection</li>\n                <li>Distribute game soundtrack to all holders.</li>\n                <li>\n                  Upgrade website with NFT customization tools for [CLASSIFIED]\n                  collection.\n                </li>\n                <li>Release steelbook of project content.</li>\n                <li>Announce game beta event.</li>\n                <li>Release game.</li>\n              </ul>\n            </Right>\n          </Phase>\n          <Phase id=\"Phase4\">\n            <Left>\n              <Box height={scrollElement.Phase4}>\n                <Rect height={scrollElement.Phase4} />\n              </Box>\n              <Stick>\n                <Progress height={scrollElement.Phase4} />\n              </Stick>\n            </Left>\n            <Right height={scrollElement.Phase4}>\n              <Name height={scrollElement.Phase4}>Phase IV</Name>\n              <Desc height={scrollElement.Phase4}>\n                {\" \"}\n                Other Origins Studios x Creators\n              </Desc>\n              <Content height={scrollElement.Phase4}>\n                After the completion of these phases, we’ll continue to build\n                and maintain the Other Origins community. We are truly\n                passionate about various styles of expression, and our ultimate\n                vision is to empower other creators of all backgrounds and\n                origins by providing them with the tools and resources necessary\n                to do their best work. We look forward to seeing how they will\n                shape the future of the Other Origins Metaverse!\n              </Content>\n            </Right>\n          </Phase>\n          {/* </Fade> */}\n        </ProgressWrap>\n      </Wrap>\n      <Wrap>\n        <Title>Creative Team</Title>\n        <Description>\n          We’re a diverse group of creatives, artists, and developers, excited\n          to build on the rapidly growing Solana ecosystem. You can find us on\n          our Discord. We enjoy a good chat about almost anything!\n        </Description>\n        <Team>\n          <TeamContainer>\n            <a href=\"https://twitter.com/radical_sol\">\n              <img src=\"/assests/Team Photos/RAD.png\" alt=\"\" />\n            </a>\n            <MemberName>Rad</MemberName>\n            <Position>Founder & Project Director</Position>\n          </TeamContainer>\n          <TeamContainer>\n            <a href=\"https://www.instagram.com/floatinghead.designs/ \">\n              <img src=\"/assests/Team Photos/FHD.png\" alt=\"\" />\n            </a>\n            <MemberName>Floatingheadz</MemberName>\n            <Position>Digital Illustrator</Position>\n          </TeamContainer>\n          <TeamContainer>\n            <a href=\"https://www.instagram.com/wallacecomics\">\n              <img src=\"/assests/Team Photos/WALTER.png\" alt=\"\" />\n            </a>\n            <MemberName>Walter Wallace</MemberName>\n            <Position>Comicbook Artist</Position>\n          </TeamContainer>\n          \n        </Team>\n      </Wrap>\n    </Container>\n  );\n}\n\nexport default Section4;\n\nconst Container = styled.section`\n  min-height: 100vh;\n  background-color: #02080d;\n  background-repeat: no-repeat;\n  background-size: 100%;\n  // min-width: 100vw;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n`;\n\nconst Wrap = styled.div`\n  margin: 32px 32px;\n  // margin-top: 64px;\n  display: flex;\n  flex-direction: column;\n  // align-items: flex-start;\n  max-width: 951px;\n  width: 100%;\n  min-width: 260px;\n`;\n\nconst Title = styled.div`\n  font-family: Poppins;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 48px;\n  /* identical to box height, or 36px */\n  display: flex;\n  justify-content: center;\n  text-align: center;\n  margin: 4px 0;\n  margin-bottom: 36px;\n  color: #7877e6;\n`;\n\nconst Description = styled.p`\n  // max-width: 951px;\n  // // max-height: 88px;\n  // width: 100%;\n  margin: 0 32px;\n  height: 100%;\n  // min-width: 200px;\n  font-family: Poppins;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 24px;\n  line-height: 27px;\n  letter-spacing: 0em;\n  /* or 22px */\n\n//   text-align: justify;\n  display: flex;\n  justify-content: center;\n  color: #ffffff;\n\n  @media(max-width: 1100px) {\n    font-size: 18px;\n}\n`;\n\nconst ProgressWrap = styled.div`\n  margin: 64px 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  width: 100%;\n`;\n\nconst Phase = styled.section`\n  display: flex;\n  max-width: 951px;\n  width: 100%;\n  margin-bottom: 30px;\n`;\n\nconst Left = styled.div`\n  margin-top: 32px;\n  margin-right: 32px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  @media (max-width: 600px) {\n    display: none;\n  }\n`;\n\nconst Box = styled.div`\n  width: 40px;\n  height: 40px;\n  border: ${(props) =>\n    props.height !== \"0%\" ? \"3px solid #FFFFFF\" : \"3px solid #FFFFFF66\"};\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\nconst Rect = styled.div`\n  width: 16px;\n  height: 16px;\n  background: ${(props) => (props.height !== \"0%\" ? \"#FFFFFF\" : \"#FFFFFF66\")};\n`;\n\nconst Stick = styled.div`\n  margin-top: 16px;\n  position: relative;\n  width: 6px;\n  height: 220px;\n  background: rgba(255, 255, 255, 0.25);\n`;\n\nconst Progress = styled.div`\n  position: absolute;\n  width: 100%;\n  height: ${(props) => props.height};\n  // height: 60%;\n  background: #ffffff;\n`;\n\nconst Right = styled.div`\n  padding: 20px 32px;\n  margin: 0 16px;\n  height: fit-content;\n  max-width: 951px;\n  width: 100%;\n  border: 3px solid\n    ${(props) => (props.height !== \"0%\" ? \"#ffffff\" : \"#ffffff66\")};\n\n  ul {\n    li {\n      font-family: Poppins;\n      font-style: normal;\n      font-weight: 300;\n      font-size: 20px;\n      color: ${(props) => (props.height !== \"0%\" ? \"#FFFFFF\" : \"#FFFFFF66\")};\n    }\n  }\n`;\n\nconst Name = styled.div`\n  font-family: Poppins;\n  font-style: normal;\n  font-weight: 600;\n  font-size: 24px;\n  line-height: 36px;\n  color: ${(props) =>\n    props.height !== \"0%\" ? \"#7877e6\" : \"rgba(255, 255, 255, 0.4)\"};\n`;\n\nconst Desc = styled.div`\n  font-family: Poppins;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 24px;\n  color: ${(props) => (props.height !== \"0%\" ? \"#FFFFFF\" : \"#FFFFFF66\")};\n`;\n\nconst Content = styled.div`\n  margin: 24px 0;\n  max-width: 702px;\n  width: 100%;\n  min-width: 100px;\n  font-family: Poppins;\n  font-style: normal;\n  font-weight: 300;\n  font-size: 18px;\n  line-height: 30px;\n  color: ${(props) => (props.height !== \"0%\" ? \"#FFFFFF\" : \"#FFFFFF66\")};\n`;\n\nconst Team = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  margin: 64px 0;\n  @media (max-width: 1000px) {\n    justify-content: center;\n  }\n`;\n\nconst TeamContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  img {\n    transition: 0.3s;\n\n    :hover {\n      width: 210.14px;\n      height: 210.14px;\n    }\n    width: 222.14px;\n    height: 222.14px;\n  }\n  @media (max-width: 1000px) {\n    margin: 32px 32px;\n  }\n`;\n\nconst MemberName = styled.div`\n  font-family: Poppins;\n  margin-top: 16px;\n  margin-bottom: 6px;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 24px;\n  text-align: center;\n  color: #7877e6;\n`;\n\nconst Position = styled.div`\n  font-family: Poppins;\n  font-style: normal;\n  font-weight: 300;\n  font-size: 14px;\n  color: #ffffff;\n`;\n","import React from \"react\";\nimport styled from \"styled-components\";\n\nfunction Section5() {\n  return (\n    <Container>\n      <Wrap>\n        <img className=\"footer__img\" src=\"assests/DiscordBanner.jpg\" alt=\"\" />\n        <Right>\n          <Title>Join the community</Title>\n          <Description>\n            The Other Origins Discord is growing fast! If you want to be an\n            #OtherInvader it’s here. Join us for the latest announcements,\n            presale info, sneak peeks, lore building, and more!\n          </Description>\n          <a class=\"connect_btn\" href=\"https://discord.com/invite/otherorigins\">\n            <Join>\n              <DiscordImg>\n                <img src=\"assests/Discord2.png\" alt=\"\" />\n              </DiscordImg>\n              <Text>Join our Discord</Text>\n            </Join>\n          </a>\n        </Right>\n      </Wrap>\n    </Container>\n  );\n}\n\nexport default Section5;\n\nconst Container = styled.div`\n  background: #7877e6;  \n`;\n\nconst Wrap = styled.div`\ndisplay: flex;\nmargin: auto;\n  //  width: 100%;\n  //   max-width 100%;\n  //   height: auto;\n  //  Object-fit: cover;\n    \n  @media (max-width: 1300px) {\n    flex-direction: column;\n    width: 100%;\n    height: auto;\n  \n  }\n`;\n\nconst Right = styled.div`\n  margin: 64px 64px;\n  width: 50%;\n`;\n\nconst Title = styled.div`\n  margin: 0px 0;\n  margin-bottom: 32px;\n  font-family: Poppins;\n  font-style: normal;\n  font-weight: 300;\n  font-size: 36px;\n  color: #ffffff;\n`;\n\nconst Description = styled.div`\n  display: flex;\n  margin-bottom: 64px;\n  font-family: Poppins;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 24px;\n  //text-align: justify;\n  color: #ffffff;\n  @media(max-width: 1100px) {\n    font-size: 18px;\n}\n`;\n\nconst Join = styled.div`\n  max-width: 323px;\n  min-width: 100px;\n  height: 64px;\n  box-sizing: border-box;\n  margin: 16px 0;\n  padding: 0;\n  background: inherit;\n  display: flex;\n  transition: 0.5s;\n  :hover {\n    background: #02080d;\n  }\n`;\n\nconst DiscordImg = styled.div`\n  width: 72px;\n  height: 100%;\n  background: #ffffff;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  img {\n    // displ\n  }\n`;\n\nconst Text = styled.div`\n  font-family: Poppins;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 18px;\n  color: #ffffff;\n  width: 100%;\n  border: 2px solid #ffffff;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n","import React from 'react'\nimport styled from 'styled-components'\n\nfunction Section6() {\n    return (\n        <Container>\n            <Wrap>\n                <a href=\"/\"><img src=\"assests/Logo.png\" alt=\"\" /></a>\n                <Desc>4,444 Other Invaders looking for a new home.</Desc>\n                <Social>\n                    <a href=\"https://discord.com/invite/otherorigins\"><Box><img src=\"assests/Vector.png\" alt=\"\" /></Box></a>\n                    <a href=\"https://twitter.com/other_origins\"><Box><img src=\"assests/twitter.png\" alt=\"\" /></Box></a>\n                </Social>\n                <Security\n                >@2021 Other Origins. All rights reserved.\n                <br></br>\n                < a href=\"http://solblocks.tech/\">\n                Developed by Solblocks\n                </a>\n               \n                </Security>\n                \n            </Wrap>\n        </Container>\n    )\n}\n\nexport default Section6\n\nconst Container = styled.div`\n    background: #02080d;\n`\n\nconst Wrap = styled.div`\n    margin: 64px 16px;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    img {\n        margin: 16px 0;\n    }\n`\n\nconst Desc = styled.div`\n    font-family: Poppins;\n    font-style: normal;\n    font-weight: 500;\n    font-size: 18px;\n    text-align: center;\n    margin: 16px 0;\n    color: #FFFFFF;\n`\n\nconst Social = styled.div`\n    display: flex;\n`\n\nconst Box = styled.div`\n    width: 36px;\n    height: 36px;\n    border: 2px solid #FFFFFF;\n    box-sizing: border-box;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 0 12px;\n    transition: 0.3s;\n    :hover {\n        background: #7877e6 !important;\n      }\n    img {\n        height: 12px;\n        width: 16px;\n        border-radius: 0px;\n    }\n`\n\nconst Security = styled.div`\n    font-family: Poppins;\n    font-style: normal;\n    font-weight: 300;\n    font-size: 12px;\n    text-align: center;\n    color: #FFFFFF99;\n    margin: 32px 0;\n`","import React from 'react'\nimport Section1 from '../components/Home/Section1'\nimport Section2 from '../components/Home/Section2'\nimport Section3 from '../components/Home/Section3'\nimport Section3Carousel from '../components/Home/Section3Carousel'\nimport Section4 from '../components/Home/Section4'\nimport Section5 from '../components/Home/Section5'\nimport Section6 from '../components/Home/Section6'\nimport './Home.css'\n\nfunction Home() {\n    return (\n        <div className='Home'>\n            <Section1 />\n            <Section2 />\n            {/* <Section3 /> */}\n            <Section3Carousel />\n            <Section4 />\n            <Section5 />\n            <Section6 />\n        </div>\n    )\n}\n\nexport default Home\n","import './App.css';\nimport Home from './pages/Home';\n\nfunction App() {\n  return (\n    <div className=\"App\">\n      <Home />\n    </div>\n  );\n}\n\nexport default App;\n","const reportWebVitals = onPerfEntry => {\n  if (onPerfEntry && onPerfEntry instanceof Function) {\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n      getCLS(onPerfEntry);\n      getFID(onPerfEntry);\n      getFCP(onPerfEntry);\n      getLCP(onPerfEntry);\n      getTTFB(onPerfEntry);\n    });\n  }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}