| @@ -38,7 +38,7 @@ const DataCarrers = function ({ backend, s1, d3, sma, ...props }) { | |||||
| author="Post By Thamrin Group" | author="Post By Thamrin Group" | ||||
| /> | /> | ||||
| Masa Pendaftaran : {data.start_regis} s/d {data.until_regis} | Masa Pendaftaran : {data.start_regis} s/d {data.until_regis} | ||||
| <Button color="info" style={{marginLeft:"20px"}} round href={"/hino/carrer_details?s="+data.id}> | |||||
| <Button color="info" style={{marginLeft:"20px"}} round href={"/hino/carrer/carrer_details?s="+data.id}> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer | <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer | ||||
| </Button> | </Button> | ||||
| </CardBody> | </CardBody> | ||||
| @@ -57,7 +57,7 @@ const DataCarrers = function ({ backend, s1, d3, sma, ...props }) { | |||||
| author="Post By Thamrin Group" | author="Post By Thamrin Group" | ||||
| /> | /> | ||||
| Masa Pendaftaran : {data.start_regis} s/d {data.until_regis} | Masa Pendaftaran : {data.start_regis} s/d {data.until_regis} | ||||
| <Button color="info" style={{marginLeft:"20px"}} round href={"/honda/carrer_details?s="+data.id}> | |||||
| <Button color="info" style={{marginLeft:"20px"}} round href={"/hino/carrer/carrer_details?s="+data.id}> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer | <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer | ||||
| </Button> | </Button> | ||||
| </CardBody> | </CardBody> | ||||
| @@ -76,7 +76,7 @@ const DataCarrers = function ({ backend, s1, d3, sma, ...props }) { | |||||
| author="Post By Thamrin Group" | author="Post By Thamrin Group" | ||||
| /> | /> | ||||
| Masa Pendaftaran : {data.start_regis} s/d {data.until_regis} | Masa Pendaftaran : {data.start_regis} s/d {data.until_regis} | ||||
| <Button color="info" style={{marginLeft:"20px"}} round href={"/honda/carrer_details?s="+data.id}> | |||||
| <Button color="info" style={{marginLeft:"20px"}} round href={"/hino/carrer/carrer_details?s="+data.id}> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer | <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer | ||||
| </Button> | </Button> | ||||
| </CardBody> | </CardBody> | ||||
| @@ -11,6 +11,13 @@ import SnackbarContent from "components/Snackbar/SnackbarContent.js"; | |||||
| import imagesStyles from "assets/jss/nextjs-material-kit/imagesStyles.js"; | import imagesStyles from "assets/jss/nextjs-material-kit/imagesStyles.js"; | ||||
| import { cardTitle } from "assets/jss/nextjs-material-kit.js"; | import { cardTitle } from "assets/jss/nextjs-material-kit.js"; | ||||
| import Motor from "assets/img/feature/1.jpg"; | |||||
| import YGP from "assets/img/feature/2.jpg"; | |||||
| import Yamalube from "assets/img/feature/3.jpg"; | |||||
| import Apparel from "assets/img/feature/4.jpg"; | |||||
| import Helmet from "assets/img/feature/5.jpg"; | |||||
| import Accessories from "assets/img/feature/6.jpg"; | |||||
| const styles = { | const styles = { | ||||
| ...imagesStyles, | ...imagesStyles, | ||||
| cardTitle, | cardTitle, | ||||
| @@ -27,88 +34,56 @@ const DataFeature = function ({ backend, service, ...props }) { | |||||
| <h4>Feature Product</h4> | <h4>Feature Product</h4> | ||||
| } | } | ||||
| align="center" | align="center" | ||||
| color="danger" | |||||
| color="info" | |||||
| /> | /> | ||||
| </div> | </div> | ||||
| <GridContainer justify="center" style={{padding:"50px", marginTop:"-70px"}}> | |||||
| <Grid> | |||||
| <Card style={{height: "250px", width: "400px", padding:"20px"}}> | |||||
| <img className={classes.imgCard} src="https://a.ipricegroup.com/media/0630/2006_sprint12/harga_yamaha_motor.jpg" alt="Card-img" style={{height: "200px", width: "350px", display: "block"}}/> | |||||
| {/* <div className={classes.imgCardOverlay}> | |||||
| <div align="center" style={{marginTop:"120px"}}> | |||||
| <Button color="white" href="https://www.instagram.com/yamahaindonesia/" target="_blank"> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>For More Info | |||||
| </Button> | |||||
| </div> | |||||
| </div> */} | |||||
| <GridContainer justify="center" style={{padding:"50px", marginTop:"-30px"}}> | |||||
| <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}> | |||||
| <Card style={{width: "19rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={Motor}/> | |||||
| </div> | |||||
| </Card> | </Card> | ||||
| </Grid> | </Grid> | ||||
| <Grid> | |||||
| <Card style={{height: "250px", width: "400px", padding:"20px"}}> | |||||
| <img className={classes.imgCard} src="https://www.akhtarnews.com/wp-content/uploads/2019/03/harga-sparepart-yamaha.jpg" alt="Card-img" style={{height: "200px", width: "350px", display: "block"}}/> | |||||
| {/* <div className={classes.imgCardOverlay}> | |||||
| <div align="center" style={{marginTop:"120px"}}> | |||||
| <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank"> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>For More Info | |||||
| </Button> | |||||
| </div> | |||||
| </div> */} | |||||
| <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}> | |||||
| <Card style={{width: "19rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={YGP}/> | |||||
| </div> | |||||
| </Card> | </Card> | ||||
| </Grid> | </Grid> | ||||
| <Grid> | |||||
| <Card style={{height: "250px", width: "400px", padding:"20px"}}> | |||||
| <div align="center"> | |||||
| <img className={classes.imgCard} src="https://2.bp.blogspot.com/-pzpJ-ltEFsA/V6Kh26cBoNI/AAAAAAAAAKY/ZLnJ9v_lDIcKUUNcoVKM8Qw0Izawq08_wCLcB/s1600/yamalube%2B2.jpg" alt="Card-img" style={{height: "200px", width: "300px", display: "block"}}/> | |||||
| </div> | |||||
| {/* <div className={classes.imgCardOverlay}> | |||||
| <div align="center" style={{marginTop:"120px"}}> | |||||
| <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank"> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>For More Info | |||||
| </Button> | |||||
| </div> | |||||
| </div> */} | |||||
| <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}> | |||||
| <Card style={{width: "19rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={Yamalube}/> | |||||
| </div> | |||||
| </Card> | </Card> | ||||
| </Grid> | </Grid> | ||||
| <Grid> | |||||
| <Card style={{height: "250px", width: "400px", padding:"20px"}}> | |||||
| <div align="center"> | |||||
| <img className={classes.imgCard} src="https://aomc.mx/mm5/graphics/00000001/X0779100X.jpg" alt="Card-img" style={{height: "200px", width: "200px", display: "block"}}/> | |||||
| </div> | |||||
| {/* <div className={classes.imgCardOverlay}> | |||||
| <div align="center" style={{marginTop:"120px"}}> | |||||
| <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank"> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>For More Info | |||||
| </Button> | |||||
| </div> | |||||
| </div> */} | |||||
| <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}> | |||||
| <Card style={{width: "19rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "200px", display: "block"}} className={classes.imgCardTop} src={Apparel}/> | |||||
| </div> | |||||
| </Card> | </Card> | ||||
| </Grid> | </Grid> | ||||
| <Grid> | |||||
| <Card style={{height: "250px", width: "400px", padding:"20px"}}> | |||||
| <div align="center"> | |||||
| <img className={classes.imgCard} src="https://content.motosport.com/images/items/900/TLD/TLDY0AF/X001.jpg" alt="Card-img" style={{height: "200px", width: "200px", display: "block"}}/> | |||||
| </div> | |||||
| {/* <div className={classes.imgCardOverlay}> | |||||
| <div align="center" style={{marginTop:"120px"}}> | |||||
| <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank"> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>For More Info | |||||
| </Button> | |||||
| </div> | |||||
| </div> */} | |||||
| <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}> | |||||
| <Card style={{width: "19rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "200px", display: "block"}} className={classes.imgCardTop} src={Helmet}/> | |||||
| </div> | |||||
| </Card> | </Card> | ||||
| </Grid> | </Grid> | ||||
| <Grid> | |||||
| <Card style={{height: "250px", width: "400px", padding:"20px"}}> | |||||
| <div align="center"> | |||||
| <img className={classes.imgCard} src="https://static.wixstatic.com/media/bb08a6_fe756d074abc4e4c86ed0fe0134e50a5~mv2.jpg/v1/fill/w_960,h_429,al_c,q_85/bb08a6_fe756d074abc4e4c86ed0fe0134e50a5~mv2.webp" alt="Card-img" style={{height: "200px", width: "350px", display: "block"}}/> | |||||
| </div> | |||||
| {/* <div className={classes.imgCardOverlay}> | |||||
| <div align="center" style={{marginTop:"120px"}}> | |||||
| <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank"> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>For More Info | |||||
| </Button> | |||||
| </div> | |||||
| </div> */} | |||||
| <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}> | |||||
| <Card style={{width: "19rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={Accessories}/> | |||||
| </div> | |||||
| </Card> | </Card> | ||||
| </Grid> | </Grid> | ||||
| </GridContainer> | </GridContainer> | ||||
| @@ -12,7 +12,7 @@ const useStyles = makeStyles(styles); | |||||
| const DataService = function ({ backend, service, ...props }) { | const DataService = function ({ backend, service, ...props }) { | ||||
| const classes = useStyles(); | const classes = useStyles(); | ||||
| const services = service.map((data, index) => ( | const services = service.map((data, index) => ( | ||||
| <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
| <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}> | |||||
| <Card style={{width: "20rem"}}> | <Card style={{width: "20rem"}}> | ||||
| <div align="center"> | <div align="center"> | ||||
| <img | <img | ||||
| @@ -20,8 +20,8 @@ const DataService = function ({ backend, service, ...props }) { | |||||
| </div> | </div> | ||||
| </Card> | </Card> | ||||
| </Grid> | </Grid> | ||||
| )); | |||||
| return ( | |||||
| )); | |||||
| return ( | |||||
| <div className={classes.section} id="notifications"> | <div className={classes.section} id="notifications"> | ||||
| <div align="center"> | <div align="center"> | ||||
| <div align="center" className={classes.section} id="notifications"> | <div align="center" className={classes.section} id="notifications"> | ||||
| @@ -30,7 +30,7 @@ const DataService = function ({ backend, service, ...props }) { | |||||
| <h4>Our Service</h4> | <h4>Our Service</h4> | ||||
| } | } | ||||
| align="center" | align="center" | ||||
| color="danger" | |||||
| color="info" | |||||
| /> | /> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @@ -39,7 +39,7 @@ const DataProduct = function ({ backend, car, ...props }) { | |||||
| <h5>Rp.{data.price}</h5> | <h5>Rp.{data.price}</h5> | ||||
| <Button | <Button | ||||
| color="info" round | color="info" round | ||||
| href={"/hino/product/product_detail?s="+data.id} | |||||
| href={"/hino/product/product_details?s="+data.id} | |||||
| > | > | ||||
| <Icon className={classes.icons}>open_in_new</Icon>Detail Product | <Icon className={classes.icons}>open_in_new</Icon>Detail Product | ||||
| </Button> | </Button> | ||||
| @@ -72,8 +72,8 @@ const DataProduct = function ({ backend, car, ...props }) { | |||||
| color="primary" | color="primary" | ||||
| tabs={[ | tabs={[ | ||||
| { | { | ||||
| tabButton: "XL7", | |||||
| tabIcon: Motorcycle, | |||||
| tabButton: "Profia", | |||||
| tabIcon: Dashboard, | |||||
| tabContent: ( | tabContent: ( | ||||
| <GridContainer justify="center"> | <GridContainer justify="center"> | ||||
| {ProductSuzuki} | {ProductSuzuki} | ||||
| @@ -0,0 +1,145 @@ | |||||
| import React, { useState, useEffect } from "react"; | |||||
| import classNames from "classnames"; | |||||
| import { makeStyles } from "@material-ui/core/styles"; | |||||
| import ReactHtmlParser from "react-html-parser"; | |||||
| import Dashboard from "@material-ui/icons/Dashboard"; | |||||
| import Icon from "@material-ui/core/Icon"; | |||||
| import GridContainer from "components/Grid/GridContainer.js"; | |||||
| import Grid from '@material-ui/core/Grid'; | |||||
| import GridItem from "components/Grid/GridItem.js"; | |||||
| import NavPills from "components/NavPills/NavPills.js"; | |||||
| import Card from "components/Card/Card.js"; | |||||
| import CardBody from "components/Card/CardBody.js"; | |||||
| import CardHeader from "components/Card/CardHeader.js"; | |||||
| import CardFooter from "components/Card/CardFooter.js"; | |||||
| import Button from "components/CustomButtons/Button.js"; | |||||
| import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js"; | |||||
| import Carousel from "react-slick"; | |||||
| const useStyles = makeStyles(styles); | |||||
| const DataProduct = function ({ backend, detailproduct, ...props }) { | |||||
| const classes = useStyles(); | |||||
| const { ...rest } = props; | |||||
| const imageClasses = classNames( | |||||
| classes.imgRaised, | |||||
| classes.imgRoundedCircle, | |||||
| classes.imgFluid | |||||
| ); | |||||
| const settings = { | |||||
| dots: true, | |||||
| infinite: true, | |||||
| speed: 500, | |||||
| slidesToShow: 1, | |||||
| slidesToScroll: 1, | |||||
| autoplay: true, | |||||
| time: 5 | |||||
| }; | |||||
| const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | |||||
| const Productdetails = detailproduct.map((data) => { | |||||
| return ( | |||||
| <div> | |||||
| <GridContainer> | |||||
| <Grid fluid xs={5}> | |||||
| <div className={classes.section} id="notifications"> | |||||
| <div className={classes.section}> | |||||
| <div className={classes.container}> | |||||
| <GridContainer> | |||||
| <GridItem className={classes.marginAuto}> | |||||
| <Card carousel> | |||||
| <Carousel {...settings}> | |||||
| <img className={navImageClasses} width="300px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} /> | |||||
| </Carousel> | |||||
| </Card> | |||||
| {/* <Button color="info" round href={"/product_detail?s="+data.id}> | |||||
| <Icon className={classes.icons}>shopping_cart</Icon>Add To Cart | |||||
| </Button> */} | |||||
| </GridItem> | |||||
| </GridContainer> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </Grid> | |||||
| <Grid xs={7} style={{padding:"40px", marginTop:"-30px"}}> | |||||
| <h3>{data.name}</h3> | |||||
| <h3>Rp.{data.price} - Stock Unit : {data.stock}</h3> | |||||
| <hr></hr> | |||||
| <div align="justify"> | |||||
| <p>{ReactHtmlParser(data.description)}</p> | |||||
| </div> | |||||
| </Grid> | |||||
| </GridContainer> | |||||
| <GridContainer justify="center"> | |||||
| <GridItem> | |||||
| <NavPills | |||||
| color="primary" | |||||
| align="center" | |||||
| alignCenter | |||||
| tabs={[ | |||||
| { | |||||
| tabButton: "Overview", | |||||
| tabIcon: Dashboard, | |||||
| tabContent: ( | |||||
| <div> | |||||
| <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}> | |||||
| <GridItem className={classes.marginAuto}> | |||||
| <div align="justify"> | |||||
| {ReactHtmlParser(data.overview)} | |||||
| </div> | |||||
| </GridItem> | |||||
| </GridContainer> | |||||
| </div> | |||||
| ), | |||||
| }, | |||||
| { | |||||
| tabButton: "Specification", | |||||
| tabIcon: Dashboard, | |||||
| tabContent: ( | |||||
| <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}> | |||||
| <GridItem className={classes.marginAuto}> | |||||
| <div align="justify"> | |||||
| {ReactHtmlParser(data.specification)} | |||||
| </div> | |||||
| </GridItem> | |||||
| </GridContainer> | |||||
| ), | |||||
| }, | |||||
| { | |||||
| tabButton: "Film", | |||||
| tabIcon: Dashboard, | |||||
| tabContent: ( | |||||
| <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}> | |||||
| <GridItem className={classes.marginAuto}> | |||||
| <div align="justify"> | |||||
| {ReactHtmlParser(data.film)} | |||||
| </div> | |||||
| </GridItem> | |||||
| </GridContainer> | |||||
| ), | |||||
| }, | |||||
| ]} | |||||
| /> | |||||
| </GridItem> | |||||
| </GridContainer> | |||||
| </div> | |||||
| ); | |||||
| }) | |||||
| return ( | |||||
| <Card className={classes.textCenter}> | |||||
| <div align="center"> | |||||
| <CardHeader color="info">Product Detail</CardHeader> | |||||
| </div> | |||||
| <CardBody> | |||||
| <div> | |||||
| {Productdetails} | |||||
| </div> | |||||
| </CardBody> | |||||
| <CardFooter className={classes.textMuted} textAlign="center"> | |||||
| © 2020 , All Right Reserved by @Thamrin Brother Company | |||||
| </CardFooter> | |||||
| </Card> | |||||
| ); | |||||
| } | |||||
| export default DataProduct; | |||||
| @@ -31,14 +31,14 @@ const DataCarrers = function ({ backend, s1, d3, sma, ...props }) { | |||||
| return ( | return ( | ||||
| <Grid style={{width:"600px", padding:"30px"}}> | <Grid style={{width:"600px", padding:"30px"}}> | ||||
| <Card> | <Card> | ||||
| <CardHeader color="danger"><div align="center">{data.name}</div></CardHeader> | |||||
| <CardHeader color="info"><div align="center">{data.name}</div></CardHeader> | |||||
| <CardBody> | <CardBody> | ||||
| <Quote | <Quote | ||||
| text={data.name_description} | text={data.name_description} | ||||
| author="Post By Thamrin Group" | author="Post By Thamrin Group" | ||||
| /> | /> | ||||
| Masa Pendaftaran : {data.start_regis} s/d {data.until_regis} | Masa Pendaftaran : {data.start_regis} s/d {data.until_regis} | ||||
| <Button color="danger" style={{marginLeft:"20px"}} round href={"/honda/carrer_details?s="+data.id}> | |||||
| <Button color="info" style={{marginLeft:"20px"}} round href={"/honda/carrer/carrer_details?s="+data.id}> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer | <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer | ||||
| </Button> | </Button> | ||||
| </CardBody> | </CardBody> | ||||
| @@ -50,14 +50,14 @@ const DataCarrers = function ({ backend, s1, d3, sma, ...props }) { | |||||
| return ( | return ( | ||||
| <Grid style={{width:"600px", padding:"30px"}}> | <Grid style={{width:"600px", padding:"30px"}}> | ||||
| <Card> | <Card> | ||||
| <CardHeader color="danger">{data.name}</CardHeader> | |||||
| <CardHeader color="info">{data.name}</CardHeader> | |||||
| <CardBody> | <CardBody> | ||||
| <Quote | <Quote | ||||
| text={data.name_description} | text={data.name_description} | ||||
| author="Post By Thamrin Group" | author="Post By Thamrin Group" | ||||
| /> | /> | ||||
| Masa Pendaftaran : {data.start_regis} s/d {data.until_regis} | Masa Pendaftaran : {data.start_regis} s/d {data.until_regis} | ||||
| <Button color="danger" style={{marginLeft:"20px"}} round href={"/honda/carrer_details?s="+data.id}> | |||||
| <Button color="info" style={{marginLeft:"20px"}} round href={"/honda/carrer/carrer_details?s="+data.id}> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer | <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer | ||||
| </Button> | </Button> | ||||
| </CardBody> | </CardBody> | ||||
| @@ -69,14 +69,14 @@ const DataCarrers = function ({ backend, s1, d3, sma, ...props }) { | |||||
| return ( | return ( | ||||
| <Grid style={{width:"600px", padding:"30px"}}> | <Grid style={{width:"600px", padding:"30px"}}> | ||||
| <Card> | <Card> | ||||
| <CardHeader justify="center" color="danger">{data.name}</CardHeader> | |||||
| <CardHeader justify="center" color="info">{data.name}</CardHeader> | |||||
| <CardBody> | <CardBody> | ||||
| <Quote | <Quote | ||||
| text={data.name_description} | text={data.name_description} | ||||
| author="Post By Thamrin Group" | author="Post By Thamrin Group" | ||||
| /> | /> | ||||
| Masa Pendaftaran : {data.start_regis} s/d {data.until_regis} | Masa Pendaftaran : {data.start_regis} s/d {data.until_regis} | ||||
| <Button color="danger" style={{marginLeft:"20px"}} round href={"/honda/carrer_details?s="+data.id}> | |||||
| <Button color="info" style={{marginLeft:"20px"}} round href={"/honda/carrer/carrer_details?s="+data.id}> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer | <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer | ||||
| </Button> | </Button> | ||||
| </CardBody> | </CardBody> | ||||
| @@ -11,6 +11,13 @@ import SnackbarContent from "components/Snackbar/SnackbarContent.js"; | |||||
| import imagesStyles from "assets/jss/nextjs-material-kit/imagesStyles.js"; | import imagesStyles from "assets/jss/nextjs-material-kit/imagesStyles.js"; | ||||
| import { cardTitle } from "assets/jss/nextjs-material-kit.js"; | import { cardTitle } from "assets/jss/nextjs-material-kit.js"; | ||||
| import Motor from "assets/img/feature/1.jpg"; | |||||
| import YGP from "assets/img/feature/2.jpg"; | |||||
| import Yamalube from "assets/img/feature/3.jpg"; | |||||
| import Apparel from "assets/img/feature/4.jpg"; | |||||
| import Helmet from "assets/img/feature/5.jpg"; | |||||
| import Accessories from "assets/img/feature/6.jpg"; | |||||
| const styles = { | const styles = { | ||||
| ...imagesStyles, | ...imagesStyles, | ||||
| cardTitle, | cardTitle, | ||||
| @@ -30,85 +37,53 @@ const DataFeature = function ({ backend, service, ...props }) { | |||||
| color="info" | color="info" | ||||
| /> | /> | ||||
| </div> | </div> | ||||
| <GridContainer justify="center" style={{padding:"50px", marginTop:"-70px"}}> | |||||
| <Grid> | |||||
| <Card style={{height: "250px", width: "400px", padding:"20px"}}> | |||||
| <img className={classes.imgCard} src="https://a.ipricegroup.com/media/0630/2006_sprint12/harga_yamaha_motor.jpg" alt="Card-img" style={{height: "200px", width: "350px", display: "block"}}/> | |||||
| {/* <div className={classes.imgCardOverlay}> | |||||
| <div align="center" style={{marginTop:"120px"}}> | |||||
| <Button color="white" href="https://www.instagram.com/yamahaindonesia/" target="_blank"> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>For More Info | |||||
| </Button> | |||||
| </div> | |||||
| </div> */} | |||||
| <GridContainer justify="center" style={{padding:"50px", marginTop:"-30px"}}> | |||||
| <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}> | |||||
| <Card style={{width: "19rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={Motor}/> | |||||
| </div> | |||||
| </Card> | </Card> | ||||
| </Grid> | </Grid> | ||||
| <Grid> | |||||
| <Card style={{height: "250px", width: "400px", padding:"20px"}}> | |||||
| <img className={classes.imgCard} src="https://www.akhtarnews.com/wp-content/uploads/2019/03/harga-sparepart-yamaha.jpg" alt="Card-img" style={{height: "200px", width: "350px", display: "block"}}/> | |||||
| {/* <div className={classes.imgCardOverlay}> | |||||
| <div align="center" style={{marginTop:"120px"}}> | |||||
| <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank"> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>For More Info | |||||
| </Button> | |||||
| </div> | |||||
| </div> */} | |||||
| <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}> | |||||
| <Card style={{width: "19rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={YGP}/> | |||||
| </div> | |||||
| </Card> | </Card> | ||||
| </Grid> | </Grid> | ||||
| <Grid> | |||||
| <Card style={{height: "250px", width: "400px", padding:"20px"}}> | |||||
| <div align="center"> | |||||
| <img className={classes.imgCard} src="https://2.bp.blogspot.com/-pzpJ-ltEFsA/V6Kh26cBoNI/AAAAAAAAAKY/ZLnJ9v_lDIcKUUNcoVKM8Qw0Izawq08_wCLcB/s1600/yamalube%2B2.jpg" alt="Card-img" style={{height: "200px", width: "300px", display: "block"}}/> | |||||
| </div> | |||||
| {/* <div className={classes.imgCardOverlay}> | |||||
| <div align="center" style={{marginTop:"120px"}}> | |||||
| <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank"> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>For More Info | |||||
| </Button> | |||||
| </div> | |||||
| </div> */} | |||||
| <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}> | |||||
| <Card style={{width: "19rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={Yamalube}/> | |||||
| </div> | |||||
| </Card> | </Card> | ||||
| </Grid> | </Grid> | ||||
| <Grid> | |||||
| <Card style={{height: "250px", width: "400px", padding:"20px"}}> | |||||
| <div align="center"> | |||||
| <img className={classes.imgCard} src="https://aomc.mx/mm5/graphics/00000001/X0779100X.jpg" alt="Card-img" style={{height: "200px", width: "200px", display: "block"}}/> | |||||
| </div> | |||||
| {/* <div className={classes.imgCardOverlay}> | |||||
| <div align="center" style={{marginTop:"120px"}}> | |||||
| <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank"> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>For More Info | |||||
| </Button> | |||||
| </div> | |||||
| </div> */} | |||||
| <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}> | |||||
| <Card style={{width: "19rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "200px", display: "block"}} className={classes.imgCardTop} src={Apparel}/> | |||||
| </div> | |||||
| </Card> | </Card> | ||||
| </Grid> | </Grid> | ||||
| <Grid> | |||||
| <Card style={{height: "250px", width: "400px", padding:"20px"}}> | |||||
| <div align="center"> | |||||
| <img className={classes.imgCard} src="https://content.motosport.com/images/items/900/TLD/TLDY0AF/X001.jpg" alt="Card-img" style={{height: "200px", width: "200px", display: "block"}}/> | |||||
| </div> | |||||
| {/* <div className={classes.imgCardOverlay}> | |||||
| <div align="center" style={{marginTop:"120px"}}> | |||||
| <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank"> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>For More Info | |||||
| </Button> | |||||
| </div> | |||||
| </div> */} | |||||
| <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}> | |||||
| <Card style={{width: "19rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "200px", display: "block"}} className={classes.imgCardTop} src={Helmet}/> | |||||
| </div> | |||||
| </Card> | </Card> | ||||
| </Grid> | </Grid> | ||||
| <Grid> | |||||
| <Card style={{height: "250px", width: "400px", padding:"20px"}}> | |||||
| <div align="center"> | |||||
| <img className={classes.imgCard} src="https://static.wixstatic.com/media/bb08a6_fe756d074abc4e4c86ed0fe0134e50a5~mv2.jpg/v1/fill/w_960,h_429,al_c,q_85/bb08a6_fe756d074abc4e4c86ed0fe0134e50a5~mv2.webp" alt="Card-img" style={{height: "200px", width: "350px", display: "block"}}/> | |||||
| </div> | |||||
| {/* <div className={classes.imgCardOverlay}> | |||||
| <div align="center" style={{marginTop:"120px"}}> | |||||
| <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank"> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>For More Info | |||||
| </Button> | |||||
| </div> | |||||
| </div> */} | |||||
| <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}> | |||||
| <Card style={{width: "19rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={Accessories}/> | |||||
| </div> | |||||
| </Card> | </Card> | ||||
| </Grid> | </Grid> | ||||
| </GridContainer> | </GridContainer> | ||||
| @@ -12,7 +12,7 @@ const useStyles = makeStyles(styles); | |||||
| const DataService = function ({ backend, service, ...props }) { | const DataService = function ({ backend, service, ...props }) { | ||||
| const classes = useStyles(); | const classes = useStyles(); | ||||
| const services = service.map((data, index) => ( | const services = service.map((data, index) => ( | ||||
| <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
| <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}> | |||||
| <Card style={{width: "20rem"}}> | <Card style={{width: "20rem"}}> | ||||
| <div align="center"> | <div align="center"> | ||||
| <img | <img | ||||
| @@ -14,7 +14,6 @@ import CardFooter from "components/Card/CardFooter.js"; | |||||
| import Button from "components/CustomButtons/Button.js"; | import Button from "components/CustomButtons/Button.js"; | ||||
| import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js"; | import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js"; | ||||
| import Icon from "@material-ui/core/Icon"; | import Icon from "@material-ui/core/Icon"; | ||||
| import { Motorcycle } from "@material-ui/icons"; | |||||
| const useStyles = makeStyles(styles); | const useStyles = makeStyles(styles); | ||||
| const DataProduct = function ({ backend, car, ...props }) { | const DataProduct = function ({ backend, car, ...props }) { | ||||
| @@ -39,7 +38,7 @@ const DataProduct = function ({ backend, car, ...props }) { | |||||
| <h5>Rp.{data.price}</h5> | <h5>Rp.{data.price}</h5> | ||||
| <Button | <Button | ||||
| color="info" round | color="info" round | ||||
| href={"/honda/product/product_detail?s="+data.id} | |||||
| href={"/honda/product/product_details?s="+data.id} | |||||
| > | > | ||||
| <Icon className={classes.icons}>open_in_new</Icon>Detail Product | <Icon className={classes.icons}>open_in_new</Icon>Detail Product | ||||
| </Button> | </Button> | ||||
| @@ -72,8 +71,8 @@ const DataProduct = function ({ backend, car, ...props }) { | |||||
| color="primary" | color="primary" | ||||
| tabs={[ | tabs={[ | ||||
| { | { | ||||
| tabButton: "XL7", | |||||
| tabIcon: Motorcycle, | |||||
| tabButton: "Brio", | |||||
| tabIcon: Dashboard, | |||||
| tabContent: ( | tabContent: ( | ||||
| <GridContainer justify="center"> | <GridContainer justify="center"> | ||||
| {ProductSuzuki} | {ProductSuzuki} | ||||
| @@ -0,0 +1,145 @@ | |||||
| import React, { useState, useEffect } from "react"; | |||||
| import classNames from "classnames"; | |||||
| import { makeStyles } from "@material-ui/core/styles"; | |||||
| import ReactHtmlParser from "react-html-parser"; | |||||
| import Dashboard from "@material-ui/icons/Dashboard"; | |||||
| import Icon from "@material-ui/core/Icon"; | |||||
| import GridContainer from "components/Grid/GridContainer.js"; | |||||
| import Grid from '@material-ui/core/Grid'; | |||||
| import GridItem from "components/Grid/GridItem.js"; | |||||
| import NavPills from "components/NavPills/NavPills.js"; | |||||
| import Card from "components/Card/Card.js"; | |||||
| import CardBody from "components/Card/CardBody.js"; | |||||
| import CardHeader from "components/Card/CardHeader.js"; | |||||
| import CardFooter from "components/Card/CardFooter.js"; | |||||
| import Button from "components/CustomButtons/Button.js"; | |||||
| import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js"; | |||||
| import Carousel from "react-slick"; | |||||
| const useStyles = makeStyles(styles); | |||||
| const DataProduct = function ({ backend, detailproduct, ...props }) { | |||||
| const classes = useStyles(); | |||||
| const { ...rest } = props; | |||||
| const imageClasses = classNames( | |||||
| classes.imgRaised, | |||||
| classes.imgRoundedCircle, | |||||
| classes.imgFluid | |||||
| ); | |||||
| const settings = { | |||||
| dots: true, | |||||
| infinite: true, | |||||
| speed: 500, | |||||
| slidesToShow: 1, | |||||
| slidesToScroll: 1, | |||||
| autoplay: true, | |||||
| time: 5 | |||||
| }; | |||||
| const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | |||||
| const Productdetails = detailproduct.map((data) => { | |||||
| return ( | |||||
| <div> | |||||
| <GridContainer> | |||||
| <Grid fluid xs={5}> | |||||
| <div className={classes.section} id="notifications"> | |||||
| <div className={classes.section}> | |||||
| <div className={classes.container}> | |||||
| <GridContainer> | |||||
| <GridItem className={classes.marginAuto}> | |||||
| <Card carousel> | |||||
| <Carousel {...settings}> | |||||
| <img className={navImageClasses} width="300px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} /> | |||||
| </Carousel> | |||||
| </Card> | |||||
| {/* <Button color="info" round href={"/product_detail?s="+data.id}> | |||||
| <Icon className={classes.icons}>shopping_cart</Icon>Add To Cart | |||||
| </Button> */} | |||||
| </GridItem> | |||||
| </GridContainer> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </Grid> | |||||
| <Grid xs={7} style={{padding:"40px", marginTop:"-30px"}}> | |||||
| <h3>{data.name}</h3> | |||||
| <h3>Rp.{data.price} - Stock Unit : {data.stock}</h3> | |||||
| <hr></hr> | |||||
| <div align="justify"> | |||||
| <p>{ReactHtmlParser(data.description)}</p> | |||||
| </div> | |||||
| </Grid> | |||||
| </GridContainer> | |||||
| <GridContainer justify="center"> | |||||
| <GridItem> | |||||
| <NavPills | |||||
| color="primary" | |||||
| align="center" | |||||
| alignCenter | |||||
| tabs={[ | |||||
| { | |||||
| tabButton: "Overview", | |||||
| tabIcon: Dashboard, | |||||
| tabContent: ( | |||||
| <div> | |||||
| <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}> | |||||
| <GridItem className={classes.marginAuto}> | |||||
| <div align="justify"> | |||||
| {ReactHtmlParser(data.overview)} | |||||
| </div> | |||||
| </GridItem> | |||||
| </GridContainer> | |||||
| </div> | |||||
| ), | |||||
| }, | |||||
| { | |||||
| tabButton: "Specification", | |||||
| tabIcon: Dashboard, | |||||
| tabContent: ( | |||||
| <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}> | |||||
| <GridItem className={classes.marginAuto}> | |||||
| <div align="justify"> | |||||
| {ReactHtmlParser(data.specification)} | |||||
| </div> | |||||
| </GridItem> | |||||
| </GridContainer> | |||||
| ), | |||||
| }, | |||||
| { | |||||
| tabButton: "Film", | |||||
| tabIcon: Dashboard, | |||||
| tabContent: ( | |||||
| <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}> | |||||
| <GridItem className={classes.marginAuto}> | |||||
| <div align="justify"> | |||||
| {ReactHtmlParser(data.film)} | |||||
| </div> | |||||
| </GridItem> | |||||
| </GridContainer> | |||||
| ), | |||||
| }, | |||||
| ]} | |||||
| /> | |||||
| </GridItem> | |||||
| </GridContainer> | |||||
| </div> | |||||
| ); | |||||
| }) | |||||
| return ( | |||||
| <Card className={classes.textCenter}> | |||||
| <div align="center"> | |||||
| <CardHeader color="info">Product Detail</CardHeader> | |||||
| </div> | |||||
| <CardBody> | |||||
| <div> | |||||
| {Productdetails} | |||||
| </div> | |||||
| </CardBody> | |||||
| <CardFooter className={classes.textMuted} textAlign="center"> | |||||
| © 2020 , All Right Reserved by @Thamrin Brother Company | |||||
| </CardFooter> | |||||
| </Card> | |||||
| ); | |||||
| } | |||||
| export default DataProduct; | |||||
| @@ -11,6 +11,13 @@ import SnackbarContent from "components/Snackbar/SnackbarContent.js"; | |||||
| import imagesStyles from "assets/jss/nextjs-material-kit/imagesStyles.js"; | import imagesStyles from "assets/jss/nextjs-material-kit/imagesStyles.js"; | ||||
| import { cardTitle } from "assets/jss/nextjs-material-kit.js"; | import { cardTitle } from "assets/jss/nextjs-material-kit.js"; | ||||
| import Motor from "assets/img/feature/1.jpg"; | |||||
| import YGP from "assets/img/feature/2.jpg"; | |||||
| import Yamalube from "assets/img/feature/3.jpg"; | |||||
| import Apparel from "assets/img/feature/4.jpg"; | |||||
| import Helmet from "assets/img/feature/5.jpg"; | |||||
| import Accessories from "assets/img/feature/6.jpg"; | |||||
| const styles = { | const styles = { | ||||
| ...imagesStyles, | ...imagesStyles, | ||||
| cardTitle, | cardTitle, | ||||
| @@ -30,85 +37,53 @@ const DataFeature = function ({ backend, service, ...props }) { | |||||
| color="info" | color="info" | ||||
| /> | /> | ||||
| </div> | </div> | ||||
| <GridContainer justify="center" style={{padding:"50px", marginTop:"-70px"}}> | |||||
| <Grid> | |||||
| <Card style={{height: "250px", width: "400px", padding:"20px"}}> | |||||
| <img className={classes.imgCard} src="https://a.ipricegroup.com/media/0630/2006_sprint12/harga_yamaha_motor.jpg" alt="Card-img" style={{height: "200px", width: "350px", display: "block"}}/> | |||||
| {/* <div className={classes.imgCardOverlay}> | |||||
| <div align="center" style={{marginTop:"120px"}}> | |||||
| <Button color="white" href="https://www.instagram.com/yamahaindonesia/" target="_blank"> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>For More Info | |||||
| </Button> | |||||
| </div> | |||||
| </div> */} | |||||
| <GridContainer justify="center" style={{padding:"50px", marginTop:"-30px"}}> | |||||
| <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}> | |||||
| <Card style={{width: "19rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={Motor}/> | |||||
| </div> | |||||
| </Card> | </Card> | ||||
| </Grid> | </Grid> | ||||
| <Grid> | |||||
| <Card style={{height: "250px", width: "400px", padding:"20px"}}> | |||||
| <img className={classes.imgCard} src="https://www.akhtarnews.com/wp-content/uploads/2019/03/harga-sparepart-yamaha.jpg" alt="Card-img" style={{height: "200px", width: "350px", display: "block"}}/> | |||||
| {/* <div className={classes.imgCardOverlay}> | |||||
| <div align="center" style={{marginTop:"120px"}}> | |||||
| <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank"> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>For More Info | |||||
| </Button> | |||||
| </div> | |||||
| </div> */} | |||||
| <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}> | |||||
| <Card style={{width: "19rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={YGP}/> | |||||
| </div> | |||||
| </Card> | </Card> | ||||
| </Grid> | </Grid> | ||||
| <Grid> | |||||
| <Card style={{height: "250px", width: "400px", padding:"20px"}}> | |||||
| <div align="center"> | |||||
| <img className={classes.imgCard} src="https://2.bp.blogspot.com/-pzpJ-ltEFsA/V6Kh26cBoNI/AAAAAAAAAKY/ZLnJ9v_lDIcKUUNcoVKM8Qw0Izawq08_wCLcB/s1600/yamalube%2B2.jpg" alt="Card-img" style={{height: "200px", width: "300px", display: "block"}}/> | |||||
| </div> | |||||
| {/* <div className={classes.imgCardOverlay}> | |||||
| <div align="center" style={{marginTop:"120px"}}> | |||||
| <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank"> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>For More Info | |||||
| </Button> | |||||
| </div> | |||||
| </div> */} | |||||
| <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}> | |||||
| <Card style={{width: "19rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={Yamalube}/> | |||||
| </div> | |||||
| </Card> | </Card> | ||||
| </Grid> | </Grid> | ||||
| <Grid> | |||||
| <Card style={{height: "250px", width: "400px", padding:"20px"}}> | |||||
| <div align="center"> | |||||
| <img className={classes.imgCard} src="https://aomc.mx/mm5/graphics/00000001/X0779100X.jpg" alt="Card-img" style={{height: "200px", width: "200px", display: "block"}}/> | |||||
| </div> | |||||
| {/* <div className={classes.imgCardOverlay}> | |||||
| <div align="center" style={{marginTop:"120px"}}> | |||||
| <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank"> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>For More Info | |||||
| </Button> | |||||
| </div> | |||||
| </div> */} | |||||
| <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}> | |||||
| <Card style={{width: "19rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "200px", display: "block"}} className={classes.imgCardTop} src={Apparel}/> | |||||
| </div> | |||||
| </Card> | </Card> | ||||
| </Grid> | </Grid> | ||||
| <Grid> | |||||
| <Card style={{height: "250px", width: "400px", padding:"20px"}}> | |||||
| <div align="center"> | |||||
| <img className={classes.imgCard} src="https://content.motosport.com/images/items/900/TLD/TLDY0AF/X001.jpg" alt="Card-img" style={{height: "200px", width: "200px", display: "block"}}/> | |||||
| </div> | |||||
| {/* <div className={classes.imgCardOverlay}> | |||||
| <div align="center" style={{marginTop:"120px"}}> | |||||
| <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank"> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>For More Info | |||||
| </Button> | |||||
| </div> | |||||
| </div> */} | |||||
| <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}> | |||||
| <Card style={{width: "19rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "200px", display: "block"}} className={classes.imgCardTop} src={Helmet}/> | |||||
| </div> | |||||
| </Card> | </Card> | ||||
| </Grid> | </Grid> | ||||
| <Grid> | |||||
| <Card style={{height: "250px", width: "400px", padding:"20px"}}> | |||||
| <div align="center"> | |||||
| <img className={classes.imgCard} src="https://static.wixstatic.com/media/bb08a6_fe756d074abc4e4c86ed0fe0134e50a5~mv2.jpg/v1/fill/w_960,h_429,al_c,q_85/bb08a6_fe756d074abc4e4c86ed0fe0134e50a5~mv2.webp" alt="Card-img" style={{height: "200px", width: "350px", display: "block"}}/> | |||||
| </div> | |||||
| {/* <div className={classes.imgCardOverlay}> | |||||
| <div align="center" style={{marginTop:"120px"}}> | |||||
| <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank"> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>For More Info | |||||
| </Button> | |||||
| </div> | |||||
| </div> */} | |||||
| <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}> | |||||
| <Card style={{width: "19rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={Accessories}/> | |||||
| </div> | |||||
| </Card> | </Card> | ||||
| </Grid> | </Grid> | ||||
| </GridContainer> | </GridContainer> | ||||
| @@ -12,7 +12,7 @@ const useStyles = makeStyles(styles); | |||||
| const DataService = function ({ backend, service, ...props }) { | const DataService = function ({ backend, service, ...props }) { | ||||
| const classes = useStyles(); | const classes = useStyles(); | ||||
| const services = service.map((data, index) => ( | const services = service.map((data, index) => ( | ||||
| <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
| <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}> | |||||
| <Card style={{width: "20rem"}}> | <Card style={{width: "20rem"}}> | ||||
| <div align="center"> | <div align="center"> | ||||
| <img | <img | ||||
| @@ -11,6 +11,13 @@ import SnackbarContent from "components/Snackbar/SnackbarContent.js"; | |||||
| import imagesStyles from "assets/jss/nextjs-material-kit/imagesStyles.js"; | import imagesStyles from "assets/jss/nextjs-material-kit/imagesStyles.js"; | ||||
| import { cardTitle } from "assets/jss/nextjs-material-kit.js"; | import { cardTitle } from "assets/jss/nextjs-material-kit.js"; | ||||
| import Motor from "assets/img/feature/1.jpg"; | |||||
| import YGP from "assets/img/feature/2.jpg"; | |||||
| import Yamalube from "assets/img/feature/3.jpg"; | |||||
| import Apparel from "assets/img/feature/4.jpg"; | |||||
| import Helmet from "assets/img/feature/5.jpg"; | |||||
| import Accessories from "assets/img/feature/6.jpg"; | |||||
| const styles = { | const styles = { | ||||
| ...imagesStyles, | ...imagesStyles, | ||||
| cardTitle, | cardTitle, | ||||
| @@ -30,85 +37,53 @@ const DataFeature = function ({ backend, service, ...props }) { | |||||
| color="info" | color="info" | ||||
| /> | /> | ||||
| </div> | </div> | ||||
| <GridContainer justify="center" style={{padding:"50px", marginTop:"-70px"}}> | |||||
| <Grid> | |||||
| <Card style={{height: "250px", width: "400px", padding:"20px"}}> | |||||
| <img className={classes.imgCard} src="https://a.ipricegroup.com/media/0630/2006_sprint12/harga_yamaha_motor.jpg" alt="Card-img" style={{height: "200px", width: "350px", display: "block"}}/> | |||||
| {/* <div className={classes.imgCardOverlay}> | |||||
| <div align="center" style={{marginTop:"120px"}}> | |||||
| <Button color="white" href="https://www.instagram.com/yamahaindonesia/" target="_blank"> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>For More Info | |||||
| </Button> | |||||
| </div> | |||||
| </div> */} | |||||
| <GridContainer justify="center" style={{padding:"50px", marginTop:"-30px"}}> | |||||
| <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}> | |||||
| <Card style={{width: "19rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={Motor}/> | |||||
| </div> | |||||
| </Card> | </Card> | ||||
| </Grid> | </Grid> | ||||
| <Grid> | |||||
| <Card style={{height: "250px", width: "400px", padding:"20px"}}> | |||||
| <img className={classes.imgCard} src="https://www.akhtarnews.com/wp-content/uploads/2019/03/harga-sparepart-yamaha.jpg" alt="Card-img" style={{height: "200px", width: "350px", display: "block"}}/> | |||||
| {/* <div className={classes.imgCardOverlay}> | |||||
| <div align="center" style={{marginTop:"120px"}}> | |||||
| <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank"> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>For More Info | |||||
| </Button> | |||||
| </div> | |||||
| </div> */} | |||||
| <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}> | |||||
| <Card style={{width: "19rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={YGP}/> | |||||
| </div> | |||||
| </Card> | </Card> | ||||
| </Grid> | </Grid> | ||||
| <Grid> | |||||
| <Card style={{height: "250px", width: "400px", padding:"20px"}}> | |||||
| <div align="center"> | |||||
| <img className={classes.imgCard} src="https://2.bp.blogspot.com/-pzpJ-ltEFsA/V6Kh26cBoNI/AAAAAAAAAKY/ZLnJ9v_lDIcKUUNcoVKM8Qw0Izawq08_wCLcB/s1600/yamalube%2B2.jpg" alt="Card-img" style={{height: "200px", width: "300px", display: "block"}}/> | |||||
| </div> | |||||
| {/* <div className={classes.imgCardOverlay}> | |||||
| <div align="center" style={{marginTop:"120px"}}> | |||||
| <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank"> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>For More Info | |||||
| </Button> | |||||
| </div> | |||||
| </div> */} | |||||
| <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}> | |||||
| <Card style={{width: "19rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={Yamalube}/> | |||||
| </div> | |||||
| </Card> | </Card> | ||||
| </Grid> | </Grid> | ||||
| <Grid> | |||||
| <Card style={{height: "250px", width: "400px", padding:"20px"}}> | |||||
| <div align="center"> | |||||
| <img className={classes.imgCard} src="https://aomc.mx/mm5/graphics/00000001/X0779100X.jpg" alt="Card-img" style={{height: "200px", width: "200px", display: "block"}}/> | |||||
| </div> | |||||
| {/* <div className={classes.imgCardOverlay}> | |||||
| <div align="center" style={{marginTop:"120px"}}> | |||||
| <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank"> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>For More Info | |||||
| </Button> | |||||
| </div> | |||||
| </div> */} | |||||
| <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}> | |||||
| <Card style={{width: "19rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "200px", display: "block"}} className={classes.imgCardTop} src={Apparel}/> | |||||
| </div> | |||||
| </Card> | </Card> | ||||
| </Grid> | </Grid> | ||||
| <Grid> | |||||
| <Card style={{height: "250px", width: "400px", padding:"20px"}}> | |||||
| <div align="center"> | |||||
| <img className={classes.imgCard} src="https://content.motosport.com/images/items/900/TLD/TLDY0AF/X001.jpg" alt="Card-img" style={{height: "200px", width: "200px", display: "block"}}/> | |||||
| </div> | |||||
| {/* <div className={classes.imgCardOverlay}> | |||||
| <div align="center" style={{marginTop:"120px"}}> | |||||
| <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank"> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>For More Info | |||||
| </Button> | |||||
| </div> | |||||
| </div> */} | |||||
| <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}> | |||||
| <Card style={{width: "19rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "200px", display: "block"}} className={classes.imgCardTop} src={Helmet}/> | |||||
| </div> | |||||
| </Card> | </Card> | ||||
| </Grid> | </Grid> | ||||
| <Grid> | |||||
| <Card style={{height: "250px", width: "400px", padding:"20px"}}> | |||||
| <div align="center"> | |||||
| <img className={classes.imgCard} src="https://static.wixstatic.com/media/bb08a6_fe756d074abc4e4c86ed0fe0134e50a5~mv2.jpg/v1/fill/w_960,h_429,al_c,q_85/bb08a6_fe756d074abc4e4c86ed0fe0134e50a5~mv2.webp" alt="Card-img" style={{height: "200px", width: "350px", display: "block"}}/> | |||||
| </div> | |||||
| {/* <div className={classes.imgCardOverlay}> | |||||
| <div align="center" style={{marginTop:"120px"}}> | |||||
| <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank"> | |||||
| <Icon className={classes.icons}>open_in_new</Icon>For More Info | |||||
| </Button> | |||||
| </div> | |||||
| </div> */} | |||||
| <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}> | |||||
| <Card style={{width: "19rem"}}> | |||||
| <div align="center"> | |||||
| <img | |||||
| style={{height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={Accessories}/> | |||||
| </div> | |||||
| </Card> | </Card> | ||||
| </Grid> | </Grid> | ||||
| </GridContainer> | </GridContainer> | ||||
| @@ -55,7 +55,7 @@ export async function getServerSideProps(context) { | |||||
| if (userObj) { | if (userObj) { | ||||
| let sessionId = userObj["partners_login_states"].filter(function (i) { | let sessionId = userObj["partners_login_states"].filter(function (i) { | ||||
| return ( | return ( | ||||
| i.business_partner && i.business_partner.name.toUpperCase() == "YAMAHA" | |||||
| i.business_partner && i.business_partner.name.toUpperCase() == "HINO" | |||||
| ); | ); | ||||
| }); | }); | ||||
| if (sessionId.length != 0) user = userObj["username"]; | if (sessionId.length != 0) user = userObj["username"]; | ||||
| @@ -53,7 +53,7 @@ export async function getServerSideProps(context) { | |||||
| if (userObj) { | if (userObj) { | ||||
| let sessionId = userObj["partners_login_states"].filter(function (i) { | let sessionId = userObj["partners_login_states"].filter(function (i) { | ||||
| return ( | return ( | ||||
| i.business_partner && i.business_partner.name.toUpperCase() == "YAMAHA" | |||||
| i.business_partner && i.business_partner.name.toUpperCase() == "HINO" | |||||
| ); | ); | ||||
| }); | }); | ||||
| if (sessionId.length != 0) user = userObj["username"]; | if (sessionId.length != 0) user = userObj["username"]; | ||||
| @@ -64,8 +64,6 @@ export async function getServerSideProps(context) { | |||||
| detailcarrer = res["DATA"]["carrers"]; | detailcarrer = res["DATA"]["carrers"]; | ||||
| } | } | ||||
| console.log(res); | |||||
| return { | return { | ||||
| props: { user, detailcarrer, backend }, // will be passed to the page component as props | props: { user, detailcarrer, backend }, // will be passed to the page component as props | ||||
| }; | }; | ||||
| @@ -78,7 +78,7 @@ export async function getServerSideProps(context) { | |||||
| if (userObj) { | if (userObj) { | ||||
| let sessionId = userObj["partners_login_states"].filter(function (i) { | let sessionId = userObj["partners_login_states"].filter(function (i) { | ||||
| return ( | return ( | ||||
| i.business_partner && i.business_partner.name.toUpperCase() == "YAMAHA" | |||||
| i.business_partner && i.business_partner.name.toUpperCase() == "HINO" | |||||
| ); | ); | ||||
| }); | }); | ||||
| if (sessionId.length != 0) user = userObj["username"]; | if (sessionId.length != 0) user = userObj["username"]; | ||||
| @@ -5,7 +5,7 @@ import { makeStyles } from "@material-ui/core/styles"; | |||||
| import Header from "components/Header/Header.js"; | import Header from "components/Header/Header.js"; | ||||
| import HeaderHino from "components/Header/HeaderHino.js"; | import HeaderHino from "components/Header/HeaderHino.js"; | ||||
| import FooterHino from "components/Footer/FooterHino.js"; | import FooterHino from "components/Footer/FooterHino.js"; | ||||
| import DataProduct from "pages-sections/honda/product/product.js"; | |||||
| import DataProduct from "pages-sections/hino/product/product.js"; | |||||
| import Parallax from "components/Parallax/Parallax.js"; | import Parallax from "components/Parallax/Parallax.js"; | ||||
| import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | ||||
| @@ -61,7 +61,7 @@ export async function getServerSideProps(context) { | |||||
| if (userObj) { | if (userObj) { | ||||
| let sessionId = userObj["partners_login_states"].filter(function (i) { | let sessionId = userObj["partners_login_states"].filter(function (i) { | ||||
| return ( | return ( | ||||
| i.business_partner && i.business_partner.name.toUpperCase() == "SUZUKI" | |||||
| i.business_partner && i.business_partner.name.toUpperCase() == "HINO" | |||||
| ); | ); | ||||
| }); | }); | ||||
| if (sessionId.length != 0) user = userObj["username"]; | if (sessionId.length != 0) user = userObj["username"]; | ||||
| @@ -0,0 +1,70 @@ | |||||
| import React from "react"; | |||||
| import classNames from "classnames"; | |||||
| import { makeStyles } from "@material-ui/core/styles"; | |||||
| import Header from "components/Header/Header.js"; | |||||
| import HeaderLinks from "components/Header/HeaderHino.js"; | |||||
| import Footer from "components/Footer/FooterHino.js"; | |||||
| import ProductDetail from "pages-sections/hino/product/product_details.js"; | |||||
| import Parallax from "components/Parallax/Parallax.js"; | |||||
| import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | |||||
| import GetDetailproduct from "api/product/product.js" | |||||
| import Cookies from "cookies"; | |||||
| const useStyles = makeStyles(styles); | |||||
| const ProductDetails = function ({ backend, detailproduct, user, ...props }) { | |||||
| const classes = useStyles(); | |||||
| const { ...rest } = props; | |||||
| return ( | |||||
| <div> | |||||
| <Header | |||||
| rightLinks={<HeaderLinks username={user} />} | |||||
| fixed | |||||
| color="info" | |||||
| changeColorOnScroll={{ | |||||
| height: 400, | |||||
| color: "white" | |||||
| }} | |||||
| {...rest} | |||||
| /> | |||||
| <Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px"/> | |||||
| <div className={classNames(classes.main, classes.mainRaised)}> | |||||
| <ProductDetail detailproduct={detailproduct} backend={backend}/> | |||||
| </div> | |||||
| <Footer /> | |||||
| </div> | |||||
| ); | |||||
| } | |||||
| export default ProductDetails; | |||||
| export async function getServerSideProps(context) { | |||||
| var {query} = context; | |||||
| var detailproduct = []; | |||||
| const backend = process.env.BACKEND_SERVER_URI; | |||||
| var { req, resp } = context; | |||||
| const cookies = new Cookies(req, resp); | |||||
| var user = ""; | |||||
| var userObj = (await cookies.get("user")) | |||||
| ? JSON.parse(await cookies.get("user")) | |||||
| : null; | |||||
| if (userObj) { | |||||
| let sessionId = userObj["partners_login_states"].filter(function (i) { | |||||
| return ( | |||||
| i.business_partner && i.business_partner.name.toUpperCase() == "HINO" | |||||
| ); | |||||
| }); | |||||
| if (sessionId.length != 0) user = userObj["username"]; | |||||
| } | |||||
| var res = await GetDetailproduct.GetDetailProduct(query.s||0); | |||||
| if (res["STATUS"] === 1) { | |||||
| detailproduct = res["DATA"]["products"]; | |||||
| } | |||||
| return { | |||||
| props: { detailproduct, backend, user }, // will be passed to the page component as props | |||||
| }; | |||||
| } | |||||
| @@ -55,7 +55,7 @@ export async function getServerSideProps(context) { | |||||
| if (userObj) { | if (userObj) { | ||||
| let sessionId = userObj["partners_login_states"].filter(function (i) { | let sessionId = userObj["partners_login_states"].filter(function (i) { | ||||
| return ( | return ( | ||||
| i.business_partner && i.business_partner.name.toUpperCase() == "YAMAHA" | |||||
| i.business_partner && i.business_partner.name.toUpperCase() == "HINO" | |||||
| ); | ); | ||||
| }); | }); | ||||
| if (sessionId.length != 0) user = userObj["username"]; | if (sessionId.length != 0) user = userObj["username"]; | ||||
| @@ -55,7 +55,7 @@ export async function getServerSideProps(context) { | |||||
| if (userObj) { | if (userObj) { | ||||
| let sessionId = userObj["partners_login_states"].filter(function (i) { | let sessionId = userObj["partners_login_states"].filter(function (i) { | ||||
| return ( | return ( | ||||
| i.business_partner && i.business_partner.name.toUpperCase() == "YAMAHA" | |||||
| i.business_partner && i.business_partner.name.toUpperCase() == "HONDA" | |||||
| ); | ); | ||||
| }); | }); | ||||
| if (sessionId.length != 0) user = userObj["username"]; | if (sessionId.length != 0) user = userObj["username"]; | ||||
| @@ -53,7 +53,7 @@ export async function getServerSideProps(context) { | |||||
| if (userObj) { | if (userObj) { | ||||
| let sessionId = userObj["partners_login_states"].filter(function (i) { | let sessionId = userObj["partners_login_states"].filter(function (i) { | ||||
| return ( | return ( | ||||
| i.business_partner && i.business_partner.name.toUpperCase() == "YAMAHA" | |||||
| i.business_partner && i.business_partner.name.toUpperCase() == "HONDA" | |||||
| ); | ); | ||||
| }); | }); | ||||
| if (sessionId.length != 0) user = userObj["username"]; | if (sessionId.length != 0) user = userObj["username"]; | ||||
| @@ -64,8 +64,6 @@ export async function getServerSideProps(context) { | |||||
| detailcarrer = res["DATA"]["carrers"]; | detailcarrer = res["DATA"]["carrers"]; | ||||
| } | } | ||||
| console.log(res); | |||||
| return { | return { | ||||
| props: { user, detailcarrer, backend }, // will be passed to the page component as props | props: { user, detailcarrer, backend }, // will be passed to the page component as props | ||||
| }; | }; | ||||
| @@ -78,7 +78,7 @@ export async function getServerSideProps(context) { | |||||
| if (userObj) { | if (userObj) { | ||||
| let sessionId = userObj["partners_login_states"].filter(function (i) { | let sessionId = userObj["partners_login_states"].filter(function (i) { | ||||
| return ( | return ( | ||||
| i.business_partner && i.business_partner.name.toUpperCase() == "YAMAHA" | |||||
| i.business_partner && i.business_partner.name.toUpperCase() == "HONDA" | |||||
| ); | ); | ||||
| }); | }); | ||||
| if (sessionId.length != 0) user = userObj["username"]; | if (sessionId.length != 0) user = userObj["username"]; | ||||
| @@ -61,7 +61,7 @@ export async function getServerSideProps(context) { | |||||
| if (userObj) { | if (userObj) { | ||||
| let sessionId = userObj["partners_login_states"].filter(function (i) { | let sessionId = userObj["partners_login_states"].filter(function (i) { | ||||
| return ( | return ( | ||||
| i.business_partner && i.business_partner.name.toUpperCase() == "SUZUKI" | |||||
| i.business_partner && i.business_partner.name.toUpperCase() == "HONDA" | |||||
| ); | ); | ||||
| }); | }); | ||||
| if (sessionId.length != 0) user = userObj["username"]; | if (sessionId.length != 0) user = userObj["username"]; | ||||
| @@ -0,0 +1,70 @@ | |||||
| import React from "react"; | |||||
| import classNames from "classnames"; | |||||
| import { makeStyles } from "@material-ui/core/styles"; | |||||
| import Header from "components/Header/Header.js"; | |||||
| import HeaderLinks from "components/Header/HeaderHonda.js"; | |||||
| import Footer from "components/Footer/FooterHonda.js"; | |||||
| import ProductDetail from "pages-sections/honda/product/product_details.js"; | |||||
| import Parallax from "components/Parallax/Parallax.js"; | |||||
| import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | |||||
| import GetDetailproduct from "api/product/product.js" | |||||
| import Cookies from "cookies"; | |||||
| const useStyles = makeStyles(styles); | |||||
| const ProductDetails = function ({ backend, detailproduct, user, ...props }) { | |||||
| const classes = useStyles(); | |||||
| const { ...rest } = props; | |||||
| return ( | |||||
| <div> | |||||
| <Header | |||||
| rightLinks={<HeaderLinks username={user} />} | |||||
| fixed | |||||
| color="info" | |||||
| changeColorOnScroll={{ | |||||
| height: 400, | |||||
| color: "white" | |||||
| }} | |||||
| {...rest} | |||||
| /> | |||||
| <Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px"/> | |||||
| <div className={classNames(classes.main, classes.mainRaised)}> | |||||
| <ProductDetail detailproduct={detailproduct} backend={backend}/> | |||||
| </div> | |||||
| <Footer /> | |||||
| </div> | |||||
| ); | |||||
| } | |||||
| export default ProductDetails; | |||||
| export async function getServerSideProps(context) { | |||||
| var {query} = context; | |||||
| var detailproduct = []; | |||||
| const backend = process.env.BACKEND_SERVER_URI; | |||||
| var { req, resp } = context; | |||||
| const cookies = new Cookies(req, resp); | |||||
| var user = ""; | |||||
| var userObj = (await cookies.get("user")) | |||||
| ? JSON.parse(await cookies.get("user")) | |||||
| : null; | |||||
| if (userObj) { | |||||
| let sessionId = userObj["partners_login_states"].filter(function (i) { | |||||
| return ( | |||||
| i.business_partner && i.business_partner.name.toUpperCase() == "HONDA" | |||||
| ); | |||||
| }); | |||||
| if (sessionId.length != 0) user = userObj["username"]; | |||||
| } | |||||
| var res = await GetDetailproduct.GetDetailProduct(query.s||0); | |||||
| if (res["STATUS"] === 1) { | |||||
| detailproduct = res["DATA"]["products"]; | |||||
| } | |||||
| return { | |||||
| props: { detailproduct, backend, user }, // will be passed to the page component as props | |||||
| }; | |||||
| } | |||||
| @@ -55,7 +55,7 @@ export async function getServerSideProps(context) { | |||||
| if (userObj) { | if (userObj) { | ||||
| let sessionId = userObj["partners_login_states"].filter(function (i) { | let sessionId = userObj["partners_login_states"].filter(function (i) { | ||||
| return ( | return ( | ||||
| i.business_partner && i.business_partner.name.toUpperCase() == "YAMAHA" | |||||
| i.business_partner && i.business_partner.name.toUpperCase() == "HONDA" | |||||
| ); | ); | ||||
| }); | }); | ||||
| if (sessionId.length != 0) user = userObj["username"]; | if (sessionId.length != 0) user = userObj["username"]; | ||||