+{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\nmeis\\\\Projects\\\\Websites\\\\Rice-Datathon-Website\\\\components\\\\homepage\\\\splashPage.js\";\nimport React from 'react';\nimport { Box, Flex } from 'rebass';\nimport './splashPage.css';\nconst tiles = [{\n image: '../../static/data1.jpg',\n caption: 'January 24 - 25th 2020',\n to: '/schedule'\n}, {\n image: '../../static/data2.jpg',\n caption: 'Sign Up',\n href: ''\n}, {\n image: '../../static/data3.jpg',\n caption: 'Become a Sponsor',\n href: \"../../static/SponsorshipPacket.pdf\"\n}, {\n image: '../../static/data4.jpg',\n to: '/about'\n}];\n\nconst Image = props => React.createElement(\"div\", {\n className: \"image\",\n __source: {\n fileName: _jsxFileName,\n lineNumber: 28\n },\n __self: this\n}, React.createElement(Box, {\n className: `image-box${props.index}`,\n width: 350,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 29\n },\n __self: this\n}, React.createElement(\"h1\", {\n className: \"image-caption\",\n __source: {\n fileName: _jsxFileName,\n lineNumber: 30\n },\n __self: this\n}, props.caption)), React.createElement(\"style\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 32\n },\n __self: this\n}, `\n .image-box${props.index} {\n width: 350px;\n height: 200px;\n position: relative;\n z-index: 200;\n overflow: hidden;\n margin: 10px;\n }\n .image-box${props.index}:before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: -1;\n background-image: url(${props.image});\n background-position: center;\n background-size: cover;\n transition: 0.3s ease-in-out;\n }\n .image-box${props.index}:after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100px;\n z-index: -1;\n background-color: black;\n opacity: 0.5;\n box-shadow: 0 0 20px 20px black;\n transition: 0.3s ease-in-out;\n }\n .image-caption {\n color: rgb(197, 219, 240);\n position: absolute;\n top: 90px;\n text-align: center;\n width: 100%;\n font-weight: normal;\n transition: 0.3s ease-in-out;\n }\n .image-box${props.index}:hover:before {\n transform: scale(1.3);\n }\n .image-box${props.index}:hover:after {\n height: 100%;\n opacity: 0.7;\n }\n .image-box${props.index}:hover .image-caption {\n top: 50px;\n }\n `));\n\nconst SplashPage = () => React.createElement(\"div\", {\n className: \"splashpage\",\n __source: {\n fileName: _jsxFileName,\n lineNumber: 91\n },\n __self: this\n}, React.createElement(Box, {\n width: [1, 0.7],\n ml: \"auto\",\n mr: \"auto\",\n __source: {\n fileName: _jsxFileName,\n lineNumber: 92\n },\n __self: this\n}, React.createElement(Flex, {\n flexDirection: \"row\",\n flexWrap: \"wrap\",\n justifyContent: \"center\",\n __source: {\n fileName: _jsxFileName,\n lineNumber: 93\n },\n __self: this\n}, tiles.map(tile => React.createElement(Image, {\n image: tile.image,\n index: tiles.indexOf(tile),\n caption: tile.caption,\n key: tile.image,\n __source: {\n fileName: _jsxFileName,\n lineNumber: 96\n },\n __self: this\n})))));\n\nexport default SplashPage;","map":{"version":3,"sources":["C:\\Users\\nmeis\\Projects\\Websites\\Rice-Datathon-Website\\components\\homepage\\splashPage.js"],"names":["React","Box","Flex","tiles","image","caption","to","href","Image","props","index","SplashPage","map","tile","indexOf"],"mappings":";AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,GAAT,EAAcC,IAAd,QAA0B,QAA1B;AACA,OAAO,kBAAP;AAEA,MAAMC,KAAK,GAAG,CACV;AACIC,EAAAA,KAAK,EAAE,wBADX;AAEIC,EAAAA,OAAO,EAAE,wBAFb;AAGIC,EAAAA,EAAE,EAAE;AAHR,CADU,EAMV;AACIF,EAAAA,KAAK,EAAE,wBADX;AAEIC,EAAAA,OAAO,EAAE,SAFb;AAGIE,EAAAA,IAAI,EAAE;AAHV,CANU,EAWV;AACIH,EAAAA,KAAK,EAAE,wBADX;AAEIC,EAAAA,OAAO,EAAE,kBAFb;AAGIE,EAAAA,IAAI,EAAE;AAHV,CAXU,EAgBV;AACIH,EAAAA,KAAK,EAAE,wBADX;AAEIE,EAAAA,EAAE,EAAE;AAFR,CAhBU,CAAd;;AAsBA,MAAME,KAAK,GAAIC,KAAD,IACV;AAAK,EAAA,SAAS,EAAC,OAAf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GACI,oBAAC,GAAD;AAAK,EAAA,SAAS,EAAG,YAAWA,KAAK,CAACC,KAAM,EAAxC;AAA2C,EAAA,KAAK,EAAE,GAAlD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GACI;AAAI,EAAA,SAAS,EAAC,eAAd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAA+BD,KAAK,CAACJ,OAArC,CADJ,CADJ,EAII;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAAS;wBACOI,KAAK,CAACC,KAAM;;;;;;;;wBAQZD,KAAK,CAACC,KAAM;;;;;;;;wCAQID,KAAK,CAACL,KAAM;;;;;wBAK5BK,KAAK,CAACC,KAAM;;;;;;;;;;;;;;;;;;;;;;wBAsBZD,KAAK,CAACC,KAAM;;;wBAGZD,KAAK,CAACC,KAAM;;;;wBAIZD,KAAK,CAACC,KAAM;;;SAnD5B,CAJJ,CADJ;;AA+DA,MAAMC,UAAU,GAAG,MACf;AAAK,EAAA,SAAS,EAAC,YAAf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GACI,oBAAC,GAAD;AAAK,EAAA,KAAK,EAAE,CAAC,CAAD,EAAI,GAAJ,CAAZ;AAAsB,EAAA,EAAE,EAAC,MAAzB;AAAgC,EAAA,EAAE,EAAC,MAAnC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GACI,oBAAC,IAAD;AAAM,EAAA,aAAa,EAAC,KAApB;AAA0B,EAAA,QAAQ,EAAC,MAAnC;AAA0C,EAAA,cAAc,EAAC,QAAzD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAEQR,KAAK,CAACS,GAAN,CAAUC,IAAI,IACV,oBAAC,KAAD;AAAO,EAAA,KAAK,EAAEA,IAAI,CAACT,KAAnB;AAA0B,EAAA,KAAK,EAAED,KAAK,CAACW,OAAN,CAAcD,IAAd,CAAjC;AAAsD,EAAA,OAAO,EAAEA,IAAI,CAACR,OAApE;AAA6E,EAAA,GAAG,EAAEQ,IAAI,CAACT,KAAvF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EADJ,CAFR,CADJ,CADJ,CADJ;;AAeA,eAAeO,UAAf","sourcesContent":["import React from 'react';\r\nimport { Box, Flex } from 'rebass';\r\nimport './splashPage.css';\r\n\r\nconst tiles = [\r\n {\r\n image: '../../static/data1.jpg',\r\n caption: 'January 24 - 25th 2020',\r\n to: '/schedule'\r\n },\r\n {\r\n image: '../../static/data2.jpg',\r\n caption: 'Sign Up',\r\n href: ''\r\n },\r\n {\r\n image: '../../static/data3.jpg',\r\n caption: 'Become a Sponsor',\r\n href: \"../../static/SponsorshipPacket.pdf\"\r\n },\r\n {\r\n image: '../../static/data4.jpg',\r\n to: '/about'\r\n }\r\n]\r\n\r\nconst Image = (props) => (\r\n <div className='image'>\r\n <Box className={`image-box${props.index}`} width={350}>\r\n <h1 className='image-caption'>{props.caption}</h1>\r\n </Box>\r\n <style>{`\r\n .image-box${props.index} {\r\n width: 350px;\r\n height: 200px;\r\n position: relative;\r\n z-index: 200;\r\n overflow: hidden;\r\n margin: 10px;\r\n }\r\n .image-box${props.index}:before {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: -1;\r\n background-image: url(${props.image});\r\n background-position: center;\r\n background-size: cover;\r\n transition: 0.3s ease-in-out;\r\n }\r\n .image-box${props.index}:after {\r\n content: \"\";\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100px;\r\n z-index: -1;\r\n background-color: black;\r\n opacity: 0.5;\r\n box-shadow: 0 0 20px 20px black;\r\n transition: 0.3s ease-in-out;\r\n }\r\n .image-caption {\r\n color: rgb(197, 219, 240);\r\n position: absolute;\r\n top: 90px;\r\n text-align: center;\r\n width: 100%;\r\n font-weight: normal;\r\n transition: 0.3s ease-in-out;\r\n }\r\n .image-box${props.index}:hover:before {\r\n transform: scale(1.3);\r\n }\r\n .image-box${props.index}:hover:after {\r\n height: 100%;\r\n opacity: 0.7;\r\n }\r\n .image-box${props.index}:hover .image-caption {\r\n top: 50px;\r\n }\r\n `}</style>\r\n </div>\r\n)\r\n\r\nconst SplashPage = () => (\r\n <div className='splashpage'>\r\n <Box width={[1, 0.7]} ml='auto' mr='auto'>\r\n <Flex flexDirection='row' flexWrap='wrap' justifyContent='center'>\r\n {\r\n tiles.map(tile => (\r\n <Image image={tile.image} index={tiles.indexOf(tile)} caption={tile.caption} key={tile.image} />\r\n ))\r\n }\r\n </Flex>\r\n </Box>\r\n\r\n </div>\r\n)\r\n\r\nexport default SplashPage;"]},"metadata":{},"sourceType":"module"}
0 commit comments