add suzuki model

api/carrer/carrer.js

@@ -4,7 +4,7 @@ async function GetCarrerS1(token="") {
 	var res = await apollo.query(
 		`
         query {
-            carrers(where: {category: "S1"})
+            carrers(where: {category: "S1" business_partner: "1"})
                 {
                     id
                     name
@@ -22,7 +22,7 @@ async function GetCarrerD3(token="") {
 	var res = await apollo.query(
 		`
         query {
-            carrers(where: {category: "D3"})
+            carrers(where: {category: "D3" business_partner: "1"})
                 {
                     id
                     name
@@ -40,7 +40,7 @@ async function GetCarrerSMA(token="") {
 	var res = await apollo.query(
 		`
         query {
-            carrers(where: {category: "SMA"})
+            carrers(where: {category: "SMA" business_partner: "1"})
                 {
                     id
                     name

api/home/carousel.js

@@ -4,7 +4,7 @@ async function GetCarousels(token="") {
 	var res = await apollo.query(
 		`
 		query{
-			carousels
+			carousels(where: { business_partner: "1" })
 			{
 				img{
 				url

api/suzuki/carrer/carrer.js

@@ -0,0 +1,88 @@
+import apollo from "../../../lib/apollo.js";
+
+async function GetCarrerS1(token="") {
+	var res = await apollo.query(
+		`
+        query {
+            carrers(where: {category: "S1" business_partner:"2"})
+                {
+                    id
+                    name
+                    start_regis
+                    until_regis
+                    name_description
+                }
+            }`,
+		token
+	);
+	return res;
+}
+
+async function GetCarrerD3(token="") {
+	var res = await apollo.query(
+		`
+        query {
+            carrers(where: {category: "D3" business_partner:"2"})
+                {
+                    id
+                    name
+                    start_regis
+                    until_regis
+                    name_description
+                }
+            }`,
+		token
+	);
+	return res;
+}
+
+async function GetCarrerSMA(token="") {
+	var res = await apollo.query(
+		`
+        query {
+            carrers(where: {category: "SMA" business_partner:"2"})
+                {
+                    id
+                    name
+                    start_regis
+                    until_regis
+                    name_description
+                }
+            }`,
+		token
+	);
+	return res;
+}
+
+async function GetDetailCarrer(id, token="") {
+	var res = await apollo.query(
+		`
+        query($input: ID!){
+            carrers(where:{id:$input})
+            {
+                name
+                description
+                category
+                img{
+                    url
+                }
+                start_regis
+                until_regis
+                name_description
+            }
+        }		
+        `,
+        token, 
+        {	
+            "input": id
+        }
+    );
+	return res;
+}
+
+module.exports = {
+    GetCarrerS1:GetCarrerS1,
+    GetCarrerD3:GetCarrerD3,
+    GetCarrerSMA:GetCarrerSMA,
+    GetDetailCarrer:GetDetailCarrer,
+};

api/suzuki/dealer/dealer.js

@@ -0,0 +1,26 @@
+import apollo from "../../lib/apollo.js";
+
+async function GetDealers(filter, token="") {
+	var res = await apollo.query(
+        `
+            query { ${(filter!="")?`name: "${filter}"`:""}
+                dealers
+                {
+                    id
+                    name
+                    kota_dealer
+                    address
+                    telp
+                    email
+                    location
+                }
+            }
+        `,
+            token
+	);
+	return res;
+}
+
+module.exports = {
+	GetDealers: GetDealers,
+};

api/suzuki/home/businessPartner.js

@@ -0,0 +1,23 @@
+import apollo from "../../../lib/apollo.js";
+
+async function GetbusinessPartners(token = "") {
+	var res = await apollo.query(
+		`
+		query{
+			businessPartners
+			{
+			name
+				img{
+				url
+				}
+			}
+		}
+		`,
+		token
+	);
+	return res;
+}
+
+module.exports = {
+	GetbusinessPartners: GetbusinessPartners,
+};

api/suzuki/home/carousel.js

@@ -0,0 +1,22 @@
+import apollo from "../../../lib/apollo.js";
+
+async function GetCarousels(token="") {
+	var res = await apollo.query(
+		`
+		query {
+			carousels(where: { business_partner: "2" }) {
+				id
+				img {
+					url
+				}
+			}
+		}
+				`,
+		token
+	);
+	return res;
+}
+
+module.exports = {
+	GetCarousels: GetCarousels,
+};

api/suzuki/home/service.js

@@ -0,0 +1,23 @@
+import apollo from "../../../lib/apollo.js";
+
+async function Getservices(token="") {
+	var res = await apollo.query(
+		`
+		query{
+			services
+			{
+			name
+				img{
+				url
+				}
+			}
+		}
+				`,
+		token
+	);
+	return res;
+}
+
+module.exports = {
+	Getservices: Getservices,
+};

api/suzuki/latest_news/news.js

@@ -0,0 +1,79 @@
+import apollo from "../../../lib/apollo.js";
+
+async function GetNews(token="", start = 0) {
+	var res = await apollo.query(
+      `
+        query{
+          latestNews(where: { business_partner: "2" })
+          {
+            id
+            title
+            description
+            img{
+              url
+            }
+            published_at
+          }
+        }
+      `,
+		token,
+    {
+      start: start,
+    }
+	);
+	return res;
+}
+
+async function GetOtherNews(token="", start = 0) {
+	var res = await apollo.query(
+      `
+        query{
+          latestNews(where: { business_partner: "2" })
+          {
+            id
+            title
+            description
+            img{
+              url
+            }
+            published_at
+          }
+        }
+      `,
+		token,
+    {
+      start: start,
+    }
+	);
+	return res;
+}
+
+async function GetDetailNews(id, token="") {
+	var res = await apollo.query(
+      `
+        query($input: ID!) {
+          latestNews(where:{id:$input})
+          {
+            id
+            title
+            description
+            img{
+              url
+            }
+            published_at
+          }
+        }
+      `,
+      token, 
+      {	
+        "input": id
+      }
+	);
+	return res;
+}
+
+module.exports = {
+	GetNews: GetNews,
+  GetDetailNews: GetDetailNews,
+  GetOtherNews:GetOtherNews,
+};

api/suzuki/product/product.js

@@ -0,0 +1,48 @@
+import apollo from "../../../lib/apollo.js";
+
+async function GetDetailProduct(id, token = "") {
+  var res = await apollo.query(
+    `
+    query($input: ID!){
+      products(where:{id:$input})
+      {
+        name
+        price
+        description
+        img{
+          url
+        }
+        overview
+        specification
+        film
+        stock
+      }
+    }	`,
+    token, {
+      "input": id
+    }
+  );
+  return res;
+}
+
+async function GetProductSuzuki(token = "") {
+  var res = await apollo.query(
+    `
+    query {
+      products(where: { business_partner: "2" }) {
+        id
+        name
+        price
+        img {
+          url
+        }
+      }
+    }`,
+    token
+  );
+  return res;
+}
+module.exports = {
+  GetProductSuzuki: GetProductSuzuki,
+  GetDetailProduct:GetDetailProduct,
+};

components/Footer/Footer.js

@@ -35,7 +35,8 @@ export default function Footer(props) {
     <GridContainer style={{padding: "40px"}} justify="center">
       <Grid>
         <div align="center" style={{marginTop:"-20px"}}>
-          <img className={classes.imgCard} src="https://1.bp.blogspot.com/-GTTVvnJ9x0c/Wn70CJxGoYI/AAAAAAAACRY/GSv1ehPFOPQZcvOfiALy_p7Xa7GOBRHKgCLcBGAs/s320/TB.png" width="250px"/>
+          <img className={classes.imgCard} src="https://1.bp.blogspot.com/-GTTVvnJ9x0c/Wn70CJxGoYI/AAAAAAAACRY/GSv1ehPFOPQZcvOfiALy_p7Xa7GOBRHKgCLcBGAs/s320/TB.pn" style={{width:"350px"}}/>
+          <img className={classes.imgCard} src="https://belimotoryuk.com/wp-content/uploads/2017/03/cropped-logo-yamaha.png" style={{width:"350px"}}/>
         </div>
       </Grid>
       <Grid>

components/Footer/FooterSuzuki.js

@@ -0,0 +1,106 @@
+/*eslint-disable*/
+import React from "react";
+// nodejs library to set properties for components
+import PropTypes from "prop-types";
+// nodejs library that concatenates classes
+import classNames from "classnames";
+// material-ui core components
+import { List, ListItem } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+
+// @material-ui/icons
+import Favorite from "@material-ui/icons/Favorite";
+
+import GridContainer from "components/Grid/GridContainer.js";
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import Card from "components/Card/Card.js";
+import styles from "assets/jss/nextjs-material-kit/components/footerStyle.js";
+
+const useStyles = makeStyles(styles);
+
+export default function Footer(props) {
+    const classes = useStyles();
+    const { whiteFont } = props;
+    const footerClasses = classNames({
+        [classes.footer]: true,
+        [classes.footerWhiteFont]: whiteFont
+    });
+    const aClasses = classNames({
+        [classes.a]: true,
+        [classes.footerWhiteFont]: whiteFont
+    });
+    return (
+        <div>
+        <GridContainer style={{padding: "40px"}} justify="center">
+        <Grid>
+            <div align="center" style={{marginTop:"-20px"}}>
+            <img className={classes.imgCard} src="https://nomorsalesmobil.com/wp-content/uploads/2018/10/Suzuki-logo-5000x2500.png" style={{width:"350px"}}/>
+            <img className={classes.imgCard} src="https://nomorsalesmobil.com/wp-content/uploads/2018/10/Suzuki-logo-5000x2500.png" style={{width:"350px"}}/>
+            </div>
+        </Grid>
+        <Grid>
+            <div>
+            <footer className={footerClasses}>
+                <div className={classes.container}>
+                <div className={classes.left}>
+                    <List className={classes.list}>
+                    <ListItem className={classes.inlineBlock}>
+                        <a href="/suzuki/home" className={classes.block} > Home </a>
+                    </ListItem>
+                    <ListItem className={classes.inlineBlock}>
+                        <a href="/suzuki/product/product" className={classes.block}> Motor </a>
+                    </ListItem>
+                    <ListItem className={classes.inlineBlock}>
+                        <a href="/suzuki/product/ygp" className={classes.block}> YGP </a>
+                    </ListItem>
+                    <ListItem className={classes.inlineBlock}>
+                        <a href="/suzuki/product/yamalube" className={classes.block}> Yamalube </a>
+                    </ListItem>
+                    <ListItem className={classes.inlineBlock}>
+                        <a href="/suzuki/product/apparel" className={classes.block}> Apparel </a>
+                    </ListItem>
+                    <ListItem className={classes.inlineBlock}>
+                        <a href="/suzuki/product/helmet" className={classes.block}> Helmet </a>
+                    </ListItem>
+                    <ListItem className={classes.inlineBlock}>
+                        <a href="/suzuki/product/accessories" className={classes.block}> Accessories </a>
+                    </ListItem>
+                    <ListItem className={classes.inlineBlock}>
+                        <a href="/suzuki/product/service" className={classes.block}> Service </a>
+                    </ListItem>
+                    <ListItem className={classes.inlineBlock}>
+                        <a href="/suzuki/product/dealer" className={classes.block}> Dealer </a>
+                    </ListItem>
+                    <ListItem className={classes.inlineBlock}>
+                        <a href="/suzuki/latestsnews" className={classes.block}> Latest News </a>
+                    </ListItem>
+                    <ListItem className={classes.inlineBlock}>
+                        <a href="/suzuki/carrer" className={classes.block}> Carrer </a>
+                    </ListItem>
+                    <ListItem className={classes.inlineBlock}>
+                        <a href="/suzuki/about_us/aboutus" className={classes.block}> About Us </a>
+                    </ListItem>
+                    </List>
+                </div>
+                </div>
+            </footer>
+            </div>
+        </Grid>
+        </GridContainer>
+        <GridContainer style={{marginTop: "-40px"}} justify="center">
+        <Grid>
+        <div align="center">
+        <div className={classes.right}>
+                &copy; {1900 + new Date().getYear()} , All Right Reserved{" "} by{" "} @Thamrin Group Company
+            </div>
+        </div>
+        </Grid>
+    </GridContainer>
+    </div>
+    );
+}
+
+Footer.propTypes = {
+    whiteFont: PropTypes.bool
+};

components/Header/HeaderSuzuki.js

@@ -0,0 +1,169 @@
+/*eslint-disable*/
+import React from "react";
+import Link from "next/link";
+
+// @material-ui/core components
+import { makeStyles } from "@material-ui/core/styles";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import Icon from "@material-ui/core/Icon";
+import Chart from "@material-ui/icons/LocalGroceryStore";
+
+// @material-ui/icons
+import { Apps, ShareTwoTone } from "@material-ui/icons";
+
+// core components
+import CustomDropdown from "components/CustomDropdown/CustomDropdown.js";
+import Button from "components/CustomButtons/Button.js";
+import styles from "assets/jss/nextjs-material-kit/components/headerLinksStyle.js";
+
+const useStyles = makeStyles(styles);
+
+export default function HeaderLinks(props) {
+    const classes = useStyles();
+    return (
+        <List className={classes.list}>
+        <ListItem className={classes.listItem}>
+        <Link href="/suzuki/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"
+            />
+            </Button>
+        </Link>
+        </ListItem>
+        <ListItem className={classes.listItem}>
+            <Link href="/suzuki/home">
+            <Button color="transparent" className={classes.navLink} style={{marginTop:"10px"}}>
+                <Icon className={classes.icons}>home</Icon> Home
+            </Button>
+            </Link>
+        </ListItem>
+        <ListItem className={classes.listItem}>
+            <Link href="/suzuki/product/product">
+            <Button color="transparent" className={classes.navLink} style={{marginTop:"10px"}}>
+                <Icon className={classes.icons}>home</Icon> Product
+            </Button>
+            </Link>
+        </ListItem>
+        {/* <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
+            <CustomDropdown
+            noLiPadding
+            navDropdown
+            buttonText="Product"
+            buttonProps={{
+                className: classes.navLink,
+                color: "transparent",
+            }}
+            buttonIcon={Apps}
+            dropdownList={[
+                <Link href="/suzuki/product/product">
+                <a className={classes.dropdownLink}>Motor</a>
+                </Link>,
+                <Link href="/suzuki/product/ygp">
+                <a className={classes.dropdownLink}>YGP</a>
+                </Link>,
+                <Link href="/suzuki/product/yamalube">
+                <a className={classes.dropdownLink}>Yamalube</a>
+                </Link>,
+                <Link href="/suzuki/product/helmet">
+                <a className={classes.dropdownLink}>Helmet</a>
+                </Link>,
+                <Link href="/suzuki/product/apparel">
+                <a className={classes.dropdownLink}>Apparel</a>
+                </Link>,
+                <Link href="/suzuki/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="/suzuki/dealers">
+                <a className={classes.dropdownLink}>Dealers</a>
+            </Link>,
+            ]}
+            />
+        </ListItem> */}
+        <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
+            <Link href="/suzuki/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="/suzuki/carrer" color="transparent" className={classes.navLink}>
+            <Icon className={classes.icons}>wallet_travel</Icon> Career
+            </Button>
+        </ListItem>
+        <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
+            <CustomDropdown
+            noLiPadding
+            navDropdown
+            buttonText="Partner"
+            buttonProps={{
+                className: classes.navLink,
+                color: "transparent",
+            }}
+            buttonIcon={ShareTwoTone}
+            dropdownList={[
+                <Link href="https://www.suzuki-motor.co.id/">
+                <a className={classes.dropdownLink}>suzuki</a>
+                </Link>,
+                <Link href="https://www.suzuki.co.id/">
+                <a className={classes.dropdownLink}>Suzuki</a>
+                </Link>,
+                <Link href="https://www.honda-indonesia.com/">
+                <a className={classes.dropdownLink}>Honda</a>
+                </Link>,
+                <Link href="https://www.hino.co.id/">
+                <a className={classes.dropdownLink}>Hino</a>
+                </Link>,
+                <Link href="https://www.mercedes-benz.co.id/passengercars.html">
+                <a className={classes.dropdownLink}>Mercedes-Benz</a>
+                </Link>,
+                <Link href="http://bprberkatsejati.com/">
+                <a className={classes.dropdownLink}>BPR Berkat Sejati</a>
+                </Link>,
+                <Link href="https://www.hino.co.id/">
+                <a className={classes.dropdownLink}>Palembang Indah Mall</a>
+                </Link>,
+                <Link href="http://www.emilia-hotel.com/">
+                <a className={classes.dropdownLink}>Hotel Emilia</a>
+                </Link>,
+                <Link href="http://homes.thamrin.xyz/">
+                <a className={classes.dropdownLink}>Thamrin Home</a>
+                </Link>,
+                <Link href="https://www.hino.co.id/">
+                <a className={classes.dropdownLink}>Ketty Resto</a>
+                </Link>,
+            ]}
+            />
+        </ListItem>
+        <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
+            <Button
+            href="/suzuki/abous_us/aboutus"
+            color="transparent"
+            className={classes.navLink}
+            >
+            <Icon className={classes.icons}>account_balance</Icon> About Us
+            </Button>
+        </ListItem>
+        <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
+            <Button href="/chart" color="transparent" className={classes.navLink}>
+            <Chart className={classes.icons} />
+            </Button>
+        </ListItem>
+        <ListItem className={classes.listItem} style={{marginTop:"10px"}}>
+            <Button
+            href="/suzuki/login"
+            className={classes.registerNavLink}
+            color="info"
+            round
+            >
+            <Icon className={classes.icons}>input</Icon> Login
+            </Button>
+        </ListItem>
+        </List>
+    );
+}

pages-sections/suzuki/carrer/carrer.js

@@ -0,0 +1,156 @@
+import React from "react";
+import classNames from "classnames";
+
+import { makeStyles } from "@material-ui/core/styles";
+import Dashboard from "@material-ui/icons/Dashboard";
+
+import GridContainer from "components/Grid/GridContainer.js";
+import GridItem from "components/Grid/GridItem.js";
+import NavPills from "components/NavPills/NavPills.js";
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import CardHeader from "components/Card/CardHeader.js";
+import Quote from "components/Typography/Quote.js"
+import Grid from '@material-ui/core/Grid';
+import Button from "components/CustomButtons/Button.js";
+import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
+import Icon from "@material-ui/core/Icon";
+
+const useStyles = makeStyles(styles);
+
+const DataCarrers = function ({ backend, s1, d3, sma, ...props }) {
+  const classes = useStyles();
+  const { ...rest } = props;
+  const imageClasses = classNames(
+    classes.imgRaised,
+    classes.imgRoundedCircle,
+    classes.imgFluid
+  );
+  const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
+  const CarrerS1 = s1.map((data) => {
+    return (
+      <Grid style={{width:"600px", padding:"30px"}}>
+        <Card>
+          <CardHeader color="danger"><div align="center">{data.name}</div></CardHeader>
+          <CardBody>
+            <Quote
+              text={data.name_description}
+              author="Post By Thamrin Group"
+            />
+            Masa Pendaftaran : {data.start_regis} s/d {data.until_regis}
+            <Button color="danger" style={{marginLeft:"20px"}} round href={"/suzuki/carrer_details?s="+data.id}>
+                <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer
+            </Button>
+          </CardBody>
+        </Card>
+      </Grid>
+    );
+  })
+  const CarrerD3 = d3.map((data) => {
+    return (
+      <Grid style={{width:"600px", padding:"30px"}}>
+        <Card>
+          <CardHeader color="danger">{data.name}</CardHeader>
+          <CardBody>
+            <Quote
+              text={data.name_description}
+              author="Post By Thamrin Group"
+            />
+            Masa Pendaftaran : {data.start_regis} s/d {data.until_regis}
+            <Button color="danger" style={{marginLeft:"20px"}} round href={"/suzuki/carrer_details?s="+data.id}>
+                <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer
+            </Button>
+          </CardBody>
+        </Card>
+      </Grid>
+    );
+  })
+  const CarrerSMA = sma.map((data) => {
+    return (
+      <Grid style={{width:"600px", padding:"30px"}}>
+        <Card>
+          <CardHeader justify="center" color="danger">{data.name}</CardHeader>
+          <CardBody>
+            <Quote
+              text={data.name_description}
+              author="Post By Thamrin Group"
+            />
+            Masa Pendaftaran : {data.start_regis} s/d {data.until_regis}
+            <Button color="danger" style={{marginLeft:"20px"}} round href={"/suzuki/carrer_details?s="+data.id}>
+                <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer
+            </Button>
+          </CardBody>
+        </Card>
+      </Grid>
+    );
+  })
+  return (
+    <Card className={classes.textCenter}>
+      <div align="center">
+        <CardHeader color="info">Product</CardHeader>
+      </div>
+      <CardBody>
+        <div align="center">
+          <h2>Carrer & Job Vacancies</h2>
+        </div>
+          <GridContainer justify="center">
+            <GridItem>
+              <NavPills
+                alignCenter
+                color="primary"
+                tabs={[
+                  {
+                    tabButton: "S1",
+                    tabIcon: Dashboard,
+                    tabContent: (
+                      <GridContainer justify="center">
+                        {CarrerS1}
+                      </GridContainer>
+                    ),
+                  },
+                  {
+                    tabButton: "D3",
+                    tabIcon: Dashboard,
+                    tabContent: (
+                      <GridContainer justify="center">
+                        {CarrerD3}
+                      </GridContainer>
+                    ),
+                  },
+                  {
+                    tabButton: "SMA / SMK ",
+                    tabIcon: Dashboard,
+                    tabContent: (
+                      <GridContainer justify="center">
+                        {CarrerSMA}
+                      </GridContainer>
+                    ),
+                  },
+                  {
+                    tabButton: "Recruitment Process",
+                    tabIcon: Dashboard,
+                    tabContent: (
+                      <GridContainer justify="center">
+                        <GridItem>
+                        <div align="center">
+                          <img
+                            alt="..."
+                            style={{ width: "1000px", height: "800px", display: "block" }}
+                            src=" https://www.yamaha-motor.co.id/uploads/career/big_img/5d305eca19dfb8171.jpg"
+                            className={navImageClasses}
+                          />
+                        </div>
+                        </GridItem>
+                      </GridContainer>
+                    ),
+                  },
+                ]}
+              />
+            </GridItem>
+          </GridContainer>
+      </CardBody>
+    </Card>
+  );
+}
+
+export default DataCarrers;

pages-sections/suzuki/carrer/carrer_details.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import ReactHtmlParser from "react-html-parser";
+import { makeStyles } from "@material-ui/core/styles";
+
+import classNames from "classnames";
+import GridContainer from "components/Grid/GridContainer.js";
+import Grid from '@material-ui/core/Grid';
+import GridItem from "components/Grid/GridItem.js";
+import Card from "components/Card/Card.js";
+import Carousel from "react-slick";
+import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
+
+const useStyles = makeStyles(styles);
+const DataCarrer = function ({ backend, detailcarrer, ...props }) {
+    const classes = useStyles();
+    const imageClasses = classNames(
+        classes.imgRaised,
+        classes.imgRoundedCircle,
+        classes.imgFluid
+    );
+    const settings = {
+        dots: true,
+        infinite: true,
+        speed: 500,
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        autoplay: true,
+        time: 5
+    };
+    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
+    const carrer = detailcarrer.map((data) => {
+        return (
+            <GridContainer justify="center">
+                <Grid fluid xs={4}> 
+                    <div className={classes.section} id="notifications">
+                        <div className={classes.section}>
+                            <div className={classes.container}>
+                            <GridContainer>
+                                <GridItem className={classes.marginAuto}>
+                                    <Card carousel>
+                                        <Carousel {...settings}>
+                                            <img className={navImageClasses} width="300px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
+                                        </Carousel>
+                                    </Card>
+                                </GridItem>
+                            </GridContainer>
+                            </div>
+                        </div>
+                    </div>
+                </Grid>
+                <Grid xs={7} style={{padding:"40px", marginTop:"-30px"}}>
+                    <h4>{data.name}</h4>
+                    <h4>{data.published_at}</h4>
+                    <hr></hr>
+                    <div align="justify">
+                        <p>{ReactHtmlParser(data.description)}</p>
+                    </div>
+                </Grid>
+            </GridContainer>
+        );
+    })
+    return (
+        <div>
+            {carrer}
+        </div>
+    );
+}
+
+export default DataCarrer;

pages-sections/suzuki/home/business_partner.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+
+import GridContainer from "components/Grid/GridContainer.js";
+import Grid from '@material-ui/core/Grid';
+import Card from "components/Card/Card.js";
+import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
+import SnackbarContent from "components/Snackbar/SnackbarContent.js";
+
+const useStyles = makeStyles(styles);
+const DataBusinessPartner = function ({ backend, businessPartners, ...props })  {
+    const classes = useStyles();
+    const BusinessPartners = businessPartners.map((data) => {
+      return (
+      <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
+        <Card style={{width: "20rem"}}>
+        <div align="center">
+          <img
+            style={{padding:"20px", height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={`${backend}${data.img[0]["url"]}`}/>
+        </div>
+        </Card>
+      </Grid>
+      );
+    })
+    return (
+      <div className={classes.section} id="notifications" style={{marginTop:"-50px"}}>
+        <div align="center">
+          <div align="center" className={classes.section} id="notifications">
+            <SnackbarContent
+              message={
+                <h4>Our Business Partner</h4>
+              }
+              align="center"
+              color="danger"
+            />
+          </div>
+        </div>
+        <div>
+          <GridContainer justify="center">
+            {BusinessPartners}
+          </GridContainer>
+        </div>
+      </div>
+    );
+}
+
+export default DataBusinessPartner;

pages-sections/suzuki/home/carousel.js

@@ -0,0 +1,61 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+
+import GridContainer from "components/Grid/GridContainer.js";
+import GridItem from "components/Grid/GridItem.js";
+import Card from "components/Card/Card.js";
+import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
+import Carousel from "react-slick";
+import Grid from '@material-ui/core/Grid';
+
+const useStyles = makeStyles(styles);
+const DataCarousel = function ({ backend, carousels, ...props })  {
+    const classes = useStyles();
+    const settings = {
+      dots: true,
+      infinite: true,
+      speed: 500,
+      slidesToShow: 1,
+      slidesToScroll: 1,
+      autoplay: true,
+      time: 5
+    };
+    const Carousels = carousels.map((data) => {
+      return (
+        <div>
+          <img src={`${backend}${data.img[0]["url"]}`} alt="First slide" className="slick-image" />
+      </div>
+      );
+    })
+    return (
+      <div className={classes.section} id="notifications">
+        <div className={classes.section}>
+          <div className={classes.container}>
+            <GridContainer>
+              <GridItem className={classes.marginAuto}>
+              <Card carousel>
+                <Carousel {...settings}>
+                  {Carousels}
+                </Carousel>
+              </Card>
+              </GridItem>
+            </GridContainer>
+            <GridContainer style={{marginTop:"-30px"}}>
+                <Grid style={{padding:"35px"}}>
+                    <Card>
+                      <iframe width="853" height="480" src="https://www.youtube.com/embed/lF8mfdLz2A8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style={{height: "300px", width: "500px", display: "block"}}></iframe>
+                    </Card>
+                </Grid>
+                <Grid  style={{padding:"35px"}}>
+                    <Card>
+                      <iframe width="853" height="480" src="https://www.youtube.com/embed/W5y2C8lqOeA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style={{height: "300px", width: "500px", display: "block"}}></iframe>
+                    </Card>
+                </Grid>
+            </GridContainer>
+          </div>
+        </div>
+      </div>
+    );
+}
+
+export default DataCarousel;

pages-sections/suzuki/home/core_value.js

@@ -0,0 +1,50 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+
+import GridContainer from "components/Grid/GridContainer.js";
+import GridItem from "components/Grid/GridItem.js";
+import Card from "components/Card/Card.js";
+import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
+import Carousel from "react-slick";
+
+import image1 from "assets/img/core1.png";
+import image2 from "assets/img/core2.png";
+
+const useStyles = makeStyles(styles);
+const CoreValue = function ({ backend, carousel, ...props })  {
+    const classes = useStyles();
+    const settings = {
+        dots: true,
+        infinite: true,
+        speed: 500,
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        autoplay: true,
+        time: 5
+    };
+
+    return (
+        <div className={classes.section} id="notifications">
+            <div className={classes.section}>
+            <div className={classes.container}>
+                <GridContainer>
+                <GridItem className={classes.marginAuto}>
+                <Card carousel>
+                    <Carousel {...settings}>
+                        <div>
+                            <img src={image1} alt="First slide" className="slick-image" />
+                        </div>
+                        <div>
+                            <img src={image2} alt="First slide" className="slick-image" />
+                        </div>
+                    </Carousel>
+                </Card>
+                </GridItem>
+                </GridContainer>
+            </div>
+            </div>
+        </div>
+    );
+}
+
+export default CoreValue;

pages-sections/suzuki/home/feature.js

@@ -0,0 +1,119 @@
+import React, { Component } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Button from "components/CustomButtons/Button.js";
+import Icon from "@material-ui/core/Icon";
+
+import GridContainer from "components/Grid/GridContainer.js";
+import Grid from '@material-ui/core/Grid';
+import Card from "components/Card/Card.js";
+import SnackbarContent from "components/Snackbar/SnackbarContent.js";
+
+import imagesStyles from "assets/jss/nextjs-material-kit/imagesStyles.js";
+import { cardTitle } from "assets/jss/nextjs-material-kit.js";
+
+const styles = {
+    ...imagesStyles,
+    cardTitle,
+};
+
+const useStyles = makeStyles(styles);
+const DataFeature = function ({ backend, service, ...props })  {
+    const classes = useStyles();
+    return (
+        <div className={classes.section} id="notifications">
+            <div align="center" className={classes.section} id="notifications">
+                <SnackbarContent
+                message={
+                    <h4>Feature Product</h4>
+                }
+                align="center"
+                color="danger"
+                />
+            </div>
+            <GridContainer justify="center" style={{padding:"50px", marginTop:"-70px"}}>
+                <Grid>
+                    <Card style={{height: "250px", width: "400px", padding:"20px"}}>
+                        <img className={classes.imgCard} src="https://a.ipricegroup.com/media/0630/2006_sprint12/harga_yamaha_motor.jpg" alt="Card-img" style={{height: "200px", width: "350px", display: "block"}}/>
+                        {/* <div className={classes.imgCardOverlay}>
+                            <div align="center" style={{marginTop:"120px"}}>
+                            <Button color="white" href="https://www.instagram.com/yamahaindonesia/" target="_blank">
+                                <Icon className={classes.icons}>open_in_new</Icon>For More Info
+                            </Button>
+                            </div>
+                        </div> */}
+                    </Card>
+                </Grid>
+                <Grid>
+                    <Card style={{height: "250px", width: "400px", padding:"20px"}}>
+                        <img className={classes.imgCard} src="https://www.akhtarnews.com/wp-content/uploads/2019/03/harga-sparepart-yamaha.jpg" alt="Card-img" style={{height: "200px", width: "350px", display: "block"}}/>
+                        {/* <div className={classes.imgCardOverlay}>
+                            <div align="center" style={{marginTop:"120px"}}>
+                            <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank">
+                                <Icon className={classes.icons}>open_in_new</Icon>For More Info
+                            </Button>
+                            </div>
+                        </div> */}
+                    </Card>
+                </Grid>
+                <Grid>
+                    <Card style={{height: "250px", width: "400px", padding:"20px"}}>
+                        <div align="center">
+                            <img className={classes.imgCard} src="https://2.bp.blogspot.com/-pzpJ-ltEFsA/V6Kh26cBoNI/AAAAAAAAAKY/ZLnJ9v_lDIcKUUNcoVKM8Qw0Izawq08_wCLcB/s1600/yamalube%2B2.jpg" alt="Card-img" style={{height: "200px", width: "300px", display: "block"}}/>
+                        </div>
+                        {/* <div className={classes.imgCardOverlay}>
+                            <div align="center" style={{marginTop:"120px"}}>
+                            <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank">
+                                <Icon className={classes.icons}>open_in_new</Icon>For More Info
+                            </Button>
+                            </div>
+                        </div> */}
+                    </Card>
+                </Grid>
+                <Grid>
+                    <Card style={{height: "250px", width: "400px", padding:"20px"}}>
+                        <div align="center">
+                            <img className={classes.imgCard} src="https://aomc.mx/mm5/graphics/00000001/X0779100X.jpg" alt="Card-img" style={{height: "200px", width: "200px", display: "block"}}/>
+                        </div>
+                        {/* <div className={classes.imgCardOverlay}>
+                            <div align="center" style={{marginTop:"120px"}}>
+                            <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank">
+                                <Icon className={classes.icons}>open_in_new</Icon>For More Info
+                            </Button>
+                            </div>
+                        </div> */}
+                    </Card>
+                </Grid>
+                <Grid>
+                    <Card style={{height: "250px", width: "400px", padding:"20px"}}>
+                        <div align="center">
+                            <img className={classes.imgCard} src="https://content.motosport.com/images/items/900/TLD/TLDY0AF/X001.jpg" alt="Card-img" style={{height: "200px", width: "200px", display: "block"}}/>
+                        </div>
+                        {/* <div className={classes.imgCardOverlay}>
+                            <div align="center" style={{marginTop:"120px"}}>
+                            <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank">
+                                <Icon className={classes.icons}>open_in_new</Icon>For More Info
+                            </Button>
+                            </div>
+                        </div> */}
+                    </Card>
+                </Grid>
+                <Grid>
+                    <Card style={{height: "250px", width: "400px", padding:"20px"}}>
+                        <div align="center">
+                            <img className={classes.imgCard} src="https://static.wixstatic.com/media/bb08a6_fe756d074abc4e4c86ed0fe0134e50a5~mv2.jpg/v1/fill/w_960,h_429,al_c,q_85/bb08a6_fe756d074abc4e4c86ed0fe0134e50a5~mv2.webp" alt="Card-img" style={{height: "200px", width: "350px", display: "block"}}/>
+                        </div>
+                        {/* <div className={classes.imgCardOverlay}>
+                            <div align="center" style={{marginTop:"120px"}}>
+                            <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank">
+                                <Icon className={classes.icons}>open_in_new</Icon>For More Info
+                            </Button>
+                            </div>
+                        </div> */}
+                    </Card>
+                </Grid>
+            </GridContainer>
+        </div>
+    );
+}
+
+export default DataFeature;

pages-sections/suzuki/home/service.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+
+import GridContainer from "components/Grid/GridContainer.js";
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import Card from "components/Card/Card.js";
+import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
+import SnackbarContent from "components/Snackbar/SnackbarContent.js";
+
+const useStyles = makeStyles(styles);
+const DataService = function ({ backend, service, ...props })  {
+    const classes = useStyles();
+    const services = service.map((data, index) => (
+      <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
+        <Card style={{width: "20rem"}}>
+          <div align="center">
+            <img
+              style={{height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={`${backend}${data.img[0]["url"]}`}/>
+          </div>
+        </Card>
+      </Grid>
+    ));
+    return (
+      <div className={classes.section} id="notifications">
+        <div align="center">
+          <div align="center" className={classes.section} id="notifications">
+            <SnackbarContent
+              message={
+                <h4>Our Service</h4>
+              }
+              align="center"
+              color="danger"
+            />
+          </div>
+        </div>
+        <div>
+          <GridContainer style={{padding: "40px"}} justify="center">
+            {services}
+          </GridContainer>
+        </div>
+      </div>
+    );
+}
+
+export default DataService;

pages-sections/suzuki/home/sosmed.js

@@ -0,0 +1,90 @@
+import React, { Component } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Button from "components/CustomButtons/Button.js";
+import Icon from "@material-ui/core/Icon";
+
+import GridContainer from "components/Grid/GridContainer.js";
+import Grid from '@material-ui/core/Grid';
+import Card from "components/Card/Card.js";
+import SnackbarContent from "components/Snackbar/SnackbarContent.js";
+
+
+import imagesStyles from "assets/jss/nextjs-material-kit/imagesStyles.js";
+import { cardTitle } from "assets/jss/nextjs-material-kit.js";
+
+const styles = {
+    ...imagesStyles,
+    cardTitle,
+};
+
+const useStyles = makeStyles(styles);
+const DataService = function ({ backend, service, ...props })  {
+    const classes = useStyles();
+    return (
+        <div className={classes.section} id="notifications">
+            <div align="center" className={classes.section} id="notifications">
+                <SnackbarContent
+                message={
+                    <h4>Follow Us On</h4>
+                }
+                align="center"
+                color="danger"
+                />
+            </div>
+            <GridContainer justify="center" style={{padding:"50px", marginTop:"-50px"}}>
+                <Grid>
+                    <Card>
+                        <img className={classes.imgCard} src="https://cdn.hipwallpaper.com/i/4/66/Me0Bbc.jpg" alt="Card-img" style={{height: "400px", width: "600px", display: "block"}}/>
+                        <div className={classes.imgCardOverlay}>
+                            <div align="center" style={{marginTop:"300px"}}>
+                            <Button color="white" href="https://www.facebook.com/yamaholigan" target="_blank">
+                                <Icon className={classes.icons}>open_in_new</Icon>For More Info
+                            </Button>
+                            </div>
+                        </div>
+                    </Card>
+                </Grid>
+                <Grid>
+                    <Card>
+                        <img className={classes.imgCard} src="https://www.devidia.net/wp-content/uploads/bfi_thumb/youtube-logo-34ec4yxwi0ab51015sqxorxcg1ycqmqxyfutkbpxe4wbnl436.jpg" alt="Card-img" style={{height: "400px", width: "600px", display: "block"}}/>
+                        <div className={classes.imgCardOverlay}>
+                            <div align="center" style={{marginTop:"300px"}}>
+                            <Button color="white" href="https://www.youtube.com/user/yamahamotorindonesia" target="_blank">
+                                <Icon className={classes.icons}>open_in_new</Icon>For More Info
+                            </Button>
+                            </div>
+                        </div>
+                    </Card>
+                </Grid>
+            </GridContainer>
+            <GridContainer justify="center" style={{marginTop:"-110px"}}>
+                <Grid>
+                    <Card>
+                        <img className={classes.imgCard} src="https://en.instagram-brand.com/wp-content/uploads/2016/11/Glyph-Icon-hero.png" alt="Card-img" style={{height: "400px", width: "600px", display: "block"}}/>
+                        <div className={classes.imgCardOverlay}>
+                            <div align="center" style={{marginTop:"300px"}}>
+                            <Button color="white" href="https://www.instagram.com/yamahaindonesia/" target="_blank">
+                                <Icon className={classes.icons}>open_in_new</Icon>For More Info
+                            </Button>
+                            </div>
+                        </div>
+                    </Card>
+                </Grid>
+                <Grid>
+                    <Card>
+                        <img className={classes.imgCard} src="https://acmconnect.com/wp-content/uploads/2015/07/Screenshot-1276-1024x576.png" alt="Card-img" style={{height: "400px", width: "600px", display: "block"}}/>
+                        <div className={classes.imgCardOverlay}>
+                            <div align="center" style={{marginTop:"300px"}}>
+                            <Button color="white" href="https://twitter.com/YamahaIndonesia/status/1369143579684171778" target="_blank">
+                                <Icon className={classes.icons}>open_in_new</Icon>For More Info
+                            </Button>
+                            </div>
+                        </div>
+                    </Card>
+                </Grid>
+            </GridContainer>
+        </div>
+    );
+}
+
+export default DataService;

pages-sections/suzuki/latest_news/news.js

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import { makeStyles } from "@material-ui/core/styles";
+
+import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
+import Grid from '@material-ui/core/Grid';
+import GridContainer from "components/Grid/GridContainer.js";
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import Button from "components/CustomButtons/Button.js";
+import Paginations from "components/Pagination/Pagination.js";
+import Icon from "@material-ui/core/Icon";
+
+const useStyles = makeStyles(styles);
+
+const DataLatestNews = function ({ backend, news, ...props }) {
+  const classes = useStyles();
+  const latnews = news.map((data) => {
+    return (
+    <Grid align="center" style={{padding:"30px", marginTop:"-50px"}}>
+      <Card style={{width: "20rem"}}>
+        <img
+          style={{height: "180px", width: "100%", display: "block"}}
+          className={classes.imgCardTop}
+          src={`${backend}${data.img[0]["url"]}`}
+        />
+        <CardBody>
+          <p>{data.title}</p>
+          <p>{data.published_at}</p>
+          <Button color="info" round href={"/suzuki/latestnews_details?s="+data.id}>
+            <Icon className={classes.icons}>open_in_new</Icon>Read More
+          </Button>
+        </CardBody>
+      </Card>
+    </Grid>
+    );
+  })
+  return (
+    <div className={classes.section} id="notifications">
+      <div align="center">
+          <h2>Latest News</h2>
+      </div>
+      <div>
+        <GridContainer justify="center">
+          {latnews}
+        </GridContainer>
+      </div>
+      <div align="center">
+        <Paginations
+          pages={[
+            { text: "PREV" },
+            { text: 1 },
+            { text: 2 },
+            { active: true, text: 3 },
+            { text: 4 },
+            { text: 5 },
+            { text: "NEXT" }
+          ]}
+          color="info"
+        />
+      </div>
+    </div>
+  );
+}
+
+export default DataLatestNews;

pages-sections/suzuki/latest_news/news_details.js

@@ -0,0 +1,96 @@
+import React, { useState, useEffect } from "react";
+import ReactHtmlParser from "react-html-parser";
+// @material-ui/core components
+import { makeStyles } from "@material-ui/core/styles";
+import ReactPaginate from "react-paginate";
+
+import classNames from "classnames";
+import GridContainer from "components/Grid/GridContainer.js";
+import Grid from '@material-ui/core/Grid';
+import GridItem from "components/Grid/GridItem.js";
+import Card from "components/Card/Card.js";
+import Carousel from "react-slick";
+import CardBody from "components/Card/CardBody.js";
+import Button from "components/CustomButtons/Button.js";
+import Icon from "@material-ui/core/Icon";
+import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
+
+const useStyles = makeStyles(styles);
+
+const DataLatestNews = function ({ backend, news, othernews,...props }) {
+    const classes = useStyles();
+    const imageClasses = classNames(
+        classes.imgRaised,
+        classes.imgRoundedCircle,
+        classes.imgFluid
+    );
+    const settings = {
+        dots: true,
+        infinite: true,
+        speed: 500,
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        autoplay: true,
+        time: 5
+    };
+    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
+    const otherlatnews = othernews.map((data) => {
+        return (
+        <Grid align="center" style={{padding:"5px", marginTop:"-50px"}}>
+            <Card style={{width: "20rem"}}>
+                <img
+                style={{height: "180px", width: "100%", display: "block"}}
+                className={classes.imgCardTop}
+                src={`${backend}${data.img[0]["url"]}`}
+                />
+                <CardBody>
+                <p>{data.title}</p>
+                <Button color="info" round href={"/latestnews_details?s="+data.id}>
+                    <Icon className={classes.icons}>open_in_new</Icon>Read More
+                </Button>
+                </CardBody>
+            </Card>
+        </Grid>
+        );
+    })
+    const latnews = news.map((data) => {
+        return (
+            
+            <GridContainer justify="center">
+                <Grid fluid xs={4}> 
+                    <div className={classes.section} id="notifications">
+                        <div className={classes.section}>
+                            <div className={classes.container}>
+                            <GridContainer>
+                                <GridItem className={classes.marginAuto}>
+                                    <Card carousel>
+                                        <Carousel {...settings}>
+                                            <img className={navImageClasses} width="300px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
+                                        </Carousel>
+                                    </Card>
+                                    <hr></hr>
+                                    <div align="center">
+                                        <h3>Other Latest News</h3>
+                                        <h3>{otherlatnews}</h3>
+                                    </div>
+                                </GridItem>
+                            </GridContainer>
+                            </div>
+                        </div>
+                    </div>
+                </Grid>
+                <Grid xs={7} style={{padding:"40px", marginTop:"-30px"}}>
+                    <h4>{data.title}</h4>
+                    <h4>{data.published_at}</h4>
+                    <hr></hr>
+                    <div align="justify">
+                        <p>{ReactHtmlParser(data.description)}</p>
+                    </div>
+                </Grid>
+            </GridContainer>
+        );
+    });
+    return <div>{latnews}</div>;
+};
+
+export default DataLatestNews;

pages-sections/suzuki/product/product.js

@@ -0,0 +1,86 @@
+import React from "react";
+import classNames from "classnames";
+
+import { makeStyles } from "@material-ui/core/styles";
+import Dashboard from "@material-ui/icons/Dashboard";
+
+import GridContainer from "components/Grid/GridContainer.js";
+import GridItem from "components/Grid/GridItem.js";
+import NavPills from "components/NavPills/NavPills.js";
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import CardHeader from "components/Card/CardHeader.js";
+import CardFooter from "components/Card/CardFooter.js";
+import Button from "components/CustomButtons/Button.js";
+import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
+import Icon from "@material-ui/core/Icon";
+import { Motorcycle } from "@material-ui/icons";
+
+const useStyles = makeStyles(styles);
+const DataProduct = function ({ backend, car, ...props })  {
+    const classes = useStyles();
+    const { ...rest } = props;
+    const imageClasses = classNames(
+      classes.imgRaised,
+      classes.imgRoundedCircle,
+      classes.imgFluid
+    );
+    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
+    const ProductSuzuki = car.map((data) => {
+      return (
+        <div style={{padding: "20px", marginTop:"-40px"}}>   
+        <Card className={classes.textCenter} align="center" style={{width:"350px"}}>
+            <CardBody>
+            <div style={{padding:"10px"}}>
+                <img style={{ width: "250px", display: "block" }} src={`${backend}${data.img[0]["url"]}`} className={navImageClasses}
+                />
+                <div align="center">
+                <h5>{data.name}</h5>
+                <h5>Rp.{data.price}</h5>
+                <Button 
+                    color="info" round
+                    href={"/suzuki/product/product_detail?s="+data.id}
+                >
+                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                </Button>
+                </div>
+            </div>
+            </CardBody>
+        </Card>
+        </div>
+      );
+    })
+    return (
+    <Card className={classes.textCenter}>
+      <div align="center">
+        <CardHeader color="info">Product</CardHeader>
+      </div>
+      <CardBody>
+        <div align="center">
+          <h2>Product & Facilities</h2>
+        </div>
+          <GridContainer justify="center">
+            <GridItem>
+              <NavPills
+                alignCenter
+                color="primary"
+                tabs={[
+                  {
+                    tabButton: "Passenger Car",
+                    tabIcon: Motorcycle,
+                    tabContent: (
+                      <GridContainer justify="center">
+                        {ProductSuzuki}
+                      </GridContainer>
+                    ),
+                  },
+                ]}
+              />
+            </GridItem>
+          </GridContainer>
+      </CardBody>
+    </Card>
+    );
+}
+
+export default DataProduct;

pages-sections/suzuki/product/product_details.js

@@ -0,0 +1,157 @@
+import React, { useState, useEffect } from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+import ReactHtmlParser from "react-html-parser";
+import Dashboard from "@material-ui/icons/Dashboard";
+import Icon from "@material-ui/core/Icon";
+
+import GridContainer from "components/Grid/GridContainer.js";
+import Grid from '@material-ui/core/Grid';
+import GridItem from "components/Grid/GridItem.js";
+import NavPills from "components/NavPills/NavPills.js";
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import CardHeader from "components/Card/CardHeader.js";
+import CardFooter from "components/Card/CardFooter.js";
+import Button from "components/CustomButtons/Button.js";
+import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
+import Carousel from "react-slick";
+
+const useStyles = makeStyles(styles);
+
+const DataProduct = function ({ backend, detailproduct, ...props })  {
+    const classes = useStyles();
+    const { ...rest } = props;
+    const imageClasses = classNames(
+      classes.imgRaised,
+      classes.imgRoundedCircle,
+      classes.imgFluid
+    );
+    const settings = {
+      dots: true,
+      infinite: true,
+      speed: 500,
+      slidesToShow: 1,
+      slidesToScroll: 1,
+      autoplay: true,
+      time: 5
+    };
+    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
+    const Productdetails = detailproduct.map((data) => {
+      return (
+        <div>
+        <GridContainer>
+            <Grid fluid xs={5}> 
+            <div className={classes.section} id="notifications">
+              <div className={classes.section}>
+                <div className={classes.container}>
+                  <GridContainer>
+                    <GridItem className={classes.marginAuto}>
+                    <Card carousel>
+                      <Carousel {...settings}>
+                        <img className={navImageClasses} width="300px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
+                      </Carousel>
+                    </Card>
+                    {/* <Button color="info" round href={"/product_detail?s="+data.id}>
+                      <Icon className={classes.icons}>shopping_cart</Icon>Add To Cart
+                    </Button> */}
+                    </GridItem>
+                  </GridContainer>
+                </div>
+              </div>
+            </div>
+            </Grid>
+            <Grid xs={7} style={{padding:"40px", marginTop:"-30px"}}>
+              <h3>{data.name}</h3>
+              <h3>Rp.{data.price} - Stock Unit : {data.stock}</h3>
+              <hr></hr>
+              <div align="justify">
+                <p>{ReactHtmlParser(data.description)}</p>
+              </div>
+              {/* <GridContainer>
+                <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
+                  <Card className={classes.marginAuto} style={{height: "165px", width: "165px"}}>
+                    <img src="https://www.yamaha-motor.co.id/uploads/products/2021022311424212835Z1732.png"/>
+                  </Card>
+                </Grid>
+                <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
+                  <Card className={classes.marginAuto} style={{height: "165px", width: "165px"}}>
+                    <img src="https://www.yamaha-motor.co.id/uploads/products/2021022311424235104F62455.png"/>
+                  </Card>
+                </Grid>
+              </GridContainer> */}
+            </Grid>
+        </GridContainer>
+        <GridContainer justify="center">
+          <GridItem>
+          <NavPills
+              color="primary"
+              align="center"
+              alignCenter
+              tabs={[
+                {
+                  tabButton: "Overview",
+                  tabIcon: Dashboard,
+                  tabContent: (
+                    <div>
+                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>
+                      <GridItem className={classes.marginAuto}>
+                        <div align="justify">
+                          {ReactHtmlParser(data.overview)}
+                        </div>
+                      </GridItem>
+                    </GridContainer>
+                    </div>
+                  ),
+                },
+                {
+                  tabButton: "Specification",
+                  tabIcon: Dashboard,
+                  tabContent: (
+                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>
+                      <GridItem className={classes.marginAuto}>
+                        <div align="justify">
+                          {ReactHtmlParser(data.specification)}
+                        </div>
+                      </GridItem>
+                    </GridContainer>
+                  ),
+                },
+                {
+                  tabButton: "Film",
+                  tabIcon: Dashboard,
+                  tabContent: (
+                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>
+                      <GridItem className={classes.marginAuto}>
+                        <div align="justify">
+                          {ReactHtmlParser(data.film)}
+                        </div>
+                      </GridItem>
+                    </GridContainer>
+                  ),
+                },
+              ]}
+            />
+          </GridItem>
+        </GridContainer>
+        </div> 
+      );
+    })
+    return (
+      <Card className={classes.textCenter}>
+      <div align="center">
+        <CardHeader color="info">Product Detail</CardHeader>
+      </div>
+      <CardBody>
+          <div> 
+            {Productdetails}
+          </div>
+      </CardBody>
+      <CardFooter className={classes.textMuted} textAlign="center">
+        © 2020 , All Right Reserved by @Thamrin Brother Company
+      </CardFooter>
+    </Card>
+    );
+}
+
+export default DataProduct;

pages-sections/suzuki/snackbar.js

@@ -0,0 +1,31 @@
+import React from "react";
+
+// @material-ui/core components
+import { makeStyles } from "@material-ui/core/styles";
+
+// Component
+import SnackbarContent from "components/Snackbar/SnackbarContent.js";
+import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
+
+const useStyles = makeStyles(styles);
+
+const DataSnackbarContent = function()  {
+  const classes = useStyles();
+  return (
+    <div align="center">
+      <div align="center" className={classes.section} id="notifications">
+        <SnackbarContent
+          message={
+            <h4>
+              Thamrin Group bersama Anda melawan COVID-19. Untuk informasi silakan <a href="https://covid19.go.id/" target="_blank" className={classes.block}>klik di sini.</a> 
+            </h4>
+          }
+          align="center"
+          color="danger"
+        />
+      </div>
+    </div>
+  );
+}
+
+export default DataSnackbarContent;

pages-sections/yamaha/carrer/carrer.js

@@ -104,7 +104,7 @@ const DataCarrers = function ({ backend, s1, d3, sma, ...props }) {
                     tabIcon: Dashboard,
                     tabContent: (
                       <GridContainer justify="center">
-                        {CarrerS1}{CarrerS1}{CarrerS1}
+                        {CarrerS1}
                       </GridContainer>
                     ),
                   },
@@ -114,7 +114,6 @@ const DataCarrers = function ({ backend, s1, d3, sma, ...props }) {
                     tabContent: (
                       <GridContainer justify="center">
                         {CarrerD3}
-                        {CarrerD3}
                       </GridContainer>
                     ),
                   },

pages/_error.js

@@ -3,7 +3,7 @@ import Router from "next/router";
 
 export default class _error extends Component {
   componentDidMount = () => {
-    Router.push("/home");
+    Router.push("/suzuki/home");
   };
 
   render() {

pages/suzuki/_app.js

@@ -1,48 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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/abous_us/aboutus.js

@@ -8,11 +8,11 @@ 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 HeaderSuzuki from "components/Header/HeaderSuzuki.js";
+import FooterSuzuki from "components/Footer/FooterSuzuki.js";
 import GridContainer from "components/Grid/GridContainer.js";
 import GridItem from "components/Grid/GridItem.js";
-import AboutUs from "pages-sections/about_us/about_us.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";
 
@@ -24,7 +24,7 @@ const AboutUS = function ({ backend, businessPartners, service, carousel, ...pro
   return (
     <div>
       <Header
-        rightLinks={<HeaderLinks />}
+        rightLinks={<HeaderSuzuki />}
         fixed
         color="info"
         changeColorOnScroll={{
@@ -50,7 +50,7 @@ const AboutUS = function ({ backend, businessPartners, service, carousel, ...pro
       <div className={classNames(classes.main, classes.mainRaised)}>
         <AboutUs />  
       </div>
-      <Footer />
+      <FooterSuzuki />
     </div>
   );
 }

pages/suzuki/abous_us/penghargaan.js

@@ -8,11 +8,11 @@ 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 HeaderSuzuki from "components/Header/HeaderSuzuki.js";
+import FooterSuzuki from "components/Footer/FooterSuzuki.js";
 import GridContainer from "components/Grid/GridContainer.js";
 import GridItem from "components/Grid/GridItem.js";
-import Penghargaan from "pages-sections/about_us/penghargaan.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";
 
@@ -24,7 +24,7 @@ const penghargaan = function ({ backend, businessPartners, service, carousel, ..
     return (
         <div>
         <Header
-            rightLinks={<HeaderLinks />}
+            rightLinks={<HeaderSuzuki />}
             fixed
             color="info"
             changeColorOnScroll={{
@@ -50,7 +50,7 @@ const penghargaan = function ({ backend, businessPartners, service, carousel, ..
         <div className={classNames(classes.main, classes.mainRaised)}>
             <Penghargaan />  
         </div>
-        <Footer />
+        <FooterSuzuki />
         </div>
     );
 }

pages/suzuki/abous_us/profile.js

@@ -8,11 +8,11 @@ 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 HeaderSuzuki from "components/Header/HeaderSuzuki.js";
+import FooterSuzuki from "components/Footer/FooterSuzuki.js";
 import GridContainer from "components/Grid/GridContainer.js";
 import GridItem from "components/Grid/GridItem.js";
-import Profile from "pages-sections/about_us/profile.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";
 
@@ -24,7 +24,7 @@ const profile = function ({ backend, businessPartners, service, carousel, ...pro
     return (
         <div>
         <Header
-            rightLinks={<HeaderLinks />}
+            rightLinks={<HeaderSuzuki />}
             fixed
             color="info"
             changeColorOnScroll={{
@@ -50,7 +50,7 @@ const profile = function ({ backend, businessPartners, service, carousel, ...pro
         <div className={classNames(classes.main, classes.mainRaised)}>
             <Profile />  
         </div>
-        <Footer />
+        <FooterSuzuki />
         </div>
     );
 }

pages/suzuki/abous_us/saham.js

@@ -8,11 +8,11 @@ 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 HeaderSuzuki from "components/Header/HeaderSuzuki.js";
+import FooterSuzuki from "components/Footer/FooterSuzuki.js";
 import GridContainer from "components/Grid/GridContainer.js";
 import GridItem from "components/Grid/GridItem.js";
-import Saham from "pages-sections/about_us/saham.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";
 
@@ -24,7 +24,7 @@ const saham = function ({ backend, businessPartners, service, carousel, ...props
     return (
         <div>
         <Header
-            rightLinks={<HeaderLinks />}
+            rightLinks={<HeaderSuzuki />}
             fixed
             color="info"
             changeColorOnScroll={{
@@ -50,7 +50,7 @@ const saham = function ({ backend, businessPartners, service, carousel, ...props
         <div className={classNames(classes.main, classes.mainRaised)}>
             <Saham />  
         </div>
-        <Footer />
+        <FooterSuzuki />
         </div>
     );
 }

pages/suzuki/abous_us/sejarah.js

@@ -8,11 +8,11 @@ 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 HeaderSuzuki from "components/Header/HeaderSuzuki.js";
+import FooterSuzuki from "components/Footer/FooterSuzuki.js";
 import GridContainer from "components/Grid/GridContainer.js";
 import GridItem from "components/Grid/GridItem.js";
-import Sejarah from "pages-sections/about_us/sejarah.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";
 
@@ -24,7 +24,7 @@ const sejarah = function ({ backend, businessPartners, service, carousel, ...pro
     return (
         <div>
         <Header
-            rightLinks={<HeaderLinks />}
+            rightLinks={<HeaderSuzuki />}
             fixed
             color="info"
             changeColorOnScroll={{
@@ -50,7 +50,7 @@ const sejarah = function ({ backend, businessPartners, service, carousel, ...pro
         <div className={classNames(classes.main, classes.mainRaised)}>
             <Sejarah />  
         </div>
-        <Footer />
+        <FooterSuzuki />
         </div>
     );
 }

pages/suzuki/abous_us/struktur_organisasi.js

@@ -8,11 +8,11 @@ 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 HeaderSuzuki from "components/Header/HeaderSuzuki.js";
+import FooterSuzuki from "components/Footer/FooterSuzuki.js";
 import GridContainer from "components/Grid/GridContainer.js";
 import GridItem from "components/Grid/GridItem.js";
-import StrukturOrganisasi from "pages-sections/about_us/struktur_organisasi.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";
 
@@ -24,7 +24,7 @@ const Strukturorganisasi = function ({ backend, businessPartners, service, carou
     return (
         <div>
         <Header
-            rightLinks={<HeaderLinks />}
+            rightLinks={<HeaderSuzuki />}
             fixed
             color="info"
             changeColorOnScroll={{
@@ -50,7 +50,7 @@ const Strukturorganisasi = function ({ backend, businessPartners, service, carou
         <div className={classNames(classes.main, classes.mainRaised)}>
             <StrukturOrganisasi />  
         </div>
-        <Footer />
+        <FooterSuzuki />
         </div>
     );
 }

pages/suzuki/abous_us/tata_kelola.js

@@ -8,11 +8,11 @@ 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 HeaderSuzuki from "components/Header/HeaderSuzuki.js";
+import FooterSuzuki from "components/Footer/FooterSuzuki.js";
 import GridContainer from "components/Grid/GridContainer.js";
 import GridItem from "components/Grid/GridItem.js";
-import TataKelola from "pages-sections/about_us/tata_kelola.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";
 
@@ -24,7 +24,7 @@ const Tatakelola = function ({ backend, businessPartners, service, carousel, ...
     return (
         <div>
         <Header
-            rightLinks={<HeaderLinks />}
+            rightLinks={<HeaderSuzuki />}
             fixed
             color="info"
             changeColorOnScroll={{
@@ -50,7 +50,7 @@ const Tatakelola = function ({ backend, businessPartners, service, carousel, ...
         <div className={classNames(classes.main, classes.mainRaised)}>
             <TataKelola />  
         </div>
-        <Footer />
+        <FooterSuzuki />
         </div>
     );
 }

pages/suzuki/abous_us/tugas_fungsi.js

@@ -8,11 +8,11 @@ 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 HeaderSuzuki from "components/Header/HeaderSuzuki.js";
+import FooterSuzuki from "components/Footer/FooterSuzuki.js";
 import GridContainer from "components/Grid/GridContainer.js";
 import GridItem from "components/Grid/GridItem.js";
-import TugasFungsi from "pages-sections/about_us/tugas_fungsi.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";
 
@@ -24,7 +24,7 @@ const AboutUS = function ({ backend, businessPartners, service, carousel, ...pro
     return (
         <div>
         <Header
-            rightLinks={<HeaderLinks />}
+            rightLinks={<HeaderSuzuki />}
             fixed
             color="info"
             changeColorOnScroll={{
@@ -50,7 +50,7 @@ const AboutUS = function ({ backend, businessPartners, service, carousel, ...pro
         <div className={classNames(classes.main, classes.mainRaised)}>
             <TugasFungsi />  
         </div>
-        <Footer />
+        <FooterSuzuki />
         </div>
     );
 }

pages/suzuki/api/product/get.js

@@ -1,27 +0,0 @@
-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/carrer.js

@@ -3,13 +3,13 @@ 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 HeaderSuzuki from "components/Header/HeaderSuzuki.js";
+import FooterSuzuki from "components/Footer/FooterSuzuki.js";
 import Parallax from "components/Parallax/Parallax.js";
 import styles from "assets/jss/nextjs-material-kit/pages/components.js";
 
-import SectionCarrer from "pages-sections/carrer/carrer.js";
-import Getcarrer from "../api/carrer/carrer.js"
+import SectionCarrer from "pages-sections/suzuki/carrer/carrer.js";
+import Getcarrer from "../../api/suzuki/carrer/carrer.js"
 
 const useStyles = makeStyles(styles);
 
@@ -19,7 +19,7 @@ const Carrer = function ({ backend, s1, d3, sma, ...props }) {
   return (
     <div>
       <Header
-        rightLinks={<HeaderLinks />}
+        rightLinks={<HeaderSuzuki />}
         fixed
         color="info"
         changeColorOnScroll={{
@@ -32,7 +32,7 @@ const Carrer = function ({ backend, s1, d3, sma, ...props }) {
       <div className={classNames(classes.main, classes.mainRaised)}>
         <SectionCarrer s1={s1} d3={d3} sma={sma} backend={backend}/>  
       </div>
-      <Footer />
+      <FooterSuzuki />
     </div>
   );
 }

pages/suzuki/carrer_details.js

@@ -3,12 +3,12 @@ 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/carrer/carrer_details.js";
+import HeaderSuzuki from "components/Header/HeaderSuzuki.js";
+import FooterSuzuki from "components/Footer/FooterSuzuki.js";
+import CarrerDetail from "pages-sections/suzuki/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"
+import GetDetailcarrer from "../../api/carrer/carrer.js"
 
 const useStyles = makeStyles(styles);
 
@@ -18,7 +18,7 @@ const CarrerDetails = function ({ backend, detailcarrer, ...props })  {
     return (
         <div>
         <Header
-            rightLinks={<HeaderLinks/>}
+            rightLinks={<HeaderSuzuki/>}
             fixed
             color="info"
             changeColorOnScroll={{
@@ -31,7 +31,7 @@ const CarrerDetails = function ({ backend, detailcarrer, ...props })  {
         <div className={classNames(classes.main, classes.mainRaised)}>
             <CarrerDetail detailcarrer={detailcarrer} backend={backend}/>  
         </div>
-        <Footer />
+        <FooterSuzuki />
         </div>
     );
 }

pages/suzuki/cart.js

@@ -1,36 +0,0 @@
-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/suzuki/dealers.js

@@ -9,15 +9,15 @@ 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/snackbar.js";
-import DataDealers from "../pages-sections/dealers/dealers.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: '/dealers',
+        pathname: 'yamaha/dealers',
         query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{},
     })
 }

pages/suzuki/home.js

@@ -3,28 +3,28 @@ 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 HeaderSuzuki from "components/Header/HeaderSuzuki.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 FooterSuzuki from "components/Footer/FooterSuzuki.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/snackbar.js";
-import DataCarousel from "../pages-sections/home/carousel.js";
-import DataService from "../pages-sections/home/service.js";
-import DataBusinessPartner from "../pages-sections/home/business_partner.js";
-import DataSosmed from "../pages-sections/home/sosmed.js";
-import CoreValue from "../pages-sections/home/core_value.js";
-import DataFeature from "../pages-sections/home/feature.js";
+import GetbusinessPartners from "../../api/suzuki/home/businessPartner.js";
+import Getservices from "../../api/suzuki/home/service.js";
+import Getcarousels from "../../api/suzuki/home/carousel.js";
+import DataSnackbarContent from "../../pages-sections/suzuki/snackbar.js";
+import DataCarousel from "../../pages-sections/suzuki/home/carousel.js";
+import DataService from "../../pages-sections/suzuki/home/service.js";
+import DataBusinessPartner from "../../pages-sections/suzuki/home/business_partner.js";
+import DataSosmed from "../../pages-sections/suzuki/home/sosmed.js";
+import CoreValue from "../../pages-sections/suzuki/home/core_value.js";
+import DataFeature from "../../pages-sections/suzuki/home/feature.js";
 
 const useStyles = makeStyles(styles);
 const Home = function ({
   backend,
   businessPartners,
   service,
-  carousel,
+  carousels,
   ...props
 }) {
   const classes = useStyles();
@@ -34,7 +34,7 @@ const Home = function ({
   return (
     <div>
       <Header
-        rightLinks={<HeaderLinks/>}
+        rightLinks={<HeaderSuzuki/>}
         fixed
         color="info"
         changeColorOnScroll={{
@@ -43,17 +43,16 @@ const Home = function ({
         }}
         {...rest}
       />
-      <Parallax image={require("assets/img/Promotion_2-1.jpg")}styles={{ marginTop: "50px" }}/>
+      <Parallax image={require("assets/img/dekstop_pandemi.jpg")}styles={{ marginTop: "50px" }}/>
       <div className={classNames(classes.main, classes.mainRaised)}>
         <DataSnackbarContent />
         <CoreValue />
-        <DataCarousel carousel={carousel} backend={backend} />
+        <DataCarousel carousels={carousels} backend={backend} />
         <DataService service={service} backend={backend} />
-        <DataFeature />
-        <DataBusinessPartner businessPartners={businessPartners} backend={backend} />
+        {/* <DataFeature /> */}
         <DataSosmed service={service} backend={backend} />
       </div>
-      <Footer />
+      <FooterSuzuki />
     </div>
   );
 };
@@ -61,7 +60,7 @@ const Home = function ({
 export async function getServerSideProps(context) {
   var businessPartners = [];
   var service = [];
-  var carousel = [];
+  var carousels = [];
   const backend = process.env.BACKEND_SERVER_URI;
 
   var res = await GetbusinessPartners.GetbusinessPartners();
@@ -76,11 +75,11 @@ export async function getServerSideProps(context) {
 
   var res = await Getcarousels.GetCarousels();
   if (res["STATUS"] === 1) {
-    carousel = res["DATA"]["carousels"];
+    carousels = res["DATA"]["carousels"];
   }
 
   return {
-    props: { businessPartners, service, carousel, backend }, // will be passed to the page component as props
+    props: { businessPartners, service, carousels, backend }, // will be passed to the page component as props
   };
 }
 

pages/suzuki/index.js

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

pages/suzuki/latestnews.js

@@ -3,14 +3,14 @@ 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 HeaderSuzuki from "components/Header/HeaderSuzuki.js";
+import FooterSuzuki from "components/Footer/FooterSuzuki.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/snackbar.js";
-import DataLatestNews from "../pages-sections/latest_news/news.js";
+import GetLatestNews from "../../api/suzuki/latest_news/news.js"
+import DataSnackbarContent from "../../pages-sections/suzuki/snackbar.js";
+import DataLatestNews from "../../pages-sections/suzuki/latest_news/news.js";
 
 const useStyles = makeStyles(styles);
 
@@ -21,7 +21,7 @@ const LatestNews = function ({ backend, news, ...props }) {
   return (
     <div>
       <Header
-        rightLinks={<HeaderLinks />}
+        rightLinks={<HeaderSuzuki />}
         fixed
         color="info"
         changeColorOnScroll={{
@@ -30,12 +30,12 @@ const LatestNews = function ({ backend, news, ...props }) {
         }}
         {...rest}
       />
-      <Parallax image={require("assets/img/simulasicicilan.jpg")} width="200px"/>
+      <Parallax image={require("assets/img/dekstop_pandemi.jpg")} width="200px"/>
       <div className={classNames(classes.main, classes.mainRaised)}>
         <DataSnackbarContent/>
         <DataLatestNews news={news} backend={backend}/> 
       </div>
-      <Footer />
+      <FooterSuzuki />
     </div>
   );
 }

pages/suzuki/latestnews_details.js

@@ -3,14 +3,14 @@ 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 HeaderSuzuki from "components/Header/HeaderSuzuki.js";
+import FooterSuzuki from "components/Footer/FooterSuzuki.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/snackbar.js";
-import DetailLatestNews from "../pages-sections/latest_news/news_details.js";
+import GetLatestNews from "../../api/suzuki/latest_news/news.js"
+import DataSnackbarContent from "../../pages-sections/suzuki/snackbar.js";
+import DetailLatestNews from "../../pages-sections/suzuki/latest_news/news_details.js";
 
 const useStyles = makeStyles(styles);
 
@@ -21,7 +21,7 @@ const detailLatestNews = function ({ backend, news, othernews, ...props }) {
     return (
         <div>
         <Header
-            rightLinks={<HeaderLinks />}
+            rightLinks={<HeaderSuzuki />}
             fixed
             color="info"
             changeColorOnScroll={{
@@ -30,12 +30,12 @@ const detailLatestNews = function ({ backend, news, othernews, ...props }) {
             }}
             {...rest}
         />
-        <Parallax image={require("assets/img/simulasicicilan.jpg")} width="200px"/>
+        <Parallax image={require("assets/img/dekstop_pandemi.jpg")} width="200px"/>
         <div className={classNames(classes.main, classes.mainRaised)}>
             <DataSnackbarContent/>
             <DetailLatestNews news={news} othernews={othernews} backend={backend}/> 
         </div>
-        <Footer />
+        <FooterSuzuki />
         </div>
     );
 }

pages/suzuki/product/accessories.js

@@ -1,72 +0,0 @@
-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/product/accessories.js";
-import DataSnackbarContent from "../../pages-sections/snackbar.js";
-import Router from 'next/router'
-
-const useStyles = makeStyles(styles);
-const queryClient = new QueryClient();
-const handleName = values => {
-    Router.push({
-        pathname: '/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/suzuki/product/accessories_details.js

@@ -1,55 +0,0 @@
-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/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/suzuki/product/apparel.js

@@ -1,135 +0,0 @@
-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/product/apparel.js";
-import DataSnackbarContent from "../../pages-sections/snackbar.js";
-import Router from 'next/router'
-
-const useStyles = makeStyles(styles);
-const queryClient = new QueryClient();
-const handleName = values => {
-    Router.push({
-        pathname: '/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/suzuki/product/apparel_details.js

@@ -1,54 +0,0 @@
-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/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/suzuki/product/helmet.js

@@ -1,135 +0,0 @@
-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/product/helmet.js";
-import DataSnackbarContent from "../../pages-sections/snackbar.js";
-import Router from 'next/router'
-
-const useStyles = makeStyles(styles);
-const queryClient = new QueryClient();
-const handleName = values => {
-    Router.push({
-        pathname: '/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/suzuki/product/helmet_details.js

@@ -1,55 +0,0 @@
-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/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/suzuki/product/product.js

@@ -3,26 +3,19 @@ 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/product/product.js";
+import HeaderSuzuki from "components/Header/HeaderSuzuki.js";
+import FooterSuzuki from "components/Footer/FooterSuzuki.js";
+import DataProduct from "pages-sections/suzuki/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";
+import Getproduct from "../../../api/suzuki/product/product.js";
 
 const useStyles = makeStyles(styles);
 
 const Product = function ({
   backend,
-  maxi,
-  matic,
-  naked,
-  sport,
-  offroad,
-  moped,
-  monsterenergy,
-  cbu,
+  car,
   ...props
 }) {
   const classes = useStyles();
@@ -30,7 +23,7 @@ const Product = function ({
   return (
     <div>
       <Header
-        rightLinks={<HeaderLinks />}
+        rightLinks={<HeaderSuzuki />}
         fixed
         color="info"
         changeColorOnScroll={{
@@ -39,21 +32,14 @@ const Product = function ({
         }}
         {...rest}
       />
-      <Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px"/>
+      <Parallax image={require("assets/img/dekstop_pandemi.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}
+          car={car}
           backend={backend}
         />
       </div>
-      <Footer />
+      <FooterSuzuki />
     </div>
   );
 };
@@ -61,68 +47,17 @@ const Product = function ({
 export default Product;
 
 export async function getServerSideProps(context) {
-  var maxi = [];
-  var matic = [];
-  var naked = [];
-  var sport = [];
-  var offroad = [];
-  var moped = [];
-  var monsterenergy = [];
-  var cbu = [];
+  var car = [];
   const backend = process.env.BACKEND_SERVER_URI;
 
-  var res = await Getproduct.GetProductMaxi();
+  var res = await Getproduct.GetProductSuzuki();
   if (res["STATUS"] === 1) {
-    maxi = res["DATA"]["products"];
+    car = 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,
+      car,
       backend,
     }, // will be passed to the page component as props
   };

pages/suzuki/product/product_detail.js

@@ -3,12 +3,12 @@ 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/product/product_details.js";
+import HeaderSuzuki from "components/Header/HeaderSuzuki.js";
+import FooterSuzuki from "components/Footer/FooterSuzuki.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"
+import GetDetailproduct from "../../../api/product/product.js"
 
 const useStyles = makeStyles(styles);
 
@@ -18,7 +18,7 @@ const ProductDetails = function ({ backend, detailproduct, ...props })  {
   return (
     <div>
       <Header
-        rightLinks={<HeaderLinks/>}
+        rightLinks={<HeaderSuzuki/>}
         fixed
         color="info"
         changeColorOnScroll={{
@@ -27,11 +27,11 @@ const ProductDetails = function ({ backend, detailproduct, ...props })  {
         }}
         {...rest}
       />
-      <Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px"/>
+      <Parallax image={require("assets/img/dekstop_pandemi.jpg")} width="200px"/>
       <div className={classNames(classes.main, classes.mainRaised)}>
         <ProductDetail detailproduct={detailproduct} backend={backend}/>  
       </div>
-      <Footer />
+      <FooterSuzuki />
     </div>
   );
 }

pages/suzuki/product/yamalube.js

@@ -1,73 +0,0 @@
-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/product/yamalube.js";
-import DataSnackbarContent from "../../pages-sections/snackbar.js";
-import Router from 'next/router'
-
-const useStyles = makeStyles(styles);
-const queryClient = new QueryClient();
-const handleName = values => {
-    Router.push({
-        pathname: '/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/suzuki/product/yamalube_details.js

@@ -1,54 +0,0 @@
-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/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/suzuki/product/ygp.js

@@ -1,74 +0,0 @@
-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/product/ygp.js";
-import DataSnackbarContent from "../../pages-sections/snackbar.js";
-import Router from 'next/router'
-
-
-const useStyles = makeStyles(styles);
-const queryClient = new QueryClient();
-const handleName = values => {
-    Router.push({
-        pathname: '/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/suzuki/product/ygp_details.js

@@ -1,54 +0,0 @@
-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/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
-	};
-}