Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 

119 linhas
6.7 KiB

  1. import React, { Component } from "react";
  2. import { makeStyles } from "@material-ui/core/styles";
  3. import Button from "components/CustomButtons/Button.js";
  4. import Icon from "@material-ui/core/Icon";
  5. import GridContainer from "components/Grid/GridContainer.js";
  6. import Grid from '@material-ui/core/Grid';
  7. import Card from "components/Card/Card.js";
  8. import SnackbarContent from "components/Snackbar/SnackbarContent.js";
  9. import imagesStyles from "assets/jss/nextjs-material-kit/imagesStyles.js";
  10. import { cardTitle } from "assets/jss/nextjs-material-kit.js";
  11. const styles = {
  12. ...imagesStyles,
  13. cardTitle,
  14. };
  15. const useStyles = makeStyles(styles);
  16. const DataFeature = function ({ backend, service, ...props }) {
  17. const classes = useStyles();
  18. return (
  19. <div className={classes.section} id="notifications">
  20. <div align="center" className={classes.section} id="notifications">
  21. <SnackbarContent
  22. message={
  23. <h4>Feature Product</h4>
  24. }
  25. align="center"
  26. color="info"
  27. />
  28. </div>
  29. <GridContainer justify="center" style={{padding:"50px", marginTop:"-70px"}}>
  30. <Grid>
  31. <Card style={{height: "250px", width: "400px", padding:"20px"}}>
  32. <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"}}/>
  33. {/* <div className={classes.imgCardOverlay}>
  34. <div align="center" style={{marginTop:"120px"}}>
  35. <Button color="white" href="https://www.instagram.com/yamahaindonesia/" target="_blank">
  36. <Icon className={classes.icons}>open_in_new</Icon>For More Info
  37. </Button>
  38. </div>
  39. </div> */}
  40. </Card>
  41. </Grid>
  42. <Grid>
  43. <Card style={{height: "250px", width: "400px", padding:"20px"}}>
  44. <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"}}/>
  45. {/* <div className={classes.imgCardOverlay}>
  46. <div align="center" style={{marginTop:"120px"}}>
  47. <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank">
  48. <Icon className={classes.icons}>open_in_new</Icon>For More Info
  49. </Button>
  50. </div>
  51. </div> */}
  52. </Card>
  53. </Grid>
  54. <Grid>
  55. <Card style={{height: "250px", width: "400px", padding:"20px"}}>
  56. <div align="center">
  57. <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"}}/>
  58. </div>
  59. {/* <div className={classes.imgCardOverlay}>
  60. <div align="center" style={{marginTop:"120px"}}>
  61. <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank">
  62. <Icon className={classes.icons}>open_in_new</Icon>For More Info
  63. </Button>
  64. </div>
  65. </div> */}
  66. </Card>
  67. </Grid>
  68. <Grid>
  69. <Card style={{height: "250px", width: "400px", padding:"20px"}}>
  70. <div align="center">
  71. <img className={classes.imgCard} src="https://aomc.mx/mm5/graphics/00000001/X0779100X.jpg" alt="Card-img" style={{height: "200px", width: "200px", display: "block"}}/>
  72. </div>
  73. {/* <div className={classes.imgCardOverlay}>
  74. <div align="center" style={{marginTop:"120px"}}>
  75. <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank">
  76. <Icon className={classes.icons}>open_in_new</Icon>For More Info
  77. </Button>
  78. </div>
  79. </div> */}
  80. </Card>
  81. </Grid>
  82. <Grid>
  83. <Card style={{height: "250px", width: "400px", padding:"20px"}}>
  84. <div align="center">
  85. <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"}}/>
  86. </div>
  87. {/* <div className={classes.imgCardOverlay}>
  88. <div align="center" style={{marginTop:"120px"}}>
  89. <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank">
  90. <Icon className={classes.icons}>open_in_new</Icon>For More Info
  91. </Button>
  92. </div>
  93. </div> */}
  94. </Card>
  95. </Grid>
  96. <Grid>
  97. <Card style={{height: "250px", width: "400px", padding:"20px"}}>
  98. <div align="center">
  99. <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"}}/>
  100. </div>
  101. {/* <div className={classes.imgCardOverlay}>
  102. <div align="center" style={{marginTop:"120px"}}>
  103. <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank">
  104. <Icon className={classes.icons}>open_in_new</Icon>For More Info
  105. </Button>
  106. </div>
  107. </div> */}
  108. </Card>
  109. </Grid>
  110. </GridContainer>
  111. </div>
  112. );
  113. }
  114. export default DataFeature;