{"version":3,"sources":["COMPONENTS/Header.jsx","COMPONENTS/Home.jsx","App.js","reportWebVitals.js","index.js"],"names":["Header","Container","Title","exact","to","alt","src","Pages","styled","div","Home","className","Discover","React","lazy","Join","App","fallback","path","reportWebVitals","onPerfEntry","Function","then","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"8JAyBeA,IArBA,WACX,OACI,eAACC,EAAD,WACI,cAACC,EAAD,UACI,eAAC,IAAD,CAASC,OAAK,EAACC,GAAG,IAAlB,UACI,qBAAKC,IAAI,iBAAiBC,IAAI,oBADlC,iBAKJ,eAACC,EAAD,WACI,cAAC,IAAD,CAASJ,OAAK,EAACC,GAAG,WAAlB,sBAGA,cAAC,IAAD,CAASD,OAAK,EAACC,GAAG,OAAlB,yBAUhB,IAAMH,EAAYO,IAAOC,IAAV,mdA2BTP,EAAQM,IAAOC,IAAV,2LAYLF,EAAQC,IAAOC,IAAV,4J,wJCpCIC,EAxBF,WACT,OACI,eAACT,EAAD,WACI,cAACD,EAAA,EAAD,IACA,sBAAKW,UAAU,YAAf,UACI,qBAAKA,UAAU,cAAf,SACI,qBAAKA,UAAU,WAEnB,sBAAKA,UAAU,OAAf,UACI,gDACA,6EAEA,cAAC,IAAD,CAASR,OAAK,EAACC,GAAG,OAAlB,4BAKR,qBAAKO,UAAU,aACf,qBAAKA,UAAU,aACf,qBAAKA,UAAU,iBAOrBV,EAAYO,IAAOC,IAAV,krGCxBTG,EAAWC,IAAMC,MAAK,kBAAM,gCAC5BC,EAAOF,IAAMC,MAAK,kBAAM,gCAsBfE,MApBf,WACI,OACI,cAAC,EAAD,UACI,cAAC,WAAD,CAAUC,SAAU,qDAApB,SACI,eAAC,IAAD,WACI,cAAC,IAAD,CAAOd,OAAK,EAACe,KAAK,IAAlB,SACI,cAAC,EAAD,MAEJ,cAAC,IAAD,CAAOf,OAAK,EAACe,KAAK,YAAlB,SACI,cAACN,EAAD,MAEJ,cAAC,IAAD,CAAOT,OAAK,EAACe,KAAK,QAAlB,SACI,cAACH,EAAD,cAUlBd,EAAYO,IAAOC,IAAV,yECrBAU,EAZS,SAAAC,GAClBA,GAAeA,aAAuBC,UACxC,6BAAqBC,MAAK,YAAkD,IAA/CC,EAA8C,EAA9CA,OAAQC,EAAsC,EAAtCA,OAAQC,EAA8B,EAA9BA,OAAQC,EAAsB,EAAtBA,OAAQC,EAAc,EAAdA,QAC3DJ,EAAOH,GACPI,EAAOJ,GACPK,EAAOL,GACPM,EAAON,GACPO,EAAQP,OCCdQ,IAASC,OACP,cAAC,IAAMC,WAAP,UACE,cAAC,IAAD,UACE,cAAC,EAAD,QAGJC,SAASC,eAAe,SAM1Bb,M","file":"static/js/main.8d79c10a.chunk.js","sourcesContent":["import React from 'react';\nimport { NavLink } from 'react-router-dom';\nimport styled from 'styled-components';\n\nconst Header = () => {\n    return (\n        <Container>\n            <Title>\n                <NavLink exact to=\"/\">\n                    <img alt=\"Soundwave logo\" src=\"images/logo.png\" />\n                    SoundWave\n                </NavLink>\n            </Title>\n            <Pages>\n                <NavLink exact to=\"discover\">\n                    Discover\n                </NavLink>\n                <NavLink exact to=\"join\">\n                    Join\n                </NavLink>\n            </Pages>\n        </Container>\n    );\n};\n\nexport default Header;\n\nconst Container = styled.div`\n    height: 20vh;\n    width: 100%;\n    padding: 0 5vw;\n    font-size: 1.2rem;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    a {\n        text-decoration: none;\n    }\n    a:link {\n        color: white;\n    }\n    a:visited {\n        color: white;\n    }\n    a:hover {\n        color: white;\n        /* transition: all 0.5s ease; */\n    }\n    a:active {\n        color: white;\n    }\n`;\n\nconst Title = styled.div`\n    a {\n        display: flex;\n        align-items: center;\n        font-size: 1.25em;\n\n        img {\n            margin-right: 1rem;\n        }\n    }\n`;\n\nconst Pages = styled.div`\n    font-size: 1.2rem;\n\n    a {\n        padding: 20px;\n\n        &:hover {\n            color: #adadad;\n        }\n    }\n`;\n","import React from 'react';\nimport { NavLink } from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport Header from './Header';\n\nconst Home = () => {\n    return (\n        <Container>\n            <Header />\n            <div className=\"divInHome\">\n                <div className=\"ladyWrapper\">\n                    <div className=\"lady\"></div>\n                </div>\n                <div className=\"text\">\n                    <h1>Feel The Music</h1>\n                    <p>stream over 20 thousand songs with one click</p>\n                    {/* <a href=\"/join\">Join Now</a> */}\n                    <NavLink exact to=\"join\">\n                        Join Now\n                    </NavLink>\n                </div>\n            </div>\n            <div className=\"circle-1\"></div>\n            <div className=\"circle-2\"></div>\n            <div className=\"circle-3\"></div>\n        </Container>\n    );\n};\n\nexport default Home;\n\nconst Container = styled.div`\n    height: 100vh;\n    width: 100vw;\n    position: absolute;\n    justify-content: center;\n\n    .divInHome {\n        height: 80vh;\n        width: 100vw;\n        padding: 0 5vw;\n        display: flex;\n        position: absolute;\n\n        .ladyWrapper {\n            flex-grow: 1;\n            display: flex;\n            flex-direction: column;\n            align-items: stretch;\n            justify-content: flex-end;\n\n            .lady {\n                background-image: url(images/landing-page-girl.png);\n                flex-grow: 1;\n                max-height: 70vh;\n                min-width: 30vw;\n                background-size: contain;\n                background-repeat: no-repeat;\n                background-position: bottom left;\n            }\n        }\n        .text {\n            font-size: 1.2rem;\n            font-weight: 500;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: flex-start;\n\n            h1 {\n                font-size: 3em;\n                margin-top: 0;\n            }\n            p {\n                font-size: 1.2em;\n                font-weight: 500;\n                margin-top: 0;\n                margin-bottom: 30px;\n            }\n            a {\n                color: white;\n                background-color: #1762a7;\n                font-size: 0.9rem;\n                text-decoration: none;\n                padding: 12px 24px;\n                border-radius: 10px;\n                cursor: pointer;\n\n                &:hover {\n                    background-color: #2180d8;\n                }\n                &:active {\n                    background-color: #2796ff;\n                }\n            }\n        }\n    }\n    .circle-1 {\n        position: absolute;\n        width: 20vw;\n        height: 20vw;\n        border-radius: 50%;\n        background-color: rgba(188, 58, 128, 0.2);\n        bottom: 2.5vw;\n        left: 2.5vw;\n        z-index: -1;\n    }\n    .circle-2 {\n        position: absolute;\n        width: 25vw;\n        height: 25vw;\n        border-radius: 50%;\n        background-color: rgba(52, 87, 178, 0.3);\n        top: 10vh;\n        left: 30vw;\n        z-index: -1;\n    }\n    .circle-3 {\n        position: absolute;\n        overflow: hidden;\n        width: 40vw;\n        height: 40vw;\n        bottom: 0;\n        right: 0;\n        z-index: -1;\n\n        &::before {\n            content: '';\n            transform: translate(40%, 30%);\n            position: absolute;\n            height: 100%;\n            width: 100%;\n            border-radius: 50%;\n            background-color: rgba(238, 12, 132, 0.1);\n        }\n    }\n\n    @media screen and (max-width: 910px) {\n        .divInHome {\n            justify-content: center;\n        }\n        .ladyWrapper {\n            display: none !important;\n        }\n    }\n    @media screen and (max-width: 530px) {\n        .text {\n            font-size: 0.8rem !important;\n            transition: all 300ms;\n            a {\n                font-size: 0.85rem !important;\n                padding: 6px 12px !important;\n            }\n        }\n    }\n`;\n","import React, { Suspense } from 'react';\nimport { Switch, Route } from 'react-router';\nimport styled from 'styled-components';\n\nimport Home from './COMPONENTS/Home';\n// import Discover from './COMPONENTS/Discover';\n// import Join from './COMPONENTS/Join';\n\nconst Discover = React.lazy(() => import('./COMPONENTS/Discover'));\nconst Join = React.lazy(() => import('./COMPONENTS/Join'));\n\nfunction App() {\n    return (\n        <Container>\n            <Suspense fallback={<div>page is loading...</div>}>\n                <Switch>\n                    <Route exact path=\"/\">\n                        <Home />\n                    </Route>\n                    <Route exact path=\"/discover\">\n                        <Discover />\n                    </Route>\n                    <Route exact path=\"/join\">\n                        <Join />\n                    </Route>\n                </Switch>\n            </Suspense>\n        </Container>\n    );\n}\n\nexport default App;\n\nconst Container = styled.div`\n    height: 100vh;\n    position: relative;\n`;\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 { BrowserRouter } from \"react-router-dom\";\n\nimport \"./index.css\";\nimport App from \"./App\";\nimport reportWebVitals from \"./reportWebVitals\";\n\nReactDOM.render(\n  <React.StrictMode>\n    <BrowserRouter>\n      <App />\n    </BrowserRouter>\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":""}