@@ -11,6 +11,7 @@ | |||||
/out | /out | ||||
# misc | # misc | ||||
.env | |||||
.DS_Store | .DS_Store | ||||
.env.local | .env.local | ||||
.env.development.local | .env.development.local | ||||
@@ -0,0 +1,20 @@ | |||||
import apollo from "../lib/apollo.js"; | |||||
async function GET(token="") { | |||||
var res = await apollo.query( | |||||
` | |||||
query{ | |||||
businessPartners | |||||
{ | |||||
name | |||||
} | |||||
} | |||||
`, | |||||
token | |||||
); | |||||
return res; | |||||
} | |||||
module.exports = { | |||||
GET: GET, | |||||
}; |
@@ -0,0 +1,45 @@ | |||||
.card { | |||||
background: white; | |||||
margin: auto; | |||||
margin-top: 5%; | |||||
max-width: 30%; | |||||
padding: 20px 50px; | |||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); | |||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1); | |||||
} | |||||
.card:hover { | |||||
border-top-left-radius: 10px; | |||||
border-bottom-left-radius: 10px; | |||||
animation-name: example; | |||||
animation-duration: 0.25s; | |||||
border-left: 8px solid red; | |||||
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); | |||||
} | |||||
button { | |||||
border:none; | |||||
background: red; | |||||
color: #f0f0f2; | |||||
border-radius: 5px; | |||||
padding: 5px; | |||||
} | |||||
button:hover { | |||||
border-right: 2px solid black; | |||||
} | |||||
h1 { | |||||
text-transform: uppercase; | |||||
} | |||||
p { | |||||
text-align: justify; | |||||
} | |||||
@keyframes example { | |||||
0% {border-left: 2px solid #ffffff;} | |||||
25% {border-left: 3px solid #ffe6e6;} | |||||
50% {border-left: 4px solid #ff8080;} | |||||
100% {border-left: 5px solid #ff0000;} | |||||
} |
@@ -31,6 +31,9 @@ export default function Footer(props) { | |||||
<div className={classes.container}> | <div className={classes.container}> | ||||
<div className={classes.left}> | <div className={classes.left}> | ||||
<List className={classes.list}> | <List className={classes.list}> | ||||
{/* <ListItem className={classes.inlineBlock}> | |||||
<img className={classes.imgCard} src="https://1.bp.blogspot.com/-J9AsxdwrF-Y/Wn70KyBApaI/AAAAAAAACRo/LTy3zrALzhckryd9QPi_KuVyWvwFMZyMQCLcBGAs/s640/TG.png" width="250px"/> | |||||
</ListItem> */} | |||||
<ListItem className={classes.inlineBlock}> | <ListItem className={classes.inlineBlock}> | ||||
<a | <a | ||||
href="https://www.creative-tim.com/?ref=njsmk-footer" | href="https://www.creative-tim.com/?ref=njsmk-footer" | ||||
@@ -25,6 +25,9 @@ export default function HeaderLinks(props) { | |||||
return ( | return ( | ||||
<List className={classes.list}> | <List className={classes.list}> | ||||
<ListItem className={classes.listItem}> | <ListItem className={classes.listItem}> | ||||
<img src="https://1.bp.blogspot.com/-J9AsxdwrF-Y/Wn70KyBApaI/AAAAAAAACRo/LTy3zrALzhckryd9QPi_KuVyWvwFMZyMQCLcBGAs/s640/TG.png" width="180px"/> | |||||
</ListItem> | |||||
<ListItem className={classes.listItem}> | |||||
<Button | <Button | ||||
href="/components" | href="/components" | ||||
color="transparent" | color="transparent" | ||||
@@ -44,7 +47,10 @@ export default function HeaderLinks(props) { | |||||
}} | }} | ||||
buttonIcon={Apps} | buttonIcon={Apps} | ||||
dropdownList={[ | dropdownList={[ | ||||
<Link href="/service"> | |||||
<Link href="/product"> | |||||
<a className={classes.dropdownLink}>Product</a> | |||||
</Link>, | |||||
<Link href="https://booking.thamrin.co.id/"> | |||||
<a className={classes.dropdownLink}>Service</a> | <a className={classes.dropdownLink}>Service</a> | ||||
</Link>, | </Link>, | ||||
<Link href="/testdrive"> | <Link href="/testdrive"> | ||||
@@ -105,7 +111,7 @@ export default function HeaderLinks(props) { | |||||
<Link href="http://www.emilia-hotel.com/"> | <Link href="http://www.emilia-hotel.com/"> | ||||
<a className={classes.dropdownLink}>Hotel Emilia</a> | <a className={classes.dropdownLink}>Hotel Emilia</a> | ||||
</Link>, | </Link>, | ||||
<Link href="https://www.hino.co.id/"> | |||||
<Link href="http://homes.thamrin.xyz/"> | |||||
<a className={classes.dropdownLink}>Thamrin Home</a> | <a className={classes.dropdownLink}>Thamrin Home</a> | ||||
</Link>, | </Link>, | ||||
<Link href="https://www.hino.co.id/"> | <Link href="https://www.hino.co.id/"> | ||||
@@ -120,7 +126,7 @@ export default function HeaderLinks(props) { | |||||
</Button> | </Button> | ||||
</ListItem> | </ListItem> | ||||
<ListItem className={classes.listItem}> | <ListItem className={classes.listItem}> | ||||
<Button color="transparent" className={classes.navLink}> | |||||
<Button href="/chart" color="transparent" className={classes.navLink}> | |||||
<Chart className={classes.icons} /> | <Chart className={classes.icons} /> | ||||
</Button> | </Button> | ||||
</ListItem> | </ListItem> | ||||
@@ -131,7 +137,7 @@ export default function HeaderLinks(props) { | |||||
color="info" | color="info" | ||||
round | round | ||||
> | > | ||||
Login / Register | |||||
Login | |||||
</Button> | </Button> | ||||
</ListItem> | </ListItem> | ||||
</List> | </List> | ||||
@@ -40,7 +40,7 @@ export default function PageChange(props) { | |||||
<CircularProgress className={classes.progress} /> | <CircularProgress className={classes.progress} /> | ||||
</div> | </div> | ||||
<h4 className={classes.title}> | <h4 className={classes.title}> | ||||
Loading page contents for: {props.path} | |||||
Thamrin Group | |||||
</h4> | </h4> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -0,0 +1,6 @@ | |||||
// Apollo Value Configuration | |||||
const ApolloConfig = { | |||||
graphql_uri: process.env.GRAPHQL_URI, | |||||
}; | |||||
export default ApolloConfig; |
@@ -0,0 +1,68 @@ | |||||
import { | |||||
ApolloClient, | |||||
InMemoryCache, | |||||
gql, | |||||
useQuery, | |||||
createHttpLink, | |||||
} from "@apollo/client"; | |||||
import { createUploadLink } from "apollo-upload-client"; | |||||
import ApolloConfig from "../config/apollo-config"; | |||||
function initApollo(token) { | |||||
const httpLink = createUploadLink({ | |||||
uri: ApolloConfig.graphql_uri, | |||||
headers: | |||||
token != "" | |||||
? { | |||||
Authorization: `Bearer ${token}`, | |||||
} | |||||
: null, | |||||
}); | |||||
return new ApolloClient({ | |||||
ssrMode: false, | |||||
cache: new InMemoryCache({ | |||||
addTypename: false, | |||||
}), | |||||
link: httpLink, | |||||
}); | |||||
} | |||||
async function query(query, token = "", variables = {}, cache = false) { | |||||
const client = initApollo(token); | |||||
var res; | |||||
try { | |||||
var sql = await client.query({ | |||||
query: gql` | |||||
${query} | |||||
`, | |||||
variables: variables, | |||||
fetchPolicy: cache ? "cache-first" : "no-cache", | |||||
}); | |||||
res = { STATUS: 1, DATA: sql.data }; | |||||
} catch (e) { | |||||
res = { STATUS: 0, DATA: e }; | |||||
} | |||||
return res; | |||||
} | |||||
async function mutation(mutation, token = "", variables = {}) { | |||||
const client = initApollo(token); | |||||
var res; | |||||
try { | |||||
var sql = await client.mutate({ | |||||
mutation: gql` | |||||
${mutation} | |||||
`, | |||||
variables: variables, | |||||
}); | |||||
res = { STATUS: 1, DATA: sql.data }; | |||||
} catch (e) { | |||||
res = { STATUS: 0, DATA: e }; | |||||
} | |||||
return res; | |||||
} | |||||
module.exports = { | |||||
query: query, | |||||
mutation: mutation, | |||||
}; |
@@ -3,10 +3,15 @@ const withImages = require("next-images"); | |||||
const withSass = require("@zeit/next-sass"); | const withSass = require("@zeit/next-sass"); | ||||
const webpack = require("webpack"); | const webpack = require("webpack"); | ||||
const path = require("path"); | const path = require("path"); | ||||
require('dotenv').config() | |||||
module.exports = withPlugins([[withSass], [withImages]], { | module.exports = withPlugins([[withSass], [withImages]], { | ||||
env: { | |||||
API_URL: process.env.API_URL | |||||
}, | |||||
webpack(config, options) { | webpack(config, options) { | ||||
config.resolve.modules.push(path.resolve("./")); | config.resolve.modules.push(path.resolve("./")); | ||||
return config; | return config; | ||||
} | } | ||||
}); | |||||
}); |
@@ -36,7 +36,9 @@ | |||||
"@material-ui/core": "4.9.13", | "@material-ui/core": "4.9.13", | ||||
"@material-ui/icons": "4.9.1", | "@material-ui/icons": "4.9.1", | ||||
"@zeit/next-sass": "1.0.1", | "@zeit/next-sass": "1.0.1", | ||||
"apollo": "^2.32.1", | |||||
"classnames": "2.2.6", | "classnames": "2.2.6", | ||||
"dotenv": "^8.2.0", | |||||
"mdbreact": "^5.0.1", | "mdbreact": "^5.0.1", | ||||
"moment": "2.25.3", | "moment": "2.25.3", | ||||
"next": "9.3.6", | "next": "9.3.6", | ||||
@@ -54,6 +56,8 @@ | |||||
"react-swipeable-views": "0.13.9", | "react-swipeable-views": "0.13.9", | ||||
"rsuite": "^4.8.6", | "rsuite": "^4.8.6", | ||||
"styled-components": "5.1.0", | "styled-components": "5.1.0", | ||||
"webpack": "4.43.0" | |||||
"webpack": "4.43.0", | |||||
"apollo-upload-client": "^14.1.3", | |||||
"graphql": "^15.3.0" | |||||
} | } | ||||
} | } |
@@ -1,35 +1,34 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// nodejs library that concatenates classes | |||||
import classNames from "classnames"; | |||||
// @material-ui/core components | // @material-ui/core components | ||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
// @material-ui/icons | |||||
import Dashboard from "@material-ui/icons/Dashboard"; | |||||
import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore"; | |||||
import GridContainer from "components/Grid/GridContainer.js"; | |||||
import GridItem from "components/Grid/GridItem.js"; | |||||
import NavPills from "components/NavPills/NavPills.js"; | |||||
// component | |||||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | |||||
import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
import CardBody from "components/Card/CardBody.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"; | |||||
const useStyles = makeStyles(styles); | const useStyles = makeStyles(styles); | ||||
export default function ProfilePage(props) { | |||||
export default function SectionNotifications() { | |||||
const classes = useStyles(); | const classes = useStyles(); | ||||
const { ...rest } = props; | |||||
const imageClasses = classNames( | |||||
classes.imgRaised, | |||||
classes.imgRoundedCircle, | |||||
classes.imgFluid | |||||
); | |||||
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | |||||
return ( | return ( | ||||
<h1>About Us Page</h1> | |||||
<div> | |||||
<Card align="center" style={{padding:"5px"}}> | |||||
<img className={classes.imgCardTop} src="http://3.bp.blogspot.com/-_dTNAAE-TMY/VL3Zyiti2OI/AAAAAAAAAT0/YSd7Ok_3I0k/s1600/Thamrin-brother-loker.png"/> | |||||
<CardBody> | |||||
<h1 className={classes.cardTitle}><b>About Us</b></h1> | |||||
<p>Thamrin Group adalah perusahaan terkemuka di Sumatera Selatan & Bengkulu dengan fokus bisnis pada sektor otomotif dan properti</p> | |||||
<h3>Visi</h3> | |||||
<p>Berdampak bagi masyarakat melalui SDM yang dimiliki, pelayanan prima & pengembangan usaha secara berkelanjutan dengan membangun perusahaan yang terpercaya & memiliki reputasi yang baik</p> | |||||
<h3>Misi</h3> | |||||
<p>1. Melayani 21,7 juta pelanggan di tahun 2022</p> | |||||
<p>2. Mengembangkan pemimpin yang sukses</p> | |||||
<p>3. Mengelola proses administrasi yang simple & excellent</p> | |||||
<p>4. Mendukung continuous improvement</p> | |||||
</CardBody> | |||||
</Card> | |||||
</div> | |||||
); | ); | ||||
} | } |
@@ -1,12 +1,16 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// nodejs library that concatenates classes | // nodejs library that concatenates classes | ||||
import classNames from "classnames"; | import classNames from "classnames"; | ||||
// @material-ui/core components | // @material-ui/core components | ||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
// @material-ui/icons | // @material-ui/icons | ||||
import Dashboard from "@material-ui/icons/Dashboard"; | import Dashboard from "@material-ui/icons/Dashboard"; | ||||
import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore"; | import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore"; | ||||
// Component | |||||
import GridContainer from "components/Grid/GridContainer.js"; | import GridContainer from "components/Grid/GridContainer.js"; | ||||
import GridItem from "components/Grid/GridItem.js"; | import GridItem from "components/Grid/GridItem.js"; | ||||
import NavPills from "components/NavPills/NavPills.js"; | import NavPills from "components/NavPills/NavPills.js"; | ||||
@@ -15,7 +19,6 @@ import CardBody from "components/Card/CardBody.js"; | |||||
import CardHeader from "components/Card/CardHeader.js"; | import CardHeader from "components/Card/CardHeader.js"; | ||||
import CardFooter from "components/Card/CardFooter.js"; | 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"; | ||||
const useStyles = makeStyles(styles); | const useStyles = makeStyles(styles); | ||||
@@ -30,6 +33,72 @@ export default function ProfilePage(props) { | |||||
); | ); | ||||
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | ||||
return ( | return ( | ||||
<h1>Carrer Page</h1> | |||||
<Card className={classes.textCenter}> | |||||
<div align="center"> | |||||
<CardHeader color="info">Thamrin Group Carrer</CardHeader> | |||||
</div> | |||||
<CardBody> | |||||
<div align="center"> | |||||
<h2>Carrer & Job Vacancies</h2> | |||||
</div> | |||||
<GridContainer justify="center"> | |||||
<GridItem> | |||||
<NavPills | |||||
alignCenter | |||||
color="primary" | |||||
tabs={[ | |||||
{ | |||||
tabButton: "S1 & D3", | |||||
tabIcon: Dashboard, | |||||
tabContent: ( | |||||
<GridContainer justify="center"> | |||||
</GridContainer> | |||||
), | |||||
}, | |||||
{ | |||||
tabButton: "SMA / SMK / MA", | |||||
tabIcon: Dashboard, | |||||
tabContent: ( | |||||
<GridContainer justify="center"> | |||||
</GridContainer> | |||||
), | |||||
}, | |||||
{ | |||||
tabButton: "Information", | |||||
tabIcon: Dashboard, | |||||
tabContent: ( | |||||
<GridContainer justify="center"> | |||||
</GridContainer> | |||||
), | |||||
}, | |||||
{ | |||||
tabButton: "Reqruitment Process", | |||||
tabIcon: Dashboard, | |||||
tabContent: ( | |||||
<GridContainer justify="center"> | |||||
<GridItem> | |||||
<div align="center"> | |||||
<img | |||||
alt="..." | |||||
style={{ width: "1000px", height: "800px", display: "block" }} | |||||
src=" https://www.yamaha-motor.co.id/uploads/career/big_img/5d305eca19dfb8171.jpg" | |||||
className={navImageClasses} | |||||
/> | |||||
</div> | |||||
</GridItem> | |||||
</GridContainer> | |||||
), | |||||
}, | |||||
]} | |||||
/> | |||||
</GridItem> | |||||
</GridContainer> | |||||
</CardBody> | |||||
<CardFooter className={classes.textMuted} textAlign="center"> | |||||
© 2020 , All Right Reserved by @Thamrin Brother Company | |||||
</CardFooter> | |||||
</Card> | |||||
); | ); | ||||
} | } |
@@ -0,0 +1,46 @@ | |||||
import React from "react"; | |||||
// nodejs library that concatenates classes | |||||
import classNames from "classnames"; | |||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | |||||
// @material-ui/icons | |||||
import Dashboard from "@material-ui/icons/Dashboard"; | |||||
import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore"; | |||||
import GridContainer from "components/Grid/GridContainer.js"; | |||||
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 styles from "assets/jss/nextjs-material-kit/pages/profilePage.js"; | |||||
const useStyles = makeStyles(styles); | |||||
export default function ProfilePage(props) { | |||||
const classes = useStyles(); | |||||
const { ...rest } = props; | |||||
const imageClasses = classNames( | |||||
classes.imgRaised, | |||||
classes.imgRoundedCircle, | |||||
classes.imgFluid | |||||
); | |||||
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | |||||
return ( | |||||
<Card className={classes.textCenter}> | |||||
<div align="center"> | |||||
<CardHeader color="info">Home</CardHeader> | |||||
</div> | |||||
<CardBody> | |||||
<div align="center"> | |||||
<h2>Dashboard</h2> | |||||
</div> | |||||
</CardBody> | |||||
<CardFooter className={classes.textMuted} textAlign="center"> | |||||
© 2020 , All Right Reserved by @Thamrin Brother Company | |||||
</CardFooter> | |||||
</Card> | |||||
); | |||||
} |
@@ -1,701 +1,250 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// nodejs library that concatenates classes | |||||
import classNames from "classnames"; | |||||
// @material-ui/core components | // @material-ui/core components | ||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
// @material-ui/icons | |||||
import Dashboard from "@material-ui/icons/Dashboard"; | |||||
import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore"; | |||||
// Component | |||||
import SnackbarContent from "components/Snackbar/SnackbarContent.js"; | |||||
import Clearfix from "components/Clearfix/Clearfix.js"; | |||||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | |||||
import GridContainer from "components/Grid/GridContainer.js"; | import GridContainer from "components/Grid/GridContainer.js"; | ||||
import GridItem from "components/Grid/GridItem.js"; | import GridItem from "components/Grid/GridItem.js"; | ||||
import NavPills from "components/NavPills/NavPills.js"; | |||||
import Card from "components/Card/Card.js"; | |||||
import Grid from '@material-ui/core/Grid'; | |||||
import Paper from '@material-ui/core/Paper'; | |||||
import CardBody from "components/Card/CardBody.js"; | import CardBody from "components/Card/CardBody.js"; | ||||
import CardHeader from "components/Card/CardHeader.js"; | |||||
import CardFooter from "components/Card/CardFooter.js"; | |||||
import Card from "components/Card/Card.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"; | |||||
// react component for creating beautiful carousel | |||||
import Carousel from "react-slick"; | |||||
// @material-ui/icons | |||||
import LocationOn from "@material-ui/icons/LocationOn"; | |||||
import image1 from "assets/img/bg.jpg"; | |||||
import image2 from "assets/img/bg2.png"; | |||||
import image3 from "assets/img/bg3.jpg"; | |||||
// import "assets/css/hover.css"; | |||||
// import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/carouselStyle.js"; | |||||
const useStyles = makeStyles(styles); | const useStyles = makeStyles(styles); | ||||
export default function ProfilePage(props) { | |||||
function SectionNotifications(props) { | |||||
const classes = useStyles(); | const classes = useStyles(); | ||||
const { ...rest } = props; | |||||
const imageClasses = classNames( | |||||
classes.imgRaised, | |||||
classes.imgRoundedCircle, | |||||
classes.imgFluid | |||||
); | |||||
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | |||||
const settings = { | |||||
dots: true, | |||||
infinite: true, | |||||
speed: 500, | |||||
slidesToShow: 1, | |||||
slidesToScroll: 1, | |||||
autoplay: false | |||||
}; | |||||
return ( | return ( | ||||
<Card className={classes.textCenter}> | |||||
<div className={classes.section} id="notifications"> | |||||
<SnackbarContent | |||||
message={ | |||||
<span> | |||||
<b>Thamrin Group</b> bersama Anda melawan COVID-19. Untuk informasi silakan klik di sini. | |||||
</span> | |||||
} | |||||
align="center" | |||||
color="danger" | |||||
icon="info_outline" | |||||
/> | |||||
<Clearfix /> | |||||
<div className={classes.section}> | |||||
<div className={classes.container}> | |||||
<GridContainer> | |||||
<GridItem className={classes.marginAuto}> | |||||
<Card carousel> | |||||
<Carousel {...settings}> | |||||
<div> | |||||
<img src={image1} alt="First slide" className="slick-image" /> | |||||
</div> | |||||
<div> | |||||
<img src={image2} alt="Second slide" className="slick-image"/> | |||||
</div> | |||||
<div> | |||||
<img src={image3} alt="Third slide" className="slick-image" /> | |||||
</div> | |||||
</Carousel> | |||||
</Card> | |||||
</GridItem> | |||||
</GridContainer> | |||||
</div> | |||||
</div> | |||||
<div align="center"> | <div align="center"> | ||||
<CardHeader color="info">Product</CardHeader> | |||||
<h2>Our Service</h2> | |||||
</div> | </div> | ||||
<CardBody> | |||||
<div align="center"> | |||||
<h2>Product & Facilities</h2> | |||||
</div> | |||||
<GridContainer justify="center"> | |||||
<GridItem> | |||||
<NavPills | |||||
alignCenter | |||||
color="primary" | |||||
tabs={[ | |||||
{ | |||||
tabButton: "Matic", | |||||
tabIcon: Dashboard, | |||||
tabContent: ( | |||||
<GridContainer justify="center"> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "350px", display: "block" }} | |||||
src="https://www.yamaha-motor.co.id/uploads/products/2020020510350637523I93808.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>ALL NEW NMAX STANDART VERSION</h2> | |||||
<h4>Rp.30.000.000,00 – Rp.37.692.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "350px", display: "block" }} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-Std-Htm.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>AEROX 155 VVA</h2> | |||||
<h4>Rp.25.927.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-R-Version.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>AEROX 155 VVA R – VERSION</h2> | |||||
<h4>Rp.27.110.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-S-Ver-Red.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>AEROX 155 VVA S – VERSION</h2> | |||||
<h4>Rp.29.744.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="https://i0.wp.com/warungasep.net/wp-content/uploads/2020/02/view-1.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>NMAX ABS / NON ABS 155</h2> | |||||
<h4>Rp.29.571.000,00 – Rp.33.267.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Sporty-Blue-768x744.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>FINO 125 SPORTY / PREMIUM</h2> | |||||
<h4>Rp.19.335.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Grande-Blue-768x744.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>FINO GRANDE 125</h2> | |||||
<h4>Rp.20.155.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-S-Green-768x703.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>MIO S</h2> | |||||
<h4>Rp.18.472.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-M3-CW-Black-768x649.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>NEW MIO M3 125 CW</h2> | |||||
<h4>Rp.17.903.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
</GridContainer> | |||||
), | |||||
}, | |||||
{ | |||||
tabButton: "Sport", | |||||
tabIcon: Dashboard, | |||||
tabContent: ( | |||||
<GridContainer justify="center"> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "350px", display: "block" }} | |||||
src="https://motor.jasasitus.com/wp-content/uploads/2018/11/mio-m3-black.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>NEW MIO M3 AKS SSS</h2> | |||||
<h4>Rp. 18.000.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "350px", display: "block" }} | |||||
src="https://yamaha-berlian-merdeka.com/wp-content/uploads/2018/12/5-1.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>ALL NEW X-RIDE 125</h2> | |||||
<h4>Rp. 19.250.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="https://www.yamaha-motor.co.id/uploads/products/HqVh2xkCTQ2NsYoo3O0M.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>MIO Z</h2> | |||||
<h4>Rp. 17.570.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
</GridContainer> | |||||
), | |||||
}, | |||||
{ | |||||
tabButton: "Moped", | |||||
tabIcon: Dashboard, | |||||
tabContent: ( | |||||
<GridContainer justify="center"> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "350px", display: "block" }} | |||||
src="https://image.cermati.com/v1553589176/f2xpfpfmjf2vnpoesrgf.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>MX KING 150</h2> | |||||
<h4>Rp. 23.425.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "350px", display: "block" }} | |||||
src="https://www.yamaha-motor.co.id/uploads/products/ih2AfZY3h4qhAdKQonpJ.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>NEW JUPITER MX 150</h2> | |||||
<h4>Rp. 20.825.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="https://d2pa5gi5n2e1an.cloudfront.net/id/images/article/10721_ID/2.jpg" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>JUPITER Z1</h2> | |||||
<h4>Rp. 18.600.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="https://yamaha-deta.co.id/assets/themes/default/extra-images/detailproduk/ENERGETIC_WHITE.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>VEGA FORCE CW</h2> | |||||
<h4>Rp. 16.825.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
</GridContainer> | |||||
), | |||||
}, | |||||
{ | |||||
tabButton: "CBU", | |||||
tabIcon: Dashboard, | |||||
tabContent: ( | |||||
<GridContainer justify="center"> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "350px", display: "block" }} | |||||
src="https://www.yamaha-motor.co.id/uploads/products/2020020510350637523I93808.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "350px", display: "block" }} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-Std-Htm.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-R-Version.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-S-Ver-Red.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="https://i0.wp.com/warungasep.net/wp-content/uploads/2020/02/view-1.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Sporty-Blue-768x744.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Grande-Blue-768x744.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-S-Green-768x703.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-M3-CW-Black-768x649.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
</GridContainer> | |||||
), | |||||
}, | |||||
{ | |||||
tabButton: "Sparepart", | |||||
tabIcon: Dashboard, | |||||
tabContent: ( | |||||
<GridContainer justify="center"> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "350px", display: "block" }} | |||||
src="https://www.yamaha-motor.co.id/uploads/products/2020020510350637523I93808.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "350px", display: "block" }} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-Std-Htm.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-R-Version.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-S-Ver-Red.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="https://i0.wp.com/warungasep.net/wp-content/uploads/2020/02/view-1.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Sporty-Blue-768x744.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Grande-Blue-768x744.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-S-Green-768x703.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-M3-CW-Black-768x649.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
</GridContainer> | |||||
), | |||||
}, | |||||
{ | |||||
tabButton: "Aksesoris", | |||||
tabIcon: Dashboard, | |||||
tabContent: ( | |||||
<GridContainer justify="center"> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "350px", display: "block" }} | |||||
src="https://www.yamaha-motor.co.id/uploads/products/2020020510350637523I93808.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "350px", display: "block" }} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-Std-Htm.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-R-Version.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-S-Ver-Red.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="https://i0.wp.com/warungasep.net/wp-content/uploads/2020/02/view-1.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Sporty-Blue-768x744.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Grande-Blue-768x744.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-S-Green-768x703.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-M3-CW-Black-768x649.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
</GridContainer> | |||||
), | |||||
}, | |||||
]} | |||||
/> | |||||
</GridItem> | |||||
</GridContainer> | |||||
</CardBody> | |||||
<CardFooter className={classes.textMuted} textAlign="center"> | |||||
© 2020 , All Right Reserved by @Thamrin Brother Company | |||||
</CardFooter> | |||||
</Card> | |||||
<GridContainer justify="center"> | |||||
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<img | |||||
style={{height: "180px", width: "100%", padding:"20px", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://www.odtap.com/wp-content/uploads/2019/03/delivery.png" | |||||
/> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<img | |||||
style={{height: "180px", width: "100%", padding:"20px", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://i.pinimg.com/736x/fa/22/a1/fa22a1196ecc812fa57366ccf6e1596b.jpg" | |||||
alt="Card-img-cap" | |||||
/> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<img | |||||
style={{height: "180px", width: "100%", padding:"20px", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://cdn-ds.com/media/3402/shopper-assurance-logo.png" | |||||
alt="Card-img-cap" | |||||
/> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
</GridContainer> | |||||
<div align="center"> | |||||
<h2>Our Business Partner</h2> | |||||
</div> | |||||
<GridContainer justify="center"> | |||||
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<div align="center"> | |||||
<img | |||||
style={{height: "180px", width: "300px", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://imgx.gridoto.com/crop/31x4:629x377/750x500/photo/2020/06/28/829813812.jpg" | |||||
/> | |||||
</div> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<div align="center"> | |||||
<img | |||||
style={{height: "180px", width: "270px", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://i.pinimg.com/originals/64/e7/73/64e773194975e702677c5089fc6c8ae2.png" | |||||
alt="Card-img-cap" | |||||
/> | |||||
</div> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<div align="center"> | |||||
<img | |||||
style={{height: "180px", width: "270px", padding:"20px", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://upload.wikimedia.org/wikipedia/id/d/d5/Honda-logo.png" | |||||
alt="Card-img-cap" | |||||
/> | |||||
</div> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<div align="center"> | |||||
<img | |||||
style={{height: "180px", width: "200px", padding:"20px", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://i.pinimg.com/originals/1e/12/a3/1e12a32f6f4838188f71eeb6d48ccc55.png" | |||||
alt="Card-img-cap" | |||||
/> | |||||
</div> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<div align="center"> | |||||
<img | |||||
style={{height: "180px", width: "200px", padding:"20px", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://3.bp.blogspot.com/-hUQJabKTGCg/WfcN66wVQCI/AAAAAAAAAxU/OW8hrgMH6nA-XyYkg6Pt6fNYmbpzY4noACLcBGAs/s1600/softskill.png" | |||||
/> | |||||
</div> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<div align="center"> | |||||
<img | |||||
style={{height: "180px", width: "300px", padding:"20px", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="http://bprberkatsejati.com/wp-content/uploads/2019/03/cover1.jpg" | |||||
alt="Card-img-cap" | |||||
/> | |||||
</div> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<div align="center"> | |||||
<img | |||||
style={{height: "180px", width: "250px", padding:"20px", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://d5b1dwptmw1mf.cloudfront.net/uploads/malls/logo/L1_w_dvWvn_1lsCh-palembang-indah-mall-1479113878_1.jpg" | |||||
alt="Card-img-cap" | |||||
/> | |||||
</div> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<div align="center"> | |||||
<img | |||||
style={{height: "180px", width: "330px", padding:"20px", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://lh3.googleusercontent.com/proxy/5AktadKOHE-SrymxW0Ffgw4P_eKgXjNsuSs9mpTHAfYbm5UMfdbT3vefgtxA8NnbJEUdMYdj5kpQolEu5r-938-T9sHM6ApF1M_k1DgloSP0d7kL5Qeoi_-e6lIuwYa2XR8" | |||||
alt="Card-img-cap" | |||||
/> | |||||
</div> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<div align="center"> | |||||
<img | |||||
style={{height: "180px", width: "330px", padding:"20px", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://3.bp.blogspot.com/-NFjgD_eGwy8/Wn70CKGh5QI/AAAAAAAACRg/7fAzLraWggwc5HJU-KVJUrKYAnKQ52VWgCLcBGAs/s1600/Thamrin%2BHomes.png" | |||||
/> | |||||
</div> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
</GridContainer> | |||||
</div> | |||||
); | ); | ||||
} | } | ||||
export default SectionNotifications; |
@@ -1,35 +1,159 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// nodejs library that concatenates classes | |||||
import classNames from "classnames"; | |||||
// @material-ui/core components | // @material-ui/core components | ||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
// @material-ui/icons | |||||
import Dashboard from "@material-ui/icons/Dashboard"; | |||||
import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore"; | |||||
// component | |||||
import SnackbarContent from "components/Snackbar/SnackbarContent.js"; | |||||
import Clearfix from "components/Clearfix/Clearfix.js"; | |||||
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; | |||||
import Paper from '@material-ui/core/Paper'; | |||||
import Grid from '@material-ui/core/Grid'; | |||||
import GridContainer from "components/Grid/GridContainer.js"; | import GridContainer from "components/Grid/GridContainer.js"; | ||||
import GridItem from "components/Grid/GridItem.js"; | |||||
import NavPills from "components/NavPills/NavPills.js"; | |||||
import Card from "components/Card/Card.js"; | import Card from "components/Card/Card.js"; | ||||
import CardBody from "components/Card/CardBody.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 Button from "components/CustomButtons/Button.js"; | ||||
import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js"; | |||||
import Paginations from "components/Pagination/Pagination.js"; | |||||
const useStyles = makeStyles(styles); | const useStyles = makeStyles(styles); | ||||
export default function ProfilePage(props) { | |||||
export default function SectionNotifications() { | |||||
const classes = useStyles(); | const classes = useStyles(); | ||||
const { ...rest } = props; | |||||
const imageClasses = classNames( | |||||
classes.imgRaised, | |||||
classes.imgRoundedCircle, | |||||
classes.imgFluid | |||||
); | |||||
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | |||||
return ( | return ( | ||||
<h1>Latest News Page</h1> | |||||
<div className={classes.section} id="notifications"> | |||||
<SnackbarContent | |||||
message={ | |||||
<span> | |||||
<b>Thamrin Group</b> bersama Anda melawan COVID-19. Untuk informasi silakan klik di sini. | |||||
</span> | |||||
} | |||||
align="center" | |||||
color="danger" | |||||
icon="info_outline" | |||||
/> | |||||
<Clearfix /> | |||||
<div align="center"> | |||||
<h2>Latest News</h2> | |||||
</div> | |||||
<GridContainer justify="center"> | |||||
<Grid align="center" style={{padding:"5px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<img | |||||
style={{height: "180px", width: "100%", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://www.yamaha-motor.co.id/uploads/content/2021012915132285551O25635.jpg" | |||||
/> | |||||
<CardBody> | |||||
<h4 className={classes.cardTitle}>Dance Seru sambil Menang Banyak? Yuk...</h4> | |||||
<p>Jakarta – Let’s Gear Up! PT Yamaha Indonesia Motor Manufacturing (PT YIMM) mengajak para generasi muda...</p> | |||||
<Button color="info">Read More</Button> | |||||
</CardBody> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"5px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<img | |||||
style={{height: "180px", width: "100%", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://www.yamaha-motor.co.id/uploads/content/2021012810494925493U23162.jpg" | |||||
alt="Card-img-cap" | |||||
/> | |||||
<CardBody> | |||||
<h4 className={classes.cardTitle}>Makin Agresif, Ini Warna Baru MT-25 !</h4> | |||||
<p>Makin Agresif, Ini Warna Baru MT-25 ! Yamaha gencar melakukan penyegaran produk-produknya...</p> | |||||
<Button color="info">Read More</Button> | |||||
</CardBody> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"5px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<img | |||||
style={{height: "180px", width: "100%", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://www.yamaha-motor.co.id/uploads/content/2021012716374767982G99280.jpg" | |||||
alt="Card-img-cap" | |||||
/> | |||||
<CardBody> | |||||
<h4 className={classes.cardTitle}>Awal Tahun 2021, Yamaha Fino 125 Sporty Tampil... </h4> | |||||
<p>Jakarta – Melanjutkan penyegaran warna baru pada Yamaha Fino 125 Premium sebelumnya, kini saatnya...</p> | |||||
<Button color="info">Read More</Button> | |||||
</CardBody> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"5px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<img | |||||
style={{height: "180px", width: "100%", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://www.yamaha-motor.co.id/uploads/content/2021011912521629671C71533.jpg" | |||||
alt="Card-img-cap" | |||||
/> | |||||
<CardBody> | |||||
<h4 className={classes.cardTitle}>Ini Warna Baru Yamaha R15 !</h4> | |||||
<p>Tahun 2021 baru bergulir, Yamaha sudah memanjakan konsumen dengan melansir warna teranyar...</p> | |||||
<Button color="info">Read More</Button> | |||||
</CardBody> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"5px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<img | |||||
style={{height: "180px", width: "100%", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://www.yamaha-motor.co.id/uploads/content/202101141322331084Z7315.jpg" | |||||
alt="Card-img-cap" | |||||
/> | |||||
<CardBody> | |||||
<h4 className={classes.cardTitle}>Awal Tahun 2021, MX King 150 Warna Baru Meluncur </h4> | |||||
<p>Awal tahun 2021 ini dibuka Yamaha dengan merilis warna baru MX King 150 yang kian menonjolkan tampilan...</p> | |||||
<Button color="info">Read More</Button> | |||||
</CardBody> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
<Grid align="center" style={{padding:"5px"}}> | |||||
<Paper className={classes.paper}> | |||||
<Card style={{width: "20rem"}}> | |||||
<img | |||||
style={{height: "180px", width: "100%", display: "block"}} | |||||
className={classes.imgCardTop} | |||||
src="https://www.yamaha-motor.co.id/uploads/content/2020121515490320942H80353.jpg" | |||||
alt="Card-img-cap" | |||||
/> | |||||
<CardBody> | |||||
<h4 className={classes.cardTitle}>Semakin Sporty, Yamaha Luncurkan All New...</h4> | |||||
<p>Jakarta – Sebagai wujud apresiasi terhadap pecinta MotoGP di Indonesia dan semangat sportifitas MotoGP...</p> | |||||
<Button color="info">Read More</Button> | |||||
</CardBody> | |||||
</Card> | |||||
</Paper> | |||||
</Grid> | |||||
</GridContainer> | |||||
<div align="center"> | |||||
<Paginations | |||||
color="info" | |||||
pages={[ | |||||
{ text: 1 }, | |||||
{ text: "..." }, | |||||
{ text: 5 }, | |||||
{ text: 6 }, | |||||
{ active: true, text: 7 }, | |||||
{ text: 8 }, | |||||
{ text: 9 }, | |||||
{ text: "..." }, | |||||
{ text: 12 } | |||||
]} | |||||
/> | |||||
</div> | |||||
</div> | |||||
); | ); | ||||
} | } |
@@ -0,0 +1,491 @@ | |||||
import React from "react"; | |||||
// nodejs library that concatenates classes | |||||
import classNames from "classnames"; | |||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | |||||
// @material-ui/icons | |||||
import Dashboard from "@material-ui/icons/Dashboard"; | |||||
import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore"; | |||||
// Component | |||||
import GridContainer from "components/Grid/GridContainer.js"; | |||||
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"; | |||||
const useStyles = makeStyles(styles); | |||||
export default function ProfilePage(props) { | |||||
const classes = useStyles(); | |||||
const { ...rest } = props; | |||||
const imageClasses = classNames( | |||||
classes.imgRaised, | |||||
classes.imgRoundedCircle, | |||||
classes.imgFluid | |||||
); | |||||
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | |||||
return ( | |||||
<Card className={classes.textCenter}> | |||||
<div align="center"> | |||||
<CardHeader color="info">Product</CardHeader> | |||||
</div> | |||||
<CardBody> | |||||
<div align="center"> | |||||
<h2>Product & Facilities</h2> | |||||
</div> | |||||
<GridContainer justify="center"> | |||||
<GridItem> | |||||
<NavPills | |||||
alignCenter | |||||
color="primary" | |||||
tabs={[ | |||||
{ | |||||
tabButton: "Yamaha", | |||||
tabIcon: Dashboard, | |||||
tabContent: ( | |||||
<GridContainer justify="center"> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "350px", display: "block" }} | |||||
src="https://www.yamaha-motor.co.id/uploads/products/2020020510350637523I93808.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2><a href="/product_detail">ALL NEW NMAX STANDART VERSION</a></h2> | |||||
<h4>Rp.30.000.000,00 – Rp.37.692.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "350px", display: "block" }} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-Std-Htm.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>AEROX 155 VVA</h2> | |||||
<h4>Rp.25.927.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-R-Version.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>AEROX 155 VVA R – VERSION</h2> | |||||
<h4>Rp.27.110.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-S-Ver-Red.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>AEROX 155 VVA S – VERSION</h2> | |||||
<h4>Rp.29.744.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="https://i0.wp.com/warungasep.net/wp-content/uploads/2020/02/view-1.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>NMAX ABS / NON ABS 155</h2> | |||||
<h4>Rp.29.571.000,00 – Rp.33.267.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Sporty-Blue-768x744.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>FINO 125 SPORTY / PREMIUM</h2> | |||||
<h4>Rp.19.335.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Grande-Blue-768x744.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>FINO GRANDE 125</h2> | |||||
<h4>Rp.20.155.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-S-Green-768x703.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>MIO S</h2> | |||||
<h4>Rp.18.472.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-M3-CW-Black-768x649.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>NEW MIO M3 125 CW</h2> | |||||
<h4>Rp.17.903.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "350px", display: "block" }} | |||||
src="https://motor.jasasitus.com/wp-content/uploads/2018/11/mio-m3-black.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>NEW MIO M3 AKS SSS</h2> | |||||
<h4>Rp. 18.000.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "350px", display: "block" }} | |||||
src="https://yamaha-berlian-merdeka.com/wp-content/uploads/2018/12/5-1.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>ALL NEW X-RIDE 125</h2> | |||||
<h4>Rp. 19.250.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="https://www.yamaha-motor.co.id/uploads/products/HqVh2xkCTQ2NsYoo3O0M.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>MIO Z</h2> | |||||
<h4>Rp. 17.570.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "350px", display: "block" }} | |||||
src="https://image.cermati.com/v1553589176/f2xpfpfmjf2vnpoesrgf.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>MX KING 150</h2> | |||||
<h4>Rp. 23.425.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "350px", display: "block" }} | |||||
src="https://www.yamaha-motor.co.id/uploads/products/ih2AfZY3h4qhAdKQonpJ.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>NEW JUPITER MX 150</h2> | |||||
<h4>Rp. 20.825.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="https://d2pa5gi5n2e1an.cloudfront.net/id/images/article/10721_ID/2.jpg" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>JUPITER Z1</h2> | |||||
<h4>Rp. 18.600.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="https://yamaha-deta.co.id/assets/themes/default/extra-images/detailproduk/ENERGETIC_WHITE.png" | |||||
className={navImageClasses} | |||||
/> | |||||
<div align="center"> | |||||
<h2>VEGA FORCE CW</h2> | |||||
<h4>Rp. 16.825.000,00</h4> | |||||
<Button color="info" round> | |||||
<LocalGroceryStoreIcon className={classes.icons} />{" "} | |||||
Buy | |||||
</Button> | |||||
</div> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "350px", display: "block" }} | |||||
src="https://www.yamaha-motor.co.id/uploads/products/2020020510350637523I93808.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ height: "350px", display: "block" }} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-Std-Htm.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-R-Version.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-S-Ver-Red.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="https://i0.wp.com/warungasep.net/wp-content/uploads/2020/02/view-1.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Sporty-Blue-768x744.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Grande-Blue-768x744.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-S-Green-768x703.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
<GridItem xs={12} sm={12} md={4}> | |||||
<img | |||||
alt="..." | |||||
style={{ | |||||
height: "350px", | |||||
width: "100%", | |||||
display: "block", | |||||
}} | |||||
src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-M3-CW-Black-768x649.png" | |||||
className={navImageClasses} | |||||
/> | |||||
</GridItem> | |||||
</GridContainer> | |||||
), | |||||
}, | |||||
{ | |||||
tabButton: "Suzuki", | |||||
tabIcon: Dashboard, | |||||
tabContent: ( | |||||
<GridContainer justify="center"> | |||||
</GridContainer> | |||||
), | |||||
}, | |||||
{ | |||||
tabButton: "Honda", | |||||
tabIcon: Dashboard, | |||||
tabContent: ( | |||||
<GridContainer justify="center"> | |||||
</GridContainer> | |||||
), | |||||
}, | |||||
{ | |||||
tabButton: "Mercedes Benz", | |||||
tabIcon: Dashboard, | |||||
tabContent: ( | |||||
<GridContainer justify="center"> | |||||
</GridContainer> | |||||
), | |||||
}, | |||||
]} | |||||
/> | |||||
</GridItem> | |||||
</GridContainer> | |||||
</CardBody> | |||||
<CardFooter className={classes.textMuted} textAlign="center"> | |||||
© 2020 , All Right Reserved by @Thamrin Brother Company | |||||
</CardFooter> | |||||
</Card> | |||||
); | |||||
} |
@@ -0,0 +1,192 @@ | |||||
import React from "react"; | |||||
// nodejs library that concatenates classes | |||||
import classNames from "classnames"; | |||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | |||||
// @material-ui/icons | |||||
import Dashboard from "@material-ui/icons/Dashboard"; | |||||
import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore"; | |||||
// Component | |||||
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"; | |||||
import Paper from '@material-ui/core/Paper'; | |||||
import image1 from "assets/img/bg.jpg"; | |||||
import image2 from "assets/img/bg2.png"; | |||||
import image3 from "assets/img/bg3.jpg"; | |||||
const useStyles = makeStyles(styles); | |||||
export default function ProfilePage(props) { | |||||
const classes = useStyles(); | |||||
const settings = { | |||||
dots: true, | |||||
infinite: true, | |||||
speed: 500, | |||||
slidesToShow: 1, | |||||
slidesToScroll: 1, | |||||
autoplay: false | |||||
}; | |||||
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | |||||
return ( | |||||
<Card className={classes.textCenter}> | |||||
<div align="center"> | |||||
<CardHeader color="info">Product Detail</CardHeader> | |||||
</div> | |||||
<CardBody> | |||||
<GridContainer justify="center"> | |||||
<Grid align="center" className={classes.marginAuto}> | |||||
<div className={classes.section}> | |||||
<div className={classes.container}> | |||||
<Card carousel style={{width:"700px", height:"400px"}}> | |||||
<Carousel {...settings}> | |||||
<div> | |||||
<img src="https://www.yamaha-motor.co.id/uploads/products/2020020510350637523I93808.png" width="300px" height="400px" alt="First slide" className="slick-image" /> | |||||
</div> | |||||
<div> | |||||
<img src={image2} alt="Second slide" className="slick-image"/> | |||||
</div> | |||||
<div> | |||||
<img src={image3} alt="Third slide" className="slick-image" /> | |||||
</div> | |||||
</Carousel> | |||||
</Card> | |||||
</div> | |||||
</div> | |||||
</Grid> | |||||
<Grid style={{padding:"40px", marginTop:"-30px"}}> | |||||
<h3>ALL NEW NMAX STANDART VERSION</h3> | |||||
<h3>Rp.37.692.000,00</h3> | |||||
<hr></hr> | |||||
<GridContainer justify="center"> | |||||
<Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}> | |||||
<Card className={classes.marginAuto} style={{height: "125px", width: "125px"}}> | |||||
<img src="https://www.yamaha-motor.co.id/uploads/products/2zTfxFltlPOYe5sMFapR-BLUE-CORE-color.png" | |||||
/> | |||||
</Card> | |||||
</Grid> | |||||
<Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}> | |||||
<Card className={classes.marginAuto} style={{height: "125px", width: "125px"}}> | |||||
<img src="https://www.yamaha-motor.co.id/uploads/products/3JWFNLBpLj2ff7JgaSEC-VVA1.png" | |||||
/> | |||||
</Card> | |||||
</Grid> | |||||
<Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}> | |||||
<Card className={classes.marginAuto} style={{height: "125px", width: "125px"}}> | |||||
<img src="https://www.yamaha-motor.co.id/uploads/products/ku13WjySzEsj6LarGvlb-155-CC.png" | |||||
/> | |||||
</Card> | |||||
</Grid> | |||||
</GridContainer> | |||||
<GridContainer justify="center"> | |||||
<Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-50px"}}> | |||||
<Card className={classes.marginAuto} style={{height: "125px", width: "125px"}}> | |||||
<img src="https://www.yamaha-motor.co.id/uploads/products/20200402085616smc40j.png" | |||||
/> | |||||
</Card> | |||||
</Grid> | |||||
<Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-50px"}}> | |||||
<Card className={classes.marginAuto} style={{height: "125px", width: "125px"}}> | |||||
<img src="https://www.yamaha-motor.co.id/uploads/products/amoV2O00jXseztcZ8ilV-smg.png" | |||||
/> | |||||
</Card> | |||||
</Grid> | |||||
<Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-50px"}}> | |||||
<Card className={classes.marginAuto} style={{height: "125px", width: "125px"}}> | |||||
<img src="https://www.yamaha-motor.co.id/uploads/products/201912031806276ll9i9.png" | |||||
/> | |||||
</Card> | |||||
</Grid> | |||||
</GridContainer> | |||||
</Grid> | |||||
</GridContainer> | |||||
<GridContainer style={{marginTop:"-80px"}}> | |||||
<GridItem> | |||||
<NavPills | |||||
color="primary" | |||||
tabs={[ | |||||
{ | |||||
tabButton: "Overview", | |||||
tabIcon: Dashboard, | |||||
tabContent: ( | |||||
<GridContainer justify="center"> | |||||
<GridItem> | |||||
</GridItem> | |||||
</GridContainer> | |||||
), | |||||
}, | |||||
{ | |||||
tabButton: "Specification", | |||||
tabIcon: Dashboard, | |||||
tabContent: ( | |||||
<GridContainer justify="center"> | |||||
<GridItem> | |||||
</GridItem> | |||||
</GridContainer> | |||||
), | |||||
}, | |||||
{ | |||||
tabButton: "Accessories", | |||||
tabIcon: Dashboard, | |||||
tabContent: ( | |||||
<GridContainer justify="center"> | |||||
<GridItem> | |||||
</GridItem> | |||||
</GridContainer> | |||||
), | |||||
}, | |||||
{ | |||||
tabButton: "Film", | |||||
tabIcon: Dashboard, | |||||
tabContent: ( | |||||
<GridContainer justify="center"> | |||||
<GridItem> | |||||
</GridItem> | |||||
</GridContainer> | |||||
), | |||||
}, | |||||
{ | |||||
tabButton: "Credit Simulation", | |||||
tabIcon: Dashboard, | |||||
tabContent: ( | |||||
<GridContainer justify="center"> | |||||
<GridItem> | |||||
</GridItem> | |||||
</GridContainer> | |||||
), | |||||
}, | |||||
{ | |||||
tabButton: "Test Drive", | |||||
tabIcon: Dashboard, | |||||
tabContent: ( | |||||
<GridContainer justify="center"> | |||||
<GridItem> | |||||
</GridItem> | |||||
</GridContainer> | |||||
), | |||||
}, | |||||
]} | |||||
/> | |||||
</GridItem> | |||||
</GridContainer> | |||||
</CardBody> | |||||
<CardFooter className={classes.textMuted} textAlign="center"> | |||||
© 2020 , All Right Reserved by @Thamrin Brother Company | |||||
</CardFooter> | |||||
</Card> | |||||
); | |||||
} |
@@ -24,11 +24,9 @@ export default function Components(props) { | |||||
return ( | return ( | ||||
<div> | <div> | ||||
<Header | <Header | ||||
brand="Thamrin Brothers" | |||||
image={"https://4.bp.blogspot.com/-_68lYYHT0Io/Wn70CMzMPqI/AAAAAAAACRc/JQIcRFnGvxALRh4yHcMNCH5MVjwmrQWWQCLcBGAs/s1600/mercedez.png"} | |||||
rightLinks={<HeaderLinks />} | rightLinks={<HeaderLinks />} | ||||
fixed | fixed | ||||
color="transparent" | |||||
color="info" | |||||
changeColorOnScroll={{ | changeColorOnScroll={{ | ||||
height: 400, | height: 400, | ||||
color: "white" | color: "white" | ||||
@@ -24,11 +24,9 @@ export default function Components(props) { | |||||
return ( | return ( | ||||
<div> | <div> | ||||
<Header | <Header | ||||
brand="Thamrin Brothers" | |||||
image={"https://4.bp.blogspot.com/-_68lYYHT0Io/Wn70CMzMPqI/AAAAAAAACRc/JQIcRFnGvxALRh4yHcMNCH5MVjwmrQWWQCLcBGAs/s1600/mercedez.png"} | |||||
rightLinks={<HeaderLinks />} | rightLinks={<HeaderLinks />} | ||||
fixed | fixed | ||||
color="transparent" | |||||
color="info" | |||||
changeColorOnScroll={{ | changeColorOnScroll={{ | ||||
height: 400, | height: 400, | ||||
color: "white" | color: "white" | ||||
@@ -0,0 +1,56 @@ | |||||
import React from "react"; | |||||
// nodejs library that concatenates classes | |||||
import classNames from "classnames"; | |||||
// react components for routing our app without refresh | |||||
import Link from "next/link"; | |||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | |||||
// @material-ui/icons | |||||
// core components | |||||
import Header from "components/Header/Header.js"; | |||||
import HeaderLinks from "components/Header/HeaderLinks.js"; | |||||
import Footer from "components/Footer/Footer.js"; | |||||
import GridContainer from "components/Grid/GridContainer.js"; | |||||
import GridItem from "components/Grid/GridItem.js"; | |||||
import SectionChart from "pages-sections/Components-Sections/SectionChart.js"; | |||||
import Parallax from "components/Parallax/Parallax.js"; | |||||
import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | |||||
const useStyles = makeStyles(styles); | |||||
export default function Components(props) { | |||||
const classes = useStyles(); | |||||
const { ...rest } = props; | |||||
return ( | |||||
<div> | |||||
<Header | |||||
rightLinks={<HeaderLinks/>} | |||||
fixed | |||||
color="info" | |||||
changeColorOnScroll={{ | |||||
height: 400, | |||||
color: "white" | |||||
}} | |||||
{...rest} | |||||
/> | |||||
<Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px"> | |||||
<div className={classes.container}> | |||||
<GridContainer> | |||||
<GridItem> | |||||
{/* <div className={classes.brand}> | |||||
<h1 className={classes.title}>NextJS Material Kit.</h1> | |||||
<h3 className={classes.subtitle}> | |||||
A Badass Material Kit based on Material-UI and NextJS. | |||||
</h3> | |||||
</div> */} | |||||
</GridItem> | |||||
</GridContainer> | |||||
</div> | |||||
</Parallax> | |||||
<div className={classNames(classes.main, classes.mainRaised)}> | |||||
<SectionChart /> | |||||
</div> | |||||
<Footer /> | |||||
</div> | |||||
); | |||||
} |
@@ -15,6 +15,8 @@ import GridItem from "components/Grid/GridItem.js"; | |||||
import SectionContent from "pages-sections/Components-Sections/SectionContent.js"; | import SectionContent from "pages-sections/Components-Sections/SectionContent.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"; | ||||
import Button from "components/CustomButtons/Button.js"; | |||||
import Home from "../api/home.js" | |||||
const useStyles = makeStyles(styles); | const useStyles = makeStyles(styles); | ||||
@@ -24,11 +26,9 @@ export default function Components(props) { | |||||
return ( | return ( | ||||
<div> | <div> | ||||
<Header | <Header | ||||
brand="Thamrin Brothers" | |||||
image={require("assets/img/ymhthamrin.png")} | |||||
rightLinks={<HeaderLinks/>} | rightLinks={<HeaderLinks/>} | ||||
fixed | fixed | ||||
color="transparent" | |||||
color="info" | |||||
changeColorOnScroll={{ | changeColorOnScroll={{ | ||||
height: 400, | height: 400, | ||||
color: "white" | color: "white" | ||||
@@ -38,21 +38,38 @@ export default function Components(props) { | |||||
<Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px"> | <Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px"> | ||||
<div className={classes.container}> | <div className={classes.container}> | ||||
<GridContainer> | <GridContainer> | ||||
<GridItem> | |||||
{/* <div className={classes.brand}> | |||||
<h1 className={classes.title}>NextJS Material Kit.</h1> | |||||
{/* <GridItem> | |||||
<div className={classes.brand} align="center"> | |||||
<h1 className={classes.title}>Thamrin Group</h1> | |||||
<h3 className={classes.subtitle}> | <h3 className={classes.subtitle}> | ||||
A Badass Material Kit based on Material-UI and NextJS. | A Badass Material Kit based on Material-UI and NextJS. | ||||
</h3> | </h3> | ||||
</div> */} | |||||
</GridItem> | |||||
</div> | |||||
<Button | |||||
href="/login" | |||||
className={classes.registerNavLink} | |||||
color="info" | |||||
box | |||||
> | |||||
Shop Now | |||||
</Button> | |||||
</GridItem> */} | |||||
</GridContainer> | </GridContainer> | ||||
</div> | </div> | ||||
</Parallax> | </Parallax> | ||||
<div className={classNames(classes.main, classes.mainRaised)}> | <div className={classNames(classes.main, classes.mainRaised)}> | ||||
<SectionContent /> | |||||
<SectionContent /> | |||||
</div> | </div> | ||||
<Footer /> | <Footer /> | ||||
</div> | </div> | ||||
); | ); | ||||
} | } | ||||
export async function getServerSideProps(context) { | |||||
var res=await Home.GET(); | |||||
console.log(res); | |||||
return { | |||||
props: { }, // will be passed to the page component as props | |||||
}; | |||||
} |
@@ -1,11 +1,11 @@ | |||||
import React from "react"; | import React from "react"; | ||||
// nodejs library that concatenates classes | // nodejs library that concatenates classes | ||||
import classNames from "classnames"; | import classNames from "classnames"; | ||||
// react components for routing our app without refresh | |||||
import Link from "next/link"; | |||||
// @material-ui/core components | // @material-ui/core components | ||||
import { makeStyles } from "@material-ui/core/styles"; | import { makeStyles } from "@material-ui/core/styles"; | ||||
// @material-ui/icons | |||||
// core components | // core components | ||||
import Header from "components/Header/Header.js"; | import Header from "components/Header/Header.js"; | ||||
import HeaderLinks from "components/Header/HeaderLinks.js"; | import HeaderLinks from "components/Header/HeaderLinks.js"; | ||||
@@ -24,11 +24,9 @@ export default function Components(props) { | |||||
return ( | return ( | ||||
<div> | <div> | ||||
<Header | <Header | ||||
brand="Thamrin Brothers" | |||||
image={"https://4.bp.blogspot.com/-_68lYYHT0Io/Wn70CMzMPqI/AAAAAAAACRc/JQIcRFnGvxALRh4yHcMNCH5MVjwmrQWWQCLcBGAs/s1600/mercedez.png"} | |||||
rightLinks={<HeaderLinks />} | rightLinks={<HeaderLinks />} | ||||
fixed | fixed | ||||
color="transparent" | |||||
color="info" | |||||
changeColorOnScroll={{ | changeColorOnScroll={{ | ||||
height: 400, | height: 400, | ||||
color: "white" | color: "white" | ||||
@@ -0,0 +1,56 @@ | |||||
import React from "react"; | |||||
// nodejs library that concatenates classes | |||||
import classNames from "classnames"; | |||||
// react components for routing our app without refresh | |||||
import Link from "next/link"; | |||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | |||||
// @material-ui/icons | |||||
// core components | |||||
import Header from "components/Header/Header.js"; | |||||
import HeaderLinks from "components/Header/HeaderLinks.js"; | |||||
import Footer from "components/Footer/Footer.js"; | |||||
import GridContainer from "components/Grid/GridContainer.js"; | |||||
import GridItem from "components/Grid/GridItem.js"; | |||||
import SectionProduct from "pages-sections/Components-Sections/SectionProduct.js"; | |||||
import Parallax from "components/Parallax/Parallax.js"; | |||||
import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | |||||
const useStyles = makeStyles(styles); | |||||
export default function Components(props) { | |||||
const classes = useStyles(); | |||||
const { ...rest } = props; | |||||
return ( | |||||
<div> | |||||
<Header | |||||
rightLinks={<HeaderLinks/>} | |||||
fixed | |||||
color="info" | |||||
changeColorOnScroll={{ | |||||
height: 400, | |||||
color: "white" | |||||
}} | |||||
{...rest} | |||||
/> | |||||
<Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px"> | |||||
<div className={classes.container}> | |||||
<GridContainer> | |||||
<GridItem> | |||||
{/* <div className={classes.brand}> | |||||
<h1 className={classes.title}>NextJS Material Kit.</h1> | |||||
<h3 className={classes.subtitle}> | |||||
A Badass Material Kit based on Material-UI and NextJS. | |||||
</h3> | |||||
</div> */} | |||||
</GridItem> | |||||
</GridContainer> | |||||
</div> | |||||
</Parallax> | |||||
<div className={classNames(classes.main, classes.mainRaised)}> | |||||
<SectionProduct /> | |||||
</div> | |||||
<Footer /> | |||||
</div> | |||||
); | |||||
} |
@@ -0,0 +1,56 @@ | |||||
import React from "react"; | |||||
// nodejs library that concatenates classes | |||||
import classNames from "classnames"; | |||||
// react components for routing our app without refresh | |||||
import Link from "next/link"; | |||||
// @material-ui/core components | |||||
import { makeStyles } from "@material-ui/core/styles"; | |||||
// @material-ui/icons | |||||
// core components | |||||
import Header from "components/Header/Header.js"; | |||||
import HeaderLinks from "components/Header/HeaderLinks.js"; | |||||
import Footer from "components/Footer/Footer.js"; | |||||
import GridContainer from "components/Grid/GridContainer.js"; | |||||
import GridItem from "components/Grid/GridItem.js"; | |||||
import SectionProductDetail from "pages-sections/Components-Sections/SectionProductDetail.js"; | |||||
import Parallax from "components/Parallax/Parallax.js"; | |||||
import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | |||||
const useStyles = makeStyles(styles); | |||||
export default function Components(props) { | |||||
const classes = useStyles(); | |||||
const { ...rest } = props; | |||||
return ( | |||||
<div> | |||||
<Header | |||||
rightLinks={<HeaderLinks/>} | |||||
fixed | |||||
color="info" | |||||
changeColorOnScroll={{ | |||||
height: 400, | |||||
color: "white" | |||||
}} | |||||
{...rest} | |||||
/> | |||||
<Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px"> | |||||
<div className={classes.container}> | |||||
<GridContainer> | |||||
<GridItem> | |||||
{/* <div className={classes.brand}> | |||||
<h1 className={classes.title}>NextJS Material Kit.</h1> | |||||
<h3 className={classes.subtitle}> | |||||
A Badass Material Kit based on Material-UI and NextJS. | |||||
</h3> | |||||
</div> */} | |||||
</GridItem> | |||||
</GridContainer> | |||||
</div> | |||||
</Parallax> | |||||
<div className={classNames(classes.main, classes.mainRaised)}> | |||||
<SectionProductDetail /> | |||||
</div> | |||||
<Footer /> | |||||
</div> | |||||
); | |||||
} |
@@ -24,11 +24,9 @@ export default function Components(props) { | |||||
return ( | return ( | ||||
<div> | <div> | ||||
<Header | <Header | ||||
brand="Thamrin Brothers" | |||||
image={"https://4.bp.blogspot.com/-_68lYYHT0Io/Wn70CMzMPqI/AAAAAAAACRc/JQIcRFnGvxALRh4yHcMNCH5MVjwmrQWWQCLcBGAs/s1600/mercedez.png"} | |||||
rightLinks={<HeaderLinks />} | rightLinks={<HeaderLinks />} | ||||
fixed | fixed | ||||
color="transparent" | |||||
color="info" | |||||
changeColorOnScroll={{ | changeColorOnScroll={{ | ||||
height: 400, | height: 400, | ||||
color: "white" | color: "white" | ||||
@@ -24,11 +24,9 @@ export default function Components(props) { | |||||
return ( | return ( | ||||
<div> | <div> | ||||
<Header | <Header | ||||
brand="Thamrin Brothers" | |||||
image={"https://4.bp.blogspot.com/-_68lYYHT0Io/Wn70CMzMPqI/AAAAAAAACRc/JQIcRFnGvxALRh4yHcMNCH5MVjwmrQWWQCLcBGAs/s1600/mercedez.png"} | |||||
rightLinks={<HeaderLinks />} | rightLinks={<HeaderLinks />} | ||||
fixed | fixed | ||||
color="transparent" | |||||
color="info" | |||||
changeColorOnScroll={{ | changeColorOnScroll={{ | ||||
height: 400, | height: 400, | ||||
color: "white" | color: "white" | ||||
@@ -24,11 +24,9 @@ export default function Components(props) { | |||||
return ( | return ( | ||||
<div> | <div> | ||||
<Header | <Header | ||||
brand="Thamrin Brothers" | |||||
image={"https://4.bp.blogspot.com/-_68lYYHT0Io/Wn70CMzMPqI/AAAAAAAACRc/JQIcRFnGvxALRh4yHcMNCH5MVjwmrQWWQCLcBGAs/s1600/mercedez.png"} | |||||
rightLinks={<HeaderLinks />} | rightLinks={<HeaderLinks />} | ||||
fixed | fixed | ||||
color="transparent" | |||||
color="info" | |||||
changeColorOnScroll={{ | changeColorOnScroll={{ | ||||
height: 400, | height: 400, | ||||
color: "white" | color: "white" | ||||