fix company

.gitignore

@@ -11,6 +11,7 @@
 /out
 
 # misc
+.env
 .DS_Store
 .env.local
 .env.development.local

api/home.js

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

assets/css/hover.css

@@ -0,0 +1,45 @@
+  .card {
+    background: white;
+    margin: auto;
+    margin-top: 5%;
+    max-width: 30%;
+    padding: 20px 50px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+  }
+  
+  .card:hover {
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+    animation-name: example;
+    animation-duration: 0.25s;
+    border-left: 8px solid red;
+    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+  }
+  
+  button {
+    border:none;
+    background: red;
+    color: #f0f0f2;
+    border-radius: 5px;
+    padding: 5px;
+  }
+  
+  button:hover {
+    border-right: 2px solid black;
+  }
+  
+  h1 {
+    text-transform: uppercase;
+  }
+  
+  p {
+    text-align: justify;
+  }
+  
+  @keyframes example {
+      0%   {border-left: 2px solid #ffffff;}
+      25%  {border-left: 3px solid #ffe6e6;}
+      50%  {border-left: 4px solid #ff8080;}
+      100% {border-left: 5px solid #ff0000;}
+  }

components/Footer/Footer.js

@@ -31,6 +31,9 @@ export default function Footer(props) {
       <div className={classes.container}>
         <div className={classes.left}>
           <List className={classes.list}>
+            {/* <ListItem className={classes.inlineBlock}>
+              <img className={classes.imgCard} src="https://1.bp.blogspot.com/-J9AsxdwrF-Y/Wn70KyBApaI/AAAAAAAACRo/LTy3zrALzhckryd9QPi_KuVyWvwFMZyMQCLcBGAs/s640/TG.png" width="250px"/>
+            </ListItem> */}
             <ListItem className={classes.inlineBlock}>
               <a
                 href="https://www.creative-tim.com/?ref=njsmk-footer"

components/Header/HeaderLinks.js

@@ -25,6 +25,9 @@ export default function HeaderLinks(props) {
   return (
     <List className={classes.list}>
       <ListItem className={classes.listItem}>
+        <img src="https://1.bp.blogspot.com/-J9AsxdwrF-Y/Wn70KyBApaI/AAAAAAAACRo/LTy3zrALzhckryd9QPi_KuVyWvwFMZyMQCLcBGAs/s640/TG.png" width="180px"/>
+      </ListItem>
+      <ListItem className={classes.listItem}>
         <Button
           href="/components"
           color="transparent"
@@ -44,7 +47,10 @@ export default function HeaderLinks(props) {
           }}
           buttonIcon={Apps}
           dropdownList={[
-            <Link href="/service">
+            <Link href="/product">
+              <a className={classes.dropdownLink}>Product</a>
+            </Link>,
+            <Link href="https://booking.thamrin.co.id/">
               <a className={classes.dropdownLink}>Service</a>
             </Link>,
             <Link href="/testdrive">
@@ -105,7 +111,7 @@ export default function HeaderLinks(props) {
             <Link href="http://www.emilia-hotel.com/">
               <a className={classes.dropdownLink}>Hotel Emilia</a>
             </Link>,
-            <Link href="https://www.hino.co.id/">
+            <Link href="http://homes.thamrin.xyz/">
               <a className={classes.dropdownLink}>Thamrin Home</a>
             </Link>,
             <Link href="https://www.hino.co.id/">
@@ -120,7 +126,7 @@ export default function HeaderLinks(props) {
         </Button>
       </ListItem>
       <ListItem className={classes.listItem}>
-        <Button color="transparent" className={classes.navLink}>
+        <Button href="/chart" color="transparent" className={classes.navLink}>
           <Chart className={classes.icons} />
         </Button>
       </ListItem>
@@ -131,7 +137,7 @@ export default function HeaderLinks(props) {
           color="info"
           round
         >
-          Login / Register
+          Login
         </Button>
       </ListItem>
     </List>

components/PageChange/PageChange.js

@@ -40,7 +40,7 @@ export default function PageChange(props) {
           <CircularProgress className={classes.progress} />
         </div>
         <h4 className={classes.title}>
-          Loading page contents for: {props.path}
+          Thamrin Group
         </h4>
       </div>
     </div>

config/apollo-config.js

@@ -0,0 +1,6 @@
+// Apollo Value Configuration
+const ApolloConfig = {
+  graphql_uri: process.env.GRAPHQL_URI,
+};
+
+export default ApolloConfig;

lib/apollo.js

@@ -0,0 +1,68 @@
+import {
+  ApolloClient,
+  InMemoryCache,
+  gql,
+  useQuery,
+  createHttpLink,
+} from "@apollo/client";
+import { createUploadLink } from "apollo-upload-client";
+import ApolloConfig from "../config/apollo-config";
+
+function initApollo(token) {
+  const httpLink = createUploadLink({
+    uri: ApolloConfig.graphql_uri,
+    headers:
+      token != ""
+        ? {
+            Authorization: `Bearer ${token}`,
+          }
+        : null,
+  });
+  return new ApolloClient({
+    ssrMode: false,
+    cache: new InMemoryCache({
+      addTypename: false,
+    }),
+    link: httpLink,
+  });
+}
+
+async function query(query, token = "", variables = {}, cache = false) {
+  const client = initApollo(token);
+  var res;
+  try {
+    var sql = await client.query({
+      query: gql`
+        ${query}
+      `,
+      variables: variables,
+      fetchPolicy: cache ? "cache-first" : "no-cache",
+    });
+    res = { STATUS: 1, DATA: sql.data };
+  } catch (e) {
+    res = { STATUS: 0, DATA: e };
+  }
+  return res;
+}
+
+async function mutation(mutation, token = "", variables = {}) {
+  const client = initApollo(token);
+  var res;
+  try {
+    var sql = await client.mutate({
+      mutation: gql`
+        ${mutation}
+      `,
+      variables: variables,
+    });
+    res = { STATUS: 1, DATA: sql.data };
+  } catch (e) {
+    res = { STATUS: 0, DATA: e };
+  }
+  return res;
+}
+
+module.exports = {
+  query: query,
+  mutation: mutation,
+};

next.config.js

@@ -3,10 +3,15 @@ const withImages = require("next-images");
 const withSass = require("@zeit/next-sass");
 const webpack = require("webpack");
 const path = require("path");
+require('dotenv').config()
 
 module.exports = withPlugins([[withSass], [withImages]], {
+  env: {
+    API_URL: process.env.API_URL
+  },
+
   webpack(config, options) {
     config.resolve.modules.push(path.resolve("./"));
     return config;
   }
-});
+});

package.json

@@ -36,7 +36,9 @@
     "@material-ui/core": "4.9.13",
     "@material-ui/icons": "4.9.1",
     "@zeit/next-sass": "1.0.1",
+    "apollo": "^2.32.1",
     "classnames": "2.2.6",
+    "dotenv": "^8.2.0",
     "mdbreact": "^5.0.1",
     "moment": "2.25.3",
     "next": "9.3.6",
@@ -54,6 +56,8 @@
     "react-swipeable-views": "0.13.9",
     "rsuite": "^4.8.6",
     "styled-components": "5.1.0",
-    "webpack": "4.43.0"
+    "webpack": "4.43.0",
+    "apollo-upload-client": "^14.1.3",
+    "graphql": "^15.3.0"
   }
 }

pages-sections/Components-Sections/SectionAboutUs.js

@@ -1,35 +1,34 @@
 import React from "react";
-// nodejs library that concatenates classes
-import classNames from "classnames";
+
 // @material-ui/core components
 import { makeStyles } from "@material-ui/core/styles";
-// @material-ui/icons
-import Dashboard from "@material-ui/icons/Dashboard";
-import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore";
 
-import GridContainer from "components/Grid/GridContainer.js";
-import GridItem from "components/Grid/GridItem.js";
-import NavPills from "components/NavPills/NavPills.js";
+// component
+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 CardFooter from "components/Card/CardFooter.js";
-import Button from "components/CustomButtons/Button.js";
 
-import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
 
 const useStyles = makeStyles(styles);
 
-export default function ProfilePage(props) {
+export default function SectionNotifications() {
   const classes = useStyles();
-  const { ...rest } = props;
-  const imageClasses = classNames(
-    classes.imgRaised,
-    classes.imgRoundedCircle,
-    classes.imgFluid
-  );
-  const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
   return (
-      <h1>About Us Page</h1>
+    <div>
+    <Card align="center" style={{padding:"5px"}}>
+      <img className={classes.imgCardTop} src="http://3.bp.blogspot.com/-_dTNAAE-TMY/VL3Zyiti2OI/AAAAAAAAAT0/YSd7Ok_3I0k/s1600/Thamrin-brother-loker.png"/>
+      <CardBody>
+        <h1 className={classes.cardTitle}><b>About Us</b></h1>
+        <p>Thamrin Group adalah perusahaan terkemuka di Sumatera Selatan & Bengkulu dengan fokus bisnis pada sektor otomotif dan properti</p>
+        <h3>Visi</h3>
+        <p>Berdampak bagi masyarakat melalui SDM yang dimiliki, pelayanan prima & pengembangan usaha secara berkelanjutan dengan membangun perusahaan yang terpercaya & memiliki reputasi yang baik</p>
+        <h3>Misi</h3>
+        <p>1. Melayani 21,7 juta pelanggan di tahun 2022</p>
+        <p>2. Mengembangkan pemimpin yang sukses</p>
+        <p>3. Mengelola proses administrasi yang simple & excellent</p>
+        <p>4. Mendukung continuous improvement</p>
+      </CardBody>
+    </Card>
+  </div>
   );
 }

pages-sections/Components-Sections/SectionCarrer.js

@@ -1,12 +1,16 @@
 import React from "react";
+
 // nodejs library that concatenates classes
 import classNames from "classnames";
+
 // @material-ui/core components
 import { makeStyles } from "@material-ui/core/styles";
+
 // @material-ui/icons
 import Dashboard from "@material-ui/icons/Dashboard";
 import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore";
 
+// Component
 import GridContainer from "components/Grid/GridContainer.js";
 import GridItem from "components/Grid/GridItem.js";
 import NavPills from "components/NavPills/NavPills.js";
@@ -15,7 +19,6 @@ import CardBody from "components/Card/CardBody.js";
 import CardHeader from "components/Card/CardHeader.js";
 import CardFooter from "components/Card/CardFooter.js";
 import Button from "components/CustomButtons/Button.js";
-
 import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
 
 const useStyles = makeStyles(styles);
@@ -30,6 +33,72 @@ export default function ProfilePage(props) {
   );
   const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
   return (
-      <h1>Carrer Page</h1>
+    <Card className={classes.textCenter}>
+    <div align="center">
+      <CardHeader color="info">Thamrin Group Carrer</CardHeader>
+    </div>
+    <CardBody>
+      <div align="center">
+        <h2>Carrer & Job Vacancies</h2>
+      </div>
+      <GridContainer justify="center">
+        <GridItem>
+          <NavPills
+            alignCenter
+            color="primary"
+            tabs={[
+              {
+                tabButton: "S1 & D3",
+                tabIcon: Dashboard,
+                tabContent: (
+                  <GridContainer justify="center">
+                  </GridContainer>
+                ),
+              },
+              {
+                tabButton: "SMA / SMK / MA",
+                tabIcon: Dashboard,
+                tabContent: (
+                  <GridContainer justify="center">
+                    
+                  </GridContainer>
+                ),
+              },
+              {
+                tabButton: "Information",
+                tabIcon: Dashboard,
+                tabContent: (
+                  <GridContainer justify="center">
+
+                  </GridContainer>
+                ),
+              },
+              {
+                tabButton: "Reqruitment Process",
+                tabIcon: Dashboard,
+                tabContent: (
+                  <GridContainer justify="center">
+                    <GridItem>
+                    <div align="center">
+                      <img
+                        alt="..."
+                        style={{ width: "1000px", height: "800px", display: "block" }}
+                        src=" https://www.yamaha-motor.co.id/uploads/career/big_img/5d305eca19dfb8171.jpg"
+                        className={navImageClasses}
+                      />
+                    </div>
+                    </GridItem>
+                  </GridContainer>
+                ),
+              },
+            ]}
+          />
+        </GridItem>
+      </GridContainer>
+    </CardBody>
+    <CardFooter className={classes.textMuted} textAlign="center">
+      © 2020 , All Right Reserved by @Thamrin Brother Company
+    </CardFooter>
+  </Card>
   );
 }

pages-sections/Components-Sections/SectionChart.js

@@ -0,0 +1,46 @@
+import React from "react";
+// nodejs library that concatenates classes
+import classNames from "classnames";
+// @material-ui/core components
+import { makeStyles } from "@material-ui/core/styles";
+// @material-ui/icons
+import Dashboard from "@material-ui/icons/Dashboard";
+import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore";
+
+import GridContainer from "components/Grid/GridContainer.js";
+import GridItem from "components/Grid/GridItem.js";
+import NavPills from "components/NavPills/NavPills.js";
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import CardHeader from "components/Card/CardHeader.js";
+import CardFooter from "components/Card/CardFooter.js";
+
+import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
+
+const useStyles = makeStyles(styles);
+
+export default function ProfilePage(props) {
+  const classes = useStyles();
+  const { ...rest } = props;
+  const imageClasses = classNames(
+    classes.imgRaised,
+    classes.imgRoundedCircle,
+    classes.imgFluid
+  );
+  const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
+  return (
+    <Card className={classes.textCenter}>
+      <div align="center">
+        <CardHeader color="info">Home</CardHeader>
+      </div>
+      <CardBody>
+        <div align="center">
+          <h2>Dashboard</h2>
+        </div>
+      </CardBody>
+      <CardFooter className={classes.textMuted} textAlign="center">
+        © 2020 , All Right Reserved by @Thamrin Brother Company
+      </CardFooter>
+    </Card>
+  );
+}

pages-sections/Components-Sections/SectionContent.js

@@ -1,701 +1,250 @@
 import React from "react";
-// nodejs library that concatenates classes
-import classNames from "classnames";
+
 // @material-ui/core components
 import { makeStyles } from "@material-ui/core/styles";
-// @material-ui/icons
-import Dashboard from "@material-ui/icons/Dashboard";
-import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore";
 
+// Component
+import SnackbarContent from "components/Snackbar/SnackbarContent.js";
+import Clearfix from "components/Clearfix/Clearfix.js";
+import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
 import GridContainer from "components/Grid/GridContainer.js";
 import GridItem from "components/Grid/GridItem.js";
-import NavPills from "components/NavPills/NavPills.js";
-import Card from "components/Card/Card.js";
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
 import CardBody from "components/Card/CardBody.js";
-import CardHeader from "components/Card/CardHeader.js";
-import CardFooter from "components/Card/CardFooter.js";
+import Card from "components/Card/Card.js";
 import Button from "components/CustomButtons/Button.js";
 
-import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
+// react component for creating beautiful carousel
+import Carousel from "react-slick";
+
+// @material-ui/icons
+import LocationOn from "@material-ui/icons/LocationOn";
+
+import image1 from "assets/img/bg.jpg";
+import image2 from "assets/img/bg2.png";
+import image3 from "assets/img/bg3.jpg";
+// import "assets/css/hover.css";
+
+// import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/carouselStyle.js";
+
 
 const useStyles = makeStyles(styles);
 
-export default function ProfilePage(props) {
+function SectionNotifications(props) {
   const classes = useStyles();
-  const { ...rest } = props;
-  const imageClasses = classNames(
-    classes.imgRaised,
-    classes.imgRoundedCircle,
-    classes.imgFluid
-  );
-  const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
+  const settings = {
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    autoplay: false
+  };
   return (
-    <Card className={classes.textCenter}>
+    <div className={classes.section} id="notifications">
+      <SnackbarContent
+        message={
+          <span>
+            <b>Thamrin Group</b> bersama Anda melawan COVID-19. Untuk informasi silakan klik di sini. 
+          </span>
+        }
+        align="center"
+        color="danger"
+        icon="info_outline"
+      />
+      <Clearfix />
+      <div className={classes.section}>
+        <div className={classes.container}>
+          <GridContainer>
+            <GridItem className={classes.marginAuto}>
+              <Card carousel>
+                <Carousel {...settings}>
+                  <div>
+                    <img src={image1} alt="First slide" className="slick-image" />
+                  </div>
+                  <div>
+                    <img src={image2} alt="Second slide" className="slick-image"/>
+                  </div>
+                  <div>
+                    <img src={image3} alt="Third slide" className="slick-image" />
+                  </div>
+                </Carousel>
+              </Card>
+            </GridItem>
+          </GridContainer>
+        </div>
+      </div>
       <div align="center">
-        <CardHeader color="info">Product</CardHeader>
+          <h2>Our Service</h2>
       </div>
-      <CardBody>
-        <div align="center">
-          <h2>Product & Facilities</h2>
-        </div>
-        <GridContainer justify="center">
-          <GridItem>
-            <NavPills
-              alignCenter
-              color="primary"
-              tabs={[
-                {
-                  tabButton: "Matic",
-                  tabIcon: Dashboard,
-                  tabContent: (
-                    <GridContainer justify="center">
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{ height: "350px", display: "block" }}
-                          src="https://www.yamaha-motor.co.id/uploads/products/2020020510350637523I93808.png"
-                          className={navImageClasses}
-                        />
-                        <div align="center">
-                          <h2>ALL NEW NMAX STANDART VERSION</h2>
-                          <h4>Rp.30.000.000,00 – Rp.37.692.000,00</h4>
-                          <Button color="info" round>
-                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
-                            Buy
-                          </Button>
-                        </div>
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{ height: "350px", display: "block" }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-Std-Htm.png"
-                          className={navImageClasses}
-                        />
-                        <div align="center">
-                          <h2>AEROX 155 VVA</h2>
-                          <h4>Rp.25.927.000,00</h4>
-                          <Button color="info" round>
-                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
-                            Buy
-                          </Button>
-                        </div>
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-R-Version.png"
-                          className={navImageClasses}
-                        />
-                        <div align="center">
-                          <h2>AEROX 155 VVA R – VERSION</h2>
-                          <h4>Rp.27.110.000,00</h4>
-                          <Button color="info" round>
-                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
-                            Buy
-                          </Button>
-                        </div>
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-S-Ver-Red.png"
-                          className={navImageClasses}
-                        />
-                        <div align="center">
-                          <h2>AEROX 155 VVA S – VERSION</h2>
-                          <h4>Rp.29.744.000,00</h4>
-                          <Button color="info" round>
-                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
-                            Buy
-                          </Button>
-                        </div>
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="https://i0.wp.com/warungasep.net/wp-content/uploads/2020/02/view-1.png"
-                          className={navImageClasses}
-                        />
-                        <div align="center">
-                          <h2>NMAX ABS / NON ABS 155</h2>
-                          <h4>Rp.29.571.000,00 – Rp.33.267.000,00</h4>
-                          <Button color="info" round>
-                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
-                            Buy
-                          </Button>
-                        </div>
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Sporty-Blue-768x744.png"
-                          className={navImageClasses}
-                        />
-                        <div align="center">
-                          <h2>FINO 125 SPORTY / PREMIUM</h2>
-                          <h4>Rp.19.335.000,00</h4>
-                          <Button color="info" round>
-                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
-                            Buy
-                          </Button>
-                        </div>
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Grande-Blue-768x744.png"
-                          className={navImageClasses}
-                        />
-                        <div align="center">
-                          <h2>FINO GRANDE 125</h2>
-                          <h4>Rp.20.155.000,00</h4>
-                          <Button color="info" round>
-                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
-                            Buy
-                          </Button>
-                        </div>
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-S-Green-768x703.png"
-                          className={navImageClasses}
-                        />
-                        <div align="center">
-                          <h2>MIO S</h2>
-                          <h4>Rp.18.472.000,00</h4>
-                          <Button color="info" round>
-                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
-                            Buy
-                          </Button>
-                        </div>
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-M3-CW-Black-768x649.png"
-                          className={navImageClasses}
-                        />
-                        <div align="center">
-                          <h2>NEW MIO M3 125 CW</h2>
-                          <h4>Rp.17.903.000,00</h4>
-                          <Button color="info" round>
-                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
-                            Buy
-                          </Button>
-                        </div>
-                      </GridItem>
-                    </GridContainer>
-                  ),
-                },
-                {
-                  tabButton: "Sport",
-                  tabIcon: Dashboard,
-                  tabContent: (
-                    <GridContainer justify="center">
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{ height: "350px", display: "block" }}
-                          src="https://motor.jasasitus.com/wp-content/uploads/2018/11/mio-m3-black.png"
-                          className={navImageClasses}
-                        />
-                        <div align="center">
-                          <h2>NEW MIO M3 AKS SSS</h2>
-                          <h4>Rp. 18.000.000,00</h4>
-                          <Button color="info" round>
-                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
-                            Buy
-                          </Button>
-                        </div>
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{ height: "350px", display: "block" }}
-                          src="https://yamaha-berlian-merdeka.com/wp-content/uploads/2018/12/5-1.png"
-                          className={navImageClasses}
-                        />
-                        <div align="center">
-                          <h2>ALL NEW X-RIDE 125</h2>
-                          <h4>Rp. 19.250.000,00</h4>
-                          <Button color="info" round>
-                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
-                            Buy
-                          </Button>
-                        </div>
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="https://www.yamaha-motor.co.id/uploads/products/HqVh2xkCTQ2NsYoo3O0M.png"
-                          className={navImageClasses}
-                        />
-                        <div align="center">
-                          <h2>MIO Z</h2>
-                          <h4>Rp. 17.570.000,00</h4>
-                          <Button color="info" round>
-                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
-                            Buy
-                          </Button>
-                        </div>
-                      </GridItem>
-                    </GridContainer>
-                  ),
-                },
-                {
-                  tabButton: "Moped",
-                  tabIcon: Dashboard,
-                  tabContent: (
-                    <GridContainer justify="center">
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{ height: "350px", display: "block" }}
-                          src="https://image.cermati.com/v1553589176/f2xpfpfmjf2vnpoesrgf.png"
-                          className={navImageClasses}
-                        />
-                        <div align="center">
-                          <h2>MX KING 150</h2>
-                          <h4>Rp. 23.425.000,00</h4>
-                          <Button color="info" round>
-                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
-                            Buy
-                          </Button>
-                        </div>
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{ height: "350px", display: "block" }}
-                          src="https://www.yamaha-motor.co.id/uploads/products/ih2AfZY3h4qhAdKQonpJ.png"
-                          className={navImageClasses}
-                        />
-                        <div align="center">
-                          <h2>NEW JUPITER MX 150</h2>
-                          <h4>Rp. 20.825.000,00</h4>
-                          <Button color="info" round>
-                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
-                            Buy
-                          </Button>
-                        </div>
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="https://d2pa5gi5n2e1an.cloudfront.net/id/images/article/10721_ID/2.jpg"
-                          className={navImageClasses}
-                        />
-                        <div align="center">
-                          <h2>JUPITER Z1</h2>
-                          <h4>Rp. 18.600.000,00</h4>
-                          <Button color="info" round>
-                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
-                            Buy
-                          </Button>
-                        </div>
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="https://yamaha-deta.co.id/assets/themes/default/extra-images/detailproduk/ENERGETIC_WHITE.png"
-                          className={navImageClasses}
-                        />
-                        <div align="center">
-                          <h2>VEGA FORCE CW</h2>
-                          <h4>Rp. 16.825.000,00</h4>
-                          <Button color="info" round>
-                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
-                            Buy
-                          </Button>
-                        </div>
-                      </GridItem>
-                    </GridContainer>
-                  ),
-                },
-                {
-                  tabButton: "CBU",
-                  tabIcon: Dashboard,
-                  tabContent: (
-                    <GridContainer justify="center">
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{ height: "350px", display: "block" }}
-                          src="https://www.yamaha-motor.co.id/uploads/products/2020020510350637523I93808.png"
-                          className={navImageClasses}
-                        />
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{ height: "350px", display: "block" }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-Std-Htm.png"
-                          className={navImageClasses}
-                        />
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-R-Version.png"
-                          className={navImageClasses}
-                        />
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-S-Ver-Red.png"
-                          className={navImageClasses}
-                        />
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="https://i0.wp.com/warungasep.net/wp-content/uploads/2020/02/view-1.png"
-                          className={navImageClasses}
-                        />
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Sporty-Blue-768x744.png"
-                          className={navImageClasses}
-                        />
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Grande-Blue-768x744.png"
-                          className={navImageClasses}
-                        />
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-S-Green-768x703.png"
-                          className={navImageClasses}
-                        />
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-M3-CW-Black-768x649.png"
-                          className={navImageClasses}
-                        />
-                      </GridItem>
-                    </GridContainer>
-                  ),
-                },
-                {
-                  tabButton: "Sparepart",
-                  tabIcon: Dashboard,
-                  tabContent: (
-                    <GridContainer justify="center">
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{ height: "350px", display: "block" }}
-                          src="https://www.yamaha-motor.co.id/uploads/products/2020020510350637523I93808.png"
-                          className={navImageClasses}
-                        />
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{ height: "350px", display: "block" }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-Std-Htm.png"
-                          className={navImageClasses}
-                        />
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-R-Version.png"
-                          className={navImageClasses}
-                        />
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-S-Ver-Red.png"
-                          className={navImageClasses}
-                        />
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="https://i0.wp.com/warungasep.net/wp-content/uploads/2020/02/view-1.png"
-                          className={navImageClasses}
-                        />
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Sporty-Blue-768x744.png"
-                          className={navImageClasses}
-                        />
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Grande-Blue-768x744.png"
-                          className={navImageClasses}
-                        />
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-S-Green-768x703.png"
-                          className={navImageClasses}
-                        />
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-M3-CW-Black-768x649.png"
-                          className={navImageClasses}
-                        />
-                      </GridItem>
-                    </GridContainer>
-                  ),
-                },
-                {
-                  tabButton: "Aksesoris",
-                  tabIcon: Dashboard,
-                  tabContent: (
-                    <GridContainer justify="center">
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{ height: "350px", display: "block" }}
-                          src="https://www.yamaha-motor.co.id/uploads/products/2020020510350637523I93808.png"
-                          className={navImageClasses}
-                        />
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{ height: "350px", display: "block" }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-Std-Htm.png"
-                          className={navImageClasses}
-                        />
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-R-Version.png"
-                          className={navImageClasses}
-                        />
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-S-Ver-Red.png"
-                          className={navImageClasses}
-                        />
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="https://i0.wp.com/warungasep.net/wp-content/uploads/2020/02/view-1.png"
-                          className={navImageClasses}
-                        />
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Sporty-Blue-768x744.png"
-                          className={navImageClasses}
-                        />
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Grande-Blue-768x744.png"
-                          className={navImageClasses}
-                        />
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-S-Green-768x703.png"
-                          className={navImageClasses}
-                        />
-                      </GridItem>
-                      <GridItem xs={12} sm={12} md={4}>
-                        <img
-                          alt="..."
-                          style={{
-                            height: "350px",
-                            width: "100%",
-                            display: "block",
-                          }}
-                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-M3-CW-Black-768x649.png"
-                          className={navImageClasses}
-                        />
-                      </GridItem>
-                    </GridContainer>
-                  ),
-                },
-              ]}
-            />
-          </GridItem>
-        </GridContainer>
-      </CardBody>
-      <CardFooter className={classes.textMuted} textAlign="center">
-        © 2020 , All Right Reserved by @Thamrin Brother Company
-      </CardFooter>
-    </Card>
+      <GridContainer justify="center">
+        <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
+          <Paper className={classes.paper}>
+            <Card style={{width: "20rem"}}>
+              <img
+                style={{height: "180px", width: "100%", padding:"20px", display: "block"}}
+                className={classes.imgCardTop}
+                src="https://www.odtap.com/wp-content/uploads/2019/03/delivery.png"
+              />
+            </Card>
+          </Paper>
+        </Grid>        
+        <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
+          <Paper className={classes.paper}>
+            <Card style={{width: "20rem"}}>
+              <img
+                style={{height: "180px", width: "100%", padding:"20px", display: "block"}}
+                className={classes.imgCardTop}
+                src="https://i.pinimg.com/736x/fa/22/a1/fa22a1196ecc812fa57366ccf6e1596b.jpg"
+                alt="Card-img-cap"
+              />
+            </Card>
+          </Paper>
+        </Grid>
+        <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
+          <Paper className={classes.paper}>
+            <Card style={{width: "20rem"}}>
+              <img
+                style={{height: "180px", width: "100%", padding:"20px", display: "block"}}
+                className={classes.imgCardTop}
+                src="https://cdn-ds.com/media/3402/shopper-assurance-logo.png"
+                alt="Card-img-cap"
+              />
+            </Card>
+          </Paper>
+        </Grid>
+      </GridContainer>
+      <div align="center">
+          <h2>Our Business Partner</h2>
+      </div>
+      <GridContainer justify="center">
+        <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
+          <Paper className={classes.paper}>
+            <Card style={{width: "20rem"}}>
+              <div align="center">
+              <img
+                style={{height: "180px", width: "300px", display: "block"}}
+                className={classes.imgCardTop}
+                src="https://imgx.gridoto.com/crop/31x4:629x377/750x500/photo/2020/06/28/829813812.jpg"
+              />
+              </div>
+            </Card>
+          </Paper>
+        </Grid>        
+        <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
+          <Paper className={classes.paper}>
+            <Card style={{width: "20rem"}}>
+              <div align="center">
+              <img
+                style={{height: "180px", width: "270px", display: "block"}}
+                className={classes.imgCardTop}
+                src="https://i.pinimg.com/originals/64/e7/73/64e773194975e702677c5089fc6c8ae2.png"
+                alt="Card-img-cap"
+              />
+              </div>
+            </Card>
+          </Paper>
+        </Grid>
+        <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
+          <Paper className={classes.paper}>
+            <Card style={{width: "20rem"}}>
+            <div align="center">
+              <img
+                style={{height: "180px", width: "270px", padding:"20px", display: "block"}}
+                className={classes.imgCardTop}
+                src="https://upload.wikimedia.org/wikipedia/id/d/d5/Honda-logo.png"
+                alt="Card-img-cap"
+              />
+              </div>
+            </Card>
+          </Paper>
+        </Grid>
+        <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
+          <Paper className={classes.paper}>
+            <Card style={{width: "20rem"}}>
+              <div align="center">
+              <img
+                style={{height: "180px", width: "200px", padding:"20px", display: "block"}}
+                className={classes.imgCardTop}
+                src="https://i.pinimg.com/originals/1e/12/a3/1e12a32f6f4838188f71eeb6d48ccc55.png"
+                alt="Card-img-cap"
+              />
+              </div>
+            </Card>
+          </Paper>
+        </Grid>
+        <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
+          <Paper className={classes.paper}>
+            <Card style={{width: "20rem"}}>
+              <div align="center">
+              <img
+                style={{height: "180px", width: "200px", padding:"20px", display: "block"}}
+                className={classes.imgCardTop}
+                src="https://3.bp.blogspot.com/-hUQJabKTGCg/WfcN66wVQCI/AAAAAAAAAxU/OW8hrgMH6nA-XyYkg6Pt6fNYmbpzY4noACLcBGAs/s1600/softskill.png"
+              />
+              </div>
+            </Card>
+          </Paper>
+        </Grid>        
+        <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
+          <Paper className={classes.paper}>
+            <Card style={{width: "20rem"}}>
+              <div align="center">
+              <img
+                style={{height: "180px", width: "300px", padding:"20px", display: "block"}}
+                className={classes.imgCardTop}
+                src="http://bprberkatsejati.com/wp-content/uploads/2019/03/cover1.jpg"
+                alt="Card-img-cap"
+              />
+              </div>
+            </Card>
+          </Paper>
+        </Grid>
+        <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
+          <Paper className={classes.paper}>
+            <Card style={{width: "20rem"}}>
+              <div align="center">
+              <img
+                style={{height: "180px", width: "250px", padding:"20px", display: "block"}}
+                className={classes.imgCardTop}
+                src="https://d5b1dwptmw1mf.cloudfront.net/uploads/malls/logo/L1_w_dvWvn_1lsCh-palembang-indah-mall-1479113878_1.jpg"
+                alt="Card-img-cap"
+              />
+              </div>
+            </Card>
+          </Paper>
+        </Grid>
+        <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
+          <Paper className={classes.paper}>
+            <Card style={{width: "20rem"}}>
+              <div align="center">
+              <img
+                style={{height: "180px", width: "330px", padding:"20px", display: "block"}}
+                className={classes.imgCardTop}
+                src="https://lh3.googleusercontent.com/proxy/5AktadKOHE-SrymxW0Ffgw4P_eKgXjNsuSs9mpTHAfYbm5UMfdbT3vefgtxA8NnbJEUdMYdj5kpQolEu5r-938-T9sHM6ApF1M_k1DgloSP0d7kL5Qeoi_-e6lIuwYa2XR8"
+                alt="Card-img-cap"
+              />
+              </div>
+            </Card>
+          </Paper>
+        </Grid>
+        <Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
+          <Paper className={classes.paper}>
+            <Card style={{width: "20rem"}}>
+              <div align="center">
+              <img
+                style={{height: "180px", width: "330px", padding:"20px", display: "block"}}
+                className={classes.imgCardTop}
+                src="https://3.bp.blogspot.com/-NFjgD_eGwy8/Wn70CKGh5QI/AAAAAAAACRg/7fAzLraWggwc5HJU-KVJUrKYAnKQ52VWgCLcBGAs/s1600/Thamrin%2BHomes.png"
+              />
+              </div>
+            </Card>
+          </Paper>
+        </Grid>     
+      </GridContainer>
+    </div>
   );
 }
+
+export default SectionNotifications;

pages-sections/Components-Sections/SectionLatestNews.js

@@ -1,35 +1,159 @@
 import React from "react";
-// nodejs library that concatenates classes
-import classNames from "classnames";
+
 // @material-ui/core components
 import { makeStyles } from "@material-ui/core/styles";
-// @material-ui/icons
-import Dashboard from "@material-ui/icons/Dashboard";
-import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore";
 
+// component
+import SnackbarContent from "components/Snackbar/SnackbarContent.js";
+import Clearfix from "components/Clearfix/Clearfix.js";
+import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
+import Paper from '@material-ui/core/Paper';
+import Grid from '@material-ui/core/Grid';
 import GridContainer from "components/Grid/GridContainer.js";
-import 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 Paginations from "components/Pagination/Pagination.js";
 
 const useStyles = makeStyles(styles);
 
-export default function ProfilePage(props) {
+export default function SectionNotifications() {
   const classes = useStyles();
-  const { ...rest } = props;
-  const imageClasses = classNames(
-    classes.imgRaised,
-    classes.imgRoundedCircle,
-    classes.imgFluid
-  );
-  const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
   return (
-      <h1>Latest News Page</h1>
+    <div className={classes.section} id="notifications">
+      <SnackbarContent
+        message={
+          <span>
+            <b>Thamrin Group</b> bersama Anda melawan COVID-19. Untuk informasi silakan klik di sini. 
+          </span>
+        }
+        align="center"
+        color="danger"
+        icon="info_outline"
+      />
+      <Clearfix />
+      <div align="center">
+          <h2>Latest News</h2>
+      </div>
+      <GridContainer justify="center">
+        <Grid align="center" style={{padding:"5px"}}>
+          <Paper className={classes.paper}>
+            <Card style={{width: "20rem"}}>
+              <img
+                style={{height: "180px", width: "100%", display: "block"}}
+                className={classes.imgCardTop}
+                src="https://www.yamaha-motor.co.id/uploads/content/2021012915132285551O25635.jpg"
+              />
+              <CardBody>
+                <h4 className={classes.cardTitle}>Dance Seru sambil Menang Banyak? Yuk...</h4>
+                <p>Jakarta – Let’s Gear Up! PT Yamaha Indonesia Motor Manufacturing (PT YIMM) mengajak para generasi muda...</p>
+                <Button color="info">Read More</Button>
+              </CardBody>
+            </Card>
+          </Paper>
+        </Grid>        
+        <Grid align="center" style={{padding:"5px"}}>
+          <Paper className={classes.paper}>
+            <Card style={{width: "20rem"}}>
+              <img
+                style={{height: "180px", width: "100%", display: "block"}}
+                className={classes.imgCardTop}
+                src="https://www.yamaha-motor.co.id/uploads/content/2021012810494925493U23162.jpg"
+                alt="Card-img-cap"
+              />
+              <CardBody>
+                <h4 className={classes.cardTitle}>Makin Agresif, Ini Warna Baru MT-25 !</h4>
+                <p>Makin Agresif, Ini Warna Baru MT-25 ! Yamaha gencar melakukan penyegaran produk-produknya...</p>
+                <Button color="info">Read More</Button>
+              </CardBody>
+            </Card>
+          </Paper>
+        </Grid>
+        <Grid align="center" style={{padding:"5px"}}>
+          <Paper className={classes.paper}>
+            <Card style={{width: "20rem"}}>
+              <img
+                style={{height: "180px", width: "100%", display: "block"}}
+                className={classes.imgCardTop}
+                src="https://www.yamaha-motor.co.id/uploads/content/2021012716374767982G99280.jpg"
+                alt="Card-img-cap"
+              />
+              <CardBody>
+                <h4 className={classes.cardTitle}>Awal Tahun 2021, Yamaha Fino 125 Sporty Tampil... </h4>
+                <p>Jakarta – Melanjutkan penyegaran warna baru pada Yamaha Fino 125 Premium sebelumnya, kini saatnya...</p>
+                <Button color="info">Read More</Button>
+              </CardBody>
+            </Card>
+          </Paper>
+        </Grid>
+        <Grid align="center" style={{padding:"5px"}}>
+          <Paper className={classes.paper}>
+            <Card style={{width: "20rem"}}>
+              <img
+                style={{height: "180px", width: "100%", display: "block"}}
+                className={classes.imgCardTop}
+                src="https://www.yamaha-motor.co.id/uploads/content/2021011912521629671C71533.jpg"
+                alt="Card-img-cap"
+              />
+              <CardBody>
+                <h4 className={classes.cardTitle}>Ini Warna Baru Yamaha R15 !</h4>
+                <p>Tahun 2021 baru bergulir, Yamaha sudah memanjakan konsumen dengan melansir warna teranyar...</p>
+                <Button color="info">Read More</Button>
+              </CardBody>
+            </Card>
+          </Paper>
+        </Grid>        
+        <Grid align="center" style={{padding:"5px"}}>
+          <Paper className={classes.paper}>
+            <Card style={{width: "20rem"}}>
+              <img
+                style={{height: "180px", width: "100%", display: "block"}}
+                className={classes.imgCardTop}
+                src="https://www.yamaha-motor.co.id/uploads/content/202101141322331084Z7315.jpg"
+                alt="Card-img-cap"
+              />
+              <CardBody>
+                <h4 className={classes.cardTitle}>Awal Tahun 2021, MX King 150 Warna Baru Meluncur </h4>
+                <p>Awal tahun 2021 ini dibuka Yamaha dengan merilis warna baru MX King 150 yang kian menonjolkan tampilan...</p>
+                <Button color="info">Read More</Button>
+              </CardBody>
+            </Card>
+          </Paper>
+        </Grid>
+        <Grid align="center" style={{padding:"5px"}}>
+          <Paper className={classes.paper}>
+            <Card style={{width: "20rem"}}>
+              <img
+                style={{height: "180px", width: "100%", display: "block"}}
+                className={classes.imgCardTop}
+                src="https://www.yamaha-motor.co.id/uploads/content/2020121515490320942H80353.jpg"
+                alt="Card-img-cap"
+              />
+              <CardBody>
+                <h4 className={classes.cardTitle}>Semakin Sporty, Yamaha Luncurkan All New...</h4>
+                <p>Jakarta – Sebagai wujud apresiasi terhadap pecinta MotoGP di Indonesia dan semangat sportifitas MotoGP...</p>
+                <Button color="info">Read More</Button>
+              </CardBody>
+            </Card>
+          </Paper>
+        </Grid>
+      </GridContainer>
+      <div align="center">
+      <Paginations
+        color="info"
+        pages={[
+          { text: 1 },
+          { text: "..." },
+          { text: 5 },
+          { text: 6 },
+          { active: true, text: 7 },
+          { text: 8 },
+          { text: 9 },
+          { text: "..." },
+          { text: 12 }
+        ]}
+      />
+      </div>
+    </div>
   );
 }

pages-sections/Components-Sections/SectionProduct.js

@@ -0,0 +1,491 @@
+import React from "react";
+
+// nodejs library that concatenates classes
+import classNames from "classnames";
+
+// @material-ui/core components
+import { makeStyles } from "@material-ui/core/styles";
+
+// @material-ui/icons
+import Dashboard from "@material-ui/icons/Dashboard";
+import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore";
+
+// Component
+import GridContainer from "components/Grid/GridContainer.js";
+import GridItem from "components/Grid/GridItem.js";
+import NavPills from "components/NavPills/NavPills.js";
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import CardHeader from "components/Card/CardHeader.js";
+import CardFooter from "components/Card/CardFooter.js";
+import Button from "components/CustomButtons/Button.js";
+import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
+
+const useStyles = makeStyles(styles);
+
+export default function ProfilePage(props) {
+  const classes = useStyles();
+  const { ...rest } = props;
+  const imageClasses = classNames(
+    classes.imgRaised,
+    classes.imgRoundedCircle,
+    classes.imgFluid
+  );
+  const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
+  return (
+    <Card className={classes.textCenter}>
+      <div align="center">
+        <CardHeader color="info">Product</CardHeader>
+      </div>
+      <CardBody>
+        <div align="center">
+          <h2>Product & Facilities</h2>
+        </div>
+        <GridContainer justify="center">
+          <GridItem>
+            <NavPills
+              alignCenter
+              color="primary"
+              tabs={[
+                {
+                  tabButton: "Yamaha",
+                  tabIcon: Dashboard,
+                  tabContent: (
+                    <GridContainer justify="center">
+                      <GridItem xs={12} sm={12} md={4}>
+                        <img
+                          alt="..."
+                          style={{ height: "350px", display: "block" }}
+                          src="https://www.yamaha-motor.co.id/uploads/products/2020020510350637523I93808.png"
+                          className={navImageClasses}
+                        />
+                        <div align="center">
+                          <h2><a href="/product_detail">ALL NEW NMAX STANDART VERSION</a></h2>
+                          <h4>Rp.30.000.000,00 – Rp.37.692.000,00</h4>
+                          <Button color="info" round>
+                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
+                            Buy
+                          </Button>
+                        </div>
+                      </GridItem>
+                      <GridItem xs={12} sm={12} md={4}>
+                        <img
+                          alt="..."
+                          style={{ height: "350px", display: "block" }}
+                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-Std-Htm.png"
+                          className={navImageClasses}
+                        />
+                        <div align="center">
+                          <h2>AEROX 155 VVA</h2>
+                          <h4>Rp.25.927.000,00</h4>
+                          <Button color="info" round>
+                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
+                            Buy
+                          </Button>
+                        </div>
+                      </GridItem>
+                      <GridItem xs={12} sm={12} md={4}>
+                        <img
+                          alt="..."
+                          style={{
+                            height: "350px",
+                            width: "100%",
+                            display: "block",
+                          }}
+                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-R-Version.png"
+                          className={navImageClasses}
+                        />
+                        <div align="center">
+                          <h2>AEROX 155 VVA R – VERSION</h2>
+                          <h4>Rp.27.110.000,00</h4>
+                          <Button color="info" round>
+                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
+                            Buy
+                          </Button>
+                        </div>
+                      </GridItem>
+                      <GridItem xs={12} sm={12} md={4}>
+                        <img
+                          alt="..."
+                          style={{
+                            height: "350px",
+                            width: "100%",
+                            display: "block",
+                          }}
+                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-S-Ver-Red.png"
+                          className={navImageClasses}
+                        />
+                        <div align="center">
+                          <h2>AEROX 155 VVA S – VERSION</h2>
+                          <h4>Rp.29.744.000,00</h4>
+                          <Button color="info" round>
+                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
+                            Buy
+                          </Button>
+                        </div>
+                      </GridItem>
+                      <GridItem xs={12} sm={12} md={4}>
+                        <img
+                          alt="..."
+                          style={{
+                            height: "350px",
+                            width: "100%",
+                            display: "block",
+                          }}
+                          src="https://i0.wp.com/warungasep.net/wp-content/uploads/2020/02/view-1.png"
+                          className={navImageClasses}
+                        />
+                        <div align="center">
+                          <h2>NMAX ABS / NON ABS 155</h2>
+                          <h4>Rp.29.571.000,00 – Rp.33.267.000,00</h4>
+                          <Button color="info" round>
+                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
+                            Buy
+                          </Button>
+                        </div>
+                      </GridItem>
+                      <GridItem xs={12} sm={12} md={4}>
+                        <img
+                          alt="..."
+                          style={{
+                            height: "350px",
+                            width: "100%",
+                            display: "block",
+                          }}
+                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Sporty-Blue-768x744.png"
+                          className={navImageClasses}
+                        />
+                        <div align="center">
+                          <h2>FINO 125 SPORTY / PREMIUM</h2>
+                          <h4>Rp.19.335.000,00</h4>
+                          <Button color="info" round>
+                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
+                            Buy
+                          </Button>
+                        </div>
+                      </GridItem>
+                      <GridItem xs={12} sm={12} md={4}>
+                        <img
+                          alt="..."
+                          style={{
+                            height: "350px",
+                            width: "100%",
+                            display: "block",
+                          }}
+                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Grande-Blue-768x744.png"
+                          className={navImageClasses}
+                        />
+                        <div align="center">
+                          <h2>FINO GRANDE 125</h2>
+                          <h4>Rp.20.155.000,00</h4>
+                          <Button color="info" round>
+                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
+                            Buy
+                          </Button>
+                        </div>
+                      </GridItem>
+                      <GridItem xs={12} sm={12} md={4}>
+                        <img
+                          alt="..."
+                          style={{
+                            height: "350px",
+                            width: "100%",
+                            display: "block",
+                          }}
+                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-S-Green-768x703.png"
+                          className={navImageClasses}
+                        />
+                        <div align="center">
+                          <h2>MIO S</h2>
+                          <h4>Rp.18.472.000,00</h4>
+                          <Button color="info" round>
+                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
+                            Buy
+                          </Button>
+                        </div>
+                      </GridItem>
+                      <GridItem xs={12} sm={12} md={4}>
+                        <img
+                          alt="..."
+                          style={{
+                            height: "350px",
+                            width: "100%",
+                            display: "block",
+                          }}
+                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-M3-CW-Black-768x649.png"
+                          className={navImageClasses}
+                        />
+                        <div align="center">
+                          <h2>NEW MIO M3 125 CW</h2>
+                          <h4>Rp.17.903.000,00</h4>
+                          <Button color="info" round>
+                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
+                            Buy
+                          </Button>
+                        </div>
+                      </GridItem>
+                      <GridItem xs={12} sm={12} md={4}>
+                        <img
+                          alt="..."
+                          style={{ height: "350px", display: "block" }}
+                          src="https://motor.jasasitus.com/wp-content/uploads/2018/11/mio-m3-black.png"
+                          className={navImageClasses}
+                        />
+                        <div align="center">
+                          <h2>NEW MIO M3 AKS SSS</h2>
+                          <h4>Rp. 18.000.000,00</h4>
+                          <Button color="info" round>
+                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
+                            Buy
+                          </Button>
+                        </div>
+                      </GridItem>
+                      <GridItem xs={12} sm={12} md={4}>
+                        <img
+                          alt="..."
+                          style={{ height: "350px", display: "block" }}
+                          src="https://yamaha-berlian-merdeka.com/wp-content/uploads/2018/12/5-1.png"
+                          className={navImageClasses}
+                        />
+                        <div align="center">
+                          <h2>ALL NEW X-RIDE 125</h2>
+                          <h4>Rp. 19.250.000,00</h4>
+                          <Button color="info" round>
+                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
+                            Buy
+                          </Button>
+                        </div>
+                      </GridItem>
+                      <GridItem xs={12} sm={12} md={4}>
+                        <img
+                          alt="..."
+                          style={{
+                            height: "350px",
+                            width: "100%",
+                            display: "block",
+                          }}
+                          src="https://www.yamaha-motor.co.id/uploads/products/HqVh2xkCTQ2NsYoo3O0M.png"
+                          className={navImageClasses}
+                        />
+                        <div align="center">
+                          <h2>MIO Z</h2>
+                          <h4>Rp. 17.570.000,00</h4>
+                          <Button color="info" round>
+                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
+                            Buy
+                          </Button>
+                        </div>
+                      </GridItem>
+                      <GridItem xs={12} sm={12} md={4}>
+                        <img
+                          alt="..."
+                          style={{ height: "350px", display: "block" }}
+                          src="https://image.cermati.com/v1553589176/f2xpfpfmjf2vnpoesrgf.png"
+                          className={navImageClasses}
+                        />
+                        <div align="center">
+                          <h2>MX KING 150</h2>
+                          <h4>Rp. 23.425.000,00</h4>
+                          <Button color="info" round>
+                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
+                            Buy
+                          </Button>
+                        </div>
+                      </GridItem>
+                      <GridItem xs={12} sm={12} md={4}>
+                        <img
+                          alt="..."
+                          style={{ height: "350px", display: "block" }}
+                          src="https://www.yamaha-motor.co.id/uploads/products/ih2AfZY3h4qhAdKQonpJ.png"
+                          className={navImageClasses}
+                        />
+                        <div align="center">
+                          <h2>NEW JUPITER MX 150</h2>
+                          <h4>Rp. 20.825.000,00</h4>
+                          <Button color="info" round>
+                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
+                            Buy
+                          </Button>
+                        </div>
+                      </GridItem>
+                      <GridItem xs={12} sm={12} md={4}>
+                        <img
+                          alt="..."
+                          style={{
+                            height: "350px",
+                            width: "100%",
+                            display: "block",
+                          }}
+                          src="https://d2pa5gi5n2e1an.cloudfront.net/id/images/article/10721_ID/2.jpg"
+                          className={navImageClasses}
+                        />
+                        <div align="center">
+                          <h2>JUPITER Z1</h2>
+                          <h4>Rp. 18.600.000,00</h4>
+                          <Button color="info" round>
+                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
+                            Buy
+                          </Button>
+                        </div>
+                      </GridItem>
+                      <GridItem xs={12} sm={12} md={4}>
+                        <img
+                          alt="..."
+                          style={{
+                            height: "350px",
+                            width: "100%",
+                            display: "block",
+                          }}
+                          src="https://yamaha-deta.co.id/assets/themes/default/extra-images/detailproduk/ENERGETIC_WHITE.png"
+                          className={navImageClasses}
+                        />
+                        <div align="center">
+                          <h2>VEGA FORCE CW</h2>
+                          <h4>Rp. 16.825.000,00</h4>
+                          <Button color="info" round>
+                            <LocalGroceryStoreIcon className={classes.icons} />{" "}
+                            Buy
+                          </Button>
+                        </div>
+                      </GridItem>
+                      <GridItem xs={12} sm={12} md={4}>
+                        <img
+                          alt="..."
+                          style={{ height: "350px", display: "block" }}
+                          src="https://www.yamaha-motor.co.id/uploads/products/2020020510350637523I93808.png"
+                          className={navImageClasses}
+                        />
+                      </GridItem>
+                      <GridItem xs={12} sm={12} md={4}>
+                        <img
+                          alt="..."
+                          style={{ height: "350px", display: "block" }}
+                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-Std-Htm.png"
+                          className={navImageClasses}
+                        />
+                      </GridItem>
+                      <GridItem xs={12} sm={12} md={4}>
+                        <img
+                          alt="..."
+                          style={{
+                            height: "350px",
+                            width: "100%",
+                            display: "block",
+                          }}
+                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-R-Version.png"
+                          className={navImageClasses}
+                        />
+                      </GridItem>
+                      <GridItem xs={12} sm={12} md={4}>
+                        <img
+                          alt="..."
+                          style={{
+                            height: "350px",
+                            width: "100%",
+                            display: "block",
+                          }}
+                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Aerox-S-Ver-Red.png"
+                          className={navImageClasses}
+                        />
+                      </GridItem>
+                      <GridItem xs={12} sm={12} md={4}>
+                        <img
+                          alt="..."
+                          style={{
+                            height: "350px",
+                            width: "100%",
+                            display: "block",
+                          }}
+                          src="https://i0.wp.com/warungasep.net/wp-content/uploads/2020/02/view-1.png"
+                          className={navImageClasses}
+                        />
+                      </GridItem>
+                      <GridItem xs={12} sm={12} md={4}>
+                        <img
+                          alt="..."
+                          style={{
+                            height: "350px",
+                            width: "100%",
+                            display: "block",
+                          }}
+                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Sporty-Blue-768x744.png"
+                          className={navImageClasses}
+                        />
+                      </GridItem>
+                      <GridItem xs={12} sm={12} md={4}>
+                        <img
+                          alt="..."
+                          style={{
+                            height: "350px",
+                            width: "100%",
+                            display: "block",
+                          }}
+                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Fino-Grande-Blue-768x744.png"
+                          className={navImageClasses}
+                        />
+                      </GridItem>
+                      <GridItem xs={12} sm={12} md={4}>
+                        <img
+                          alt="..."
+                          style={{
+                            height: "350px",
+                            width: "100%",
+                            display: "block",
+                          }}
+                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-S-Green-768x703.png"
+                          className={navImageClasses}
+                        />
+                      </GridItem>
+                      <GridItem xs={12} sm={12} md={4}>
+                        <img
+                          alt="..."
+                          style={{
+                            height: "350px",
+                            width: "100%",
+                            display: "block",
+                          }}
+                          src="http://automotive.thamrin.co.id/wp-content/uploads/2019/07/Mio-M3-CW-Black-768x649.png"
+                          className={navImageClasses}
+                        />
+                      </GridItem>
+                    </GridContainer>
+                  ),
+                },
+                {
+                  tabButton: "Suzuki",
+                  tabIcon: Dashboard,
+                  tabContent: (
+                    <GridContainer justify="center">
+                      
+                    </GridContainer>
+                  ),
+                },
+                {
+                  tabButton: "Honda",
+                  tabIcon: Dashboard,
+                  tabContent: (
+                    <GridContainer justify="center">
+
+                    </GridContainer>
+                  ),
+                },
+                {
+                  tabButton: "Mercedes Benz",
+                  tabIcon: Dashboard,
+                  tabContent: (
+                    <GridContainer justify="center">
+                      
+                    </GridContainer>
+                  ),
+                },
+              ]}
+            />
+          </GridItem>
+        </GridContainer>
+      </CardBody>
+      <CardFooter className={classes.textMuted} textAlign="center">
+        © 2020 , All Right Reserved by @Thamrin Brother Company
+      </CardFooter>
+    </Card>
+  );
+}

pages-sections/Components-Sections/SectionProductDetail.js

@@ -0,0 +1,192 @@
+import React from "react";
+
+// nodejs library that concatenates classes
+import classNames from "classnames";
+
+// @material-ui/core components
+import { makeStyles } from "@material-ui/core/styles";
+
+// @material-ui/icons
+import Dashboard from "@material-ui/icons/Dashboard";
+import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore";
+
+// Component
+import GridContainer from "components/Grid/GridContainer.js";
+import Grid from '@material-ui/core/Grid';
+import GridItem from "components/Grid/GridItem.js";
+import NavPills from "components/NavPills/NavPills.js";
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import CardHeader from "components/Card/CardHeader.js";
+import CardFooter from "components/Card/CardFooter.js";
+import Button from "components/CustomButtons/Button.js";
+import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
+import Carousel from "react-slick";
+import Paper from '@material-ui/core/Paper';
+
+
+import image1 from "assets/img/bg.jpg";
+import image2 from "assets/img/bg2.png";
+import image3 from "assets/img/bg3.jpg";
+
+const useStyles = makeStyles(styles);
+
+export default function ProfilePage(props) {
+    const classes = useStyles();
+    const settings = {
+      dots: true,
+      infinite: true,
+      speed: 500,
+      slidesToShow: 1,
+      slidesToScroll: 1,
+      autoplay: false
+    };
+  const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
+  return (
+    <Card className={classes.textCenter}>
+    <div align="center">
+      <CardHeader color="info">Product Detail</CardHeader>
+    </div>
+    <CardBody>
+        <GridContainer justify="center">
+            <Grid align="center" className={classes.marginAuto}>
+            <div className={classes.section}>
+                <div className={classes.container}>
+                    <Card carousel style={{width:"700px", height:"400px"}}>
+                        <Carousel {...settings}>
+                        <div>
+                            <img src="https://www.yamaha-motor.co.id/uploads/products/2020020510350637523I93808.png" width="300px" height="400px" alt="First slide" className="slick-image" />
+                        </div>
+                        <div>
+                            <img src={image2} alt="Second slide" className="slick-image"/>
+                        </div>
+                        <div>
+                            <img src={image3} alt="Third slide" className="slick-image" />
+                        </div>
+                        </Carousel>
+                    </Card>
+                </div>
+            </div>
+            </Grid>        
+            <Grid style={{padding:"40px", marginTop:"-30px"}}>
+                <h3>ALL NEW NMAX STANDART VERSION</h3>
+                <h3>Rp.37.692.000,00</h3>
+                <hr></hr>
+                <GridContainer justify="center">
+                    <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
+                        <Card className={classes.marginAuto} style={{height: "125px", width: "125px"}}>
+                            <img src="https://www.yamaha-motor.co.id/uploads/products/2zTfxFltlPOYe5sMFapR-BLUE-CORE-color.png"
+                            />
+                        </Card>
+                    </Grid>
+                    <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
+                        <Card className={classes.marginAuto} style={{height: "125px", width: "125px"}}>
+                            <img src="https://www.yamaha-motor.co.id/uploads/products/3JWFNLBpLj2ff7JgaSEC-VVA1.png"
+                            />
+                        </Card>
+                    </Grid>
+                    <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
+                        <Card className={classes.marginAuto} style={{height: "125px", width: "125px"}}>
+                            <img src="https://www.yamaha-motor.co.id/uploads/products/ku13WjySzEsj6LarGvlb-155-CC.png"
+                            />
+                        </Card>
+                    </Grid>
+                </GridContainer>
+                <GridContainer justify="center">
+                    <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-50px"}}>
+                        <Card className={classes.marginAuto} style={{height: "125px", width: "125px"}}>
+                            <img src="https://www.yamaha-motor.co.id/uploads/products/20200402085616smc40j.png"
+                            />
+                        </Card>
+                    </Grid>
+                    <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-50px"}}>
+                        <Card className={classes.marginAuto} style={{height: "125px", width: "125px"}}>
+                            <img src="https://www.yamaha-motor.co.id/uploads/products/amoV2O00jXseztcZ8ilV-smg.png"
+                            />
+                        </Card>
+                    </Grid>
+                    <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-50px"}}>
+                        <Card className={classes.marginAuto} style={{height: "125px", width: "125px"}}>
+                            <img src="https://www.yamaha-motor.co.id/uploads/products/201912031806276ll9i9.png"
+                            />
+                        </Card>
+                    </Grid>
+                </GridContainer>
+            </Grid>
+        </GridContainer>
+        <GridContainer style={{marginTop:"-80px"}}>
+        <GridItem>
+          <NavPills
+            color="primary"
+            tabs={[
+              {
+                tabButton: "Overview",
+                tabIcon: Dashboard,
+                tabContent: (
+                  <GridContainer justify="center">
+                    <GridItem>
+                    </GridItem>
+                  </GridContainer>
+                ),
+              },
+              {
+                tabButton: "Specification",
+                tabIcon: Dashboard,
+                tabContent: (
+                  <GridContainer justify="center">
+                    <GridItem>
+                    </GridItem>
+                  </GridContainer>
+                ),
+              },
+              {
+                tabButton: "Accessories",
+                tabIcon: Dashboard,
+                tabContent: (
+                  <GridContainer justify="center">
+                    <GridItem>
+                    </GridItem>
+                  </GridContainer>
+                ),
+              },
+              {
+                tabButton: "Film",
+                tabIcon: Dashboard,
+                tabContent: (
+                  <GridContainer justify="center">
+                    <GridItem>
+                    </GridItem>
+                  </GridContainer>
+                ),
+              },
+              {
+                tabButton: "Credit Simulation",
+                tabIcon: Dashboard,
+                tabContent: (
+                  <GridContainer justify="center">
+                    <GridItem>
+                    </GridItem>
+                  </GridContainer>
+                ),
+              },
+              {
+                tabButton: "Test Drive",
+                tabIcon: Dashboard,
+                tabContent: (
+                  <GridContainer justify="center">
+                    <GridItem>
+                    </GridItem>
+                  </GridContainer>
+                ),
+              },
+            ]}
+          />
+        </GridItem>
+      </GridContainer>
+    </CardBody>
+    <CardFooter className={classes.textMuted} textAlign="center">
+      © 2020 , All Right Reserved by @Thamrin Brother Company
+    </CardFooter>
+  </Card>
+  );
+}

pages/aboutus.js

@@ -24,11 +24,9 @@ export default function Components(props) {
   return (
     <div>
       <Header
-        brand="Thamrin Brothers"
-        image={"https://4.bp.blogspot.com/-_68lYYHT0Io/Wn70CMzMPqI/AAAAAAAACRc/JQIcRFnGvxALRh4yHcMNCH5MVjwmrQWWQCLcBGAs/s1600/mercedez.png"}
         rightLinks={<HeaderLinks />}
         fixed
-        color="transparent"
+        color="info"
         changeColorOnScroll={{
           height: 400,
           color: "white"

pages/carrer.js

@@ -24,11 +24,9 @@ export default function Components(props) {
   return (
     <div>
       <Header
-        brand="Thamrin Brothers"
-        image={"https://4.bp.blogspot.com/-_68lYYHT0Io/Wn70CMzMPqI/AAAAAAAACRc/JQIcRFnGvxALRh4yHcMNCH5MVjwmrQWWQCLcBGAs/s1600/mercedez.png"}
         rightLinks={<HeaderLinks />}
         fixed
-        color="transparent"
+        color="info"
         changeColorOnScroll={{
           height: 400,
           color: "white"

pages/chart.js

@@ -0,0 +1,56 @@
+import React from "react";
+// nodejs library that concatenates classes
+import classNames from "classnames";
+// react components for routing our app without refresh
+import Link from "next/link";
+// @material-ui/core components
+import { makeStyles } from "@material-ui/core/styles";
+// @material-ui/icons
+// core components
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import GridContainer from "components/Grid/GridContainer.js";
+import GridItem from "components/Grid/GridItem.js";
+import SectionChart from "pages-sections/Components-Sections/SectionChart.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+
+const useStyles = makeStyles(styles);
+
+export default function Components(props) {
+  const classes = useStyles();
+  const { ...rest } = props;
+  return (
+    <div>
+      <Header
+        rightLinks={<HeaderLinks/>}
+        fixed
+        color="info"
+        changeColorOnScroll={{
+          height: 400,
+          color: "white"
+        }}
+        {...rest}
+      />
+      <Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px">
+        <div className={classes.container}>
+          <GridContainer>
+            <GridItem>
+              {/* <div className={classes.brand}>
+                <h1 className={classes.title}>NextJS Material Kit.</h1>
+                <h3 className={classes.subtitle}>
+                  A Badass Material Kit based on Material-UI and NextJS.
+                </h3>
+              </div> */}
+            </GridItem>
+          </GridContainer>
+        </div>
+      </Parallax>
+      <div className={classNames(classes.main, classes.mainRaised)}>
+        <SectionChart />  
+      </div>
+      <Footer />
+    </div>
+  );
+}

pages/components.js

@@ -15,6 +15,8 @@ import GridItem from "components/Grid/GridItem.js";
 import SectionContent from "pages-sections/Components-Sections/SectionContent.js";
 import Parallax from "components/Parallax/Parallax.js";
 import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+import Button from "components/CustomButtons/Button.js";
+import Home from "../api/home.js"
 
 const useStyles = makeStyles(styles);
 
@@ -24,11 +26,9 @@ export default function Components(props) {
   return (
     <div>
       <Header
-        brand="Thamrin Brothers"
-        image={require("assets/img/ymhthamrin.png")}
         rightLinks={<HeaderLinks/>}
         fixed
-        color="transparent"
+        color="info"
         changeColorOnScroll={{
           height: 400,
           color: "white"
@@ -38,21 +38,38 @@ export default function Components(props) {
       <Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px">
         <div className={classes.container}>
           <GridContainer>
-            <GridItem>
-              {/* <div className={classes.brand}>
-                <h1 className={classes.title}>NextJS Material Kit.</h1>
+            {/* <GridItem>
+              <div className={classes.brand} align="center">
+                <h1 className={classes.title}>Thamrin Group</h1>
                 <h3 className={classes.subtitle}>
                   A Badass Material Kit based on Material-UI and NextJS.
                 </h3>
-              </div> */}
-            </GridItem>
+              </div>
+            <Button
+              href="/login"
+              className={classes.registerNavLink}
+              color="info"
+              box
+            >
+              Shop Now
+            </Button>
+            </GridItem> */}
           </GridContainer>
         </div>
       </Parallax>
       <div className={classNames(classes.main, classes.mainRaised)}>
-        <SectionContent />  
+        <SectionContent />
       </div>
       <Footer />
     </div>
   );
 }
+
+export async function getServerSideProps(context) {
+  var res=await Home.GET();
+  console.log(res);
+
+	return {
+		props: {  }, // will be passed to the page component as props
+	};
+}

pages/latestnews.js

@@ -1,11 +1,11 @@
 import React from "react";
+
 // nodejs library that concatenates classes
 import classNames from "classnames";
-// react components for routing our app without refresh
-import Link from "next/link";
+
 // @material-ui/core components
 import { makeStyles } from "@material-ui/core/styles";
-// @material-ui/icons
+
 // core components
 import Header from "components/Header/Header.js";
 import HeaderLinks from "components/Header/HeaderLinks.js";
@@ -24,11 +24,9 @@ export default function Components(props) {
   return (
     <div>
       <Header
-        brand="Thamrin Brothers"
-        image={"https://4.bp.blogspot.com/-_68lYYHT0Io/Wn70CMzMPqI/AAAAAAAACRc/JQIcRFnGvxALRh4yHcMNCH5MVjwmrQWWQCLcBGAs/s1600/mercedez.png"}
         rightLinks={<HeaderLinks />}
         fixed
-        color="transparent"
+        color="info"
         changeColorOnScroll={{
           height: 400,
           color: "white"

pages/product.js

@@ -0,0 +1,56 @@
+import React from "react";
+// nodejs library that concatenates classes
+import classNames from "classnames";
+// react components for routing our app without refresh
+import Link from "next/link";
+// @material-ui/core components
+import { makeStyles } from "@material-ui/core/styles";
+// @material-ui/icons
+// core components
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import GridContainer from "components/Grid/GridContainer.js";
+import GridItem from "components/Grid/GridItem.js";
+import SectionProduct from "pages-sections/Components-Sections/SectionProduct.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+
+const useStyles = makeStyles(styles);
+
+export default function Components(props) {
+  const classes = useStyles();
+  const { ...rest } = props;
+  return (
+    <div>
+      <Header
+        rightLinks={<HeaderLinks/>}
+        fixed
+        color="info"
+        changeColorOnScroll={{
+          height: 400,
+          color: "white"
+        }}
+        {...rest}
+      />
+      <Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px">
+        <div className={classes.container}>
+          <GridContainer>
+            <GridItem>
+              {/* <div className={classes.brand}>
+                <h1 className={classes.title}>NextJS Material Kit.</h1>
+                <h3 className={classes.subtitle}>
+                  A Badass Material Kit based on Material-UI and NextJS.
+                </h3>
+              </div> */}
+            </GridItem>
+          </GridContainer>
+        </div>
+      </Parallax>
+      <div className={classNames(classes.main, classes.mainRaised)}>
+        <SectionProduct />  
+      </div>
+      <Footer />
+    </div>
+  );
+}

pages/product_detail.js

@@ -0,0 +1,56 @@
+import React from "react";
+// nodejs library that concatenates classes
+import classNames from "classnames";
+// react components for routing our app without refresh
+import Link from "next/link";
+// @material-ui/core components
+import { makeStyles } from "@material-ui/core/styles";
+// @material-ui/icons
+// core components
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Footer from "components/Footer/Footer.js";
+import GridContainer from "components/Grid/GridContainer.js";
+import GridItem from "components/Grid/GridItem.js";
+import SectionProductDetail from "pages-sections/Components-Sections/SectionProductDetail.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+
+const useStyles = makeStyles(styles);
+
+export default function Components(props) {
+  const classes = useStyles();
+  const { ...rest } = props;
+  return (
+    <div>
+      <Header
+        rightLinks={<HeaderLinks/>}
+        fixed
+        color="info"
+        changeColorOnScroll={{
+          height: 400,
+          color: "white"
+        }}
+        {...rest}
+      />
+      <Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px">
+        <div className={classes.container}>
+          <GridContainer>
+            <GridItem>
+              {/* <div className={classes.brand}>
+                <h1 className={classes.title}>NextJS Material Kit.</h1>
+                <h3 className={classes.subtitle}>
+                  A Badass Material Kit based on Material-UI and NextJS.
+                </h3>
+              </div> */}
+            </GridItem>
+          </GridContainer>
+        </div>
+      </Parallax>
+      <div className={classNames(classes.main, classes.mainRaised)}>
+        <SectionProductDetail />  
+      </div>
+      <Footer />
+    </div>
+  );
+}

pages/service.js

@@ -24,11 +24,9 @@ export default function Components(props) {
   return (
     <div>
       <Header
-        brand="Thamrin Brothers"
-        image={"https://4.bp.blogspot.com/-_68lYYHT0Io/Wn70CMzMPqI/AAAAAAAACRc/JQIcRFnGvxALRh4yHcMNCH5MVjwmrQWWQCLcBGAs/s1600/mercedez.png"}
         rightLinks={<HeaderLinks />}
         fixed
-        color="transparent"
+        color="info"
         changeColorOnScroll={{
           height: 400,
           color: "white"

pages/simulasicicilan.js

@@ -24,11 +24,9 @@ export default function Components(props) {
   return (
     <div>
       <Header
-        brand="Thamrin Brothers"
-        image={"https://4.bp.blogspot.com/-_68lYYHT0Io/Wn70CMzMPqI/AAAAAAAACRc/JQIcRFnGvxALRh4yHcMNCH5MVjwmrQWWQCLcBGAs/s1600/mercedez.png"}
         rightLinks={<HeaderLinks />}
         fixed
-        color="transparent"
+        color="info"
         changeColorOnScroll={{
           height: 400,
           color: "white"

pages/testdrive.js

@@ -24,11 +24,9 @@ export default function Components(props) {
   return (
     <div>
       <Header
-        brand="Thamrin Brothers"
-        image={"https://4.bp.blogspot.com/-_68lYYHT0Io/Wn70CMzMPqI/AAAAAAAACRc/JQIcRFnGvxALRh4yHcMNCH5MVjwmrQWWQCLcBGAs/s1600/mercedez.png"}
         rightLinks={<HeaderLinks />}
         fixed
-        color="transparent"
+        color="info"
         changeColorOnScroll={{
           height: 400,
           color: "white"