refactor direktory yamaha domain

components/Header/HeaderLinks.js

@@ -24,7 +24,7 @@ export default function HeaderLinks(props) {
   return (
     <List className={classes.list}>
       <ListItem className={classes.listItem}>
-      <Link href="/home">
+      <Link href="/yamaha/home">
       <Button color="transparent" className={classes.navLink}>
           <img
             src="https://1.bp.blogspot.com/-J9AsxdwrF-Y/Wn70KyBApaI/AAAAAAAACRo/LTy3zrALzhckryd9QPi_KuVyWvwFMZyMQCLcBGAs/s640/TG.png" width="180px"
@@ -33,7 +33,7 @@ export default function HeaderLinks(props) {
       </Link>
       </ListItem>
       <ListItem className={classes.listItem}>
-        <Link href="/home">
+        <Link href="/yamaha/home">
           <Button color="transparent" className={classes.navLink} style={{marginTop:"10px"}}>
             <Icon className={classes.icons}>home</Icon> Home
           </Button>
@@ -50,42 +50,42 @@ export default function HeaderLinks(props) {
           }}
           buttonIcon={Apps}
           dropdownList={[
-            <Link href="/product/product">
+            <Link href="/yamaha/product/product">
               <a className={classes.dropdownLink}>Motor</a>
             </Link>,
-            <Link href="/product/ygp">
+            <Link href="/yamaha/product/ygp">
               <a className={classes.dropdownLink}>YGP</a>
             </Link>,
-            <Link href="/product/yamalube">
+            <Link href="/yamaha/product/yamalube">
               <a className={classes.dropdownLink}>Yamalube</a>
             </Link>,
-            <Link href="/product/helmet">
+            <Link href="/yamaha/product/helmet">
               <a className={classes.dropdownLink}>Helmet</a>
             </Link>,
-            <Link href="/product/apparel">
+            <Link href="/yamaha/product/apparel">
               <a className={classes.dropdownLink}>Apparel</a>
             </Link>,
-            <Link href="/product/accessories">
+            <Link href="/yamaha/product/accessories">
               <a className={classes.dropdownLink}>Accessories</a>
             </Link>,
             <Link href="https://booking.thamrin.co.id/">
               <a className={classes.dropdownLink}>Service</a>
             </Link>,
-            <Link href="/dealers">
+            <Link href="/yamaha/dealers">
             <a className={classes.dropdownLink}>Dealers</a>
           </Link>,
           ]}
         />
       </ListItem>
       <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
-        <Link href="/latestnews">
+        <Link href="/yamaha/latestnews">
           <Button color="transparent" className={classes.navLink}>
             <Icon className={classes.icons}>event</Icon> Latest News
           </Button>
         </Link>
       </ListItem>
       <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
-        <Button href="/carrer" color="transparent" className={classes.navLink}>
+        <Button href="/yamaha/carrer" color="transparent" className={classes.navLink}>
           <Icon className={classes.icons}>wallet_travel</Icon> Career
         </Button>
       </ListItem>
@@ -135,7 +135,7 @@ export default function HeaderLinks(props) {
       </ListItem>
       <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
         <Button
-          href="abous_us/aboutus"
+          href="/yamaha/abous_us/aboutus"
           color="transparent"
           className={classes.navLink}
         >
@@ -149,7 +149,7 @@ export default function HeaderLinks(props) {
       </ListItem>
       <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
         <Button
-          href="/login"
+          href="/yamaha/login"
           className={classes.registerNavLink}
           color="info"
           round

pages-sections/carrer/carrer.js → pages-sections/yamaha/carrer/carrer.js

@@ -38,7 +38,7 @@ const DataCarrers = function ({ backend, s1, d3, sma, ...props }) {
               author="Post By Thamrin Group"
             />
             Masa Pendaftaran : {data.start_regis} s/d {data.until_regis}
-            <Button color="danger" style={{marginLeft:"20px"}} round href={"/carrer_details?s="+data.id}>
+            <Button color="danger" style={{marginLeft:"20px"}} round href={"/yamaha/carrer_details?s="+data.id}>
                 <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer
             </Button>
           </CardBody>
@@ -57,7 +57,7 @@ const DataCarrers = function ({ backend, s1, d3, sma, ...props }) {
               author="Post By Thamrin Group"
             />
             Masa Pendaftaran : {data.start_regis} s/d {data.until_regis}
-            <Button color="danger" style={{marginLeft:"20px"}} round href={"/carrer_details?s="+data.id}>
+            <Button color="danger" style={{marginLeft:"20px"}} round href={"/yamaha/carrer_details?s="+data.id}>
                 <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer
             </Button>
           </CardBody>
@@ -76,7 +76,7 @@ const DataCarrers = function ({ backend, s1, d3, sma, ...props }) {
               author="Post By Thamrin Group"
             />
             Masa Pendaftaran : {data.start_regis} s/d {data.until_regis}
-            <Button color="danger" style={{marginLeft:"20px"}} round href={"/carrer_details?s="+data.id}>
+            <Button color="danger" style={{marginLeft:"20px"}} round href={"/yamaha/carrer_details?s="+data.id}>
                 <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer
             </Button>
           </CardBody>

pages-sections/latest_news/news.js → pages-sections/yamaha/latest_news/news.js

@@ -27,7 +27,7 @@ const DataLatestNews = function ({ backend, news, ...props }) {
         <CardBody>
           <p>{data.title}</p>
           <p>{data.published_at}</p>
-          <Button color="info" round href={"/latestnews_details?s="+data.id}>
+          <Button color="info" round href={"/yamaha/latestnews_details?s="+data.id}>
             <Icon className={classes.icons}>open_in_new</Icon>Read More
           </Button>
         </CardBody>

pages-sections/product/accessories.js → pages-sections/yamaha/product/accessories.js

@@ -36,7 +36,7 @@ const DataAccessories = function ({ selected, handleName, backend, accessories,
                 <h4>Rp.{data.price}</h4>
                 <Button 
                     color="info" round
-                    href={"/product/accessories_details?s="+data.id}
+                    href={"/yamaha/product/accessories_details?s="+data.id}
                 >
                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                 </Button>

pages-sections/product/apparel.js → pages-sections/yamaha/product/apparel.js

@@ -39,7 +39,7 @@ const DataApparel = function ({ selected, handleName, backend, apparel, asia, ba
                 <h5>Rp.{data.price}</h5>
                 <Button 
                     color="info" round
-                    href={"/product/apparel_details?s="+data.id}
+                    href={"/yamaha/product/apparel_details?s="+data.id}
                 >
                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                 </Button>
@@ -67,7 +67,7 @@ const DataApparel = function ({ selected, handleName, backend, apparel, asia, ba
                 <h5>Rp.{data.price}</h5>
                 <Button 
                     color="info" round
-                    href={"/product/apparel_details?s="+data.id}
+                    href={"/yamaha/product/apparel_details?s="+data.id}
                 >
                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                 </Button>
@@ -82,7 +82,7 @@ const DataApparel = function ({ selected, handleName, backend, apparel, asia, ba
         <div>
         <Card className={classes.textCenter} align="center">
             <CardBody>
-            <div align="center">
+            {/* <div align="center">
                 <h2>Yamaha Apparel</h2>
                 <Select
                     value={(selected)?apparel.filter((i)=>i.id==selected):null} 
@@ -94,7 +94,7 @@ const DataApparel = function ({ selected, handleName, backend, apparel, asia, ba
                     placeholder="filter by Nama Part"
                     onChange={values => handleName(values)}
                 />
-            </div><br></br><br></br><br></br>
+            </div><br></br><br></br><br></br> */}
             <div align="center">
                 <div align="center" className={classes.section} id="notifications">
                     <SnackbarContent

pages-sections/product/helmet.js → pages-sections/yamaha/product/helmet.js

@@ -36,7 +36,7 @@ const DataHelmet = function ({ selected, handleName, backend, helmet, mtx, extre
                     <h5>Rp.{data.price}</h5>
                     <Button 
                         color="info" round
-                        href={"/product/helmet_details?s="+data.id}
+                        href={"/yamaha/product/helmet_details?s="+data.id}
                     >
                         <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                     </Button>
@@ -60,7 +60,7 @@ const DataHelmet = function ({ selected, handleName, backend, helmet, mtx, extre
                     <h5>Rp.{data.price}</h5>
                     <Button 
                         color="info" round
-                        href={"/product/helmet_details?s="+data.id}
+                        href={"/yamaha/product/helmet_details?s="+data.id}
                     >
                         <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                     </Button>
@@ -84,7 +84,7 @@ const DataHelmet = function ({ selected, handleName, backend, helmet, mtx, extre
                     <h5>Rp.{data.price}</h5>
                     <Button 
                         color="info" round
-                        href={"/product/helmet_details?s="+data.id}
+                        href={"/yamaha/product/helmet_details?s="+data.id}
                     >
                         <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                     </Button>
@@ -108,7 +108,7 @@ const DataHelmet = function ({ selected, handleName, backend, helmet, mtx, extre
                     <h5>Rp.{data.price}</h5>
                     <Button 
                         color="info" round
-                        href={"/product/helmet_details?s="+data.id}
+                        href={"/yamaha/product/helmet_details?s="+data.id}
                     >
                         <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                     </Button>
@@ -132,7 +132,7 @@ const DataHelmet = function ({ selected, handleName, backend, helmet, mtx, extre
                     <h5>Rp.{data.price}</h5>
                     <Button 
                         color="info" round
-                        href={"/product/helmet_details?s="+data.id}
+                        href={"/yamaha/product/helmet_details?s="+data.id}
                     >
                         <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                     </Button>
@@ -156,7 +156,7 @@ const DataHelmet = function ({ selected, handleName, backend, helmet, mtx, extre
                     <h5>Rp.{data.price}</h5>
                     <Button 
                         color="info" round
-                        href={"/product/helmet_details?s="+data.id}
+                        href={"/yamaha/product/helmet_details?s="+data.id}
                     >
                         <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                     </Button>
@@ -180,7 +180,7 @@ const DataHelmet = function ({ selected, handleName, backend, helmet, mtx, extre
                     <h5>Rp.{data.price}</h5>
                     <Button 
                         color="info" round
-                        href={"/product/helmet_details?s="+data.id}
+                        href={"/yamaha/product/helmet_details?s="+data.id}
                     >
                         <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                     </Button>
@@ -204,7 +204,7 @@ const DataHelmet = function ({ selected, handleName, backend, helmet, mtx, extre
                     <h5>Rp.{data.price}</h5>
                     <Button 
                         color="info" round
-                        href={"/product/helmet_details?s="+data.id}
+                        href={"/yamaha/product/helmet_details?s="+data.id}
                     >
                         <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                     </Button>
@@ -219,21 +219,28 @@ const DataHelmet = function ({ selected, handleName, backend, helmet, mtx, extre
         <div>
         <Card className={classes.textCenter} style={{padding:"5px"}}>
             <CardBody>
-            <div align="center" style={{marginTop:"-50px"}}>
+            {/* <div align="center" style={{marginTop:"-50px"}}>
                 <h2>Yamaha Helmet</h2>
                 <Select
                     value={(selected)?helmet.filter((i)=>i.id==selected):null} 
                     getOptionLabel={option => `${option.name}`}
                     getOptionValue={option => option.id}
                     options={helmet}
+                    options={mtx}
+                    options={extreme}
+                    options={ranger}
+                    options={fighter}
+                    options={swirl}
+                    options={classic}
+                    options={uno}
                     isMulti
                     instanceId="name"
                     placeholder="Search"
                     onChange={values => handleName(values)}
                 />
                 <br></br><br></br><br></br>
-            </div>
-            <div align="center" style={{marginTop:"-50px"}}>
+            </div> */}
+            <div align="center">
                 <div align="center" className={classes.section} id="notifications">
                     <SnackbarContent
                     message={

pages-sections/product/product.js → pages-sections/yamaha/product/product.js

@@ -39,7 +39,7 @@ const DataProduct = function ({ backend, maxi, matic, naked, sport, offroad, mop
                 <h5>Rp.{data.price}</h5>
                 <Button 
                     color="info" round
-                    href={"/product/product_detail?s="+data.id}
+                    href={"/yamaha/product/product_detail?s="+data.id}
                 >
                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                 </Button>
@@ -63,7 +63,7 @@ const DataProduct = function ({ backend, maxi, matic, naked, sport, offroad, mop
                 <h5>Rp.{data.price}</h5>
                 <Button 
                     color="info" round
-                    href={"/product/product_detail?s="+data.id}
+                    href={"/yamaha/product/product_detail?s="+data.id}
                 >
                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                 </Button>
@@ -87,7 +87,7 @@ const DataProduct = function ({ backend, maxi, matic, naked, sport, offroad, mop
                 <h5>Rp.{data.price}</h5>
                 <Button 
                     color="info" round
-                    href={"/product/product_detail?s="+data.id}
+                    href={"/yamaha/product/product_detail?s="+data.id}
                 >
                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                 </Button>
@@ -111,7 +111,7 @@ const DataProduct = function ({ backend, maxi, matic, naked, sport, offroad, mop
                 <h5>Rp.{data.price}</h5>
                 <Button 
                     color="info" round
-                    href={"/product/product_detail?s="+data.id}
+                    href={"/yamaha/product/product_detail?s="+data.id}
                 >
                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                 </Button>
@@ -135,7 +135,7 @@ const DataProduct = function ({ backend, maxi, matic, naked, sport, offroad, mop
                 <h5>Rp.{data.price}</h5>
                 <Button 
                     color="info" round
-                    href={"/product/product_detail?s="+data.id}
+                    href={"/yamaha/product/product_detail?s="+data.id}
                 >
                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                 </Button>
@@ -159,7 +159,7 @@ const DataProduct = function ({ backend, maxi, matic, naked, sport, offroad, mop
                 <h5>Rp.{data.price}</h5>
                 <Button 
                     color="info" round
-                    href={"/product/product_detail?s="+data.id}
+                    href={"/yamaha/product/product_detail?s="+data.id}
                 >
                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                 </Button>
@@ -183,7 +183,7 @@ const DataProduct = function ({ backend, maxi, matic, naked, sport, offroad, mop
                 <h5>Rp.{data.price}</h5>
                 <Button 
                     color="info" round
-                    href={"/product/product_detail?s="+data.id}
+                    href={"/yamaha/product/product_detail?s="+data.id}
                 >
                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                 </Button>
@@ -207,7 +207,7 @@ const DataProduct = function ({ backend, maxi, matic, naked, sport, offroad, mop
                 <h5>Rp.{data.price}</h5>
                 <Button 
                     color="info" round
-                    href={"/product/product_detail?s="+data.id}
+                    href={"/yamaha/product/product_detail?s="+data.id}
                 >
                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                 </Button>

pages-sections/product/yamalube.js → pages-sections/yamaha/product/yamalube.js

@@ -35,7 +35,7 @@ const DataYamalube = function ({ selected, handleName, backend, yamalube, ...pro
                     <h5>Rp.{data.price}</h5>
                     <Button 
                         color="info" round
-                        href={"/product/yamalube_detail?s="+data.id}
+                        href={"/yamaha/product/yamalube_detail?s="+data.id}
                     >
                         <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                     </Button>

pages-sections/product/ygp.js → pages-sections/yamaha/product/ygp.js

@@ -23,7 +23,7 @@ const DataYGP = function ({ selected,handleName, backend, ygp, ...props }) {
     );
     const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
     const ProductYGP = ygp.map((data) => {
-        return (      
+        return (
             <div style={{padding: "20px", marginTop:"-40px"}}>   
             <Card className={classes.textCenter} align="center" style={{width:"300px"}}>
                 <CardBody>
@@ -35,7 +35,7 @@ const DataYGP = function ({ selected,handleName, backend, ygp, ...props }) {
                     <h5>Rp.{data.price}</h5>
                     <Button 
                         color="info" round
-                        href={"/product/ygp_detail?s="+data.id}
+                        href={"/yamaha/product/ygp_detail?s="+data.id}
                     >
                         <Icon className={classes.icons}>open_in_new</Icon>Detail Product
                     </Button>

pages/index.js

@@ -3,10 +3,10 @@ import Router from "next/router";
 
 export default class Index extends Component {
   componentDidMount = () => {
-    Router.push("/home");
+    Router.push("/yamaha/home");    
   };
 
   render() {
     return <div />;
   }
-}
+}

pages/suzuki/_app.js

@@ -0,0 +1,48 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "next/app";
+import Head from "next/head";
+import Router from "next/router";
+import PageChange from "components/PageChange/PageChange.js";
+
+import "assets/scss/nextjs-material-kit.scss?v=1.1.0";
+// import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+Router.events.on("routeChangeStart", (url) => {
+  console.log(`Loading: ${url}`);
+  document.body.classList.add("body-page-transition");
+  ReactDOM.render(
+    <PageChange path={url} />,
+    document.getElementById("page-transition")
+  );
+});
+Router.events.on("routeChangeComplete", () => {
+  ReactDOM.unmountComponentAtNode(document.getElementById("page-transition"));
+  document.body.classList.remove("body-page-transition");
+});
+Router.events.on("routeChangeError", () => {
+  ReactDOM.unmountComponentAtNode(document.getElementById("page-transition"));
+  document.body.classList.remove("body-page-transition");
+});
+
+export default class MyApp extends App {
+  static async getInitialProps({ Component, router, ctx }) {
+    let pageProps = {};
+
+    if (Component.getInitialProps) {
+      pageProps = await Component.getInitialProps(ctx);
+    }
+
+    return { pageProps };
+  }
+  render() {
+    const { Component, pageProps } = this.props;
+    return (
+      <React.Fragment>
+        <Head>
+          <title>Thamrin Group</title>
+        </Head>
+        <Component {...pageProps} />
+      </React.Fragment>
+    );
+  }
+}

pages/suzuki/_document.js

@@ -0,0 +1,89 @@
+import React from "react";
+import Document, { Head, Main, NextScript } from "next/document";
+import { ServerStyleSheets } from "@material-ui/styles";
+
+class MyDocument extends Document {
+  render() {
+    return (
+      <html lang="en">
+        <Head>
+          <meta charSet="utf-8" />
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, shrink-to-fit=no"
+          />
+          <meta name="theme-color" content="#000000" />
+          <link rel="shortcut icon" href={require("assets/img/favicon.png")} />
+          <link
+            rel="apple-touch-icon"
+            sizes="76x76"
+            href={require("assets/img/apple-icon.png")}
+          />
+          {/* Fonts and icons */}
+          <link
+            rel="stylesheet"
+            type="text/css"
+            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"
+          />
+          <link
+            href="https://use.fontawesome.com/releases/v5.0.10/css/all.css"
+            rel="stylesheet"
+          />
+        </Head>
+        <body>
+          <div id="page-transition"></div>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    );
+  }
+}
+
+MyDocument.getInitialProps = async ctx => {
+  // Resolution order
+  //
+  // On the server:
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. document.getInitialProps
+  // 4. app.render
+  // 5. page.render
+  // 6. document.render
+  //
+  // On the server with error:
+  // 1. document.getInitialProps
+  // 2. app.render
+  // 3. page.render
+  // 4. document.render
+  //
+  // On the client
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. app.render
+  // 4. page.render
+
+  // Render app and page and get the context of the page with collected side effects.
+  const sheets = new ServerStyleSheets();
+  const originalRenderPage = ctx.renderPage;
+
+  ctx.renderPage = () =>
+    originalRenderPage({
+      enhanceApp: App => props => sheets.collect(<App {...props} />)
+    });
+
+  const initialProps = await Document.getInitialProps(ctx);
+
+  return {
+    ...initialProps,
+    // Styles fragment is rendered after the app and page rendering finish.
+    styles: [
+      <React.Fragment key="styles">
+        {initialProps.styles}
+        {sheets.getStyleElement()}
+      </React.Fragment>
+    ]
+  };
+};
+
+export default MyDocument;

pages/suzuki/_error.js

@@ -0,0 +1,12 @@
+import React, { Component } from "react";
+import Router from "next/router";
+
+export default class _error extends Component {
+  componentDidMount = () => {
+    Router.push("/home");
+  };
+
+  render() {
+    return <div />;
+  }
+}

pages/suzuki/api/product/get.js

@@ -0,0 +1,27 @@
+import DetailProduct from "../../../api/product/product";
+
+export default async function handler(req, res) {
+    console.log("masuk");
+    if (req.method == "POST") {
+        var id = req.body.id;
+            var detailproduct = await DetailProduct.GetDetailProduct(id);
+            if (detailproduct["STATUS"] == 0) {
+                res.status(200).json(detailproduct);
+            } else if (detailproduct["DATA"]["products"] == null) {
+                res
+                    .status(200)
+                    .json({
+                        STATUS: 0,
+                        DATA: "Product Tidak Ditemukan"
+                    });
+            } else {
+                res.status(200).json({
+                    STATUS: 1,
+                    DATA: detailproduct["DATA"]["products"],
+                });
+            }
+    } else {
+        console.log("masukas");
+        res.status(200).send("NOT FOUND");
+    }
+}

pages/suzuki/index.js

@@ -0,0 +1,12 @@
+import React, { Component } from "react";
+import Router from "next/router";
+
+export default class Index extends Component {
+  componentDidMount = () => {
+    Router.push("/home");
+  };
+
+  render() {
+    return <div />;
+  }
+}

pages/yamaha/abous_us/aboutus.js

@@ -0,0 +1,58 @@
+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 AboutUs from "pages-sections/yamaha/about_us/about_us.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+
+const useStyles = makeStyles(styles);
+
+const AboutUS = function ({ backend, businessPartners, service, carousel, ...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/aboutus.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)}>
+        <AboutUs />  
+      </div>
+      <Footer />
+    </div>
+  );
+}
+
+export default AboutUS;

pages/yamaha/abous_us/penghargaan.js

@@ -0,0 +1,58 @@
+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 Penghargaan from "pages-sections/yamaha/about_us/penghargaan.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+
+const useStyles = makeStyles(styles);
+
+const penghargaan = function ({ backend, businessPartners, service, carousel, ...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/aboutus.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)}>
+            <Penghargaan />  
+        </div>
+        <Footer />
+        </div>
+    );
+}
+
+export default penghargaan;

pages/yamaha/abous_us/profile.js

@@ -0,0 +1,58 @@
+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 Profile from "pages-sections/yamaha/about_us/profile.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+
+const useStyles = makeStyles(styles);
+
+const profile = function ({ backend, businessPartners, service, carousel, ...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/aboutus.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)}>
+            <Profile />  
+        </div>
+        <Footer />
+        </div>
+    );
+}
+
+export default profile;

pages/yamaha/abous_us/saham.js

@@ -0,0 +1,58 @@
+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 Saham from "pages-sections/yamaha/about_us/saham.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+
+const useStyles = makeStyles(styles);
+
+const saham = function ({ backend, businessPartners, service, carousel, ...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/aboutus.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)}>
+            <Saham />  
+        </div>
+        <Footer />
+        </div>
+    );
+}
+
+export default saham;

pages/yamaha/abous_us/sejarah.js

@@ -0,0 +1,58 @@
+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 Sejarah from "pages-sections/yamaha/about_us/sejarah.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+
+const useStyles = makeStyles(styles);
+
+const sejarah = function ({ backend, businessPartners, service, carousel, ...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/aboutus.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)}>
+            <Sejarah />  
+        </div>
+        <Footer />
+        </div>
+    );
+}
+
+export default sejarah;

pages/yamaha/abous_us/struktur_organisasi.js

@@ -0,0 +1,58 @@
+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 StrukturOrganisasi from "pages-sections/yamaha/about_us/struktur_organisasi.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+
+const useStyles = makeStyles(styles);
+
+const Strukturorganisasi = function ({ backend, businessPartners, service, carousel, ...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/aboutus.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)}>
+            <StrukturOrganisasi />  
+        </div>
+        <Footer />
+        </div>
+    );
+}
+
+export default Strukturorganisasi;

pages/yamaha/abous_us/tata_kelola.js

@@ -0,0 +1,58 @@
+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 TataKelola from "pages-sections/yamaha/about_us/tata_kelola.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+
+const useStyles = makeStyles(styles);
+
+const Tatakelola = function ({ backend, businessPartners, service, carousel, ...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/aboutus.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)}>
+            <TataKelola />  
+        </div>
+        <Footer />
+        </div>
+    );
+}
+
+export default Tatakelola;

pages/yamaha/abous_us/tugas_fungsi.js

@@ -0,0 +1,58 @@
+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 TugasFungsi from "pages-sections/yamaha/about_us/tugas_fungsi.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+
+const useStyles = makeStyles(styles);
+
+const AboutUS = function ({ backend, businessPartners, service, carousel, ...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/aboutus.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)}>
+            <TugasFungsi />  
+        </div>
+        <Footer />
+        </div>
+    );
+}
+
+export default AboutUS;

pages/yamaha/carrer.js

@@ -0,0 +1,66 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+
+import SectionCarrer from "pages-sections/yamaha/carrer/carrer.js";
+import Getcarrer from "../../api/carrer/carrer.js"
+
+const useStyles = makeStyles(styles);
+
+const Carrer = function ({ backend, s1, d3, sma, ...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/carrer.png")} height="50px"/>
+      <div className={classNames(classes.main, classes.mainRaised)}>
+        <SectionCarrer s1={s1} d3={d3} sma={sma} backend={backend}/>  
+      </div>
+      <Footer />
+    </div>
+  );
+}
+
+export default Carrer;
+
+export async function getServerSideProps(context) {
+  var s1 = [];
+  var d3 = [];
+  var sma = [];
+  const backend = process.env.BACKEND_SERVER_URI;
+
+  var res = await Getcarrer.GetCarrerS1();
+	if (res["STATUS"] === 1) {
+		s1 = res["DATA"]["carrers"];
+	}
+
+  var res = await Getcarrer.GetCarrerD3();
+	if (res["STATUS"] === 1) {
+		d3 = res["DATA"]["carrers"];
+	}
+
+  var res = await Getcarrer.GetCarrerSMA();
+	if (res["STATUS"] === 1) {
+		sma = res["DATA"]["carrers"];
+	}
+  
+	return {
+		props: { s1, d3, sma, backend }, // will be passed to the page component as props
+	};
+}

pages/yamaha/carrer_details.js

@@ -0,0 +1,56 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import CarrerDetail from "pages-sections/yamaha/carrer/carrer_details.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+import GetDetailcarrer from "../../api/carrer/carrer.js"
+
+const useStyles = makeStyles(styles);
+
+const CarrerDetails = function ({ backend, detailcarrer, ...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/carrer.png")} height="50px"/>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <CarrerDetail detailcarrer={detailcarrer} backend={backend}/>  
+        </div>
+        <Footer />
+        </div>
+    );
+}
+
+export default CarrerDetails;
+
+export async function getServerSideProps(context) {
+    var {query} = context;
+	var detailcarrer = [];
+    const backend = process.env.BACKEND_SERVER_URI;
+
+	var res = await GetDetailcarrer.GetDetailCarrer(query.s||0);
+	if (res["STATUS"] === 1) {
+		detailcarrer = res["DATA"]["carrers"];
+	}
+
+    console.log(res);
+
+	return {
+		props: { detailcarrer, backend }, // will be passed to the page component as props
+	};
+}

pages/yamaha/cart.js

@@ -0,0 +1,36 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+// import SectionChart from "pages-sections/cart/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={classNames(classes.main, classes.mainRaised)}>
+        {/* <SectionChart /> */}
+      </div>
+      <Footer />
+    </div>
+  );
+}

pages/yamaha/dealers.js

@@ -0,0 +1,74 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+import Router from 'next/router'
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+import Footer from "components/Footer/Footer.js";
+
+import Getdealer from "../../api/dealer/dealer.js";
+import DataSnackbarContent from "../../pages-sections/yamaha/snackbar.js";
+import DataDealers from "../../pages-sections/yamaha/dealers/dealers.js";
+import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
+
+const queryClient = new QueryClient()
+const handleName = values => {
+    Router.push({
+        pathname: 'yamaha/dealers',
+        query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{},
+    })
+}
+
+const useStyles = makeStyles(styles);
+const Dealers = function ({ selected, backend, dealers, ...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/dealers.png")}styles={{ marginTop: "50px" }}/>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <QueryClientProvider client={queryClient}>
+                <DataSnackbarContent />
+                <DataDealers selected={(selected=="")?null:selected[0]["id"]} handleName={handleName} dealers={dealers} backend={backend} />
+            </QueryClientProvider>
+        </div>
+        <Footer />
+        </div>
+    );
+};
+
+export default Dealers;
+
+export async function getServerSideProps(context) {
+    var dealers = [];
+    var filter = context.query.filter||"";
+    var selected = "";
+
+    const backend = process.env.BACKEND_SERVER_URI;
+
+    var res = await Getdealer.GetDealers(filter);
+    if (res["STATUS"] === 1) {
+        dealers = res["DATA"]["dealers"];
+        if (filter !=""){
+            selected = dealers.filter((i)=>i.name==filter);
+        }
+    }
+
+    return {
+        props: { selected, dealers, backend, }, // will be passed to the page component as props
+    };
+}

pages/yamaha/home.js

@@ -0,0 +1,87 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+import Footer from "components/Footer/Footer.js";
+
+import GetbusinessPartners from "../../api/home/businessPartner.js";
+import Getservices from "../../api/home/service.js";
+import Getcarousels from "../../api/home/carousel.js";
+import DataSnackbarContent from "../../pages-sections/yamaha/snackbar.js";
+import DataCarousel from "../../pages-sections/yamaha/home/carousel.js";
+import DataService from "../../pages-sections/yamaha/home/service.js";
+import DataBusinessPartner from "../../pages-sections/yamaha/home/business_partner.js";
+import DataSosmed from "../../pages-sections/yamaha/home/sosmed.js";
+import CoreValue from "../../pages-sections/yamaha/home/core_value.js";
+import DataFeature from "../../pages-sections/yamaha/home/feature.js";
+
+const useStyles = makeStyles(styles);
+const Home = function ({
+  backend,
+  businessPartners,
+  service,
+  carousel,
+  ...props
+}) {
+  const classes = useStyles();
+  const { ...rest } = props;
+  <DataService service={props.service} />;
+
+  return (
+    <div>
+      <Header
+        rightLinks={<HeaderLinks/>}
+        fixed
+        color="info"
+        changeColorOnScroll={{
+          height: 400,
+          color: "white",
+        }}
+        {...rest}
+      />
+      <Parallax image={require("assets/img/Promotion_2-1.jpg")}styles={{ marginTop: "50px" }}/>
+      <div className={classNames(classes.main, classes.mainRaised)}>
+        <DataSnackbarContent />
+        <CoreValue />
+        <DataCarousel carousel={carousel} backend={backend} />
+        <DataService service={service} backend={backend} />
+        <DataFeature />
+        <DataBusinessPartner businessPartners={businessPartners} backend={backend} />
+        <DataSosmed/>
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+export async function getServerSideProps(context) {
+  var businessPartners = [];
+  var service = [];
+  var carousel = [];
+  const backend = process.env.BACKEND_SERVER_URI;
+
+  var res = await GetbusinessPartners.GetbusinessPartners();
+  if (res["STATUS"] === 1) {
+    businessPartners = res["DATA"]["businessPartners"];
+  }
+
+  var res = await Getservices.Getservices();
+  if (res["STATUS"] === 1) {
+    service = res["DATA"]["services"];
+  }
+
+  var res = await Getcarousels.GetCarousels();
+  if (res["STATUS"] === 1) {
+    carousel = res["DATA"]["carousels"];
+  }
+
+  return {
+    props: { businessPartners, service, carousel, backend }, // will be passed to the page component as props
+  };
+}
+
+export default Home;

pages/yamaha/latestnews.js

@@ -0,0 +1,56 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+
+import GetLatestNews from "../../api/latest_news/news.js"
+import DataSnackbarContent from "../../pages-sections/yamaha/snackbar.js";
+import DataLatestNews from "../../pages-sections/yamaha/latest_news/news.js";
+
+const useStyles = makeStyles(styles);
+
+const LatestNews = function ({ backend, news, ...props }) {
+  const classes = useStyles();
+  const { ...rest } = props;
+  <DataLatestNews news={props.news}/>
+  return (
+    <div>
+      <Header
+        rightLinks={<HeaderLinks />}
+        fixed
+        color="info"
+        changeColorOnScroll={{
+          height: 400,
+          color: "white"
+        }}
+        {...rest}
+      />
+      <Parallax image={require("assets/img/simulasicicilan.jpg")} width="200px"/>
+      <div className={classNames(classes.main, classes.mainRaised)}>
+        <DataSnackbarContent/>
+        <DataLatestNews news={news} backend={backend}/> 
+      </div>
+      <Footer />
+    </div>
+  );
+}
+
+export default LatestNews;
+
+export async function getServerSideProps(context) {
+	var news = [];
+  const backend = process.env.BACKEND_SERVER_URI;
+
+	var res = await GetLatestNews.GetNews();
+	if (res["STATUS"] === 1) {
+		news = res["DATA"]["latestNews"];
+	}
+	return {
+		props: { news, backend }, // will be passed to the page component as props
+	};
+}

pages/yamaha/latestnews_details.js

@@ -0,0 +1,63 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+
+import GetLatestNews from "../../api/latest_news/news.js"
+import DataSnackbarContent from "../../pages-sections/yamaha/snackbar.js";
+import DetailLatestNews from "../../pages-sections/yamaha/latest_news/news_details.js";
+
+const useStyles = makeStyles(styles);
+
+const detailLatestNews = function ({ backend, news, othernews, ...props }) {
+    const classes = useStyles();
+    const { ...rest } = props;
+    <DetailLatestNews news={props.news}/>
+    return (
+        <div>
+        <Header
+            rightLinks={<HeaderLinks />}
+            fixed
+            color="info"
+            changeColorOnScroll={{
+            height: 400,
+            color: "white"
+            }}
+            {...rest}
+        />
+        <Parallax image={require("assets/img/simulasicicilan.jpg")} width="200px"/>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <DataSnackbarContent/>
+            <DetailLatestNews news={news} othernews={othernews} backend={backend}/> 
+        </div>
+        <Footer />
+        </div>
+    );
+}
+
+export default detailLatestNews;
+
+export async function getServerSideProps(context) {
+    var {query} = context;
+	var news = [];
+    var othernews = [];
+    const backend = process.env.BACKEND_SERVER_URI;
+
+	var res = await GetLatestNews.GetDetailNews(query.s||0);
+	if (res["STATUS"] === 1) {
+		news = res["DATA"]["latestNews"];
+	}
+
+    var res = await GetLatestNews.GetOtherNews();
+	if (res["STATUS"] === 1) {
+		othernews = res["DATA"]["latestNews"];
+	}
+	return {
+		props: { othernews, news, backend }, // will be passed to the page component as props
+	};
+}

pages/yamaha/login.js

@@ -0,0 +1,138 @@
+import React from "react";
+// @material-ui/core components
+import { makeStyles } from "@material-ui/core/styles";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import Icon from "@material-ui/core/Icon";
+// @material-ui/icons
+import Email from "@material-ui/icons/Email";
+import People from "@material-ui/icons/People";
+// 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 Button from "components/CustomButtons/Button.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 CustomInput from "components/CustomInput/CustomInput.js";
+
+import styles from "assets/jss/nextjs-material-kit/pages/loginPage.js";
+
+import image from "assets/img/bgtbg.jpg";
+
+const useStyles = makeStyles(styles);
+
+export default function LoginPage(props) {
+  const [cardAnimaton, setCardAnimation] = React.useState("cardHidden");
+  setTimeout(function() {
+    setCardAnimation("");
+  }, 700);
+  const classes = useStyles();
+  const { ...rest } = props;
+  return (
+    <div>
+      <Header
+        absolute
+        color="info"
+        rightLinks={<HeaderLinks />}
+        {...rest}
+      />
+      <div
+        className={classes.pageHeader}
+        style={{
+          backgroundImage: "url(" + image + ")",
+          backgroundSize: "cover",
+          backgroundPosition: "top center"
+        }}
+      >
+        <div className={classes.container}>
+          <GridContainer justify="center">
+            <GridItem xs={12} sm={6} md={4}>
+              <Card className={classes[cardAnimaton]}>
+                <form className={classes.form}>
+                  <CardHeader color="info" className={classes.cardHeader}>
+                    <h4>Login</h4>
+                    <div className={classes.socialLine}>
+                      <Button
+                        justIcon
+                        href="#pablo"
+                        target="_blank"
+                        color="transparent"
+                        onClick={e => e.preventDefault()}
+                      >
+                        <i className={"fab fa-twitter"} />
+                      </Button>
+                      <Button
+                        justIcon
+                        href="#pablo"
+                        target="_blank"
+                        color="transparent"
+                        onClick={e => e.preventDefault()}
+                      >
+                        <i className={"fab fa-facebook"} />
+                      </Button>
+                      <Button
+                        justIcon
+                        href="#pablo"
+                        target="_blank"
+                        color="transparent"
+                        onClick={e => e.preventDefault()}
+                      >
+                        <i className={"fab fa-google-plus-g"} />
+                      </Button>
+                    </div>
+                  </CardHeader>
+                  <p className={classes.divider}>Welcome to Thamrin Brothers</p>
+                  <CardBody>
+                    <CustomInput
+                      labelText="Email..."
+                      id="email"
+                      formControlProps={{
+                        fullWidth: true
+                      }}
+                      inputProps={{
+                        type: "email",
+                        endAdornment: (
+                          <InputAdornment position="end">
+                            <Email className={classes.inputIconsColor} />
+                          </InputAdornment>
+                        )
+                      }}
+                    />
+                    <CustomInput
+                      labelText="Password"
+                      id="pass"
+                      formControlProps={{
+                        fullWidth: true
+                      }}
+                      inputProps={{
+                        type: "password",
+                        endAdornment: (
+                          <InputAdornment position="end">
+                            <Icon className={classes.inputIconsColor}>
+                              lock_outline
+                            </Icon>
+                          </InputAdornment>
+                        ),
+                        autoComplete: "off"
+                      }}
+                    />
+                  </CardBody>
+                  <CardFooter className={classes.cardFooter}>
+                    <Button color="info" size="lg">
+                      Login
+                    </Button>
+                  </CardFooter>
+                </form>
+              </Card>
+            </GridItem>
+          </GridContainer>
+        </div>
+        <Footer whiteFont />
+      </div>
+    </div>
+  );
+}

pages/yamaha/product/accessories.js

@@ -0,0 +1,72 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+
+import GetDataAccessories from "../../../api/product/accessories.js";
+import DataAccessories from "../../../pages-sections/yamaha/product/accessories.js";
+import DataSnackbarContent from "../../../pages-sections/yamaha/snackbar.js";
+import Router from 'next/router'
+
+const useStyles = makeStyles(styles);
+const queryClient = new QueryClient();
+const handleName = values => {
+    Router.push({
+        pathname: 'yamaha/product/accessories',
+        query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{},
+    })
+}
+const Accessories = function ({ selected, accessories, backend, ...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/yamalube.jpg")} height="200px"/>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <QueryClientProvider client={queryClient}>
+                <DataSnackbarContent/>
+                <DataAccessories selected={(selected=="")?null:selected[0]["id"]} handleName={handleName} accessories={accessories} backend={backend} />
+            </QueryClientProvider>
+        </div>
+        <Footer />
+        </div>
+    );
+};
+
+export default Accessories;
+
+export async function getServerSideProps(context) {
+    var accessories = [];
+    var filter = context.query.filter||"";
+    var selected = "";
+
+    const backend = process.env.BACKEND_SERVER_URI;
+    
+    var res = await GetDataAccessories.GetAccessories(filter);
+    if (res["STATUS"] === 1) {
+        accessories = res["DATA"]["accessories"];
+        if (filter !=""){
+            selected = accessories.filter((i)=>i.name==filter);
+        }
+    }
+
+    return { 
+        props: { selected, accessories, backend }, // will be passed to the page component as props
+    };
+}

pages/yamaha/product/accessories_details.js

@@ -0,0 +1,55 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import AccessoriesDetail from "pages-sections/yamaha/product/accessories_details.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+import GetDetailAccessories from "../../../api/product/accessories.js"
+
+const useStyles = makeStyles(styles);
+
+const AccessoriesDetails = function ({ backend, detailaccessories, ...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/yamalube.jpg")} width="200px"/>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <AccessoriesDetail detailaccessories={detailaccessories} backend={backend}/>  
+        </div>
+        <Footer />
+        </div>
+    );
+}
+
+export default AccessoriesDetails;
+
+export async function getServerSideProps(context) {
+    var {query} = context;
+	var detailaccessories = [];
+    const backend = process.env.BACKEND_SERVER_URI;
+
+	var res = await GetDetailAccessories.GetDetailAccessories(query.s||0);
+	if (res["STATUS"] === 1) {
+		detailaccessories = res["DATA"]["accessories"];
+	}
+    console.log(detailaccessories);
+
+	return {
+		props: { detailaccessories, backend }, // will be passed to the page component as props
+	};
+}

pages/yamaha/product/apparel.js

@@ -0,0 +1,135 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+
+import GetDataApparel from "../../../api/product/apparel.js";
+import DataApparel from "../../../pages-sections/yamaha/product/apparel.js";
+import DataSnackbarContent from "../../../pages-sections/yamaha/snackbar.js";
+import Router from 'next/router'
+
+const useStyles = makeStyles(styles);
+const queryClient = new QueryClient();
+const handleName = values => {
+    Router.push({
+        pathname: 'yamaha/product/apparel',
+        query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{},
+    })
+}
+const Apparel = function ({ selected, apparel, asia, basic, merchand, maxi, rainsuit, motogp, offroad, backend, ...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/yamalube.jpg")} height="200px"/>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <QueryClientProvider client={queryClient}>
+                <DataSnackbarContent/>
+                <DataApparel selected={(selected=="")?null:selected[0]["id"]} handleName={handleName} apparel={apparel} asia={asia} basic={basic} merchand={merchand} maxi={maxi} rainsuit={rainsuit} motogp={motogp} offroad={offroad} backend={backend} />
+            </QueryClientProvider>
+        </div>
+        <Footer />
+        </div>
+    );
+};
+
+export default Apparel;
+
+export async function getServerSideProps(context) {
+    var apparel = [];
+    var asia = [];
+    var basic = [];
+    var merchand = [];
+    var maxi = [];
+    var rainsuit = [];
+    var motogp = [];
+    var offroad = [];
+    var filter = context.query.filter||"";
+    var selected = "";
+
+    const backend = process.env.BACKEND_SERVER_URI;
+    
+    var res = await GetDataApparel.GetApparel(filter);
+    if (res["STATUS"] === 1) {
+        apparel = res["DATA"]["apparels"];
+        if (filter !=""){
+            selected = apparel.filter((i)=>i.name==filter);
+        }
+    }
+
+    var res = await GetDataApparel.GetApparel46Asia(filter);
+    if (res["STATUS"] === 1) {
+        asia = res["DATA"]["apparels"];
+        if (filter !=""){
+            selected = asia.filter((i)=>i.name==filter);
+        }
+    }
+    
+    var res = await GetDataApparel.GetApparelBasic(filter);
+    if (res["STATUS"] === 1) {
+        basic = res["DATA"]["apparels"];
+        if (filter !=""){
+            selected = basic.filter((i)=>i.name==filter);
+        }
+    }
+
+    var res = await GetDataApparel.GetApparelMerchandise(filter);
+    if (res["STATUS"] === 1) {
+        merchand = res["DATA"]["apparels"];
+        if (filter !=""){
+            selected = merchand.filter((i)=>i.name==filter);
+        }
+    }
+
+    var res = await GetDataApparel.GetApparelMaxi(filter);
+    if (res["STATUS"] === 1) {
+        maxi = res["DATA"]["apparels"];
+        if (filter !=""){
+            selected = maxi.filter((i)=>i.name==filter);
+        }
+    }
+
+    var res = await GetDataApparel.GetApparelRainSuit(filter);
+    if (res["STATUS"] === 1) {
+        rainsuit = res["DATA"]["apparels"];
+        if (filter !=""){
+            selected = rainsuit.filter((i)=>i.name==filter);
+        }
+    }
+
+    var res = await GetDataApparel.GetApparelMotoGP(filter);
+    if (res["STATUS"] === 1) {
+        motogp = res["DATA"]["apparels"];
+        if (filter !=""){
+            selected = motogp.filter((i)=>i.name==filter);
+        }
+    }
+
+    var res = await GetDataApparel.GetApparelOffRoad(filter);
+    if (res["STATUS"] === 1) {
+        offroad = res["DATA"]["apparels"];
+        if (filter !=""){
+            selected = offroad.filter((i)=>i.name==filter);
+        }
+    }
+
+    return { 
+        props: { selected, apparel, asia, basic, merchand, maxi, rainsuit, motogp, offroad, backend }, // will be passed to the page component as props
+    };
+}

pages/yamaha/product/apparel_details.js

@@ -0,0 +1,54 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import ApparelDetail from "pages-sections/yamaha/product/apparel_details.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+import GetDetailApparel from "../../../api/product/apparel.js"
+
+const useStyles = makeStyles(styles);
+
+const ApparelDetails = function ({ backend, detailapparel, ...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/yamalube.jpg")} width="200px"/>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <ApparelDetail detailapparel={detailapparel} backend={backend}/>  
+        </div>
+        <Footer />
+        </div>
+    );
+}
+
+export default ApparelDetails;
+
+export async function getServerSideProps(context) {
+    var {query} = context;
+	var detailapparel = [];
+    const backend = process.env.BACKEND_SERVER_URI;
+
+	var res = await GetDetailApparel.GetDetailApparel(query.s||0);
+	if (res["STATUS"] === 1) {
+		detailapparel = res["DATA"]["apparels"];
+	}
+
+	return {
+		props: { detailapparel, backend }, // will be passed to the page component as props
+	};
+}

pages/yamaha/product/helmet.js

@@ -0,0 +1,135 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+
+import GetDataHelmet from "../../../api/product/helmet.js"
+import DataHelmet from "../../../pages-sections/yamaha/product/helmet.js";
+import DataSnackbarContent from "../../../pages-sections/yamaha/snackbar.js";
+import Router from 'next/router'
+
+const useStyles = makeStyles(styles);
+const queryClient = new QueryClient();
+const handleName = values => {
+    Router.push({
+        pathname: '/yamaha/product/helmet',
+        query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{},
+    })
+}
+const Helmet = function ({ selected, helmet, mtx, extreme, ranger, backend, fighter, swirl, classic, uno, ...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/yamalube.jpg")} height="200px"/>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <QueryClientProvider client={queryClient}>
+                <DataSnackbarContent/>
+                <DataHelmet selected={(selected=="")?null:selected[0]["id"]} handleName={handleName} helmet={helmet} mtx={mtx} extreme={extreme} ranger={ranger} fighter={fighter} swirl={swirl} classic={classic} uno={uno} backend={backend} />
+            </QueryClientProvider>
+        </div>
+        <Footer />
+        </div>
+    );
+};
+
+export default Helmet;
+
+export async function getServerSideProps(context) {
+    var helmet = [];
+    var mtx = [];
+    var extreme = [];
+    var ranger = [];
+    var fighter = [];
+    var swirl = [];
+    var classic = [];
+    var uno = [];
+    var filter = context.query.filter||"";
+    var selected = "";
+
+    const backend = process.env.BACKEND_SERVER_URI;
+    
+    var res = await GetDataHelmet.GetHelmetRConcepts(filter);
+    if (res["STATUS"] === 1) {
+        helmet = res["DATA"]["helmets"];
+        if (filter !=""){
+            selected = helmet.filter((i)=>i.name==filter);
+        }
+    }
+
+    var res = await GetDataHelmet.GetHelmetMTX(filter);
+    if (res["STATUS"] === 1) {
+        mtx = res["DATA"]["helmets"];
+        if (filter !=""){
+            selected = mtx.filter((i)=>i.name==filter);
+        }
+    }
+
+    var res = await GetDataHelmet.GetHelmetExtreme(filter);
+    if (res["STATUS"] === 1) {
+        extreme = res["DATA"]["helmets"];
+        if (filter !=""){
+            selected = extreme.filter((i)=>i.name==filter);
+        }
+    }
+
+    var res = await GetDataHelmet.GetHelmetRanger(filter);
+    if (res["STATUS"] === 1) {
+        ranger = res["DATA"]["helmets"];
+        if (filter !=""){
+            selected = ranger.filter((i)=>i.name==filter);
+        }
+    }
+
+    var res = await GetDataHelmet.GetHelmetFighter(filter);
+    if (res["STATUS"] === 1) {
+        fighter = res["DATA"]["helmets"];
+        if (filter !=""){
+            selected = fighter.filter((i)=>i.name==filter);
+        }
+    }
+
+    var res = await GetDataHelmet.GetHelmetSwirl(filter);
+    if (res["STATUS"] === 1) {
+        swirl = res["DATA"]["helmets"];
+        if (filter !=""){
+            selected = swirl.filter((i)=>i.name==filter);
+        }
+    }
+    
+    var res = await GetDataHelmet.GetHelmetClassic(filter);
+    if (res["STATUS"] === 1) {
+        classic = res["DATA"]["helmets"];
+        if (filter !=""){
+            selected = classic.filter((i)=>i.name==filter);
+        }
+    }
+
+    var res = await GetDataHelmet.GetHelmetUno(filter);
+    if (res["STATUS"] === 1) {
+        uno = res["DATA"]["helmets"];
+        if (filter !=""){
+            selected = uno.filter((i)=>i.name==filter);
+        }
+    }
+
+    return { 
+        props: { selected, helmet, mtx, extreme, ranger, fighter, swirl, classic, uno, backend }, // will be passed to the page component as props
+    };
+}

pages/yamaha/product/helmet_details.js

@@ -0,0 +1,55 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import HelmetDetail from "pages-sections/yamaha/product/helmet_details.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+import GetDetailHelmet from "../../../api/product/helmet.js"
+
+const useStyles = makeStyles(styles);
+
+const HelmetDetails = function ({ backend, detailhelmet, ...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/yamalube.jpg")} width="200px"/>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <HelmetDetail detailhelmet={detailhelmet} backend={backend}/>  
+        </div>
+        <Footer />
+        </div>
+    );
+}
+
+export default HelmetDetails;
+
+export async function getServerSideProps(context) {
+    var {query} = context;
+	var detailhelmet = [];
+    const backend = process.env.BACKEND_SERVER_URI;
+
+	var res = await GetDetailHelmet.GetDetailHelmet(query.s||0);
+	if (res["STATUS"] === 1) {
+		detailhelmet = res["DATA"]["helmets"];
+	}
+    console.log(detailhelmet);
+
+	return {
+		props: { detailhelmet, backend }, // will be passed to the page component as props
+	};
+}

pages/yamaha/product/product.js

@@ -0,0 +1,129 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import DataProduct from "pages-sections/yamaha/product/product.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+
+import Getproduct from "../../../api/product/product.js";
+
+const useStyles = makeStyles(styles);
+
+const Product = function ({
+  backend,
+  maxi,
+  matic,
+  naked,
+  sport,
+  offroad,
+  moped,
+  monsterenergy,
+  cbu,
+  ...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={classNames(classes.main, classes.mainRaised)}>
+        <DataProduct
+          maxi={maxi}
+          matic={matic}
+          naked={naked}
+          sport={sport}
+          offroad={offroad}
+          moped={moped}
+          monsterenergy={monsterenergy}
+          cbu={cbu}
+          backend={backend}
+        />
+      </div>
+      <Footer />
+    </div>
+  );
+};
+
+export default Product;
+
+export async function getServerSideProps(context) {
+  var maxi = [];
+  var matic = [];
+  var naked = [];
+  var sport = [];
+  var offroad = [];
+  var moped = [];
+  var monsterenergy = [];
+  var cbu = [];
+  const backend = process.env.BACKEND_SERVER_URI;
+
+  var res = await Getproduct.GetProductMaxi();
+  if (res["STATUS"] === 1) {
+    maxi = res["DATA"]["products"];
+  }
+
+  var res = await Getproduct.GetProductMatic();
+  if (res["STATUS"] === 1) {
+    matic = res["DATA"]["products"];
+  }
+
+  var res = await Getproduct.GetProductNaked();
+  if (res["STATUS"] === 1) {
+    naked = res["DATA"]["products"];
+  }
+
+  var res = await Getproduct.GetProductSport();
+  if (res["STATUS"] === 1) {
+    sport = res["DATA"]["products"];
+  }
+
+  var res = await Getproduct.GetProductOffRoad();
+  if (res["STATUS"] === 1) {
+    offroad = res["DATA"]["products"];
+  }
+
+  var res = await Getproduct.GetProductMoped();
+  if (res["STATUS"] === 1) {
+    moped = res["DATA"]["products"];
+  }
+
+  var res = await Getproduct.GetProductMonsterEnergy();
+  if (res["STATUS"] === 1) {
+    monsterenergy = res["DATA"]["products"];
+  }
+
+  var res = await Getproduct.GetProductCBU();
+  if (res["STATUS"] === 1) {
+    cbu = res["DATA"]["products"];
+  }
+
+  console.log(cbu);
+
+  return {
+    props: {
+      maxi,
+      matic,
+      naked,
+      sport,
+      offroad,
+      moped,
+      monsterenergy,
+      cbu,
+      backend,
+    }, // will be passed to the page component as props
+  };
+}

pages/yamaha/product/product_detail.js

@@ -0,0 +1,54 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import ProductDetail from "pages-sections/yamaha/product/product_details.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+import GetDetailproduct from "../../../api/product/product.js"
+
+const useStyles = makeStyles(styles);
+
+const ProductDetails = function ({ backend, detailproduct, ...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={classNames(classes.main, classes.mainRaised)}>
+        <ProductDetail detailproduct={detailproduct} backend={backend}/>  
+      </div>
+      <Footer />
+    </div>
+  );
+}
+
+export default ProductDetails;
+
+export async function getServerSideProps(context) {
+  var {query} = context;
+	var detailproduct = [];
+  const backend = process.env.BACKEND_SERVER_URI;
+
+	var res = await GetDetailproduct.GetDetailProduct(query.s||0);
+	if (res["STATUS"] === 1) {
+		detailproduct = res["DATA"]["products"];
+	}
+
+	return {
+		props: { detailproduct, backend }, // will be passed to the page component as props
+	};
+}

pages/yamaha/product/yamalube.js

@@ -0,0 +1,73 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+
+import GetDataYamalube from "../../../api/product/accessories.js";
+import DataYamalube from "../../../pages-sections/yamaha/product/yamalube.js";
+import DataSnackbarContent from "../../../pages-sections/yamaha/snackbar.js";
+import Router from 'next/router'
+
+const useStyles = makeStyles(styles);
+const queryClient = new QueryClient();
+const handleName = values => {
+    Router.push({
+        pathname: '/yamaha/product/yamalube',
+        query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{},
+    })
+}
+const Yamalube = function ({ selected, yamalube, backend, ...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/yamalube.jpg")} height="200px"/>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <QueryClientProvider client={queryClient}>
+                <DataSnackbarContent/>
+                <DataYamalube selected={(selected=="")?null:selected[0]["id"]} handleName={handleName} yamalube={yamalube} backend={backend} />
+            </QueryClientProvider>
+        </div>
+        <Footer />
+        </div>
+    );
+};
+
+export default Yamalube;
+
+export async function getServerSideProps(context) {
+    var yamalube = [];
+    var filter = context.query.filter||"";
+    var selected = "";
+
+    const backend = process.env.BACKEND_SERVER_URI;
+
+    var res = await GetDataYamalube.GetYamalube(filter);
+
+    if (res["STATUS"] === 1) {
+        yamalube = res["DATA"]["accessories"];
+        if (filter !=""){
+            selected = yamalube.filter((i)=>i.name==filter);
+        }
+    }
+
+    return { 
+        props: { selected, yamalube, backend }, // will be passed to the page component as props
+    };
+}

pages/yamaha/product/yamalube_details.js

@@ -0,0 +1,54 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import YamalubeDetail from "pages-sections/yamaha/product/yamalube_details.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+import GetDetailYamalube from "../../../api/product/accessories.js"
+
+const useStyles = makeStyles(styles);
+
+const YamalubeDetails = function ({ backend, detailyamalube, ...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/yamalube.jpg")} width="200px"/>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <YamalubeDetail detailyamalube={detailyamalube} backend={backend}/>  
+        </div>
+        <Footer />
+        </div>
+    );
+}
+
+export default YamalubeDetails;
+
+export async function getServerSideProps(context) {
+    var {query} = context;
+	var detailyamalube = [];
+    const backend = process.env.BACKEND_SERVER_URI;
+
+	var res = await GetDetailYamalube.GetDetailAccessories(query.s||0);
+	if (res["STATUS"] === 1) {
+		detailyamalube = res["DATA"]["accessories"];
+	}
+
+	return {
+		props: { detailyamalube, backend }, // will be passed to the page component as props
+	};
+}

pages/yamaha/product/ygp.js

@@ -0,0 +1,74 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+
+import GetDataYGP from "../../../api/product/accessories.js";
+import DataYGP from "../../../pages-sections/yamaha/product/ygp.js";
+import DataSnackbarContent from "../../../pages-sections/yamaha/snackbar.js";
+import Router from 'next/router'
+
+
+const useStyles = makeStyles(styles);
+const queryClient = new QueryClient();
+const handleName = values => {
+    Router.push({
+        pathname: '/yamaha/product/ygp',
+        query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{},
+    })
+}
+const YGP = function ({ selected,ygp, backend, ...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/yamalube.jpg")} height="200px"/>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <QueryClientProvider client={queryClient}>
+                <DataSnackbarContent/>
+                <DataYGP selected={(selected=="")?null:selected[0]["id"]} handleName={handleName} ygp={ygp} backend={backend} />
+            </QueryClientProvider>
+        </div>
+        <Footer />
+        </div>
+    );
+};
+
+export default YGP;
+
+export async function getServerSideProps(context) {
+    var ygp = [];
+    var filter = context.query.filter||"";
+    var selected = "";
+    
+    const backend = process.env.BACKEND_SERVER_URI;
+
+    var res = await GetDataYGP.GetYGP(filter);
+
+    if (res["STATUS"] === 1) {
+        ygp = res["DATA"]["accessories"];
+        if (filter !=""){
+            selected = ygp.filter((i)=>i.name==filter);
+        }
+    }
+    
+    return { 
+        props: { selected, ygp, backend }, // will be passed to the page component as props
+    };
+}

pages/yamaha/product/ygp_details.js

@@ -0,0 +1,54 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import YGPDetail from "pages-sections/yamaha/product/ygp_details.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+import GetDetailYGP from "../../../api/product/accessories.js"
+
+const useStyles = makeStyles(styles);
+
+const YGPDetails = function ({ backend, detailygp, ...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/yamalube.jpg")} width="200px"/>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <YGPDetail detailygp={detailygp} backend={backend}/>  
+        </div>
+        <Footer />
+        </div>
+    );
+}
+
+export default YGPDetails;
+
+export async function getServerSideProps(context) {
+    var {query} = context;
+	var detailygp = [];
+    const backend = process.env.BACKEND_SERVER_URI;
+
+	var res = await GetDetailYGP.GetDetailAccessories(query.s||0);
+	if (res["STATUS"] === 1) {
+		detailygp = res["DATA"]["accessories"];
+	}
+    
+	return {
+		props: { detailygp, backend }, // will be passed to the page component as props
+	};
+}