|
|
|
|
|
{"ast":null,"code":"/** @jsxRuntime classic */\n\n/** @jsx jsx */\nimport React from \"react\";\nimport { jsx, Box, Container, Button, Image } from 'theme-ui';\nimport { rgba } from 'polished';\nimport { makeStyles } from '@material-ui/core/styles';\nimport SectionHeading from 'components/section-heading';\nimport Grid from '@material-ui/core/Grid';\nimport { MDBCarousel, MDBCarouselInner, MDBCarouselItem, MDBView, MDBContainer } from \"mdbreact\";\nimport image1 from 'assets/images/Picture1.png';\nimport image2 from 'assets/images/Picture2.png';\nimport logo from 'assets/images/White.png';\nimport carousel1 from 'assets/images/carousel/1.jpg';\nimport carousel2 from 'assets/images/carousel/2.jpg';\nimport carousel3 from 'assets/images/carousel/3.jpg';\nconst useStyles = makeStyles(theme => ({\n root: {\n flexGrow: 1\n },\n paper: {\n padding: theme.spacing(2),\n color: theme.palette.text.secondary\n }\n}));\n\nconst Banner = () => {\n const classes = useStyles();\n return jsx(Box, {\n as: \"section\",\n id: \"home\",\n sx: styles.section\n }, jsx(Container, {\n style: {\n width: \"1700px\"\n }\n }, jsx(Box, {\n sx: styles.contentWrapper\n }, jsx(Grid, {\n container: true,\n spacing: 3\n }, jsx(Grid, {\n item: true,\n xs: 2\n }, jsx(\"div\", {\n align: \"left\"\n }, jsx(Image, {\n src: image1,\n alt: \"illustration\",\n width: \"400px\"\n }))), jsx(Grid, {\n item: true,\n xs: 8\n }, jsx(\"br\", null), jsx(SectionHeading, {\n sx: styles.heading,\n title: \"Selamat Datang di Thamrin Group\"\n }), jsx(Image, {\n src: logo,\n alt: \"illustration\"\n })), jsx(Grid, {\n item: true,\n xs: true\n }, jsx(\"div\", {\n align: \"right\"\n }, jsx(Image, {\n src: image2,\n alt: \"illustration\",\n width: \"400px\"\n })))), jsx(MDBContainer, null, jsx(\"br\", null), jsx(\"br\", null), jsx(MDBCarousel, {\n activeItem: 1,\n length: 3,\n showControls: true,\n showIndicators: true,\n className: \"z-depth-1\"\n }, jsx(MDBCarouselInner, null, jsx(MDBCarouselItem, {\n itemId: \"1\"\n }, jsx(MDBView, null, jsx(\"img\", {\n className: \"d-block w-100\",\n src: carousel1,\n alt: \"First slide\"\n }))), jsx(MDBCarouselItem, {\n itemId: \"2\"\n }, jsx(MDBView, null, jsx(\"img\", {\n className: \"d-block w-100\",\n src: carousel2,\n alt: \"Second slide\"\n }))), jsx(MDBCarouselItem, {\n itemId: \"3\"\n }, jsx(MDBView, null, jsx(\"img\", {\n className: \"d-block w-100\",\n src: carousel3,\n alt: \"Third slide\"\n })))))))));\n};\n\nexport default Banner;\nconst styles = {\n section: {\n position: 'relative',\n pt: [105, null, null, 140, 15, null, 170],\n pb: [8, null, null, 0],\n zIndex: 0,\n ':before': {\n backgroundColor: rgba('#FFF5ED', 0.5),\n content: ['none', null, null, `''`],\n position: 'absolute',\n left: 0,\n right: 0,\n bottom: 0,\n height: 72,\n zIndex: -1\n }\n },\n contentWrapper: {\n display: 'flex',\n alignItems: 'center',\n flexDirection: 'column',\n justifyContent: 'flex-end'\n },\n heading: {\n mb: [30],\n maxWidth: [null, null, null, 500, 560, 730],\n h2: {\n fontSize: [8, null, null, 8, 9, 10, 11],\n lineHeight: [1.57]\n },\n p: {\n fontSize: [1, null, null, 3],\n lineHeight: [1.87, null, null, 2.33]\n }\n },\n illustration: {\n display: ['block', null, null, 'flex'],\n position: 'relative',\n img: {\n display: ['none', null, null, 'block'],\n maxWidth: ['90%'],\n m: ['0 auto']\n }\n },\n buttonWrapper: {\n textAlign: ['center'],\n position: ['static', null, null, 'absolute'],\n left: '50%',\n top: 0,\n transform: ['unset', null, null, 'translateX(-50%)']\n }\n};","map":null,"metadata":{},"sourceType":"module"} |