@@ -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"]; | ||||