fase 1 web hino

api/carrer/carrer.js

@@ -188,6 +188,60 @@ async function GetCarrerSMAHonda(token="") {
 	return res;
 }
 
+async function GetCarrerS1Hino(token="") {
+	var res = await apollo.query(
+		`
+        query {
+            carrers(where: {category: "S1" business_partner:"4"})
+                {
+                    id
+                    name
+                    start_regis
+                    until_regis
+                    name_description
+                }
+            }`,
+		token
+	);
+	return res;
+}
+
+async function GetCarrerD3Hino(token="") {
+	var res = await apollo.query(
+		`
+        query {
+            carrers(where: {category: "D3" business_partner:"4"})
+                {
+                    id
+                    name
+                    start_regis
+                    until_regis
+                    name_description
+                }
+            }`,
+		token
+	);
+	return res;
+}
+
+async function GetCarrerSMAHino(token="") {
+	var res = await apollo.query(
+		`
+        query {
+            carrers(where: {category: "SMA" business_partner:"4"})
+                {
+                    id
+                    name
+                    start_regis
+                    until_regis
+                    name_description
+                }
+            }`,
+		token
+	);
+	return res;
+}
+
 module.exports = {
     //yamaha
     GetCarrerS1Yamaha:GetCarrerS1Yamaha,
@@ -204,5 +258,10 @@ module.exports = {
     GetCarrerD3Honda:GetCarrerD3Honda,
     GetCarrerSMAHonda:GetCarrerSMAHonda,
 
+    //hino
+    GetCarrerS1Hino:GetCarrerS1Hino,
+    GetCarrerD3Hino:GetCarrerD3Hino,
+    GetCarrerSMAHino:GetCarrerSMAHino,
+
     GetDetailCarrer:GetDetailCarrer,
 };

api/home/carousel.js

@@ -51,8 +51,26 @@ async function GetCarouselsHonda(token="") {
 	return res;
 }
 
+async function GetCarouselsHino(token="") {
+	var res = await apollo.query(
+		`
+		query {
+			carousels(where: { business_partner: "4" }) {
+				id
+				img {
+					url
+				}
+			}
+		}
+				`,
+		token
+	);
+	return res;
+}
+
 module.exports = {
 	GetCarouselsYamaha:GetCarouselsYamaha,
 	GetCarouselsSuzuki:GetCarouselsSuzuki,
 	GetCarouselsHonda:GetCarouselsHonda,
+	GetCarouselsHino:GetCarouselsHino,
 };

api/latest_news/news.js

@@ -144,6 +144,54 @@ async function GetOtherNewsHonda(token="", start = 0) {
 	return res;
 }
 
+async function GetNewsHino(token="", start = 0) {
+	var res = await apollo.query(
+      `
+        query{
+          latestNews(where: { business_partner: "4" })
+          {
+            id
+            title
+            description
+            img{
+              url
+            }
+            published_at
+          }
+        }
+      `,
+		token,
+    {
+      start: start,
+    }
+	);
+	return res;
+}
+
+async function GetOtherNewsHino(token="", start = 0) {
+	var res = await apollo.query(
+      `
+        query{
+          latestNews(where: { business_partner: "4" })
+          {
+            id
+            title
+            description
+            img{
+              url
+            }
+            published_at
+          }
+        }
+      `,
+		token,
+    {
+      start: start,
+    }
+	);
+	return res;
+}
+
 async function GetDetailNews(id, token="") {
 	var res = await apollo.query(
       `
@@ -175,5 +223,7 @@ module.exports = {
   GetOtherNewsSuzuki:GetOtherNewsSuzuki,
   GetNewsHonda:GetNewsHonda,
   GetOtherNewsHonda:GetOtherNewsHonda,
+  GetNewsHino:GetNewsHino,
+  GetOtherNewsHino:GetOtherNewsHino,
   GetDetailNews: GetDetailNews,
 };

api/product/product.js

@@ -241,6 +241,24 @@ async function GetProductHonda(token = "") {
   return res;
 }
 
+async function GetProductHino(token = "") {
+  var res = await apollo.query(
+    `
+    query {
+      products(where: { business_partner: "4" }) {
+        id
+        name
+        price
+        img {
+          url
+        }
+      }
+    }`,
+    token
+  );
+  return res;
+}
+
 module.exports = {
   //yamaha
   GetProductMatic: GetProductMatic,
@@ -260,6 +278,9 @@ module.exports = {
   //honda
   GetProductHonda:GetProductHonda,
   
+  //hino
+  GetProductHino:GetProductHino,
+  
   //detail
   GetDetailProduct: GetDetailProduct,
 };

assets/jss/nextjs-material-kit.js

@@ -70,11 +70,11 @@
         lineHeight: "1.5em"
       };
   
-      const primaryColor = "#9c27b0";
+      const primaryColor = "#212121";
       const warningColor = "#ff9800";
       const dangerColor = "#f44336";
       const successColor = "#4caf50";
-      const infoColor = "#00acc1";
+      const infoColor = "#212121";
       const roseColor = "#e91e63";
       const grayColor = "#999999";
   
@@ -147,7 +147,7 @@
       };
       const infoCardHeader = {
         color: "#fff",
-        background: "linear-gradient(60deg, #26c6da, #00acc1)",
+        background: "#212121",
         ...infoBoxShadow
       };
       const primaryCardHeader = {

assets/jss/nextjs-material-kit/components/snackbarContentStyle.js

@@ -25,7 +25,7 @@ const snackbarContentStyle = {
       "0 12px 20px -10px rgba(255, 255, 255, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(255, 255, 255, 0.2)"
   },
   info: {
-    backgroundColor: "#00d3ee",
+    backgroundColor: "#212121",
     color: "#ffffff",
     ...infoBoxShadow
   },

components/Footer/Footer.js

@@ -102,17 +102,17 @@ export default function Footer(props) {
               <div className={classes.left}>
               <List className={classes.list}>
                   <ListItem className={classes.inlineBlock}>
-                    <a href="/yamaha/home" className={classes.block} >Facebook</a>
-                  </ListItem>
-                  <ListItem className={classes.inlineBlock}>
-                    <a href="/yamaha/product/product" className={classes.block}>Instagram</a>
-                  </ListItem>
-                  <ListItem className={classes.inlineBlock}>
-                    <a href="/yamaha/product/ygp" className={classes.block}>Twitter</a>
-                  </ListItem>
-                  <ListItem className={classes.inlineBlock}>
-                    <a href="/yamaha/product/yamalube" className={classes.block}>Youtube</a>
-                  </ListItem>
+                        <a href="#" className={classes.block} >Facebook</a>
+                    </ListItem>
+                    <ListItem className={classes.inlineBlock}>
+                        <a href="#" className={classes.block}>Instagram</a>
+                    </ListItem>
+                    <ListItem className={classes.inlineBlock}>
+                        <a href="#" className={classes.block}>Twitter</a>
+                    </ListItem>
+                    <ListItem className={classes.inlineBlock}>
+                        <a href="//#endregion" className={classes.block}>Youtube</a>
+                    </ListItem>
                 </List>
               </div>
             </div>

components/Footer/FooterHino.js

@@ -0,0 +1,134 @@
+/*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";
+
+import CLM from "assets/img/clm.png";
+import Hino from "assets/img/logohino.png";
+
+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><br/>
+            <GridContainer justify="center">
+                <Grid style={{padding:"25px"}}>
+                    <br/>
+                    <img className={classes.imgCard} src={CLM} style={{width:"200px"}}/>
+                </Grid>
+                <Grid style={{padding:"25px"}}>
+                    <img className={classes.imgCard} src={Hino} style={{width:"250px"}}/>
+                </Grid>
+            </GridContainer>
+            <GridContainer justify="center">
+                <Grid style={{padding:"25px", marginTop:"-50px"}}>
+                    <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}> Product </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>
+                </Grid>
+            </GridContainer>
+            <GridContainer style={{marginTop: "-100px", padding:"50px"}} justify="center">
+            <Grid>
+                <div>
+                <footer className={footerClasses}>
+                    <div className={classes.container}>
+                    <div className={classes.left}>
+                    <List className={classes.list}>
+                        <ListItem className={classes.inlineBlock}>
+                            <a href="#" className={classes.block} >Facebook</a>
+                        </ListItem>
+                        <ListItem className={classes.inlineBlock}>
+                            <a href="#" className={classes.block}>Instagram</a>
+                        </ListItem>
+                        <ListItem className={classes.inlineBlock}>
+                            <a href="#" className={classes.block}>Twitter</a>
+                        </ListItem>
+                        <ListItem className={classes.inlineBlock}>
+                            <a href="//#endregion" className={classes.block}>Youtube</a>
+                        </ListItem>
+                        </List>
+                    </div>
+                    </div>
+                </footer>
+                </div>
+            </Grid>
+            </GridContainer>
+            <GridContainer justify="center">
+                <Grid style={{padding:"25px", marginTop:"-50px"}}>
+                    <div className={classes.right}>
+                        &copy; {1900 + new Date().getYear()} , All Right Reserved{" "} by{" "} @Thamrin Group Company
+                    </div>
+                </Grid>
+            </GridContainer>
+        </div>
+    );
+}
+
+Footer.propTypes = {
+    whiteFont: PropTypes.bool
+};

components/Footer/FooterHome.js

@@ -0,0 +1,131 @@
+/*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 GridItem from "components/Grid/GridItem.js";
+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";
+
+import Logo from "assets/img/White.png";
+
+// import iconfb from "assets/img/sosmed/iconfb.png";
+// import iconig from "assets/img/sosmed/iconig.png";
+// import icontwt from "assets/img/sosmed/icontwt.png";
+// import iconyt from "assets/img/sosmed/iconyt.png";
+
+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"}}>
+                <br></br>
+            <img className={classes.imgCard} src={Logo} style={{width:"500px"}}/>
+            </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="/yamaha/home" target="_blank" className={classes.block} > Yamaha </a>
+                    </ListItem>
+                    <ListItem className={classes.inlineBlock}>
+                        <a href="/suzuki/home" target="_blank" className={classes.block}> Suzuki </a>
+                    </ListItem>
+                    <ListItem className={classes.inlineBlock}>
+                        <a href="/honda/home" target="_blank" className={classes.block}> Honda </a>
+                    </ListItem>
+                    <ListItem className={classes.inlineBlock}>
+                        <a href="/hino/home" target="_blank" className={classes.block}> Hino </a>
+                    </ListItem>
+                    <ListItem className={classes.inlineBlock}>
+                        <a href="https://www.thamrin.mercedes-benz.co.id/en/desktop/passenger-cars.html" target="_blank" className={classes.block}> Mercedes Benz </a>
+                    </ListItem>
+                    <ListItem className={classes.inlineBlock}>
+                        <a href="http://www.emilia-hotel.com/" target="_blank" className={classes.block}> Emilia Hotel </a>
+                    </ListItem>
+                    <ListItem className={classes.inlineBlock}>
+                        <a href="https://www.instagram.com/palembangindahmall/?hl=id" target="_blank" className={classes.block}> Palembang Indah Mall </a>
+                    </ListItem>
+                    <ListItem className={classes.inlineBlock}>
+                        <a href="http://bprberkatsejati.com/" target="_blank" className={classes.block}> BRP Berkat Sejati </a>
+                    </ListItem>
+                    <ListItem className={classes.inlineBlock}>
+                        <a href="http://homes.thamrin.xyz/" target="_blank" className={classes.block}> Thamrin Homes </a>
+                    </ListItem>
+                    </List>
+                </div>
+                </div>
+            </footer>
+            </div>
+        </Grid>
+        </GridContainer>
+        <GridContainer style={{marginTop: "-100px", padding:"50px"}} justify="center">
+        <Grid>
+            <div>
+            <footer className={footerClasses}>
+                <div className={classes.container}>
+                <div className={classes.left}>
+                <List className={classes.list}>
+                    <ListItem className={classes.inlineBlock}>
+                        <a href="#" target="_blank" className={classes.block} >Facebook</a>
+                    </ListItem>
+                    <ListItem className={classes.inlineBlock}>
+                        <a href="#" target="_blank" className={classes.block}>Instagram</a>
+                    </ListItem>
+                    <ListItem className={classes.inlineBlock}>
+                        <a href="#" target="_blank" className={classes.block}>Twitter</a>
+                    </ListItem>
+                    <ListItem className={classes.inlineBlock}>
+                        <a href="#" target="_blank" className={classes.block}>Youtube</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/Footer/FooterHonda.js

@@ -95,19 +95,19 @@ export default function Footer(props) {
                 <footer className={footerClasses}>
                     <div className={classes.container}>
                     <div className={classes.left}>
-                    <List className={classes.list}>
-                        <ListItem className={classes.inlineBlock}>
-                            <a href="/yamaha/home" className={classes.block} >Facebook</a>
-                        </ListItem>
-                        <ListItem className={classes.inlineBlock}>
-                            <a href="/yamaha/product/product" className={classes.block}>Instagram</a>
-                        </ListItem>
-                        <ListItem className={classes.inlineBlock}>
-                            <a href="/yamaha/product/ygp" className={classes.block}>Twitter</a>
-                        </ListItem>
-                        <ListItem className={classes.inlineBlock}>
-                            <a href="/yamaha/product/yamalube" className={classes.block}>Youtube</a>
-                        </ListItem>
+                        <List className={classes.list}>
+                            <ListItem className={classes.inlineBlock}>
+                                <a href="#" className={classes.block} >Facebook</a>
+                            </ListItem>
+                            <ListItem className={classes.inlineBlock}>
+                                <a href="#" className={classes.block}>Instagram</a>
+                            </ListItem>
+                            <ListItem className={classes.inlineBlock}>
+                                <a href="#" className={classes.block}>Twitter</a>
+                            </ListItem>
+                            <ListItem className={classes.inlineBlock}>
+                                <a href="//#endregion" className={classes.block}>Youtube</a>
+                            </ListItem>
                         </List>
                     </div>
                     </div>

components/Footer/FooterSuzuki.js

@@ -95,19 +95,19 @@ export default function Footer(props) {
                 <footer className={footerClasses}>
                     <div className={classes.container}>
                     <div className={classes.left}>
-                    <List className={classes.list}>
-                        <ListItem className={classes.inlineBlock}>
-                            <a href="/yamaha/home" className={classes.block} >Facebook</a>
-                        </ListItem>
-                        <ListItem className={classes.inlineBlock}>
-                            <a href="/yamaha/product/product" className={classes.block}>Instagram</a>
-                        </ListItem>
-                        <ListItem className={classes.inlineBlock}>
-                            <a href="/yamaha/product/ygp" className={classes.block}>Twitter</a>
-                        </ListItem>
-                        <ListItem className={classes.inlineBlock}>
-                            <a href="/yamaha/product/yamalube" className={classes.block}>Youtube</a>
-                        </ListItem>
+                        <List className={classes.list}>
+                            <ListItem className={classes.inlineBlock}>
+                                <a href="#" className={classes.block} >Facebook</a>
+                            </ListItem>
+                            <ListItem className={classes.inlineBlock}>
+                                <a href="#" className={classes.block}>Instagram</a>
+                            </ListItem>
+                            <ListItem className={classes.inlineBlock}>
+                                <a href="#" className={classes.block}>Twitter</a>
+                            </ListItem>
+                            <ListItem className={classes.inlineBlock}>
+                                <a href="//#endregion" className={classes.block}>Youtube</a>
+                            </ListItem>
                         </List>
                     </div>
                     </div>

components/Header/HeaderHino.js

@@ -0,0 +1,267 @@
+/*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, Person } 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";
+
+import Logo from "assets/img/hino.png";
+const useStyles = makeStyles(styles);
+
+export default function HeaderLinks({ username, ...props }) {
+    const classes = useStyles();
+    return (
+        <List className={classes.list}>
+            <ListItem className={classes.listItem}>
+                <Link href="/hino/home">
+                    <Button color="transparent" className={classes.navLink}>
+                        <img
+                            src={Logo}
+                            width="205px"
+                        />
+                    </Button>
+                </Link>
+            </ListItem>
+            <ListItem className={classes.listItem}>
+                <Link href="/hino/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="/hino/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="/hino/product/product">
+                <a className={classes.dropdownLink}>Motor</a>
+                </Link>,
+                <Link href="/hino/product/ygp">
+                <a className={classes.dropdownLink}>YGP</a>
+                </Link>,
+                <Link href="/hino/product/yamalube">
+                <a className={classes.dropdownLink}>Yamalube</a>
+                </Link>,
+                <Link href="/hino/product/helmet">
+                <a className={classes.dropdownLink}>Helmet</a>
+                </Link>,
+                <Link href="/hino/product/apparel">
+                <a className={classes.dropdownLink}>Apparel</a>
+                </Link>,
+                <Link href="/hino/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="/hino/dealers">
+                <a className={classes.dropdownLink}>Dealers</a>
+            </Link>,
+            ]}
+            />
+        </ListItem> */}
+            <ListItem
+                className={classes.listItem}
+                style={{ marginTop: "10px" }}
+            >
+                <Link href="/hino/latest_news/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="/hino/carrer/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.hino-motor.co.id/">
+                            <a className={classes.dropdownLink}>hino</a>
+                        </Link>,
+                        <Link href="https://www.hino.co.id/">
+                            <a className={classes.dropdownLink}>Suzuki</a>
+                        </Link>,
+                        <Link href="https://www.hino-indonesia.com/">
+                            <a className={classes.dropdownLink}>hino</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="/hino/about_us/about_us"
+                    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="/hino/profile/profile"
+                // href="#"
+                color="transparent"
+                className={classes.navLink}
+                >
+                <Icon className={classes.icons}>people</Icon> Profile
+                </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" }}
+            >
+                {!username || username == "" ? (
+                    <Button
+                        href="/hino/login"
+                        className={classes.registerNavLink}
+                        color="info"
+                        round
+                    >
+                        <Icon className={classes.icons}>input</Icon> Login
+                    </Button>
+                ) : (
+                    <CustomDropdown
+                        noLiPadding
+                        navDropdown
+                        buttonText={
+                            username.length > 12
+                                ? username.substring(0, 9) + ".."
+                                : username
+                        }
+                        buttonProps={{
+                            className: classes.navLink,
+                            color: "transparent",
+                        }}
+                        buttonIcon={Person}
+                        dropdownList={[
+                            <div
+                                onClick={async (e) => {
+                                    e.preventDefault();
+                                    fetch("/api/auth/logout", {
+                                        method: "POST",
+                                        headers: {
+                                            "Content-Type": "application/json",
+                                        },
+                                        body: JSON.stringify({ p: "SUZUKI" }),
+                                    }).then((res) => {
+                                        //if (res.ok) {
+                                        window.location.href = "../hino/home";
+                                        /*}
+                                        else{
+
+                                        }*/
+                                    });
+                                }}
+                            >
+                                <a className={classes.dropdownLink}>
+                                    <Icon className={classes.icons}>
+                                        exit_to_app
+                                    </Icon>{" "}
+                                    Logout
+                                </a>
+                            </div>,
+                        ]}
+                    />
+                )}
+            </ListItem>
+        </List>
+    );
+}

components/Header/HeaderHonda.js

@@ -17,6 +17,8 @@ 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";
 
+import Logo from "assets/img/honda.png";
+
 const useStyles = makeStyles(styles);
 
 export default function HeaderLinks({ username, ...props }) {
@@ -27,8 +29,8 @@ export default function HeaderLinks({ username, ...props }) {
                 <Link href="/honda/home">
                     <Button color="transparent" className={classes.navLink}>
                         <img
-                            src="https://cdn.pixabay.com/photo/2016/08/15/18/18/honda-1596081_640.png"
-                            width="60px"
+                            src={Logo}
+                            width="210px"
                         />
                     </Button>
                 </Link>
@@ -173,7 +175,7 @@ export default function HeaderLinks({ username, ...props }) {
                 style={{ marginTop: "10px" }}
             >
                 <Button
-                    href="/honda/abous_us/about_us"
+                    href="/honda/about_us/about_us"
                     color="transparent"
                     className={classes.navLink}
                 >
@@ -191,7 +193,7 @@ export default function HeaderLinks({ username, ...props }) {
                 <Icon className={classes.icons}>people</Icon> Profile
                 </Button>
             </ListItem>
-            <ListItem
+            {/* <ListItem
                 className={classes.listItem}
                 style={{ marginTop: "10px" }}
             >
@@ -202,7 +204,7 @@ export default function HeaderLinks({ username, ...props }) {
                 >
                     <Chart className={classes.icons} />
                 </Button>
-            </ListItem>
+            </ListItem> */}
             <ListItem
                 className={classes.listItem}
                 style={{ marginTop: "10px" }}
@@ -257,6 +259,7 @@ export default function HeaderLinks({ username, ...props }) {
                                     Logout
                                 </a>
                             </div>,
+                            // <a href="/honda/profile/profile" className={classes.dropdownLink}>Profile</a>,
                         ]}
                     />
                 )}

components/Header/HeaderLinks.js

@@ -18,6 +18,8 @@ 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";
 
+import Logo from "assets/img/yamaha.png";
+
 const useStyles = makeStyles(styles);
 
 export default function HeaderLinks({ username, ...props }) {
@@ -28,7 +30,7 @@ export default function HeaderLinks({ username, ...props }) {
         <Link href="/yamaha/home">
           <Button color="transparent" className={classes.navLink}>
             <img
-              src="https://1.bp.blogspot.com/-J9AsxdwrF-Y/Wn70KyBApaI/AAAAAAAACRo/LTy3zrALzhckryd9QPi_KuVyWvwFMZyMQCLcBGAs/s640/TG.png"
+              src={Logo}
               width="180px"
             />
           </Button>
@@ -148,7 +150,7 @@ export default function HeaderLinks({ username, ...props }) {
           <Icon className={classes.icons}>people</Icon> Profile
         </Button>
       </ListItem>
-      <ListItem className={classes.listItem} style={{ marginTop: "10px" }}>
+      {/* <ListItem className={classes.listItem} style={{ marginTop: "10px" }}>
         <Button
           href="/yamaha/order/order"
           color="transparent"
@@ -156,7 +158,7 @@ export default function HeaderLinks({ username, ...props }) {
         >
           <Chart className={classes.icons} />
         </Button>
-      </ListItem>
+      </ListItem> */}
       <ListItem className={classes.listItem} style={{ marginTop: "10px" }}>
         {!username || username == "" ? (
           <Button
@@ -203,6 +205,7 @@ export default function HeaderLinks({ username, ...props }) {
                   <Icon className={classes.icons}>exit_to_app</Icon> Logout
                 </a>
               </div>,
+              // <a href="/yamaha/profile/profile" className={classes.dropdownLink}>Profile</a>,
             ]}
           />
         )}

components/Header/HeaderSuzuki.js

@@ -17,6 +17,8 @@ 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";
 
+import Logo from "assets/img/Suzuki.png";
+
 const useStyles = makeStyles(styles);
 
 export default function HeaderLinks({ username, ...props }) {
@@ -27,7 +29,7 @@ export default function HeaderLinks({ username, ...props }) {
                 <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"
+                            src={Logo}
                             width="180px"
                         />
                     </Button>
@@ -191,7 +193,7 @@ export default function HeaderLinks({ username, ...props }) {
                 <Icon className={classes.icons}>people</Icon> Profile
                 </Button>
             </ListItem>
-            <ListItem
+            {/* <ListItem
                 className={classes.listItem}
                 style={{ marginTop: "10px" }}
             >
@@ -202,7 +204,7 @@ export default function HeaderLinks({ username, ...props }) {
                 >
                     <Chart className={classes.icons} />
                 </Button>
-            </ListItem>
+            </ListItem> */}
             <ListItem
                 className={classes.listItem}
                 style={{ marginTop: "10px" }}
@@ -257,6 +259,7 @@ export default function HeaderLinks({ username, ...props }) {
                                     Logout
                                 </a>
                             </div>,
+                            // <a href="/suzuki/profile/profile" className={classes.dropdownLink}>Profile</a>,
                         ]}
                     />
                 )}

pages-sections/hino/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="info"><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="info" style={{marginLeft:"20px"}} round href={"/hino/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="info">{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="info" style={{marginLeft:"20px"}} round href={"/honda/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="info">{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="info" style={{marginLeft:"20px"}} round href={"/honda/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">Carrer</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/hino/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/hino/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, carousel, ...props })  {
+    const classes = useStyles();
+    const settings = {
+        dots: true,
+        infinite: true,
+        speed: 500,
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        autoplay: true,
+        time: 5
+        };
+        const Carousels = carousel.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="815" height="448" src="https://www.youtube.com/embed/ctv6XEB3ZT4" 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="815" height="448" src="https://www.youtube.com/embed/sI3n7Fh8lrQ" 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/hino/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/hino/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/hino/latest_news/news.js

@@ -0,0 +1,70 @@
+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";
+import CardHeader from "components/Card/CardHeader.js";
+
+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={"/hino/latest_news/latestnews_details?s="+data.id}>
+                    <Icon className={classes.icons}>open_in_new</Icon>Read More
+                </Button>
+                </CardBody>
+            </Card>
+        </Grid>
+        );
+    })
+    return (
+        <Card className={classes.textCenter}>
+            <div align="center">
+                <CardHeader color="info">News</CardHeader>
+            </div>
+            <CardBody>
+                <div align="center">
+                <h2>Latest News</h2>
+                </div>
+                <GridContainer justify="center">
+                {latnews}
+                </GridContainer>
+            </CardBody>
+            <div align="center">
+                <Paginations
+                pages={[
+                    { text: "PREV" },
+                    { text: 1 },
+                    { text: 2 },
+                    { active: true, text: 3 },
+                    { text: 4 },
+                    { text: 5 },
+                    { text: "NEXT" }
+                ]}
+                color="info"
+                />
+            </div>
+        </Card>
+    );
+}
+
+export default DataLatestNews;

pages-sections/hino/latest_news/news_details.js

@@ -0,0 +1,109 @@
+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 (
+        <Card className={classes.textCenter}>
+            <div align="center">
+                <CardHeader color="info">News</CardHeader>
+            </div>
+            <CardBody>
+                <div align="center">
+                </div>
+                <GridContainer justify="center">
+                {latnews}
+                </GridContainer>
+            </CardBody>
+        </Card>
+    );
+};
+
+export default DataLatestNews;

pages-sections/hino/product/product.js

@@ -0,0 +1,92 @@
+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={"/hino/product/product_detail?s="+data.id}
+                    >
+                        <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                    </Button>
+                    <Button 
+                        color="info" round
+                        href={"/hino/checkout/checkout?s="+data.id}
+                    >
+                        <Icon className={classes.icons}>shopping_cart</Icon>Add to Cart
+                    </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: "XL7",
+                        tabIcon: Motorcycle,
+                        tabContent: (
+                        <GridContainer justify="center">
+                            {ProductSuzuki}
+                        </GridContainer>
+                        ),
+                    },
+                    ]}
+                />
+                </GridItem>
+            </GridContainer>
+        </CardBody>
+        </Card>
+    );
+}
+
+export default DataProduct;

pages-sections/hino/profile/profile.js

@@ -0,0 +1,388 @@
+import React from "react";
+import classNames from "classnames";
+import {makeStyles} from "@material-ui/core/styles";
+import Select from 'react-select';
+
+import People from "@material-ui/icons/People";
+import LocationOn from "@material-ui/icons/LocationOn";
+import Lock from "@material-ui/icons/Lock";
+import image1 from "assets/img/mail.png"
+
+import CustomInput from "components/CustomInput/CustomInput.js";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import Button from "components/CustomButtons/Button.js";
+import Icon from "@material-ui/core/Icon";
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import GridContainer from "components/Grid/GridContainer.js";
+import SnackbarContent from "components/Snackbar/SnackbarContent.js";
+import NavPills from "components/NavPills/NavPills.js";
+import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/pillsStyle.js";
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        flexGrow: 1
+    },
+    paper: {
+        padding: theme.spacing(2),
+        textAlign: 'center',
+        color: theme.palette.text.secondary
+    }
+}));
+
+const DataApparel = function ({
+    profile,
+    user,
+    ...props
+}) {
+    const [pass, setPass] = React.useState("");
+    const classes = useStyles();
+    const {
+        ...rest
+    } = props;
+    const imageClasses = classNames(
+        classes.imgRaised,
+        classes.imgRoundedCircle,
+        classes.imgFluid
+    );
+    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
+    const Profile = profile.map((data) => {
+        return (
+            <NavPills
+                color="info"
+                horizontal={{
+                    tabsGrid: {
+                        xs: 4,
+                        sm: 3,
+                        md: 3
+                    },
+                    contentGrid: {
+                        xs: 14,
+                        sm: 9,
+                        md: 9
+                    }
+                }}
+                tabs={[
+                    {
+                        tabButton: "Profile",
+                        tabIcon: People,
+                        tabContent: (
+                            <Grid container="container">
+                                <Grid item="item" xs={12}>
+                                    <div align="left">
+                                        <h3>Profile Saya</h3>
+                                        <span>Kelola informasi profil Anda untuk mengontrol, melindungi dan mengamankan akun</span>
+                                        <hr></hr>
+                                    </div>
+                                </Grid>
+                                <Grid
+                                    container="container"
+                                    style={{
+                                        padding: "10px"
+                                    }}>
+                                    <Grid item="item" xs="xs">
+                                        <div align="left">
+                                            Username
+                                        </div>
+                                    </Grid>
+                                    <Grid item="item" xs={6}>
+                                        <div align="left">
+                                            : {data.username}
+                                        </div>
+                                    </Grid>
+                                    <Grid item="item" xs="xs"></Grid>
+                                </Grid>
+                                <Grid
+                                    container="container"
+                                    style={{
+                                        padding: "10px"
+                                    }}>
+                                    <Grid item="item" xs="xs">
+                                        <div align="left">
+                                            Nama
+                                        </div>
+                                    </Grid>
+                                    <Grid item="item" xs={6}>
+                                        <div align="left">
+                                            : {data.firstName}
+                                        </div>
+                                    </Grid>
+                                    <Grid item="item" xs="xs"></Grid>
+                                </Grid>
+                                <Grid
+                                    container="container"
+                                    style={{
+                                        padding: "10px"
+                                    }}>
+                                    <Grid item="item" xs="xs">
+                                        <div align="left">
+                                            Email
+                                        </div>
+                                    </Grid>
+                                    <Grid item="item" xs={6}>
+                                        <div align="left">
+                                            : {data.email}
+                                        </div>
+                                    </Grid>
+                                    <Grid item="item" xs="xs"></Grid>
+                                </Grid>
+                                <Grid
+                                    container="container"
+                                    style={{
+                                        padding: "10px"
+                                    }}>
+                                    <Grid item="item" xs="xs">
+                                        <div align="left">
+                                            Nomer Telpon
+                                        </div>
+                                    </Grid>
+                                    <Grid item="item" xs={6}>
+                                        <div align="left">
+                                            : {data.telp}
+                                        </div>
+                                    </Grid>
+                                    <Grid item="item" xs="xs"></Grid>
+                                </Grid>
+                                <Button color="info" round="round" href={"/yamaha/profile/edit-profile?s="+data.id}>
+                                    <Icon className={classes.icons}>open_in_new</Icon>Edit Profile
+                                </Button>
+                            </Grid>
+                        )
+                    }, {
+                        tabButton: "Alamat",
+                        tabIcon: LocationOn,
+                        tabContent: (
+                            <Grid container="container">
+                                <Grid item="item" xs={12}>
+                                    <div align="left">
+                                        <h3>Alamat Saya</h3>
+                                        <span>Kelola informasi Alamat Anda untuk Proses Pengirim Barang</span>
+                                    </div>
+                                    <hr></hr>
+                                </Grid>
+                                <img
+                                    src={image1}
+                                    style={{
+                                        width: "920px"
+                                    }}/>
+                                <br></br>
+                                <Grid
+                                    container="container"
+                                    style={{
+                                        padding: "10px"
+                                    }}>
+                                    <Grid item="item" xs="xs">
+                                        <div align="left">
+                                            Nama
+                                        </div>
+                                    </Grid>
+                                    <Grid item="item" xs={6}>
+                                        <div align="left">
+                                            : {data.firstName}
+                                        </div>
+                                    </Grid>
+                                    <Grid item="item" xs="xs"></Grid>
+                                </Grid>
+                                <Grid
+                                    container="container"
+                                    style={{
+                                        padding: "10px"
+                                    }}>
+                                    <Grid item="item" xs="xs">
+                                        <div align="left">
+                                            Telpon
+                                        </div>
+                                    </Grid>
+                                    <Grid item="item" xs={6}>
+                                        <div align="left">
+                                            : {data.telp}
+                                        </div>
+                                    </Grid>
+                                    <Grid item="item" xs="xs"></Grid>
+                                </Grid>
+                                <Grid
+                                    container="container"
+                                    style={{
+                                        padding: "10px"
+                                    }}>
+                                    <Grid item="item" xs="xs">
+                                        <div align="left">
+                                            Alamat
+                                        </div>
+                                    </Grid>
+                                    <Grid item="item" xs={6}>
+                                        <div align="left">
+                                            : {data.address}
+                                        </div>
+                                    </Grid>
+                                    <Grid item="item" xs="xs"></Grid>
+                                </Grid>
+                                <Button color="info" round="round" href={"/yamaha/product/product_detail?s="+data.id}>
+                                    <Icon className={classes.icons}>open_in_new</Icon>Edit Alamat
+                                </Button>
+                            </Grid>
+                        )
+                    }, {
+                        tabButton: "Ubah Password",
+                        tabIcon: Lock,
+                        tabContent: (
+                            <Grid container="container">
+                                <Grid item="item" xs={12}>
+                                    <div align="left">
+                                        <h3>Ubah Password</h3>
+                                        <span>Untuk keamanan akun Anda, mohon untuk tidak menyebarkan password Anda ke
+                                            orang lain</span>
+                                    </div>
+                                    <hr></hr>
+                                </Grid>
+                                <Grid
+                                    container="container"
+                                    style={{
+                                        padding: "10px"
+                                    }}>
+                                    <Grid item="item" xs="xs">
+                                        <div align="left">
+                                            <br></br>
+                                            Password Saat Ini
+                                        </div>
+                                    </Grid>
+                                    <Grid item="item" xs={6}>
+                                        <div align="left">
+                                            <CustomInput
+                                                labelText="Password Saat Ini"
+                                                id="pass"
+                                                value={pass}
+                                                formControlProps={{
+                                                    fullWidth: true
+                                                }}
+                                                inputProps={{
+                                                    onChange: (event) => setPass(event.target.value),
+                                                    type: "password",
+                                                    endAdornment: (
+                                                        <InputAdornment position="end">
+                                                            <Icon className={classes.inputIconsColor}>
+                                                                lock_outline
+                                                            </Icon>
+                                                        </InputAdornment>
+                                                    ),
+                                                    autoComplete: "off"
+                                                }}/>
+                                        </div>
+                                    </Grid>
+                                    <Grid item="item" xs="xs"></Grid>
+                                </Grid>
+                                <Grid
+                                    container="container"
+                                    style={{
+                                        padding: "10px"
+                                    }}>
+                                    <Grid item="item" xs="xs">
+                                        <div align="left">
+                                            <br></br>
+                                            Password Baru
+                                        </div>
+                                    </Grid>
+                                    <Grid item="item" xs={6}>
+                                        <div align="left">
+                                            <CustomInput
+                                                labelText="Password Baru"
+                                                id="pass"
+                                                value={pass}
+                                                formControlProps={{
+                                                    fullWidth: true
+                                                }}
+                                                inputProps={{
+                                                    onChange: (event) => setPass(event.target.value),
+                                                    type: "password",
+                                                    endAdornment: (
+                                                        <InputAdornment position="end">
+                                                            <Icon className={classes.inputIconsColor}>
+                                                                lock_outline
+                                                            </Icon>
+                                                        </InputAdornment>
+                                                    ),
+                                                    autoComplete: "off"
+                                                }}/>
+                                        </div>
+                                    </Grid>
+                                    <Grid item="item" xs="xs"></Grid>
+                                </Grid>
+                                <Grid
+                                    container="container"
+                                    style={{
+                                        padding: "10px"
+                                    }}>
+                                    <Grid item="item" xs="xs">
+                                        <div align="left">
+                                            <br></br>
+                                            Konfirmasi Password
+                                        </div>
+                                    </Grid>
+                                    <Grid item="item" xs={6}>
+                                        <div align="left">
+                                            <CustomInput
+                                                labelText="Konfirmasi Password"
+                                                id="pass"
+                                                value={pass}
+                                                formControlProps={{
+                                                    fullWidth: true
+                                                }}
+                                                inputProps={{
+                                                    onChange: (event) => setPass(event.target.value),
+                                                    type: "password",
+                                                    endAdornment: (
+                                                        <InputAdornment position="end">
+                                                            <Icon className={classes.inputIconsColor}>
+                                                                lock_outline
+                                                            </Icon>
+                                                        </InputAdornment>
+                                                    ),
+                                                    autoComplete: "off"
+                                                }}/>
+                                        </div>
+                                    </Grid>
+                                    <Grid item="item" xs="xs"></Grid>
+                                </Grid>
+                                <Button color="info" round="round" href={"/yamaha/product/product_detail?s="+data.id}>
+                                    <Icon className={classes.icons}>open_in_new</Icon>
+                                    Simpan
+                                </Button>
+                            </Grid>
+                        )
+                    }
+                ]}/>
+        );
+    })
+    return (
+        <div>
+            <Card className={classes.textCenter} align="center">
+                <CardBody>
+                    <div align="center">
+                        <div
+                            align="center"
+                            className={classes.section}
+                            id="notifications"
+                            style={{
+                                marginTop: "-50px"
+                            }}>
+                            <SnackbarContent message={<h4 > Profile</h4>} align="center" color="info"/>
+                        </div>
+                        <GridContainer
+                            justify="center"
+                            style={{
+                                padding: "10px"
+                            }}>
+                            {Profile}
+                        </GridContainer>
+                    </div>
+                    <br></br>
+                    <br></br>
+                </CardBody>
+            </Card>
+        </div>
+    );
+}
+
+export default DataApparel;

pages-sections/home/Businees-Partner.js

@@ -62,23 +62,53 @@ export default function WorkSection() {
                     </div>
                     </Carousel>
                 </Grid>
-                <Grid item xs={12} sm={12} style={{marginTop:"-25px"}} className={classes.marginAuto}>
-                    <Carousel><img src={hino}/></Carousel>
+                <Grid item xs={12} sm={12} style={{marginTop:"-31px"}} className={classes.marginAuto}>
+                    <Carousel>
+                    <div className="container">
+                    <img src={hino} alt="Snow" style={{width:"100%"}}/>
+                        <Button href="/hino/home" target="_blank" className="btn">Visit Page</Button>
+                    </div>
+                    </Carousel>
                 </Grid>
-                <Grid item xs={12} sm={12} style={{marginTop:"-25px"}} className={classes.marginAuto}>
-                    <Carousel><img src={mercedes}/></Carousel>
+                <Grid item xs={12} sm={12} style={{marginTop:"-31px"}} className={classes.marginAuto}>
+                    <Carousel>
+                    <div className="container">
+                    <img src={mercedes} alt="Snow" style={{width:"100%"}}/>
+                        <Button href="https://www.thamrin.mercedes-benz.co.id/en/desktop/passenger-cars.html" target="_blank" className="btn">Visit Page</Button>
+                    </div>
+                    </Carousel>
                 </Grid>
-                <Grid item xs={12} sm={12} style={{marginTop:"-25px"}} className={classes.marginAuto}>
-                    <Carousel><img src={emilia}/></Carousel>
+                <Grid item xs={12} sm={12} style={{marginTop:"-31px"}} className={classes.marginAuto}>
+                    <Carousel>
+                        <div className="container">
+                        <img src={emilia} alt="Snow" style={{width:"100%"}}/>
+                            <Button href="http://www.emilia-hotel.com/" target="_blank" className="btn">Visit Page</Button>
+                        </div>
+                    </Carousel>
                 </Grid>
-                <Grid item xs={12} sm={12} style={{marginTop:"-25px"}} className={classes.marginAuto}>
-                    <Carousel><img src={bpr}/></Carousel>
+                <Grid item xs={12} sm={12} style={{marginTop:"-31px"}} className={classes.marginAuto}>
+                    <Carousel>
+                        <div className="container">
+                        <img src={bpr} alt="Snow" style={{width:"100%"}}/>
+                            <Button href="http://bprberkatsejati.com/" target="_blank" className="btn">Visit Page</Button>
+                        </div>
+                    </Carousel>
                 </Grid>
-                <Grid item xs={12} sm={12} style={{marginTop:"-25px"}} className={classes.marginAuto}>
-                    <Carousel><img src={pim}/></Carousel>
+                <Grid item xs={12} sm={12} style={{marginTop:"-31px"}} className={classes.marginAuto}>
+                    <Carousel>
+                        <div className="container">
+                        <img src={pim} alt="Snow" style={{width:"100%"}}/>
+                            <Button href="https://www.instagram.com/palembangindahmall/?hl=id" target="_blank" className="btn">Visit Page</Button>
+                        </div>
+                    </Carousel>
                 </Grid>
-                <Grid item xs={12} sm={12} style={{marginTop:"-25px"}} className={classes.marginAuto}>
-                    <Carousel><img src={home}/></Carousel>
+                <Grid item xs={12} sm={12} style={{marginTop:"-31px"}} className={classes.marginAuto}>
+                    <Carousel>
+                        <div className="container">
+                        <img src={home} alt="Snow" style={{width:"100%"}}/>
+                            <Button href="http://homes.thamrin.xyz/" target="_blank" className="btn">Visit Page</Button>
+                        </div>
+                    </Carousel>
                 </Grid>
             </Grid>
     </div>

pages-sections/home/business-partner.css

@@ -11,7 +11,7 @@
   
   .container .btn {
     position: absolute;
-    top: 90%;
+    top: 80%;
     left: 50%;
     transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);

pages-sections/honda/home/feature.js

@@ -27,7 +27,7 @@ const DataFeature = function ({ backend, service, ...props })  {
                     <h4>Feature Product</h4>
                 }
                 align="center"
-                color="danger"
+                color="info"
                 />
             </div>
             <GridContainer justify="center" style={{padding:"50px", marginTop:"-70px"}}>

pages-sections/honda/home/service.js

@@ -30,7 +30,7 @@ const DataService = function ({ backend, service, ...props })  {
                     <h4>Our Service</h4>
                 }
                 align="center"
-                color="danger"
+                color="info"
                 />
             </div>
             </div>

pages-sections/honda/latest_news/news.js

@@ -10,6 +10,7 @@ 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";
+import CardHeader from "components/Card/CardHeader.js";
 
 const useStyles = makeStyles(styles);
 
@@ -36,30 +37,33 @@ const DataLatestNews = function ({ backend, news, ...props }) {
         );
     })
     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>
+        <Card className={classes.textCenter}>
+            <div align="center">
+                <CardHeader color="info">News</CardHeader>
+            </div>
+            <CardBody>
+                <div align="center">
+                <h2>Latest News</h2>
+                </div>
+                <GridContainer justify="center">
+                {latnews}
+                </GridContainer>
+            </CardBody>
+            <div align="center">
+                <Paginations
+                pages={[
+                    { text: "PREV" },
+                    { text: 1 },
+                    { text: 2 },
+                    { active: true, text: 3 },
+                    { text: 4 },
+                    { text: 5 },
+                    { text: "NEXT" }
+                ]}
+                color="info"
+                />
+            </div>
+        </Card>
     );
 }
 

pages-sections/honda/latest_news/news_details.js

@@ -90,7 +90,20 @@ const DataLatestNews = function ({ backend, news, othernews,...props }) {
             </GridContainer>
         );
     });
-    return <div>{latnews}</div>;
+    return (
+        <Card className={classes.textCenter}>
+            <div align="center">
+                <CardHeader color="info">News</CardHeader>
+            </div>
+            <CardBody>
+                <div align="center">
+                </div>
+                <GridContainer justify="center">
+                {latnews}
+                </GridContainer>
+            </CardBody>
+        </Card>
+    );
 };
 
 export default DataLatestNews;

pages-sections/suzuki/carrer/carrer.js

@@ -31,14 +31,14 @@ const DataCarrers = function ({ backend, s1, d3, sma, ...props }) {
     return (
       <Grid style={{width:"600px", padding:"30px"}}>
         <Card>
-          <CardHeader color="danger"><div align="center">{data.name}</div></CardHeader>
+          <CardHeader color="info"><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/carrer_details?s="+data.id}>
+            <Button color="info" style={{marginLeft:"20px"}} round href={"/suzuki/carrer/carrer_details?s="+data.id}>
                 <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer
             </Button>
           </CardBody>

pages-sections/suzuki/home/feature.js

@@ -27,7 +27,7 @@ const DataFeature = function ({ backend, service, ...props })  {
                     <h4>Feature Product</h4>
                 }
                 align="center"
-                color="danger"
+                color="info"
                 />
             </div>
             <GridContainer justify="center" style={{padding:"50px", marginTop:"-70px"}}>

pages-sections/suzuki/home/service.js

@@ -30,7 +30,7 @@ const DataService = function ({ backend, service, ...props })  {
                 <h4>Our Service</h4>
               }
               align="center"
-              color="danger"
+              color="info"
             />
           </div>
         </div>

pages-sections/suzuki/snackbar.js

@@ -21,7 +21,7 @@ const DataSnackbarContent = function()  {
             </h4>
           }
           align="center"
-          color="danger"
+          color="info"
         />
       </div>
     </div>

pages-sections/yamaha/carrer/carrer.js

@@ -31,14 +31,14 @@ const DataCarrers = function ({ backend, s1, d3, sma, ...props }) {
     return (
       <Grid style={{width:"600px", padding:"30px"}}>
         <Card>
-          <CardHeader color="danger"><div align="center">{data.name}</div></CardHeader>
+          <CardHeader color="info"><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={"/yamaha/carrer_details?s="+data.id}>
+            <Button color="info" style={{marginLeft:"20px"}} round href={"/yamaha/carrer/carrer_details?s="+data.id}>
                 <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer
             </Button>
           </CardBody>
@@ -50,14 +50,14 @@ const DataCarrers = function ({ backend, s1, d3, sma, ...props }) {
     return (
       <Grid style={{width:"600px", padding:"30px"}}>
         <Card>
-          <CardHeader color="danger">{data.name}</CardHeader>
+          <CardHeader color="info">{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={"/yamaha/carrer_details?s="+data.id}>
+            <Button color="info" style={{marginLeft:"20px"}} round href={"/yamaha/carrer/carrer_details?s="+data.id}>
                 <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer
             </Button>
           </CardBody>
@@ -69,14 +69,14 @@ const DataCarrers = function ({ backend, s1, d3, sma, ...props }) {
     return (
       <Grid style={{width:"600px", padding:"30px"}}>
         <Card>
-          <CardHeader justify="center" color="danger">{data.name}</CardHeader>
+          <CardHeader justify="center" color="info">{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={"/yamaha/carrer_details?s="+data.id}>
+            <Button color="info" style={{marginLeft:"20px"}} round href={"/yamaha/carrer/carrer_details?s="+data.id}>
                 <Icon className={classes.icons}>open_in_new</Icon>Detail Carrer
             </Button>
           </CardBody>
@@ -87,7 +87,7 @@ const DataCarrers = function ({ backend, s1, d3, sma, ...props }) {
   return (
     <Card className={classes.textCenter}>
       <div align="center">
-        <CardHeader color="info">Product</CardHeader>
+        <CardHeader color="info">Carrer</CardHeader>
       </div>
       <CardBody>
         <div align="center">

pages-sections/yamaha/home/feature.js

@@ -27,7 +27,7 @@ const DataFeature = function ({ backend, service, ...props })  {
                     <h4>Feature Product</h4>
                 }
                 align="center"
-                color="danger"
+                color="info"
                 />
             </div>
             <GridContainer justify="center" style={{padding:"50px", marginTop:"-70px"}}>

pages-sections/yamaha/home/service.js

@@ -12,7 +12,7 @@ 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"}}>
+      <Grid align="center" style={{padding:"25px", marginTop:"-30px"}}>
         <Card style={{width: "20rem"}}>
           <div align="center">
             <img
@@ -30,7 +30,7 @@ const DataService = function ({ backend, service, ...props })  {
                 <h4>Our Service</h4>
               }
               align="center"
-              color="danger"
+              color="info"
             />
           </div>
         </div>

pages-sections/yamaha/latest_news/news.js

@@ -5,8 +5,10 @@ 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 GridItem from "components/Grid/GridItem.js";
 import Card from "components/Card/Card.js";
 import CardBody from "components/Card/CardBody.js";
+import CardHeader from "components/Card/CardHeader.js";
 import Button from "components/CustomButtons/Button.js";
 import Paginations from "components/Pagination/Pagination.js";
 import Icon from "@material-ui/core/Icon";
@@ -36,15 +38,18 @@ const DataLatestNews = function ({ backend, news, ...props }) {
     );
   })
   return (
-    <div className={classes.section} id="notifications">
+    <Card className={classes.textCenter}>
       <div align="center">
-          <h2>Latest News</h2>
+        <CardHeader color="info">News</CardHeader>
       </div>
-      <div>
+      <CardBody>
+        <div align="center">
+          <h2>Latest News</h2>
+        </div>
         <GridContainer justify="center">
           {latnews}
         </GridContainer>
-      </div>
+      </CardBody>
       <div align="center">
         <Paginations
           pages={[
@@ -59,8 +64,8 @@ const DataLatestNews = function ({ backend, news, ...props }) {
           color="info"
         />
       </div>
-    </div>
+    </Card>
   );
 }
 
-export default DataLatestNews;
+export default DataLatestNews;

pages-sections/yamaha/latest_news/news_details.js

@@ -8,6 +8,7 @@ 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 CardHeader from "components/Card/CardHeader.js";
 import Card from "components/Card/Card.js";
 import Carousel from "react-slick";
 import CardBody from "components/Card/CardBody.js";
@@ -90,7 +91,20 @@ const DataLatestNews = function ({ backend, news, othernews,...props }) {
             </GridContainer>
         );
     });
-    return <div>{latnews}</div>;
+    return (
+        <Card className={classes.textCenter}>
+            <div align="center">
+                <CardHeader color="info">News</CardHeader>
+            </div>
+            <CardBody>
+                <div align="center">
+                </div>
+                <GridContainer justify="center">
+                {latnews}
+                </GridContainer>
+            </CardBody>
+        </Card>
+    );
 };
 
 export default DataLatestNews;

pages-sections/yamaha/snackbar.js

@@ -21,7 +21,7 @@ const DataSnackbarContent = function()  {
             </h4>
           }
           align="center"
-          color="danger"
+          color="info"
         />
       </div>
     </div>

pages/hino/about_us/about_us.js

@@ -0,0 +1,80 @@
+import React from "react";
+// nodejs library that concatenates classes
+import classNames from "classnames";
+// react components for routing our app without refresh
+import Link from "next/link";
+// @material-ui/core components
+import { makeStyles } from "@material-ui/core/styles";
+// @material-ui/icons
+// core components
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderHino.js";
+import Footer from "components/Footer/FooterHino.js";
+import GridContainer from "components/Grid/GridContainer.js";
+import GridItem from "components/Grid/GridItem.js";
+import AboutUs from "pages-sections/yamaha/about_us/about_us.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+import Cookies from "cookies";
+
+const useStyles = makeStyles(styles);
+
+const AboutUS = function ({ user, ...props }) {
+  const classes = useStyles();
+  const { ...rest } = props;
+  return (
+    <div>
+      <Header
+        rightLinks={<HeaderLinks username={user} />}
+        fixed
+        color="info"
+        changeColorOnScroll={{
+          height: 400,
+          color: "white"
+        }}
+        {...rest}
+      />
+      <Parallax image={require("assets/img/aboutus.jpg")} width="200px">
+        <div className={classes.container}>
+          <GridContainer>
+            <GridItem>
+              {/* <div className={classes.brand}>
+                <h1 className={classes.title}>NextJS Material Kit.</h1>
+                <h3 className={classes.subtitle}>
+                  A Badass Material Kit based on Material-UI and NextJS.
+                </h3>
+              </div> */}
+            </GridItem>
+          </GridContainer>
+        </div>
+      </Parallax>
+      <div className={classNames(classes.main, classes.mainRaised)}>
+        <AboutUs />  
+      </div>
+      <Footer />
+    </div>
+  );
+}
+
+export async function getServerSideProps(context) {
+  var { req, resp } = context;
+  const cookies = new Cookies(req, resp);
+  var user = "";
+  var userObj = (await cookies.get("user"))
+    ? JSON.parse(await cookies.get("user"))
+    : null;
+  if (userObj) {
+    let sessionId = userObj["partners_login_states"].filter(function (i) {
+      return (
+        i.business_partner && i.business_partner.name.toUpperCase() == "YAMAHA"
+      );
+    });
+    if (sessionId.length != 0) user = userObj["username"];
+  }
+
+  return {
+    props: { user }, // will be passed to the page component as props
+  };
+}
+
+export default AboutUS;

pages/hino/about_us/penghargaan.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+
+import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import CardHeader from "components/Card/CardHeader.js";
+import CompanyLink from "components/Header/LinkCompany.js";
+
+const useStyles = makeStyles(styles);
+
+const DataPenghargaan = function ({ backend, businessPartners, service, carousel, ...props }) {
+    const classes = useStyles();
+    return (
+        <div>
+        <Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
+            <div align="center">
+            <CardHeader color="info" justify="center"> 
+                <CompanyLink />
+            </CardHeader>
+            </div>
+            <CardBody>
+            <div align="center">
+                <img src="http://3.bp.blogspot.com/-_dTNAAE-TMY/VL3Zyiti2OI/AAAAAAAAAT0/YSd7Ok_3I0k/s1600/Thamrin-brother-loker.png"/>
+            </div>
+            <h1 className={classes.cardTitle}><b>Penghargaan Thamrin Group</b></h1>
+            <p>Thamrin Group adalah perusahaan terkemuka di Sumatera Selatan & Bengkulu dengan fokus bisnis pada sektor otomotif dan properti</p>
+            <h3>Visi</h3>
+            <p>Berdampak bagi masyarakat melalui SDM yang dimiliki, pelayanan prima & pengembangan usaha secara berkelanjutan dengan membangun perusahaan yang terpercaya & memiliki reputasi yang baik</p>
+            <h3>Misi</h3>
+            <p>1. Melayani 21,7 juta pelanggan di tahun 2022</p>
+            <p>2. Mengembangkan pemimpin yang sukses</p>
+            <p>3. Mengelola proses administrasi yang simple & excellent</p>
+            <p>4. Mendukung continuous improvement</p>
+            </CardBody>
+        </Card>
+        </div>
+    );
+}
+
+export default DataPenghargaan;

pages/hino/about_us/profile.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+
+import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import CardHeader from "components/Card/CardHeader.js";
+import CompanyLink from "components/Header/LinkCompany.js";
+
+const useStyles = makeStyles(styles);
+
+const DataProfile = function ({ backend, businessPartners, service, carousel, ...props }) {
+    const classes = useStyles();
+    return (
+        <div>
+        <Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
+            <div align="center">
+            <CardHeader color="info" justify="center"> 
+                <CompanyLink />
+            </CardHeader>
+            </div>
+            <CardBody>
+            <div align="center">
+                <img src="http://3.bp.blogspot.com/-_dTNAAE-TMY/VL3Zyiti2OI/AAAAAAAAAT0/YSd7Ok_3I0k/s1600/Thamrin-brother-loker.png"/>
+            </div>
+            <h1 className={classes.cardTitle}><b>Profile Thamrin Group</b></h1>
+            <p>Thamrin Group adalah perusahaan terkemuka di Sumatera Selatan & Bengkulu dengan fokus bisnis pada sektor otomotif dan properti</p>
+            <h3>Visi</h3>
+            <p>Berdampak bagi masyarakat melalui SDM yang dimiliki, pelayanan prima & pengembangan usaha secara berkelanjutan dengan membangun perusahaan yang terpercaya & memiliki reputasi yang baik</p>
+            <h3>Misi</h3>
+            <p>1. Melayani 21,7 juta pelanggan di tahun 2022</p>
+            <p>2. Mengembangkan pemimpin yang sukses</p>
+            <p>3. Mengelola proses administrasi yang simple & excellent</p>
+            <p>4. Mendukung continuous improvement</p>
+            </CardBody>
+        </Card>
+        </div>
+    );
+}
+
+export default DataProfile;

pages/hino/about_us/saham.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+
+import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import CardHeader from "components/Card/CardHeader.js";
+import CompanyLink from "components/Header/LinkCompany.js";
+
+const useStyles = makeStyles(styles);
+
+const DataSaham = function ({ backend, businessPartners, service, carousel, ...props }) {
+    const classes = useStyles();
+    return (
+        <div>
+        <Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
+            <div align="center">
+            <CardHeader color="info" justify="center"> 
+                <CompanyLink />
+            </CardHeader>
+            </div>
+            <CardBody>
+            <div align="center">
+                <img src="http://3.bp.blogspot.com/-_dTNAAE-TMY/VL3Zyiti2OI/AAAAAAAAAT0/YSd7Ok_3I0k/s1600/Thamrin-brother-loker.png"/>
+            </div>
+            <h1 className={classes.cardTitle}><b>Kepemilikan Saham Thamrin Group</b></h1>
+            <p>Thamrin Group adalah perusahaan terkemuka di Sumatera Selatan & Bengkulu dengan fokus bisnis pada sektor otomotif dan properti</p>
+            <h3>Visi</h3>
+            <p>Berdampak bagi masyarakat melalui SDM yang dimiliki, pelayanan prima & pengembangan usaha secara berkelanjutan dengan membangun perusahaan yang terpercaya & memiliki reputasi yang baik</p>
+            <h3>Misi</h3>
+            <p>1. Melayani 21,7 juta pelanggan di tahun 2022</p>
+            <p>2. Mengembangkan pemimpin yang sukses</p>
+            <p>3. Mengelola proses administrasi yang simple & excellent</p>
+            <p>4. Mendukung continuous improvement</p>
+            </CardBody>
+        </Card>
+        </div>
+    );
+}
+
+export default DataSaham;

pages/hino/about_us/sejarah.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+
+import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import CardHeader from "components/Card/CardHeader.js";
+import CompanyLink from "components/Header/LinkCompany.js";
+
+const useStyles = makeStyles(styles);
+
+const DataSejarah = function ({ backend, businessPartners, service, carousel, ...props }) {
+    const classes = useStyles();
+    return (
+        <div>
+        <Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
+            <div align="center">
+            <CardHeader color="info" justify="center"> 
+                <CompanyLink />
+            </CardHeader>
+            </div>
+            <CardBody>
+            <div align="center">
+                <img src="http://3.bp.blogspot.com/-_dTNAAE-TMY/VL3Zyiti2OI/AAAAAAAAAT0/YSd7Ok_3I0k/s1600/Thamrin-brother-loker.png"/>
+            </div>
+            <h1 className={classes.cardTitle}><b>Sejarah Thamrin Group</b></h1>
+            <p>Thamrin Group adalah perusahaan terkemuka di Sumatera Selatan & Bengkulu dengan fokus bisnis pada sektor otomotif dan properti</p>
+            <h3>Visi</h3>
+            <p>Berdampak bagi masyarakat melalui SDM yang dimiliki, pelayanan prima & pengembangan usaha secara berkelanjutan dengan membangun perusahaan yang terpercaya & memiliki reputasi yang baik</p>
+            <h3>Misi</h3>
+            <p>1. Melayani 21,7 juta pelanggan di tahun 2022</p>
+            <p>2. Mengembangkan pemimpin yang sukses</p>
+            <p>3. Mengelola proses administrasi yang simple & excellent</p>
+            <p>4. Mendukung continuous improvement</p>
+            </CardBody>
+        </Card>
+        </div>
+    );
+}
+
+export default DataSejarah;

pages/hino/about_us/struktur_organisasi.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+
+import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import CardHeader from "components/Card/CardHeader.js";
+import CompanyLink from "components/Header/LinkCompany.js";
+
+const useStyles = makeStyles(styles);
+
+const DataStrukturOrganisasi = function ({ backend, businessPartners, service, carousel, ...props }) {
+    const classes = useStyles();
+    return (
+        <div>
+        <Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
+            <div align="center">
+            <CardHeader color="info" justify="center"> 
+                <CompanyLink />
+            </CardHeader>
+            </div>
+            <CardBody>
+            <div align="center">
+                <img src="http://3.bp.blogspot.com/-_dTNAAE-TMY/VL3Zyiti2OI/AAAAAAAAAT0/YSd7Ok_3I0k/s1600/Thamrin-brother-loker.png"/>
+            </div>
+            <h1 className={classes.cardTitle}><b>Struktur Organisasi Thamrin Group</b></h1>
+            <p>Thamrin Group adalah perusahaan terkemuka di Sumatera Selatan & Bengkulu dengan fokus bisnis pada sektor otomotif dan properti</p>
+            <h3>Visi</h3>
+            <p>Berdampak bagi masyarakat melalui SDM yang dimiliki, pelayanan prima & pengembangan usaha secara berkelanjutan dengan membangun perusahaan yang terpercaya & memiliki reputasi yang baik</p>
+            <h3>Misi</h3>
+            <p>1. Melayani 21,7 juta pelanggan di tahun 2022</p>
+            <p>2. Mengembangkan pemimpin yang sukses</p>
+            <p>3. Mengelola proses administrasi yang simple & excellent</p>
+            <p>4. Mendukung continuous improvement</p>
+            </CardBody>
+        </Card>
+        </div>
+    );
+}
+
+export default DataStrukturOrganisasi;

pages/hino/about_us/tata_kelola.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+
+import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import CardHeader from "components/Card/CardHeader.js";
+import CompanyLink from "components/Header/LinkCompany.js";
+
+const useStyles = makeStyles(styles);
+
+const DataTataKelola = function ({ backend, businessPartners, service, carousel, ...props }) {
+    const classes = useStyles();
+    return (
+        <div>
+        <Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
+            <div align="center">
+            <CardHeader color="info" justify="center"> 
+                <CompanyLink />
+            </CardHeader>
+            </div>
+            <CardBody>
+            <div align="center">
+                <img src="http://3.bp.blogspot.com/-_dTNAAE-TMY/VL3Zyiti2OI/AAAAAAAAAT0/YSd7Ok_3I0k/s1600/Thamrin-brother-loker.png"/>
+            </div>
+            <h1 className={classes.cardTitle}><b>Tata Kelola Thamrin Group</b></h1>
+            <p>Thamrin Group adalah perusahaan terkemuka di Sumatera Selatan & Bengkulu dengan fokus bisnis pada sektor otomotif dan properti</p>
+            <h3>Visi</h3>
+            <p>Berdampak bagi masyarakat melalui SDM yang dimiliki, pelayanan prima & pengembangan usaha secara berkelanjutan dengan membangun perusahaan yang terpercaya & memiliki reputasi yang baik</p>
+            <h3>Misi</h3>
+            <p>1. Melayani 21,7 juta pelanggan di tahun 2022</p>
+            <p>2. Mengembangkan pemimpin yang sukses</p>
+            <p>3. Mengelola proses administrasi yang simple & excellent</p>
+            <p>4. Mendukung continuous improvement</p>
+            </CardBody>
+        </Card>
+        </div>
+    );
+}
+
+export default DataTataKelola;

pages/hino/about_us/tugas_fungsi.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+
+import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import CardHeader from "components/Card/CardHeader.js";
+import CompanyLink from "components/Header/LinkCompany.js";
+
+const useStyles = makeStyles(styles);
+
+const DataTugasFungsi = function ({ backend, businessPartners, service, carousel, ...props }) {
+    const classes = useStyles();
+    return (
+        <div>
+        <Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
+            <div align="center">
+            <CardHeader color="info" justify="center"> 
+                <CompanyLink />
+            </CardHeader>
+            </div>
+            <CardBody>
+            <div align="center">
+                <img src="http://3.bp.blogspot.com/-_dTNAAE-TMY/VL3Zyiti2OI/AAAAAAAAAT0/YSd7Ok_3I0k/s1600/Thamrin-brother-loker.png"/>
+            </div>
+            <h1 className={classes.cardTitle}><b>Tugas & Fungsi Thamrin Group</b></h1>
+            <p>Thamrin Group adalah perusahaan terkemuka di Sumatera Selatan & Bengkulu dengan fokus bisnis pada sektor otomotif dan properti</p>
+            <h3>Visi</h3>
+            <p>Berdampak bagi masyarakat melalui SDM yang dimiliki, pelayanan prima & pengembangan usaha secara berkelanjutan dengan membangun perusahaan yang terpercaya & memiliki reputasi yang baik</p>
+            <h3>Misi</h3>
+            <p>1. Melayani 21,7 juta pelanggan di tahun 2022</p>
+            <p>2. Mengembangkan pemimpin yang sukses</p>
+            <p>3. Mengelola proses administrasi yang simple & excellent</p>
+            <p>4. Mendukung continuous improvement</p>
+            </CardBody>
+        </Card>
+        </div>
+    );
+}
+
+export default DataTugasFungsi;

pages/hino/carrer/carrer.js

@@ -0,0 +1,82 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderHino.js";
+import Footer from "components/Footer/FooterHino.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+
+import SectionCarrer from "pages-sections/hino/carrer/carrer.js";
+import Getcarrer from "api/carrer/carrer.js"
+import Cookies from "cookies";
+
+const useStyles = makeStyles(styles);
+
+const Carrer = function ({ user, backend, s1, d3, sma, ...props }) {
+    const classes = useStyles();
+    const { ...rest } = props;
+    return (
+        <div>
+        <Header
+            rightLinks={<HeaderLinks username={user} />}
+            fixed
+            color="dark"
+            changeColorOnScroll={{
+            height: 400,
+            color: "white"
+            }}
+            {...rest}
+        />
+        <Parallax image={require("assets/img/carrer.png")} height="50px"/>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <SectionCarrer s1={s1} d3={d3} sma={sma} backend={backend}/>  
+        </div>
+        <Footer />
+        </div>
+    );
+}
+
+export default Carrer;
+
+export async function getServerSideProps(context) {
+    var s1 = [];
+    var d3 = [];
+    var sma = [];
+    const backend = process.env.BACKEND_SERVER_URI;
+
+    var { req, resp } = context;
+    const cookies = new Cookies(req, resp);
+    var user = "";
+    var userObj = (await cookies.get("user"))
+        ? JSON.parse(await cookies.get("user"))
+        : null;
+    if (userObj) {
+        let sessionId = userObj["partners_login_states"].filter(function (i) {
+        return (
+            i.business_partner && i.business_partner.name.toUpperCase() == "YAMAHA"
+        );
+        });
+        if (sessionId.length != 0) user = userObj["username"];
+    }
+
+    var res = await Getcarrer.GetCarrerS1Hino();
+        if (res["STATUS"] === 1) {
+            s1 = res["DATA"]["carrers"];
+        }
+
+    var res = await Getcarrer.GetCarrerD3Hino();
+        if (res["STATUS"] === 1) {
+            d3 = res["DATA"]["carrers"];
+        }
+
+    var res = await Getcarrer.GetCarrerSMAHino();
+        if (res["STATUS"] === 1) {
+            sma = res["DATA"]["carrers"];
+        }
+
+	return {
+		props: { user, s1, d3, sma, backend }, // will be passed to the page component as props
+	};
+}

pages/hino/carrer/carrer_details.js

@@ -0,0 +1,72 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderHino.js";
+import Footer from "components/Footer/FooterHino.js";
+import CarrerDetail from "pages-sections/hino/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 Cookies from "cookies";
+
+const useStyles = makeStyles(styles);
+
+const CarrerDetails = function ({ user, backend, detailcarrer, ...props })  {
+    const classes = useStyles();
+    const { ...rest } = props;
+    return (
+        <div>
+        <Header
+            rightLinks={<HeaderLinks username={user} />}
+            fixed
+            color="dark"
+            changeColorOnScroll={{
+            height: 400,
+            color: "white"
+            }}
+            {...rest}
+        />
+        <Parallax image={require("assets/img/carrer.png")} height="50px"/>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <CarrerDetail detailcarrer={detailcarrer} backend={backend}/>  
+        </div>
+        <Footer />
+        </div>
+    );
+}
+
+export default CarrerDetails;
+
+export async function getServerSideProps(context) {
+    var {query} = context;
+	var detailcarrer = [];
+    const backend = process.env.BACKEND_SERVER_URI;
+
+    var { req, resp } = context;
+    const cookies = new Cookies(req, resp);
+    var user = "";
+    var userObj = (await cookies.get("user"))
+        ? JSON.parse(await cookies.get("user"))
+        : null;
+    if (userObj) {
+        let sessionId = userObj["partners_login_states"].filter(function (i) {
+        return (
+            i.business_partner && i.business_partner.name.toUpperCase() == "YAMAHA"
+        );
+        });
+        if (sessionId.length != 0) user = userObj["username"];
+    }
+
+	var res = await GetDetailcarrer.GetDetailCarrer(query.s||0);
+	if (res["STATUS"] === 1) {
+		detailcarrer = res["DATA"]["carrers"];
+	}
+
+    console.log(res);
+
+	return {
+		props: { user, detailcarrer, backend }, // will be passed to the page component as props
+	};
+}

pages/hino/home.js

@@ -0,0 +1,108 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderHino.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+import Footer from "components/Footer/FooterHino.js";
+
+import GetbusinessPartners from "api/home/businessPartner.js";
+import Getservices from "api/home/service.js";
+import Getcarousels from "api/home/carousel.js";
+import DataSnackbarContent from "pages-sections/yamaha/snackbar.js";
+import DataCarousel from "pages-sections/honda/home/carousel.js";
+import DataService from "pages-sections/honda/home/service.js";
+import DataFeature from "pages-sections/honda/home/feature.js";
+import Cookies from "cookies";
+
+const useStyles = makeStyles(styles);
+const Home = function ({
+    backend,
+    businessPartners,
+    service,
+    carousel,
+    user,
+    ...props
+    }) {
+    const classes = useStyles();
+    const { ...rest } = props;
+    <DataService service={props.service} />;
+
+    return (
+        <div>
+        <Header
+            rightLinks={<HeaderLinks username={user} />}
+            fixed
+            color="dark"
+            changeColorOnScroll={{
+            height: 400,
+            color: "white",
+            }}
+            {...rest}
+        />
+        <Parallax
+            image={require("assets/img/hino.jpg")}
+            styles={{ marginTop: "50px" }}
+        />
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <DataSnackbarContent />
+            {/* <CoreValue /> */}
+            <DataCarousel carousel={carousel} backend={backend} />
+            <DataService service={service} backend={backend} />
+            <DataFeature />
+            {/* <DataBusinessPartner
+            businessPartners={businessPartners}
+            backend={backend}
+            /> */}
+            {/* <DataSosmed /> */}
+        </div>
+        <Footer />
+        </div>
+    );
+};
+
+export async function getServerSideProps(context) {
+    var businessPartners = [];
+    var service = [];
+    var carousel = [];
+    const backend = process.env.BACKEND_SERVER_URI;
+
+    var { req, resp } = context;
+    const cookies = new Cookies(req, resp);
+    var user = "";
+    var userObj = (await cookies.get("user"))
+        ? JSON.parse(await cookies.get("user"))
+        : null;
+    if (userObj) {
+        let sessionId = userObj["partners_login_states"].filter(function (i) {
+        return (
+            i.business_partner && i.business_partner.name.toUpperCase() == "YAMAHA"
+        );
+        });
+        if (sessionId.length != 0) user = userObj["username"];
+    }
+
+    var res = await GetbusinessPartners.GetbusinessPartners();
+    if (res["STATUS"] === 1) {
+        businessPartners = res["DATA"]["businessPartners"];
+    }
+
+    var res = await Getservices.GetservicesYamaha();
+    if (res["STATUS"] === 1) {
+        service = res["DATA"]["services"];
+    }
+
+    var res = await Getcarousels.GetCarouselsHino();
+    if (res["STATUS"] === 1) {
+        carousel = res["DATA"]["carousels"];
+    }
+
+    console.log(carousel);
+    return {
+        props: { businessPartners, service, carousel, backend, user }, // will be passed to the page component as props
+    };
+}
+
+export default Home;

pages/hino/latest_news/latestnews.js

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

pages/hino/latest_news/latestnews_details.js

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

pages/hino/login.js

@@ -0,0 +1,162 @@
+import React from "react";
+// @material-ui/core components
+import { makeStyles } from "@material-ui/core/styles";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import Icon from "@material-ui/core/Icon";
+// @material-ui/icons
+import Email from "@material-ui/icons/Email";
+import People from "@material-ui/icons/People";
+// core components
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import GridContainer from "components/Grid/GridContainer.js";
+import GridItem from "components/Grid/GridItem.js";
+import Button from "components/CustomButtons/Button.js";
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import CardHeader from "components/Card/CardHeader.js";
+import CardFooter from "components/Card/CardFooter.js";
+import CustomInput from "components/CustomInput/CustomInput.js";
+
+import styles from "assets/jss/nextjs-material-kit/pages/loginPage.js";
+
+import image from "assets/img/bgtbg.jpg";
+
+import Collapse from "@material-ui/core/Collapse";
+import Alert from "@material-ui/lab/Alert";
+import IconButton from "@material-ui/core/IconButton";
+import CloseIcon from "@material-ui/icons/Close";
+import { useRouter } from "next/router";
+const useStyles = makeStyles(styles);
+
+export default function LoginPage(props) {
+    const [cardAnimaton, setCardAnimation] = React.useState("cardHidden");
+    const [email, setEmail] = React.useState("");
+    const [pass, setPass] = React.useState("");
+    const [open, setOpen] = React.useState(false);
+    const [error, setError] = React.useState("");
+    const router = useRouter();
+    setTimeout(function () {
+        setCardAnimation("");
+    }, 700);
+    const classes = useStyles();
+    const { ...rest } = props;
+
+    const submitHandler = async (event) => {
+        event.preventDefault();
+        const res = await fetch("../api/auth/login", {
+        body: JSON.stringify({
+            partner: "hino",
+            email: email,
+            pass: pass,
+        }),
+        headers: {
+            "Content-Type": "application/json",
+        },
+        method: "POST",
+        });
+        // console.log("res", res.S);
+        if (res.ok) {
+        router.push("/hino/home");
+        } else {
+        setError(await res.text());
+        setOpen(true);
+        }
+    };
+
+    return (
+        <div>
+        <Collapse className={classes.collapsible} in={open}>
+            <Alert
+            severity="error"
+            action={
+                <IconButton
+                aria-label="close"
+                color="inherit"
+                size="small"
+                onClick={() => {
+                    setOpen(false);
+                }}
+                >
+                <CloseIcon fontSize="inherit" />
+                </IconButton>
+            }
+            >
+            {error}
+            </Alert>
+        </Collapse>
+        {/* <Header absolute color="info" rightLinks={<HeaderLinks />} {...rest} /> */}
+        <div
+            className={classes.pageHeader}
+            style={{
+            backgroundImage: "url(" + image + ")",
+            backgroundSize: "cover",
+            backgroundPosition: "top center",
+            }}
+        >
+            <div className={classes.container}>
+            <GridContainer justify="center">
+                <GridItem xs={6}>
+                <Card className={classes[cardAnimaton]}>
+                    <form onSubmit={submitHandler} className={classes.form}>
+                    <CardHeader color="info" className={classes.cardHeader}>
+                        <h4>Login</h4>
+                    </CardHeader>
+                    <p className={classes.divider}>Selamat Datang di Halaman Login Thamrin Brothers</p>
+                    <CardBody>
+                        <CustomInput
+                        labelText="Email..."
+                        id="email"
+                        value={email}
+                        formControlProps={{
+                            fullWidth: true,
+                        }}
+                        inputProps={{
+                            type: "email",
+                            onChange: (event) => setEmail(event.target.value),
+                            endAdornment: (
+                            <InputAdornment position="end">
+                                <Email className={classes.inputIconsColor} />
+                            </InputAdornment>
+                            ),
+                        }}
+                        />
+                        <CustomInput
+                        labelText="Password"
+                        id="pass"
+                        value={pass}
+                        formControlProps={{
+                            fullWidth: true,
+                        }}
+                        inputProps={{
+                            onChange: (event) => setPass(event.target.value),
+                            type: "password",
+                            endAdornment: (
+                            <InputAdornment position="end">
+                                <Icon className={classes.inputIconsColor}>
+                                lock_outline
+                                </Icon>
+                            </InputAdornment>
+                            ),
+                            autoComplete: "off",
+                        }}
+                        />
+                    </CardBody>
+                    <CardFooter className={classes.cardFooter}>
+                        <Button type="submit" color="info" size="lg">
+                        Login
+                        </Button>
+                        <Button href="/hino/register" color="info" size="lg">
+                        Register
+                        </Button>
+                    </CardFooter>
+                    </form>
+                </Card>
+                </GridItem>
+            </GridContainer>
+            </div>
+        </div>
+        </div>
+    );
+}

pages/hino/product/product.js

@@ -0,0 +1,82 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Header from "components/Header/Header.js";
+import HeaderHino from "components/Header/HeaderHino.js";
+import FooterHino from "components/Footer/FooterHino.js";
+import DataProduct from "pages-sections/honda/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 Cookies from "cookies";
+
+const useStyles = makeStyles(styles);
+
+const Product = function ({
+    backend,
+    car,
+    user,
+    ...props
+    }) {
+    const classes = useStyles();
+    const { ...rest } = props;
+    return (
+        <div>
+        <Header
+            rightLinks={<HeaderHino username={user} />}
+            fixed
+            color="dark"
+            changeColorOnScroll={{
+            height: 400,
+            color: "white",
+            }}
+            {...rest}
+        />
+        <Parallax image={require("assets/img/hino.jpg")} width="200px"/>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <DataProduct
+            car={car}
+            backend={backend}
+            />
+        </div>
+        <FooterHino />
+        </div>
+    );
+};
+
+export default Product;
+
+export async function getServerSideProps(context) {
+    var car = [];
+    const backend = process.env.BACKEND_SERVER_URI;
+
+    var { req, resp } = context;
+    const cookies = new Cookies(req, resp);
+    var user = "";
+    var userObj = (await cookies.get("user"))
+        ? JSON.parse(await cookies.get("user"))
+        : null;
+    if (userObj) {
+        let sessionId = userObj["partners_login_states"].filter(function (i) {
+        return (
+            i.business_partner && i.business_partner.name.toUpperCase() == "SUZUKI"
+        );
+        });
+        if (sessionId.length != 0) user = userObj["username"];
+    }
+
+    var res = await Getproduct.GetProductHino();
+    if (res["STATUS"] === 1) {
+        car = res["DATA"]["products"];
+    }
+
+    return {
+        props: {
+        car,
+        backend,
+        user,
+        }, // will be passed to the page component as props
+    };
+}

pages/hino/profile/profile.js

@@ -0,0 +1,68 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderHino.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+import Footer from "components/Footer/FooterHino.js";
+import GetProfile from "api/profile/profile.js"
+import DataProfile from "pages-sections/hino/profile/profile.js"
+import Cookies from "cookies";
+
+const useStyles = makeStyles(styles);
+const Profile = function ({ user, profile, ...props }) {
+    const classes = useStyles();
+    const { ...rest } = props;
+    return (
+        <div>
+        <Header
+            rightLinks={<HeaderLinks username={user} />}
+            fixed
+            color="dark"
+            changeColorOnScroll={{
+            height: 400,
+            color: "white",
+            }}
+            {...rest}
+        />
+        <Parallax
+            image={require("assets/img/hino.jpg")}
+            styles={{ marginTop: "50px" }}
+        />
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <DataProfile profile={profile}/>
+        </div>
+        <Footer />
+        </div>
+    );
+};
+
+export async function getServerSideProps(context) {
+    var profile = [];
+    var res = await GetProfile.profile();
+    if (res["STATUS"] === 1) {
+        profile = res["DATA"]["users"];
+    }
+    
+    var { req, resp } = context;
+    const cookies = new Cookies(req, resp);
+    var user = "";
+        var userObj = (await cookies.get("user"))
+        ? JSON.parse(await cookies.get("user"))
+        : null;
+        if (userObj) {
+        let sessionId = userObj["partners_login_states"].filter(function (i) {
+            return (
+            i.business_partner && i.business_partner.name.toUpperCase() == "YAMAHA"
+            );
+        });
+        if (sessionId.length != 0) user = userObj["username"];
+    }
+    
+    return {
+        props: { profile, user }, // will be passed to the page component as props
+    };
+}
+export default Profile;

pages/home.css

@@ -0,0 +1,23 @@
+*{padding:0;margin:0;}
+
+body{
+	font-family:Verdana, Geneva, sans-serif;
+	font-size:18px;
+	background-color:#CCC;
+}
+
+.float{
+	position:fixed;
+	width:60px;
+	height:60px;
+	bottom:40px;
+	right:40px;
+	background-color:#075e54;
+	color:#FFF;
+	border-radius:50px;
+	text-align:center;
+}
+
+.my-float{
+	margin-top:22px;
+}

pages/home.js

@@ -8,7 +8,7 @@ import { makeStyles } from "@material-ui/core/styles";
 
 // core components
 import Header from "components/Header/Header.js";
-import Footer from "components/Footer/Footer.js";
+import Footer from "components/Footer/FooterHome.js";
 import GridContainer from "components/Grid/GridContainer.js";
 import GridItem from "components/Grid/GridItem.js";
 import Button from "components/CustomButtons/Button.js";
@@ -22,7 +22,7 @@ import Carousel from "pages-sections/home/Carousel.js"
 import CoreValue from "pages-sections/home/CoreValue.js";
 import BusineesPartner from "pages-sections/home/Businees-Partner.js";
 import Gallery from "pages-sections/home/gallery.js";
-import stylecss from "../pages/home.scss";
+import stylecss from "../pages/home.css";
 //image
 import Logo from "assets/img/Black.png";
 import Wa from "assets/img/wa.png"
@@ -68,14 +68,14 @@ export default function LandingPage(props) {
             </div>
         </Parallax>
         <div className={classNames(classes.main, classes.mainRaised)}>
-            <a href="https://wa.me/087797315685" target="_blank" className="act">
-                +
-            </a>
             <div className={classes.container}><br /><br /><br />
-            <Carousel />
-            <CoreValue />
-            <BusineesPartner />
-            <Gallery />
+                <Carousel />
+                <CoreValue />
+                <BusineesPartner />
+                <Gallery />
+                <a href="https://wa.me/087797315685" target="_blank" class="float">
+                    <i class="fa fa-phone my-float"></i>
+                </a>
             </div>
         </div>
         <Footer />

pages/home.scss

@@ -1,19 +0,0 @@
-.act{
-    background:green;
-    display: block;
-    width: 50px;
-    height: 50px;
-    line-height: 50px;
-    text-align: center;
-    color: white;
-    font-size: 30px;
-    font-weight: bold;
-    border-radius: 50%;
-    -webkit-border-radius: 50%;
-    text-decoration: none;
-    transition: ease all 0.3s;
-    position: fixed;
-    right: 30px;
-    bottom:30px;
-  }
-.act-btn:hover{background: blue}

pages/honda/about_us/about_us.js

@@ -1,41 +1,80 @@
 import React from "react";
+// nodejs library that concatenates classes
+import classNames from "classnames";
+// react components for routing our app without refresh
+import Link from "next/link";
+// @material-ui/core components
 import { makeStyles } from "@material-ui/core/styles";
-
-import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
-import Card from "components/Card/Card.js";
-import CardBody from "components/Card/CardBody.js";
-import CardHeader from "components/Card/CardHeader.js";
-import CompanyLink from "components/Header/LinkCompany.js";
+// @material-ui/icons
+// core components
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderHonda.js";
+import Footer from "components/Footer/FooterHonda.js";
+import GridContainer from "components/Grid/GridContainer.js";
+import GridItem from "components/Grid/GridItem.js";
+import AboutUs from "pages-sections/yamaha/about_us/about_us.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+import Cookies from "cookies";
 
 const useStyles = makeStyles(styles);
 
-const DataAboutUS = function ({ backend, businessPartners, service, carousel, ...props }) {
+const AboutUS = function ({ user, ...props }) {
   const classes = useStyles();
+  const { ...rest } = props;
   return (
     <div>
-      <Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
-        <div align="center">
-          <CardHeader justify="center" color="info" style={{padding:"10px"}}> 
-            <CompanyLink />
-          </CardHeader>
+      <Header
+        rightLinks={<HeaderLinks username={user} />}
+        fixed
+        color="info"
+        changeColorOnScroll={{
+          height: 400,
+          color: "white"
+        }}
+        {...rest}
+      />
+      <Parallax image={require("assets/img/aboutus.jpg")} width="200px">
+        <div className={classes.container}>
+          <GridContainer>
+            <GridItem>
+              {/* <div className={classes.brand}>
+                <h1 className={classes.title}>NextJS Material Kit.</h1>
+                <h3 className={classes.subtitle}>
+                  A Badass Material Kit based on Material-UI and NextJS.
+                </h3>
+              </div> */}
+            </GridItem>
+          </GridContainer>
         </div>
-        <CardBody>
-          <div align="center">
-            <img src="http://3.bp.blogspot.com/-_dTNAAE-TMY/VL3Zyiti2OI/AAAAAAAAAT0/YSd7Ok_3I0k/s1600/Thamrin-brother-loker.png"/>
-          </div>
-          <h1 className={classes.cardTitle}><b>About Us</b></h1>
-          <p>Thamrin Group adalah perusahaan terkemuka di Sumatera Selatan & Bengkulu dengan fokus bisnis pada sektor otomotif dan properti</p>
-          <h3>Visi</h3>
-          <p>Berdampak bagi masyarakat melalui SDM yang dimiliki, pelayanan prima & pengembangan usaha secara berkelanjutan dengan membangun perusahaan yang terpercaya & memiliki reputasi yang baik</p>
-          <h3>Misi</h3>
-          <p>1. Melayani 21,7 juta pelanggan di tahun 2022</p>
-          <p>2. Mengembangkan pemimpin yang sukses</p>
-          <p>3. Mengelola proses administrasi yang simple & excellent</p>
-          <p>4. Mendukung continuous improvement</p>
-        </CardBody>
-      </Card>
+      </Parallax>
+      <div className={classNames(classes.main, classes.mainRaised)}>
+        <AboutUs />  
+      </div>
+      <Footer />
     </div>
   );
 }
 
-export default DataAboutUS;
+export async function getServerSideProps(context) {
+  var { req, resp } = context;
+  const cookies = new Cookies(req, resp);
+  var user = "";
+  var userObj = (await cookies.get("user"))
+    ? JSON.parse(await cookies.get("user"))
+    : null;
+  if (userObj) {
+    let sessionId = userObj["partners_login_states"].filter(function (i) {
+      return (
+        i.business_partner && i.business_partner.name.toUpperCase() == "YAMAHA"
+      );
+    });
+    if (sessionId.length != 0) user = userObj["username"];
+  }
+
+  return {
+    props: { user }, // will be passed to the page component as props
+  };
+}
+
+export default AboutUS;

pages/honda/home.js

@@ -35,7 +35,7 @@ const Home = function ({
         <Header
             rightLinks={<HeaderLinks username={user} />}
             fixed
-            color="info"
+            color="dark"
             changeColorOnScroll={{
             height: 400,
             color: "white",

pages/honda/latest_news/latestnews.js

@@ -32,7 +32,6 @@ const LatestNews = function ({ backend, news, ...props }) {
         />
         <Parallax image={require("assets/img/honda.jpg")} width="200px"/>
         <div className={classNames(classes.main, classes.mainRaised)}>
-            <DataSnackbarContent/>
             <DataLatestNews news={news} backend={backend}/> 
         </div>
         <FooterHonda />

pages/honda/latest_news/latestnews_details.js

@@ -32,7 +32,6 @@ const detailLatestNews = function ({ backend, news, othernews, ...props }) {
         />
         <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>
         <FooterSuzuki />

pages/honda/login.js

@@ -0,0 +1,162 @@
+import React from "react";
+// @material-ui/core components
+import { makeStyles } from "@material-ui/core/styles";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import Icon from "@material-ui/core/Icon";
+// @material-ui/icons
+import Email from "@material-ui/icons/Email";
+import People from "@material-ui/icons/People";
+// core components
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import GridContainer from "components/Grid/GridContainer.js";
+import GridItem from "components/Grid/GridItem.js";
+import Button from "components/CustomButtons/Button.js";
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import CardHeader from "components/Card/CardHeader.js";
+import CardFooter from "components/Card/CardFooter.js";
+import CustomInput from "components/CustomInput/CustomInput.js";
+
+import styles from "assets/jss/nextjs-material-kit/pages/loginPage.js";
+
+import image from "assets/img/bgtbg.jpg";
+
+import Collapse from "@material-ui/core/Collapse";
+import Alert from "@material-ui/lab/Alert";
+import IconButton from "@material-ui/core/IconButton";
+import CloseIcon from "@material-ui/icons/Close";
+import { useRouter } from "next/router";
+const useStyles = makeStyles(styles);
+
+export default function LoginPage(props) {
+    const [cardAnimaton, setCardAnimation] = React.useState("cardHidden");
+    const [email, setEmail] = React.useState("");
+    const [pass, setPass] = React.useState("");
+    const [open, setOpen] = React.useState(false);
+    const [error, setError] = React.useState("");
+    const router = useRouter();
+    setTimeout(function () {
+        setCardAnimation("");
+    }, 700);
+    const classes = useStyles();
+    const { ...rest } = props;
+
+    const submitHandler = async (event) => {
+        event.preventDefault();
+        const res = await fetch("../api/auth/login", {
+        body: JSON.stringify({
+            partner: "honda",
+            email: email,
+            pass: pass,
+        }),
+        headers: {
+            "Content-Type": "application/json",
+        },
+        method: "POST",
+        });
+        // console.log("res", res.S);
+        if (res.ok) {
+        router.push("/honda/home");
+        } else {
+        setError(await res.text());
+        setOpen(true);
+        }
+    };
+
+    return (
+        <div>
+        <Collapse className={classes.collapsible} in={open}>
+            <Alert
+            severity="error"
+            action={
+                <IconButton
+                aria-label="close"
+                color="inherit"
+                size="small"
+                onClick={() => {
+                    setOpen(false);
+                }}
+                >
+                <CloseIcon fontSize="inherit" />
+                </IconButton>
+            }
+            >
+            {error}
+            </Alert>
+        </Collapse>
+        {/* <Header absolute color="info" rightLinks={<HeaderLinks />} {...rest} /> */}
+        <div
+            className={classes.pageHeader}
+            style={{
+            backgroundImage: "url(" + image + ")",
+            backgroundSize: "cover",
+            backgroundPosition: "top center",
+            }}
+        >
+            <div className={classes.container}>
+            <GridContainer justify="center">
+                <GridItem xs={6}>
+                <Card className={classes[cardAnimaton]}>
+                    <form onSubmit={submitHandler} className={classes.form}>
+                    <CardHeader color="info" className={classes.cardHeader}>
+                        <h4>Login</h4>
+                    </CardHeader>
+                    <p className={classes.divider}>Selamat Datang di Halaman Login Thamrin Brothers</p>
+                    <CardBody>
+                        <CustomInput
+                        labelText="Email..."
+                        id="email"
+                        value={email}
+                        formControlProps={{
+                            fullWidth: true,
+                        }}
+                        inputProps={{
+                            type: "email",
+                            onChange: (event) => setEmail(event.target.value),
+                            endAdornment: (
+                            <InputAdornment position="end">
+                                <Email className={classes.inputIconsColor} />
+                            </InputAdornment>
+                            ),
+                        }}
+                        />
+                        <CustomInput
+                        labelText="Password"
+                        id="pass"
+                        value={pass}
+                        formControlProps={{
+                            fullWidth: true,
+                        }}
+                        inputProps={{
+                            onChange: (event) => setPass(event.target.value),
+                            type: "password",
+                            endAdornment: (
+                            <InputAdornment position="end">
+                                <Icon className={classes.inputIconsColor}>
+                                lock_outline
+                                </Icon>
+                            </InputAdornment>
+                            ),
+                            autoComplete: "off",
+                        }}
+                        />
+                    </CardBody>
+                    <CardFooter className={classes.cardFooter}>
+                        <Button type="submit" color="info" size="lg">
+                        Login
+                        </Button>
+                        <Button href="/honda/register" color="info" size="lg">
+                        Register
+                        </Button>
+                    </CardFooter>
+                    </form>
+                </Card>
+                </GridItem>
+            </GridContainer>
+            </div>
+        </div>
+        </div>
+    );
+}

pages/suzuki/home.js

@@ -34,7 +34,7 @@ const Home = function ({
       <Header
         rightLinks={<HeaderSuzuki username={user} />}
         fixed
-        color="info"
+        color="dark"
         changeColorOnScroll={{
           height: 400,
           color: "white",

pages/yamaha/home.js

@@ -38,7 +38,7 @@ const Home = function ({
       <Header
         rightLinks={<HeaderLinks username={user} />}
         fixed
-        color="info"
+        color="dark"
         changeColorOnScroll={{
           height: 400,
           color: "white",

pages/yamaha/latest_news/latestnews.js

@@ -33,7 +33,6 @@ const LatestNews = function ({ user, backend, news, ...props }) {
       />
       <Parallax image={require("assets/img/simulasicicilan.jpg")} width="200px"/>
       <div className={classNames(classes.main, classes.mainRaised)}>
-        <DataSnackbarContent/>
         <DataLatestNews news={news} backend={backend}/> 
       </div>
       <Footer />

pages/yamaha/latest_news/latestnews_details.js

@@ -33,7 +33,6 @@ const detailLatestNews = function ({ user, backend, news, othernews, ...props })
         />
         <Parallax image={require("assets/img/simulasicicilan.jpg")} width="200px"/>
         <div className={classNames(classes.main, classes.mainRaised)}>
-            <DataSnackbarContent/>
             <DetailLatestNews news={news} othernews={othernews} backend={backend}/> 
         </div>
         <Footer />