make a new Hino web

.gitignore

@@ -0,0 +1,29 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+/out
+
+# misc
+.env
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+package-lock.json
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# package
+/dist
+/.next

README.md

@@ -0,0 +1,31 @@
+# Redux example
+
+This example shows how to integrate Redux in Next.js.
+
+Usually splitting your app state into `pages` feels natural but sometimes you'll want to have global state for your app. This is an example on how you can use Redux that also works with Next.js's universal rendering approach.
+
+In the first example we are going to display a digital clock that updates every second. The first render is happening in the server and then the browser will take over. To illustrate this, the server rendered clock will have a different background color (black) than the client one (grey).
+
+The trick here for supporting universal Redux is to separate the cases for the client and the server. When we are on the server we want to create a new store every time, otherwise different users data will be mixed up. If we are in the client we want to use always the same store. That's what we accomplish on `store.js`.
+
+All components have access to the Redux store using `useSelector`, `useDispatch` or `connect` from `react-redux`.
+
+On the server side every request initializes a new store, because otherwise different user data can be mixed up. On the client side the same store is used, even between page changes.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-redux&project-name=with-redux&repository-name=with-redux)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-redux with-redux-app
+# or
+yarn create next-app --example with-redux with-redux-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

api/new/company/company.js

@@ -0,0 +1,138 @@
+import apollo from "../../../lib/apollo";
+
+
+async function companies(input){
+  var res = await apollo.query(
+      `
+      query($input: String!){
+        companies{
+          data{
+            attributes{
+              Business_name
+              Name
+              Description
+              Icon {
+                data {
+                  attributes{
+                    url
+                  }
+                }
+              }
+              Background{
+                data{
+                  attributes{
+                    url
+                  }
+                }
+              }
+              Website
+            }
+          }
+        }
+        main_banner:companies(filters:{Name:{eq:$input}}){
+          data{
+            attributes{
+              Contents(filters :{Type:{eq:"Main_Banner"}}){
+                data{
+                  attributes{
+                    Title
+                    Description
+                    Image{
+                      data{
+                        attributes{
+                          url
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        news:companies(filters:{Name:{eq:$input}}){
+          data{
+            id
+            attributes{
+              Contents(filters:{Type:{eq:"News"}}){
+                data{
+                  id
+                  attributes{
+                    Title
+                    Description
+                    Image{
+                      data{
+                        attributes{
+                          url
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        gallery:companies(filters:{Name:{eq:$input}}){
+          data{
+            attributes{
+              Gallery{
+                data{
+                  attributes{
+                    url
+                  }
+                }
+              }
+            }
+          }
+        }
+      }`,"",{
+        "input":input
+      }
+  );
+  return res;
+}
+
+// async function getID(partner, token = "") {
+    // var res = await apollo.query(
+    //     `
+    //     query($input : String!){
+    //       businessPartners(where:{name_contains:$input}){
+    //         id
+    //       }
+    //     }`,
+    //     token,
+    //     {
+    //         input: partner,
+    //     }
+    // );
+    // return res;
+// }
+
+// async function getData(partner,token=''){
+//     var res = await apollo.query(
+//       `
+//         query($input : String!){
+//           businessPartners(where:{name_contains:$input}){
+//             id,
+//             name,
+//             icon{
+//               url
+//             },
+//             background{
+//               url
+//             },
+//             carousel{
+//               url
+//             }
+//           }
+//         }
+//       `
+//     );
+// }
+
+module.exports = {
+    // getID: getID,
+    // getData:getData,
+    companies:companies,
+};

api/new/company/index.js

@@ -0,0 +1,336 @@
+import apollo from "../../../lib/apollo";
+
+
+async function allCompanies(){
+  var res = await apollo.query(
+      `
+      query($input: String!){
+        companies{
+          data{
+            attributes{
+              Ready
+              Business_name
+              Name
+              Description
+              Icon {
+                data {
+                  attributes{
+                    url
+                  }
+                }
+              }
+              Background{
+                data{
+                  attributes{
+                    url
+                  }
+                }
+              }
+              Website
+            }
+          }
+        }
+        social:companies(filters:{Name:{eq:$input}}){
+    			data{
+            attributes{
+              Social_Medias{
+                data{
+                  attributes{
+                    Type
+                    Link
+                  }
+                }
+              }
+            }
+          }
+  			}	
+        dealers:companies(filters:{Name:{eq:$input}}){
+          data{
+            attributes{
+              Dealers{
+                data{
+                  attributes{
+                    Image{
+                      data{
+                        attributes{
+                          url
+                        }
+                      }
+                    }
+                    Name
+                    Kota
+                    Address
+                    Gmap
+                    Telp
+                    Region{
+                      data{
+                        attributes{
+                          Name
+                        }
+                      }
+                    }
+                    Email
+                  }
+                }
+              }
+            }
+          }
+        }
+        main_banner:companies(filters:{Name:{eq:$input}}){
+          data{
+            id
+            attributes{
+              Contents(filters :{Type:{eq:"Main_Banner"}}){
+                data{
+                  attributes{
+                    Title
+                    Description
+                    Image{
+                      data{
+                        attributes{
+                          url
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        news:companies(filters:{Name:{eq:$input}}){
+          data{
+            id
+            attributes{
+              Contents(filters:{Type:{eq:"News"}}){
+                data{
+                  id
+                  attributes{
+                    Title
+                    Description
+                    Image{
+                      data{
+                        attributes{
+                          url
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        gallery:companies(filters:{Name:{eq:$input}}){
+          data{
+            attributes{
+              Gallery{
+                data{
+                  attributes{
+                    url
+                  }
+                }
+              }
+            }
+          }
+        }
+      }`,"",{
+        "input":"Thamrin"
+      }
+  );
+  return res;
+}
+
+async function companyIcon(input){
+    var res = await apollo.query(
+      `
+      query($input: ID!){
+        company(id:$input){
+          data{
+            attributes{
+              Icon {
+                data {
+                  attributes{
+                    url
+                  }
+                }
+              }
+            }
+          }
+        }
+      }`,"",{
+        "input":input
+      }
+  );
+  return res;
+}
+
+async function companyByName(input){
+  var res = await apollo.query(
+      `
+      query($input: String!){
+        Main_Banner:companies(filters:{Name:{containsi:$input}}){
+          data{
+            id
+            attributes{
+              Contents(filters :{Type:{eq:"Main_Banner"}}){
+                data{
+                  attributes{
+                    Title
+                    Description
+                    Image{
+                      data{
+                        attributes{
+                          url
+                        }
+                      }
+                    }
+                    Link
+                  }
+                }
+              }
+            }
+          }
+        }
+        companies(filters:{Name:{eq:$input}}){
+          data{
+            id
+            attributes{
+              Business_name
+              Name
+              Description
+              Visi
+              Misi
+              Address
+              Email
+              Phone
+              Icon {
+                data {
+                  attributes{
+                    url
+                  }
+                }
+              }
+              Banner{
+                data{
+                  id
+                  attributes{
+                    url
+                  }
+                }
+              }
+              Dealers{
+                data{
+                  attributes{
+                    Image{
+                      data{
+                        attributes{
+                          url
+                        }
+                      }
+                    }
+                    Name
+                    Kota
+                    Address
+                    Gmap
+                    Telp
+                    Region{
+                      data{
+                        attributes{
+                          Name
+                        }
+                      }
+                    }
+                    Email
+                  }
+                }
+              }
+              Featured:Products(filters:{Featured:{eq:true}}){
+                data{
+                  attributes{
+                    Image{
+                      data{
+                        attributes{
+                          url
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+              Background{
+                data{
+                  attributes{
+                    url
+                  }
+                }
+              }
+              Gallery{
+                data{
+                  attributes{
+                    url
+                  }
+                }
+              }       
+              Social_Medias{
+                data{
+                  attributes{
+                    Type
+                    Link
+                  }
+                }
+              }
+            }
+          }
+        }
+      }`,"",{
+        "input":input
+      }
+  );
+  return res;
+}
+
+async function getID(partner, token = "") {
+    var res = await apollo.query(
+        `
+        query($input : String!){
+          businessPartners(where:{name_contains:$input}){
+            id
+          }
+        }`,
+        token,
+        {
+            input: partner,
+        }
+    );
+    return res;
+}
+
+// async function getData(partner,token=''){
+//     var res = await apollo.query(
+//       `
+//         query($input : String!){
+//           businessPartners(where:{name_contains:$input}){
+//             id,
+//             name,
+//             icon{
+//               url
+//             },
+//             background{
+//               url
+//             },
+//             carousel{
+//               url
+//             }
+//           }
+//         }
+//       `
+//     );
+// }
+
+module.exports = {
+    getID: getID,
+    companyByName:companyByName,
+    companies:allCompanies,
+    companyIcon:companyIcon,
+};

api/new/dealer/index.js

@@ -0,0 +1,81 @@
+import apollo from "../../../lib/apollo";
+
+
+async function dealersByCompanyId(id){
+  var res = await apollo.query(
+      `
+      query($input : ID!){
+        dealers(filters:{Company:{id:{eq:$input}}}){
+          data{
+            attributes{
+              Address
+              Name
+              Telp
+              Email
+              Kota
+              Gmap
+              Image{
+                data{
+                  attributes{
+                    url
+                  }
+                }
+              }
+              Region{
+                data{
+                  attributes{
+                    Name
+                  }
+                }
+              }
+            }
+          }
+        }
+      }`,'',{
+          input:id
+      }
+  );
+  return res;
+}
+
+async function dealersByCompanyName(name){
+  var res = await apollo.query(
+      `
+      query($input : String!){
+        dealers(filters:{Company:{Name:{eq:$input}}}){
+          data{
+            attributes{
+              Address
+              Name
+              Telp
+              Email
+              Kota
+              Gmap
+              Image{
+                data{
+                  attributes{
+                    url
+                  }
+                }
+              }
+              Region{
+                data{
+                  attributes{
+                    Name
+                  }
+                }
+              }
+            }
+          }
+        }
+      }`,'',{
+          "input":name
+      }
+  );
+  return res;
+}
+
+module.exports = {
+    dealersByCompanyId:dealersByCompanyId,
+    dealersByCompanyName:dealersByCompanyName,
+};

api/new/industry/index.js

@@ -0,0 +1,23 @@
+import apollo from "../../../lib/apollo";
+
+
+async function industries(){
+  var res = await apollo.query(
+      `
+      query{
+        industries{
+          data{
+            attributes{
+              Name
+              Icon
+            }
+          }
+        }
+      }`
+  );
+  return res;
+}
+
+module.exports = {
+    industries:industries,
+};

api/new/industry/industry.js

@@ -0,0 +1,23 @@
+import apollo from "../../../lib/apollo";
+
+
+async function industries(){
+  var res = await apollo.query(
+      `
+      query{
+        industries{
+          data{
+            attributes{
+              Name
+              Icon
+            }
+          }
+        }
+      }`
+  );
+  return res;
+}
+
+module.exports = {
+    industries:industries,
+};

api/new/news/index.js

@@ -0,0 +1,115 @@
+import apollo from "../../../lib/apollo";
+
+async function newsByCompanyId(companyId){
+  var res = apollo.query(
+    `
+    query($input: ID!){
+      contents(sort:"publishedAt:desc" filters:{Type:{eq:"News"} Company:{id:{eq:$input}}}){
+        data{
+          id
+          attributes{
+            Title
+            publishedAt
+            Image{
+              data{
+                attributes{
+                  url
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    `,"",{
+      "input" : companyId
+    }
+  );
+  return res;
+}
+
+async function newsById(id){
+  var res = await apollo.query(
+      `
+      query($input: ID!){
+        content(id:$input){
+          data{
+            attributes{
+              Company{
+                data{
+                  id
+                  attributes{
+                    Name
+                    Description
+                    Address
+                    Phone
+                    Email
+                  }
+                }
+              }
+              Title
+              Image{
+                data{
+                  attributes{
+                    url
+                  }
+                }
+              }
+              Description
+              publishedAt
+            }
+          }
+        }
+      }`,"",{
+        "input":id
+      }
+  );
+  return res;
+}
+
+async function newsByCompanyName(name,pageSize=999,page=1){
+  var res = await apollo.query(
+    `
+    query($input: String!){
+      contents(sort:"publishedAt:desc" filters:{Type:{eq:"News"} Company:{Name:{eq:$input}}} pagination:{pageSize:${pageSize},page:${page}}){
+    		meta{
+          pagination{
+            pageCount
+          }
+        }
+        data{
+          id
+          attributes{
+            Company{
+              data{
+                id
+                attributes{
+                  Name
+                  Description
+                }
+              }
+            }
+            Title
+            Image{
+              data{
+                attributes{
+                  url
+                }
+              }
+            }
+            publishedAt
+          }
+        }
+      }
+    }`,"",{
+      "input":name
+    }
+);
+return res;
+}
+
+module.exports = {
+  newsById:newsById,
+  newsByCompanyId:newsByCompanyId,
+  newsByCompanyName:newsByCompanyName
+};

api/new/product/index.js

@@ -0,0 +1,243 @@
+import apollo from "@/lib/apollo.js";
+
+async function GetDetailProduct(id, token = "") {
+  var res = await apollo.query(
+    `
+    query($input : ID!){
+      product(id:$input){
+        data{
+          id
+          attributes{
+            Company{
+              data{
+                attributes{
+                  Name
+                }
+              }
+            }
+            Category{
+              data{
+                attributes{
+                  Name
+                }
+              }
+            }
+            Name
+            Description
+            Product_parts{
+              data{
+                attributes{
+                  Name
+                  Part_Code
+                  Product_prices{
+                    data{
+                      attributes{
+                        Price
+                      }
+                    }
+                  }
+                }
+              }
+            }
+            Stock
+            Discount
+            Machine
+            Dimension
+            Structure
+            Voltage
+            Image{
+              data{
+                attributes{
+                  url
+                }
+              }
+            }
+            Product_colors{
+              data{
+                attributes{
+                  Color
+                  Image{
+                    data{
+                      attributes{
+                        url
+                      }
+                    }
+                  }
+                }
+              }
+            }
+            Product_prices{
+              data{
+                attributes{
+                  Price
+                  region{
+                    data{
+                      attributes{
+                        Name
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    `,
+    token, {
+      "input": id
+    }
+  );
+  return res;
+}
+
+async function GetProductImgColor(id, token = "") {
+  var res = await apollo.query(
+    `
+      query($input: ID!) {
+        productImageColors(where:{id:$input}) {
+          id
+          name
+          img{
+            url
+          }
+        }
+      }
+    `,
+    token, {
+      "input": id
+    }
+  );
+  return res;
+}
+async function GetProductCategory(token=''){
+  var res = await apollo.query(
+    `
+    query{
+      productCategories{
+        data{
+          attributes{
+            Name
+          }
+        }
+      }
+    }
+    `,token
+  );
+  return res;
+}
+async function GetProductOthers(company,category,current,pageSize=999,page=1,token=""){
+  var allProduct= '';
+  category.forEach(i => {
+    allProduct = allProduct+`
+      ${i.replace(' ','_')}:products(pagination:{pageSize:${pageSize},page:${(i.toLowerCase()==current)?page:1}} filters:{Category:{Name:{containsi:"${i}"}} Company:{id:{eq:$input}}}){
+        meta{
+          pagination{
+            pageCount
+            total
+          }
+        }
+        data{
+          id
+          attributes{
+            Name
+            Image{
+              data{
+                attributes{
+                  url
+                }
+              }
+            }
+            Discount
+            Stock
+            Product_prices{
+              data{
+                attributes{
+                  Price
+                  region{
+                    data{
+                      attributes{
+                        Name
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    `;
+  });
+  var res = await apollo.query(
+    `
+    query($input : ID!){
+      ${allProduct}
+    }
+    `,token,{
+      input:company,
+    }
+  );
+  return res;
+}
+async function GetProduct(company,category,pageSize=999,page=1, token = "") {
+  var res = await apollo.query(
+    `
+    query($input : ID! $cat: String!){
+      products(pagination:{pageSize:${pageSize},page:${page}} filters:{Category:{Name:{eq:$cat}} Company:{id:{eq:$input}}}){
+        meta{
+          pagination{
+            pageCount
+            total
+          }
+        }
+        data{
+          id
+          attributes{
+            Name
+            Image{
+              data{
+                attributes{
+                  url
+                }
+              }
+            }
+            Product_prices{
+              data{
+                attributes{
+                  Price
+                  region{
+                    data{
+                      attributes{
+                        Name
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+        `,
+    token,
+    {
+      input:company,
+      cat:category,
+    }
+  );
+  return res;
+}
+
+module.exports = {
+
+  GetProductImgColor: GetProductImgColor,
+  GetProduct: GetProduct,
+  GetProductCategory:GetProductCategory,
+
+  //detail
+  GetDetailProduct: GetDetailProduct,
+  GetProductOthers:GetProductOthers,
+};

api/new/sales/index.js

@@ -0,0 +1,73 @@
+import apollo from "@/lib/apollo";
+
+
+async function salesbyCompany(company){
+  var res = await apollo.query(
+    `
+    query($input : ID!){
+        salesmen(filters:{Company:{id:{eq:$input}}}){
+        data{
+          id
+          attributes{
+            Name
+            Telp
+            WA
+            Email
+            DP{
+              data{
+                attributes{
+                  url
+                }
+              }
+            }
+          }
+        }
+    }
+  }`,"",{
+      "input":company
+    }
+);
+return res;
+}
+
+async function salesmanDetails(id){
+    var res = await apollo.query(
+      `
+      query($input : ID!){
+        salesman(id:$input){
+        data{
+          id
+          attributes{
+            Name
+            Telp
+            WA
+            Email
+            DP{
+              data{
+                attributes{
+                  url
+                }
+              }
+            }
+            Company{
+              data{
+                attributes{
+                  Name
+                  Website
+                }
+              }
+            }
+          }
+        }
+    }
+  }`,"",{
+        "input":id
+      }
+  );
+  return res;
+  }
+
+module.exports = {
+  salesbyCompany:salesbyCompany,
+  salesmanDetails:salesmanDetails,
+};

api/new/social/index.js

@@ -0,0 +1,27 @@
+import apollo from "../../../lib/apollo";
+
+async function socialByCompany(companyId){
+  var res = apollo.query(
+    `
+    query($input : ID!){
+        socialMedias(filters:{Company:{id:{eq:$input}}}){
+          data{
+            attributes{
+              Type
+              Link
+            }
+          }
+        }
+      }
+    `,"",{
+      "input" : companyId
+    }
+  );
+  return res;
+}
+
+
+
+module.exports = {
+  socialByCompany:socialByCompany,
+};

api/others/auth/auth.js

@@ -0,0 +1,145 @@
+import apollo from "@/lib/apollo.js";
+import partners from "../../new/company";
+
+async function register(content, token = "") {
+  var res = await apollo.mutation(
+    `
+      mutation($input : RegisterInput!){
+        register( input:{data:$input} )
+        {
+          user{
+            id
+          }
+        }
+      }
+    `,
+    token,
+    {
+      input: content,
+    }
+  );
+  return res;
+}
+
+async function login(partner, email, password, token = "") {
+  var cookiesData = {};
+  var res = await apollo.mutation(
+    `
+        mutation($email: String! $password: String!) {
+          login(input: { identifier: $email, password: $password }) {
+            user{
+              id
+              username
+            }
+            jwt
+          }
+        }`,
+    token,
+    {
+      email: email,
+      password: password,
+    }
+  );
+
+  if (res["STATUS"] == 1) {
+    token = res["DATA"]["login"]["jwt"];
+    res = await apollo.mutation(
+      `
+            query{
+              self{
+                id
+                username
+                email
+                role{
+                  name
+                  description
+                }
+                partners_login_states{
+                  id
+                  business_partner{
+                    id
+                    name
+                  }
+                }
+              }
+            }
+            `,
+      token
+    );
+  }
+
+  if (res["STATUS"] == 1) {
+    var user = res["DATA"]["self"];
+    var sessions = [];
+    for (const i of user["partners_login_states"]) {
+      sessions.push(i.business_partner);
+    }
+    sessions = sessions.filter(
+      (i) =>
+        i.business_partner &&
+        i.business_partner.name.toUpperCase() == partner.toUpperCase()
+    );
+    if (sessions.length == 0) {
+      res = await partners.getID(partner, token);
+      if (res["STATUS"] == 1) {
+        res = await apollo.mutation(
+          `
+                    mutation($input: PartnersLoginStateInput!) {
+                        createPartnersLoginState(input:{data:$input}){
+                            partnersLoginState{
+                              id
+                              business_partner{
+                                id
+                                name
+                              }
+                            }
+                        }
+                    }
+                    `,
+          token,
+          {
+            input: {
+              user: user["id"],
+              business_partner:
+                res["DATA"]["businessPartners"][0]["id"],
+            },
+          }
+        );
+        if (res["STATUS"] == 1) {
+          user["partners_login_states"].push(
+            res["DATA"]["createPartnersLoginState"][
+            "partnersLoginState"
+            ]
+          );
+        }
+      }
+    }
+    cookiesData["user"] = user;
+    cookiesData["token"] = token;
+  }
+  return { res: res, cookies: cookiesData };
+}
+
+async function logout(id, token = "") {
+  var res = await apollo.mutation(
+    `
+        mutation($input: ID!) {
+            deletePartnersLoginState(input:{where:{id:$input}}){
+                partnersLoginState{
+                  id
+                }
+            }
+        }`,
+    token,
+    {
+      input: id,
+    }
+  );
+  return res;
+}
+
+module.exports = {
+  register: register,
+  login: login,
+  logout: logout,
+};

api/others/carrer/carrer.js

@@ -0,0 +1,267 @@
+import apollo from "@/lib/apollo.js";
+
+async function GetCarrerS1Yamaha(token="") {
+	var res = await apollo.query(
+		`
+        query {
+            carrers(where: {category: "S1" business_partner: "1"})
+                {
+                    id
+                    name
+                    start_regis
+                    until_regis
+                    name_description
+                }
+            }`,
+		token
+	);
+	return res;
+}
+
+async function GetCarrerD3Yamaha(token="") {
+	var res = await apollo.query(
+		`
+        query {
+            carrers(where: {category: "D3" business_partner: "1"})
+                {
+                    id
+                    name
+                    start_regis
+                    until_regis
+                    name_description
+                }
+            }`,
+		token
+	);
+	return res;
+}
+
+async function GetCarrerSMAYamaha(token="") {
+	var res = await apollo.query(
+		`
+        query {
+            carrers(where: {category: "SMA" business_partner: "1"})
+                {
+                    id
+                    name
+                    start_regis
+                    until_regis
+                    name_description
+                }
+            }`,
+		token
+	);
+	return res;
+}
+
+async function GetDetailCarrer(id, token="") {
+	var res = await apollo.query(
+		`
+        query($input: ID!){
+            carrers(where:{id:$input})
+            {
+                name
+                description
+                category
+                img{
+                    url
+                }
+                start_regis
+                until_regis
+                name_description
+            }
+        }		
+        `,
+        token, 
+        {	
+            "input": id
+        }
+    );
+	return res;
+}
+
+async function GetCarrerS1Suzuki(token="") {
+	var res = await apollo.query(
+		`
+        query {
+            carrers(where: {category: "S1" business_partner:"2"})
+                {
+                    id
+                    name
+                    start_regis
+                    until_regis
+                    name_description
+                }
+            }`,
+		token
+	);
+	return res;
+}
+
+async function GetCarrerD3Suzuki(token="") {
+	var res = await apollo.query(
+		`
+        query {
+            carrers(where: {category: "D3" business_partner:"2"})
+                {
+                    id
+                    name
+                    start_regis
+                    until_regis
+                    name_description
+                }
+            }`,
+		token
+	);
+	return res;
+}
+
+async function GetCarrerSMASuzuki(token="") {
+	var res = await apollo.query(
+		`
+        query {
+            carrers(where: {category: "SMA" business_partner:"2"})
+                {
+                    id
+                    name
+                    start_regis
+                    until_regis
+                    name_description
+                }
+            }`,
+		token
+	);
+	return res;
+}
+
+async function GetCarrerS1Honda(token="") {
+	var res = await apollo.query(
+		`
+        query {
+            carrers(where: {category: "S1" business_partner:"3"})
+                {
+                    id
+                    name
+                    start_regis
+                    until_regis
+                    name_description
+                }
+            }`,
+		token
+	);
+	return res;
+}
+
+async function GetCarrerD3Honda(token="") {
+	var res = await apollo.query(
+		`
+        query {
+            carrers(where: {category: "D3" business_partner:"3"})
+                {
+                    id
+                    name
+                    start_regis
+                    until_regis
+                    name_description
+                }
+            }`,
+		token
+	);
+	return res;
+}
+
+async function GetCarrerSMAHonda(token="") {
+	var res = await apollo.query(
+		`
+        query {
+            carrers(where: {category: "SMA" business_partner:"3"})
+                {
+                    id
+                    name
+                    start_regis
+                    until_regis
+                    name_description
+                }
+            }`,
+		token
+	);
+	return res;
+}
+
+async function GetCarrerS1Hino(token="") {
+	var res = await apollo.query(
+		`
+        query {
+            carrers(where: {category: "S1" business_partner:"4"})
+                {
+                    id
+                    name
+                    start_regis
+                    until_regis
+                    name_description
+                }
+            }`,
+		token
+	);
+	return res;
+}
+
+async function GetCarrerD3Hino(token="") {
+	var res = await apollo.query(
+		`
+        query {
+            carrers(where: {category: "D3" business_partner:"4"})
+                {
+                    id
+                    name
+                    start_regis
+                    until_regis
+                    name_description
+                }
+            }`,
+		token
+	);
+	return res;
+}
+
+async function GetCarrerSMAHino(token="") {
+	var res = await apollo.query(
+		`
+        query {
+            carrers(where: {category: "SMA" business_partner:"4"})
+                {
+                    id
+                    name
+                    start_regis
+                    until_regis
+                    name_description
+                }
+            }`,
+		token
+	);
+	return res;
+}
+
+module.exports = {
+    //yamaha
+    GetCarrerS1Yamaha:GetCarrerS1Yamaha,
+    GetCarrerD3Yamaha:GetCarrerD3Yamaha,
+    GetCarrerSMAYamaha:GetCarrerSMAYamaha,
+
+    //suzuki
+    GetCarrerS1Suzuki:GetCarrerS1Suzuki,
+    GetCarrerD3Suzuki:GetCarrerD3Suzuki,
+    GetCarrerSMASuzuki:GetCarrerSMASuzuki,
+
+    //honda
+    GetCarrerS1Honda:GetCarrerS1Honda,
+    GetCarrerD3Honda:GetCarrerD3Honda,
+    GetCarrerSMAHonda:GetCarrerSMAHonda,
+
+    //hino
+    GetCarrerS1Hino:GetCarrerS1Hino,
+    GetCarrerD3Hino:GetCarrerD3Hino,
+    GetCarrerSMAHino:GetCarrerSMAHino,
+
+    GetDetailCarrer:GetDetailCarrer,
+};

api/others/courier/courier.js

@@ -0,0 +1,23 @@
+import apollo from "@/lib/apollo.js";
+
+async function GetCourier(filter, token="") {
+	var res = await apollo.query(
+        `
+        query {
+            couriers{
+                id
+                name
+                duration
+                price
+                description
+                }
+            }
+        `,
+            token
+	);
+	return res;
+}
+
+module.exports = {
+	GetCourier: GetCourier,
+};

api/others/dealer/dealer.js

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

api/others/home/businessPartner.js

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

api/others/home/carousel.js

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

api/others/home/service.js

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

api/others/latest_news/news.js

@@ -0,0 +1,229 @@
+import apollo from "@/lib/apollo.js";
+
+async function GetNewsYamaha(token="", start = 0) {
+	var res = await apollo.query(
+      `
+        query($start: Int!) {
+          latestNews(limit:6,start:$start)
+          {
+            id
+            title
+            description
+            img{
+              url
+            }
+            published_at
+          }
+        }
+      `,
+		token,
+    {
+      start: start,
+    }
+	);
+	return res;
+}
+
+async function GetOtherNewsYamaha(token="", start = 0) {
+	var res = await apollo.query(
+      `
+        query($start: Int!) {
+          latestNews(limit:3,start:$start)
+          {
+            id
+            title
+            description
+            img{
+              url
+            }
+            published_at
+          }
+        }
+      `,
+		token,
+    {
+      start: start,
+    }
+	);
+	return res;
+}
+
+async function GetNewsSuzuki(token="", start = 0) {
+	var res = await apollo.query(
+      `
+        query{
+          latestNews(where: { business_partner: "2" })
+          {
+            id
+            title
+            description
+            img{
+              url
+            }
+            published_at
+          }
+        }
+      `,
+		token,
+    {
+      start: start,
+    }
+	);
+	return res;
+}
+
+async function GetOtherNewsSuzuki(token="", start = 0) {
+	var res = await apollo.query(
+      `
+        query{
+          latestNews(where: { business_partner: "2" })
+          {
+            id
+            title
+            description
+            img{
+              url
+            }
+            published_at
+          }
+        }
+      `,
+		token,
+    {
+      start: start,
+    }
+	);
+	return res;
+}
+
+async function GetNewsHonda(token="", start = 0) {
+	var res = await apollo.query(
+      `
+        query{
+          latestNews(where: { business_partner: "3" })
+          {
+            id
+            title
+            description
+            img{
+              url
+            }
+            published_at
+          }
+        }
+      `,
+		token,
+    {
+      start: start,
+    }
+	);
+	return res;
+}
+
+async function GetOtherNewsHonda(token="", start = 0) {
+	var res = await apollo.query(
+      `
+        query{
+          latestNews(where: { business_partner: "3" })
+          {
+            id
+            title
+            description
+            img{
+              url
+            }
+            published_at
+          }
+        }
+      `,
+		token,
+    {
+      start: start,
+    }
+	);
+	return res;
+}
+
+async function GetNewsHino(token="", start = 0) {
+	var res = await apollo.query(
+      `
+        query{
+          latestNews(where: { business_partner: "4" })
+          {
+            id
+            title
+            description
+            img{
+              url
+            }
+            published_at
+          }
+        }
+      `,
+		token,
+    {
+      start: start,
+    }
+	);
+	return res;
+}
+
+async function GetOtherNewsHino(token="", start = 0) {
+	var res = await apollo.query(
+      `
+        query{
+          latestNews(where: { business_partner: "4" })
+          {
+            id
+            title
+            description
+            img{
+              url
+            }
+            published_at
+          }
+        }
+      `,
+		token,
+    {
+      start: start,
+    }
+	);
+	return res;
+}
+
+async function GetDetailNews(id, token="") {
+	var res = await apollo.query(
+      `
+        query($input: ID!) {
+          latestNews(where:{id:$input})
+          {
+            id
+            title
+            description
+            img{
+              url
+            }
+            published_at
+          }
+        }
+      `,
+      token, 
+      {	
+        "input": id
+      }
+	);
+	return res;
+}
+
+module.exports = {
+	GetNewsYamaha: GetNewsYamaha,
+  GetOtherNewsYamaha:GetOtherNewsYamaha,
+  GetNewsSuzuki:GetNewsSuzuki,
+  GetOtherNewsSuzuki:GetOtherNewsSuzuki,
+  GetNewsHonda:GetNewsHonda,
+  GetOtherNewsHonda:GetOtherNewsHonda,
+  GetNewsHino:GetNewsHino,
+  GetOtherNewsHino:GetOtherNewsHino,
+  GetDetailNews: GetDetailNews,
+};

api/others/product/product.js

@@ -0,0 +1,94 @@
+import apollo from "@/lib/apollo.js";
+
+async function GetDetailProduct(id, token = "") {
+  var res = await apollo.query(
+    `
+    query($input: ID!){
+      products(where:{id:$input})
+      {
+        id
+        name
+        price
+        price1
+        price2
+        discount
+        img{
+          url
+        }
+        product_otrs {
+          id
+          name
+          price
+        }
+        product_image_colors{
+          id
+          name
+          img{
+            url
+          }
+        }
+        description
+        spesifikasi_mesin
+        spesifikasi_dimensi
+        spesifikasi_rangka
+        spesifikasi_kelistrikan
+        film
+        stock
+      }
+    }	`,
+    token, {
+      "input": id
+    }
+  );
+  return res;
+}
+
+async function GetProductImgColor(id, token = "") {
+  var res = await apollo.query(
+    `
+      query($input: ID!) {
+        productImageColors(where:{id:$input}) {
+          id
+          name
+          img{
+            url
+          }
+        }
+      }
+    `,
+    token, {
+      "input": id
+    }
+  );
+  return res;
+}
+
+async function GetProduct(filter, token = "") {
+  var res = await apollo.query(
+    `
+    query {
+      products(where: { ${(filter!="")?`name: "${filter}"`:""} }){ 
+        id
+        name
+        price
+        price1
+        price2
+        discount
+        img {
+          url
+        }
+      }
+    }`,
+    token
+  );
+  return res;
+}
+
+module.exports = {
+
+  GetProductImgColor: GetProductImgColor,
+  GetProduct: GetProduct,
+
+  //detail
+  GetDetailProduct: GetDetailProduct,
+};

api/others/product/product_suzuki.js

@@ -0,0 +1,52 @@
+import apollo from "@/lib/apollo.js";
+
+async function GetProductSuzuki(token = "") {
+  var res = await apollo.query(
+    `
+    query{
+      productsSuzukis{
+        id
+        name
+        description
+        price1
+        price2
+        img{
+          url
+        }
+      }
+    }
+
+    `,
+    token
+  );
+  return res;
+}
+
+async function GetDetailProduct(id, token = "") {
+  var res = await apollo.query(
+    `
+    query($input: ID!){
+      productsSuzukis(where:{id:$input})
+      {
+        id
+        name
+        price1
+        price2
+        description
+        stock
+        img{
+          url
+        }
+      }
+    }	`,
+    token, {
+      "input": id
+    }
+  );
+  return res;
+}
+
+module.exports = {
+  GetProductSuzuki: GetProductSuzuki,
+  GetDetailProduct: GetDetailProduct,
+};

api/others/profile/profile.js

@@ -0,0 +1,48 @@
+import apollo from "@/lib/apollo.js";
+
+async function profile(token="") {
+	var res = await apollo.query(
+		`
+    query{
+        users(where: { id: "13" }){
+            id
+            username
+            email
+            firstName
+            lastName
+            telp
+            address
+        }
+    }    
+    `,
+		token
+	);
+	return res;
+}
+
+async function GetDetailProfile(id, token = "") {
+    var res = await apollo.query(
+        `
+        query($input: ID!){
+            users(where:{id:$input})
+            {
+                id
+                username
+                email
+                firstName
+                lastName
+                telp
+                address
+            }
+        }	`,
+        token, {
+            "input": id
+        }
+    );
+    return res;
+}
+
+module.exports = {
+    profile:profile,
+    GetDetailProfile: GetDetailProfile,
+};

api/others/sales/sales-mercy.js

@@ -0,0 +1,60 @@
+import apollo from "@/lib/apollo.js";
+
+async function GetSalesMerci(token = "") {
+    var res = await apollo.query(
+        `
+        query{
+            salesMercies
+            {
+              id
+              name
+              telp
+              wa
+              email
+              job_title
+              company
+              start_on
+              end_on
+              foto{
+                url
+              }
+            }
+          }
+    `,
+        token
+    );
+    return res;
+}
+
+async function GetDetailSalesMerci(id, token = "") {
+  var res = await apollo.query(
+      `
+      query($input: ID!){
+          salesMercies(where:{id:$input})
+          {
+            id
+            name
+            telp
+            wa
+            email
+            job_title
+            company
+            start_on
+            end_on
+            foto{
+              url
+            }
+          }
+        }
+  `,
+  token, {
+    "input": id
+  }
+  );
+  return res;
+}
+
+module.exports = {
+    GetSalesMerci: GetSalesMerci,
+    GetDetailSalesMerci:GetDetailSalesMerci
+};

api/others/shop/cart.js

@@ -0,0 +1,28 @@
+import apollo from "lib/apollo.js";
+
+async function GetCartProduct(token = "") {
+    var res = await apollo.query(
+        `
+        query
+        {
+            carts
+            {
+                id
+                product_otr
+                product_name
+                product_price
+                product_color
+                product_img{
+                    url
+                }
+            }
+        }
+      `,
+        token,
+    );
+    return res;
+}
+
+module.exports = {
+    GetCartProduct: GetCartProduct,
+};

api/others/shop/checkout.js

@@ -0,0 +1,28 @@
+import apollo from "@/lib/apollo.js";
+
+async function GetCheckoutproduct(token = "") {
+    var res = await apollo.query(
+        `
+        query{
+            checkouts{
+              id
+              transaction_id
+              product_img
+              {
+                url
+              }
+              product_name
+              product_color
+              product_quantity
+              product_total
+            }
+          }
+        `,
+        token
+    );
+    return res;
+}
+
+module.exports = {
+    GetCheckoutproduct: GetCheckoutproduct,
+};

api/others/sparepart/sparepart.js

@@ -0,0 +1,259 @@
+import apollo from "@/lib/apollo.js";
+
+async function GetSparepartYGP(filter, token="") {
+	var res = await apollo.query(
+		`
+			query{
+				ygParts(where: { ${(filter!="")?`name: "${filter}"`:""} }){
+					id
+					name
+					img{
+						url
+					}
+					price1
+					price2
+                    discount
+					ygp_units{
+						name
+						part_code
+						price
+					}
+				}
+			}
+    `,
+		token
+	);
+	return res;
+}
+
+async function GetSparepartYamalube(filter, token="") {
+	var res = await apollo.query(
+		`
+        query {
+                yamalubes(where: { ${(filter!="")?`name: "${filter}"`:""} }) {
+                    id
+                    name
+                    part_code
+                    price
+                    description
+                    stock
+                    discount
+                    img{
+                        url
+                    }
+                  }
+            }
+        `,
+		token
+	);
+	return res;
+}
+
+async function GetHelmet(filter, token="") {
+	var res = await apollo.query(
+		`
+        query {
+            helmets(where: { ${(filter!="")?`name: "${filter}"`:""} }){
+                id
+                name
+                price
+                discount
+                img {
+                    url
+                }
+            }
+        }`,
+		token
+	);
+	return res;
+}
+
+async function GetApparel(filter, token="") {
+	var res = await apollo.query(
+		`
+        query {
+            apparels(where: { ${(filter!="")?`name: "${filter}"`:""} }){
+                id
+                name
+                price
+                discount
+                img {
+                    url
+                }
+            }
+        }`,
+		token
+	);
+	return res;
+}
+
+async function GetAcc(filter, token="") {
+	var res = await apollo.query(
+		`
+        query {
+            accessories(where: { ${(filter!="")?`name: "${filter}"`:""} }){
+                id
+                name
+                price
+                discount
+                img {
+                    url
+                }
+            }
+        }`,
+		token
+	);
+	return res;
+}
+
+async function GetYGPDetail(id, token="") {
+	var res = await apollo.query(
+		`
+        query($input: ID!){
+            ygParts(where:{id:$input})
+            {
+							id
+							name
+							img{
+								url
+							}
+                            discount
+							description
+							price1
+							price2
+							ygp_units{
+								name
+								part_code
+								price
+								description
+							}
+            }
+        }	`,
+            token,
+        {
+        "input": id
+        }
+	);
+	return res;
+}
+
+async function GetYamalubeDetail(id, token="") {
+    var res = await apollo.query(
+        `
+        query($input: ID!){
+            yamalubes(where:{id:$input})
+            {
+                id
+                name
+                description
+                price
+                part_code
+                discount
+                img {
+                    url
+                }
+                stock
+            }
+        }   `,
+            token,
+        {
+        "input": id
+        }
+    );
+    return res;
+}
+
+async function GetHelmetDetail(id, token="") {
+    var res = await apollo.query(
+        `
+        query($input: ID!){
+            helmets(where:{id:$input})
+            {
+                id
+                name
+                description
+                price
+                part_code
+                discount
+                img {
+                    url
+                }
+                stock
+            }
+        }   `,
+            token,
+        {
+        "input": id
+        }
+    );
+    return res;
+}
+
+async function GetApparelDetail(id, token="") {
+    var res = await apollo.query(
+        `
+        query($input: ID!){
+            apparels(where:{id:$input})
+            {
+                id
+                name
+                description
+                price
+                part_code
+                discount
+                img {
+                    url
+                }
+                stock
+            }
+        }   `,
+            token,
+        {
+        "input": id
+        }
+    );
+    return res;
+}
+
+async function GetAccDetail(id, token="") {
+    var res = await apollo.query(
+        `
+        query($input: ID!){
+            accessories(where:{id:$input})
+            {
+                id
+                name
+                description
+                price
+                part_code
+                discount
+                img {
+                    url
+                }
+                stock
+            }
+        }   `,
+            token,
+        {
+        "input": id
+        }
+    );
+    return res;
+}
+
+module.exports = {
+
+    //collection type YGP
+    GetSparepartYGP: GetSparepartYGP,
+    GetSparepartYamalube: GetSparepartYamalube,
+    GetHelmet: GetHelmet,
+    GetApparel: GetApparel,
+		GetAcc: GetAcc,
+
+    //Detail
+    GetYGPDetail: GetYGPDetail,
+    GetYamalubeDetail: GetYamalubeDetail,
+    GetHelmetDetail: GetHelmetDetail,
+    GetApparelDetail: GetApparelDetail,
+    GetAccDetail: GetAccDetail,
+};

api/others/transaction/transaction.js

@@ -0,0 +1,288 @@
+import apollo from "@/lib/apollo.js";
+
+async function getTransaction(token = "") {
+  var res = await apollo.query(
+    `
+    query {
+      transactions{
+        id
+        order_id
+        cust_name
+        cust_telp
+        cust_address
+        product_img{
+          url
+        }
+        product_name
+        product_color
+        product_quantity
+        product_courier
+        product_price
+      }
+    }`,
+    token
+  );
+  return res;
+}
+
+async function getTransactionUnpaid(token = "") {
+  var res = await apollo.query(
+    `
+    query {
+      transactions(where: { status: "1" }){
+        id
+        order_id
+        cust_name
+        cust_telp
+        cust_address
+        product_img{
+          url
+        }
+        product_name
+        product_color
+        product_quantity
+        product_courier
+        product_price
+      }
+    }`,
+    token
+  );
+  return res;
+}
+
+async function PayTransactionUnpaid(token = "") {
+  var res = await apollo.query(
+    `
+      query{
+        transactions(where: { status: "1" }){
+          id
+          order_id
+          cust_name
+          cust_telp
+          cust_address
+          product_img{
+            url
+          }
+          product_name
+          product_color
+          product_quantity
+          product_courier
+          product_price
+          }
+      }
+      `,
+    token
+  );
+  return res;
+}
+
+async function getTransactionPrepared(token = "") {
+  var res = await apollo.query(
+    `
+    query {
+      transactions(where: { status: "2" }){
+        id
+        order_id
+        cust_name
+        cust_telp
+        cust_address
+        product_img{
+          url
+        }
+        product_name
+        product_color
+        product_quantity
+        product_courier
+        product_price
+      }
+    }`,
+    token
+  );
+  return res;
+}
+
+async function getTransactionSending(token = "") {
+  var res = await apollo.query(
+    `
+    query {
+      transactions(where: { status: "3" }){
+        id
+        order_id
+        cust_name
+        cust_telp
+        cust_address
+        product_img{
+          url
+        }
+        product_name
+        product_color
+        product_quantity
+        product_courier
+        product_price
+      }
+    }`,
+    token
+  );
+  return res;
+}
+
+async function getTransactionFinished(token = "") {
+  var res = await apollo.query(
+    `
+    query {
+      transactions(where: { status: "4" }){
+        id
+        order_id
+        cust_name
+        cust_telp
+        cust_address
+        product_img{
+          url
+        }
+        product_name
+        product_color
+        product_quantity
+        product_courier
+        product_price
+      }
+    }`,
+    token
+  );
+  return res;
+}
+
+async function AddToCart(content, token = "") {
+  var res = await apollo.mutation(
+    `
+        mutation($input : CartInput!){
+            createCart( input:{data:$input} )
+            {
+                cart{
+                  id
+                }
+            }
+        }
+        `,
+    token,
+    {
+      input: content,
+    }
+  );
+  return res;
+}
+
+async function AddToCheckout(content, token = "") {
+  var res = await apollo.mutation(
+    `
+      mutation($input: CheckoutInput!) {
+        createCheckout(input: { data: $input }) {
+          checkout {
+            id
+          }
+        }
+      }
+    
+    `,
+    token,
+    {
+      input: content,
+    }
+  );
+  return res;
+}
+
+async function newTransactionYamaha(content, token = "") {
+  var res = await apollo.mutation(
+    `
+        mutation($input : TransactionInput!){
+            createTransaction( input:{data:$input} )
+            {
+                transaction{
+                  id
+                }
+            }
+        }
+        `,
+    token,
+    {
+      input: content,
+    }
+  );
+  return res;
+}
+
+async function newTransactionSuzuki(content, token = "") {
+  var res = await apollo.mutation(
+    `
+      mutation($input : TransactionInput!){
+          createTransaction( input:{data:$input} )
+          {
+              transactionSuzuki{
+                id
+              }
+          }
+      }
+      `,
+    token,
+    {
+      input: content,
+    }
+  );
+  return res;
+}
+
+async function newTransactionHonda(content, token = "") {
+  var res = await apollo.mutation(
+    `
+      mutation($input : TransactionInput!){
+          createTransaction( input:{data:$input} )
+          {
+              transactionHonda{
+                id
+              }
+          }
+      }
+      `,
+    token,
+    {
+      input: content,
+    }
+  );
+  return res;
+}
+
+async function newTransactionHino(content, token = "") {
+  var res = await apollo.mutation(
+    `
+      mutation($input : TransactionInput!){
+          createTransaction( input:{data:$input} )
+          {
+              transactionHino{
+                id
+              }
+          }
+      }
+      `,
+    token,
+    {
+      input: content,
+    }
+  );
+  return res;
+}
+
+module.exports = {
+  newTransactionYamaha: newTransactionYamaha,
+  newTransactionSuzuki: newTransactionSuzuki,
+  newTransactionHonda: newTransactionHonda,
+  newTransactionHino: newTransactionHino,
+  getTransaction: getTransaction,
+  getTransactionUnpaid: getTransactionUnpaid,
+  PayTransactionUnpaid: PayTransactionUnpaid,
+  getTransactionPrepared: getTransactionPrepared,
+  getTransactionSending: getTransactionSending,
+  getTransactionFinished: getTransactionFinished,
+
+  AddToCart: AddToCart,
+  AddToCheckout:AddToCheckout,
+};

api/subscription/subscription.js

@@ -0,0 +1,26 @@
+import apollo from "@/lib/apollo.js";
+
+async function subscribe(email,token="") {
+	var res = await apollo.mutation(
+        `
+            mutation($input: SubscriptionInput!){
+                createSubscription(data:$input){
+                    data{
+                        id
+                    }
+                }
+            }
+        `,
+        token,
+        {
+          input: {
+            Email:email,
+            publishedAt:new Date()
+          },
+        }
+    );
+	return res;
+}
+
+
+module.exports = {subscribe};

components/Common/BlogPost.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import Link from 'next/link';
+import * as Icon from 'react-feather';
+
+const BlogPost = () => {
+    return (
+        <div className="blog-area pt-80 pb-50">
+            <div className="container">
+                <div className="section-title">
+                    <h2>The News from Our Blog</h2>
+                    <div className="bar"></div>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                </div>
+
+                <div className="row justify-content-center">
+                    <div className="col-lg-4 col-md-6">
+                        <div className="single-blog-post">
+                            <div className="blog-image">
+                                <Link href="/blog-details">
+                                    <a>
+                                        <img src="/images/blog-image/blog1.jpg" alt="image" />
+                                    </a>
+                                </Link>
+
+                                <div className="date">
+                                    <Icon.Calendar /> March 15, 2021
+                                </div>
+                            </div>
+
+                            <div className="blog-post-content">
+                                <h3>
+                                    <Link href="/blog-details">
+                                        <a>The Security Risks of Changing Package Owners</a>
+                                    </Link>
+                                </h3>
+
+                                <span>
+                                    By <Link href='/#'><a >Admin</a></Link>
+                                </span>
+
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse.</p>
+
+                                <Link href="/blog-details">
+                                    <a className="read-more-btn">Read More <Icon.ArrowRight /></a>
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="col-lg-4 col-md-6">
+                        <div className="single-blog-post">
+                            <div className="blog-image">
+                                <Link href="/blog-details">
+                                    <a>
+                                        <img src="/images/blog-image/blog2.jpg" alt="image" />
+                                    </a>
+                                </Link>
+
+                                <div className="date">
+                                    <Icon.Calendar /> March 17, 2021
+                                </div>
+                            </div>
+
+                            <div className="blog-post-content">
+                                <h3>
+                                    <Link href="/blog-details">
+                                        <a>Tips to Protecting Your Business and Family</a>
+                                    </Link>
+                                </h3>
+
+                                <span>
+                                    By <Link href='/#'><a>Smith</a></Link>
+                                </span>
+
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse.</p>
+
+                                <Link href="/blog-details">
+                                    <a className="read-more-btn">Read More <Icon.ArrowRight /></a>
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="col-lg-4 col-md-6">
+                        <div className="single-blog-post">
+                            <div className="blog-image">
+                                <Link href="/blog-details">
+                                    <a>
+                                        <img src="/images/blog-image/blog3.jpg" alt="image" />
+                                    </a>
+                                </Link>
+
+                                <div className="date">
+                                    <Icon.Calendar /> March 19, 2021
+                                </div>
+                            </div>
+
+                            <div className="blog-post-content">
+                                <h3>
+                                    <Link href="/blog-details">
+                                        <a>Protect Your Workplace from Cyber Attacks</a>
+                                    </Link>
+                                </h3>
+
+                                <span>
+                                    By <Link href='/#'><a>John</a></Link>
+                                </span>
+
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse.</p>
+
+                                <Link href="/blog-details">
+                                    <a className="read-more-btn">Read More <Icon.ArrowRight /></a>
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default BlogPost;  

components/Common/BlogPostStyleThree.js

@@ -0,0 +1,132 @@
+import React from 'react';
+import Link from 'next/link';
+import dynamic from 'next/dynamic';
+const OwlCarousel = dynamic(import('react-owl-carousel3'));
+
+const options = {
+    loop: true,
+    nav: false,
+    dots: true,
+    autoplayHoverPause: true,
+    autoplay: true,
+    smartSpeed: 1000,
+    autoplayTimeout: 5000,
+    margin: 30,
+    responsive: {
+        0: {
+            items: 1,
+        },
+        768: {
+            items: 2,
+        },
+        992: {
+            items: 3,
+        }
+    }
+};
+
+const BlogPostStyleThree = () => {
+    const [display, setDisplay] = React.useState(false);
+
+    React.useEffect(() => {
+        setDisplay(true);
+    }, [])
+
+    return (
+        <div className="blog-area ptb-80">
+			<div className="container">
+				<div className="section-title text-left">
+					<h2>Our Recent <span>News</span></h2>
+					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+				</div>
+
+                {display ? <OwlCarousel 
+                    className="blog-slides owl-carousel owl-theme"
+                    {...options}
+                >   
+                    <div className="single-blog-item">
+                        <div className="post-image">
+                            <Link href="/blog-details">
+                                <a><img src="/images/blog-image/blog1.jpg" alt="image" /></a>
+                            </Link>
+                        </div>
+
+                        <div className="post-content">
+                            <ul className="post-meta">
+                                <li>By <a >Admin</a></li>
+                                <li>20 February 2020</li>
+                            </ul>
+                            <h3>
+                                <Link href="/blog-details">
+                                    <a>The security risks of changing package owners</a>
+                                </Link>
+                            </h3>
+                        </div>
+                    </div>
+
+                    <div className="single-blog-item">
+                        <div className="post-image">
+                            <Link href="/blog-details">
+                                <a><img src="/images/blog-image/blog2.jpg" alt="image" /></a>
+                            </Link>
+                        </div>
+
+                        <div className="post-content">
+                            <ul className="post-meta">
+                                <li>By <a >Admin</a></li>
+                                <li>21 February 2020</li>
+                            </ul>
+                            <h3>
+                                <Link href="/blog-details">
+                                    <a>Tips to Protecting Your Business and Family</a>
+                                </Link>
+                            </h3>
+                        </div>
+                    </div>
+
+                    <div className="single-blog-item">
+                        <div className="post-image">
+                            <Link href="/blog-details">
+                                <a><img src="/images/blog-image/blog3.jpg" alt="image" /></a>
+                            </Link>
+                        </div>
+
+                        <div className="post-content">
+                            <ul className="post-meta">
+                                <li>By <a >Admin</a></li>
+                                <li>22 February 2020</li>
+                            </ul>
+                            <h3>
+                                <Link href="/blog-details">
+                                    <a>Protect Your Workplace from Cyber Attacks</a>
+                                </Link>
+                            </h3>
+                        </div>
+                    </div>
+
+                    <div className="single-blog-item">
+                        <div className="post-image">
+                            <Link href="/blog-details">
+                                <a><img src="/images/blog-image/blog3.jpg" alt="image" /></a>
+                            </Link>
+                        </div>
+
+                        <div className="post-content">
+                            <ul className="post-meta">
+                                <li>By <a >Admin</a></li>
+                                <li>22 February 2020</li>
+                            </ul>
+                            <h3>
+                                <Link href="/blog-details">
+                                    <a>Four New WordPress.com Color Schemes</a>
+                                </Link>
+                            </h3>
+                        </div>
+                    </div>
+                </OwlCarousel> : ''}
+			</div>
+		</div>
+    )
+}
+
+export default BlogPostStyleThree;  

components/Common/BlogPostStyleTwo.js

@@ -0,0 +1,140 @@
+import React from 'react';
+import Link from 'next/link';
+import * as Icon from 'react-feather';
+
+const BlogPostStyleTwo = () => {
+    return (
+        <div className="blog-area pt-80 pb-50">
+            <div className="container">
+                <div className="section-title st-fs-28">
+                    <span className="sub-title">News</span>
+                    <h2>The News from Our Blog</h2>
+                    <div className="bar"></div>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                </div>
+
+                <div className="row justify-content-center">
+                    <div className="col-lg-4 col-md-6">
+                        <div className="single-blog-post-item">
+                            <div className="post-image">
+                                <Link href="/blog-details">
+                                    <a>
+                                        <img src="/images/blog-image/blog1.jpg" alt="image" />
+                                    </a>
+                                </Link>
+                            </div>
+
+                            <div className="post-content">
+                                <ul className="post-meta">
+                                    <li>
+                                        <Link href='/#'><a>Admin</a></Link>
+                                    </li>
+                                    <li>August 15, 2021</li>
+                                </ul>
+
+                                <h3>
+                                    <Link href="/blog-details">
+                                        <a>The security risks of changing package owners</a>
+                                    </Link>
+                                </h3>
+
+                                <Link href="/blog-details">
+                                    <a className="read-more-btn">
+                                        Read More <Icon.PlusCircle />
+                                    </a>
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="col-lg-4 col-md-6">
+                        <div className="single-blog-post-item">
+                            <div className="post-image">
+                                <Link href="/blog-details">
+                                    <a>
+                                        <img src="/images/blog-image/blog2.jpg" alt="image" />
+                                    </a>
+                                </Link>
+                            </div>
+
+                            <div className="post-content">
+                                <ul className="post-meta">
+                                    <li>
+                                        <Link href='/#'><a>Admin</a></Link>
+                                    </li>
+                                    <li>August 15, 2021</li>
+                                </ul>
+
+                                <h3>
+                                    <Link href="/blog-details">
+                                        <a>Tips to Protecting Your Business and Family</a>
+                                    </Link>
+                                </h3>
+
+                                <Link href="/blog-details">
+                                    <a className="read-more-btn">
+                                        Read More <Icon.PlusCircle />
+                                    </a>
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="col-lg-4 col-md-6">
+                        <div className="single-blog-post-item">
+                            <div className="post-image">
+                                <Link href="/blog-details">
+                                    <a>
+                                        <img src="/images/blog-image/blog3.jpg" alt="image" />
+                                    </a>
+                                </Link>
+                            </div>
+
+                            <div className="post-content">
+                                <ul className="post-meta">
+                                    <li>
+                                        <Link href='/#'><a>Admin</a></Link>
+                                    </li>
+                                    <li>August 15, 2021</li>
+                                </ul>
+                                <h3>
+                                    <Link href="/blog-details">
+                                        <a>Protect Your Workplace from Cyber Attacks</a>
+                                    </Link>
+                                </h3>
+
+                                <Link href="/blog-details">
+                                    <a className="read-more-btn">
+                                        Read More <Icon.PlusCircle />
+                                    </a>
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Shape Images */}
+            <div className="shape2 rotateme">
+                <img src="/images/shape2.svg" alt="shape"/>
+            </div>
+            <div className="shape3">
+                <img src="/images/shape3.svg" alt="shape" />
+            </div>
+            <div className="shape4">
+                <img src="/images/shape4.svg" alt="shape" />
+            </div>
+            <div className="shape6 rotateme">
+                <img src="/images/shape4.svg" alt="shape" />
+            </div>
+            <div className="shape7">
+                <img src="/images/shape4.svg" alt="shape" />
+            </div>
+            <div className="shape8 rotateme">
+                <img src="/images/shape2.svg" alt="shape" />
+            </div>
+        </div>
+    );
+}
+
+export default BlogPostStyleTwo;

components/Common/CTA.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Link from 'next/link';
+
+const CTA = () => {
+    return (
+        <div className="cta-area ptb-80">
+            <div className="container">
+                <div className="row align-items-center">
+                    <div className="col-lg-7 col-md-6">
+                        <div className="cta-content">
+                            <h3>Sign up for web hosting today!</h3>
+                        </div>
+                    </div>
+
+                    <div className="col-lg-5 col-md-6">
+                        <div className="cta-right-content">
+                            <div className="hosting-price">
+                                <span>Starting at only</span>
+                                <h4>$4.75/mo*</h4>
+                            </div>
+
+                            <div className="buy-btn">
+                                <Link href="/contact">
+                                    <a className="btn btn-primary">Get Started</a>
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default CTA;

components/Common/CTAStyleTwo.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Link from 'next/link';
+
+const CTAStyleTwo = () => {
+    return (
+        <div className="agency-cta-area ptb-80">
+            <div className="container">
+                <div className="agency-cta-content">
+                    <h2>Do you have any projects?</h2>
+
+                    <Link href="/contact">
+                        <a className="btn btn-gradient">Contact Us</a>
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default CTAStyleTwo;

components/Common/Feedback.js

@@ -0,0 +1,228 @@
+import React from 'react';
+import Slider from "react-slick";
+import * as Icon from 'react-feather';
+
+const NextArrow = (props) => {
+    const { onClick } = props;
+    return (
+        <button
+            className="next-arrow slick-arrow"
+            onClick={onClick}
+        >
+            <Icon.ArrowRight />
+        </button>
+    );
+}
+  
+const PrevArrow = (props) => {
+    const { onClick } = props;
+    return (
+        <button 
+            className="prev-arrow slick-arrow"
+            onClick={onClick}
+        >
+            <Icon.ArrowLeft />
+        </button>
+    );
+}
+
+class Feedback extends React.Component {
+    state = {
+        imagesSlider: null,
+        thumbnailsSlider: null,
+        oldSlide: 0,
+        activeSlide: 0,
+        activeSlide2: 0
+    };
+    
+    componentDidMount() {
+        this.setState({
+            imagesSlider: this.slider1,
+            thumbnailsSlider: this.slider2
+        });
+    }
+
+    renderSliderFullContent = () => {
+        return DEFAULT_PROPS.map(({name,profession,image,content}) => {
+            return (
+                <div key={name}>
+                    <div className="item">
+                        <div className="single-feedback">
+                            <div className="client-img">
+                                <img src={image} alt="image" />
+                            </div>
+
+                            <h3>{name}</h3>
+                            <span>{profession}</span>
+                            <p>{content}</p>
+                        </div>
+                    </div>
+                </div>
+            )
+        })
+    }
+
+    renderSliderImages = () => {
+        return DEFAULT_PROPS.map(({name, image}) => {
+            return (
+                <div key={name}>
+                    <div className="item">
+                        <div className="img-fill">
+                            <img src={image} alt="client" />
+                        </div>
+                    </div>
+                </div>
+            )
+        })
+    }
+
+    render() {
+        const sliderSettings1 = {
+            speed: 100,
+            slidesToShow: 1,
+            slidesToScroll: 1,
+            cssEase: 'linear',
+            fade: true,
+            autoplay: true,
+            draggable: true,
+            asNavFor: this.state.thumbnailsSlider,
+            draggable: false,
+            arrows: false,
+            nextArrow: false,
+            prevArrow: false
+        }
+        
+        const sliderSettings2 = {
+            speed: 300,
+            slidesToShow: 5,
+            slidesToScroll: 1,
+            cssEase: 'linear',
+            autoplay: true,
+            centerMode: true,
+            draggable: false,
+            focusOnSelect: true,
+            asNavFor: this.state.imagesSlider,
+            nextArrow: <NextArrow />,
+            prevArrow: <PrevArrow />,
+            beforeChange: (current, next) => this.setState({ oldSlide: current, activeSlide: next }),
+            afterChange: current => this.setState({ activeSlide2: current })
+        }
+
+        return (
+            <section className="feedback-area ptb-80 bg-f7fafd">
+                <div className="container">
+                    <div className="section-title">
+                        <h2>What users Saying</h2>
+                        <div className="bar"></div>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                    </div>
+
+                    <div className="feedback-slides">
+                        <div className="client-feedback">
+                            <div>
+                                <Slider
+                                    ref={slider => (this.slider1 = slider)}
+                                    {...sliderSettings1}
+                                >
+                                    {
+                                        this.renderSliderFullContent()
+                                    }
+                                </Slider>
+                            </div>
+                        </div>
+
+                        <div className="client-thumbnails">
+                            <div>
+                                <Slider
+                                    ref={slider => (this.slider2 = slider)}
+                                    {...sliderSettings2}
+                                >
+                                    {
+                                        this.renderSliderImages()
+                                    }
+                                </Slider>
+                            </div>
+                        </div>
+
+                    </div>
+
+                </div>
+
+                <div className="shape1">
+                    <img src="/images/shape1.png" alt="shape" />
+                </div>
+                <div className="shape2 rotateme">
+                    <img src="/images/shape2.svg" alt="shape" />
+                </div>
+                <div className="shape4">
+                    <img src="/images/shape4.svg" alt="shape" />
+                </div>
+                <div className="shape5">
+                    <img src="/images/shape5.png" alt="shape" />
+                </div>
+                <div className="shape6 rotateme">
+                    <img src="/images/shape4.svg" alt="shape" />
+                </div>
+                <div className="shape7">
+                    <img src="/images/shape4.svg" alt="shape" />
+                </div>
+                <div className="shape8 rotateme">
+                    <img src="/images/shape2.svg" alt="shape" />
+                </div>
+            </section>
+        );
+    }
+}
+
+const DEFAULT_PROPS = [
+    {
+        name: 'David Gale', 
+        profession: 'Web Developer',
+        image: '/images/client-image/client2.jpg', 
+        content: 'Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+    },
+    {
+        name: 'Matt Damon', 
+        profession: 'Software Engineer',
+        image: '/images/client-image/client4.jpg', 
+        content: 'Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+    },
+    {
+        name: 'Nicky Parsons', 
+        profession: 'Fictional Character',
+        image: '/images/client-image/client1.jpg', 
+        content: 'Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+    },
+    {
+        name: 'Jason Momoa', 
+        profession: 'American Actor',
+        image: '/images/client-image/client5.jpg', 
+        content: 'Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+    },
+    {
+        name: 'Gennady Korotkevich', 
+        profession: 'Sport Programmer',
+        image: '/images/client-image/client3.jpg', 
+        content: 'Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+    },
+    {
+        name: 'Petr Mitrichev', 
+        profession: 'Russian Programmer',
+        image: '/images/client-image/client3.jpg', 
+        content: 'Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+    },
+    {
+        name: 'Reid W. Barton', 
+        profession: 'Mathematics',
+        image: '/images/client-image/client2.jpg', 
+        content: 'Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+    },
+    {
+        name: 'Lisa Sauermann', 
+        profession: 'Mathematician',
+        image: '/images/client-image/client1.jpg', 
+        content: 'Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+    }
+];
+
+export default Feedback;

components/Common/FeedbackStyleFive.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import dynamic from 'next/dynamic';
+const OwlCarousel = dynamic(import('react-owl-carousel3'));
+
+const options = {
+    loop: false,
+    nav: false,
+    smartSpeed: 1000,
+    autoplayTimeout: 5000,
+    dots: true,
+    autoplayHoverPause: true,
+    autoplay: true,
+    items: 1,
+};
+
+const FeedbackStyleFive = () => {
+    const [display, setDisplay] = React.useState(false);
+
+    React.useEffect(() => {
+        setDisplay(true);
+    }, [])
+
+    return (
+        <div className="agency-portfolio-feedback-area ptb-80">
+            <div className="container">
+                {display ? <OwlCarousel 
+                    className="agency-portfolio-feedback-slides owl-carousel owl-theme"
+                    {...options}
+                >  
+                    <div className="agency-portfolio-feedback-item">
+                        <img src="/images/client-image/client1.jpg" alt="image" />
+                        <p>Pellentesque sed purus eu urna vulputate interdum quis sit amet sapien. Pellentesque porta mauris at orci sagittis commodo. Curabitur aliquam nibh odio, vel ornare nisl volutpat quis. Maecenas congue dapibus lacus id fringilla. Vestibulum id augue massa. Proin sed neque dapibus, vulputate ligula eget, aliquam eros.</p>
+                    </div>
+
+                    <div className="agency-portfolio-feedback-item">
+                        <img src="/images/client-image/client2.jpg" alt="image" />
+                        <p>Pellentesque sed purus eu urna vulputate interdum quis sit amet sapien. Pellentesque porta mauris at orci sagittis commodo. Curabitur aliquam nibh odio, vel ornare nisl volutpat quis. Maecenas congue dapibus lacus id fringilla. Vestibulum id augue massa. Proin sed neque dapibus, vulputate ligula eget, aliquam eros.</p>
+                    </div>
+
+                    <div className="agency-portfolio-feedback-item">
+                        <img src="/images/client-image/client3.jpg" alt="image" />
+                        <p>Pellentesque sed purus eu urna vulputate interdum quis sit amet sapien. Pellentesque porta mauris at orci sagittis commodo. Curabitur aliquam nibh odio, vel ornare nisl volutpat quis. Maecenas congue dapibus lacus id fringilla. Vestibulum id augue massa. Proin sed neque dapibus, vulputate ligula eget, aliquam eros.</p>
+                    </div>
+                </OwlCarousel> : ''}
+            </div>
+        </div>
+    )
+}
+
+export default FeedbackStyleFive;  

components/Common/FeedbackStyleFour.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import OwlCarousel from 'react-owl-carousel3';
+import * as Icon from 'react-feather';
+
+const options = {
+    loop: false,
+    nav: false,
+    dots: true,
+    autoplay: true,
+    smartSpeed: 1000,
+    autoplayTimeout: 5000,
+    items: 1,
+    animateOut: 'fadeOut',
+}
+
+const FeedbackStyleFour = () => {
+    const [display, setDisplay] = React.useState(false);
+
+    React.useEffect(() => {
+        setDisplay(true);
+    }, [])
+
+    return (
+        <div className="ml-feedback-area ptb-80">
+            <div className="container">
+                <div className="section-title">
+                    <h2>Our Clients Feedback</h2>
+                    <div className="bar"></div>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                </div>
+
+                {display ? <OwlCarousel 
+                    className="ml-feedback-slides owl-carousel owl-theme"
+                    {...options}
+                > 
+                    <div className="single-ml-feedback-item">
+                        <div className="client-info">
+                            <img src="/images/client-image/client1.jpg" alt="image" />
+                            <h3>Sarah Taylor</h3>
+                            <span>CEO at Envato</span>
+                        </div>
+                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid ullam harum sit. Accusantium veritatis dolore ducimus illum, cumque excepturi, autem rerum illo amet placeat odit corporis!</p>
+
+                        <div className="rating">
+                            <Icon.Star />
+                            <Icon.Star />
+                            <Icon.Star />
+                            <Icon.Star />
+                            <Icon.Star />
+                        </div>
+                    </div>
+
+                    <div className="single-ml-feedback-item">
+                        <div className="client-info">
+                            <img src="/images/client-image/client2.jpg" alt="image" />
+                            <h3>Steven Smith</h3>
+                            <span>CEO at Envato</span>
+                        </div>
+                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid ullam harum sit. Accusantium veritatis dolore ducimus illum, cumque excepturi, autem rerum illo amet placeat odit corporis!</p>
+
+                        <div className="rating">
+                            <Icon.Star />
+                            <Icon.Star />
+                            <Icon.Star />
+                            <Icon.Star />
+                            <Icon.Star />
+                        </div>
+                    </div>
+
+                    <div className="single-ml-feedback-item">
+                        <div className="client-info">
+                            <img src="/images/client-image/client3.jpg" alt="image" />
+                            <h3>James Eva</h3>
+                            <span>CEO at Envato</span>
+                        </div>
+                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid ullam harum sit. Accusantium veritatis dolore ducimus illum, cumque excepturi, autem rerum illo amet placeat odit corporis!</p>
+
+                        <div className="rating">
+                            <Icon.Star />
+                            <Icon.Star />
+                            <Icon.Star />
+                            <Icon.Star />
+                            <Icon.Star />
+                        </div>
+                    </div>
+                </OwlCarousel> : ''}
+            </div>
+
+            {/* Shape Images */}
+            <div className="shape1">
+                <img src="/images/shape1.png" alt="shape" />
+            </div>
+            <div className="shape2 rotateme">
+                <img src="/images/shape2.svg" alt="shape" />
+            </div>
+            <div className="shape3">
+                <img src="/images/shape3.svg" alt="shape" />
+            </div>
+            <div className="shape4">
+                <img src="/images/shape4.svg" alt="shape" />
+            </div>
+            <div className="shape7">
+                <img src="/images/shape4.svg" alt="shape" />
+            </div>
+            <div className="shape8 rotateme">
+                <img src="/images/shape2.svg" alt="shape" />
+            </div>
+        </div>
+    );
+}
+
+export default FeedbackStyleFour;

components/Common/FeedbackStyleThree.js

@@ -0,0 +1,120 @@
+import React from 'react';
+import dynamic from 'next/dynamic';
+const OwlCarousel = dynamic(import('react-owl-carousel3'));
+import * as Icon from 'react-feather';
+
+const options = {
+    loop: false,
+    nav: false,
+    dots: true,
+    autoplay: true,
+    smartSpeed: 1000,
+    autoplayTimeout: 5000,
+    items: 1,
+    animateOut: 'fadeOut',
+}
+
+const FeedbackStyleThree = () => {
+    const [display, setDisplay] = React.useState(false);
+
+    React.useEffect(() => {
+        setDisplay(true);
+    }, [])
+
+    return (
+        <div className="ml-feedback-area ptb-80">
+            <div className="container">
+                <div className="section-title st-fs-28">
+                    <span className="sub-title">Testimonials</span>
+                    <h2>Our Clients Feedback</h2>
+                    <div className="bar"></div>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                </div>
+
+                {display ? <OwlCarousel 
+                    className="ml-feedback-slides owl-carousel owl-theme"
+                    {...options}
+                >  
+                    <div className="single-testimonials-item">
+                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid ullam harum sit. Accusantium veritatis dolore ducimus illum, cumque excepturi, autem rerum illo amet placeat odit corporis!</p>
+
+                        <div className="client-info">
+                            <img src="/images/client-image/client1.jpg" alt="image" />
+
+                            <div className="rating">
+                                <Icon.Star />
+                                <Icon.Star />
+                                <Icon.Star />
+                                <Icon.Star />
+                                <Icon.Star />
+                            </div>
+
+                            <h3>Sarah Taylor</h3>
+                            <span>CEO at Envato</span>
+                        </div> 
+                    </div>
+
+                    <div className="single-testimonials-item">
+                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid ullam harum sit. Accusantium veritatis dolore ducimus illum, cumque excepturi, autem rerum illo amet placeat odit corporis!</p>
+
+                        <div className="client-info">
+                            <img src="/images/client-image/client2.jpg" alt="image" />
+
+                            <div className="rating">
+                                <Icon.Star />
+                                <Icon.Star />
+                                <Icon.Star />
+                                <Icon.Star />
+                                <Icon.Star />
+                            </div>
+
+                            <h3>Steven Smith</h3>
+                            <span>CEO at Envato</span>
+                        </div>
+                    </div>
+
+                    <div className="single-testimonials-item">
+                        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid ullam harum sit. Accusantium veritatis dolore ducimus illum, cumque excepturi, autem rerum illo amet placeat odit corporis!</p>
+
+                        <div className="client-info">
+                            <img src="/images/client-image/client3.jpg" alt="image" />
+
+                            <div className="rating">
+                                <Icon.Star />
+                                <Icon.Star />
+                                <Icon.Star />
+                                <Icon.Star />
+                                <Icon.Star />
+                            </div>
+
+                            <h3>James Eva</h3>
+                            <span>CEO at Envato</span>
+                        </div>
+                    </div>
+                </OwlCarousel> : ''}
+            </div>
+
+            {/* Shape Images */}
+            <div className="user-shape1">
+                <img src="/images/agency-image/agency-user1.png" alt="shape" />
+            </div>
+            <div className="user-shape2">
+                <img src="/images/agency-image/agency-user2.png" alt="shape" />
+            </div>
+            <div className="user-shape3">
+                <img src="/images/agency-image/agency-user3.png" alt="shape" />
+            </div>
+            <div className="user-shape4">
+                <img src="/images/agency-image/agency-user4.png" alt="shape" />
+            </div>
+            <div className="user-shape5">
+                <img src="/images/agency-image/agency-user5.png" alt="shape" />
+            </div>
+            <div className="user-shape6">
+                <img src="/images/agency-image/agency-user6.png" alt="shape" />
+            </div>
+        </div>
+    );
+}
+
+export default FeedbackStyleThree;

components/Common/FeedbackStyleTwo.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import dynamic from 'next/dynamic';
+const OwlCarousel = dynamic(import('react-owl-carousel3'));
+
+const options = {
+    loop: false,
+    nav: false,
+    dots: true,
+    autoplay: true,
+    smartSpeed: 1000,
+    autoplayTimeout: 5000,
+    items: 1,
+}
+
+const FeedbackStyleTwo = () => {
+    const [display, setDisplay] = React.useState(false);
+
+    React.useEffect(() => {
+        setDisplay(true);
+    }, [])
+    return (
+        <div className="feedback-area ptb-80">
+            <div className="container">
+                <div className="section-title">
+                    <h2>What users Saying</h2>
+                    <div className="bar"></div>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                </div>
+
+                {display ? <OwlCarousel 
+                    className="testimonials-slides owl-carousel owl-theme"
+                    {...options}
+                >
+                    <div className="single-feedback-item">
+                        <div className="client-info align-items-center">
+                            <div className="image">
+                                <img 
+                                    src="/images/client-image/client1.jpg"
+                                    alt="image"
+                                />
+                            </div>
+
+                            <div className="title">
+                                <h3>Steve Lucy</h3>
+                                <span>Lead Developer at Envato</span>
+                            </div>
+                        </div>
+
+                        <p>Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                    </div>
+
+                    <div className="single-feedback-item">
+                        <div className="client-info align-items-center">
+                            <div className="image">
+                                <img 
+                                    src="/images/client-image/client2.jpg"
+                                    alt="image"
+                                />
+                            </div>
+
+                            <div className="title">
+                                <h3>David Luiz</h3>
+                                <span>Lead Developer at Envato</span>
+                            </div>
+                        </div>
+
+                        <p>Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                    </div>
+
+                    <div className="single-feedback-item">
+                        <div className="client-info align-items-center">
+                            <div className="image">
+                                <img 
+                                    src="/images/client-image/client3.jpg"
+                                    alt="image"
+                                />
+                            </div>
+
+                            <div className="title">
+                                <h3>Marta Smith</h3>
+                                <span>Lead Developer at Envato</span>
+                            </div>
+                        </div>
+
+                        <p>Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                    </div>
+                </OwlCarousel> : ''}
+            </div>
+
+            {/* Shape Images */}
+            <div className="shape1">
+                <img src="/images/shape1.png" alt="shape" />
+            </div>
+            <div className="shape2 rotateme">
+                <img src="/images/shape2.svg" alt="shape" />
+            </div>
+            <div className="shape4">
+                <img src="/images/shape4.svg" alt="shape" />
+            </div>
+            <div className="shape5">
+                <img src="/images/shape5.png" alt="shape" />
+            </div>
+            <div className="shape6 rotateme">
+                <img src="/images/shape4.svg" alt="shape" />
+            </div>
+            <div className="shape7">
+                <img src="/images/shape4.svg" alt="shape" />
+            </div>
+            <div className="shape8 rotateme">
+                <img src="/images/shape2.svg" alt="shape" />
+            </div>
+        </div>
+    );
+}
+
+export default FeedbackStyleTwo;

components/Common/FunFactsArea.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import Link from 'next/link';
+
+const FunFactsArea = () => {
+    return (
+        <div className="funfacts-area ptb-80">
+            <div className="container">
+                <div className="section-title">
+                    <h2>We always try to understand users expectation</h2>
+                    <div className="bar"></div>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                </div>
+
+                <div className="row">
+                    <div className="col-lg-3 col-md-3 col-6">
+                        <div className="funfact">
+                            <h3>180K</h3>
+                            <p>Downloaded</p>
+                        </div>
+                    </div>
+
+                    <div className="col-lg-3 col-md-3 col-6">
+                        <div className="funfact">
+                            <h3>20K</h3>
+                            <p>Feedback</p>
+                        </div>
+                    </div>
+
+                    <div className="col-lg-3 col-md-3 col-6">
+                        <div className="funfact">
+                            <h3>500+</h3>
+                            <p>Workers</p>
+                        </div>
+                    </div>
+
+                    <div className="col-lg-3 col-md-3 col-6">
+                        <div className="funfact">
+                            <h3>70+</h3>
+                            <p>Contributors</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="contact-cta-box">
+                    <h3>Have any question about us?</h3>
+                    <p>Don't hesitate to contact us</p>
+
+                    <Link href="/contact">
+                        <a className="btn btn-primary">Contact Us</a>
+                    </Link>
+                </div>
+
+                <div className="map-bg">
+                    <img src="/images/map.png" alt="map" />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default FunFactsArea;

components/Common/Newsletter.js

@@ -0,0 +1,46 @@
+import React from 'react';
+
+const Newsletter = () => {
+    return (
+        <div className="free-trial-area">
+            <div className="container-fluid">
+                <div className="row align-items-center">
+                    <div className="col-lg-6 col-md-12">
+                        <div className="free-trial-image">
+                            <img src="/images/free-trial-img.png" alt="image" />
+                        </div>
+                    </div>
+
+                    <div className="col-lg-6 col-md-12">
+                        <div className="free-trial-content">
+                            <h2>Start your free trial</h2>
+
+                            <form className="newsletter-form">
+                                <input type="email" className="input-newsletter" placeholder="Enter your business email here" />
+                                <button type="submit">Sign Up Free</button>
+                            </form>
+
+                            <p>Test out the Machine Learning features for 14 days, no credit card required.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Shape Images */}
+            <div className="shape2 rotateme">
+                <img src="/images/shape2.svg" alt="shape" />
+            </div>
+            <div className="shape4">
+                <img src="/images/shape4.svg" alt="shape" />
+            </div>
+            <div className="shape7">
+                <img src="/images/shape4.svg" alt="shape" />
+            </div>
+            <div className="shape8 rotateme">
+                <img src="/images/shape2.svg" alt="shape" />
+            </div>
+        </div>
+    );
+}
+
+export default Newsletter;

components/Common/NewsletterStyleTwo.js

@@ -0,0 +1,32 @@
+import React from 'react'; 
+
+const NewsletterStyleTwo = () => {
+    return (
+        <div className="newsletter-area">
+            <div className="container-fluid">
+                <div className="row align-items-center">
+                    <div className="col-lg-6 col-md-12">
+                        <div className="newsletter-image">
+                            <img src="/images/bigdata-analytics/newsletter.jpg" alt="image" />
+                        </div>
+                    </div>
+    
+                    <div className="col-lg-6 col-md-12 p-0">
+                        <div className="newsletter-content">
+                            <h2>Start your free trial</h2>
+
+                            <form className="newsletter-form">
+                                <input type="email" className="input-newsletter" placeholder="Enter your business email here" />
+                                <button type="submit">Sign Up Free</button>
+                            </form>
+                            
+                            <p>Test out the Big Data Analytics features for 14 days, no credit card required.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default NewsletterStyleTwo;  

components/Common/PageBanner.js

@@ -0,0 +1,43 @@
+import React from 'react';
+
+const PageBanner = ({pageTitle}) => {
+    return (
+        <div className="page-title-area">
+            <div className="d-table">
+                <div className="d-table-cell">
+                    <div className="container">
+                        <h2>{pageTitle}</h2>
+                    </div>
+                </div>
+            </div>
+
+            {/* Shape Images */}
+            {/* <div className="shape1">
+                <img src="/images/shape1.png" alt="shape" />
+            </div>
+			<div className="shape2 rotateme">
+                <img src="/images/shape2.svg" alt="shape" />
+            </div>
+			<div className="shape3">
+                <img src="/images/shape3.svg" alt="shape" />
+            </div>
+			<div className="shape4">
+                <img src="/images/shape4.svg" alt="shape" />
+            </div>
+			<div className="shape5">
+                <img src="/images/shape5.png" alt="shape" />
+            </div>
+			<div className="shape6 rotateme">
+                <img src="/images/shape4.svg" alt="shape" />
+            </div>
+			<div className="shape7">
+                <img src="/images/shape4.svg" alt="shape" />
+            </div>
+			<div className="shape8 rotateme">
+                <img src="/images/shape2.svg" alt="shape" />
+            </div> */}
+        </div>
+    );
+}
+
+export default PageBanner;

components/Common/Partner.js

@@ -0,0 +1,200 @@
+import React from 'react'
+import Link from 'next/link'
+
+const Partner = () => {
+    return (
+        <>
+            <div className="ready-to-talk">
+                <div className="container">
+                    <h3>Ready to talk?</h3>
+                    <p>Our team is here to answer your question about StartP</p>
+                    
+                    <Link href="/contact">
+                        <a className="btn btn-primary">Contact Us</a>
+                    </Link>
+
+                    <span>
+                        <Link href='/#'>
+                            <a>Or, get started now with a free trial</a>
+                        </Link>
+                    </span>
+                </div>
+            </div>
+
+            <div className="partner-area partner-section">
+                <div className="container">
+                    <h5>More that 1.5 million businesses and organizations use StartP</h5>
+
+                    <div className="partner-inner">
+                        <div className="row justify-content-center">
+                            <div className="col-lg-2 col-md-3 col-6">
+                                <Link href='/#'>
+                                    <a target="_balnk">
+                                        <img src="/images/partner-img/partner-6.png" alt="partner" />
+                                        <img src="/images/partner-img/partner-hover6.png" alt="partner" />
+                                    </a>
+                                </Link>
+                            </div>
+
+                            <div className="col-lg-2 col-md-3 col-6">
+                                <Link href='/#'>
+                                    <a target="_balnk">
+                                        <img src="/images/partner-img/partner-2.png" alt="partner" />
+                                        <img src="/images/partner-img/partner-hover2.png" alt="partner" />
+                                    </a>
+                                </Link>
+                            </div>
+
+                            <div className="col-lg-2 col-md-3 col-6">
+                                <Link href='/#'>
+                                    <a target="_balnk">
+                                        <img src="/images/partner-img/partner-3.png" alt="partner" />
+                                        <img src="/images/partner-img/partner-hover3.png" alt="partner" />
+                                    </a>
+                                </Link>
+                            </div>
+
+                            <div className="col-lg-2 col-md-3 col-6">
+                                <Link href='/#'>
+                                    <a target="_balnk">
+                                        <img src="/images/partner-img/partner-4.png" alt="partner" />
+                                        <img src="/images/partner-img/partner-hover4.png" alt="partner" />
+                                    </a>
+                                </Link>
+                            </div>
+
+                            <div className="col-lg-2 col-md-3 col-6">
+                                <Link href='/#'>
+                                    <a target="_balnk">
+                                        <img src="/images/partner-img/partner-5.png" alt="partner" />
+                                        <img src="/images/partner-img/partner-hover5.png" alt="partner" />
+                                    </a>
+                                </Link>
+                            </div>
+
+                            <div className="col-lg-2 col-md-3 col-6">
+                                <Link href='/#'>
+                                    <a target="_balnk">
+                                        <img src="/images/partner-img/partner-6.png" alt="partner" />
+                                        <img src="/images/partner-img/partner-hover6.png" alt="partner" />
+                                    </a>
+                                </Link>
+                            </div>
+
+                            <div className="col-lg-2 col-md-3 col-6">
+                                <Link href='/#'>
+                                    <a target="_balnk">
+                                        <img src="/images/partner-img/partner-7.png" alt="partner" />
+                                        <img src="/images/partner-img/partner-hover7.png" alt="partner" />
+                                    </a>
+                                </Link>
+                            </div>
+
+                            <div className="col-lg-2 col-md-3 col-6">
+                                <Link href='/#'>
+                                    <a target="_balnk">
+                                        <img src="/images/partner-img/partner-6.png" alt="partner" />
+                                        <img src="/images/partner-img/partner-hover6.png" alt="partner" />
+                                    </a>
+                                </Link>
+                            </div>
+
+                            <div className="col-lg-2 col-md-3 col-6">
+                                <Link href='/#'>
+                                    <a target="_balnk">
+                                        <img src="/images/partner-img/partner-2.png" alt="partner" />
+                                        <img src="/images/partner-img/partner-hover2.png" alt="partner" />
+                                    </a>
+                                </Link>
+                            </div>
+
+                            <div className="col-lg-2 col-md-3 col-6">
+                                <Link href='/#'>
+                                    <a target="_balnk">
+                                        <img src="/images/partner-img/partner-3.png" alt="partner" />
+                                        <img src="/images/partner-img/partner-hover3.png" alt="partner" />
+                                    </a>
+                                </Link>
+                            </div>
+
+                            <div className="col-lg-2 col-md-3 col-6">
+                                <Link href='/#'>
+                                    <a target="_balnk">
+                                        <img src="/images/partner-img/partner-4.png" alt="partner" />
+                                        <img src="/images/partner-img/partner-hover4.png" alt="partner" />
+                                    </a>
+                                </Link>
+                            </div>
+
+                            <div className="col-lg-2 col-md-3 col-6">
+                                <Link href='/#'>
+                                    <a target="_balnk">
+                                        <img src="/images/partner-img/partner-5.png" alt="partner" />
+                                        <img src="/images/partner-img/partner-hover5.png" alt="partner" />
+                                    </a>
+                                </Link>
+                            </div>
+
+                            <div className="col-lg-2 col-md-3 col-6">
+                                <Link href='/#'>
+                                    <a target="_balnk">
+                                        <img src="/images/partner-img/partner-6.png" alt="partner" />
+                                        <img src="/images/partner-img/partner-hover6.png" alt="partner" />
+                                    </a>
+                                </Link>
+                            </div>
+
+                            <div className="col-lg-2 col-md-3 col-6">
+                                <Link href='/#'>
+                                    <a target="_balnk">
+                                        <img src="/images/partner-img/partner-7.png" alt="partner" />
+                                        <img src="/images/partner-img/partner-hover7.png" alt="partner" />
+                                    </a>
+                                </Link>
+                            </div>
+
+                            <div className="col-lg-2 col-md-3 col-6">
+                                <Link href='/#'>
+                                    <a target="_balnk">
+                                        <img src="/images/partner-img/partner-3.png" alt="partner" />
+                                        <img src="/images/partner-img/partner-hover3.png" alt="partner" />
+                                    </a>
+                                </Link>
+                            </div>
+
+                            <div className="col-lg-2 col-md-3 col-6">
+                                <Link href='/#'>
+                                    <a target="_balnk">
+                                        <img src="/images/partner-img/partner-4.png" alt="partner" />
+                                        <img src="/images/partner-img/partner-hover4.png" alt="partner" />
+                                    </a>
+                                </Link>
+                            </div>
+
+                            <div className="col-lg-2 col-md-3 col-6">
+                                <Link href='/#'>
+                                    <a target="_balnk">
+                                        <img src="/images/partner-img/partner-5.png" alt="partner" />
+                                        <img src="/images/partner-img/partner-hover5.png" alt="partner" />
+                                    </a>
+                                </Link>
+                            </div>
+
+                            <div className="col-lg-2 col-md-3 col-6">
+                                <Link href='/#'>
+                                    <a target="_balnk">
+                                        <img src="/images/partner-img/partner-6.png" alt="partner" />
+                                        <img src="/images/partner-img/partner-hover6.png" alt="partner" />
+                                    </a>
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+ 
+}
+
+export default Partner;  

components/Common/PartnerStyleTwo.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import dynamic from 'next/dynamic';
+const OwlCarousel = dynamic(import('react-owl-carousel3'));
+
+const options = {
+    loop: true,
+    nav: false,
+    dots: false,
+    autoplay: true,
+    smartSpeed: 1000,
+    autoplayTimeout: 5000,
+    responsive: {
+        0:{
+            items:2,
+        },
+        768:{
+            items:4,
+        },
+        1200:{
+            items:6,
+        }
+    }
+}
+
+const PartnerStyleTwo = () => {
+    const [display, setDisplay] = React.useState(false);
+
+    React.useEffect(() => {
+        setDisplay(true);
+    }, [])
+
+    return (
+        <div className="repair-partner-area bg-f9fafb">
+            <div className="container">
+                {display ? <OwlCarousel 
+                    className="repair-partner-slides owl-carousel owl-theme"
+                    {...options}
+                >
+                    <div className="single-repair-partner">
+                        <a  target="_blank">
+                            <img src='/images/partner-img/partner-1.png' alt="image" />
+                            <img src='/images/partner-img/partner-hover1.png' alt="image" />
+                        </a>
+                    </div>
+            
+                    <div className="single-repair-partner">
+                        <a  target="_blank">
+                            <img src='/images/partner-img/partner-2.png' alt="image" />
+                            <img src='/images/partner-img/partner-hover2.png' alt="image" />
+                        </a>
+                    </div>
+                
+                    <div className="single-repair-partner">
+                        <a  target="_blank">
+                            <img src='/images/partner-img/partner-3.png' alt="image" />
+                            <img src='/images/partner-img/partner-hover3.png' alt="image" />
+                        </a>
+                    </div>
+        
+                    <div className="single-repair-partner">
+                        <a  target="_blank">
+                            <img src='/images/partner-img/partner-10.png' alt="image" />
+                            <img src='/images/partner-img/partner-hover10.png' alt="image" />
+                        </a>
+                    </div>
+            
+                    <div className="single-repair-partner">
+                        <a  target="_blank">
+                            <img src='/images/partner-img/partner-5.png' alt="image" />
+                            <img src='/images/partner-img/partner-hover5.png' alt="image" />
+                        </a>
+                    </div>
+        
+                    <div className="single-repair-partner">
+                        <a  target="_blank">
+                            <img src='/images/partner-img/partner-6.png' alt="image" />
+                            <img src='/images/partner-img/partner-hover6.png' alt="image" />
+                        </a>
+                    </div>
+        
+                    <div className="single-repair-partner">
+                        <a  target="_blank">
+                            <img src='/images/partner-img/partner-7.png' alt="image" />
+                            <img src='/images/partner-img/partner-hover7.png' alt="image" />
+                        </a>
+                    </div>
+                </OwlCarousel> : ''}
+            </div>
+        </div>
+    );
+}
+
+export default PartnerStyleTwo;

components/Common/RecentWorks.js

@@ -0,0 +1,152 @@
+import React from 'react';
+import Link from 'next/link';
+import * as Icon from 'react-feather';
+import dynamic from 'next/dynamic';
+const OwlCarousel = dynamic(import('react-owl-carousel3'));
+
+const options = {
+    items: 4,
+    loop: true,
+    nav: false,
+    autoplay: true,
+    margin:30,
+    dots: false,
+    responsive: {
+        0: {
+            items: 1
+        },
+        768: {
+            items: 2
+        },
+        1200: {
+            items: 3
+        },
+        1500: {
+            items: 4
+        }
+    }
+}
+
+const RecentWorks = () => {
+    const [display, setDisplay] = React.useState(false);
+
+    React.useEffect(() => {
+        setDisplay(true);
+    }, [])
+
+    return (
+        <div className="works-area pt-80 pb-50 bg-f7fafd">
+            <div className="container">
+                <div className="section-title">
+                    <h2>Our Recent Works</h2>
+                    <div className="bar"></div>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                </div>
+            </div>
+
+            {display ? <OwlCarousel 
+                className="works-slides owl-carousel owl-theme"
+                {...options}
+            > 
+                <div className="single-works">
+                    <img src="/images/works-image/works-image1.jpg" alt="image" />
+
+                    <Link href="/project-details">
+                        <a className="icon"><Icon.Settings /></a>
+                    </Link>
+
+                    <div className="works-content">
+                        <h3>
+                            <Link href="/project-details">
+                                <a>Incredible infrastructure</a>
+                            </Link>
+                        </h3>
+                        <p>Lorem ipsum dolor amet, adipiscing, sed do eiusmod tempor incididunt ut labore dolore magna aliqua.</p>
+                    </div>
+                </div>
+    
+                <div className="single-works">
+                    <img src="/images/works-image/works-image2.jpg" alt="image" />
+
+                    <Link href="/project-details">
+                        <a className="icon"><Icon.Settings /></a>
+                    </Link>
+
+                    <div className="works-content">
+                        <h3>
+                            <Link href="/project-details">
+                                <a>Email Notifications</a>
+                            </Link>
+                        </h3>
+                        <p>Lorem ipsum dolor amet, adipiscing, sed do eiusmod tempor incididunt ut labore dolore magna aliqua.</p>
+                    </div>
+                </div>
+    
+                <div className="single-works">
+                    <img src="/images/works-image/works-image3.jpg" alt="image" />
+
+                    <Link href="/project-details">
+                        <a className="icon"><Icon.Settings /></a>
+                    </Link>
+
+                    <div className="works-content">
+                        <h3>
+                            <Link href="/project-details">
+                                <a>Best Analytics Audits</a>
+                            </Link>
+                        </h3>
+                        <p>Lorem ipsum dolor amet, adipiscing, sed do eiusmod tempor incididunt ut labore dolore magna aliqua.</p>
+                    </div>
+                </div>
+        
+                <div className="single-works">
+                    <img src="/images/works-image/works-image4.jpg" alt="image" />
+
+                    <Link href="/project-details">
+                        <a className="icon"><Icon.Settings /></a>
+                    </Link>
+
+                    <div className="works-content">
+                        <h3>
+                            <Link href="/project-details">
+                                <a>Simple Dashboard</a>
+                            </Link>
+                        </h3>
+                        <p>Lorem ipsum dolor amet, adipiscing, sed do eiusmod tempor incididunt ut labore dolore magna aliqua.</p>
+                    </div>
+                </div>
+    
+                <div className="single-works">
+                    <img src="/images/works-image/works-image5.jpg" alt="image" />
+
+                    <Link href="/project-details">
+                        <a className="icon"><Icon.Settings /></a>
+                    </Link>
+                    
+                    <div className="works-content">
+                        <h3>
+                            <Link href="/project-details"><a>Information Retrieval</a></Link>
+                        </h3>
+                        <p>Lorem ipsum dolor amet, adipiscing, sed do eiusmod tempor incididunt ut labore dolore magna aliqua.</p>
+                    </div>
+                </div>
+            </OwlCarousel> : ''}
+            
+            {/* Shape Images */}
+            <div className="shape8 rotateme">
+                <img src="/images/shape2.svg" alt="shape" />
+            </div>
+            <div className="shape2 rotateme">
+                <img src="/images/shape2.svg" alt="shape" />
+            </div>
+            <div className="shape7">
+                <img src="/images/shape4.svg" alt="shape" />
+            </div>
+            <div className="shape4">
+                <img src="/images/shape4.svg" alt="shape" />
+            </div>
+        </div>
+    )
+}
+
+export default RecentWorks;

components/Common/Team.js

@@ -0,0 +1,446 @@
+import React from 'react';
+import dynamic from 'next/dynamic';
+const OwlCarousel = dynamic(import('react-owl-carousel3'));
+import * as Icon from 'react-feather';
+import Link from 'next/link'
+
+const options = {
+    items: 5,
+    loop: true,
+    nav: false,
+    dots: true,
+    margin: 30,
+    autoplay: false,
+    smartSpeed: 1000,
+    responsive: {
+        0: {
+            items: 1
+        },
+        768: {
+            items: 2
+        },
+        1200: {
+            items: 4
+        },
+        1500: {
+            items: 5
+        }
+    }
+}
+
+const Team = () => {
+    const [display, setDisplay] = React.useState(false);
+
+    React.useEffect(() => {
+        setDisplay(true);
+    }, [])
+
+    return (
+        <div className="team-area ptb-80 bg-f9f6f6">
+            <div className="container">
+                <div className="section-title">
+                    <h2>Our Awesome Team</h2>
+                    <div className="bar"></div>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                </div>
+            </div>
+
+            {display ? <OwlCarousel 
+                className="team-slider owl-carousel owl-theme owl-theme-style"
+                {...options}
+            > 
+                <div className="single-team">
+                    <div className="team-image">
+                        <img src="/images/team-image/team1.jpg" alt="image" />
+                    </div>
+
+                    <div className="team-content">
+                        <div className="team-info">
+                            <h3>Josh Buttler</h3>
+                            <span>CEO & Founder</span>
+                        </div>
+
+                        <ul>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Facebook /></a>
+                                </Link>
+                                
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Twitter /></a>
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Linkedin /></a>
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Gitlab /></a>
+                                </Link>
+                            </li>
+                        </ul>
+
+                        <p>Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum. </p>
+                    </div>
+                </div>
+            
+                <div className="single-team">
+                    <div className="team-image">
+                        <img src="/images/team-image/team2.jpg" alt="image" />
+                    </div>
+
+                    <div className="team-content">
+                        <div className="team-info">
+                            <h3>Alex Maxwel</h3>
+                            <span>Marketing Manager</span>
+                        </div>
+
+                        <ul>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Facebook /></a>
+                                </Link>
+                                
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Twitter /></a>
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Linkedin /></a>
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Gitlab /></a>
+                                </Link>
+                            </li>
+                        </ul>
+
+                        <p>Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum. </p>
+                    </div>
+                </div>
+    
+                <div className="single-team">
+                    <div className="team-image">
+                        <img src="/images/team-image/team3.jpg" alt="image" />
+                    </div>
+
+                    <div className="team-content">
+                        <div className="team-info">
+                            <h3>Janny Cotller</h3>
+                            <span>Web Developer</span>
+                        </div>
+
+                        <ul>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Facebook /></a>
+                                </Link>
+                                
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Twitter /></a>
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Linkedin /></a>
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Gitlab /></a>
+                                </Link>
+                            </li>
+                        </ul>
+
+                        <p>Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum. </p>
+                    </div>
+                </div>
+            
+                <div className="single-team">
+                    <div className="team-image">
+                        <img src="/images/team-image/team4.jpg" alt="image" />
+                    </div>
+
+                    <div className="team-content">
+                        <div className="team-info">
+                            <h3>Jason Statham</h3>
+                            <span>UX/UI Designer</span>
+                        </div>
+
+                        <ul>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Facebook /></a>
+                                </Link>
+                                
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Twitter /></a>
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Linkedin /></a>
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Gitlab /></a>
+                                </Link>
+                            </li>
+                        </ul>
+
+                        <p>Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum. </p>
+                    </div>
+                </div>
+        
+                <div className="single-team">
+                    <div className="team-image">
+                        <img src="/images/team-image/team5.jpg" alt="image" />
+                    </div>
+
+                    <div className="team-content">
+                        <div className="team-info">
+                            <h3>Corey Anderson</h3>
+                            <span>Project Manager</span>
+                        </div>
+
+                        <ul>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Facebook /></a>
+                                </Link>
+                                
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Twitter /></a>
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Linkedin /></a>
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Gitlab /></a>
+                                </Link>
+                            </li>
+                        </ul>
+
+                        <p>Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum. </p>
+                    </div>
+                </div>
+        
+                <div className="single-team">
+                    <div className="team-image">
+                        <img src="/images/team-image/team1.jpg" alt="image" />
+                    </div>
+
+                    <div className="team-content">
+                        <div className="team-info">
+                            <h3>Josh Buttler</h3>
+                            <span>CEO & Founder</span>
+                        </div>
+
+                        <ul>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Facebook /></a>
+                                </Link>
+                                
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Twitter /></a>
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Linkedin /></a>
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Gitlab /></a>
+                                </Link>
+                            </li>
+                        </ul>
+
+                        <p>Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum. </p>
+                    </div>
+                </div>
+        
+                <div className="single-team">
+                    <div className="team-image">
+                        <img src="/images/team-image/team2.jpg" alt="image" />
+                    </div>
+
+                    <div className="team-content">
+                        <div className="team-info">
+                            <h3>Alex Maxwel</h3>
+                            <span>Marketing Manager</span>
+                        </div>
+
+                        <ul>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Facebook /></a>
+                                </Link>
+                                
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Twitter /></a>
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Linkedin /></a>
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Gitlab /></a>
+                                </Link>
+                            </li>
+                        </ul>
+
+                        <p>Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum. </p>
+                    </div>
+                </div>
+        
+                <div className="single-team">
+                    <div className="team-image">
+                        <img src="/images/team-image/team3.jpg" alt="image" />
+                    </div>
+
+                    <div className="team-content">
+                        <div className="team-info">
+                            <h3>Janny Cotller</h3>
+                            <span>Web Developer</span>
+                        </div>
+
+                        <ul>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Facebook /></a>
+                                </Link>
+                                
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Twitter /></a>
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Linkedin /></a>
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Gitlab /></a>
+                                </Link>
+                            </li>
+                        </ul>
+
+                        <p>Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum. </p>
+                    </div>
+                </div>
+    
+                <div className="single-team">
+                    <div className="team-image">
+                        <img src="/images/team-image/team4.jpg" alt="image" />
+                    </div>
+
+                    <div className="team-content">
+                        <div className="team-info">
+                            <h3>Jason Statham</h3>
+                            <span>UX/UI Designer</span>
+                        </div>
+
+                        <ul>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Facebook /></a>
+                                </Link>
+                                
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Twitter /></a>
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Linkedin /></a>
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Gitlab /></a>
+                                </Link>
+                            </li>
+                        </ul>
+
+                        <p>Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum. </p>
+                    </div>
+                </div>
+            
+                <div className="single-team">
+                    <div className="team-image">
+                        <img src="/images/team-image/team5.jpg" alt="image" />
+                    </div>
+
+                    <div className="team-content">
+                        <div className="team-info">
+                            <h3>Corey Anderson</h3>
+                            <span>Project Manager</span>
+                        </div>
+
+                        <ul>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Facebook /></a>
+                                </Link>
+                                
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Twitter /></a>
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Linkedin /></a>
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Gitlab /></a>
+                                </Link>
+                            </li>
+                        </ul>
+
+                        <p>Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum. </p>
+                    </div>
+                </div>
+            </OwlCarousel> : ''}
+        </div>
+    )
+}
+
+export default Team;

components/Common/TeamStyleTwo.js

@@ -0,0 +1,185 @@
+import React from 'react';
+import Link from 'next/link';
+import * as Icon from 'react-feather';
+
+const TeamStyleTwo = () => {
+    return (
+        <div className="team-area repair-team-area pt-80 pb-50 bg-f9f6f6">
+            <div className="container">
+                <div className="section-title">
+                    <h2>Thamrin Group Founders</h2>
+                    <div className="bar"></div>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                </div>
+            
+                <div className="row justify-content-center">
+                    <div className="col-lg-3 col-md-6">
+                        <div className="single-team">
+                            <div className="team-image">
+                                <img src='/images/team-image/team1.jpg' alt="image" />
+                            </div>
+
+                            <div className="team-content">
+                                <div className="team-info">
+                                    <h3>Josh Buttler</h3>
+                                    <span>CEO & Founder</span>
+                                </div>
+
+                                <ul>
+                                    <li>
+                                        <Link href='/#'>
+                                            <a target="_blank"><Icon.Facebook /></a>
+                                        </Link>
+                                        
+                                    </li>
+                                    <li>
+                                        <Link href='/#'>
+                                            <a target="_blank"><Icon.Twitter /></a>
+                                        </Link>
+                                    </li>
+                                    <li>
+                                        <Link href='/#'>
+                                            <a target="_blank"><Icon.Linkedin /></a>
+                                        </Link>
+                                    </li>
+                                    <li>
+                                        <Link href='/#'>
+                                            <a target="_blank"><Icon.Gitlab /></a>
+                                        </Link>
+                                    </li>
+                                </ul>
+
+                                <p>Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum.</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="col-lg-3 col-md-6">
+                        <div className="single-team">
+                            <div className="team-image">
+                                <img src='/images/team-image/team2.jpg' alt="image" />
+                            </div>
+
+                            <div className="team-content">
+                                <div className="team-info">
+                                    <h3>Alex Maxwel</h3>
+                                    <span>CEO & Founder</span>
+                                </div>
+
+                                <ul>
+                                    <li>
+                                        <Link href='/#'>
+                                            <a target="_blank"><Icon.Facebook /></a>
+                                        </Link>
+                                        
+                                    </li>
+                                    <li>
+                                        <Link href='/#'>
+                                            <a target="_blank"><Icon.Twitter /></a>
+                                        </Link>
+                                    </li>
+                                    <li>
+                                        <Link href='/#'>
+                                            <a target="_blank"><Icon.Linkedin /></a>
+                                        </Link>
+                                    </li>
+                                    <li>
+                                        <Link href='/#'>
+                                            <a target="_blank"><Icon.Gitlab /></a>
+                                        </Link>
+                                    </li>
+                                </ul>
+
+                                <p>Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum.</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="col-lg-3 col-md-6">
+                        <div className="single-team">
+                            <div className="team-image">
+                                <img src='/images/team-image/team3.jpg' alt="image" />
+                            </div>
+
+                            <div className="team-content">
+                                <div className="team-info">
+                                    <h3>Janny Cotller</h3>
+                                    <span>CEO & Founder</span>
+                                </div>
+
+                                <ul>
+                                    <li>
+                                        <Link href='/#'>
+                                            <a target="_blank"><Icon.Facebook /></a>
+                                        </Link>
+                                        
+                                    </li>
+                                    <li>
+                                        <Link href='/#'>
+                                            <a target="_blank"><Icon.Twitter /></a>
+                                        </Link>
+                                    </li>
+                                    <li>
+                                        <Link href='/#'>
+                                            <a target="_blank"><Icon.Linkedin /></a>
+                                        </Link>
+                                    </li>
+                                    <li>
+                                        <Link href='/#'>
+                                            <a target="_blank"><Icon.Gitlab /></a>
+                                        </Link>
+                                    </li>
+                                </ul>
+
+                                <p>Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum.</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="col-lg-3 col-md-6">
+                        <div className="single-team">
+                            <div className="team-image">
+                                <img src='/images/team-image/team4.jpg' alt="image" />
+                            </div>
+
+                            <div className="team-content">
+                                <div className="team-info">
+                                    <h3>Jason Statham</h3>
+                                    <span>CEO & Founder</span>
+                                </div>
+
+                                <ul>
+                                    <li>
+                                        <Link href='/#'>
+                                            <a target="_blank"><Icon.Facebook /></a>
+                                        </Link>
+                                        
+                                    </li>
+                                    <li>
+                                        <Link href='/#'>
+                                            <a target="_blank"><Icon.Twitter /></a>
+                                        </Link>
+                                    </li>
+                                    <li>
+                                        <Link href='/#'>
+                                            <a target="_blank"><Icon.Linkedin /></a>
+                                        </Link>
+                                    </li>
+                                    <li>
+                                        <Link href='/#'>
+                                            <a target="_blank"><Icon.Gitlab /></a>
+                                        </Link>
+                                    </li>
+                                </ul>
+
+                                <p>Risus commodo viverra maecenas accumsan lacus vel facilisis quis ipsum.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default TeamStyleTwo;

components/Common/new/Gallery.js

@@ -0,0 +1,229 @@
+// import React, { Component } from 'react';
+// import Masonry from 'react-masonry-component';
+// import Link from 'next/link';
+
+// const masonryOptions = {
+//     transitionDuration: 0
+// };
+ 
+// export class Projects extends Component {
+//     render() {
+//         const images = this.props.images.map((image, idx) => {
+//             return (
+//                 <div className="col-lg-4 col-sm-6 item" key={idx}>
+//                     <div className="single-latest-projects">
+//                         <img src={image.image} alt="portfolio-image" />
+
+//                         <div className="content">
+//                             <span>{image.category}</span>
+//                             <h3>{image.title}</h3>
+//                         </div>
+
+//                         <Link href="/project-details">
+//                             <a className="link-btn"></a>
+//                         </Link>
+//                     </div>
+//                 </div>
+//             )
+//         })
+//         return (
+//             <div className="our-latest-projects ptb-80">
+//                 <div className="container">
+//                     <div className="section-title text-left">
+//                         <h2>Our Latest <span>Projects</span></h2>
+//                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+//                     </div>
+                 
+//                     <Masonry
+//                         className={'row'} // default ''
+//                         elementType={'div'} // default 'div'
+//                         options={masonryOptions} // default {}
+//                         disableImagesLoaded={false} // default false
+//                         updateOnEachImageLoad={false} // default false and works only if disableImagesLoaded is false
+//                     >
+//                         {images}
+//                     </Masonry>
+//                 </div>
+//             </div>
+//         );
+//     }
+// }
+
+// Projects.defaultProps = {
+//     images: [
+//         { 
+//             image: "/images/Home/gallery/1.jpg",
+//             category: "Marketing",
+//             title: "Marketing & Reporting"
+//         },
+//         { 
+//             image: "/images/Home/gallery/2.jpg",
+//             category: "Marketing",
+//             title: "Marketing & Reporting"
+//         },
+//         { 
+//             image: "/images/Home/gallery/3.jpg",
+//             category: "Marketing",
+//             title: "Marketing & Reporting"
+//         },
+//         { 
+//             image: "/images/Home/gallery/4.jpg",
+//             category: "Marketing",
+//             title: "Marketing & Reporting"
+//         },
+//         { 
+//             image: "/images/Home/gallery/5.jpg",
+//             category: "Marketing",
+//             title: "Marketing & Reporting"
+//         },
+//         { 
+//             image: "/images/Home/gallery/6.jpg",
+//             category: "Marketing",
+//             title: "Marketing & Reporting"
+//         },
+//         { 
+//             image: "/images/Home/gallery/7.jpg",
+//             category: "Marketing",
+//             title: "Marketing & Reporting"
+//         },
+//         { 
+//             image: "/images/Home/gallery/8.jpg",
+//             category: "Marketing",
+//             title: "Marketing & Reporting"
+//         },
+//         { 
+//             image: "/images/Home/gallery/9.jpg",
+//             category: "Marketing",
+//             title: "Marketing & Reporting"
+//         },
+//     ]
+// }
+
+// export default Projects;
+
+import React from 'react';
+import Link from 'next/link';
+import dynamic from 'next/dynamic';
+const OwlCarousel = dynamic(import('react-owl-carousel3'));
+
+const options = {
+    loop: true,
+    nav: false,
+    dots: true,
+    autoplay: true,
+    smartSpeed: 1000,
+    margin: 30,
+    autoplayTimeout: 5000,
+    responsive: {
+        0:{
+            items: 1,
+        },
+        576:{
+            items: 2,
+        },
+        768:{
+            items: 2,
+        },
+        1024:{
+            items: 3,
+        },
+        1200:{
+            items: 4,
+        }
+    },
+}
+
+const Projects = ({galleries,title}) => {
+
+    const images = (galleries)?galleries.map((data, index) => {
+		return (
+            <div className="single-ml-projects-box">
+                <img style={{height: "300px",
+    "objectFit": "cover"}} src={`/api/util?img=${encodeURIComponent(data)}`} alt="image" />
+            </div>
+		);
+	}):''; 
+
+    const [display, setDisplay] = React.useState(false);
+
+    React.useEffect(() => {
+        setDisplay(true);
+    }, [])
+    
+    return (galleries&&galleries.length>0)?(
+        <div id="gallery" className="ml-projects-area pt-0 ptb-80">
+            <div className="container">
+                <div className="section-title st-fs-28">
+                    <h2>{title||'Thamrin Group Gallery'}</h2>
+                    <div className="bar"></div>
+                </div>
+            </div>
+
+            <div className="container-fluid">
+                {display ? <OwlCarousel 
+                    className="ml-projects-slides owl-carousel owl-theme"
+                    {...options}
+                >  
+                    {images}
+                    {/* <div className="single-ml-projects-box">
+                        <img src="/images/Home/gallery/1.jpg" alt="image" />
+                    </div>
+
+                    <div className="single-ml-projects-box">
+                        <img src="/images/Home/gallery/2.jpg" alt="image" />
+                    </div>
+
+                    <div className="single-ml-projects-box">
+                        <img src="/images/Home/gallery/3.jpg" alt="image" />
+                    </div>
+
+                    <div className="single-ml-projects-box">
+                        <img src="/images/Home/gallery/4.jpg" alt="image" />
+                    </div>
+
+                    <div className="single-ml-projects-box">
+                        <img src="/images/Home/gallery/5.jpg" alt="image" />
+                    </div>
+                    
+                    <div className="single-ml-projects-box">
+                        <img src="/images/Home/gallery/6.jpg" alt="image" />
+                    </div>
+
+                    <div className="single-ml-projects-box">
+                        <img src="/images/Home/gallery/7.jpg" alt="image" />
+                    </div>
+
+                    <div className="single-ml-projects-box">
+                        <img src="/images/Home/gallery/8.jpg" alt="image" />
+                    </div>
+
+                    <div className="single-ml-projects-box">
+                        <img src="/images/Home/gallery/9.jpg" alt="image" />
+                    </div> */}
+                </OwlCarousel> : ''}
+            </div>
+
+            {/* Shape Images */}
+            <div className="shape1">
+                <img src="/images/shape1.png" alt="shape" />
+            </div>
+            <div className="shape2 rotateme">
+                <img src="/images/shape2.svg" alt="shape" />
+            </div>
+            <div className="shape3">
+                <img src="/images/shape3.svg" alt="shape" />
+            </div>
+            <div className="shape4">
+                <img src="/images/shape4.svg" alt="shape" />
+            </div>
+            <div className="shape7">
+                <img src="/images/shape4.svg" alt="shape" />
+            </div>
+            <div className="shape8 rotateme">
+                <img src="/images/shape2.svg" alt="shape" />
+            </div>
+        </div>
+    ):"";
+}
+
+export default Projects;

components/Common/new/MainBanner.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import { Link as LinkScroll } from 'react-scroll'
+import Link from 'next/link';
+import dynamic from 'next/dynamic';
+
+
+
+
+const MainBanner = ({company,main_banner,link_to,banner,className}) => {
+    var defaultValue;
+    if(company == 'thamrin'){
+        defaultValue = {
+            Title:"Selamat Datang di Thamrin Group",
+            Description:"Thamrin Group adalah perusahaan terkemuka di Sumatera Selatan & Bengkulu dengan fokus bisnis pada sektor otomotif dan properti.",
+            Image:'/images/bigdata-analytics/main-banner.jpg'
+        }
+    }
+    else if(company == 'yamaha'){
+        defaultValue = {
+            Title:"Exclusif Motor Untuk Anda",
+            Description:"PT.Thamrin Brother's Yamaha merupakan sebuah bisnis company dari Thamrin Group yang bergerak dalam bidang penjualan produk Motor dan Sparepart Yamaha.",
+            Image:'/images/Yamaha/banner.jpg'
+        }
+    }
+    else{
+        defaultValue = {
+            Title:"Exclusif Motor Untuk Anda",
+            Description:"",
+            Image:'/images/Yamaha/banner.jpg'
+        }
+    }
+    const Main_Banner = (main_banner && main_banner.length > 0 && main_banner[0].attributes.Contents.data&&main_banner[0].attributes.Contents.data.length>0)?(
+        <div className="bigdata-analytics-banner" style={{
+            'backgroundImage' : `url('/api/util?img=${encodeURIComponent(main_banner[0].attributes.Contents.data[0].attributes.Image.data.attributes.url)}')`,
+            }}>
+            <div className="bigdata-analytics-content" >
+                <h1>{main_banner[0].attributes.Contents.data[0].attributes.Title}</h1>
+                <p>{main_banner[0].attributes.Contents.data[0].attributes.Description}</p>
+                {(main_banner[0].attributes.Contents.data[0].attributes.Link)
+                ?(<Link href={`./${main_banner[0].attributes.Contents.data[0].attributes.Link}`}>
+                    <a className="btn btn-primary">Get Started</a>
+                </Link>)
+                :(<LinkScroll offset={-100} to={link_to} spy={true} smooth={true}>
+                    <a className="btn btn-primary">Get Started</a>
+                </LinkScroll>)
+                }
+            </div>
+        </div>
+    ):(
+        <div className="bigdata-analytics-banner" style={{
+            'backgroundImage' : `url('${defaultValue.Image}')`,
+            
+            }}>
+            <div className="bigdata-analytics-content" >
+                <h1>{defaultValue.Title}</h1>
+                <p>{defaultValue.Description}</p>
+                <LinkScroll offset={-100} to="business_partner" spy={true} smooth={true}>
+                    <a className="btn btn-primary">Get Started</a>
+                </LinkScroll>
+            </div>
+        </div>
+    );
+    const Banners = (banner && banner.length >0)?banner.map((data,idx)=>{
+        return (
+            // <Link href={`/news/${data.id}`}>
+                <div key={idx} className="bigdata-analytics-banner" style={{
+                'backgroundImage' : `url('/api/util?img=${encodeURIComponent(data.attributes.url)}')`,
+                }}>
+                    {/* <div className="bigdata-analytics-content newsTitle" >
+                        <h1>{data.attributes.Title}</h1>
+                    </div> */}
+                </div>
+            // </Link>
+        );
+    }):"";
+    const OwlCarousel = dynamic(import('react-owl-carousel3'));
+    const options = {
+        center:false,
+        loop: false,
+        nav: false,
+        dots: true,
+        autoplay: true,
+        smartSpeed: 1000,
+        margin: 0,
+        autoplayTimeout: 5000,
+        autoWidth:false,
+        responsive: {
+            0:{
+                items: 1,
+            },
+        },
+    }
+    return (
+        <div id="home" className={className}>
+            <OwlCarousel className="ml-projects-slides owl-carousel fullw owl-theme"
+                {...options}>
+                {Main_Banner}
+                {Banners}
+            </OwlCarousel>
+        </div>
+    )
+}
+
+export default MainBanner;  

components/Common/new/NewsDetail.js

@@ -0,0 +1,255 @@
+import React from 'react';
+import Link from 'next/link';
+import * as Icon from 'react-feather';
+import util from '../../../lib/util';
+
+
+const NewsDetails = ({news,navigation,id}) => {
+    const nav = navigation.map((i,idx)=>{
+        if(navigation.length > 1){
+            if(i.id>id){
+                return(<div key={idx} className="prev-link-wrapper">
+                <div className="info-prev-link-wrapper">
+                        <Link href={`/news/${i.id}`}>
+                            <a >
+                                <span className="image-prev">
+                                    <img src={(i.thumbnail)?`/api/util?img=${encodeURIComponent(i.thumbnail)}`:"/images/blog-image/blog2.jpg"} alt="image" />
+                                    <span className="post-nav-title">Show</span>
+                                </span>
+                                <span className="prev-link-info-wrapper">
+                                    <span className="prev-title">{i.title||"Other News"}</span>
+                                    <span className="meta-wrapper">
+                                        <span className="date-post">{new Date(i.publishedAt).toLocaleDateString('ID',{ weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</span>
+                                    </span>
+                                </span>
+                            </a>
+                            
+                        </Link>
+                    </div>
+                </div>);
+            }
+            else if(i.id<id){
+                return (
+                    <div key={idx} className="next-link-wrapper">
+                        <div className="info-next-link-wrapper">
+                        <Link href={`/news/${i.id}`}>
+                                <a >
+                                   <span className="next-link-info-wrapper">
+                                        <span className="next-title">{i.title||"Other News"}</span>
+                                        <span className="meta-wrapper">
+                                            <span className="date-post">{new Date(i.publishedAt).toLocaleDateString('ID',{ weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</span>
+                                        </span>
+                                    </span>
+                                    <span className="image-next">
+                                        <img src={(i.thumbnail)?`/api/util?img=${encodeURIComponent(i.thumbnail)}`:"/images/blog-image/blog2.jpg"} alt="image" />
+                                        <span className="post-nav-title">Show</span>
+                                    </span> 
+                                </a>
+                            </Link>
+                        </div>
+                    </div>
+                );
+            }
+            else return "";   
+        }
+        else{
+            
+            return(<div key={idx} className="prev-link-wrapper">
+            <div className="info-prev-link-wrapper">
+                    <Link href={`/news/${i.id}`}>
+                        <a >
+                            <span className="image-prev">
+                                <img src={(i.thumbnail)?`/api/util?img=${encodeURIComponent(i.thumbnail)}`:"/images/blog-image/blog2.jpg"} alt="image" />
+                                <span className="post-nav-title">Show</span>
+                            </span>
+                            <span className="prev-link-info-wrapper">
+                                <span className="prev-title">{i.title||"Other News"}</span>
+                                <span className="meta-wrapper">
+                                    <span className="date-post">{new Date(i.publishedAt).toLocaleDateString('ID',{ weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</span>
+                                </span>
+                            </span>
+                        </a>
+                        
+                    </Link>
+                </div>
+            </div>);
+        }
+    });
+    return (
+        <>
+            {/* <PageBanner pageTitle="Berita Terbaru" />  */}
+            <div style={{height:"50px"}}/>
+            <div className="blog-details-area ptb-80">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-lg-12 col-md-12">
+                            <div className="blog-details-desc">
+                                <center className="article-image justify-content-center">
+                                    <img className="newsThumbnail" src={(news.Image.data)?`/api/util?img=${encodeURIComponent(news.Image.data.attributes.url)}`:'/images/bigdata-analytics/main-banner.jpg'} alt="image" />
+                                </center>
+                                <div className="article-content">
+                                    <div className="entry-meta">
+                                        <ul>
+                                            <li>
+                                                <Icon.Clock /> {new Date(news.publishedAt).toLocaleDateString('ID',{ weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
+                                            </li>
+                                        </ul>
+                                    </div>
+ 
+                                    <h2>{news.Title}</h2> 
+                                    <p>
+                                        {util.htmlParse(news.Description||'')}
+                                    </p>
+                                </div>
+                                {(navigation.length>0)?(
+                                    <div className="startp-post-navigation">
+                                        {nav}
+                                    </div>    
+                                ):""
+                                }
+                                
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {/* <div className="blog-area pt-100 pb-50">
+                <div className="container">
+                    <div className="section-title">
+                        <h2>{news.Title}</h2>
+                        <img src={
+                        (news.Image.data)?`/api/util?img=${encodeURIComponent(news.Image.data.attributes.url)}`:url('/images/bigdata-analytics/main-banner.jpg')
+                        }/>
+                    </div>
+                    <div className="col-lg-4 col-md-6">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                    </div>
+                    <div className="row justify-content-center">
+                        <div className="col-lg-4 col-md-6">
+                            <div className="single-blog-post-box bg-f4faff">
+                                <div className="entry-thumbnail">
+                                    <Link href="/blog-details">
+                                        <a>
+                                            <img src="/images/blog-image/blog1.jpg" alt="image" />
+                                        </a>
+                                    </Link>
+                                </div>
+
+                                <div className="entry-post-content">
+                                    <div className="entry-meta">
+                                        <ul>
+                                            <li><a >Admin</a></li>
+                                            <li>August 15, 2021</li>
+                                        </ul>
+                                    </div>
+
+                                    <h3>
+                                        <Link href="/blog-details">
+                                            <a>Making Peace With The Feast Or Famine Of Freelancing</a>
+                                        </Link>
+                                    </h3>
+                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p>
+
+                                    <Link href="/blog-details">
+                                        <a className="learn-more-btn">
+                                            Read Story <Icon.Plus />
+                                        </a>
+                                    </Link>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="col-lg-4 col-md-6">
+                            <div className="single-blog-post-box bg-f4faff">
+                                <div className="entry-thumbnail">
+                                    <Link href="/blog-details">
+                                        <a><img src="/images/blog-image/blog2.jpg" alt="image" /></a>
+                                    </Link>
+                                </div>
+
+                                <div className="entry-post-content">
+                                    <div className="entry-meta">
+                                        <ul>
+                                            <li><a >Admin</a></li>
+                                            <li>August 18, 2021</li>
+                                        </ul>
+                                    </div>
+
+                                    <h3>
+                                        <Link href="/blog-details">
+                                            <a>I Used The Web For A Day On A 50 MB Budget</a>
+                                        </Link>
+                                    </h3>
+                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p>
+                                    
+                                    <Link href="/blog-details">
+                                        <a className="learn-more-btn">
+                                            Read Story <Icon.Plus />
+                                        </a>
+                                    </Link>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="col-lg-4 col-md-6">
+                            <div className="single-blog-post-box bg-f4faff">
+                                <div className="entry-thumbnail">
+                                    <Link href="/blog-details">
+                                        <a><img src="/images/blog-image/blog3.jpg" alt="image" /></a>
+                                    </Link>
+                                </div>
+
+                                <div className="entry-post-content">
+                                    <div className="entry-meta">
+                                        <ul>
+                                            <li><a >Admin</a></li>
+                                            <li>August 15, 2021</li>
+                                        </ul>
+                                    </div>
+
+                                    <h3>
+                                        <Link href="/blog-details">
+                                            <a>Here are the 5 most telling signs of micromanagement</a>
+                                        </Link>
+                                    </h3>
+                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p>
+                                    
+                                    <Link href="/blog-details">
+                                        <a className="learn-more-btn">
+                                            Read Story <Icon.Plus />
+                                        </a>
+                                    </Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+ */}
+                <div className="shape1">
+                    <img src="/images/shape1.png" alt="shape" />
+                </div>
+                <div className="shape2 rotateme">
+                    <img src="/images/shape2.svg" alt="shape" />
+                </div>
+                <div className="shape3">
+                    <img src="/images/shape3.svg" alt="shape" />
+                </div>
+                <div className="shape4">
+                    <img src="/images/shape4.svg" alt="shape" />
+                </div>
+                <div className="shape6 rotateme">
+                    <img src="/images/shape4.svg" alt="shape" />
+                </div>
+                <div className="shape7">
+                    <img src="/images/shape4.svg" alt="shape" />
+                </div>
+                <div className="shape8 rotateme">
+                    <img src="/images/shape2.svg" alt="shape" />
+                </div>
+            {/* </div> */}
+        </>
+        
+    )
+}
+
+export default NewsDetails; 

components/Common/new/NewsList.js

@@ -0,0 +1,111 @@
+import Link from "next/link";
+import * as Icon from 'react-feather';
+
+
+const NewsList = ({company,news,pages,current})=>{
+    if(news&&news.length>0){
+        const pagination = ()=>{
+            var paging = [];
+            for(var i=1;i<=pages;i++){
+                paging.push(
+                    <li className={`page-item ${i==current?'active':''}`}>
+                    <Link key={i} href={`/news?p=${i}`}>
+                            <a className="page-link" >{i}</a>
+                    </Link></li>
+                );
+            }
+            return paging;
+        };
+        const listNews = news.map((data,idx)=>{
+            return(
+            <div key={idx} className="col-lg-4 col-md-6">
+                <div className="single-blog-post">
+                    <div className="blog-image">
+                        <Link href={`/news/details/${data.id}`}>
+                            <a>
+                                <img src={(!data.attributes.Image.data)?'/images/blog-image/blog1.jpg':`/api/util?img=${encodeURIComponent(data.attributes.Image.data.attributes.url)}`} alt="image" />
+                            </a>
+                        </Link>
+
+                        <div className="date">
+                            <Icon.Calendar /> {new Date(data.attributes.publishedAt).toLocaleDateString('ID',{ weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
+                        </div>
+                    </div>
+
+                    <div className="blog-post-content">
+                        <h3>
+                            <Link href={`/news/details/${data.id}`}>
+                                <a>{data.attributes.Title}</a>
+                            </Link>
+                        </h3>
+
+                        {/* <span>By <a >Admin</a></span> */}
+                        <br/>
+                        <Link href={`/news/details/${data.id}`}>
+                            <a className="read-more-btn">
+                                Read More <Icon.ArrowRight />
+                            </a>
+                        </Link>
+                    </div>
+                </div>
+            </div>);
+        });
+        return(
+            <div className="blog-area ptb-80">
+                    <div className="container">
+                        <div className="row justify-content-center">
+                            {listNews}
+                            {/* Pagination */}
+                            <div className="col-lg-12 col-md-12">
+                                <div className="pagination-area">
+                                    <nav aria-label="Page navigation">
+                                        <ul className="pagination justify-content-center">
+                                            {(current!='1')?(<li className="page-item"><Link href={`./?p=${parseInt(current)-1}`}>
+                                                <a className="page-link" >Prev</a>
+                                            </Link></li>):""}
+                                            {pagination()}
+                                            {(current!=pages)?<li className="page-item"><Link href={`./?p=${parseInt(current)+1}`}>
+                                                <a className="page-link" >Next</a>
+                                            </Link></li>:""}
+                                        </ul>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="shape1">
+                        <img src="/images/shape1.png" alt="shape" />
+                    </div>
+                    <div className="shape2 rotateme">
+                        <img src="/images/shape2.svg" alt="shape" />
+                    </div>
+                    <div className="shape3">
+                        <img src="/images/shape3.svg" alt="shape" />
+                    </div>
+                    <div className="shape4">
+                        <img src="/images/shape4.svg" alt="shape" />
+                    </div>
+                    <div className="shape6 rotateme">
+                        <img src="/images/shape4.svg" alt="shape" />
+                    </div>
+                    <div className="shape7">
+                        <img src="/images/shape4.svg" alt="shape" />
+                    </div>
+                    <div className="shape8 rotateme">
+                        <img src="/images/shape2.svg" alt="shape" />
+                    </div>
+                </div>
+        );  
+    }
+    else{
+        return (
+            <div className="pt-80 pb-50 justify-content-center">
+                <center><h5>Belum ada berita untuk saat ini. Tunggu berita selanjutnya dari kami ya!</h5></center>
+            </div>
+        );
+    }
+    
+
+};
+
+export default NewsList;

components/Common/new/ProductDetails.js

@@ -0,0 +1,417 @@
+import React, { useState } from 'react'
+
+//component
+import PageBanner from '@/components/Common/PageBanner';
+import * as Icon from 'react-feather'
+import { useSelector, useDispatch } from 'react-redux'
+import { useRouter } from 'next/router'
+import { useToasts } from 'react-toast-notifications'
+
+//addon library
+import { resetIdCounter, Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+resetIdCounter();
+
+import dynamic from 'next/dynamic'
+const OwlCarousel = dynamic(import('react-owl-carousel3'))
+
+//library yarn
+import NumberFormat from 'react-number-format';
+import util from '../../../lib/util';
+
+//sweet alert
+import swal from 'sweetalert';
+
+const options = {
+    loop: true,
+    nav: true,
+    dots: false,
+    autoplay: true,
+    items: 1,
+    smartSpeed: 1000,
+    autoplayTimeout: 5000,
+    navText: [
+        "<i className='bx bx-chevron-left'></i>",
+        "<i className='bx bx-chevron-right'></i>"
+    ],
+};
+
+const ProductDetails = function ({ detailproduct, backend, user, ...props }) {
+    const [formValue, setFormValue] = React.useState({
+        product_img: "",
+        product_name: "",
+        product_color: "",
+        product_price: "",
+        product_parts:"",
+    });
+
+    const [OTRProduct, setProductOTR] = useState((detailproduct.Product_prices.data&&detailproduct.Product_prices.data.length==1)?detailproduct.Product_prices.data[0].attributes.Price:'');
+
+    const router = useRouter();
+    const [displayOwl, setDisplay] = React.useState(false);
+
+    React.useEffect(() => {
+        setDisplay(true);
+    }, [])
+
+    return (
+        <>
+            <PageBanner pageTitle="Product Details"/>
+                <div className="shop-details-area ptb-80">
+                    <div className="container">
+                        <div className="row align-items-start">
+                            <div className="col-lg-5">
+                                {(displayOwl)?<OwlCarousel
+                                    className="products-details-image products-details-image-slides owl-carousel owl-theme"
+                                    {...options}
+                                >
+                                    {(detailproduct.Image.data)?detailproduct.Image.data.map((option,idx) => (
+                                        <img key={`img${idx}`} src={`/api/util?img=${encodeURIComponent(option.attributes.url||'')}`} />
+                                    )):''}
+
+                                </OwlCarousel>:''}
+                            </div>
+
+                            <div className="col-lg-7">
+                                <div className="products-details">
+                                    <h2>   
+                                        {detailproduct.Name}
+                                    </h2>
+                                    <br/>
+                                    <h5>
+                                        <NumberFormat value={OTRProduct} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
+                                    </h5>
+                                    {/* <h3>
+                                        <NumberFormat value={data.product_otrs[0].price - data.product_otrs[0].price * data.discount} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
+                                    </h3>
+                                    <h5>
+                                        <div className="price" style={{ marginTop: "20px" }}>
+                                            <NumberFormat
+                                                style={{ color: "#EB1928" }}
+                                                displayType={'text'}
+                                                prefix={'%'}
+                                                decimalScale={2}
+                                                value={data.discount * 100}
+                                            />
+                                            <NumberFormat value={data.product_otrs[0].price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
+                                        </div>
+                                    </h5> */}
+
+                                    {/* <p>{this.state.selectedOption}</p> */}
+
+                                    {/* <ul className="rating">
+                                        <li><i className="flaticon-star-1"></i></li>
+                                        <li><i className="flaticon-star-1"></i></li>
+                                        <li><i className="flaticon-star-1"></i></li>
+                                        <li><i className="flaticon-star-1"></i></li>
+                                        <li><i className="flaticon-star-1"></i></li>
+                                    </ul> */}
+
+                                    {/* <div className="availability">
+                                        Availability: <span>{detailproduct.Stock}</span>
+                                    </div> */}
+                                    <form
+                                        onSubmit={async (e) => {
+                                            e.preventDefault();
+                                            var newformValue = {
+                                                ...formValue,
+                                                product_name: detailproduct.Name,
+                                                // product_img: detailproduct[0].backend.img[0],
+                                            }
+                                            setFormValue(newformValue)
+                                            // console.log(JSON.stringify(newformValue));
+                                            const response = await fetch(
+                                                "/api/transaction/AddToCart",
+                                                {
+                                                    method: "POST",
+                                                    headers: {
+                                                        'Content-Type': 'application/json'
+                                                    },
+                                                    body: JSON.stringify(newformValue),
+                                                }
+                                            );
+                                            if (response.ok) {
+                                                var res = await response.json();
+                                                // console.log("cek response :", res);
+                                                if (res["STATUS"] === 1) {
+                                                    res["DATA"]["cart"];
+                                                    swal("Produk Berhasil Ditambah ke Keranjang", "Silahkan Cek Keranjang Belanja Anda", "success");
+                                                    router.push("/yamaha/Shop/Cart");
+                                                }
+                                                else {
+                                                    swal("Produk Gagal Ditambah ke Keranjang", "Silahkan Coba Lagi", "error");
+                                                }
+                                            } else {
+                                                swal("Transaksi Gagal", "Silahkan Coba Lagi", "error");
+                                            }
+                                            return false;
+                                        }}
+                                    >
+                                        {
+                                            (detailproduct.Product_prices.data&&detailproduct.Product_prices.data.length>0)
+                                            ?(
+                                                <>
+                                                <br />
+                                                <label>Harga Product per Daerah <span className="required">*</span></label>
+
+                                                <div className="select-box" placeholder="Pilih Harga OTR">
+                                                    <select className="form-select"
+                                                        name="product_otr"
+                                                        onInput={(e) => {
+                                                            setFormValue({
+                                                                ...formValue,
+                                                                product_price: e.target.value.toString(),
+                                                            })
+                                                        }}
+                                                        onChange={e => setProductOTR(e.target.value)}
+                                                    >
+                                                        <option value="-">- Harga per Daerah -</option>
+                                                        {
+                                                            (detailproduct.Product_prices.data.length>1)
+                                                            ?detailproduct.Product_prices.data.map((option,idx) => (
+                                                                <option key={idx} value={option.attributes.Price}>{(option.attributes.region.data)?option.attributes.region.data.attributes.Name:''}</option>
+                                                            ))
+                                                            :<option selected value={detailproduct.Product_prices.data[0].attributes.Price}>{(detailproduct.Product_prices.data[0].attributes.region.data)?detailproduct.Product_prices.data[0].attributes.region.data.attributes.Name:''}</option>
+                                                        }
+                                                    </select>
+                                                </div>
+                                                </>
+                                            )
+                                            :""
+                                        }
+
+                                        {
+                                            (detailproduct.Product_parts.data&&detailproduct.Product_parts.data.length>0)
+                                            ?(
+                                                <>
+                                                <br />
+                                                <label>Sub-parts<span className="required">*</span></label>
+                                                <div className="select-box" placeholder="Pilih Warna">
+                                                    <select className="form-select"
+                                                        name="product_parts"
+                                                        onChange={e => setProductOTR(e.target.value)}
+                                                        onInput={(e) => {
+                                                            setFormValue({
+                                                                ...formValue,
+                                                                product_parts: e.target.value.toString()
+                                                            })
+                                                        }}
+                                                    >
+                                                        <option value="0">- Pilih Parts -</option>
+                                                        {detailproduct.Product_parts.data.map((option,idx) => (
+                                                            <option key={idx} value={(option.attributes.Product_prices.data&& option.attributes.Product_prices.data.length>0)?option.attributes.Product_prices.data[0].attributes.Price:'-'}>{option.attributes.Name}({option.attributes.Part_Code})</option>
+                                                        ))}
+                                                    </select>
+                                                </div>
+                                                </>
+                                            )
+                                            :""
+                                        }
+
+                                        {
+                                            (detailproduct.Product_colors.data&&detailproduct.Product_colors.data.length>0)
+                                            ?(
+                                                <>
+                                                <br />
+                                                <label>Tersedia dalam warna</label>
+                                                <br/>
+                                                {detailproduct.Product_colors.data.map((option,idx) => (
+                                                    <span key={idx}>{option.attributes.Color}{(idx==detailproduct.Product_colors.data.length-1)?'':','} </span>
+                                                ))}
+                                                </>
+                                            )
+                                            :""
+                                        }
+                                        
+                                        {/* <label>Warna Product<span className="required">*</span></label>
+                                        <div className="select-box" placeholder="Pilih Warna">
+                                            <select className="form-select"
+                                                name="product_color"
+                                                onInput={(e) => {
+                                                    setFormValue({
+                                                        ...formValue,
+                                                        product_color: e.target.value.toString()
+                                                    })
+                                                }}
+                                            >
+                                                <option value="0">- Pilih Product Color -</option>
+                                                {detailproduct.Product_colors.data.map((option) => (
+                                                    <option value={option.attributes.Color}>{option.attributes.Color}</option>
+                                                ))}
+                                            </select>
+                                        </div> */}
+
+                                        <br />
+
+                                        {/* <button type="submit">Add to Cart</button> */}
+{/* 
+                                        <a  className="add-to-wishlist-btn" title="Add to Wishlist">
+                                            <Icon.Heart />
+                                        </a> */}
+                                    </form>
+
+                                    {/* <div className="custom-payment-options">
+                                        <span>Metode Pembayaran : </span>
+
+                                        <div className="payment-methods">
+                                            <img src="/images/payment-image/Mastercard.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/Visa.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/BNI.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/BCA.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/Mandiri.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/BSI.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/Indomaret.svg" width="50px" alt="image" />
+                                        </div>
+                                    </div> */}
+
+                                    {/* <div className="products-share-social">
+                                        <span>Share:</span>
+
+                                        <ul>
+                                            <li>
+                                                <a  className="facebook" target="_blank">
+                                                    <Icon.Facebook />
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a  className="twitter" target="_blank">
+                                                    <Icon.Twitter />
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a  className="instagram" target="_blank">
+                                                    <Icon.Instagram />
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div> */}
+                                </div>
+                            </div>
+
+                            <div className="col-lg-12 col-md-12">
+                                <div className="products-details-tabs">
+                                    <Tabs>
+                                        <TabList>
+                                            <Tab>Deskripsi</Tab>
+                                            {/* <Tab>Info Penting</Tab> */}
+                                            {
+                                                (detailproduct.Category.data && detailproduct.Category.data.attributes.Name == "Unit")
+                                                ? <Tab>Spesifikasi</Tab>
+                                                : ""
+                                            }
+                                            {/* <Tab>Review</Tab> */}
+                                        </TabList>
+
+                                        <TabPanel>
+                                            <div className="products-description" align="left">
+                                                <p>{util.htmlParse(detailproduct.Description)}</p>
+                                            </div>
+                                        </TabPanel>
+
+                                        {/* <TabPanel>
+                                            <div className="products-description" align="left">
+                                                <p>
+                                                    <p><b>Informasi mengenai prosedur pengiriman, pembelian dan dokumen</b></p>
+                                                    <ul>
+                                                        <li>Kota Palembang, Kayu Agung, Prabumulih, Pangkalan Balai, Betung : 2-3 hari kerja*</li>
+                                                        <li>Untuk daerah Sungsang/daerah lain yang menggunakan kapal motor, maka motor diantar sampai di dermaga sesuai dengan jadwal yang diinformasikan</li>
+                                                        <li>Sekayu, Babat Toman, Pendopo, Baturaja, Martapura, Muara Dua, Lahat, Tanjung Enim, Tugu Mulyo, Belitang : 4-5 hari kerja*</li>
+                                                        <li>Lubuk Linggau, Curup, Pagar Alam : 6-7 hari kerja*</li>
+                                                    </ul>
+
+                                                    <p><b>Harga</b></p>
+                                                    <ul>
+                                                        <li>Harga OTR sudah termasuk biaya pengiriman dan BBN, kecuali tambahan pengenaan pajak progresif kepemilikan kendaraan bermotor (sesuai dengan peraturan yang telah ditetapkan oleh pemerintah)</li>
+                                                        <li>Harga OTR diatas berlaku untuk KTP domisili PALEMBANG, OGAN ILIR, dan BANYUASIN, diluar wilayah tersebut harap menghubungi kami untuk konfirmasi harga.</li>
+                                                        <li>Harga OTR sewaktu-waktu dapat berubah.</li>
+                                                        <li>Proses pemesanan sepeda motor tidak dapat dibatalkan dan warna yang sudah dipesan tidak dapat diubah.</li>
+                                                        <li>Proses pemesanan yang terkait waktu pengiriman produk dan kelengkapan dokumen yang dibutuhkan untuk pembuatan STNK dan BPKB akan  diinformasikan oleh pihak Dealer.</li>
+                                                        <li>Proses pengiriman sepeda motor akan dilakukan setelah pelunasan transaksi dan dokumen yang dibutuhkan telah lengkap.</li>
+                                                    </ul>
+
+                                                    <p><b>Dokumen</b></p>
+                                                    <ul>
+                                                        <li>Proses pembuatan STNK setelah KTP diterima oleh pihak dealer adalah 19-25 hari kerja*.</li>
+                                                        <li>Proses pembuatan BPKB adalah 3-4 bulan.</li>
+                                                        <li>STNK dan BPKB wajib diambil sendiri oleh pihak yang bersangkutan sesuai dengan identitas yang tertera STNK di dealer yang ditunjuk.</li>
+                                                        <li>Untuk proses pembuatan STNK dan BPKB sepenuhnya menjadi tanggung jawab dealer terkait.</li>
+                                                        <li>Buku servis diterima bersamaan dengan pengiriman sepeda motor.</li>
+                                                    </ul>
+
+                                                    <p><b>*tidak termasuk Sabtu dan Minggu.</b></p>
+                                                </p>
+                                            </div>
+                                        </TabPanel> */}
+
+                                        <TabPanel>
+                                            <div className="products-description">
+                                                <ul className="additional-information">
+                                                    <h2>Spesifikasi Mesin</h2>
+                                                    {util.htmlParse(detailproduct.Machine)}<br /><br />
+
+                                                    <h2>Spesifikasi Dimensi</h2>
+                                                    {util.htmlParse(detailproduct.Dimension)}<br /><br />
+
+                                                    <h2>Spesifikasi Rangka</h2>
+                                                    {util.htmlParse(detailproduct.Structure)}<br /><br />
+
+                                                    <h2>Spesifikasi Kelistrikan</h2>
+                                                    {util.htmlParse(detailproduct.Voltage)}<br /><br />
+                                                </ul>
+                                            </div>
+                                        </TabPanel>
+
+                                        {/* <TabPanel>
+                                            <div className="products-reviews">
+                                                <h3>Customer Reviews</h3>
+                                                <p>There are no reviews yet.</p>
+
+                                                <form className="review-form">
+                                                    <p>Rate this item:</p>
+
+                                                    <div className="star-rating">
+                                                        <i className='bx bxs-star'></i>
+                                                        <i className='bx bxs-star'></i>
+                                                        <i className='bx bxs-star'></i>
+                                                        <i className='bx bxs-star'></i>
+                                                        <i className='bx bxs-star'></i>
+
+                                                        <p>Very good product!</p>
+                                                    </div>
+
+                                                    <div className="row">
+                                                        <div className="col-lg-12">
+                                                            <div className="form-group">
+                                                                <textarea name="review-message" id="message" cols="30" rows="4" placeholder="Write your review*" className="form-control"></textarea>
+                                                            </div>
+                                                        </div>
+
+                                                        <div className="col-lg-6 col-md-6">
+                                                            <div className="form-group">
+                                                                <input type="text" placeholder="Name*" className="form-control" />
+                                                            </div>
+                                                        </div>
+
+                                                        <div className="col-lg-6 col-md-6">
+                                                            <div className="form-group">
+                                                                <input type="email" placeholder="Email*" className="form-control" />
+                                                            </div>
+                                                        </div>
+
+                                                        <div className="col-lg-12 col-md-12">
+                                                            <button type="submit" className="btn btn-primary">Submit</button>
+                                                        </div>
+                                                    </div>
+                                                </form>
+                                            </div>
+                                        </TabPanel> */}
+                                    </Tabs>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+        </>
+    )
+}
+
+export default ProductDetails;

components/Common/new/Sales.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import Link from 'next/link';
+import * as Icon from 'react-feather';
+
+const Sales = function ({ company, sales, ...props }) {
+
+    const DataSales = sales.map((data) => {
+        return (
+            <div className="col-lg-3 col-md-6">
+                <div className="single-team">
+                    <img src={(data.DP.data)?`/api/util?img=${encodeURIComponent(data.DP.data.attributes.url)}`:`/images/default_sales_DP/${company}.png`} alt="image" />
+
+                    <div className="team-content">
+                        <div className="team-info">
+                            <span>{(data.Name)?(data.Name.length>20)?data.Name.substring(0,20):data.Name:''}</span><br/>
+                            <span>Sales Consultant</span>
+                        </div>
+                        <ul>
+                            <li>
+                            <h6>{data.Telp}</h6>
+                            </li>
+                        </ul>
+                        <ul>
+                            <li>
+                            <a href={`tel:${data.Telp}`}><Icon.Phone /> </a>
+                            </li>
+                            <li>
+                            <a href={`https://wa.me/${data.Telp}`}> <Icon.MessageCircle /></a>
+                           
+                            </li>
+                        </ul>
+                        {/* <ul>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Facebook /></a>
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Twitter /></a>
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Linkedin /></a>
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href='/#'>
+                                    <a target="_blank"><Icon.Gitlab /></a>
+                                </Link>
+                            </li>
+                        </ul> */}
+                        <br /><br />
+                        <Link href={"/sales?s="+data.id}>
+                            <a className="btn btn-primary">Details</a>
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        )
+    })
+    return (
+        <div className="team-area repair-team-area pt-80 pb-50 bg-f9f6f6">
+            <div className="container">
+                <div className="section-title">
+                    <h2>Mercedes Benz Sales</h2>
+                    <div className="bar"></div>
+                </div>
+
+                <div className="row justify-content-center">
+                    {DataSales}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Sales;

components/Common/new/Sales_Detail.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import Link from 'next/link';
+import * as Icon from 'react-feather';
+
+import { FaWhatsapp } from "react-icons/fa";
+import { FaRegEnvelope } from "react-icons/fa";
+import { FaPhoneAlt } from "react-icons/fa";
+
+const Sales = function ({ sales, ...props }) {
+    return (
+        <div>
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+
+        <div className="jumbotron" style={{ backgroundColor: "#000" }}>
+            <div className="single-team" style={{ backgroundColor: "#000" }}>
+                <img src={(sales.DP.data)?`/api/util?img=${encodeURIComponent(sales.DP.sales.attributes.url)}`:`/images/default_sales_DP/${sales.Company.data?sales.Company.data.attributes.Name.toLowerCase():"/images/Sales/Logo Star.png"}.png`} width="180px" alt="image" style={{ marginTop: "-50px" }} />
+
+                <div className="team-content">
+                    <h1 style={{ color: "#fff" }}>{sales.Name}</h1>
+                    <p style={{ color: "#fff" }}><strong>Sales Consultant</strong></p>
+                </div>
+            </div>
+            <div align="center" style={{ marginTop: "-30px" }}>
+                <Link href={`tel:${sales.Telp}`}>
+                    <a style={{ marginRight: "10px", borderRadius: "50px", backgroundColor: "#212121", color: "#fff", padding: "15px 20px", border: "none", fontSize: "15px" }}><i className="fa fa-phone"></i> <b>CALL US</b></a>
+                </Link>
+                <Link href={`mailto:${sales.Email}`}>
+                    <a style={{ borderRadius: "50px", backgroundColor: "#212121", color: "#fff", padding: "15px 20px", border: "none", fontSize: "15px" }}><i className="fa fa-envelope"></i> <b>EMAIL US</b></a>
+                </Link>
+                <Link href={`https://wa.me/62${sales.WA}`}>
+                    <a style={{ marginLeft: "10px", borderRadius: "50px", backgroundColor: "#212121", color: "#fff", padding: "15px 20px", border: "none", fontSize: "15px" }}><i className="fa fa-whatsapp"></i> <b>WA US</b></a>
+                </Link>
+            </div>
+        </div>
+
+        <div style={{ marginTop: "-30px" }}>
+            <table className="table">
+                <thead>
+                    <tr>
+                        <th style={{ textAlign: "right" }} width="50%">
+                            <Link href={`tel:${sales.Telp}`}>
+                                <a style={{ textAlign:'center',width: "90px", marginRight: "10px", borderRadius: "50px", backgroundColor: "#000", color: "#fff", padding: "12px 16px", border: "none", fontSize: "15px" }}><i className="fa fa-phone"></i></a>
+                            </Link>
+                        </th>
+                        <th align="right" width="50%">{sales.Telp} <br /> Mobile </th>
+                        <th></th>
+                        <th /><th />
+                    </tr>
+                    <tr >
+                        <th style={{ textAlign: "right" }}>
+                            <Link href={`mailto:${sales.Email}`}>
+                                <a style={{ textAlign:'center',width: "90px", marginRight: "10px", borderRadius: "50px", backgroundColor: "#000", color: "#fff", padding: "12px 16px", border: "none", fontSize: "15px" }}><i className="fa fa-envelope"></i></a>
+                            </Link>
+                        </th>
+                        <th>{sales.Email} <br /> Email </th>
+                        <th></th>
+                        <th /><th />
+                    </tr>
+                    <tr>
+                        <th style={{ textAlign: "right" }}>
+                            <Link href="https://www.google.co.id/maps/place/Mercedes-Benz+-+PT.+THAMRIN+CITRA+ABADI/@-2.946646,104.7294956,17z/data=!3m1!4b1!4m5!3m4!1s0x2e3b7439cb4d6c0b:0xf12bc3dc2ab868f4!8m2!3d-2.9466514!4d104.7316843?hl=id">
+                                <a style={{ textAlign:'center',width: "90px", marginRight: "10px", borderRadius: "50px", backgroundColor: "#000", color: "#fff", padding: "12px 16px", border: "none", fontSize: "15px" }}><i className="fa fa-map-marker"></i></a>
+                            </Link>
+                        </th>
+                        <th>{sales.Company.data?sales.Company.data.attributes.Name:''} <br /> Sales Consultant </th>
+                        <th></th>
+                        <th /><th />
+                    </tr>
+                    <tr>
+                        <th style={{ textAlign: "right" }}>
+                            <Link href={(sales.Company.data?sales.Company.data.attributes.Website:"https://www.thamrin.mercedes-benz.co.id/en/desktop/passenger-cars.html")}>
+                                <a style={{ textAlign:'center',width: "90px", marginRight: "10px", borderRadius: "50px", backgroundColor: "#000", color: "#fff", padding: "12px 16px", border: "none", fontSize: "15px" }}><i className="fa fa-globe"></i></a>
+                            </Link>
+                        </th>
+                        <th>{(sales.Company.data?sales.Company.data.attributes.Website:'thamrin.mercedes-benz.co.id')}<br /> Website </th>
+                        <th></th>
+                        <th /><th />
+                    </tr>
+                </thead>
+            </table>
+        </div>
+
+    </div>
+    )
+}
+
+export default Sales;

components/Common/new/SparepartList.js

@@ -0,0 +1,236 @@
+import React from 'react'
+import * as Icon from 'react-feather'
+import { useSelector } from 'react-redux'
+import Select from 'react-select';
+import Router from 'next/router';
+import Link from 'next/link';
+
+//addon library
+import { resetIdCounter, Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+resetIdCounter();
+
+//yarn library
+import NumberFormat from 'react-number-format';
+
+const SparepartList = function ({ company,category,page,selected,products, ...props }) {
+    // const handleName = values => {
+    //     Router.push({
+    //         pathname: '/${company}/product/Sparepart?c='+(company||''),
+    //         query: (values && values.length != 0) ? { filter: values["name"] } : {},
+    //     })
+    // }
+
+    category = category.map((i)=>i.replace(' ','_'));
+    const pagination = (type,pages)=>{
+        var paging = [];
+        var current = (selected==type)?page:1;
+        for(var i=1;i<=pages;i++){
+            paging.push(
+                <li key={`link_${i}`} className={`page-item ${i==current?'active':''}`}>
+                        <Link href={`./?s=${type}&p=${i}`}><a  className="page-link">{i}</a></Link>
+                </li>
+            );
+        }
+        
+        return (
+            <div className="row justify-content-md-center">
+                <div className="col-lg-12 col-md-12 col-sm-12">
+                    <div className="pagination-area">
+                        <nav aria-label="Page navigation">
+                            <ul className="pagination justify-content-center">
+                                {(current!='1')?(<li className="page-item">
+                                    <Link href={`./?s=${type}&p=${parseInt(current)-1}`}><a className="page-link" >Prev</a></Link>
+                                </li>):""}
+                                {paging}
+                                {(current!=pages)?<li className="page-item">
+                                    <Link href={`./?s=${type}&p=${parseInt(current)+1}`}><a className="page-link" >Next</a></Link>
+                                </li>:""}
+                            </ul>
+                        </nav>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const productGrid = function(product){
+        if(product){
+            return product.map((data) => {
+                return (
+                    <div className="col-lg-3 col-md-6 col-sm-6" key={product.id}>
+                        <div className="single-products">
+                            <div className="products-image">
+                                <img src={`/api/util?img=${(data.attributes.Image.data)?encodeURIComponent(data.attributes.Image.data[0].attributes["url"]):''}`} />
+                                <ul>
+                                    <li>
+                                        <Link href={`/product/${data.id}`}>
+                                            <a>
+                                                <Icon.Search />
+                                            </a>
+                                        </Link>
+                                        
+                                    </li>
+                                    <li>
+                                    <a onClick={function (evt) {
+                                        evt.preventDefault();
+                                        navigator.clipboard.writeText(evt.target.baseURI.substring(0,evt.target.baseURI.lastIndexOf('product/')+8)+`${data.id}`).then(() => {
+                                         alert("a produk berhasil di copy. Silakan share ke teman - teman anda.");
+                                        }, () => {
+                                            alert("Gagal men-copy link. Silakan mencopy link produk secara manual");
+                                        });
+                                    }}>
+                                        <Icon.Link/>
+                                    </a>
+                                </li>
+                                </ul>
+                            </div>
+        
+                            <div className="products-content">
+                                <h3>
+                                    <Link href={`/product/${data.id}`}>
+                                        <a>{data.attributes.Name}</a>
+                                    </Link>
+                                </h3>
+                                <span>
+                                    <NumberFormat value={data.attributes.Product_prices.data&& data.attributes.Product_prices.data.length>0?data.attributes.Product_prices.data[0].attributes.Price:0 *( 1- data.discount)} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
+                                </span><br />
+                                <span></span>
+                                <span>
+                                    <div className="products-details">
+                                        <div className="price">
+                                            <NumberFormat
+                                                style={{ color: "#EB1928" }}
+                                                displayType={'text'}
+                                                prefix={'%'}
+                                                decimalScale={2}
+                                                value={data.attributes.Discount * 100}
+                                            />
+                                            <NumberFormat value={data.attributes.Product_prices.data&& data.attributes.Product_prices.data.length>0?data.attributes.Product_prices.data[0].attributes.Price:0} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
+                                        </div>
+                                    </div>
+                                </span>
+        
+                                <Link href={`/product/${data.id}`}>
+                                    <a className="add-to-cart-btn">Detail Product</a>
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                );
+            });
+        }
+        else return(
+        <div className="pt-80 pb-50 justify-content-center">
+            <center><h5>Belum ada produk untuk saat ini. Tunggu berita selanjutnya dari kami ya!</h5></center>
+        </div>);
+    }
+
+    return (
+        <div className="shop-area ptb-80">
+            <div className="container">
+                <div className="woocommerce-topbar">
+                    <div className="row align-items-center">
+
+                        {/* <div className="col-lg-5 col-md-5 col-sm-5">
+                            <Select
+                                value={(selected) ? ygp.filter((i) => i.id == selected) : null}
+                                getOptionLabel={option => `${option.name}`}
+                                getOptionValue={option => option.id}
+                                options={ygp}
+                                isSearchable
+                                isMulti
+                                isClearable
+                                instanceId="name"
+                                placeholder="Cari Produk"
+                                onChange={values => handleName(values)}
+                            />
+                        </div> */}
+                    </div>
+                </div>
+
+                <div width="fullwidth">
+                    <div className="products-details-tabs">
+                        <Tabs>
+                            <TabList>
+                                {category.map((i)=>{
+                                    return (<Tab key={i}>{i.replace(/\_/g,' ')}</Tab>);
+                                })}
+                            </TabList>
+                            {category.map((i,idx)=>{
+                                return (
+                                    <TabPanel key={idx}>
+                                        <div className="col-lg-2 col-md-2 col-sm-2">
+                                            <div className="woocommerce-result-count">
+                                                <p>Showing {(((selected==i)?page:1)-1)*8+1}-{(((selected==i)?page:1)*8>products[i].meta.pagination.total)?products[i].meta.pagination.total:((selected==i)?page:1)*8} of {products[i].meta.pagination.total} results</p>
+                                            </div>
+                                        </div>
+                                        <div className="row justify-content-md">
+                                            {productGrid(products[i].data)}
+                                            {pagination(i.toLowerCase(),(products[i].meta)?products[i].meta.pagination.pageCount:1)}
+                                        </div>
+                                    </TabPanel>
+                                );
+                            })}    
+                            {/* <TabPanel>
+                                <div className="row justify-content-md">
+                                    {YGP}
+                                    {pagination('ygp',ygp.meta.pagination.pageCount)}
+                                </div>
+                            </TabPanel>
+                            <TabPanel>
+                                <div className="row justify-content-md">
+                                    {Yamalube}
+                                    {pagination('lube',yamalube.meta.pagination.pageCount)}
+                                </div>
+                            </TabPanel>
+                            <TabPanel>
+                                <div className="row justify-content-md">
+                                    {Helmet}
+                                    {pagination('helmet',helmet.meta.pagination.pageCount)}
+                                </div>
+                            </TabPanel>
+                            <TabPanel>
+                                <div className="row justify-content-md">
+                                    {Apparel}
+                                    {pagination('apparel',apparel.meta.pagination.pageCount)}
+                                </div>
+                            </TabPanel>
+                            <TabPanel>
+                                <div className="row justify-content-md">
+                                    {Accessories}
+                                    {pagination('accessories',accessories.meta.pagination.pageCount)}
+                                </div>
+                            </TabPanel> */}
+                        </Tabs>
+                    </div>
+                </div>
+
+                {/* <div className="row justify-content-md-center">
+                    
+                    {Product}
+
+                    Pagination
+                    <div className="col-lg-12 col-md-12 col-sm-12">
+                        <div className="pagination-area">
+                            <nav aria-label="Page navigation">
+                                <ul className="pagination justify-content-center">
+                                    <li className="page-item"><a className="page-link">Prev</a></li>
+
+                                    <li className="page-item active"><a className="page-link">1</a></li>
+
+                                    <li className="page-item"><a className="page-link">2</a></li>
+
+                                    <li className="page-item"><a className="page-link">3</a></li>
+
+                                    <li className="page-item"><a className="page-link">Next</a></li>
+                                </ul>
+                            </nav>
+                        </div>
+                    </div>
+                </div> */}
+            </div>
+        </div>
+    )
+}
+
+export default SparepartList;

components/Common/new/UnitList.js

@@ -0,0 +1,160 @@
+import React from 'react'
+import * as Icon from 'react-feather'
+import { useSelector } from 'react-redux'
+import NumberFormat from 'react-number-format';
+import Select from 'react-select';
+import Router from 'next/router';
+import Link from 'next/link';
+
+const ProductCards = function ({ company,total,selected, product,pages,current, backend, user, ...props }) {
+    // const products = useSelector((state) => state.products)
+    // const handleName = values => {
+    //     Router.push({
+    //         pathname: '/yamaha/product/motor',
+    //         query: (values&&values.length!=0)?{ filter: values["name"] }:{},
+    //     })
+    // }
+    if(product&&product.length>0){
+        const pagination = ()=>{
+            var paging = [];
+            for(var i=1;i<=pages;i++){
+                paging.push(
+                    <li key={`link_${i}`} className={`page-item ${i==current?'active':''}`}>
+                            <Link href={`./?p=${i}`} ><a className="page-link">{i}</a></Link>
+                    </li>
+                );
+            }
+            return paging;
+        };
+        
+        const Product = product.map((data) => {
+            return (
+                <div className="col-lg-3 col-md-6 col-sm-6" key={product.id}>
+                    <div className="single-products">
+                        <div className="products-image">
+                            <img src={`/api/util?img=${encodeURIComponent(data.attributes.Image.data[0].attributes.url)}`}
+                            />
+                            <ul>
+                                <li>
+                                <Link href={`/product/${data.id}`}>
+                                    <a >
+                                        <Icon.Search />
+                                    </a>
+                                </Link>
+                                </li>
+                                {/* <li>
+                                    <a >
+                                        <Icon.Heart />
+                                    </a>
+                                </li> */}
+                                <li>
+                                    <a onClick={function (evt) {
+                                        evt.preventDefault();
+                                        navigator.clipboard.writeText(evt.target.baseURI.substring(0,evt.target.baseURI.lastIndexOf('product/')+8)+`${data.id}`).then(() => {
+                                         alert("a produk berhasil di copy. Silakan share ke teman - teman anda.");
+                                        }, () => {
+                                            alert("Gagal men-copy link. Silakan mencopy link produk secara manual");
+                                        });
+                                    }}>
+                                        <Icon.Link/>
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+    
+                        <div className="products-content">
+                            <h3>
+                                <Link href={`/product/${data.id}`}>
+                                    <a>{data.attributes.Name}</a>
+                                </Link>
+                            </h3>
+                            {
+                                (data.attributes.Product_prices.data.length==0)
+                                ?"-"
+                                :(data.attributes.Product_prices.data.length==1)
+                                    ?(<span><NumberFormat value={Math.min.apply(null, data.attributes.Product_prices.data.map((i)=>i.attributes.Price))} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></span>)
+                                    :(
+                                        <span>
+                                            <NumberFormat value={Math.min.apply(null, data.attributes.Product_prices.data.map((i)=>i.attributes.Price))} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /> 
+                                        {"  s/d  "}
+                                            <NumberFormat value={Math.max.apply(null, data.attributes.Product_prices.data.map((i)=>i.attributes.Price))} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
+                                        </span>
+                                    )
+                            }
+                            {/* <ul>
+                                <li><i className="flaticon-star-1"></i></li>
+                                <li><i className="flaticon-star-1"></i></li>
+                                <li><i className="flaticon-star-1"></i></li>
+                                <li><i className="flaticon-star-1"></i></li>
+                                <li><i className="flaticon-star-1"></i></li>
+                            </ul> */}
+    
+                            <Link href={`/product/${data.id}`}>
+                                <a className="add-to-cart-btn">Detail Product</a>
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+            );
+        })
+        return (
+            <div className="shop-area ptb-80">
+                <div className="container">
+                    <div className="woocommerce-topbar">
+                        <div className="row align-items-center">
+                            <div className="col-lg-7 col-md-7 col-sm-7">
+                                <div className="woocommerce-result-count">
+                                    <p>Menampilkan {(current-1)*8+1}-{(current*8>total)?total:current*8} of {total} results</p>
+                                </div>
+                            </div>
+    
+                            <div className="col-lg-5 col-md-5 col-sm-5">
+                                {/* <Select
+                                    value={(selected) ? product.filter((i) => i.id == selected) : null}
+                                    getOptionLabel={option => `${option.name}`}
+                                    getOptionValue={option => option.id}
+                                    options={product}
+                                    isClearable="true"
+                                    instanceId="name"
+                                    placeholder="Cari Produk"
+                                    onChange={values => handleName(values)}
+                                /> */}
+                            </div>
+                        </div>
+                    </div>
+    
+                    <div className="row justify-content-md">
+    
+                        {Product}
+    
+                        {/* Pagination */}
+                        <div className="col-lg-12 col-md-12 col-sm-12">
+                            <div className="pagination-area">
+                                <nav aria-label="Page navigation">
+                                    <ul className="pagination justify-content-center">
+                                        {(current!='1')?(<li className="page-item">
+                                            <Link href={`./?p=${parseInt(current)-1}`} ><a className="page-link" >Prev</a></Link>
+                                        </li>):""}
+                                        {pagination()}
+                                        {(current!=pages)?<li className="page-item">
+                                            <Link href={`./?p=${parseInt(current)+1}`} ><a className="page-link" >Next</a></Link>
+                                        </li>:""}
+                                    </ul>
+                                </nav>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+    else{
+        return (
+            <div className="pt-80 pb-50 justify-content-center">
+                <center><h5>Belum ada produk yang terdaftar untuk saat ini. Tunggu berita selanjutnya dari kami ya!</h5></center>
+            </div>
+        );
+    }
+}
+
+export default ProductCards;

components/Company/AboutUs/AboutUs.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import Partner from "@/components/Common/Partner";
+import Link from 'next/link';
+import util from '../../../lib/util';
+
+const About1 = ({info,company,img}) => {
+    return (
+        <>
+            <div className="about-area ptb-80">
+                <div className="container">
+                    <div className="row align-items-center">
+                        <div className="col-lg-6 col-md-12">
+                            <div className="about-image">
+                                <img src={`/api/util?img=${encodeURIComponent(img)}`} alt="image" />
+                            </div>
+                        </div>
+
+                        <div className="col-lg-6 col-md-12">
+                            <div className="about-content">
+                                <div className="section-title">
+                                    <h2>Tentang Kami</h2>
+                                    <p>{util.htmlParse(info)||<div className="bar"></div>}</p>
+                                </div>
+                                <div className="section-title">
+                                    <h2>Visi</h2>
+                                    <p>{util.htmlParse(company.Visi)||<div className="bar"></div>}</p>
+                                </div>
+                                <div className="section-title">
+                                    <h2>Misi</h2>
+                                    
+                                    {/* {util.htmlParse(misi)} */}
+                                    {util.htmlParse(company.Misi)||<div className="bar"></div>}
+                                    {/* <p>
+                                        1. Melayani 21,7 juta pelanggan di tahun 2022
+                                    </p><br/>
+                                    <p>
+                                        2. Mengembangkan pemimpin yang sukses
+                                    </p><br/>
+                                    <p>
+                                        3. Mengelola proses administrasi yang simple & excellent
+                                    </p><br/>
+                                    <p>
+                                        4. Mendukung continuous improvement
+                                    </p><br/> */}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="ready-to-talk">
+                <div className="container">
+                    <br/><br/>
+                    <h3>Ingin Info Lebih Lanjut ?</h3>
+                    <p>Tanyakan Kepada Pihak Kami Untuk Info Lebih Lanjutnya</p>
+                    
+                    <Link href={`/${company.Name.toLowerCase()}/contact`}>
+                        <a className="btn btn-primary">Contact Us</a>
+                    </Link>
+
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default About1;

components/Company/ContactUs/ContactUs.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import * as Icon from 'react-feather';
+
+const ContactInfo = ({mail,phone}) => {
+    return (
+        <div>
+            <div className="contact-info-area ptb-80">
+                <div className="container">
+                    <div className="row justify-content-center">
+                        <div className="col-lg-4 col-md-6 col-sm-6">
+                            <div className="contact-info-box">
+                                <div className="icon">
+                                    <Icon.Mail />
+                                </div>
+                                <h3>Mail Here</h3>
+                                <p><a href="mailto:admin@startp.com">thamrin@gmail.co.id</a></p>
+                            </div>
+                        </div>
+
+                        <div className="col-lg-4 col-md-6 col-sm-6">
+                            <div className="contact-info-box">
+                                <div className="icon">
+                                    <Icon.Phone />
+                                </div>
+                                <h3>Call Here</h3>
+                                <p><a href="tel:+1234567890">0711-322424</a></p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <iframe src="https://maps.google.com/maps?q=Thamrin%20Indrapura&t=&z=17&ie=UTF8&iwloc=&output=embed"  width="100%" height="450" allowFullScreen="" loading="lazy"></iframe>
+
+
+        </div>
+    )
+}
+
+export default ContactInfo;

components/Company/Footer.js

@@ -0,0 +1,165 @@
+import React from 'react';
+import Link from 'next/link';
+import * as Icon from 'react-feather';
+
+const Footer = ({company,social,icon,desc}) => {
+    company = company||{};
+    const currentYear = new Date().getFullYear();
+    const Socials = (social)?social.map((data,idx)=>{
+        return(
+            <li key={idx}>
+                <Link href={data.attributes.Link}>
+                    {
+                        (data.attributes.Type =='Facebook')
+                        ?(<a className="facebook" target="_blank"><Icon.Facebook /></a>)
+                        :(data.attributes.Type =='Instagram')
+                        ?(<a className="instagram" target="_blank"><Icon.Instagram /></a>)
+                        :(data.attributes.Type =='Twitter')
+                        ?(<a className="twitter" target="_blank"><Icon.Twitter /></a>)
+                        :(data.attributes.Type =='Youtube')
+                        ?(<a className="youtube" target="_blank"><Icon.Youtube /></a>):""
+                    }
+                </Link>
+            </li>
+        );
+    }):"";
+    
+    return (
+        <footer className="footer-area bg-f7fafd">
+            <div className="container">
+                <div className="row">
+                    <div className="col-lg-3 col-md-6">
+                        <div className="single-footer-widget">
+                            <div className="logo">
+                                <Link href='/#'>
+                                    <a>
+                                        <img src={`/api/util?img=${encodeURIComponent(icon)}`} width="200px" alt="logo" />
+                                    </a>
+                                </Link>
+                            </div>
+                            {/* <p>{desc}</p> */}
+                        </div>
+                    </div>
+
+                    <div className="col-lg-3 col-md-6">
+                        <div className="single-footer-widget pl-5">
+                            <h3>Menu</h3>
+                            <ul className="list">
+                                <li>
+                                    <Link href="/">
+                                        <a>Home</a>
+                                    </Link>
+                                </li>
+                                <li>
+                                    <Link href="/product/motor">
+                                        <a>Product</a>
+                                    </Link>
+                                </li>
+                                <li>
+                                    <Link href="/news">
+                                        <a>Latest News</a>
+                                    </Link>
+                                </li>
+                                {/* <li>
+                                    <Link href="/pricing">
+                                        <a>Carrer</a>
+                                    </Link>
+                                </li> */}
+                                <li>
+                                    <Link href="/about">
+                                        <a>About Us</a>
+                                    </Link>
+                                </li>
+                                <li>
+                                    <Link href="/contact">
+                                        <a>Contact Us</a>
+                                    </Link>
+                                </li>
+                            </ul>
+                        </div>
+                    </div> 
+
+                    {/* <div className="col-lg-3 col-md-6">
+                        <div className="single-footer-widget">
+                            <h3>Support</h3>
+                            <ul className="list">
+                                <li>
+                                    <Link href="/faq">
+                                        <a>FAQ's</a>
+                                    </Link>
+                                </li> 
+                                <li>
+                                    <Link href="/privacy-policy">
+                                        <a>Privacy Policy</a>
+                                    </Link>
+                                </li>
+                                <li>
+                                    <Link href="/term-condition">
+                                        <a>Terms & Condition</a>
+                                    </Link>
+                                </li>
+                                <li>
+                                    <Link href="/team">
+                                        <a>Team</a>
+                                    </Link>
+                                </li>
+                                <li>
+                                    <Link href="/yamaha/ContactUs">
+                                        <a>Contact Us</a>
+                                    </Link>
+                                </li>
+                            </ul>
+                        </div>
+                    </div> */}
+
+                    {/* <div className="col-lg-6 col-md-6">
+                        <div className="single-footer-widget">
+                            <h3>Address</h3>
+                            
+                            <ul className="footer-contact-info">
+                                <li> 
+                                    <Icon.MapPin />
+                                    {company.Address}
+                                </li>
+                                <li>
+                                    <Icon.Mail />
+                                    Email: <a href={`mailto:${company.Email}`}>{company.Email}</a>
+                                </li>
+                                <li> 
+                                    <Icon.PhoneCall />
+                                    Phone: <a href={`tel:${company.Phone}`}>{company.Phone}</a>
+                                </li>
+                            </ul>
+                            <ul className="social-links">
+                                {Socials}
+                            </ul>
+                        </div>
+                    </div> */}
+
+                    
+                    <div className="col-lg-12 col-md-12">
+                        <div className="copyright-area">
+                            {/* <p>Copyright &copy; {currentYear} All Right Reserved by <a href="https://thamrin.co.id/" target="_blank">PT THAMRIN BROTHERS</a></p> */}
+                            <p>Copyright &copy; {currentYear} All Right Reserved by PT Citra Lestari Mobilindo</p>
+                        </div>
+                    </div>
+                    
+                    
+                </div>
+            </div>
+
+            <img src="/images/map.png" className="map" alt="map" />
+
+            {/* Shape Images */}
+            <div className="shape1">
+                <img src="/images/shape1.png" alt="shape" />
+            </div>
+            <div className="shape8 rotateme">
+                <img src="/images/shape2.svg" alt="shape" />
+            </div>
+        </footer>
+    )
+     
+}
+
+export default Footer; 

components/Company/Header.js

@@ -0,0 +1,250 @@
+import React, { useState } from "react";
+import Link from '@/utils/ActiveLink';
+import * as Icon from 'react-feather';
+
+export default function NavbarYamaha({ company,icon,username, ...props }) {
+    const [menu, setMenu] = React.useState(true)
+    const toggleNavbar = () => {
+        setMenu(!menu)
+    }
+
+    React.useEffect(() => {
+        let elementId = document.getElementById("header");
+        document.addEventListener("scroll", () => {
+            if (window.scrollY > 170) {
+                elementId.classList.add("is-sticky");
+            } else {
+                elementId.classList.remove("is-sticky");
+            }
+        });
+        window.scrollTo(0, 0);
+    })
+
+    const classOne = menu ? 'collapse navbar-collapse' : 'collapse navbar-collapse show';
+    const classTwo = menu ? 'navbar-toggler navbar-toggler-right collapsed' : 'navbar-toggler navbar-toggler-right';
+    return (
+        <header id="header" className="headroom navbar-style-two">
+            <div className="startp-nav">
+                <div className="container">
+                    <nav className="navbar navbar-expand-md navbar-light">
+                        <Link href={`/`}>
+                            <a onClick={toggleNavbar} className="navbar-brand">
+                                <img src={`/api/util?img=${encodeURIComponent(icon)}`} style={{"maxWidth": "180px","maxHeight": "80px"}} alt="logo" />
+                            </a>
+                        </Link>
+
+                        <button
+                            onClick={toggleNavbar}
+                            className={classTwo}
+                            type="button"
+                            data-toggle="collapse"
+                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+                            aria-expanded="false"
+                            aria-label="Toggle navigation"
+                        >
+                            <span className="icon-bar top-bar"></span>
+                            <span className="icon-bar middle-bar"></span>
+                            <span className="icon-bar bottom-bar"></span>
+                        </button>
+
+                        <div className={classOne} id="navbarSupportedContent">
+                            <ul className="navbar-nav ms-auto">
+                                <li className="nav-item">
+                                    <Link href={`/`} activeClassName="active">
+                                        <a onClick={toggleNavbar} className="nav-link">
+                                            Home
+                                        </a>
+                                    </Link>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href='/#'>
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            Product <Icon.ChevronDown />
+                                        </a>
+                                    </Link>
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href={`/product/motor`} activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Unit Product</a>
+                                            </Link>
+                                        </li>
+
+                                        {/* <li className="nav-item">
+                                            <Link href={`/product/sparepart`} activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Sparepart Product</a>
+                                            </Link>
+                                        </li> */}
+                                        {(company==="yamaha")?(
+                                            <li className="nav-item">
+                                                <Link href="https://booking.thamrin.co.id/" activeClassName="active">
+                                                    <a target="_blank" onClick={toggleNavbar} className="nav-link">Service Product</a>
+                                                </Link>
+                                            </li>
+                                        ):""}
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href={`/news`}>
+                                        <a onClick={toggleNavbar} className="nav-link">
+                                            Latest News
+                                        </a>
+                                    </Link>
+                                </li>
+
+                                {/* <li className="nav-item">
+                                    <Link href="/yamaha/Carrer" activeClassName="active">
+                                        <a onClick={toggleNavbar} className="nav-link">
+                                            Carrer
+                                        </a>
+                                    </Link>
+                                </li> */}
+
+                                <li className="nav-item">
+                                    <Link href={`/about`}>
+                                        <a onClick={toggleNavbar} className="nav-link">
+                                            About Us
+                                        </a>
+                                    </Link>
+
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href={`/contact`} activeClassName="active">
+                                        <a onClick={toggleNavbar} className="nav-link">Contact</a>
+                                    </Link>
+                                </li>
+                            </ul>
+                        </div>
+
+                        <div style={{display : 'none'}} className="others-option">
+                            <Link href="/login">
+                                {!username || username == "" ? (
+                                    <Link href="/company/yamaha/login">
+                                        <a className="btn btn-primary">Login</a>
+                                    </Link>
+                                ) : (
+                                    <ul className="navbar-nav ms-auto">
+                                        <li className="nav-item">
+                                            <Link href='/#'>
+                                                <a onClick={e => e.preventDefault()} className="nav-link" >
+                                                    {username} <Icon.ChevronDown />
+                                                </a>
+                                            </Link>
+
+                                            <ul className="dropdown-menu">
+                                                <li className="nav-item">
+                                                    <Link href="/company/yamaha/Profile" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Profile</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/company/yamaha/Shop/Cart">
+                                                        <a className="cart-wrapper-btn">
+                                                            <Icon.ShoppingCart />
+                                                        </a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/company/yamaha/Shop/Checkout" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Checkout</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/product/sparepart" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Pesanan Saya</a>
+                                                    </Link>
+                                                </li>
+                                                {(company=="yamaha")
+                                                ?(
+                                                    <li className="nav-item">
+                                                    <div
+                                                        onClick={async (e) => {
+                                                            e.preventDefault();
+                                                            fetch("/api/auth/logout", {
+                                                                method: "POST",
+                                                                headers: {
+                                                                    "Content-Type": "application/json",
+                                                                },
+                                                                body: JSON.stringify({ p: "YAMAHA" }),
+                                                            }).then((res) => {
+                                                                //if (res.ok) {
+                                                                window.location.href = "../yamaha";
+                                                                // }
+                                                                //                     else{
+                                            
+                                                                //                     }
+                                                            });
+                                                        }}
+                                                    >
+                                                        <Link href="https://booking.thamrin.co.id/" activeClassName="active">
+                                                            <a target="_blank" onClick={toggleNavbar} className="nav-link">Logout</a>
+                                                        </Link>
+                                                    </div>
+                                                </li>
+                                                ):""}
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                    //     <CustomDropdown
+                                    //     noLiPadding
+                                    //     navDropdown
+                                    //     buttonText={
+                                    //         username.length > 12 ? username.substring(0, 9) + ".." : username
+                                    //     }
+                                    //     buttonProps={{
+                                    //         className: classes.navLink,
+                                    //         color: "transparent",
+                                    //     }}
+                                    //     buttonIcon={Person}
+                                    //     dropdownList={[
+                                    //         <div
+                                    //             onClick={async (e) => {
+                                    //                 e.preventDefault();
+                                    //                 fetch("/api/auth/logout", {
+                                    //                     method: "POST",
+                                    //                     headers: {
+                                    //                         "Content-Type": "application/json",
+                                    //                     },
+                                    //                     body: JSON.stringify({ p: "YAMAHA" }),
+                                    //                 }).then((res) => {
+                                    //                     //if (res.ok) {
+                                    //                     window.location.href = "../yamaha/home";
+                                    //                     /*}
+                                    //                                         else{
+
+                                    //                                         }*/
+                                    //                 });
+                                    //             }}
+                                    //         >
+                                    //             <Link href="/yamaha/login">
+                                    //                 <a className="btn btn-primary">Logout</a>
+                                    //             </Link>
+                                    //         </div>,
+                                    //         <div>
+                                    //             <Link href="/yamaha/login">
+                                    //                 <a className="btn btn-primary">Profile</a>
+                                    //             </Link>
+                                    //         </div>,
+                                    //         <div>
+                                    //             <Link href="/yamaha/login">
+                                    //                 <a className="btn btn-primary">Pesanan Saya</a>
+                                    //             </Link>
+                                    //         </div>
+                                    //         // <a href="/yamaha/profile/profile" className={classes.dropdownLink}>Profile</a>,
+                                    //     ]}
+                                    // />
+                                )}
+                            </Link>
+                        </div>
+                    </nav>
+                </div>
+            </div>
+        </header>
+    );
+}

components/Company/Home/Dealer.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import Link from 'next/link';
+import * as Icon from 'react-feather';
+
+const Dealers = function ({ title,backend, dealers, ...props }) {
+    const ListDealer = (dealers)?dealers.map((data,idx) => {
+        try{
+            if(data.attributes.Gmap && data.attributes.Gmap[0]=='<'){
+                var span = document.createElement('span');
+                span.innerHTML = data.attributes.Gmap;
+                data.attributes.Gmap = span.textContent || span.innerText;
+            }
+        }
+        catch(e){
+            
+        }
+        return (
+            <div key={idx} className="col-lg-4 col-sm-6 col-md-6">
+                <div className="agency-services-box">
+                    <img style={{ height: "250px", width: "100%", display: "block" }} src={(data.attributes.Image.data)?`/api/util?img=${encodeURIComponent(data.attributes.Image.data.attributes.url)}`:"/images/blog-image/blog-details.jpg"} alt="image" />
+
+                    <div className="content">
+                        <p>
+                            <p><b>{data.attributes.Name} - {data.attributes.Kota}</b></p>
+                            <p><b>{data.attributes.Telp}</b></p>
+                            <p><b>{data.attributes.Address}</b></p>
+                        </p>
+
+                        <Link href={`${data.attributes.Gmap}`} target="_blank">
+                            <a className="read-more-btn" target="_blank">
+                                View Location <Icon.MapPin />
+                            </a>
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        );
+    }):"";
+    return (
+        <div>
+            <div className="agency-services-area pt-50 pb-50">
+                <div className="container">
+                    <div className="section-title st-fs-28">
+                        <h2>{title}</h2>
+                    </div>
+
+                    <div className="row justify-content">
+                        {ListDealer||<div className="bar"></div>}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Dealers;

components/Company/Home/FeatureProduct.js

@@ -0,0 +1,192 @@
+// import React, { Component } from 'react';
+// import Masonry from 'react-masonry-component';
+// import Link from 'next/link';
+
+// const masonryOptions = {
+//     transitionDuration: 0
+// };
+ 
+// export class Projects extends Component {
+//     render() {
+//         const images = this.props.images.map((image, idx) => {
+//             return (
+//                 <div className="col-lg-4 col-sm-6 item" key={idx}>
+//                     <div className="single-latest-projects">
+//                         <img src={image.image} alt="portfolio-image" />
+
+//                         <div className="content">
+//                             <span>{image.category}</span>
+//                             <h3>{image.title}</h3>
+//                         </div>
+
+//                         <Link href="/project-details">
+//                             <a className="link-btn"></a>
+//                         </Link>
+//                     </div>
+//                 </div>
+//             )
+//         })
+//         return (
+//             <div className="our-latest-projects ptb-80">
+//                 <div className="container">
+//                     <div className="section-title text-left">
+//                         <h2>Our Latest <span>Projects</span></h2>
+//                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+//                     </div>
+                 
+//                     <Masonry
+//                         className={'row'} // default ''
+//                         elementType={'div'} // default 'div'
+//                         options={masonryOptions} // default {}
+//                         disableImagesLoaded={false} // default false
+//                         updateOnEachImageLoad={false} // default false and works only if disableImagesLoaded is false
+//                     >
+//                         {images}
+//                     </Masonry>
+//                 </div>
+//             </div>
+//         );
+//     }
+// }
+
+// Projects.defaultProps = {
+//     images: [
+//         { 
+//             image: "/images/Home/gallery/1.jpg",
+//             category: "Marketing",
+//             title: "Marketing & Reporting"
+//         },
+//         { 
+//             image: "/images/Home/gallery/2.jpg",
+//             category: "Marketing",
+//             title: "Marketing & Reporting"
+//         },
+//         { 
+//             image: "/images/Home/gallery/3.jpg",
+//             category: "Marketing",
+//             title: "Marketing & Reporting"
+//         },
+//         { 
+//             image: "/images/Home/gallery/4.jpg",
+//             category: "Marketing",
+//             title: "Marketing & Reporting"
+//         },
+//         { 
+//             image: "/images/Home/gallery/5.jpg",
+//             category: "Marketing",
+//             title: "Marketing & Reporting"
+//         },
+//         { 
+//             image: "/images/Home/gallery/6.jpg",
+//             category: "Marketing",
+//             title: "Marketing & Reporting"
+//         },
+//         { 
+//             image: "/images/Home/gallery/7.jpg",
+//             category: "Marketing",
+//             title: "Marketing & Reporting"
+//         },
+//         { 
+//             image: "/images/Home/gallery/8.jpg",
+//             category: "Marketing",
+//             title: "Marketing & Reporting"
+//         },
+//         { 
+//             image: "/images/Home/gallery/9.jpg",
+//             category: "Marketing",
+//             title: "Marketing & Reporting"
+//         },
+//     ]
+// }
+
+// export default Projects;
+
+import React from 'react';
+import Link from 'next/link';
+import dynamic from 'next/dynamic';
+const OwlCarousel = dynamic(import('react-owl-carousel3'));
+
+const options = {
+    loop: true,
+    nav: false,
+    dots: true,
+    autoplay: true,
+    smartSpeed: 1000,
+    margin: 30,
+    autoplayTimeout: 5000,
+    responsive: {
+        0:{
+            items: 1,
+        },
+        576:{
+            items: 2,
+        },
+        768:{
+            items: 2,
+        },
+        1024:{
+            items: 3,
+        },
+        1200:{
+            items: 4,
+        }
+    },
+}
+
+const Projects = ({company,featuredProduct}) => {
+    const [display, setDisplay] = React.useState(false);
+
+    React.useEffect(() => {
+        setDisplay(true);
+    }, [])
+    
+    const ListImage = featuredProduct.map((data)=>{
+        return(
+            <div className="single-ml-projects-box">
+                <img src={`/api/util?img=${encodeURIComponent(data)}`} alt="image" />
+            </div>
+        );
+    });
+
+    return (featuredProduct)?(
+        <div className="pt-0 ptb-80">
+            <div className="container">
+                <div className="section-title st-fs-28">
+                    <h2>{(company)?company[0]+company.substring(1):'Yamaha'} Featured Motor Product</h2>
+                    <div className="bar"></div>
+                </div>
+            </div>
+
+            <div className="container-fluid">
+                {display ? <OwlCarousel 
+                    className="ml-projects-slides owl-carousel owl-theme"
+                    {...options}
+                >  
+                    {ListImage}
+                </OwlCarousel> : ''}
+            </div>
+
+            {/* Shape Images */}
+            <div className="shape1">
+                <img src="/images/shape1.png" alt="shape" />
+            </div>
+            <div className="shape2 rotateme">
+                <img src="/images/shape2.svg" alt="shape" />
+            </div>
+            <div className="shape3">
+                <img src="/images/shape3.svg" alt="shape" />
+            </div>
+            <div className="shape4">
+                <img src="/images/shape4.svg" alt="shape" />
+            </div>
+            <div className="shape7">
+                <img src="/images/shape4.svg" alt="shape" />
+            </div>
+            <div className="shape8 rotateme">
+                <img src="/images/shape2.svg" alt="shape" />
+            </div>
+        </div>
+    ):"";
+}
+
+export default Projects;

components/Company/Home/MainBanner.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import Link from 'next/link';
+
+const MainBanner = () => {
+    return (
+        <div className="main-banner" style={{marginTop:"-50px"}}>
+            <div className="d-table">
+                <div className="d-table-cell">
+                    <div className="container">
+                        <div className="row h-100 justify-content-center align-items-center">
+                            <div className="col-lg-5">
+                                <div className="hero-content">
+                                    <h1><b>Exclusif Motor Untuk Anda</b></h1>
+                                    <p>PT.Thamrin Brother's Yamaha merupakan sebuah bisnis company dari Thamrin Group yang bergerak dalam bidang penjualan produk Motor dan Sparepart Yamaha</p>
+
+                                    <Link href="/yamaha/Product/Motor">
+                                        <a className="btn btn-primary">Get Started</a>
+                                    </Link>
+                                </div>
+                            </div>
+
+                            <div className="col-lg-6 offset-lg-1">
+                                <img
+                                    src='/images/Yamaha/banner.png'
+                                    className="animate__animated animate__fadeInDown animate__delay-0.1s"
+                                    alt="man"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default MainBanner

components/Company/Home/OurServices.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import Link from 'next/link';
+import * as Icon from 'react-feather';
+
+const OurServices = () => {
+    return (
+        <div className="iot-services-area pt-80 pb-50">
+            <div className="container justify-content-center">
+                <div className="section-title">
+                    <h2>Yamaha 3S Service</h2>
+                    <div className="bar"></div>
+                    <p>Yamaha 3S Service merupakan pelayanan dari Yamaha untuk meningkatkan kupuasan pelanggan Yamaha</p>
+                </div>
+                
+                <div className="row">
+                    <div className="col-lg-4 col-md-6">
+                        <div className="single-repair-servicesss bg1">
+                            <div className="icon">
+                                <i className="flaticon-gear"></i>
+                            </div>
+
+                            <h3>Selling <br /> Yamaha Product Selling</h3>                            
+                            <Link href="product/motor">
+                                <a><Icon.ArrowRight /></a>
+                            </Link>
+                        </div>
+                    </div>
+
+                    <div className="col-lg-4 col-md-6">
+                        <div className="single-repair-servicesss bg10">
+                            <div className="icon">
+                                <i className="flaticon-gear"></i>
+                            </div>
+
+                            <h3>Services <br /> Yamaha Services Product</h3>
+                            {/* <p>Lorem ipsum eiusmod dolor sit amet elit, adipiscing, sed do eiusmod tempor incididunt ut labore dolore magna aliqua.</p> */}
+                            
+                            <Link href="https://booking.thamrin.co.id/">
+                                <a><Icon.ArrowRight /></a>
+                            </Link>
+                        </div>
+                    </div>
+
+                    <div className="col-lg-4 col-md-6">
+                        <div className="single-repair-servicesss bg11">
+                            <div className="icon">
+                                <i className="flaticon-gear"></i>
+                            </div>
+
+                            <h3>Sparepart <br />Yamaha Sparepart Product</h3>
+                            {/* <p>Lorem ipsum eiusmod dolor sit amet elit, adipiscing, sed do eiusmod tempor incididunt ut labore dolore magna aliqua.</p> */}
+                            
+                            <Link href="product/sparepart">
+                                <a><Icon.ArrowRight /></a>
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default OurServices;

components/Company/Home/Summary.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import Link from 'next/link';
+
+const FunFactsArea = () => {
+    return (
+        <div className="funfacts-area ptb-80">
+            <div className="container">
+                <div className="section-title">
+                    <h2>Total Penjualan, Service & Dealer Yamaha</h2>
+                    <div className="bar"></div>
+                </div>
+
+                <div className="row" style={{align:"center"}}>
+                    <div className="col-lg-3 col-md-3 col-6">
+                        <div className="funfact">
+                            <h3>200</h3>
+                            <p>Product Motor Terjual</p>
+                        </div>
+                    </div>
+
+                    <div className="col-lg-3 col-md-3 col-6">
+                        <div className="funfact">
+                            <h3>478</h3>
+                            <p>Service Motor</p>
+                        </div>
+                    </div>
+
+                    <div className="col-lg-3 col-md-3 col-6">
+                        <div className="funfact">
+                            <h3>800+</h3>
+                            <p>Sparepart Terjual</p>
+                        </div>
+                    </div>
+
+                    <div className="col-lg-3 col-md-3 col-6">
+                        <div className="funfact">
+                            <h3>30</h3>
+                            <p>Dealers yang tersebar di Sumsel & Bengkulu</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="contact-cta-box">
+                    <h3>Punya Pertanyaan ?</h3>
+                    <p>Segera Hubungi Kami</p>
+
+                    <Link href="/contact">
+                        <a className="btn btn-primary">Hubungi Kami</a>
+                    </Link>
+                </div>
+
+                <div className="map-bg">
+                    <img src="/images/map.png" alt="map" />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default FunFactsArea;

components/Company/Home/Testimoni.js

@@ -0,0 +1,227 @@
+import React from 'react';
+import Slider from "react-slick";
+import * as Icon from 'react-feather';
+
+const NextArrow = (props) => {
+    const { onClick } = props;
+    return (
+        <button
+            className="next-arrow slick-arrow"
+            onClick={onClick}
+        >
+            <Icon.ArrowRight />
+        </button>
+    );
+}
+  
+const PrevArrow = (props) => {
+    const { onClick } = props;
+    return (
+        <button 
+            className="prev-arrow slick-arrow"
+            onClick={onClick}
+        >
+            <Icon.ArrowLeft />
+        </button>
+    );
+}
+
+class Feedback extends React.Component {
+    state = {
+        imagesSlider: null,
+        thumbnailsSlider: null,
+        oldSlide: 0,
+        activeSlide: 0,
+        activeSlide2: 0
+    };
+    
+    componentDidMount() {
+        this.setState({
+            imagesSlider: this.slider1,
+            thumbnailsSlider: this.slider2
+        });
+    }
+
+    renderSliderFullContent = () => {
+        return DEFAULT_PROPS.map(({name,profession,image,content}) => {
+            return (
+                <div key={name}>
+                    <div className="item">
+                        <div className="single-feedback">
+                            <div className="client-img">
+                                <img src={image} alt="image" />
+                            </div>
+
+                            <h3>{name}</h3>
+                            <span>{profession}</span>
+                            <p>{content}</p>
+                        </div>
+                    </div>
+                </div>
+            )
+        })
+    }
+
+    renderSliderImages = () => {
+        return DEFAULT_PROPS.map(({name, image}) => {
+            return (
+                <div key={name}>
+                    <div className="item">
+                        <div className="img-fill">
+                            <img src={image} alt="client" />
+                        </div>
+                    </div>
+                </div>
+            )
+        })
+    }
+
+    render() {
+        const sliderSettings1 = {
+            speed: 100,
+            slidesToShow: 1,
+            slidesToScroll: 1,
+            cssEase: 'linear',
+            fade: true,
+            autoplay: true,
+            draggable: true,
+            asNavFor: this.state.thumbnailsSlider,
+            draggable: false,
+            arrows: false,
+            nextArrow: false,
+            prevArrow: false
+        }
+        
+        const sliderSettings2 = {
+            speed: 300,
+            slidesToShow: 5,
+            slidesToScroll: 1,
+            cssEase: 'linear',
+            autoplay: true,
+            centerMode: true,
+            draggable: false,
+            focusOnSelect: true,
+            asNavFor: this.state.imagesSlider,
+            nextArrow: <NextArrow />,
+            prevArrow: <PrevArrow />,
+            beforeChange: (current, next) => this.setState({ oldSlide: current, activeSlide: next }),
+            afterChange: current => this.setState({ activeSlide2: current })
+        }
+
+        return (
+            <section className="feedback-area ptb-80 bg-f7fafd">
+                <div className="container">
+                    <div className="section-title">
+                        <h2>Testimoni Customer Yamaha</h2>
+                        <div className="bar"></div>
+                    </div>
+
+                    <div className="feedback-slides">
+                        <div className="client-feedback">
+                            <div>
+                                <Slider
+                                    ref={slider => (this.slider1 = slider)}
+                                    {...sliderSettings1}
+                                >
+                                    {
+                                        this.renderSliderFullContent()
+                                    }
+                                </Slider>
+                            </div>
+                        </div>
+
+                        <div className="client-thumbnails">
+                            <div>
+                                <Slider
+                                    ref={slider => (this.slider2 = slider)}
+                                    {...sliderSettings2}
+                                >
+                                    {
+                                        this.renderSliderImages()
+                                    }
+                                </Slider>
+                            </div>
+                        </div>
+
+                    </div>
+
+                </div>
+
+                <div className="shape1">
+                    <img src="/images/shape1.png" alt="shape" />
+                </div>
+                <div className="shape2 rotateme">
+                    <img src="/images/shape2.svg" alt="shape" />
+                </div>
+                <div className="shape4">
+                    <img src="/images/shape4.svg" alt="shape" />
+                </div>
+                <div className="shape5">
+                    <img src="/images/shape5.png" alt="shape" />
+                </div>
+                <div className="shape6 rotateme">
+                    <img src="/images/shape4.svg" alt="shape" />
+                </div>
+                <div className="shape7">
+                    <img src="/images/shape4.svg" alt="shape" />
+                </div>
+                <div className="shape8 rotateme">
+                    <img src="/images/shape2.svg" alt="shape" />
+                </div>
+            </section>
+        );
+    }
+}
+
+const DEFAULT_PROPS = [
+    {
+        name: 'David Gale', 
+        profession: 'Web Developer',
+        image: '/images/client-image/client2.jpg', 
+        content: 'Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+    },
+    {
+        name: 'Matt Damon', 
+        profession: 'Software Engineer',
+        image: '/images/client-image/client4.jpg', 
+        content: 'Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+    },
+    {
+        name: 'Nicky Parsons', 
+        profession: 'Fictional Character',
+        image: '/images/client-image/client1.jpg', 
+        content: 'Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+    },
+    {
+        name: 'Jason Momoa', 
+        profession: 'American Actor',
+        image: '/images/client-image/client5.jpg', 
+        content: 'Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+    },
+    {
+        name: 'Gennady Korotkevich', 
+        profession: 'Sport Programmer',
+        image: '/images/client-image/client3.jpg', 
+        content: 'Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+    },
+    {
+        name: 'Petr Mitrichev', 
+        profession: 'Russian Programmer',
+        image: '/images/client-image/client3.jpg', 
+        content: 'Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+    },
+    {
+        name: 'Reid W. Barton', 
+        profession: 'Mathematics',
+        image: '/images/client-image/client2.jpg', 
+        content: 'Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+    },
+    {
+        name: 'Lisa Sauermann', 
+        profession: 'Mathematician',
+        image: '/images/client-image/client1.jpg', 
+        content: 'Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
+    }
+];
+
+export default Feedback;

components/Company/LatestNews/LatestNews.js

@@ -0,0 +1,146 @@
+import React from 'react';
+import * as Icon from 'react-feather';
+import Link from 'next/link';
+
+const News = function ({ backend, news, othernews, ...props }) {
+
+    const NewsList = news.map((data) => {
+        return (
+            <>
+                <div className="col-lg-6 col-md-6">
+                    <div className="single-blog-post">
+                        <div className="blog-image">
+                            <Link href="/blog-details">
+                                <a>
+                                    <img src={`${backend}${data.img[0]["url"]}`} />
+                                </a>
+                            </Link>
+
+                            <div className="date">
+                                <Icon.Calendar /> {data.published_at}
+                            </div>
+                        </div>
+
+                        <div className="blog-post-content">
+                            <h3>
+                                <Link href={"/yamaha/LatestNews/LatestNewsDetail?s="+data.id}>
+                                    <a>{data.title}</a>
+                                </Link>
+                            </h3>
+
+                            <span>By <a >Admin</a></span>
+
+                            <Link href={"/yamaha/LatestNews/LatestNewsDetail?s="+data.id}>
+                                <a className="read-more-btn">
+                                    Read More <Icon.ArrowRight />
+                                </a>
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+            </>
+        )
+    })
+
+    const PopularNews = othernews.map((data) => {
+        return (
+            <article className="item">
+                <Link href="/blog-details">
+                    <a className="thumb">
+                        <span className="fullimage cover bg1" role="img"></span>
+                    </a>
+                </Link>
+
+                <div className="info">
+                    <img src={`${backend}${data.img[0]["url"]}`} style={{width:"100px"}} />
+                    <time>{data.published_at}</time>
+                    <h4 className="title usmall">
+                        <Link href="/blog-details">
+                            <a style={{ fontSize:"15px" }}>{data.title}</a>
+                        </Link>
+                    </h4>
+                </div>
+
+                <div className="clear"></div>
+            </article>
+        )
+    })
+    return (
+        <div>
+            <div className="blog-area ptb-80">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-lg-8 col-md-12">
+                            <div className="row justify-content-center">
+
+                                {NewsList}
+
+                                {/* Pagination */}
+                                <div className="col-lg-12 col-md-12">
+                                    <div className="pagination-area">
+                                        <nav aria-label="Page navigation">
+                                            <ul className="pagination justify-content-center">
+                                                <li className="page-item"><a className="page-link" >Prev</a></li>
+
+                                                <li className="page-item active"><a className="page-link" >1</a></li>
+
+                                                <li className="page-item"><a className="page-link" >2</a></li>
+
+                                                <li className="page-item"><a className="page-link" >3</a></li>
+
+                                                <li className="page-item"><a className="page-link" >Next</a></li>
+                                            </ul>
+                                        </nav>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="col-lg-4 col-md-12">
+                            <div className="widget-area" id="secondary">
+                                <div className="widget widget_search">
+                                    <form className="search-form">
+                                        <label>
+                                            <input type="search" className="search-field" placeholder="Search..." />
+                                        </label>
+                                        <button type="submit">
+                                            <Icon.Search />
+                                        </button>
+                                    </form>
+                                </div>
+
+                                {PopularNews}
+
+                                <div className="widget widget_categories">
+                                    <h3 className="widget-title">Categories</h3>
+
+                                    <ul>
+                                        <li><a >Business</a></li>
+                                        <li><a >Privacy</a></li>
+                                        <li><a >Technology</a></li>
+                                        <li><a >Tips</a></li>
+                                        <li><a >Uncategorized</a></li>
+                                    </ul>
+                                </div>
+
+                                <div className="widget widget_tag_cloud">
+                                    <h3 className="widget-title">Tags</h3>
+
+                                    <div className="tagcloud">
+                                        <a >Motor <span className="tag-link-count">(3)</span></a>
+                                        <a >Services <span className="tag-link-count">(3)</span></a>
+                                        <a >Sparepart <span className="tag-link-count">(2)</span></a>
+                                        <a >Promo <span className="tag-link-count">(2)</span></a>
+                                        <a >Event <span className="tag-link-count">(1)</span></a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default News;

components/Company/LatestNews/LatestNewsDetail.js

@@ -0,0 +1,137 @@
+import React from 'react';
+import PageBanner from '@/components/Common/PageBanner';
+import * as Icon from 'react-feather';
+import Link from 'next/link';
+
+import ReactHtmlParser from "react-html-parser";
+
+const News = function ({ backend, news, othernews, ...props }) {
+
+    const NewsList = news.map((data) => {
+        return (
+            <>
+                <div className="blog-details-desc">
+                    <div className="article-image">
+                        <img src={`${backend}${data.img[0]["url"]}`} width="800px" alt="image" />
+                    </div>
+
+                    <div className="article-content">
+                        <div className="entry-meta">
+                            <ul>
+                                <li>
+                                    <Icon.Clock /> September 31, 2021
+                                </li>
+                                <li>
+                                    <Icon.User /> <a >Steven Smith</a>
+                                </li>
+                            </ul>
+                        </div>
+
+                        <h2>{data.title}</h2>
+
+                        <p>{ReactHtmlParser(data.description)}</p>
+
+                        {/* <blockquote>
+                            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
+
+                            <cite>Tom Cruise</cite>
+                        </blockquote> */}
+
+                        <div className="article-footer">
+                            <div className="article-tags">
+                                <a >Motor</a>
+                                <a >Services</a>
+                                <a >Sparepart</a>
+                                <a >Event</a>
+                                <a >Promo</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </>
+        )
+    })
+
+    const PopularNews = othernews.map((data) => {
+        return (
+            <article className="item">
+                <Link href="/blog-details">
+                    <a className="thumb">
+                        <span className="fullimage cover bg1" role="img"></span>
+                    </a>
+                </Link>
+
+                <div className="info">
+                    <img src={`${backend}${data.img[0]["url"]}`} style={{ width: "100px" }} />
+                    <time>{data.published_at}</time>
+                    <h4 className="title usmall">
+                        <Link href="/blog-details">
+                            <a style={{ fontSize: "15px" }}>{data.title}</a>
+                        </Link>
+                    </h4>
+                </div>
+
+                <div className="clear"></div>
+            </article>
+        )
+    })
+    return (
+        <div>
+            <PageBanner pageTitle="Latest News" />
+
+            <div className="blog-details-area ptb-80">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-lg-8 col-md-12">
+
+                            {NewsList}
+                        </div>
+
+                        <div className="col-lg-4 col-md-12">
+                            <div className="widget-area" id="secondary">
+                                <div className="widget widget_search">
+                                    <form className="search-form">
+                                        <label>
+                                            <input type="search" className="search-field" placeholder="Search..." />
+                                        </label>
+                                        <button type="submit">
+                                            <Icon.Search />
+                                        </button>
+                                    </form>
+                                </div>
+
+                                {PopularNews}
+
+                                <div className="widget widget_categories">
+                                    <h3 className="widget-title">Categories</h3>
+
+                                    <ul>
+                                        <li><a >Business</a></li>
+                                        <li><a >Privacy</a></li>
+                                        <li><a >Technology</a></li>
+                                        <li><a >Tips</a></li>
+                                        <li><a >Uncategorized</a></li>
+                                    </ul>
+                                </div>
+
+                                <div className="widget widget_tag_cloud">
+                                    <h3 className="widget-title">Tags</h3>
+
+                                    <div className="tagcloud">
+                                        <a >Motor <span className="tag-link-count">(3)</span></a>
+                                        <a >Services <span className="tag-link-count">(3)</span></a>
+                                        <a >Sparepart <span className="tag-link-count">(2)</span></a>
+                                        <a >Promo <span className="tag-link-count">(2)</span></a>
+                                        <a >Event <span className="tag-link-count">(1)</span></a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default News;

components/Company/Login.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import Link from 'next/link';
+import * as Icon from 'react-feather';
+
+const Login = function ({ backend, dealers, ...props }) {
+    return (
+        <div className="ptb-80" style={{ marginTop: "-50px" }}>
+            <div className="container">
+                <div className="auth-form">
+                    <div className="auth-head">
+                        <img src="/images/Home/businees/ThamrinBrothers.png" width="300px" alt="logo" />
+                        <br /><br />
+                        <p>Tidak Punya Akun ? Silahkan <Link href="/yamaha/Register">Register</Link></p>
+                    </div>
+
+                    <form onSubmit={submitHandler}>
+                        <div className="mb-3">
+                            <label className="form-label">Email</label>
+                            <input type="email" className="form-control" id="email"
+                                inputProps={{
+                                    type: "email",
+                                    name: "email",
+                                    onChange: (event) => setEmail(event.target.value),
+                                }}
+                            />
+                        </div>
+
+                        <div className="mb-3">
+                            <label className="form-label">Password</label>
+                            <input type="password" className="form-control" id="pass"
+                                inputProps={{
+                                    name: "pass",
+                                    onChange: (event) => setPass(event.target.value),
+                                    type: "password",
+                                    autoComplete: "off",
+                                }}
+                            />
+                        </div>
+
+                        <div className="mb-3">
+                            <p><Link href="/yamaha/ForgotPassword"><a>Lupa Password</a></Link></p>
+                        </div>
+
+                        <button type="submit" href="/yamaha" className="btn btn-primary">Login</button>
+                    </form>
+
+                    <div className="foot">
+                        <p>or connect with</p>
+                        <ul>
+                            <li>
+                                <a  target="_blank">
+                                    <Icon.Mail />
+                                </a>
+                            </li>
+                            <li>
+                                <a  target="_blank">
+                                    <Icon.Facebook />
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Login;

components/Company/Product/Accessories_Detail.js

@@ -0,0 +1,345 @@
+import React from 'react'
+
+//component
+import PageBanner from '@/components/Common/PageBanner';
+import * as Icon from 'react-feather'
+import { useSelector, useDispatch } from 'react-redux'
+import { useRouter } from 'next/router'
+import { useToasts } from 'react-toast-notifications'
+
+//addon library
+import { resetIdCounter, Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+resetIdCounter();
+
+import dynamic from 'next/dynamic'
+const OwlCarousel = dynamic(import('react-owl-carousel3'))
+
+//library yarn
+import NumberFormat from 'react-number-format';
+import ReactHtmlParser from "react-html-parser";
+
+//sweet alert
+import swal from 'sweetalert';
+
+const options = {
+    loop: true,
+    nav: true,
+    dots: false,
+    autoplay: true,
+    items: 1,
+    smartSpeed: 1000,
+    autoplayTimeout: 5000,
+    navText: [
+        "<i className='bx bx-chevron-left'></i>",
+        "<i className='bx bx-chevron-right'></i>"
+    ],
+};
+
+const ProductDetails = function ({ detailaccessories, backend, user, ...props }) {
+
+    const [formValue, setFormValue] = React.useState({
+        product_img: "",
+        product_name: "",
+        product_color: "",
+        product_price: "",
+    });
+
+    const router = useRouter();
+
+    const MotorDetail = detailaccessories.map((data) => {
+
+        return (
+            <div>
+                <PageBanner pageTitle={data.name} />
+                <div className="shop-details-area ptb-80">
+                    <div className="container">
+                        <div className="row align-items-center">
+                            <div className="col-lg-5">
+                                <OwlCarousel
+                                    className="products-details-image products-details-image-slides owl-carousel owl-theme"
+                                    {...options}
+                                >
+                                    <img src={`${backend}${data.img["url"]}`} />
+                                </OwlCarousel>
+                            </div>
+
+                            <div className="col-lg-7">
+                                <div className="products-details">
+                                    <h3>{data.name}</h3>
+                                    <h3>
+                                        <NumberFormat value={data.price - data.price * data.discount} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
+                                    </h3>
+                                    <h5>
+                                        <div className="price" style={{marginTop:"20px"}}>
+                                            <NumberFormat
+                                                style={{ color: "#EB1928" }}
+                                                displayType={'text'}
+                                                prefix={'%'}
+                                                decimalScale={2}
+                                                value={data.discount * 100}
+                                            />
+                                            <NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
+                                        </div>
+                                    </h5>
+
+                                    <ul className="rating">
+                                        <li><i className="flaticon-star-1"></i></li>
+                                        <li><i className="flaticon-star-1"></i></li>
+                                        <li><i className="flaticon-star-1"></i></li>
+                                        <li><i className="flaticon-star-1"></i></li>
+                                        <li><i className="flaticon-star-1"></i></li>
+                                    </ul>
+
+                                    <div className="availability">
+                                        Availability: <span>{data.stock}</span>
+                                    </div>
+                                    <form
+                                        onSubmit={async (e) => {
+                                            e.preventDefault();
+                                            var newformValue = {
+                                                ...formValue,
+                                                product_name: detailproduct[0].name,
+                                            }
+                                            setFormValue(newformValue)
+                                            // console.log(JSON.stringify(newformValue));
+                                            const response = await fetch(
+                                                "/api/transaction/AddToCart",
+                                                {
+                                                    method: "POST",
+                                                    headers: {
+                                                        'Content-Type': 'application/json'
+                                                    },
+                                                    body: JSON.stringify(newformValue),
+                                                }
+                                            );
+                                            if (response.ok) {
+                                                var res = await response.json();
+                                                // console.log("cek response :", res);
+                                                if (res["STATUS"] === 1) {
+                                                    res["DATA"]["cart"];
+                                                    swal("Produk Berhasil Ditambah ke Keranjang", "Silahkan Cek Keranjang Belanja Anda", "success");
+                                                    router.push("/yamaha/Shop/Cart");
+                                                }
+                                                else {
+                                                    swal("Produk Gagal Ditambah ke Keranjang", "Silahkan Coba Lagi", "error");
+                                                }
+                                            } else {
+                                                swal("Transaksi Gagal", "Silahkan Coba Lagi", "error");
+                                            }
+                                            return false;
+                                        }}
+
+                                    >
+                                        {/* <label>Product OTR <span className="required">*</span></label>
+
+                                        <div className="select-box" placeholder="Pilih Harga OTR">
+                                            <select className="form-select"
+                                                name="product_otr"
+                                                onInput={(e) => {
+                                                    setFormValue({
+                                                        ...formValue,
+                                                        product_price: e.target.value.toString(),
+                                                    })
+                                                }}
+                                            >
+                                                <option value="0">- Pilih Product OTR -</option>
+                                                {detailproduct.map((option) => (
+                                                    <option value={option.product_otrs[0].price}>{option.product_otrs[0].name}</option>
+                                                ))}
+                                                {detailproduct.map((option) => (
+                                                    <option value={option.product_otrs[1].price}>{option.product_otrs[1].name}</option>
+                                                ))}
+                                                {detailproduct.map((option) => (
+                                                    <option value={option.product_otrs[2].price}>{option.product_otrs[2].name}</option>
+                                                ))}
+                                            </select>
+                                        </div>
+                                        <br />
+
+                                        <label>Product Color <span className="required">*</span></label>
+                                        <div className="select-box" placeholder="Pilih Harga OTR">
+                                            <select className="form-select"
+                                                name="product_color"
+                                                onInput={(e) => {
+                                                    setFormValue({
+                                                        ...formValue,
+                                                        product_color: e.target.value.toString()
+                                                    })
+                                                }}
+                                            >
+                                                <option value="0">- Pilih Product Color -</option>
+                                                {detailproduct.map((option) => (
+                                                    <option value={option.product_image_colors[0].name}>{option.product_image_colors[0].name}</option>
+                                                ))}
+                                                {detailproduct.map((option) => (
+                                                    <option value={option.product_image_colors[1].name}>{option.product_image_colors[1].name}</option>
+                                                ))}
+                                                {detailproduct.map((option) => (
+                                                    <option value={option.product_image_colors[2].name}>{option.product_image_colors[2].name}</option>
+                                                ))}
+                                            </select>
+                                        </div>
+                                        <br /> */}
+
+                                        {/* <button type="submit">Add to Cart</button> */}
+
+                                        <a  className="add-to-wishlist-btn" title="Add to Wishlist">
+                                            <Icon.Heart />
+                                        </a>
+                                    </form>
+
+                                    <div className="custom-payment-options">
+                                        <span>Metode Pembayaran : </span>
+
+                                        <div className="payment-methods">
+                                            <img src="/images/payment-image/Mastercard.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/Visa.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/BNI.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/BCA.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/Mandiri.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/BSI.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/Indomaret.svg" width="50px" alt="image" />
+                                        </div>
+                                    </div>
+
+                                    <div className="products-share-social">
+                                        <span>Share:</span>
+
+                                        <ul>
+                                            <li>
+                                                <a  className="facebook" target="_blank">
+                                                    <Icon.Facebook />
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a  className="twitter" target="_blank">
+                                                    <Icon.Twitter />
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a  className="linkedin" target="_blank">
+                                                    <Icon.Linkedin />
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a  className="instagram" target="_blank">
+                                                    <Icon.Instagram />
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="col-lg-12 col-md-12">
+                                <div className="products-details-tabs">
+                                    <Tabs>
+                                        <TabList>
+                                            <Tab>Deskripsi</Tab>
+                                            <Tab>Info Penting</Tab>
+                                            {/* <Tab>Review</Tab> */}
+                                        </TabList>
+
+                                        <TabPanel>
+                                            <div className="products-description" align="left">
+                                                <p>{ReactHtmlParser(data.description)}</p>
+                                            </div>
+                                        </TabPanel>
+
+                                        <TabPanel>
+                                            <div className="products-description" align="left">
+                                                <p>
+                                                    <p><b>Informasi mengenai prosedur pengiriman, pembelian dan dokumen</b></p>
+                                                    <ul>
+                                                        <li>Kota Palembang, Kayu Agung, Prabumulih, Pangkalan Balai, Betung : 2-3 hari kerja*</li>
+                                                        <li>Untuk daerah Sungsang/daerah lain yang menggunakan kapal motor, maka motor diantar sampai di dermaga sesuai dengan jadwal yang diinformasikan</li>
+                                                        <li>Sekayu, Babat Toman, Pendopo, Baturaja, Martapura, Muara Dua, Lahat, Tanjung Enim, Tugu Mulyo, Belitang : 4-5 hari kerja*</li>
+                                                        <li>Lubuk Linggau, Curup, Pagar Alam : 6-7 hari kerja*</li>
+                                                    </ul>
+
+                                                    <p><b>Harga</b></p>
+                                                    <ul>
+                                                        <li>Harga OTR sudah termasuk biaya pengiriman dan BBN, kecuali tambahan pengenaan pajak progresif kepemilikan kendaraan bermotor (sesuai dengan peraturan yang telah ditetapkan oleh pemerintah)</li>
+                                                        <li>Harga OTR diatas berlaku untuk KTP domisili PALEMBANG, OGAN ILIR, dan BANYUASIN, diluar wilayah tersebut harap menghubungi kami untuk konfirmasi harga.</li>
+                                                        <li>Harga OTR sewaktu-waktu dapat berubah.</li>
+                                                        <li>Proses pemesanan sepeda motor tidak dapat dibatalkan dan warna yang sudah dipesan tidak dapat diubah.</li>
+                                                        <li>Proses pemesanan yang terkait waktu pengiriman produk dan kelengkapan dokumen yang dibutuhkan untuk pembuatan STNK dan BPKB akan  diinformasikan oleh pihak Dealer.</li>
+                                                        <li>Proses pengiriman sepeda motor akan dilakukan setelah pelunasan transaksi dan dokumen yang dibutuhkan telah lengkap.</li>
+                                                    </ul>
+
+                                                    <p><b>Dokumen</b></p>
+                                                    <ul>
+                                                        <li>Proses pembuatan STNK setelah KTP diterima oleh pihak dealer adalah 19-25 hari kerja*.</li>
+                                                        <li>Proses pembuatan BPKB adalah 3-4 bulan.</li>
+                                                        <li>STNK dan BPKB wajib diambil sendiri oleh pihak yang bersangkutan sesuai dengan identitas yang tertera STNK di dealer yang ditunjuk.</li>
+                                                        <li>Untuk proses pembuatan STNK dan BPKB sepenuhnya menjadi tanggung jawab dealer terkait.</li>
+                                                        <li>Buku servis diterima bersamaan dengan pengiriman sepeda motor.</li>
+                                                    </ul>
+
+                                                    <p><b>*tidak termasuk Sabtu dan Minggu.</b></p>
+                                                </p>
+                                            </div>
+                                        </TabPanel>
+
+                                        {/* <TabPanel>
+                                            <div className="products-reviews">
+                                                <h3>Customer Reviews</h3>
+                                                <p>There are no reviews yet.</p>
+
+                                                <form className="review-form">
+                                                    <p>Rate this item:</p>
+
+                                                    <div className="star-rating">
+                                                        <i className='bx bxs-star'></i>
+                                                        <i className='bx bxs-star'></i>
+                                                        <i className='bx bxs-star'></i>
+                                                        <i className='bx bxs-star'></i>
+                                                        <i className='bx bxs-star'></i>
+
+                                                        <p>Very good product!</p>
+                                                    </div>
+
+                                                    <div className="row">
+                                                        <div className="col-lg-12">
+                                                            <div className="form-group">
+                                                                <textarea name="review-message" id="message" cols="30" rows="4" placeholder="Write your review*" className="form-control"></textarea>
+                                                            </div>
+                                                        </div>
+
+                                                        <div className="col-lg-6 col-md-6">
+                                                            <div className="form-group">
+                                                                <input type="text" placeholder="Name*" className="form-control" />
+                                                            </div>
+                                                        </div>
+
+                                                        <div className="col-lg-6 col-md-6">
+                                                            <div className="form-group">
+                                                                <input type="email" placeholder="Email*" className="form-control" />
+                                                            </div>
+                                                        </div>
+
+                                                        <div className="col-lg-12 col-md-12">
+                                                            <button type="submit" className="btn btn-primary">Submit</button>
+                                                        </div>
+                                                    </div>
+                                                </form>
+                                            </div>
+                                        </TabPanel> */}
+                                    </Tabs>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    })
+
+    return (
+        <>
+            {MotorDetail}
+        </>
+    )
+}
+
+export default ProductDetails;

components/Company/Product/Apparel_Detail.js

@@ -0,0 +1,345 @@
+import React from 'react'
+
+//component
+import PageBanner from '@/components/Common/PageBanner';
+import * as Icon from 'react-feather'
+import { useSelector, useDispatch } from 'react-redux'
+import { useRouter } from 'next/router'
+import { useToasts } from 'react-toast-notifications'
+
+//addon library
+import { resetIdCounter, Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+resetIdCounter();
+
+import dynamic from 'next/dynamic'
+const OwlCarousel = dynamic(import('react-owl-carousel3'))
+
+//library yarn
+import NumberFormat from 'react-number-format';
+import ReactHtmlParser from "react-html-parser";
+
+//sweet alert
+import swal from 'sweetalert';
+
+const options = {
+    loop: true,
+    nav: true,
+    dots: false,
+    autoplay: true,
+    items: 1,
+    smartSpeed: 1000,
+    autoplayTimeout: 5000,
+    navText: [
+        "<i className='bx bx-chevron-left'></i>",
+        "<i className='bx bx-chevron-right'></i>"
+    ],
+};
+
+const ProductDetails = function ({ detailapparel, backend, user, ...props }) {
+
+    const [formValue, setFormValue] = React.useState({
+        product_img: "",
+        product_name: "",
+        product_color: "",
+        product_price: "",
+    });
+
+    const router = useRouter();
+
+    const MotorDetail = detailapparel.map((data) => {
+
+        return (
+            <div>
+                <PageBanner pageTitle={data.name} />
+                <div className="shop-details-area ptb-80">
+                    <div className="container">
+                        <div className="row align-items-center">
+                            <div className="col-lg-5">
+                                <OwlCarousel
+                                    className="products-details-image products-details-image-slides owl-carousel owl-theme"
+                                    {...options}
+                                >
+                                    <img src={`${backend}${data.img["url"]}`} />
+                                </OwlCarousel>
+                            </div>
+
+                            <div className="col-lg-7">
+                                <div className="products-details">
+                                    <h3>{data.name}</h3>
+                                    <h3>
+                                        <NumberFormat value={data.price - data.price * data.discount} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
+                                    </h3>
+                                    <h5>
+                                        <div className="price" style={{marginTop:"20px"}}>
+                                            <NumberFormat
+                                                style={{ color: "#EB1928" }}
+                                                displayType={'text'}
+                                                prefix={'%'}
+                                                decimalScale={2}
+                                                value={data.discount * 100}
+                                            />
+                                            <NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
+                                        </div>
+                                    </h5>
+
+                                    <ul className="rating">
+                                        <li><i className="flaticon-star-1"></i></li>
+                                        <li><i className="flaticon-star-1"></i></li>
+                                        <li><i className="flaticon-star-1"></i></li>
+                                        <li><i className="flaticon-star-1"></i></li>
+                                        <li><i className="flaticon-star-1"></i></li>
+                                    </ul>
+
+                                    <div className="availability">
+                                        Availability: <span>{data.stock}</span>
+                                    </div>
+                                    <form
+                                        onSubmit={async (e) => {
+                                            e.preventDefault();
+                                            var newformValue = {
+                                                ...formValue,
+                                                product_name: detailproduct[0].name,
+                                            }
+                                            setFormValue(newformValue)
+                                            // console.log(JSON.stringify(newformValue));
+                                            const response = await fetch(
+                                                "/api/transaction/AddToCart",
+                                                {
+                                                    method: "POST",
+                                                    headers: {
+                                                        'Content-Type': 'application/json'
+                                                    },
+                                                    body: JSON.stringify(newformValue),
+                                                }
+                                            );
+                                            if (response.ok) {
+                                                var res = await response.json();
+                                                // console.log("cek response :", res);
+                                                if (res["STATUS"] === 1) {
+                                                    res["DATA"]["cart"];
+                                                    swal("Produk Berhasil Ditambah ke Keranjang", "Silahkan Cek Keranjang Belanja Anda", "success");
+                                                    router.push("/yamaha/Shop/Cart");
+                                                }
+                                                else {
+                                                    swal("Produk Gagal Ditambah ke Keranjang", "Silahkan Coba Lagi", "error");
+                                                }
+                                            } else {
+                                                swal("Transaksi Gagal", "Silahkan Coba Lagi", "error");
+                                            }
+                                            return false;
+                                        }}
+
+                                    >
+                                        {/* <label>Product OTR <span className="required">*</span></label>
+
+                                        <div className="select-box" placeholder="Pilih Harga OTR">
+                                            <select className="form-select"
+                                                name="product_otr"
+                                                onInput={(e) => {
+                                                    setFormValue({
+                                                        ...formValue,
+                                                        product_price: e.target.value.toString(),
+                                                    })
+                                                }}
+                                            >
+                                                <option value="0">- Pilih Product OTR -</option>
+                                                {detailproduct.map((option) => (
+                                                    <option value={option.product_otrs[0].price}>{option.product_otrs[0].name}</option>
+                                                ))}
+                                                {detailproduct.map((option) => (
+                                                    <option value={option.product_otrs[1].price}>{option.product_otrs[1].name}</option>
+                                                ))}
+                                                {detailproduct.map((option) => (
+                                                    <option value={option.product_otrs[2].price}>{option.product_otrs[2].name}</option>
+                                                ))}
+                                            </select>
+                                        </div>
+                                        <br />
+
+                                        <label>Product Color <span className="required">*</span></label>
+                                        <div className="select-box" placeholder="Pilih Harga OTR">
+                                            <select className="form-select"
+                                                name="product_color"
+                                                onInput={(e) => {
+                                                    setFormValue({
+                                                        ...formValue,
+                                                        product_color: e.target.value.toString()
+                                                    })
+                                                }}
+                                            >
+                                                <option value="0">- Pilih Product Color -</option>
+                                                {detailproduct.map((option) => (
+                                                    <option value={option.product_image_colors[0].name}>{option.product_image_colors[0].name}</option>
+                                                ))}
+                                                {detailproduct.map((option) => (
+                                                    <option value={option.product_image_colors[1].name}>{option.product_image_colors[1].name}</option>
+                                                ))}
+                                                {detailproduct.map((option) => (
+                                                    <option value={option.product_image_colors[2].name}>{option.product_image_colors[2].name}</option>
+                                                ))}
+                                            </select>
+                                        </div>
+                                        <br /> */}
+
+                                        {/* <button type="submit">Add to Cart</button> */}
+
+                                        <a  className="add-to-wishlist-btn" title="Add to Wishlist">
+                                            <Icon.Heart />
+                                        </a>
+                                    </form>
+
+                                    <div className="custom-payment-options">
+                                        <span>Metode Pembayaran : </span>
+
+                                        <div className="payment-methods">
+                                            <img src="/images/payment-image/Mastercard.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/Visa.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/BNI.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/BCA.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/Mandiri.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/BSI.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/Indomaret.svg" width="50px" alt="image" />
+                                        </div>
+                                    </div>
+
+                                    <div className="products-share-social">
+                                        <span>Share:</span>
+
+                                        <ul>
+                                            <li>
+                                                <a  className="facebook" target="_blank">
+                                                    <Icon.Facebook />
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a  className="twitter" target="_blank">
+                                                    <Icon.Twitter />
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a  className="linkedin" target="_blank">
+                                                    <Icon.Linkedin />
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a  className="instagram" target="_blank">
+                                                    <Icon.Instagram />
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="col-lg-12 col-md-12">
+                                <div className="products-details-tabs">
+                                    <Tabs>
+                                        <TabList>
+                                            <Tab>Deskripsi</Tab>
+                                            <Tab>Info Penting</Tab>
+                                            {/* <Tab>Review</Tab> */}
+                                        </TabList>
+
+                                        <TabPanel>
+                                            <div className="products-description" align="left">
+                                                <p>{ReactHtmlParser(data.description)}</p>
+                                            </div>
+                                        </TabPanel>
+
+                                        <TabPanel>
+                                            <div className="products-description" align="left">
+                                                <p>
+                                                    <p><b>Informasi mengenai prosedur pengiriman, pembelian dan dokumen</b></p>
+                                                    <ul>
+                                                        <li>Kota Palembang, Kayu Agung, Prabumulih, Pangkalan Balai, Betung : 2-3 hari kerja*</li>
+                                                        <li>Untuk daerah Sungsang/daerah lain yang menggunakan kapal motor, maka motor diantar sampai di dermaga sesuai dengan jadwal yang diinformasikan</li>
+                                                        <li>Sekayu, Babat Toman, Pendopo, Baturaja, Martapura, Muara Dua, Lahat, Tanjung Enim, Tugu Mulyo, Belitang : 4-5 hari kerja*</li>
+                                                        <li>Lubuk Linggau, Curup, Pagar Alam : 6-7 hari kerja*</li>
+                                                    </ul>
+
+                                                    <p><b>Harga</b></p>
+                                                    <ul>
+                                                        <li>Harga OTR sudah termasuk biaya pengiriman dan BBN, kecuali tambahan pengenaan pajak progresif kepemilikan kendaraan bermotor (sesuai dengan peraturan yang telah ditetapkan oleh pemerintah)</li>
+                                                        <li>Harga OTR diatas berlaku untuk KTP domisili PALEMBANG, OGAN ILIR, dan BANYUASIN, diluar wilayah tersebut harap menghubungi kami untuk konfirmasi harga.</li>
+                                                        <li>Harga OTR sewaktu-waktu dapat berubah.</li>
+                                                        <li>Proses pemesanan sepeda motor tidak dapat dibatalkan dan warna yang sudah dipesan tidak dapat diubah.</li>
+                                                        <li>Proses pemesanan yang terkait waktu pengiriman produk dan kelengkapan dokumen yang dibutuhkan untuk pembuatan STNK dan BPKB akan  diinformasikan oleh pihak Dealer.</li>
+                                                        <li>Proses pengiriman sepeda motor akan dilakukan setelah pelunasan transaksi dan dokumen yang dibutuhkan telah lengkap.</li>
+                                                    </ul>
+
+                                                    <p><b>Dokumen</b></p>
+                                                    <ul>
+                                                        <li>Proses pembuatan STNK setelah KTP diterima oleh pihak dealer adalah 19-25 hari kerja*.</li>
+                                                        <li>Proses pembuatan BPKB adalah 3-4 bulan.</li>
+                                                        <li>STNK dan BPKB wajib diambil sendiri oleh pihak yang bersangkutan sesuai dengan identitas yang tertera STNK di dealer yang ditunjuk.</li>
+                                                        <li>Untuk proses pembuatan STNK dan BPKB sepenuhnya menjadi tanggung jawab dealer terkait.</li>
+                                                        <li>Buku servis diterima bersamaan dengan pengiriman sepeda motor.</li>
+                                                    </ul>
+
+                                                    <p><b>*tidak termasuk Sabtu dan Minggu.</b></p>
+                                                </p>
+                                            </div>
+                                        </TabPanel>
+
+                                        {/* <TabPanel>
+                                            <div className="products-reviews">
+                                                <h3>Customer Reviews</h3>
+                                                <p>There are no reviews yet.</p>
+
+                                                <form className="review-form">
+                                                    <p>Rate this item:</p>
+
+                                                    <div className="star-rating">
+                                                        <i className='bx bxs-star'></i>
+                                                        <i className='bx bxs-star'></i>
+                                                        <i className='bx bxs-star'></i>
+                                                        <i className='bx bxs-star'></i>
+                                                        <i className='bx bxs-star'></i>
+
+                                                        <p>Very good product!</p>
+                                                    </div>
+
+                                                    <div className="row">
+                                                        <div className="col-lg-12">
+                                                            <div className="form-group">
+                                                                <textarea name="review-message" id="message" cols="30" rows="4" placeholder="Write your review*" className="form-control"></textarea>
+                                                            </div>
+                                                        </div>
+
+                                                        <div className="col-lg-6 col-md-6">
+                                                            <div className="form-group">
+                                                                <input type="text" placeholder="Name*" className="form-control" />
+                                                            </div>
+                                                        </div>
+
+                                                        <div className="col-lg-6 col-md-6">
+                                                            <div className="form-group">
+                                                                <input type="email" placeholder="Email*" className="form-control" />
+                                                            </div>
+                                                        </div>
+
+                                                        <div className="col-lg-12 col-md-12">
+                                                            <button type="submit" className="btn btn-primary">Submit</button>
+                                                        </div>
+                                                    </div>
+                                                </form>
+                                            </div>
+                                        </TabPanel> */}
+                                    </Tabs>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    })
+
+    return (
+        <>
+            {MotorDetail}
+        </>
+    )
+}
+
+export default ProductDetails;

components/Company/Product/Helmet_Detail.js

@@ -0,0 +1,345 @@
+import React from 'react'
+
+//component
+import PageBanner from '@/components/Common/PageBanner';
+import * as Icon from 'react-feather'
+import { useSelector, useDispatch } from 'react-redux'
+import { useRouter } from 'next/router'
+import { useToasts } from 'react-toast-notifications'
+
+//addon library
+import { resetIdCounter, Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+resetIdCounter();
+
+import dynamic from 'next/dynamic'
+const OwlCarousel = dynamic(import('react-owl-carousel3'))
+
+//library yarn
+import NumberFormat from 'react-number-format';
+import ReactHtmlParser from "react-html-parser";
+
+//sweet alert
+import swal from 'sweetalert';
+
+const options = {
+    loop: true,
+    nav: true,
+    dots: false,
+    autoplay: true,
+    items: 1,
+    smartSpeed: 1000,
+    autoplayTimeout: 5000,
+    navText: [
+        "<i className='bx bx-chevron-left'></i>",
+        "<i className='bx bx-chevron-right'></i>"
+    ],
+};
+
+const ProductDetails = function ({ detailhelmet, backend, user, ...props }) {
+
+    const [formValue, setFormValue] = React.useState({
+        product_img: "",
+        product_name: "",
+        product_color: "",
+        product_price: "",
+    });
+
+    const router = useRouter();
+
+    const MotorDetail = detailhelmet.map((data) => {
+
+        return (
+            <div>
+                <PageBanner pageTitle={data.name} />
+                <div className="shop-details-area ptb-80">
+                    <div className="container">
+                        <div className="row align-items-center">
+                            <div className="col-lg-5">
+                                <OwlCarousel
+                                    className="products-details-image products-details-image-slides owl-carousel owl-theme"
+                                    {...options}
+                                >
+                                    <img src={`${backend}${data.img["url"]}`} />
+                                </OwlCarousel>
+                            </div>
+
+                            <div className="col-lg-7">
+                                <div className="products-details">
+                                    <h3>{data.name}</h3>
+                                    <h3>
+                                        <NumberFormat value={data.price - data.price * data.discount} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
+                                    </h3>
+                                    <h5>
+                                        <div className="price" style={{marginTop:"20px"}}>
+                                            <NumberFormat
+                                                style={{ color: "#EB1928" }}
+                                                displayType={'text'}
+                                                prefix={'%'}
+                                                decimalScale={2}
+                                                value={data.discount * 100}
+                                            />
+                                            <NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
+                                        </div>
+                                    </h5>
+
+                                    <ul className="rating">
+                                        <li><i className="flaticon-star-1"></i></li>
+                                        <li><i className="flaticon-star-1"></i></li>
+                                        <li><i className="flaticon-star-1"></i></li>
+                                        <li><i className="flaticon-star-1"></i></li>
+                                        <li><i className="flaticon-star-1"></i></li>
+                                    </ul>
+
+                                    <div className="availability">
+                                        Availability: <span>{data.stock}</span>
+                                    </div>
+                                    <form
+                                        onSubmit={async (e) => {
+                                            e.preventDefault();
+                                            var newformValue = {
+                                                ...formValue,
+                                                product_name: detailproduct[0].name,
+                                            }
+                                            setFormValue(newformValue)
+                                            // console.log(JSON.stringify(newformValue));
+                                            const response = await fetch(
+                                                "/api/transaction/AddToCart",
+                                                {
+                                                    method: "POST",
+                                                    headers: {
+                                                        'Content-Type': 'application/json'
+                                                    },
+                                                    body: JSON.stringify(newformValue),
+                                                }
+                                            );
+                                            if (response.ok) {
+                                                var res = await response.json();
+                                                // console.log("cek response :", res);
+                                                if (res["STATUS"] === 1) {
+                                                    res["DATA"]["cart"];
+                                                    swal("Produk Berhasil Ditambah ke Keranjang", "Silahkan Cek Keranjang Belanja Anda", "success");
+                                                    router.push("/yamaha/Shop/Cart");
+                                                }
+                                                else {
+                                                    swal("Produk Gagal Ditambah ke Keranjang", "Silahkan Coba Lagi", "error");
+                                                }
+                                            } else {
+                                                swal("Transaksi Gagal", "Silahkan Coba Lagi", "error");
+                                            }
+                                            return false;
+                                        }}
+
+                                    >
+                                        {/* <label>Product OTR <span className="required">*</span></label>
+
+                                        <div className="select-box" placeholder="Pilih Harga OTR">
+                                            <select className="form-select"
+                                                name="product_otr"
+                                                onInput={(e) => {
+                                                    setFormValue({
+                                                        ...formValue,
+                                                        product_price: e.target.value.toString(),
+                                                    })
+                                                }}
+                                            >
+                                                <option value="0">- Pilih Product OTR -</option>
+                                                {detailproduct.map((option) => (
+                                                    <option value={option.product_otrs[0].price}>{option.product_otrs[0].name}</option>
+                                                ))}
+                                                {detailproduct.map((option) => (
+                                                    <option value={option.product_otrs[1].price}>{option.product_otrs[1].name}</option>
+                                                ))}
+                                                {detailproduct.map((option) => (
+                                                    <option value={option.product_otrs[2].price}>{option.product_otrs[2].name}</option>
+                                                ))}
+                                            </select>
+                                        </div>
+                                        <br />
+
+                                        <label>Product Color <span className="required">*</span></label>
+                                        <div className="select-box" placeholder="Pilih Harga OTR">
+                                            <select className="form-select"
+                                                name="product_color"
+                                                onInput={(e) => {
+                                                    setFormValue({
+                                                        ...formValue,
+                                                        product_color: e.target.value.toString()
+                                                    })
+                                                }}
+                                            >
+                                                <option value="0">- Pilih Product Color -</option>
+                                                {detailproduct.map((option) => (
+                                                    <option value={option.product_image_colors[0].name}>{option.product_image_colors[0].name}</option>
+                                                ))}
+                                                {detailproduct.map((option) => (
+                                                    <option value={option.product_image_colors[1].name}>{option.product_image_colors[1].name}</option>
+                                                ))}
+                                                {detailproduct.map((option) => (
+                                                    <option value={option.product_image_colors[2].name}>{option.product_image_colors[2].name}</option>
+                                                ))}
+                                            </select>
+                                        </div>
+                                        <br /> */}
+
+                                        {/* <button type="submit">Add to Cart</button> */}
+
+                                        <a  className="add-to-wishlist-btn" title="Add to Wishlist">
+                                            <Icon.Heart />
+                                        </a>
+                                    </form>
+
+                                    <div className="custom-payment-options">
+                                        <span>Metode Pembayaran : </span>
+
+                                        <div className="payment-methods">
+                                            <img src="/images/payment-image/Mastercard.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/Visa.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/BNI.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/BCA.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/Mandiri.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/BSI.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/Indomaret.svg" width="50px" alt="image" />
+                                        </div>
+                                    </div>
+
+                                    <div className="products-share-social">
+                                        <span>Share:</span>
+
+                                        <ul>
+                                            <li>
+                                                <a  className="facebook" target="_blank">
+                                                    <Icon.Facebook />
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a  className="twitter" target="_blank">
+                                                    <Icon.Twitter />
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a  className="linkedin" target="_blank">
+                                                    <Icon.Linkedin />
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a  className="instagram" target="_blank">
+                                                    <Icon.Instagram />
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="col-lg-12 col-md-12">
+                                <div className="products-details-tabs">
+                                    <Tabs>
+                                        <TabList>
+                                            <Tab>Deskripsi</Tab>
+                                            <Tab>Info Penting</Tab>
+                                            {/* <Tab>Review</Tab> */}
+                                        </TabList>
+
+                                        <TabPanel>
+                                            <div className="products-description" align="left">
+                                                <p>{ReactHtmlParser(data.description)}</p>
+                                            </div>
+                                        </TabPanel>
+
+                                        <TabPanel>
+                                            <div className="products-description" align="left">
+                                                <p>
+                                                    <p><b>Informasi mengenai prosedur pengiriman, pembelian dan dokumen</b></p>
+                                                    <ul>
+                                                        <li>Kota Palembang, Kayu Agung, Prabumulih, Pangkalan Balai, Betung : 2-3 hari kerja*</li>
+                                                        <li>Untuk daerah Sungsang/daerah lain yang menggunakan kapal motor, maka motor diantar sampai di dermaga sesuai dengan jadwal yang diinformasikan</li>
+                                                        <li>Sekayu, Babat Toman, Pendopo, Baturaja, Martapura, Muara Dua, Lahat, Tanjung Enim, Tugu Mulyo, Belitang : 4-5 hari kerja*</li>
+                                                        <li>Lubuk Linggau, Curup, Pagar Alam : 6-7 hari kerja*</li>
+                                                    </ul>
+
+                                                    <p><b>Harga</b></p>
+                                                    <ul>
+                                                        <li>Harga OTR sudah termasuk biaya pengiriman dan BBN, kecuali tambahan pengenaan pajak progresif kepemilikan kendaraan bermotor (sesuai dengan peraturan yang telah ditetapkan oleh pemerintah)</li>
+                                                        <li>Harga OTR diatas berlaku untuk KTP domisili PALEMBANG, OGAN ILIR, dan BANYUASIN, diluar wilayah tersebut harap menghubungi kami untuk konfirmasi harga.</li>
+                                                        <li>Harga OTR sewaktu-waktu dapat berubah.</li>
+                                                        <li>Proses pemesanan sepeda motor tidak dapat dibatalkan dan warna yang sudah dipesan tidak dapat diubah.</li>
+                                                        <li>Proses pemesanan yang terkait waktu pengiriman produk dan kelengkapan dokumen yang dibutuhkan untuk pembuatan STNK dan BPKB akan  diinformasikan oleh pihak Dealer.</li>
+                                                        <li>Proses pengiriman sepeda motor akan dilakukan setelah pelunasan transaksi dan dokumen yang dibutuhkan telah lengkap.</li>
+                                                    </ul>
+
+                                                    <p><b>Dokumen</b></p>
+                                                    <ul>
+                                                        <li>Proses pembuatan STNK setelah KTP diterima oleh pihak dealer adalah 19-25 hari kerja*.</li>
+                                                        <li>Proses pembuatan BPKB adalah 3-4 bulan.</li>
+                                                        <li>STNK dan BPKB wajib diambil sendiri oleh pihak yang bersangkutan sesuai dengan identitas yang tertera STNK di dealer yang ditunjuk.</li>
+                                                        <li>Untuk proses pembuatan STNK dan BPKB sepenuhnya menjadi tanggung jawab dealer terkait.</li>
+                                                        <li>Buku servis diterima bersamaan dengan pengiriman sepeda motor.</li>
+                                                    </ul>
+
+                                                    <p><b>*tidak termasuk Sabtu dan Minggu.</b></p>
+                                                </p>
+                                            </div>
+                                        </TabPanel>
+
+                                        {/* <TabPanel>
+                                            <div className="products-reviews">
+                                                <h3>Customer Reviews</h3>
+                                                <p>There are no reviews yet.</p>
+
+                                                <form className="review-form">
+                                                    <p>Rate this item:</p>
+
+                                                    <div className="star-rating">
+                                                        <i className='bx bxs-star'></i>
+                                                        <i className='bx bxs-star'></i>
+                                                        <i className='bx bxs-star'></i>
+                                                        <i className='bx bxs-star'></i>
+                                                        <i className='bx bxs-star'></i>
+
+                                                        <p>Very good product!</p>
+                                                    </div>
+
+                                                    <div className="row">
+                                                        <div className="col-lg-12">
+                                                            <div className="form-group">
+                                                                <textarea name="review-message" id="message" cols="30" rows="4" placeholder="Write your review*" className="form-control"></textarea>
+                                                            </div>
+                                                        </div>
+
+                                                        <div className="col-lg-6 col-md-6">
+                                                            <div className="form-group">
+                                                                <input type="text" placeholder="Name*" className="form-control" />
+                                                            </div>
+                                                        </div>
+
+                                                        <div className="col-lg-6 col-md-6">
+                                                            <div className="form-group">
+                                                                <input type="email" placeholder="Email*" className="form-control" />
+                                                            </div>
+                                                        </div>
+
+                                                        <div className="col-lg-12 col-md-12">
+                                                            <button type="submit" className="btn btn-primary">Submit</button>
+                                                        </div>
+                                                    </div>
+                                                </form>
+                                            </div>
+                                        </TabPanel> */}
+                                    </Tabs>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    })
+
+    return (
+        <>
+            {MotorDetail}
+        </>
+    )
+}
+
+export default ProductDetails;

components/Company/Product/Motor.js

@@ -0,0 +1,138 @@
+import React from 'react'
+import Link from 'next/link'
+import * as Icon from 'react-feather'
+import { useSelector } from 'react-redux'
+import AddToCartBtn from '@/components/others/Shop/AddToCartBtn'
+import NumberFormat from 'react-number-format';
+import Select from 'react-select';
+import Router from 'next/router'
+
+const ProductCard = function ({ selected, product, backend, user, ...props }) {
+    const products = useSelector((state) => state.products)
+
+    const handleName = values => {
+        Router.push({
+            pathname: '/yamaha/Product/Motor',
+            query: (values&&values.length!=0)?{ filter: values["name"] }:{},
+        })
+    }
+
+    const Product = product.map((data) => {
+        return (
+            <div className="col-lg-3 col-md-6 col-sm-6" key={product.id}>
+                <div className="single-products">
+                    <div className="products-image">
+                        <img src={`/api/util?img=${encodeURIComponent(data.attributes.Image.data[0].attributes.url)}`}
+                        />
+
+                        <ul>
+                            <li>
+                                <a >
+                                    <Icon.Search />
+                                </a>
+                            </li>
+                            <li>
+                                <a >
+                                    <Icon.Heart />
+                                </a>
+                            </li>
+                            <li>
+                                <Link href="/products/[id]" as={`/products/${data.id}`}>
+                                    <a>
+                                        <Icon.Link />
+                                    </a>
+                                </Link>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <div className="products-content">
+                        <h3>
+                            <Link href={"/yamaha/Product/Motor_Detail?s=" + data.id}>
+                                <a>{data.attributes.Name}</a>
+                            </Link>
+                        </h3>
+                        {
+                            (data.attributes.Product_prices.data.length==0)
+                            ?"-"
+                            :(data.attributes.Product_prices.data.length==1)
+                                ?(<span><NumberFormat value={Math.min.apply(null, data.attributes.Product_prices.data.map((i)=>i.attributes.Price))} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></span>)
+                                :(
+                                    <span>
+                                        <NumberFormat value={Math.min.apply(null, data.attributes.Product_prices.data.map((i)=>i.attributes.Price))} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /> 
+                                    {"  s/d  "}
+                                        <NumberFormat value={Math.max.apply(null, data.attributes.Product_prices.data.map((i)=>i.attributes.Price))} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
+                                    </span>
+                                )
+                        }
+                        {/* <ul>
+                            <li><i className="flaticon-star-1"></i></li>
+                            <li><i className="flaticon-star-1"></i></li>
+                            <li><i className="flaticon-star-1"></i></li>
+                            <li><i className="flaticon-star-1"></i></li>
+                            <li><i className="flaticon-star-1"></i></li>
+                        </ul> */}
+
+                        <Link href={"/yamaha/Product/Motor_Detail?s=" + data.id}>
+                            <a className="add-to-cart-btn">Detail Product</a>
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        );
+    })
+    return (
+        <div className="shop-area ptb-80">
+            <div className="container">
+                <div className="woocommerce-topbar">
+                    <div className="row align-items-center">
+                        <div className="col-lg-7 col-md-7 col-sm-7">
+                            <div className="woocommerce-result-count">
+                                <p>Showing 1-8 of 14 results</p>
+                            </div>
+                        </div>
+
+                        <div className="col-lg-5 col-md-5 col-sm-5">
+                            <Select
+                                value={(selected) ? product.filter((i) => i.id == selected) : null}
+                                getOptionLabel={option => `${option.name}`}
+                                getOptionValue={option => option.id}
+                                options={product}
+                                isClearable="true"
+                                instanceId="name"
+                                placeholder="Cari Produk"
+                                onChange={values => handleName(values)}
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <div className="row justify-content-md">
+
+                    {Product}
+
+                    {/* Pagination */}
+                    <div className="col-lg-12 col-md-12 col-sm-12">
+                        <div className="pagination-area">
+                            <nav aria-label="Page navigation">
+                                <ul className="pagination justify-content-center">
+                                    <li className="page-item"><a className="page-link" >Prev</a></li>
+
+                                    <li className="page-item active"><a className="page-link" >1</a></li>
+
+                                    <li className="page-item"><a className="page-link" >2</a></li>
+
+                                    <li className="page-item"><a className="page-link" >3</a></li>
+
+                                    <li className="page-item"><a className="page-link" >Next</a></li>
+                                </ul>
+                            </nav>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default ProductCard;

components/Company/Product/Motor_Detail.js

@@ -0,0 +1,347 @@
+import React, { useState } from 'react'
+
+//component
+import PageBanner from '@/components/Common/PageBanner';
+import * as Icon from 'react-feather'
+import { useSelector, useDispatch } from 'react-redux'
+import { useRouter } from 'next/router'
+import { useToasts } from 'react-toast-notifications'
+
+//addon library
+import { resetIdCounter, Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+resetIdCounter();
+
+import dynamic from 'next/dynamic'
+const OwlCarousel = dynamic(import('react-owl-carousel3'))
+
+//library yarn
+import NumberFormat from 'react-number-format';
+import util from '../../../lib/util';
+
+//sweet alert
+import swal from 'sweetalert';
+
+const options = {
+    loop: true,
+    nav: true,
+    dots: false,
+    autoplay: true,
+    items: 1,
+    smartSpeed: 1000,
+    autoplayTimeout: 5000,
+    navText: [
+        "<i className='bx bx-chevron-left'></i>",
+        "<i className='bx bx-chevron-right'></i>"
+    ],
+};
+
+const ProductDetails = function ({ detailproduct, backend, user, ...props }) {
+    const [formValue, setFormValue] = React.useState({
+        product_img: "",
+        product_name: "",
+        product_color: "",
+        product_price: "",
+    });
+
+    const [OTRProduct, setProductOTR] = useState('');
+
+    const router = useRouter();
+
+    return (
+        <>
+            <PageBanner pageTitle={detailproduct.Name} />
+                <div className="shop-details-area ptb-80">
+                    <div className="container">
+                        <div className="row align-items-center">
+                            <div className="col-lg-5">
+                                <OwlCarousel
+                                    className="products-details-image products-details-image-slides owl-carousel owl-theme"
+                                    {...options}
+                                >
+                                    {detailproduct.Image.data.map((option) => (
+                                        <img src={`/api/util?img=${encodeURIComponent(option.attributes.url)}`} />
+                                    ))}
+
+                                </OwlCarousel>
+                            </div>
+
+                            <div className="col-lg-7">
+                                <div className="products-details">
+                                    <h5>
+                                        <NumberFormat value={OTRProduct} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
+                                    </h5>
+                                    {/* <h3>
+                                        <NumberFormat value={data.product_otrs[0].price - data.product_otrs[0].price * data.discount} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
+                                    </h3>
+                                    <h5>
+                                        <div className="price" style={{ marginTop: "20px" }}>
+                                            <NumberFormat
+                                                style={{ color: "#EB1928" }}
+                                                displayType={'text'}
+                                                prefix={'%'}
+                                                decimalScale={2}
+                                                value={data.discount * 100}
+                                            />
+                                            <NumberFormat value={data.product_otrs[0].price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
+                                        </div>
+                                    </h5> */}
+
+                                    {/* <p>{this.state.selectedOption}</p> */}
+
+                                    <ul className="rating">
+                                        <li><i className="flaticon-star-1"></i></li>
+                                        <li><i className="flaticon-star-1"></i></li>
+                                        <li><i className="flaticon-star-1"></i></li>
+                                        <li><i className="flaticon-star-1"></i></li>
+                                        <li><i className="flaticon-star-1"></i></li>
+                                    </ul>
+
+                                    <div className="availability">
+                                        Availability: <span>{detailproduct.Stock}</span>
+                                    </div>
+                                    <form
+                                        onSubmit={async (e) => {
+                                            e.preventDefault();
+                                            var newformValue = {
+                                                ...formValue,
+                                                product_name: detailproduct.Name,
+                                                // product_img: detailproduct[0].backend.img[0],
+                                            }
+                                            setFormValue(newformValue)
+                                            // console.log(JSON.stringify(newformValue));
+                                            const response = await fetch(
+                                                "/api/transaction/AddToCart",
+                                                {
+                                                    method: "POST",
+                                                    headers: {
+                                                        'Content-Type': 'application/json'
+                                                    },
+                                                    body: JSON.stringify(newformValue),
+                                                }
+                                            );
+                                            if (response.ok) {
+                                                var res = await response.json();
+                                                // console.log("cek response :", res);
+                                                if (res["STATUS"] === 1) {
+                                                    res["DATA"]["cart"];
+                                                    swal("Produk Berhasil Ditambah ke Keranjang", "Silahkan Cek Keranjang Belanja Anda", "success");
+                                                    router.push("/yamaha/Shop/Cart");
+                                                }
+                                                else {
+                                                    swal("Produk Gagal Ditambah ke Keranjang", "Silahkan Coba Lagi", "error");
+                                                }
+                                            } else {
+                                                swal("Transaksi Gagal", "Silahkan Coba Lagi", "error");
+                                            }
+                                            return false;
+                                        }}
+                                    >
+                                        <label>Harga Product per Daerah <span className="required">*</span></label>
+
+                                        <div className="select-box" placeholder="Pilih Harga OTR">
+                                            <select className="form-select"
+                                                name="product_otr"
+                                                onInput={(e) => {
+                                                    setFormValue({
+                                                        ...formValue,
+                                                        product_price: e.target.value.toString(),
+                                                    })
+                                                }}
+                                                onChange={e => setProductOTR(e.target.value)}
+                                            >
+                                                <option value="0">- Harga per Daerah -</option>
+                                                {detailproduct.Product_prices.data.map((option) => (
+                                                    <option value={option.attributes.Price}>{(option.attributes.Region.data)?option.attributes.Region.data.attributes.Name:''}-{option.attributes.Price}</option>
+                                                ))}
+                                            </select>
+                                        </div>
+                                        <br />
+
+                                        <label>Warna Product<span className="required">*</span></label>
+                                        <div className="select-box" placeholder="Pilih Warna">
+                                            <select className="form-select"
+                                                name="product_color"
+                                                onInput={(e) => {
+                                                    setFormValue({
+                                                        ...formValue,
+                                                        product_color: e.target.value.toString()
+                                                    })
+                                                }}
+                                            >
+                                                <option value="0">- Pilih Product Color -</option>
+                                                {detailproduct.Product_colors.data.map((option) => (
+                                                    <option value={option.attributes.Color}>{option.attributes.Color}</option>
+                                                ))}
+                                            </select>
+                                        </div>
+                                        <br />
+
+                                        {/* <button type="submit">Add to Cart</button> */}
+
+                                        <a  className="add-to-wishlist-btn" title="Add to Wishlist">
+                                            <Icon.Heart />
+                                        </a>
+                                    </form>
+
+                                    <div className="custom-payment-options">
+                                        <span>Metode Pembayaran : </span>
+
+                                        <div className="payment-methods">
+                                            <img src="/images/payment-image/Mastercard.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/Visa.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/BNI.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/BCA.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/Mandiri.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/BSI.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/Indomaret.svg" width="50px" alt="image" />
+                                        </div>
+                                    </div>
+
+                                    <div className="products-share-social">
+                                        <span>Share:</span>
+
+                                        <ul>
+                                            <li>
+                                                <a  className="facebook" target="_blank">
+                                                    <Icon.Facebook />
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a  className="twitter" target="_blank">
+                                                    <Icon.Twitter />
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a  className="instagram" target="_blank">
+                                                    <Icon.Instagram />
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="col-lg-12 col-md-12">
+                                <div className="products-details-tabs">
+                                    <Tabs>
+                                        <TabList>
+                                            <Tab>Deskripsi</Tab>
+                                            {/* <Tab>Info Penting</Tab> */}
+                                            <Tab>Spesifikasi</Tab>
+                                            {/* <Tab>Review</Tab> */}
+                                        </TabList>
+
+                                        <TabPanel>
+                                            <div className="products-description" align="left">
+                                                <p>{util.htmlParse(detailproduct.Description)}</p>
+                                            </div>
+                                        </TabPanel>
+
+                                        {/* <TabPanel>
+                                            <div className="products-description" align="left">
+                                                <p>
+                                                    <p><b>Informasi mengenai prosedur pengiriman, pembelian dan dokumen</b></p>
+                                                    <ul>
+                                                        <li>Kota Palembang, Kayu Agung, Prabumulih, Pangkalan Balai, Betung : 2-3 hari kerja*</li>
+                                                        <li>Untuk daerah Sungsang/daerah lain yang menggunakan kapal motor, maka motor diantar sampai di dermaga sesuai dengan jadwal yang diinformasikan</li>
+                                                        <li>Sekayu, Babat Toman, Pendopo, Baturaja, Martapura, Muara Dua, Lahat, Tanjung Enim, Tugu Mulyo, Belitang : 4-5 hari kerja*</li>
+                                                        <li>Lubuk Linggau, Curup, Pagar Alam : 6-7 hari kerja*</li>
+                                                    </ul>
+
+                                                    <p><b>Harga</b></p>
+                                                    <ul>
+                                                        <li>Harga OTR sudah termasuk biaya pengiriman dan BBN, kecuali tambahan pengenaan pajak progresif kepemilikan kendaraan bermotor (sesuai dengan peraturan yang telah ditetapkan oleh pemerintah)</li>
+                                                        <li>Harga OTR diatas berlaku untuk KTP domisili PALEMBANG, OGAN ILIR, dan BANYUASIN, diluar wilayah tersebut harap menghubungi kami untuk konfirmasi harga.</li>
+                                                        <li>Harga OTR sewaktu-waktu dapat berubah.</li>
+                                                        <li>Proses pemesanan sepeda motor tidak dapat dibatalkan dan warna yang sudah dipesan tidak dapat diubah.</li>
+                                                        <li>Proses pemesanan yang terkait waktu pengiriman produk dan kelengkapan dokumen yang dibutuhkan untuk pembuatan STNK dan BPKB akan  diinformasikan oleh pihak Dealer.</li>
+                                                        <li>Proses pengiriman sepeda motor akan dilakukan setelah pelunasan transaksi dan dokumen yang dibutuhkan telah lengkap.</li>
+                                                    </ul>
+
+                                                    <p><b>Dokumen</b></p>
+                                                    <ul>
+                                                        <li>Proses pembuatan STNK setelah KTP diterima oleh pihak dealer adalah 19-25 hari kerja*.</li>
+                                                        <li>Proses pembuatan BPKB adalah 3-4 bulan.</li>
+                                                        <li>STNK dan BPKB wajib diambil sendiri oleh pihak yang bersangkutan sesuai dengan identitas yang tertera STNK di dealer yang ditunjuk.</li>
+                                                        <li>Untuk proses pembuatan STNK dan BPKB sepenuhnya menjadi tanggung jawab dealer terkait.</li>
+                                                        <li>Buku servis diterima bersamaan dengan pengiriman sepeda motor.</li>
+                                                    </ul>
+
+                                                    <p><b>*tidak termasuk Sabtu dan Minggu.</b></p>
+                                                </p>
+                                            </div>
+                                        </TabPanel> */}
+
+                                        <TabPanel>
+                                            <div className="products-description">
+                                                <ul className="additional-information">
+                                                    <h2>Spesifikasi Mesin</h2>
+                                                    {util.htmlParse(detailproduct.Machine)}<br /><br />
+
+                                                    <h2>Spesifikasi Dimensi</h2>
+                                                    {util.htmlParse(detailproduct.Dimension)}<br /><br />
+
+                                                    <h2>Spesifikasi Rangka</h2>
+                                                    {util.htmlParse(detailproduct.Structure)}<br /><br />
+
+                                                    <h2>Spesifikasi Kelistrikan</h2>
+                                                    {util.htmlParse(detailproduct.Voltage)}<br /><br />
+                                                </ul>
+                                            </div>
+                                        </TabPanel>
+
+                                        {/* <TabPanel>
+                                            <div className="products-reviews">
+                                                <h3>Customer Reviews</h3>
+                                                <p>There are no reviews yet.</p>
+
+                                                <form className="review-form">
+                                                    <p>Rate this item:</p>
+
+                                                    <div className="star-rating">
+                                                        <i className='bx bxs-star'></i>
+                                                        <i className='bx bxs-star'></i>
+                                                        <i className='bx bxs-star'></i>
+                                                        <i className='bx bxs-star'></i>
+                                                        <i className='bx bxs-star'></i>
+
+                                                        <p>Very good product!</p>
+                                                    </div>
+
+                                                    <div className="row">
+                                                        <div className="col-lg-12">
+                                                            <div className="form-group">
+                                                                <textarea name="review-message" id="message" cols="30" rows="4" placeholder="Write your review*" className="form-control"></textarea>
+                                                            </div>
+                                                        </div>
+
+                                                        <div className="col-lg-6 col-md-6">
+                                                            <div className="form-group">
+                                                                <input type="text" placeholder="Name*" className="form-control" />
+                                                            </div>
+                                                        </div>
+
+                                                        <div className="col-lg-6 col-md-6">
+                                                            <div className="form-group">
+                                                                <input type="email" placeholder="Email*" className="form-control" />
+                                                            </div>
+                                                        </div>
+
+                                                        <div className="col-lg-12 col-md-12">
+                                                            <button type="submit" className="btn btn-primary">Submit</button>
+                                                        </div>
+                                                    </div>
+                                                </form>
+                                            </div>
+                                        </TabPanel> */}
+                                    </Tabs>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+        </>
+    )
+}
+
+export default ProductDetails;

components/Company/Product/Sparepart.js

@@ -0,0 +1,253 @@
+import React from 'react'
+import Link from 'next/link'
+import * as Icon from 'react-feather'
+import { useSelector } from 'react-redux'
+import AddToCartBtn from '@/components/others/Shop/AddToCartBtn'
+import Select from 'react-select';
+import Router from 'next/router'
+
+//addon library
+import { resetIdCounter, Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+resetIdCounter();
+
+//yarn library
+import NumberFormat from 'react-number-format';
+
+const ProductCard = function ({ category,page,selected,products, ...props }) {
+    const handleName = values => {
+        Router.push({
+            pathname: '/yamaha/Product/Sparepart',
+            query: (values && values.length != 0) ? { filter: values["name"] } : {},
+        })
+    }
+
+    category = category.map((i)=>i.replace(' ','_'));
+    const pagination = (type,pages)=>{
+        console.log(type,selected);
+        var paging = [];
+        var current = (selected==type)?page:1;
+        for(var i=1;i<=pages;i++){
+            paging.push(
+                <Link key={i} href={{
+                    query: { s:type,p: i },
+                }}>
+                    <li className={`page-item ${i==current?'active':''}`}>
+                        <a className="page-link" >{i}</a>
+                    </li>
+                </Link>
+            );
+        }
+        
+        return (
+            <div className="row justify-content-md-center">
+                <div className="col-lg-12 col-md-12 col-sm-12">
+                    <div className="pagination-area">
+                        <nav aria-label="Page navigation">
+                            <ul className="pagination justify-content-center">
+                                {(current!='1')?(<li className="page-item"><Link href={{
+                                        pathname: '/yamaha/product/Sparepart',
+                                        query: { s:type,p: parseInt(current)-1 },
+                                    }}>
+                                    <a className="page-link" >Prev</a>
+                                </Link></li>):""}
+                                {paging}
+                                {(current!=pages)?<li className="page-item"><Link href={{
+                                    pathname: '/yamaha/product/Sparepart',
+                                    query: { s:type,p: parseInt(current)+1 },
+                                }}>
+                                    <a className="page-link" >Next</a>
+                                </Link></li>:""}
+                            </ul>
+                        </nav>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const productGrid = function(product){
+        if(product){
+            return product.map((data) => {
+                return (
+                    <div className="col-lg-3 col-md-6 col-sm-6" key={product.id}>
+                        <div className="single-products">
+                            <div className="products-image">
+                                <img src={`/api/util?img=${(data.attributes.Image.data)?encodeURIComponent(data.attributes.Image.data[0].attributes["url"]):''}`} />
+                                <ul>
+                                    <li>
+                                        <a >
+                                            <Icon.Search />
+                                        </a>
+                                    </li>
+                                    <li>
+                                    <a onClick={function (evt) {
+                                        evt.preventDefault();
+                                        console.log(evt);
+                                        navigator.clipboard.writeText(evt.target.baseURI+`${data.id}`).then(() => {
+                                         alert("Link produk berhasil di copy. Silakan share ke teman - teman anda.");
+                                        }, () => {
+                                            alert("Gagal men-copy link. Silakan mencopy link produk secara manual");
+                                        });
+                                    }}>
+                                        <Icon.Link/>
+                                    </a>
+                                </li>
+                                </ul>
+                            </div>
+        
+                            <div className="products-content">
+                                <h3>
+                                    <Link href={"/yamaha/Product/Ygp_Detail?s=" + data.id}>
+                                        <a>{data.name}</a>
+                                    </Link>
+                                </h3>
+                                <span>
+                                    <NumberFormat value={data.price1 - data.price1 * data.discount} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
+                                </span><br />
+                                <span></span>
+                                <span>
+                                    <div className="products-details">
+                                        <div className="price">
+                                            <NumberFormat
+                                                style={{ color: "#EB1928" }}
+                                                displayType={'text'}
+                                                prefix={'%'}
+                                                decimalScale={2}
+                                                value={data.discount * 100}
+                                            />
+                                            <NumberFormat value={data.price1} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
+                                        </div>
+                                    </div>
+                                </span>
+                                <ul>
+                                    <li><i className="flaticon-star-1"></i></li>
+                                    <li><i className="flaticon-star-1"></i></li>
+                                    <li><i className="flaticon-star-1"></i></li>
+                                    <li><i className="flaticon-star-1"></i></li>
+                                    <li><i className="flaticon-star-1"></i></li>
+                                </ul>
+        
+                                <Link href={"/yamaha/Product/Ygp_Detail?s=" + data.id}>
+                                    <a className="add-to-cart-btn">Detail Product</a>
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                );
+            });
+        }
+        else return(
+        <div className="pt-80 pb-50 justify-content-center">
+            <center><h5>Belum ada produk untuk saat ini. Tunggu berita selanjutnya dari kami ya!</h5></center>
+        </div>);
+    }
+
+    return (
+        <div className="shop-area ptb-80">
+            <div className="container">
+                <div className="woocommerce-topbar">
+                    <div className="row align-items-center">
+
+                        {/* <div className="col-lg-5 col-md-5 col-sm-5">
+                            <Select
+                                value={(selected) ? ygp.filter((i) => i.id == selected) : null}
+                                getOptionLabel={option => `${option.name}`}
+                                getOptionValue={option => option.id}
+                                options={ygp}
+                                isSearchable
+                                isMulti
+                                isClearable
+                                instanceId="name"
+                                placeholder="Cari Produk"
+                                onChange={values => handleName(values)}
+                            />
+                        </div> */}
+                    </div>
+                </div>
+
+                <div width="fullwidth">
+                    <div className="products-details-tabs">
+                        <Tabs>
+                            <TabList>
+                                {category.map((i)=>{
+                                    return (<Tab key={i}>{i.replace(/\_/g,' ')}</Tab>);
+                                })}
+                            </TabList>
+                            {category.map((i)=>{
+                                return (
+                                    <TabPanel>
+                                        <div className="col-lg-2 col-md-2 col-sm-2">
+                                            <div className="woocommerce-result-count">
+                                                <p>Showing {(((selected==i)?page:1)-1)*8+1}-{(((selected==i)?page:1)*8>products[i].meta.pagination.total)?products[i].meta.pagination.total:((selected==i)?page:1)*8} of {products[i].meta.pagination.total} results</p>
+                                            </div>
+                                        </div>
+                                        <div className="row justify-content-md">
+                                            {productGrid(products[i].data)}
+                                            {pagination(i.toLowerCase(),(products[i].meta)?products[i].meta.pagination.pageCount:1)}
+                                        </div>
+                                    </TabPanel>
+                                );
+                            })}    
+                            {/* <TabPanel>
+                                <div className="row justify-content-md">
+                                    {YGP}
+                                    {pagination('ygp',ygp.meta.pagination.pageCount)}
+                                </div>
+                            </TabPanel>
+                            <TabPanel>
+                                <div className="row justify-content-md">
+                                    {Yamalube}
+                                    {pagination('lube',yamalube.meta.pagination.pageCount)}
+                                </div>
+                            </TabPanel>
+                            <TabPanel>
+                                <div className="row justify-content-md">
+                                    {Helmet}
+                                    {pagination('helmet',helmet.meta.pagination.pageCount)}
+                                </div>
+                            </TabPanel>
+                            <TabPanel>
+                                <div className="row justify-content-md">
+                                    {Apparel}
+                                    {pagination('apparel',apparel.meta.pagination.pageCount)}
+                                </div>
+                            </TabPanel>
+                            <TabPanel>
+                                <div className="row justify-content-md">
+                                    {Accessories}
+                                    {pagination('accessories',accessories.meta.pagination.pageCount)}
+                                </div>
+                            </TabPanel> */}
+                        </Tabs>
+                    </div>
+                </div>
+
+                {/* <div className="row justify-content-md-center">
+                    
+                    {Product}
+
+                    Pagination
+                    <div className="col-lg-12 col-md-12 col-sm-12">
+                        <div className="pagination-area">
+                            <nav aria-label="Page navigation">
+                                <ul className="pagination justify-content-center">
+                                    <li className="page-item"><a className="page-link" >Prev</a></li>
+
+                                    <li className="page-item active"><a className="page-link" >1</a></li>
+
+                                    <li className="page-item"><a className="page-link" >2</a></li>
+
+                                    <li className="page-item"><a className="page-link" >3</a></li>
+
+                                    <li className="page-item"><a className="page-link" >Next</a></li>
+                                </ul>
+                            </nav>
+                        </div>
+                    </div>
+                </div> */}
+            </div>
+        </div>
+    )
+}
+
+export default ProductCard;

components/Company/Product/Yamalube_Detail.js

@@ -0,0 +1,345 @@
+import React from 'react'
+
+//component
+import PageBanner from '@/components/Common/PageBanner';
+import * as Icon from 'react-feather'
+import { useSelector, useDispatch } from 'react-redux'
+import { useRouter } from 'next/router'
+import { useToasts } from 'react-toast-notifications'
+
+//addon library
+import { resetIdCounter, Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+resetIdCounter();
+
+import dynamic from 'next/dynamic'
+const OwlCarousel = dynamic(import('react-owl-carousel3'))
+
+//library yarn
+import NumberFormat from 'react-number-format';
+import ReactHtmlParser from "react-html-parser";
+
+//sweet alert
+import swal from 'sweetalert';
+
+const options = {
+    loop: true,
+    nav: true,
+    dots: false,
+    autoplay: true,
+    items: 1,
+    smartSpeed: 1000,
+    autoplayTimeout: 5000,
+    navText: [
+        "<i className='bx bx-chevron-left'></i>",
+        "<i className='bx bx-chevron-right'></i>"
+    ],
+};
+
+const ProductDetails = function ({ detailyamalube, backend, user, ...props }) {
+
+    const [formValue, setFormValue] = React.useState({
+        product_img: "",
+        product_name: "",
+        product_color: "",
+        product_price: "",
+    });
+
+    const router = useRouter();
+
+    const MotorDetail = detailyamalube.map((data) => {
+
+        return (
+            <div>
+                <PageBanner pageTitle={data.name} />
+                <div className="shop-details-area ptb-80">
+                    <div className="container">
+                        <div className="row align-items-center">
+                            <div className="col-lg-5">
+                                <OwlCarousel
+                                    className="products-details-image products-details-image-slides owl-carousel owl-theme"
+                                    {...options}
+                                >
+                                    <img src={`${backend}${data.img["url"]}`} />
+                                </OwlCarousel>
+                            </div>
+
+                            <div className="col-lg-7">
+                                <div className="products-details">
+                                    <h3>{data.name}</h3>
+                                    <h3>
+                                        <NumberFormat value={data.price - data.price * data.discount} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
+                                    </h3>
+                                    <h5>
+                                        <div className="price" style={{marginTop:"20px"}}>
+                                            <NumberFormat
+                                                style={{ color: "#EB1928" }}
+                                                displayType={'text'}
+                                                prefix={'%'}
+                                                decimalScale={2}
+                                                value={data.discount * 100}
+                                            />
+                                            <NumberFormat value={data.price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
+                                        </div>
+                                    </h5>
+
+                                    <ul className="rating">
+                                        <li><i className="flaticon-star-1"></i></li>
+                                        <li><i className="flaticon-star-1"></i></li>
+                                        <li><i className="flaticon-star-1"></i></li>
+                                        <li><i className="flaticon-star-1"></i></li>
+                                        <li><i className="flaticon-star-1"></i></li>
+                                    </ul>
+
+                                    <div className="availability">
+                                        Availability: <span>{data.stock}</span>
+                                    </div>
+                                    <form
+                                        onSubmit={async (e) => {
+                                            e.preventDefault();
+                                            var newformValue = {
+                                                ...formValue,
+                                                product_name: detailproduct[0].name,
+                                            }
+                                            setFormValue(newformValue)
+                                            // console.log(JSON.stringify(newformValue));
+                                            const response = await fetch(
+                                                "/api/transaction/AddToCart",
+                                                {
+                                                    method: "POST",
+                                                    headers: {
+                                                        'Content-Type': 'application/json'
+                                                    },
+                                                    body: JSON.stringify(newformValue),
+                                                }
+                                            );
+                                            if (response.ok) {
+                                                var res = await response.json();
+                                                // console.log("cek response :", res);
+                                                if (res["STATUS"] === 1) {
+                                                    res["DATA"]["cart"];
+                                                    swal("Produk Berhasil Ditambah ke Keranjang", "Silahkan Cek Keranjang Belanja Anda", "success");
+                                                    router.push("/yamaha/Shop/Cart");
+                                                }
+                                                else {
+                                                    swal("Produk Gagal Ditambah ke Keranjang", "Silahkan Coba Lagi", "error");
+                                                }
+                                            } else {
+                                                swal("Transaksi Gagal", "Silahkan Coba Lagi", "error");
+                                            }
+                                            return false;
+                                        }}
+
+                                    >
+                                        {/* <label>Product OTR <span className="required">*</span></label>
+
+                                        <div className="select-box" placeholder="Pilih Harga OTR">
+                                            <select className="form-select"
+                                                name="product_otr"
+                                                onInput={(e) => {
+                                                    setFormValue({
+                                                        ...formValue,
+                                                        product_price: e.target.value.toString(),
+                                                    })
+                                                }}
+                                            >
+                                                <option value="0">- Pilih Product OTR -</option>
+                                                {detailproduct.map((option) => (
+                                                    <option value={option.product_otrs[0].price}>{option.product_otrs[0].name}</option>
+                                                ))}
+                                                {detailproduct.map((option) => (
+                                                    <option value={option.product_otrs[1].price}>{option.product_otrs[1].name}</option>
+                                                ))}
+                                                {detailproduct.map((option) => (
+                                                    <option value={option.product_otrs[2].price}>{option.product_otrs[2].name}</option>
+                                                ))}
+                                            </select>
+                                        </div>
+                                        <br />
+
+                                        <label>Product Color <span className="required">*</span></label>
+                                        <div className="select-box" placeholder="Pilih Harga OTR">
+                                            <select className="form-select"
+                                                name="product_color"
+                                                onInput={(e) => {
+                                                    setFormValue({
+                                                        ...formValue,
+                                                        product_color: e.target.value.toString()
+                                                    })
+                                                }}
+                                            >
+                                                <option value="0">- Pilih Product Color -</option>
+                                                {detailproduct.map((option) => (
+                                                    <option value={option.product_image_colors[0].name}>{option.product_image_colors[0].name}</option>
+                                                ))}
+                                                {detailproduct.map((option) => (
+                                                    <option value={option.product_image_colors[1].name}>{option.product_image_colors[1].name}</option>
+                                                ))}
+                                                {detailproduct.map((option) => (
+                                                    <option value={option.product_image_colors[2].name}>{option.product_image_colors[2].name}</option>
+                                                ))}
+                                            </select>
+                                        </div>
+                                        <br /> */}
+
+                                        {/* <button type="submit">Add to Cart</button> */}
+
+                                        <a  className="add-to-wishlist-btn" title="Add to Wishlist">
+                                            <Icon.Heart />
+                                        </a>
+                                    </form>
+
+                                    <div className="custom-payment-options">
+                                        <span>Metode Pembayaran : </span>
+
+                                        <div className="payment-methods">
+                                            <img src="/images/payment-image/Mastercard.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/Visa.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/BNI.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/BCA.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/Mandiri.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/BSI.svg" width="50px" alt="image" />
+                                            <img src="/images/payment-image/Indomaret.svg" width="50px" alt="image" />
+                                        </div>
+                                    </div>
+
+                                    <div className="products-share-social">
+                                        <span>Share:</span>
+
+                                        <ul>
+                                            <li>
+                                                <a  className="facebook" target="_blank">
+                                                    <Icon.Facebook />
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a  className="twitter" target="_blank">
+                                                    <Icon.Twitter />
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a  className="linkedin" target="_blank">
+                                                    <Icon.Linkedin />
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a  className="instagram" target="_blank">
+                                                    <Icon.Instagram />
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="col-lg-12 col-md-12">
+                                <div className="products-details-tabs">
+                                    <Tabs>
+                                        <TabList>
+                                            <Tab>Deskripsi</Tab>
+                                            <Tab>Info Penting</Tab>
+                                            {/* <Tab>Review</Tab> */}
+                                        </TabList>
+
+                                        <TabPanel>
+                                            <div className="products-description" align="left">
+                                                <p>{ReactHtmlParser(data.description)}</p>
+                                            </div>
+                                        </TabPanel>
+
+                                        <TabPanel>
+                                            <div className="products-description" align="left">
+                                                <p>
+                                                    <p><b>Informasi mengenai prosedur pengiriman, pembelian dan dokumen</b></p>
+                                                    <ul>
+                                                        <li>Kota Palembang, Kayu Agung, Prabumulih, Pangkalan Balai, Betung : 2-3 hari kerja*</li>
+                                                        <li>Untuk daerah Sungsang/daerah lain yang menggunakan kapal motor, maka motor diantar sampai di dermaga sesuai dengan jadwal yang diinformasikan</li>
+                                                        <li>Sekayu, Babat Toman, Pendopo, Baturaja, Martapura, Muara Dua, Lahat, Tanjung Enim, Tugu Mulyo, Belitang : 4-5 hari kerja*</li>
+                                                        <li>Lubuk Linggau, Curup, Pagar Alam : 6-7 hari kerja*</li>
+                                                    </ul>
+
+                                                    <p><b>Harga</b></p>
+                                                    <ul>
+                                                        <li>Harga OTR sudah termasuk biaya pengiriman dan BBN, kecuali tambahan pengenaan pajak progresif kepemilikan kendaraan bermotor (sesuai dengan peraturan yang telah ditetapkan oleh pemerintah)</li>
+                                                        <li>Harga OTR diatas berlaku untuk KTP domisili PALEMBANG, OGAN ILIR, dan BANYUASIN, diluar wilayah tersebut harap menghubungi kami untuk konfirmasi harga.</li>
+                                                        <li>Harga OTR sewaktu-waktu dapat berubah.</li>
+                                                        <li>Proses pemesanan sepeda motor tidak dapat dibatalkan dan warna yang sudah dipesan tidak dapat diubah.</li>
+                                                        <li>Proses pemesanan yang terkait waktu pengiriman produk dan kelengkapan dokumen yang dibutuhkan untuk pembuatan STNK dan BPKB akan  diinformasikan oleh pihak Dealer.</li>
+                                                        <li>Proses pengiriman sepeda motor akan dilakukan setelah pelunasan transaksi dan dokumen yang dibutuhkan telah lengkap.</li>
+                                                    </ul>
+
+                                                    <p><b>Dokumen</b></p>
+                                                    <ul>
+                                                        <li>Proses pembuatan STNK setelah KTP diterima oleh pihak dealer adalah 19-25 hari kerja*.</li>
+                                                        <li>Proses pembuatan BPKB adalah 3-4 bulan.</li>
+                                                        <li>STNK dan BPKB wajib diambil sendiri oleh pihak yang bersangkutan sesuai dengan identitas yang tertera STNK di dealer yang ditunjuk.</li>
+                                                        <li>Untuk proses pembuatan STNK dan BPKB sepenuhnya menjadi tanggung jawab dealer terkait.</li>
+                                                        <li>Buku servis diterima bersamaan dengan pengiriman sepeda motor.</li>
+                                                    </ul>
+
+                                                    <p><b>*tidak termasuk Sabtu dan Minggu.</b></p>
+                                                </p>
+                                            </div>
+                                        </TabPanel>
+
+                                        {/* <TabPanel>
+                                            <div className="products-reviews">
+                                                <h3>Customer Reviews</h3>
+                                                <p>There are no reviews yet.</p>
+
+                                                <form className="review-form">
+                                                    <p>Rate this item:</p>
+
+                                                    <div className="star-rating">
+                                                        <i className='bx bxs-star'></i>
+                                                        <i className='bx bxs-star'></i>
+                                                        <i className='bx bxs-star'></i>
+                                                        <i className='bx bxs-star'></i>
+                                                        <i className='bx bxs-star'></i>
+
+                                                        <p>Very good product!</p>
+                                                    </div>
+
+                                                    <div className="row">
+                                                        <div className="col-lg-12">
+                                                            <div className="form-group">
+                                                                <textarea name="review-message" id="message" cols="30" rows="4" placeholder="Write your review*" className="form-control"></textarea>
+                                                            </div>
+                                                        </div>
+
+                                                        <div className="col-lg-6 col-md-6">
+                                                            <div className="form-group">
+                                                                <input type="text" placeholder="Name*" className="form-control" />
+                                                            </div>
+                                                        </div>
+
+                                                        <div className="col-lg-6 col-md-6">
+                                                            <div className="form-group">
+                                                                <input type="email" placeholder="Email*" className="form-control" />
+                                                            </div>
+                                                        </div>
+
+                                                        <div className="col-lg-12 col-md-12">
+                                                            <button type="submit" className="btn btn-primary">Submit</button>
+                                                        </div>
+                                                    </div>
+                                                </form>
+                                            </div>
+                                        </TabPanel> */}
+                                    </Tabs>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    })
+
+    return (
+        <>
+            {MotorDetail}
+        </>
+    )
+}
+
+export default ProductDetails;

components/Company/Product/Ygp_Detail.js

@@ -0,0 +1,346 @@
+import React from 'react'
+
+//component
+import PageBanner from '@/components/Common/PageBanner';
+import * as Icon from 'react-feather'
+import { useSelector, useDispatch } from 'react-redux'
+import { useRouter } from 'next/router'
+import { useToasts } from 'react-toast-notifications'
+
+//addon library
+import { resetIdCounter, Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+resetIdCounter();
+
+import dynamic from 'next/dynamic'
+const OwlCarousel = dynamic(import('react-owl-carousel3'))
+
+//library yarn
+import NumberFormat from 'react-number-format';
+import ReactHtmlParser from "react-html-parser";
+
+//sweet alert
+import swal from 'sweetalert';
+
+const options = {
+    loop: true,
+    nav: true,
+    dots: false,
+    autoplay: true,
+    items: 1,
+    smartSpeed: 1000,
+    autoplayTimeout: 5000,
+    navText: [
+        "<i className='bx bx-chevron-left'></i>",
+        "<i className='bx bx-chevron-right'></i>"
+    ],
+};
+
+const ProductDetails = function ({ details, backend, user, ...props }) {
+    console.log(details);
+    const [formValue, setFormValue] = React.useState({
+        product_img: "",
+        product_name: "",
+        product_color: "",
+        product_price: "",
+    });
+
+    const router = useRouter();
+    return (
+        <div>
+            <PageBanner pageTitle="Product Details" />
+            <div className="shop-details-area ptb-80">
+                <div className="container">
+                    <div className="row align-items-center">
+                        <div className="col-lg-5">
+                            <OwlCarousel
+                                className="products-details-image products-details-image-slides owl-carousel owl-theme"
+                                {...options}
+                            >
+                                {
+                                    (details.Image.data)?details.Image.data.map(i=>(
+                                        <img src={`/api/util?img=${encodeURIComponent(i.attributes.url)}`} />
+                                    )):""
+                                }
+                            </OwlCarousel>
+                        </div>
+
+                        <div className="col-lg-7">
+                            <div className="products-details">
+                                <h3>{details.Name}</h3>
+                                <h3>
+                                    <NumberFormat value={details.price1 - details.price1 * details.discount} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
+                                </h3>
+                                <h5>
+                                    <div className="price" style={{marginTop:"20px"}}>
+                                        <NumberFormat
+                                            style={{ color: "#EB1928" }}
+                                            displayType={'text'}
+                                            prefix={'%'}
+                                            decimalScale={2}
+                                            value={details.discount * 100}
+                                        />
+                                        <NumberFormat value={details.price1} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
+                                    </div>
+                                </h5>
+
+                                <ul className="rating">
+                                    <li><i className="flaticon-star-1"></i></li>
+                                    <li><i className="flaticon-star-1"></i></li>
+                                    <li><i className="flaticon-star-1"></i></li>
+                                    <li><i className="flaticon-star-1"></i></li>
+                                    <li><i className="flaticon-star-1"></i></li>
+                                </ul>
+
+                                <div className="availability">
+                                    Availability: <span>{details.stock}</span>
+                                </div>
+                                <form
+                                    onSubmit={async (e) => {
+                                        e.preventDefault();
+                                        var newformValue = {
+                                            ...formValue,
+                                            product_name: detailproduct[0].name,
+                                        }
+                                        setFormValue(newformValue)
+                                        // console.log(JSON.stringify(newformValue));
+                                        const response = await fetch(
+                                            "/api/transaction/AddToCart",
+                                            {
+                                                method: "POST",
+                                                headers: {
+                                                    'Content-Type': 'application/json'
+                                                },
+                                                body: JSON.stringify(newformValue),
+                                            }
+                                        );
+                                        if (response.ok) {
+                                            var res = await response.json();
+                                            // console.log("cek response :", res);
+                                            if (res["STATUS"] === 1) {
+                                                res["DATA"]["cart"];
+                                                swal("Produk Berhasil Ditambah ke Keranjang", "Silahkan Cek Keranjang Belanja Anda", "success");
+                                                router.push("/yamaha/Shop/Cart");
+                                            }
+                                            else {
+                                                swal("Produk Gagal Ditambah ke Keranjang", "Silahkan Coba Lagi", "error");
+                                            }
+                                        } else {
+                                            swal("Transaksi Gagal", "Silahkan Coba Lagi", "error");
+                                        }
+                                        return false;
+                                    }}
+
+                                >
+                                    {/* <label>Product OTR <span className="required">*</span></label>
+
+                                    <div className="select-box" placeholder="Pilih Harga OTR">
+                                        <select className="form-select"
+                                            name="product_otr"
+                                            onInput={(e) => {
+                                                setFormValue({
+                                                    ...formValue,
+                                                    product_price: e.target.value.toString(),
+                                                })
+                                            }}
+                                        >
+                                            <option value="0">- Pilih Product OTR -</option>
+                                            {detailproduct.map((option) => (
+                                                <option value={option.product_otrs[0].price}>{option.product_otrs[0].name}</option>
+                                            ))}
+                                            {detailproduct.map((option) => (
+                                                <option value={option.product_otrs[1].price}>{option.product_otrs[1].name}</option>
+                                            ))}
+                                            {detailproduct.map((option) => (
+                                                <option value={option.product_otrs[2].price}>{option.product_otrs[2].name}</option>
+                                            ))}
+                                        </select>
+                                    </div>
+                                    <br />
+
+                                    <label>Product Color <span className="required">*</span></label>
+                                    <div className="select-box" placeholder="Pilih Harga OTR">
+                                        <select className="form-select"
+                                            name="product_color"
+                                            onInput={(e) => {
+                                                setFormValue({
+                                                    ...formValue,
+                                                    product_color: e.target.value.toString()
+                                                })
+                                            }}
+                                        >
+                                            <option value="0">- Pilih Product Color -</option>
+                                            {detailproduct.map((option) => (
+                                                <option value={option.product_image_colors[0].name}>{option.product_image_colors[0].name}</option>
+                                            ))}
+                                            {detailproduct.map((option) => (
+                                                <option value={option.product_image_colors[1].name}>{option.product_image_colors[1].name}</option>
+                                            ))}
+                                            {detailproduct.map((option) => (
+                                                <option value={option.product_image_colors[2].name}>{option.product_image_colors[2].name}</option>
+                                            ))}
+                                        </select>
+                                    </div>
+                                    <br /> */}
+
+                                    {/* <button type="submit">Add to Cart</button> */}
+
+                                    <a  className="add-to-wishlist-btn" title="Add to Wishlist">
+                                        <Icon.Heart />
+                                    </a>
+                                </form>
+
+                                <div className="custom-payment-options">
+                                    <span>Metode Pembayaran : </span>
+
+                                    <div className="payment-methods">
+                                        <img src="/images/payment-image/Mastercard.svg" width="50px" alt="image" />
+                                        <img src="/images/payment-image/Visa.svg" width="50px" alt="image" />
+                                        <img src="/images/payment-image/BNI.svg" width="50px" alt="image" />
+                                        <img src="/images/payment-image/BCA.svg" width="50px" alt="image" />
+                                        <img src="/images/payment-image/Mandiri.svg" width="50px" alt="image" />
+                                        <img src="/images/payment-image/BSI.svg" width="50px" alt="image" />
+                                        <img src="/images/payment-image/Indomaret.svg" width="50px" alt="image" />
+                                    </div>
+                                </div>
+
+                                <div className="products-share-social">
+                                    <span>Share:</span>
+
+                                    <ul>
+                                        <li>
+                                            <a  className="facebook" target="_blank">
+                                                <Icon.Facebook />
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a  className="twitter" target="_blank">
+                                                <Icon.Twitter />
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a  className="linkedin" target="_blank">
+                                                <Icon.Linkedin />
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a  className="instagram" target="_blank">
+                                                <Icon.Instagram />
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="col-lg-12 col-md-12">
+                            <div className="products-details-tabs">
+                                <Tabs>
+                                    <TabList>
+                                        <Tab>Deskripsi</Tab>
+                                        <Tab>Info Penting</Tab>
+                                        {/* <Tab>Review</Tab> */}
+                                    </TabList>
+
+                                    <TabPanel>
+                                        <div className="products-description" align="left">
+                                            <p>{ReactHtmlParser(details.description)}</p>
+                                        </div>
+                                    </TabPanel>
+
+                                    <TabPanel>
+                                        <div className="products-description" align="left">
+                                            <p>
+                                                <p><b>Informasi mengenai prosedur pengiriman, pembelian dan dokumen</b></p>
+                                                <ul>
+                                                    <li>Kota Palembang, Kayu Agung, Prabumulih, Pangkalan Balai, Betung : 2-3 hari kerja*</li>
+                                                    <li>Untuk daerah Sungsang/daerah lain yang menggunakan kapal motor, maka motor diantar sampai di dermaga sesuai dengan jadwal yang diinformasikan</li>
+                                                    <li>Sekayu, Babat Toman, Pendopo, Baturaja, Martapura, Muara Dua, Lahat, Tanjung Enim, Tugu Mulyo, Belitang : 4-5 hari kerja*</li>
+                                                    <li>Lubuk Linggau, Curup, Pagar Alam : 6-7 hari kerja*</li>
+                                                </ul>
+
+                                                <p><b>Harga</b></p>
+                                                <ul>
+                                                    <li>Harga OTR sudah termasuk biaya pengiriman dan BBN, kecuali tambahan pengenaan pajak progresif kepemilikan kendaraan bermotor (sesuai dengan peraturan yang telah ditetapkan oleh pemerintah)</li>
+                                                    <li>Harga OTR diatas berlaku untuk KTP domisili PALEMBANG, OGAN ILIR, dan BANYUASIN, diluar wilayah tersebut harap menghubungi kami untuk konfirmasi harga.</li>
+                                                    <li>Harga OTR sewaktu-waktu dapat berubah.</li>
+                                                    <li>Proses pemesanan sepeda motor tidak dapat dibatalkan dan warna yang sudah dipesan tidak dapat diubah.</li>
+                                                    <li>Proses pemesanan yang terkait waktu pengiriman produk dan kelengkapan dokumen yang dibutuhkan untuk pembuatan STNK dan BPKB akan  diinformasikan oleh pihak Dealer.</li>
+                                                    <li>Proses pengiriman sepeda motor akan dilakukan setelah pelunasan transaksi dan dokumen yang dibutuhkan telah lengkap.</li>
+                                                </ul>
+
+                                                <p><b>Dokumen</b></p>
+                                                <ul>
+                                                    <li>Proses pembuatan STNK setelah KTP diterima oleh pihak dealer adalah 19-25 hari kerja*.</li>
+                                                    <li>Proses pembuatan BPKB adalah 3-4 bulan.</li>
+                                                    <li>STNK dan BPKB wajib diambil sendiri oleh pihak yang bersangkutan sesuai dengan identitas yang tertera STNK di dealer yang ditunjuk.</li>
+                                                    <li>Untuk proses pembuatan STNK dan BPKB sepenuhnya menjadi tanggung jawab dealer terkait.</li>
+                                                    <li>Buku servis diterima bersamaan dengan pengiriman sepeda motor.</li>
+                                                </ul>
+
+                                                <p><b>*tidak termasuk Sabtu dan Minggu.</b></p>
+                                            </p>
+                                        </div>
+                                    </TabPanel>
+
+                                    {/* <TabPanel>
+                                        <div className="products-reviews">
+                                            <h3>Customer Reviews</h3>
+                                            <p>There are no reviews yet.</p>
+
+                                            <form className="review-form">
+                                                <p>Rate this item:</p>
+
+                                                <div className="star-rating">
+                                                    <i className='bx bxs-star'></i>
+                                                    <i className='bx bxs-star'></i>
+                                                    <i className='bx bxs-star'></i>
+                                                    <i className='bx bxs-star'></i>
+                                                    <i className='bx bxs-star'></i>
+
+                                                    <p>Very good product!</p>
+                                                </div>
+
+                                                <div className="row">
+                                                    <div className="col-lg-12">
+                                                        <div className="form-group">
+                                                            <textarea name="review-message" id="message" cols="30" rows="4" placeholder="Write your review*" className="form-control"></textarea>
+                                                        </div>
+                                                    </div>
+
+                                                    <div className="col-lg-6 col-md-6">
+                                                        <div className="form-group">
+                                                            <input type="text" placeholder="Name*" className="form-control" />
+                                                        </div>
+                                                    </div>
+
+                                                    <div className="col-lg-6 col-md-6">
+                                                        <div className="form-group">
+                                                            <input type="email" placeholder="Email*" className="form-control" />
+                                                        </div>
+                                                    </div>
+
+                                                    <div className="col-lg-12 col-md-12">
+                                                        <button type="submit" className="btn btn-primary">Submit</button>
+                                                    </div>
+                                                </div>
+                                            </form>
+                                        </div>
+                                    </TabPanel> */}
+                                </Tabs>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+    
+
+    return (
+        <>
+            {MotorDetail}
+        </>
+    )
+}
+
+export default ProductDetails;

components/Company/Shop/Cart.js

@@ -0,0 +1,244 @@
+import React from 'react'
+import Link from 'next/link'
+import * as Icon from 'react-feather'
+import { useSelector, useDispatch } from 'react-redux'
+import { useToasts } from 'react-toast-notifications'
+import { useRouter } from 'next/router'
+import QtyForm from './QtyForm'
+
+//library yarn
+import NumberFormat from 'react-number-format';
+
+//sweet alert
+import swal from 'sweetalert';
+
+const CartContent = function ({ backend, cart_product, ...props }) {
+    const router = useRouter()
+    const { addToast } = useToasts()
+    const dispatch = useDispatch()
+    const cart = useSelector((state) => state.cart)
+    const total = useSelector((state) => state.total)
+    // console.log(cart)
+
+    const [qty, setQty] = React.useState(1)
+
+    const increment = () => {
+        setQty(qty + 1)
+    }
+
+    const decrement = () => {
+        setQty(qty - 1)
+    }
+
+    const removeItem = () => {
+        dispatch({
+            type: 'REMOVE_ITEM',
+            id: pId
+        })
+        addToast('Cart Removed Successfully', { appearance: 'error' })
+    }
+
+    const reset = () => {
+        dispatch({
+            type: 'RESET'
+        })
+        addToast('Thanks for your order.', { appearance: 'success' })
+        router.push('/')
+    }
+
+    const [formValue, setFormValue] = React.useState({
+        transaction_id: GenerateID(),
+        product_img: "",
+        product_name: "",
+        product_color: "",
+        product_quantity: "",
+        product_total: "",
+    });
+
+    function GenerateID() {
+        var dt = new Date().getTime();
+        var uuid = 'Trx-Ord-yyyyyyyy'.replace(/[y]/g, function (c) {
+            var r = (dt + Math.random() * 16) % 16 | 0;
+            dt = Math.floor(dt / 16);
+            return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+        });
+        return uuid;
+    }
+
+    // console.log(GenerateID());
+
+    return (
+        <form
+            onSubmit={async (e) => {
+                e.preventDefault();
+                var newformValue = {
+                    ...formValue,
+                    product_name: cart_product[0].product_name,
+                    product_color: cart_product[0].product_color,
+                }
+                setFormValue(newformValue)
+                // console.log(JSON.stringify(newformValue));
+                const response = await fetch(
+                    "/api/transaction/AddToCheckout",
+                    {
+                        method: "POST",
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify(newformValue),
+                    }
+                );
+                if (response.ok) {
+                    var res = await response.json();
+                    // console.log("cek response :", res);
+                    if (res["STATUS"] === 1) {
+                        res["DATA"]["checkout"];
+                        swal("Produk Berhasil Ditambah ke Keranjang", "Silahkan Cek Keranjang Belanja Anda", "success");
+                        router.push("/yamaha/Shop/Checkout");
+                    }
+                    else {
+                        swal("Produk Gagal di Checkout", "Silahkan Coba Lagi", "error");
+                    }
+                } else {
+                    swal("Transaksi Gagal", "Silahkan Coba Lagi", "error");
+                }
+                return false;
+            }}
+        >
+            <div className="cart-table table-responsive">
+                <table className="table table-bordered">
+                    <thead>
+                        <tr>
+                            <th scope="col">Product</th>
+                            <th scope="col">Nama Product</th>
+                            <th scope="col">Warna Product</th>
+                            <th scope="col">Harga Product</th>
+                            <th scope="col">Jumlah</th>
+                            <th scope="col">Total</th>
+                        </tr>
+                    </thead>
+
+                    <tbody>
+                        {cart_product.length ? cart_product.map(data => (
+                            <tr key={data.id}>
+                                <td className="product-thumbnail">
+                                    <Link href="/product-details">
+                                        <a>
+                                            {/* <img src={`${backend}${data.product_img["url"]}`} alt="item" /> */}
+                                        </a>
+                                    </Link>
+                                </td>
+
+                                <td className="product-name">
+                                    <Link href="/product-details">
+                                        <a>{data.product_name}</a>
+                                    </Link>
+                                </td>
+
+                                <td className="product-name">
+                                    <Link href="/product-details">
+                                        <a>{data.product_color}</a>
+                                    </Link>
+                                </td>
+
+                                <td className="product-price">
+                                    <span className="unit-amount"><NumberFormat value={data.product_price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></span>
+                                </td>
+
+                                <td className="product-quantity">
+                                    <div className="input-counter">
+                                        <span className="minus-btn" onClick={decrement}>
+                                            <Icon.Minus />
+                                        </span>
+
+                                        <input
+                                            type="text"
+                                            value={qty}
+                                            onChange={e => e}
+                                            name="product_quantity"
+                                            onInput={(e) => {
+                                                setFormValue({
+                                                    ...formValue,
+                                                    product_quantity: e.target.value.toString(),
+                                                })
+                                            }}
+                                        />
+
+                                        <span className="plus-btn" onClick={increment}>
+                                            <Icon.Plus />
+                                        </span>
+                                    </div>
+                                </td>
+
+                                {/* <td className="product-subtotal">
+                                    <span className="subtotal-amount"><NumberFormat value={(data.quantity * data.product_price).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} /></span>
+
+                                    <a  className="remove" onClick={() => {removeItem(data.id)}}>
+                                        <Icon.Trash2 />
+                                    </a>
+                                </td> */}
+                                <td className="product-subtotal">
+                                    <span className="subtotal-amount">
+                                        <NumberFormat
+                                            name="product_total"
+                                            value={(qty * data.product_price).toFixed(2)}
+                                            displayType={'text'} thousandSeparator={true}
+                                            prefix={'Rp.'}
+                                            onInput={(e) => {
+                                                setFormValue({
+                                                    ...formValue,
+                                                    product_total: e.target.value.toString(),
+                                                })
+                                                // console.log("isi target value : ", e.target.value);
+                                            }}
+                                        />
+                                    </span>
+
+                                    <a  className="remove" onClick={() => { removeItem(data) }}>
+                                        <Icon.Trash2 />
+                                    </a>
+                                </td>
+                            </tr>
+                        )) : (
+                            <tr>
+                                <td colSpan="5" className="text-center">Tidak Ada Product di Keranjang</td>
+                            </tr>
+                        )}
+
+                    </tbody>
+                </table>
+            </div>
+
+            <div className="cart-buttons">
+                <div className="row align-items-center">
+                    <div className="col-lg-7 col-md-7 col-sm-7">
+                        <div className="continue-shopping-box">
+                            <a href="/yamaha/Product/Motor" className="btn btn-light" style={{ color: 'white' }}>Continue Shopping</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="cart-totals">
+                <h3>Cart Totals</h3>
+
+                <ul>
+                    <li>Subtotal <span>${total.toFixed(2)}</span></li>
+                    <li>Total <span><b>${(total + 10).toFixed(2)}</b></span></li>
+                </ul>
+
+                {/* <Link href="/yamaha/Shop/Checkout">
+                    <a onClick={e => {
+                        e.preventDefault();
+                        reset()
+                    }} className="btn btn-primary">Proceed to Checkout</a>
+                    <button type="submit" className="btn btn-primary">Proceed to Checkout</button>
+                </Link> */}
+
+                <button type="submit" className="btn btn-primary">Proceed to Checkout</button>
+            </div>
+        </form>
+    )
+}
+
+export default CartContent

components/Company/Shop/Checkout.js

@@ -0,0 +1,489 @@
+import React from 'react';
+import * as Icon from 'react-feather';
+
+import {
+    Accordion,
+    AccordionItem,
+    AccordionItemHeading,
+    AccordionItemPanel,
+    AccordionItemButton
+} from 'react-accessible-accordion';
+
+//library yarn
+import NumberFormat from 'react-number-format';
+
+//sweet alert
+import swal from 'sweetalert';
+
+const CheckoutContent = function ({ backend, checkout_product, user, provinces, ...props }) {
+    const [formValue, setFormValue] = React.useState({
+        order_id: "",
+        product_name: "",
+        product_color: "",
+        product_quantity: "",
+        product_price: "",
+        product_courier: "JNE",
+        cust_name: "",
+        cust_telp: "",
+        cust_email: "",
+        cust_postCode: "",
+        cust_address: "",
+        cust_village: "",
+        cust_district: "",
+        cust_city: "",
+        cust_province: "",
+        note: "",
+    });
+
+    return (
+        <>
+            <div className="checkout-area ptb-80">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-lg-12 col-md-12">
+                            <div className="user-actions">
+                                <Icon.Edit />
+                                <span>Returning customer? <a >Click here to login</a></span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <form
+                        onSubmit={async (e) => {
+                            e.preventDefault();
+                            var newformValue = {
+                                ...formValue,
+                                order_id: checkout_product[0].transaction_id,
+                                product_name: checkout_product[0].product_name,
+                                product_color: checkout_product[0].product_color,
+                                product_quantity: checkout_product[0].product_quantity,
+                                product_price: checkout_product[0].product_total,
+                            }
+                            setFormValue(newformValue)
+                            // console.log(JSON.stringify(newformValue));
+                            const response = await fetch(
+                                "/api/transaction/create",
+                                {
+                                    method: "POST",
+                                    headers: {
+                                        'Content-Type': 'application/json'
+                                    },
+                                    body: JSON.stringify(newformValue),
+                                }
+                            );
+                            if (response.ok) {
+                                var res = await response.json();
+                                // console.log("cek response :", res);
+                                if (res["STATUS"] === 1) {
+                                    res["DATA"]["transaction"];
+                                    swal("Produk Berhasil Ditambah ke Keranjang", "Silahkan Cek Keranjang Belanja Anda", "success");
+                                    // router.push("/yamaha/Shop/Cart");
+                                }
+                                else {
+                                    swal("Produk Gagal Ditambah ke Keranjang", "Silahkan Coba Lagi", "error");
+                                }
+                            } else {
+                                swal("Transaksi Gagal", "Silahkan Coba Lagi", "error");
+                            }
+                            return false;
+                        }}
+                    >
+                        <div className="row">
+                            <div className="col-lg-6 col-md-12">
+                                <div className="billing-details">
+                                    <h3 className="title">Alamat Pengiriman</h3>
+
+                                    <div className="row">
+                                        <div className="col-lg-6 col-md-6">
+                                            <div className="form-group">
+                                                <label>Nama Lengkap <span className="required">*</span></label>
+                                                <input 
+                                                    name="cust_name" 
+                                                    type="text" 
+                                                    className="form-control"
+                                                    onInput={(e) => {
+                                                        setFormValue({
+                                                            ...formValue,
+                                                            cust_name: e.target.value.toString(),
+                                                        })
+                                                    }}
+                                                />
+                                            </div>
+                                        </div>
+
+                                        <div className="col-lg-6 col-md-6">
+                                            <div className="form-group">
+                                                <label>Nomer Telpon <span className="required">*</span></label>
+                                                <input 
+                                                    name="cust_telp" 
+                                                    type="text" 
+                                                    className="form-control" 
+                                                    onInput={(e) => {
+                                                        setFormValue({
+                                                            ...formValue,
+                                                            cust_telp: e.target.value.toString(),
+                                                        })
+                                                    }}
+                                                />
+                                            </div>
+                                        </div>
+
+                                        <div className="col-lg-6 col-md-6">
+                                            <div className="form-group">
+                                                <label>Email <span className="required">*</span></label>
+                                                <input 
+                                                    name="cust_email" 
+                                                    type="email" 
+                                                    className="form-control" 
+                                                    onInput={(e) => {
+                                                        setFormValue({
+                                                            ...formValue,
+                                                            cust_email: e.target.value.toString(),
+                                                        })
+                                                    }}
+                                                />
+                                            </div>
+                                        </div>
+
+                                        <div className="col-lg-6 col-md-6">
+                                            <div className="form-group">
+                                                <label>Kode Pos <span className="required">*</span></label>
+                                                <input 
+                                                    name="cust_postCode" 
+                                                    type="text" 
+                                                    className="form-control" 
+                                                    onInput={(e) => {
+                                                        setFormValue({
+                                                            ...formValue,
+                                                            cust_postCode: e.target.value.toString(),
+                                                        })
+                                                    }}
+                                                />
+                                            </div>
+                                        </div>
+
+                                        <div className="col-lg-12 col-md-12">
+                                            <div className="form-group">
+                                                <label>Alamat Lengkap <span className="required">*</span></label>
+                                                <textarea 
+                                                    name="cust_address" 
+                                                    cols="30" rows="4" 
+                                                    className="form-control"
+                                                    onInput={(e) => {
+                                                        setFormValue({
+                                                            ...formValue,
+                                                            cust_address: e.target.value.toString(),
+                                                        })
+                                                    }}
+                                                ></textarea>
+                                            </div>
+                                        </div>
+
+                                        <div className="col-lg-6 col-md-6">
+                                            <div className="form-group">
+                                                <label>Kelurahan / Desa <span className="required">*</span></label>
+                                                <input 
+                                                    name="cust_village" 
+                                                    type="text" 
+                                                    className="form-control" 
+                                                    onInput={(e) => {
+                                                        setFormValue({
+                                                            ...formValue,
+                                                            cust_village: e.target.value.toString(),
+                                                        })
+                                                    }}    
+                                                />
+                                            </div>
+                                        </div>
+
+                                        <div className="col-lg-6 col-md-6">
+                                            <div className="form-group">
+                                                <label>Kecamatan <span className="required">*</span></label>
+                                                <input 
+                                                    name="cust_district" 
+                                                    type="text" 
+                                                    className="form-control"
+                                                    onInput={(e) => {
+                                                        setFormValue({
+                                                            ...formValue,
+                                                            cust_district: e.target.value.toString(),
+                                                        })
+                                                    }}
+                                                />
+                                            </div>
+                                        </div>
+
+                                        <div className="col-lg-6 col-md-6">
+                                            <div className="form-group">
+                                                <label>Kabupaten / Kota <span className="required">*</span></label>
+                                                <input 
+                                                    name="cust_city" 
+                                                    type="text" 
+                                                    className="form-control"
+                                                    onInput={(e) => {
+                                                        setFormValue({
+                                                            ...formValue,
+                                                            cust_city: e.target.value.toString(),
+                                                        })
+                                                    }}    
+                                                />
+                                            </div>
+                                        </div>
+
+                                        <div className="col-lg-6 col-md-6">
+                                            <div className="form-group">
+                                                <label>Provinsi <span className="required">*</span></label>
+                                                <input 
+                                                    name="cust_province" 
+                                                    type="text" 
+                                                    className="form-control"
+                                                    onInput={(e) => {
+                                                        setFormValue({
+                                                            ...formValue,
+                                                            cust_province: e.target.value.toString(),
+                                                        })
+                                                    }}  
+                                                />
+                                            </div>
+                                        </div>
+
+                                        {/* <div className="col-lg-6 col-md-6">
+                                            <div className="form-group">
+                                                <label>Provinsi <span className="required">*</span></label>
+
+                                                <div className="select-box">
+                                                    <select className="form-select">
+                                                        {provinces["provinsi"].map((option) => (
+                                                            <option value={option.id}>{option.nama}</option>
+                                                        ))}
+                                                    </select>
+                                                </div>
+                                            </div>
+                                        </div> */}
+
+                                        {/* <div className="col-lg-12 col-md-12">
+                                            <div className="form-check">
+                                                <input type="checkbox" className="form-check-input" id="create-an-account" />
+                                                <label className="form-check-label" htmlFor="create-an-account">Create an account?</label>
+                                            </div>
+                                        </div>
+
+                                        <div className="col-lg-12 col-md-12">
+                                            <div className="form-check">
+                                                <input type="checkbox" className="form-check-input" id="ship-different-address" />
+                                                <label className="form-check-label" htmlFor="ship-different-address">Ship to a different address?</label>
+                                            </div>
+                                        </div> */}
+
+                                        <div className="col-lg-12 col-md-12">
+                                            <div className="form-group">
+                                                <textarea 
+                                                    name="note" 
+                                                    id="notes" 
+                                                    cols="30" rows="4" 
+                                                    placeholder="Order Notes" 
+                                                    className="form-control"
+                                                    onInput={(e) => {
+                                                        setFormValue({
+                                                            ...formValue,
+                                                            note: e.target.value.toString(),
+                                                        })
+                                                    }}  
+                                                ></textarea>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="col-lg-6 col-md-6">
+                                <div className="order-details">
+                                    <h3 className="title">Metode Pengiriman</h3>
+
+                                    <div className="order-table table-responsive">
+                                        <div className="services-details">
+                                            <div className="services-details-desc">
+                                                <div className="services-details-accordion">
+                                                    <Accordion>
+                                                        <AccordionItem uuid="a">
+                                                            <AccordionItemHeading>
+                                                                <AccordionItemButton>
+                                                                    <span> JNE </span><br />
+                                                                    <p style={{ marginLeft: "25px" }}>
+                                                                        Akan diterima pada tanggal 13 - 16 Nov <br />
+                                                                    </p>
+                                                                </AccordionItemButton>
+                                                            </AccordionItemHeading>
+                                                            <AccordionItemPanel>
+                                                                <p>Pilih Waktu Pengiriman</p>
+                                                                <input type="radio" id="kantor" name="radio-group" defaultChecked />
+                                                                <span htmlFor="kantor"> Pengiriman Setiap Saat </span><br />
+                                                                <span htmlFor="kantor" style={{ marginLeft: "17px" }}> Disarankan untuk alamat rumah </span><br /><br />
+                                                                <input type="radio" id="kantor" name="radio-group" defaultChecked />
+                                                                <span htmlFor="kantor"> Pengiriman Pada Jam Kantor </span><br />
+                                                                <span htmlFor="kantor" style={{ marginLeft: "17px" }}> Disarankan untuk alamat rumah </span><br /><br />
+                                                            </AccordionItemPanel>
+                                                        </AccordionItem>
+
+                                                        <AccordionItem uuid="b">
+                                                            <AccordionItemHeading>
+                                                                <AccordionItemButton>
+                                                                    <span> Kargo - JNE Trucking (JTR) </span><br />
+                                                                    <p style={{ marginLeft: "25px" }}>
+                                                                        Akan diterima pada tanggal 14 - 17 Nov <br />
+                                                                    </p>
+                                                                </AccordionItemButton>
+                                                            </AccordionItemHeading>
+                                                            <AccordionItemPanel>
+                                                                <p>Pilih Waktu Pengiriman</p>
+                                                                <input type="radio" id="kantor" name="radio-group" defaultChecked />
+                                                                <span htmlFor="kantor"> Pengiriman Setiap Saat </span><br />
+                                                                <span htmlFor="kantor" style={{ marginLeft: "17px" }}> Disarankan untuk alamat rumah </span><br /><br />
+                                                                <input type="radio" id="kantor" name="radio-group" defaultChecked />
+                                                                <span htmlFor="kantor"> Pengiriman Pada Jam Kantor </span><br />
+                                                                <span htmlFor="kantor" style={{ marginLeft: "17px" }}> Disarankan untuk alamat rumah </span><br /><br />
+                                                            </AccordionItemPanel>
+                                                        </AccordionItem>
+
+                                                        <AccordionItem uuid="c">
+                                                            <AccordionItemHeading>
+                                                                <AccordionItemButton>
+                                                                    <span> Next Day </span><br />
+                                                                    <p style={{ marginLeft: "25px" }}>
+                                                                        Akan diterima pada tanggal 13 - 14 Nov <br />                                                                    </p>
+                                                                </AccordionItemButton>
+                                                            </AccordionItemHeading>
+                                                            <AccordionItemPanel>
+                                                                <p>Pilih Waktu Pengiriman</p>
+                                                                <input type="radio" id="kantor" name="radio-group" defaultChecked />
+                                                                <span htmlFor="kantor"> Pengiriman Setiap Saat </span><br />
+                                                                <span htmlFor="kantor" style={{ marginLeft: "17px" }}> Disarankan untuk alamat rumah </span><br /><br />
+                                                                <input type="radio" id="kantor" name="radio-group" defaultChecked />
+                                                                <span htmlFor="kantor"> Pengiriman Pada Jam Kantor </span><br />
+                                                                <span htmlFor="kantor" style={{ marginLeft: "17px" }}> Disarankan untuk alamat rumah </span><br /><br />
+                                                            </AccordionItemPanel>
+                                                        </AccordionItem>
+                                                    </Accordion>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <br />
+                                <div className="order-details">
+                                    <h3 className="title">Pesanan Anda</h3>
+
+                                    <div className="order-table table-responsive">
+                                        <table className="table table-bordered">
+                                            <thead align="center">
+                                                <tr>
+                                                    <th scope="col">Nama Produk</th>
+                                                    <th scope="col">Jumlah</th>
+                                                    <th scope="col">Total</th>
+                                                </tr>
+                                            </thead>
+
+                                            <tbody align="center">
+                                                {checkout_product.length ? checkout_product.map(data => (
+                                                    <tr key={data.id}>
+                                                        <td className="product-name">
+                                                            <a>{data.product_name}</a>
+                                                        </td>
+
+                                                        <td className="product-name">
+                                                            <a>{data.product_quantity} Unit</a>
+                                                        </td>
+
+                                                        <td className="product-total">
+                                                            <span className="subtotal-amount">
+                                                                <NumberFormat
+                                                                    name="product_total"
+                                                                    value={data.product_total}
+                                                                    displayType={'text'} thousandSeparator={true}
+                                                                    prefix={'Rp. '}
+                                                                />
+                                                            </span>
+                                                        </td>
+                                                    </tr>
+                                                )) : (
+                                                    <tr>
+                                                        <td colSpan="5" className="text-center">Tidak Ada Product di Keranjang</td>
+                                                    </tr>
+                                                )}
+
+                                            </tbody>
+                                            <tbody align="center">
+                                                <tr align="center">
+                                                    <td className="order-subtotal">
+                                                        <span>Cart Subtotal</span>
+                                                    </td>
+
+                                                    <td className="shipping-price">
+                                                        <span></span>
+                                                    </td>
+
+                                                    <td className="order-subtotal-price">
+                                                        <span className="order-subtotal-amount">10$2.00</span>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td className="order-shipping">
+                                                        <span>Shipping</span>
+                                                    </td>
+
+                                                    <td className="shipping-price">
+                                                        <span></span>
+                                                    </td>
+
+                                                    <td className="shipping-price">
+                                                        <span>$5.00</span>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td className="total-price">
+                                                        <span>Order Total</span>
+                                                    </td>
+
+                                                    <td className="shipping-price">
+                                                        <span></span>
+                                                    </td>
+
+                                                    <td className="product-subtotal">
+                                                        <span className="subtotal-amount">$215.00</span>
+                                                    </td>
+                                                </tr>
+                                            </tbody>
+                                        </table>
+                                    </div>
+
+                                    {/* <div className="payment-method">
+                                        <p>
+                                            <input type="radio" id="direct-bank-transfer" name="radio-group" defaultChecked />
+                                            <label htmlFor="direct-bank-transfer">Direct Bank Transfer</label>
+
+                                            Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order will not be shipped until the funds have cleared in our account.
+                                        </p>
+                                        <p>
+                                            <input type="radio" id="paypal" name="radio-group" />
+                                            <label htmlFor="paypal">PayPal</label>
+                                        </p>
+                                        <p>
+                                            <input type="radio" id="cash-on-delivery" name="radio-group" />
+                                            <label htmlFor="cash-on-delivery">Cash on Delivery</label>
+                                        </p>
+                                    </div> */}
+
+                                    <button type="submit" className="btn btn-primary order-btn">Lanjutkan Pembayaran</button>
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+
+        </>
+    )
+}
+
+export default CheckoutContent;

components/Company/Shop/OrderSummary.js

@@ -0,0 +1,149 @@
+import React from 'react';
+import {
+    Accordion,
+    AccordionItem,
+    AccordionItemHeading,
+    AccordionItemPanel,
+    AccordionItemButton
+} from 'react-accessible-accordion';
+ 
+const OrderSummary = () => {
+    return (
+        <>
+            <div className="faq-area ptb-80">
+                <div className="container">
+                    <div className="faq-accordion">
+                        <Accordion allowZeroExpanded preExpanded={['a']}>
+                            <AccordionItem uuid="a">
+                                <AccordionItemHeading>
+                                    <AccordionItemButton>
+                                        <span>
+                                            Nomer Pemesanan - Pesanan Sedang di Proses
+                                        </span>
+                                    </AccordionItemButton>
+                                </AccordionItemHeading>
+                                <AccordionItemPanel>
+                                    <p>
+                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. incididunt ut labore et dolore magna aliqua.
+                                    </p>
+                                </AccordionItemPanel>
+                            </AccordionItem>
+
+                            <AccordionItem uuid="b">
+                                <AccordionItemHeading>
+                                    <AccordionItemButton>
+                                        <span>
+                                            Is Smart Lock required for instant apps?
+                                        </span>
+                                    </AccordionItemButton>
+                                </AccordionItemHeading>
+                                <AccordionItemPanel>
+                                    <p>
+                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. incididunt ut labore et dolore magna aliqua.
+                                    </p>
+                                </AccordionItemPanel>
+                            </AccordionItem>
+
+                            <AccordionItem uuid="c">
+                                <AccordionItemHeading>
+                                    <AccordionItemButton>
+                                        <span>
+                                            Can I have multiple activities in a single feature?
+                                        </span>
+                                    </AccordionItemButton>
+                                </AccordionItemHeading>
+                                <AccordionItemPanel>
+                                    <p>
+                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. incididunt ut labore et dolore magna aliqua.
+                                    </p>
+                                </AccordionItemPanel>
+                            </AccordionItem>
+                        
+                            <AccordionItem uuid="d">
+                                <AccordionItemHeading>
+                                    <AccordionItemButton>
+                                        <span>
+                                            Can I share resources between features?
+                                        </span>
+                                    </AccordionItemButton>
+                                </AccordionItemHeading>
+                                <AccordionItemPanel>
+                                    <p>
+                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. incididunt ut labore et dolore magna aliqua.
+                                    </p>
+                                </AccordionItemPanel>
+                            </AccordionItem>
+
+                            <AccordionItem uuid="e">
+                                <AccordionItemHeading>
+                                    <AccordionItemButton>
+                                        <span>
+                                            Is multidex supported for instant apps?
+                                        </span>
+                                    </AccordionItemButton>
+                                </AccordionItemHeading>
+                                <AccordionItemPanel>
+                                    <p>
+                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. incididunt ut labore et dolore magna aliqua.
+                                    </p>
+                                </AccordionItemPanel>
+                            </AccordionItem>
+
+                            <AccordionItem uuid="f">
+                                <AccordionItemHeading>
+                                    <AccordionItemButton>
+                                        <span>
+                                            Can I share resources between features?
+                                        </span>
+                                    </AccordionItemButton>
+                                </AccordionItemHeading>
+                                <AccordionItemPanel>
+                                    <p>
+                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. incididunt ut labore et dolore magna aliqua.
+                                    </p>
+                                </AccordionItemPanel>
+                            </AccordionItem>
+                        </Accordion>
+                    </div>
+
+                    <div className="faq-contact">
+                        <h3>Ask Your Question</h3>
+                        <form>
+                            <div className="row">
+                                <div className="col-lg-6 col-md-6">
+                                    <div className="form-group">
+                                        <input type="text" placeholder="Name" className="form-control" />
+                                    </div>
+                                </div>
+                                
+                                <div className="col-lg-6 col-md-6">
+                                    <div className="form-group">
+                                        <input type="email" placeholder="Email" className="form-control" />
+                                    </div>
+                                </div>
+                                
+                                <div className="col-lg-12 col-md-12">
+                                    <div className="form-group">
+                                        <input type="text" placeholder="Subject" className="form-control" />
+                                    </div>
+                                </div>
+                                
+                                <div className="col-lg-12 col-md-12">
+                                    <div className="form-group">
+                                        <textarea name="message" cols="30" rows="6" placeholder="Message" className="form-control"></textarea>
+                                    </div>
+                                </div>
+                                
+                                <div className="col-lg-12 col-md-12">
+                                    <button className="btn btn-primary" type="submit">Submit Now!</button>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default OrderSummary;

components/Company/Shop/QtyForm.js

@@ -0,0 +1,53 @@
+import React from 'react'
+import { useDispatch } from 'react-redux'
+import * as Icon from 'react-feather'
+
+const QtyForm = ({ id, quantity}) => {
+
+    const dispatch = useDispatch()
+
+    const addQuantity = (pId) => {
+        dispatch({
+            type: 'ADD_QUANTITY',
+            id: pId
+        })
+    }
+
+    const subQuantity = (pId) => {
+        dispatch({
+            type: 'SUB_QUANTITY',
+            id: pId
+        })
+    }
+    return (
+        <div className="input-counter">
+            <span 
+                className="minus-btn"
+                onClick={e => {
+                    e.preventDefault();
+                    subQuantity(id);
+                }}
+            >
+                <Icon.Minus />
+            </span>
+
+            <input 
+                type="text" 
+                min="1" 
+                // value={quantity}
+                value="1"
+                readOnly={true}
+                onChange={e => (e)}
+            />
+
+            <span className="plus-btn" onClick={e => {
+                e.preventDefault();
+                addQuantity(id);
+            }}>
+                <Icon.Plus />
+            </span>
+        </div>
+    )
+}
+
+export default QtyForm

components/MainWebsite/BusineesPartner.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import Link from 'next/link';
+import * as Icon from 'react-feather';
+
+const OurServices = ({companies}) => {
+    const partners = companies.map((data, index) => {
+		return (
+            <div className="col-lg-4 col-md-6" key={index}>
+                <div className='single-repair-services'
+                style={{
+                    'objectFit':'fill',
+                    width:'390px',
+                    height:'340px',
+                    'backgroundImage' : (data.attributes.Background.data)?`url('/api/util?img=${encodeURIComponent(data.attributes.Background.data.attributes.url)}')`:''}}
+                >
+                    <img style={{
+                        'maxWidth': '290px',
+                        'maxHeight': '100px',
+                    }} src={`/api/util?img=${encodeURIComponent(data.attributes.Icon.data.attributes.url)}`} alt="image" />
+                    <br/>
+                    <h3 style={{    position: 'absolute',
+                        left: '0%',
+                        top: '60%',
+                        width:'100%'
+                    }}
+                    >{data.attributes.Business_name}<br /> {data.attributes.Name}</h3>
+                    <br/><br/><br/>
+                    <Link href={
+                        (data.attributes.Website)
+                            ?data.attributes.Website
+                            :((data.attributes.Ready == 1))
+                                ?`${data.attributes.Name.toLowerCase()}`
+                                :"coming-soon"
+                        } target="_blank">
+                        <a style={{
+                            position:'absolute',
+                            top: '84%',
+                            left: '45%'
+                        }}target="_blank"><Icon.ArrowRight /></a>
+                    </Link>
+                </div>
+            </div>
+		);
+	}); 
+    return (
+        <div id="business_partner" className="iot-services-area pt-80 pb-50">
+            <div className="container justify-content-center">
+                <div className="section-title">
+                    <h2>Thamrin Group Businees Partner</h2>
+                    <div className="bar"></div>
+                    <p>Thamrin Group mempunyai beberapa Businees Partner sebagai Unit Bisnis nya, antar lain</p>
+                </div>
+                
+                <div className="row">
+                    {partners}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default OurServices;
+

components/MainWebsite/EmailSubscription.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import subscription from '../../api/subscription/subscription';
+
+const Newsletter = () => {
+    const [email, setEmail] = React.useState("");
+    return (
+        <div id="subscribe" className="free-trial-area">
+            <div className="container-fluid">
+                <div className="row align-items-center">
+                    <div className="col-lg-6 col-md-12">
+                        <div className="free-trial-image">
+                            <img src="/images/email-subscribe-bg.png" alt="image" />
+                        </div>
+                    </div>
+
+                    <div className="col-lg-6 col-md-12">
+                        <div className="free-trial-content">
+                            <h2>Enter Your Email For Get Info & Promo</h2>
+
+                            <form className="newsletter-form" onSubmit={async (e)=>{
+                                e.preventDefault();
+                                if(email&&email!=""){
+                                    var res = await subscription.subscribe(email);
+                                    setEmail("");
+                                    if(res["STATUS"]==1){
+                                        alert("Email Subscribed!!");
+                                    }else{
+                                        if(res["DATA"].toUpperCase().includes("UNIQUE")){
+                                            alert("Email Already Subscribed!");
+                                        }
+                                    }
+                                }
+                            }}>
+                                <input onChange={(e)=>setEmail(e.target.value)}name="email" type="email" className="input-newsletter" value={email} placeholder="Enter your business email here" />
+                                <button type="submit">Sign Up Free</button>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Shape Images */}
+            <div className="shape2 rotateme">
+                <img src="/images/shape2.svg" alt="shape" />
+            </div>
+            <div className="shape4">
+                <img src="/images/shape4.svg" alt="shape" />
+            </div>
+            <div className="shape7">
+                <img src="/images/shape4.svg" alt="shape" />
+            </div>
+            <div className="shape8 rotateme">
+                <img src="/images/shape2.svg" alt="shape" />
+            </div>
+        </div>
+    );
+}
+
+export default Newsletter;

components/MainWebsite/Footer.js

@@ -0,0 +1,188 @@
+import React from 'react';
+import Link from 'next/link';
+import { Link  as LinkScroll} from 'react-scroll';
+import * as Icon from 'react-feather';
+
+const Footer = ({info,social,desc,isHome}) => {
+    info = (info == null)?{
+        Email : "",
+        Telp :"",
+        Address : "",
+    }:info;
+    isHome = (isHome == null)?true:isHome;
+    const currentYear = new Date().getFullYear();
+    const Socials = (social)?social.map((data,idx)=>{
+        return(
+            <li key={idx}>
+                <Link href={data.attributes.Link}>
+                    {
+                        (data.attributes.Type =='Facebook')
+                        ?(<a className="facebook" target="_blank"><Icon.Facebook /></a>)
+                        :(data.attributes.Type =='Instagram')
+                        ?(<a className="instagram" target="_blank"><Icon.Instagram /></a>)
+                        :(data.attributes.Type =='Twitter')
+                        ?(<a className="twitter" target="_blank"><Icon.Twitter /></a>)
+                        :(data.attributes.Type =='Youtube')
+                        ?(<a className="youtube" target="_blank"><Icon.Youtube /></a>):""
+                    }
+                </Link>
+            </li>
+        );
+    }):"";
+
+    return (
+        <footer className="footer-area bg-f7fafd">
+            <div className="container">
+                <div className="row">
+                    <div className="col-lg-3 col-md-6">
+                        <div className="single-footer-widget">
+                            <div className="logo">
+                                <Link offset={100} href="/it-startup">
+                                    <a>
+                                        <img src="/images/TBG-Home/White.png" width="250px" alt="logo" />
+                                    </a>
+                                </Link>
+                            </div>
+                            <p>{desc}</p>
+                        </div>
+                    </div>
+
+                    <div className="col-lg-3 col-md-6">
+                        <div className="single-footer-widget pl-5">
+                            <h3>Menu</h3>
+                            <ul className="list">
+                            {(isHome)
+                                ?(
+                                    <>
+                                        <li>
+                                            <LinkScroll href="/#" to="home" spy={true} smooth={true}>
+                                                <a>Home</a>
+                                            </LinkScroll>
+                                        </li>
+                                        <li>
+                                            <LinkScroll offset={-100} href="/#" to="business_partner" spy={true} smooth={true}>
+                                                <a>Businees Partner</a>
+                                            </LinkScroll>
+                                        </li>
+                                        <li>
+                                            <LinkScroll offset={-100} href="/#" to="industri" spy={true} smooth={true}>
+                                                <a>Industri</a>
+                                            </LinkScroll>
+                                        </li> 
+                                        <li>
+                                            <LinkScroll offset={-100} href="/#" to="gallery" spy={true} smooth={true}>
+                                                <a>Gallery</a>
+                                            </LinkScroll>
+                                        </li>
+                                        <li>
+                                            <LinkScroll offset={-100} href="/#" to="subscribe" spy={true} smooth={true}>
+                                                <a>Subscribe</a>
+                                            </LinkScroll>
+                                        </li>
+                                    </>
+                                )
+                                :(
+                                    <>
+                                        <li>
+                                            <Link href={{
+                                                pathname:"/",
+                                                query:{
+                                                    "s":"home"
+                                                }
+                                            }}>
+                                                <a>Home</a>
+                                            </Link>
+                                        </li>
+                                        <li>
+                                            <Link href={{
+                                                pathname:"/",
+                                                query:{
+                                                    "s":"business_partner"
+                                                }
+                                            }}>
+                                                <a>Businees Partner</a>
+                                            </Link>
+                                        </li>
+                                        <li>
+                                            <Link href={{
+                                                pathname:"/",
+                                                query:{
+                                                    "s":"industri"
+                                                }
+                                            }}>
+                                                <a>Industri</a>
+                                            </Link>
+                                        </li> 
+                                        <li>
+                                            <Link href={{
+                                                pathname:"/",
+                                                query:{
+                                                    "s":"gallery"
+                                                }
+                                            }}>
+                                                <a>Gallery</a>
+                                            </Link>
+                                        </li>
+                                        <li>
+                                            <Link href={{
+                                                pathname:"/",
+                                                query:{
+                                                    "s":"subscribe"
+                                                }
+                                            }}>
+                                                <a>Subscribe</a>
+                                            </Link>
+                                        </li>
+                                    </>
+                                )}
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div className="col-lg-6 col-md-6">
+                        {/* <div className="single-footer-widget">
+                            <h3>Address</h3>
+                            
+                            <ul className="footer-contact-info">
+                                <li> 
+                                    <Icon.MapPin />
+                                    {info.Address}
+                                </li>
+                                <li>
+                                    <Icon.Mail />
+                                    Email: <a href={`mailto:${info.Email}`}>{info.Email}</a>
+                                </li>
+                                <li> 
+                                    <Icon.PhoneCall />
+                                    Phone: <a href={`tel:${info.Telp}`}>{info.Telp}</a>
+                                </li>
+                            </ul>
+                            <ul className="social-links">
+                                {Socials}
+                            </ul>
+                        </div> */}
+                    </div>
+
+                    <div className="col-lg-12 col-md-12">
+                        <div className="copyright-area">
+                            <p>Copyright &copy; {currentYear} All Right Reserved by <a href="https://thamrin.co.id/" target="_blank">PT THAMRIN BROTHERS</a></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <img src="/images/map.png" className="map" alt="map" />
+
+            {/* Shape Images */}
+            <div className="shape1">
+                <img src="/images/shape1.png" alt="shape" />
+            </div>
+            <div className="shape8 rotateme">
+                <img src="/images/shape2.svg" alt="shape" />
+            </div>
+        </footer>
+    )
+     
+}
+
+export default Footer; 

components/MainWebsite/Header.js

@@ -0,0 +1,170 @@
+import React, { useState } from "react";
+import { Link as LinkScroll} from 'react-scroll'
+import Link from 'next/link';
+
+const Header = ({sticky,isHome}) => {
+    isHome = (isHome == null)?true:isHome;
+    const [menu, setMenu] = React.useState(true)
+
+    const toggleNavbar = () => {
+        setMenu(!menu)
+    }
+
+    React.useEffect(() => {
+        let elementId = document.getElementById("header");
+        if(!(sticky||false)){
+            document.addEventListener("scroll", () => {
+                if (window.scrollY > 170) {
+                    elementId.classList.add("is-sticky");
+                } else {
+                    elementId.classList.remove("is-sticky");
+                }
+            });
+        }
+        else{
+            elementId.classList.add("is-sticky");
+        }
+        window.scrollTo(0, 0);
+    })
+
+    const classOne = menu ? 'collapse navbar-collapse' : 'collapse navbar-collapse show';
+    const classTwo = menu ? 'navbar-toggler navbar-toggler-right collapsed' : 'navbar-toggler navbar-toggler-right';
+
+    return (
+        <header id="header" className="headroom navbar-color-white navbar-style-four">
+            <div className="startp-nav">
+                <div className="container">
+                    <nav className="navbar navbar-expand-md navbar-light">
+                        {
+                            (isHome)
+                            ?(
+                                <LinkScroll href="/#" to="home" spy={true} smooth={true}>
+                                    <img src="/images/TBG-Home/Blue.png" width="250px" alt="logo" />
+                                </LinkScroll> 
+                            )
+                            :(
+                                <Link href="/">
+                                    <a><img src="/images/TBG-Home/Blue.png" width="250px" alt="logo" /></a>
+                                </Link> 
+                            )
+                        }
+                        <button
+                            onClick={toggleNavbar}
+                            className={classTwo}
+                            type="button"
+                            data-toggle="collapse"
+                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+                            aria-expanded="false"
+                            aria-label="Toggle navigation"
+                        >
+                            <span className="icon-bar top-bar"></span>
+                            <span className="icon-bar middle-bar"></span>
+                            <span className="icon-bar bottom-bar"></span>
+                        </button>
+
+                        <div className={classOne} id="navbarSupportedContent">
+                            <ul className="navbar-nav ms-auto">
+                            {
+                                (isHome)
+                                ?(
+                                    <>
+                                        <li className="nav-item">
+                                            <LinkScroll href="/#" to="home" spy={true} smooth={true}>
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    Home
+                                                </a>
+                                            </LinkScroll>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <LinkScroll offset={-100} href="/#" to="business_partner" spy={true} smooth={true}>
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    Business Partner
+                                                </a>
+                                            </LinkScroll>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <LinkScroll offset={-100} href="/#" to="industri" spy={true} smooth={true}>
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    Industri We Serve
+                                                </a>
+                                            </LinkScroll>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <LinkScroll offset={-100} href="/#" to="gallery" spy={true} smooth={true}>
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    Gallery
+                                                </a>
+                                            </LinkScroll>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <LinkScroll offset={-100} href="/#" to="subscribe" spy={true} smooth={true}>
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    Subscribe
+                                                </a>
+                                            </LinkScroll>
+                                        </li>
+                                    </>
+                                )
+                                :(
+                                    <>
+                                        <li className="nav-item">
+                                            <Link href={{
+                                                pathname: '/',
+                                                query: { s: 'home' },
+                                            }}>
+                                                    Homes
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href={{
+                                                pathname: '/',
+                                                query: { s: 'business_partner' },
+                                            }}>
+                                                    Business Partner
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href={{
+                                                pathname: '/',
+                                                query: { s: 'industri' },
+                                            }}>
+                                                    Industri We Serve
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href={{
+                                                pathname: '/',
+                                                query: { s: 'gallery' },
+                                            }}>
+                                                    Gallery
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href={{
+                                                pathname: '/',
+                                                query: { s: 'subscribe' },
+                                            }}>
+                                                    Subscribe
+                                            </Link>
+                                        </li>
+                                    </>
+                                )
+                            }
+                            </ul>
+                        </div>
+                    </nav>
+                </div>
+            </div>
+        </header>
+    );
+}
+
+export default Header;

components/MainWebsite/IndustriesWeServe.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import Link from 'next/link';
+
+const IndustriesWeServe = ({industries}) => {
+    const Industry = industries?industries.map((data,index)=>{
+        return (
+            <div className="col-lg-3 col-6 col-sm-6 col-md-4" key={index}>
+                <div className="single-industries-serve-box">
+                    <div className="icon" dangerouslySetInnerHTML={{ __html: data.attributes.Icon }}/>
+                    {data.attributes.Name}
+                </div>
+            </div>
+        );
+    }):"";
+    return (
+        <div id="industri" className="industries-serve-area ptb-80">
+            <div className="container">
+                <div className="section-title">
+                    <h2>Sektor Industri</h2>
+					<div className="bar"></div>
+                    <p>Kami melayani berbagai macam sektor industri, antara lain</p>
+                </div>
+
+                <div className="row justify-content-center">
+                    {Industry}
+                </div>
+            </div>
+
+            <div className="analytics-shape2">
+                <img src="/images/bigdata-analytics/vector.png" alt="image" />
+            </div>
+        </div>
+    )
+}
+
+export default IndustriesWeServe;  

components/Yamaha/Header.js

@@ -0,0 +1,250 @@
+import React, { useState } from "react";
+import Link from '@/utils/ActiveLink';
+import * as Icon from 'react-feather';
+
+export default function NavbarYamaha({ company,icon,username, ...props }) {
+    const [menu, setMenu] = React.useState(true)
+    const toggleNavbar = () => {
+        setMenu(!menu)
+    }
+
+    React.useEffect(() => {
+        let elementId = document.getElementById("header");
+        document.addEventListener("scroll", () => {
+            if (window.scrollY > 170) {
+                elementId.classList.add("is-sticky");
+            } else {
+                elementId.classList.remove("is-sticky");
+            }
+        });
+        window.scrollTo(0, 0);
+    })
+
+    const classOne = menu ? 'collapse navbar-collapse' : 'collapse navbar-collapse show';
+    const classTwo = menu ? 'navbar-toggler navbar-toggler-right collapsed' : 'navbar-toggler navbar-toggler-right';
+    return (
+        <header id="header" className="headroom navbar-style-two">
+            <div className="startp-nav">
+                <div className="container">
+                    <nav className="navbar navbar-expand-md navbar-light">
+                        <Link href={`/${company}`}>
+                            <a onClick={toggleNavbar} className="navbar-brand">
+                                <img src={`/api/util?img=${encodeURIComponent(icon)}`} style={{"maxWidth": "180px","maxHeight": "80px"}} alt="logo" />
+                            </a>
+                        </Link>
+
+                        <button
+                            onClick={toggleNavbar}
+                            className={classTwo}
+                            type="button"
+                            data-toggle="collapse"
+                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+                            aria-expanded="false"
+                            aria-label="Toggle navigation"
+                        >
+                            <span className="icon-bar top-bar"></span>
+                            <span className="icon-bar middle-bar"></span>
+                            <span className="icon-bar bottom-bar"></span>
+                        </button>
+
+                        <div className={classOne} id="navbarSupportedContent">
+                            <ul className="navbar-nav ms-auto">
+                                <li className="nav-item">
+                                    <Link href={`/${company}`} activeClassName="active">
+                                        <a onClick={toggleNavbar} className="nav-link">
+                                            Home
+                                        </a>
+                                    </Link>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href='/#'>
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            Product <Icon.ChevronDown />
+                                        </a>
+                                    </Link>
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href={`/${company}/product/motor`} activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Unit Product</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href={`/${company}/product/sparepart`} activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Sparepart Product</a>
+                                            </Link>
+                                        </li>
+                                        {(company==="yamaha")?(
+                                            <li className="nav-item">
+                                                <Link href="https://booking.thamrin.co.id/" activeClassName="active">
+                                                    <a target="_blank" onClick={toggleNavbar} className="nav-link">Service Product</a>
+                                                </Link>
+                                            </li>
+                                        ):""}
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href={`/${company||'yamaha'}/news`}>
+                                        <a onClick={toggleNavbar} className="nav-link">
+                                            Latest News
+                                        </a>
+                                    </Link>
+                                </li>
+
+                                {/* <li className="nav-item">
+                                    <Link href="/yamaha/Carrer" activeClassName="active">
+                                        <a onClick={toggleNavbar} className="nav-link">
+                                            Carrer
+                                        </a>
+                                    </Link>
+                                </li> */}
+
+                                <li className="nav-item">
+                                    <Link href={`/${company||'yamaha'}/about`}>
+                                        <a onClick={toggleNavbar} className="nav-link">
+                                            About Us
+                                        </a>
+                                    </Link>
+
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href={`/${company}/contact`} activeClassName="active">
+                                        <a onClick={toggleNavbar} className="nav-link">Contact</a>
+                                    </Link>
+                                </li>
+                            </ul>
+                        </div>
+
+                        <div style={{display : 'none'}} className="others-option">
+                            <Link href="/company/yamaha/login">
+                                {!username || username == "" ? (
+                                    <Link href="/company/yamaha/login">
+                                        <a className="btn btn-primary">Login</a>
+                                    </Link>
+                                ) : (
+                                    <ul className="navbar-nav ms-auto">
+                                        <li className="nav-item">
+                                            <Link href='/#'>
+                                                <a onClick={e => e.preventDefault()} className="nav-link" >
+                                                    {username} <Icon.ChevronDown />
+                                                </a>
+                                            </Link>
+
+                                            <ul className="dropdown-menu">
+                                                <li className="nav-item">
+                                                    <Link href="/company/yamaha/Profile" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Profile</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/company/yamaha/Shop/Cart">
+                                                        <a className="cart-wrapper-btn">
+                                                            <Icon.ShoppingCart />
+                                                        </a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/company/yamaha/Shop/Checkout" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Checkout</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/company/yamaha/product/sparepart" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Pesanan Saya</a>
+                                                    </Link>
+                                                </li>
+                                                {(company=="yamaha")
+                                                ?(
+                                                    <li className="nav-item">
+                                                    <div
+                                                        onClick={async (e) => {
+                                                            e.preventDefault();
+                                                            fetch("/api/auth/logout", {
+                                                                method: "POST",
+                                                                headers: {
+                                                                    "Content-Type": "application/json",
+                                                                },
+                                                                body: JSON.stringify({ p: "YAMAHA" }),
+                                                            }).then((res) => {
+                                                                //if (res.ok) {
+                                                                window.location.href = "../yamaha";
+                                                                // }
+                                                                //                     else{
+                                            
+                                                                //                     }
+                                                            });
+                                                        }}
+                                                    >
+                                                        <Link href="https://booking.thamrin.co.id/" activeClassName="active">
+                                                            <a target="_blank" onClick={toggleNavbar} className="nav-link">Logout</a>
+                                                        </Link>
+                                                    </div>
+                                                </li>
+                                                ):""}
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                    //     <CustomDropdown
+                                    //     noLiPadding
+                                    //     navDropdown
+                                    //     buttonText={
+                                    //         username.length > 12 ? username.substring(0, 9) + ".." : username
+                                    //     }
+                                    //     buttonProps={{
+                                    //         className: classes.navLink,
+                                    //         color: "transparent",
+                                    //     }}
+                                    //     buttonIcon={Person}
+                                    //     dropdownList={[
+                                    //         <div
+                                    //             onClick={async (e) => {
+                                    //                 e.preventDefault();
+                                    //                 fetch("/api/auth/logout", {
+                                    //                     method: "POST",
+                                    //                     headers: {
+                                    //                         "Content-Type": "application/json",
+                                    //                     },
+                                    //                     body: JSON.stringify({ p: "YAMAHA" }),
+                                    //                 }).then((res) => {
+                                    //                     //if (res.ok) {
+                                    //                     window.location.href = "../yamaha/home";
+                                    //                     /*}
+                                    //                                         else{
+
+                                    //                                         }*/
+                                    //                 });
+                                    //             }}
+                                    //         >
+                                    //             <Link href="/yamaha/login">
+                                    //                 <a className="btn btn-primary">Logout</a>
+                                    //             </Link>
+                                    //         </div>,
+                                    //         <div>
+                                    //             <Link href="/yamaha/login">
+                                    //                 <a className="btn btn-primary">Profile</a>
+                                    //             </Link>
+                                    //         </div>,
+                                    //         <div>
+                                    //             <Link href="/yamaha/login">
+                                    //                 <a className="btn btn-primary">Pesanan Saya</a>
+                                    //             </Link>
+                                    //         </div>
+                                    //         // <a href="/yamaha/profile/profile" className={classes.dropdownLink}>Profile</a>,
+                                    //     ]}
+                                    // />
+                                )}
+                            </Link>
+                        </div>
+                    </nav>
+                </div>
+            </div>
+        </header>
+    );
+}

components/_App/Footer.js

@@ -0,0 +1,214 @@
+import React from 'react';
+import Link from 'next/link';
+import { Link  as LinkScroll} from 'react-scroll';
+import * as Icon from 'react-feather';
+
+const Footer = () => {
+
+    const currentYear = new Date().getFullYear();
+
+    return (
+        <footer className="footer-area bg-f7fafd">
+            <div className="container">
+                <div className="row">
+                    <div className="col-lg-3 col-md-6">
+                        <div className="single-footer-widget">
+                            <div className="logo">
+                                <Link offset={100} href="/it-startup">
+                                    <a>
+                                        <img src="/images/TBG-Home/White.png" width="250px" alt="logo" />
+                                    </a>
+                                </Link>
+                            </div>
+                            <p>Thamrin Group adalah perusahaan terkemuka di Sumatera Selatan & Bengkulu dengan fokus bisnis pada sektor otomotif dan properti.</p>
+                        </div>
+                    </div>
+
+                    <div className="col-lg-3 col-md-6">
+                        <div className="single-footer-widget pl-5">
+                            <h3>Menu</h3>
+                            <ul className="list">
+                                <li>
+                                    <LinkScroll href="/#" to="home" spy={true} smooth={true}>
+                                        <a>Home</a>
+                                    </LinkScroll>
+                                </li>
+                                <li>
+                                    <LinkScroll offset={-100} href="/#" to="business_partner" spy={true} smooth={true}>
+                                        <a>Businees Partner</a>
+                                    </LinkScroll>
+                                </li>
+                                <li>
+                                    <LinkScroll offset={-100} href="/#" to="industri" spy={true} smooth={true}>
+                                        <a>Industri</a>
+                                    </LinkScroll>
+                                </li> 
+                                <li>
+                                    <LinkScroll offset={-100} href="/#" to="gallery" spy={true} smooth={true}>
+                                        <a>Gallery</a>
+                                    </LinkScroll>
+                                </li>
+                                <li>
+                                    <LinkScroll offset={-100} href="/#" to="subscribe" spy={true} smooth={true}>
+                                        <a>Subscribe</a>
+                                    </LinkScroll>
+                                </li>
+
+                                {/* <li>
+                                    <Link href="/#">
+                                        <a onClick={e=>{
+                                            e.preventDefault();
+                                            window.scroll({
+                                                top: document.getElementById('home').getBoundingClientRect().top+window.pageYOffset - 100,
+                                                behavior: "smooth"
+                                            });
+                                        }}>Home</a>
+                                    </Link>
+                                </li>
+                                <li>
+                                    <Link href="/#" to="business_partner" spy={true} smooth={true}>
+                                        <a onClick={e => {
+                                            e.preventDefault();
+                                            window.scroll({
+                                                top: document.getElementById('business_partner').getBoundingClientRect().top+window.pageYOffset - 100,
+                                                behavior: "smooth"
+                                            });
+                                            }}>Businees Partner</a>
+                                    </Link>
+                                </li>
+                                <li>
+                                    <Link href="/#" to="industri" spy={true} smooth={true}>
+                                        <a onClick={e => {
+                                            e.preventDefault();
+                                            window.scroll({
+                                                top: document.getElementById('industri').getBoundingClientRect().top+window.pageYOffset - 100,
+                                                behavior: "smooth"
+                                            });
+                                            }}>Industri</a>
+                                    </Link>
+                                </li> 
+                                <li>
+                                    <Link href="/#" to="gallery" spy={true} smooth={true}>
+                                        <a onClick={e => {
+                                            e.preventDefault();
+                                            window.scroll({
+                                                top: document.getElementById('gallery').getBoundingClientRect().top+window.pageYOffset - 100,
+                                                behavior: "smooth"
+                                            });
+                                            }}>Gallery</a>
+                                    </Link>
+                                </li>
+                                <li>
+                                    <Link href="/#" to="about-us" spy={true} smooth={true}>
+                                        <a onClick={e => {
+                                            e.preventDefault();
+                                            window.scroll({
+                                                top: document.getElementById('about-us').getBoundingClientRect().top+window.pageYOffset - 100,
+                                                behavior: "smooth"
+                                            });
+                                        }}>About us</a>
+                                    </Link>
+                                </li> */}
+                            </ul>
+                        </div>
+                    </div>
+
+                    {/* <div className="col-lg-3 col-md-6">
+                        <div className="single-footer-widget">
+                            <h3>Support</h3>
+                            <ul className="list">
+                                <li>
+                                    <Link href="/faq">
+                                        <a>FAQ's</a>
+                                    </Link>
+                                </li>
+                                <li>
+                                    <Link href="/privacy-policy">
+                                        <a>Privacy Policy</a>
+                                    </Link>
+                                </li>
+                                <li>
+                                    <Link href="/term-condition">
+                                        <a>Terms & Condition</a>
+                                    </Link>
+                                </li>
+                                <li>
+                                    <Link href="/team">
+                                        <a>Team</a>
+                                    </Link>
+                                </li>
+                                <li>
+                                    <Link href="/contact">
+                                        <a>Contact Us</a>
+                                    </Link>
+                                </li>
+                            </ul>
+                        </div>
+                    </div> */}
+
+                    <div className="col-lg-6 col-md-6">
+                        <div className="single-footer-widget">
+                            <h3>Address</h3>
+                            
+                            <ul className="footer-contact-info">
+                                <li> 
+                                    <Icon.MapPin />
+                                    JL. KS Tubun, No. 81 A 17 Ilir Kecamatan Ilir Timur I Kota Palembang, Sumatera Selatan 30111, Sumatera Selatan 30113
+                                </li>
+                                <li>
+                                    <Icon.Mail />
+                                    Email: <a href="mailto:thamrin@gmail.co.id">thamrin@gmail.co.id</a>
+                                </li>
+                                <li> 
+                                    <Icon.PhoneCall />
+                                    Phone: <a href="tel:321984754">+ (321) 984 754</a>
+                                </li>
+                            </ul>
+                            <ul className="social-links">
+                                <li>
+                                    <Link href="https://www.facebook.com/thamrin.group">
+                                        <a className="facebook" target="_blank"><Icon.Facebook /></a>
+                                    </Link>
+                                </li>
+                                <li>
+                                    <Link href="https://twitter.com/ThamrinGroup">
+                                        <a className="twitter" target="_blank"><Icon.Twitter /></a>
+                                    </Link>
+                                </li>
+                                <li>
+                                    <Link href="https://www.instagram.com/thamrin.co.id/">
+                                        <a className="instagram" target="_blank"><Icon.Instagram /></a>
+                                    </Link>
+                                </li>
+                                <li>
+                                    <Link href="https://www.youtube.com/channel/UCRUULlhLxKUpXK1Ti4Jrjkw">
+                                        <a className="youtube" target="_blank"><Icon.Youtube /></a>
+                                    </Link>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div className="col-lg-12 col-md-12">
+                        <div className="copyright-area">
+                            <p>Copyright &copy; {currentYear} All Right Reserved by <a href="https://thamrin.xyz/" target="_blank">@Thamrin Group </a></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <img src="/images/map.png" className="map" alt="map" />
+
+            {/* Shape Images */}
+            <div className="shape1">
+                <img src="/images/shape1.png" alt="shape" />
+            </div>
+            <div className="shape8 rotateme">
+                <img src="/images/shape2.svg" alt="shape" />
+            </div>
+        </footer>
+    )
+     
+}
+
+export default Footer; 

components/_App/GoTop.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import * as Icon from 'react-feather';
+
+const GoTop = ({scrollStepInPx, delayInMs}) => {
+
+    const [thePosition, setThePosition] = React.useState(false);
+    const timeoutRef = React.useRef(null);
+
+    React.useEffect(() => {
+        document.addEventListener("scroll", () => {
+            if (window.scrollY > 170) {
+                setThePosition(true)
+            } else {
+                setThePosition(false);
+            }
+        });
+    }, [])
+    
+    const onScrollStep = () => {
+        if (window.pageYOffset === 0){
+            clearInterval(timeoutRef.current);
+        }
+        window.scroll(0, window.pageYOffset - scrollStepInPx);
+    }
+
+    const scrollToTop = () => {
+        timeoutRef.current = setInterval(onScrollStep, delayInMs);
+    }
+
+    const renderGoTopIcon = () => {
+        return (
+            <div className={`go-top ${thePosition ? 'active' : ''}`} onClick={scrollToTop}>
+                <Icon.ArrowUp />
+            </div>
+        )
+    }
+
+    return (
+        <React.Fragment>
+            {renderGoTopIcon()}
+        </React.Fragment>
+    )
+}
+
+export default GoTop;

components/_App/Layout.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import Head from "next/head"
+import GoTop from './GoTop'
+ 
+const Layout = ({ children }) => {
+    return(
+        <>
+            <Head>
+                <meta charSet="utf-8" />
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <title>Thamrin Group</title>
+            </Head>
+            {children}
+
+            <GoTop scrollStepInPx="100" delayInMs="10.50" />
+        </>
+    )
+}
+
+export default Layout

components/_App/Navbar.js

@@ -0,0 +1,429 @@
+import React from "react"
+import Link from '@/utils/ActiveLink'
+import * as Icon from 'react-feather'
+import { useSelector } from 'react-redux'
+
+const Navbar = () => {
+    const cart = useSelector((state) => state.cart)
+    const [menu, setMenu] = React.useState(true)
+ 
+    const toggleNavbar = () => {
+        setMenu(!menu)
+    }
+
+    React.useEffect(() => {
+        let elementId = document.getElementById("header");
+        document.addEventListener("scroll", () => {
+            if (window.scrollY > 170) {
+                elementId.classList.add("is-sticky");
+            } else {
+                elementId.classList.remove("is-sticky");
+            }
+        });
+        window.scrollTo(0, 0); 
+    })
+ 
+    const classOne = menu ? 'collapse navbar-collapse' : 'collapse navbar-collapse show';
+    const classTwo = menu ? 'navbar-toggler navbar-toggler-right collapsed' : 'navbar-toggler navbar-toggler-right';
+
+    return (
+        <header id="header" className="headroom">
+            <div className="startp-nav">
+                <div className="container">
+                    <nav className="navbar navbar-expand-md navbar-light">
+                        <Link href="/it-startup">
+                            <a onClick={toggleNavbar} className="navbar-brand">
+                                <img src="/images/logo.png" alt="logo" />
+                            </a>
+                        </Link>
+
+                        <button 
+                            onClick={toggleNavbar} 
+                            className={classTwo}
+                            type="button" 
+                            data-toggle="collapse" 
+                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 
+                            aria-expanded="false" 
+                            aria-label="Toggle navigation"
+                        >
+                            <span className="icon-bar top-bar"></span>
+                            <span className="icon-bar middle-bar"></span>
+                            <span className="icon-bar bottom-bar"></span>
+                        </button>
+
+                        <div className={classOne} id="navbarSupportedContent">
+                            <ul className="navbar-nav ms-auto">
+                                <li className="nav-item">
+                                    <Link href="/#" activeClassName="active">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            Home <Icon.ChevronDown />
+                                        </a>
+                                    </Link>
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/it-startup" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">IT Startup</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/it-startup-2" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">IT Startup Two</a>
+                                            </Link>
+                                        </li>
+ 
+                                        <li className="nav-item">
+                                            <Link href="/iot" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">IOT</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/hosting" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Hosting</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/machine-learning" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Machine Learning</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/machine-learning-2" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Machine Learning 2</a>
+                                            </Link>
+                                        </li> 
+
+                                        <li className="nav-item">
+                                            <Link href="/bigdata-analytics" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Bigdata Analytics</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/digital-agency" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Digital Agency</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/digital-agency-portfolio" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Digital Agency Portfolio</a>
+                                            </Link>
+                                        </li>
+  
+                                        <li className="nav-item">
+                                            <Link href="/pc-repair" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">PC Repair</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/#">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            About <Icon.ChevronDown />
+                                        </a>
+                                    </Link> 
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/about-1" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">About Style 1</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/about-2" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">About Style 2</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/about-3" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">About Style 3</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/#">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            Pages <Icon.ChevronDown />
+                                        </a>
+                                    </Link>
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/#" activeClassName="active">
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    Features <Icon.ChevronDown />
+                                                </a>
+                                            </Link>
+
+                                            <ul className="dropdown-menu">
+                                                <li className="nav-item">
+                                                    <Link href="/features" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Features</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/feature-details" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Features Details</a>
+                                                    </Link>
+                                                </li>
+                                            </ul>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/#" activeClassName="active">
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    Services <Icon.ChevronDown />
+                                                </a>
+                                            </Link>
+
+                                            <ul className="dropdown-menu">
+                                                <li className="nav-item">
+                                                    <Link href="/services-1" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 1</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/services-2" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 2</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/services-3" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 3</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/services-4" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 4</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/services-5" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 5</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/service-details" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Details</a>
+                                                    </Link>
+                                                </li>
+                                            </ul>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/feedback" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Feedback</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/#" activeClassName="active">
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    Projects <Icon.ChevronDown />
+                                                </a>
+                                            </Link>
+
+                                            <ul className="dropdown-menu">
+                                                <li className="nav-item">
+                                                    <Link href="/projects-1" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Project Style 1</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/projects-2" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Project Style 1</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/project-details" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Project Details</a>
+                                                    </Link>
+                                                </li>
+                                            </ul>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/team" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Team</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/pricing" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Pricing</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/#" activeClassName="active">
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    User <Icon.ChevronDown />
+                                                </a>
+                                            </Link>
+
+                                            <ul className="dropdown-menu">
+                                                <li className="nav-item">
+                                                    <Link href="/login" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Login</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/sign-up" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Sign Up</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/forgot-password" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Forgot Password</a>
+                                                    </Link>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                    
+                                        <li className="nav-item">
+                                            <Link href="/faq" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">FAQ's</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/coming-soon" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Coming Soon</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/404" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">404 Error Page</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/#" activeClassName="active">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            Shop <Icon.ChevronDown />
+                                        </a>
+                                    </Link>
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/shop" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Shop</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/checkout" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Checkout</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/#">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            Blog <Icon.ChevronDown />
+                                        </a>
+                                    </Link>
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/blog-1" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Grid</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-2" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Right Sidebar</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-3" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Grid 2</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-4" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Right Sidebar 2</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-5" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Grid 3</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-6" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Right Sidebar 3</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-details" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Details</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/contact" activeClassName="active">
+                                        <a onClick={toggleNavbar} className="nav-link">Contact</a>
+                                    </Link>
+                                </li>
+                            </ul>
+                        </div>
+
+                        <div className="others-option">
+                            <Link href="/cart">
+                                <a className="cart-wrapper-btn">
+                                    <Icon.ShoppingCart /> 
+                                    <span>{cart.length}</span>
+                                </a>
+                            </Link>
+
+                            <Link href="/contact">
+							    <a className="btn btn-light">Support</a>
+                            </Link>
+
+                            <Link href="/login">
+							    <a className="btn btn-primary">Login</a>
+                            </Link>
+						</div>
+                    </nav>
+                </div>
+            </div>
+        </header>
+    );
+}
+
+export default Navbar;

components/_App/NavbarStyleFive.js

@@ -0,0 +1,428 @@
+import React, { useState } from "react";
+import Link from '@/utils/ActiveLink';
+import * as Icon from 'react-feather';
+
+const NavbarStyleFive = () => {
+    const [menu, setMenu] = React.useState(true)
+ 
+    const toggleNavbar = () => {
+        setMenu(!menu)
+    }
+
+    React.useEffect(() => {
+        let elementId = document.getElementById("header");
+        document.addEventListener("scroll", () => {
+            if (window.scrollY > 170) {
+                elementId.classList.add("is-sticky");
+            } else {
+                elementId.classList.remove("is-sticky");
+            }
+        });
+        window.scrollTo(0, 0); 
+    })
+ 
+    const classOne = menu ? 'collapse navbar-collapse' : 'collapse navbar-collapse show';
+    const classTwo = menu ? 'navbar-toggler navbar-toggler-right collapsed' : 'navbar-toggler navbar-toggler-right';
+
+    return (
+        <header id="header" className="headroom navbar-style-three">
+            <div className="startp-nav">
+                <div className="container-fluid">
+                    <nav className="navbar navbar-expand-md navbar-light">
+                        <Link href="/it-startup">
+                            <a onClick={toggleNavbar} className="navbar-brand">
+                                <img src="/images/logo.png" alt="logo" />
+                            </a>
+                        </Link>
+
+                        <button 
+                            onClick={toggleNavbar} 
+                            className={classTwo}
+                            type="button" 
+                            data-toggle="collapse" 
+                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 
+                            aria-expanded="false" 
+                            aria-label="Toggle navigation"
+                        >
+                            <span className="icon-bar top-bar"></span>
+                            <span className="icon-bar middle-bar"></span>
+                            <span className="icon-bar bottom-bar"></span>
+                        </button>
+
+                        <div className={classOne} id="navbarSupportedContent">
+                            <ul className="navbar-nav">
+                                <li className="nav-item">
+                                    <Link href="/#" activeClassName="active">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            Home <Icon.ChevronDown />
+                                        </a>
+                                    </Link>
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/it-startup" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">IT Startup</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/it-startup-2" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">IT Startup Two</a>
+                                            </Link>
+                                        </li>
+ 
+                                        <li className="nav-item">
+                                            <Link href="/iot" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">IOT</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/hosting" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Hosting</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/machine-learning" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Machine Learning</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/machine-learning-2" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Machine Learning 2</a>
+                                            </Link>
+                                        </li> 
+
+                                        <li className="nav-item">
+                                            <Link href="/bigdata-analytics" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Bigdata Analytics</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/digital-agency" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Digital Agency</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/digital-agency-portfolio" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Digital Agency Portfolio</a>
+                                            </Link>
+                                        </li>
+  
+                                        <li className="nav-item">
+                                            <Link href="/pc-repair" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">PC Repair</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/#">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            About <Icon.ChevronDown />
+                                        </a>
+                                    </Link> 
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/about-1" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">About Style 1</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/about-2" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">About Style 2</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/about-3" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">About Style 3</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/#">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            Pages <Icon.ChevronDown />
+                                        </a>
+                                    </Link>
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/#" activeClassName="active">
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    Features <Icon.ChevronDown />
+                                                </a>
+                                            </Link>
+
+                                            <ul className="dropdown-menu">
+                                                <li className="nav-item">
+                                                    <Link href="/features" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Features</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/feature-details" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Features Details</a>
+                                                    </Link>
+                                                </li>
+                                            </ul>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/#" activeClassName="active">
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    Services <Icon.ChevronDown />
+                                                </a>
+                                            </Link>
+
+                                            <ul className="dropdown-menu">
+                                                <li className="nav-item">
+                                                    <Link href="/services-1" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 1</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/services-2" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 2</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/services-3" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 3</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/services-4" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 4</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/services-5" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 5</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/service-details" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Details</a>
+                                                    </Link>
+                                                </li>
+                                            </ul>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/feedback" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Feedback</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/#" activeClassName="active">
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    Projects <Icon.ChevronDown />
+                                                </a>
+                                            </Link>
+
+                                            <ul className="dropdown-menu">
+                                                <li className="nav-item">
+                                                    <Link href="/projects-1" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Project Style 1</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/projects-2" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Project Style 1</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/project-details" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Project Details</a>
+                                                    </Link>
+                                                </li>
+                                            </ul>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/team" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Team</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/pricing" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Pricing</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/#" activeClassName="active">
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    User <Icon.ChevronDown />
+                                                </a>
+                                            </Link>
+
+                                            <ul className="dropdown-menu">
+                                                <li className="nav-item">
+                                                    <Link href="/login" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Login</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/sign-up" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Sign Up</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/forgot-password" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Forgot Password</a>
+                                                    </Link>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                    
+                                        <li className="nav-item">
+                                            <Link href="/faq" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">FAQ's</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/coming-soon" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Coming Soon</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/404" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">404 Error Page</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/#" activeClassName="active">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            Shop <Icon.ChevronDown />
+                                        </a>
+                                    </Link>
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/shop" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Shop</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/product-details" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Products Details</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/cart" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Cart</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/checkout" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Checkout</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/#">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            Blog <Icon.ChevronDown />
+                                        </a>
+                                    </Link>
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/blog-1" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Grid</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-2" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Right Sidebar</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-3" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Grid 2</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-4" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Right Sidebar 2</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-5" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Grid 3</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-6" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Right Sidebar 3</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-details" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Details</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/contact" activeClassName="active">
+                                        <a onClick={toggleNavbar} className="nav-link">Contact</a>
+                                    </Link>
+                                </li>
+                            </ul>
+                        </div>
+
+                        <div className="others-option">
+                            <Link href="/contact">
+							    <a className="btn btn-gradient">Contact Us</a>
+                            </Link>
+						</div>
+                    </nav>
+                </div>
+            </div>
+        </header>
+    );
+}
+
+export default NavbarStyleFive;

components/_App/NavbarStyleFour.js

@@ -0,0 +1,422 @@
+import React, { useState } from "react";
+import Link from '@/utils/ActiveLink';
+import * as Icon from 'react-feather';
+
+const NavbarStyleFour = () => {
+    const [menu, setMenu] = React.useState(true)
+ 
+    const toggleNavbar = () => {
+        setMenu(!menu)
+    }
+
+    React.useEffect(() => {
+        let elementId = document.getElementById("header");
+        document.addEventListener("scroll", () => {
+            if (window.scrollY > 170) {
+                elementId.classList.add("is-sticky");
+            } else {
+                elementId.classList.remove("is-sticky");
+            }
+        });
+        window.scrollTo(0, 0); 
+    })
+ 
+    const classOne = menu ? 'collapse navbar-collapse' : 'collapse navbar-collapse show';
+    const classTwo = menu ? 'navbar-toggler navbar-toggler-right collapsed' : 'navbar-toggler navbar-toggler-right';
+
+    return (
+        <header id="header" className="headroom navbar-color-white navbar-style-four">
+            <div className="startp-nav">
+                <div className="container">
+                    <nav className="navbar navbar-expand-md navbar-light">
+                        <Link href="/it-startup">
+                            {/* <a onClick={toggleNavbar} className="navbar-brand"> */}
+                                <img src="/images/TBG-Home/Blue.png" width="250px" alt="logo" />
+                            {/* </a> */}
+                        </Link>
+
+                        <button 
+                            onClick={toggleNavbar} 
+                            className={classTwo}
+                            type="button" 
+                            data-toggle="collapse" 
+                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 
+                            aria-expanded="false" 
+                            aria-label="Toggle navigation"
+                        >
+                            <span className="icon-bar top-bar"></span>
+                            <span className="icon-bar middle-bar"></span>
+                            <span className="icon-bar bottom-bar"></span>
+                        </button>
+
+                        <div className={classOne} id="navbarSupportedContent">
+                            <ul className="navbar-nav ms-auto">
+                                <li className="nav-item">
+                                    <Link href="/#" activeClassName="active">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            Home <Icon.ChevronDown />
+                                        </a>
+                                    </Link>
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/it-startup" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">IT Startup</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/it-startup-2" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">IT Startup Two</a>
+                                            </Link>
+                                        </li>
+ 
+                                        <li className="nav-item">
+                                            <Link href="/iot" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">IOT</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/hosting" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Hosting</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/machine-learning" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Machine Learning</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/machine-learning-2" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Machine Learning 2</a>
+                                            </Link>
+                                        </li> 
+
+                                        <li className="nav-item">
+                                            <Link href="/bigdata-analytics" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Bigdata Analytics</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/digital-agency" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Digital Agency</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/digital-agency-portfolio" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Digital Agency Portfolio</a>
+                                            </Link>
+                                        </li>
+  
+                                        <li className="nav-item">
+                                            <Link href="/pc-repair" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">PC Repair</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/#">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            About <Icon.ChevronDown />
+                                        </a>
+                                    </Link> 
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/about-1" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">About Style 1</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/about-2" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">About Style 2</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/about-3" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">About Style 3</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/#">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            Pages <Icon.ChevronDown />
+                                        </a>
+                                    </Link>
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/#" activeClassName="active">
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    Features <Icon.ChevronDown />
+                                                </a>
+                                            </Link>
+
+                                            <ul className="dropdown-menu">
+                                                <li className="nav-item">
+                                                    <Link href="/features" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Features</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/feature-details" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Features Details</a>
+                                                    </Link>
+                                                </li>
+                                            </ul>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/#" activeClassName="active">
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    Services <Icon.ChevronDown />
+                                                </a>
+                                            </Link>
+
+                                            <ul className="dropdown-menu">
+                                                <li className="nav-item">
+                                                    <Link href="/services-1" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 1</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/services-2" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 2</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/services-3" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 3</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/services-4" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 4</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/services-5" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 5</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/service-details" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Details</a>
+                                                    </Link>
+                                                </li>
+                                            </ul>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/feedback" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Feedback</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/#" activeClassName="active">
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    Projects <Icon.ChevronDown />
+                                                </a>
+                                            </Link>
+
+                                            <ul className="dropdown-menu">
+                                                <li className="nav-item">
+                                                    <Link href="/projects-1" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Project Style 1</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/projects-2" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Project Style 1</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/project-details" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Project Details</a>
+                                                    </Link>
+                                                </li>
+                                            </ul>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/team" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Team</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/pricing" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Pricing</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/#" activeClassName="active">
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    User <Icon.ChevronDown />
+                                                </a>
+                                            </Link>
+
+                                            <ul className="dropdown-menu">
+                                                <li className="nav-item">
+                                                    <Link href="/login" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Login</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/sign-up" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Sign Up</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/forgot-password" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Forgot Password</a>
+                                                    </Link>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                    
+                                        <li className="nav-item">
+                                            <Link href="/faq" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">FAQ's</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/coming-soon" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Coming Soon</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/404" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">404 Error Page</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/#" activeClassName="active">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            Shop <Icon.ChevronDown />
+                                        </a>
+                                    </Link>
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/shop" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Shop</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/product-details" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Products Details</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/cart" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Cart</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/checkout" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Checkout</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/#">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            Blog <Icon.ChevronDown />
+                                        </a>
+                                    </Link>
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/blog-1" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Grid</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-2" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Right Sidebar</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-3" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Grid 2</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-4" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Right Sidebar 2</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-5" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Grid 3</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-6" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Right Sidebar 3</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-details" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Details</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/contact" activeClassName="active">
+                                        <a onClick={toggleNavbar} className="nav-link">Contact</a>
+                                    </Link>
+                                </li>
+                            </ul>
+                        </div>
+                    </nav>
+                </div>
+            </div>
+        </header>
+    );
+}
+
+export default NavbarStyleFour;

components/_App/NavbarStyleSix.js

@@ -0,0 +1,439 @@
+import React, { useState } from "react";
+import Link from '@/utils/ActiveLink';
+import * as Icon from 'react-feather';
+
+const NavbarStyleSix = () => {
+    const [menu, setMenu] = React.useState(true)
+ 
+    const toggleNavbar = () => {
+        setMenu(!menu)
+    }
+
+    React.useEffect(() => {
+        let elementId = document.getElementById("header");
+        document.addEventListener("scroll", () => {
+            if (window.scrollY > 170) {
+                elementId.classList.add("is-sticky");
+            } else {
+                elementId.classList.remove("is-sticky");
+            }
+        });
+        window.scrollTo(0, 0); 
+    })
+ 
+    const classOne = menu ? 'collapse navbar-collapse' : 'collapse navbar-collapse show';
+    const classTwo = menu ? 'navbar-toggler navbar-toggler-right collapsed' : 'navbar-toggler navbar-toggler-right';
+
+    return (
+        <header id="header" className="headroom navbar-style-three">
+            <div className="startp-nav">
+                <div className="container-fluid">
+                    <nav className="navbar navbar-expand-md navbar-light">
+                        <Link href="/it-startup">
+                            <a onClick={toggleNavbar} className="navbar-brand">
+                                <img src="/images/logo.png" alt="logo" />
+                            </a>
+                        </Link>
+
+                        <button 
+                            onClick={toggleNavbar} 
+                            className={classTwo}
+                            type="button" 
+                            data-toggle="collapse" 
+                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 
+                            aria-expanded="false" 
+                            aria-label="Toggle navigation"
+                        >
+                            <span className="icon-bar top-bar"></span>
+                            <span className="icon-bar middle-bar"></span>
+                            <span className="icon-bar bottom-bar"></span>
+                        </button>
+
+                        <div className={classOne} id="navbarSupportedContent">
+                            <ul className="navbar-nav m-auto">
+                                <li className="nav-item">
+                                    <Link href="/#" activeClassName="active">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            Home <Icon.ChevronDown />
+                                        </a>
+                                    </Link>
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/it-startup" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">IT Startup</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/it-startup-2" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">IT Startup Two</a>
+                                            </Link>
+                                        </li>
+ 
+                                        <li className="nav-item">
+                                            <Link href="/iot" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">IOT</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/hosting" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Hosting</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/machine-learning" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Machine Learning</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/machine-learning-2" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Machine Learning 2</a>
+                                            </Link>
+                                        </li> 
+
+                                        <li className="nav-item">
+                                            <Link href="/bigdata-analytics" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Bigdata Analytics</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/digital-agency" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Digital Agency</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/digital-agency-portfolio" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Digital Agency Portfolio</a>
+                                            </Link>
+                                        </li>
+  
+                                        <li className="nav-item">
+                                            <Link href="/pc-repair" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">PC Repair</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/#">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            About <Icon.ChevronDown />
+                                        </a>
+                                    </Link> 
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/about-1" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">About Style 1</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/about-2" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">About Style 2</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/about-3" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">About Style 3</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/#">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            Pages <Icon.ChevronDown />
+                                        </a>
+                                    </Link>
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/#" activeClassName="active">
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    Features <Icon.ChevronDown />
+                                                </a>
+                                            </Link>
+
+                                            <ul className="dropdown-menu">
+                                                <li className="nav-item">
+                                                    <Link href="/features" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Features</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/feature-details" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Features Details</a>
+                                                    </Link>
+                                                </li>
+                                            </ul>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/#" activeClassName="active">
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    Services <Icon.ChevronDown />
+                                                </a>
+                                            </Link>
+
+                                            <ul className="dropdown-menu">
+                                                <li className="nav-item">
+                                                    <Link href="/services-1" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 1</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/services-2" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 2</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/services-3" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 3</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/services-4" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 4</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/services-5" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 5</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/service-details" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Details</a>
+                                                    </Link>
+                                                </li>
+                                            </ul>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/feedback" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Feedback</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/#" activeClassName="active">
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    Projects <Icon.ChevronDown />
+                                                </a>
+                                            </Link>
+
+                                            <ul className="dropdown-menu">
+                                                <li className="nav-item">
+                                                    <Link href="/projects-1" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Project Style 1</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/projects-2" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Project Style 1</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/project-details" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Project Details</a>
+                                                    </Link>
+                                                </li>
+                                            </ul>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/team" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Team</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/pricing" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Pricing</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/#" activeClassName="active">
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    User <Icon.ChevronDown />
+                                                </a>
+                                            </Link>
+
+                                            <ul className="dropdown-menu">
+                                                <li className="nav-item">
+                                                    <Link href="/login" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Login</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/sign-up" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Sign Up</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/forgot-password" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Forgot Password</a>
+                                                    </Link>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                    
+                                        <li className="nav-item">
+                                            <Link href="/faq" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">FAQ's</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/coming-soon" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Coming Soon</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/404" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">404 Error Page</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/#" activeClassName="active">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            Shop <Icon.ChevronDown />
+                                        </a>
+                                    </Link>
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/shop" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Shop</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/product-details" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Products Details</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/cart" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Cart</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/checkout" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Checkout</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/#">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            Blog <Icon.ChevronDown />
+                                        </a>
+                                    </Link>
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/blog-1" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Grid</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-2" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Right Sidebar</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-3" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Grid 2</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-4" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Right Sidebar 2</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-5" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Grid 3</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-6" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Right Sidebar 3</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-details" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Details</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/contact" activeClassName="active">
+                                        <a onClick={toggleNavbar} className="nav-link">Contact</a>
+                                    </Link>
+                                </li>
+                            </ul>
+                        </div>
+
+                        <div className="others-option">
+                            <Link href="/cart">
+                                <a className="cart-wrapper-btn">
+                                    <Icon.ShoppingCart /> 
+                                    <span>0</span>
+                                </a>
+                            </Link>
+
+                            <Link href="/contact">
+							    <a className="btn btn-light">Support</a>
+                            </Link>
+
+                            <Link href="/login">
+							    <a className="btn btn-primary">Login</a>
+                            </Link>
+						</div>
+                    </nav>
+                </div>
+            </div>
+        </header>
+    );
+}
+
+export default NavbarStyleSix;

components/_App/NavbarStyleThree.js

@@ -0,0 +1,439 @@
+import React, { useState } from "react";
+import Link from '@/utils/ActiveLink';
+import * as Icon from 'react-feather';
+
+const NavbarStyleThree = () => {
+    const [menu, setMenu] = React.useState(true)
+ 
+    const toggleNavbar = () => {
+        setMenu(!menu)
+    }
+
+    React.useEffect(() => {
+        let elementId = document.getElementById("header");
+        document.addEventListener("scroll", () => {
+            if (window.scrollY > 170) {
+                elementId.classList.add("is-sticky");
+            } else {
+                elementId.classList.remove("is-sticky");
+            }
+        });
+        window.scrollTo(0, 0); 
+    })
+ 
+    const classOne = menu ? 'collapse navbar-collapse' : 'collapse navbar-collapse show';
+    const classTwo = menu ? 'navbar-toggler navbar-toggler-right collapsed' : 'navbar-toggler navbar-toggler-right';
+
+    return (
+        <header id="header" className="headroom navbar-style-three">
+            <div className="startp-nav">
+                <div className="container-fluid">
+                    <nav className="navbar navbar-expand-md navbar-light">
+                        <Link href="/it-startup">
+                            <a onClick={toggleNavbar} className="navbar-brand">
+                                <img src="/images/logo.png" alt="logo" />
+                            </a>
+                        </Link>
+
+                        <button 
+                            onClick={toggleNavbar} 
+                            className={classTwo}
+                            type="button" 
+                            data-toggle="collapse" 
+                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 
+                            aria-expanded="false" 
+                            aria-label="Toggle navigation"
+                        >
+                            <span className="icon-bar top-bar"></span>
+                            <span className="icon-bar middle-bar"></span>
+                            <span className="icon-bar bottom-bar"></span>
+                        </button>
+
+                        <div className={classOne} id="navbarSupportedContent">
+                            <ul className="navbar-nav ms-auto">
+                                <li className="nav-item">
+                                    <Link href="/#" activeClassName="active">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            Home <Icon.ChevronDown />
+                                        </a>
+                                    </Link>
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/it-startup" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">IT Startup</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/it-startup-2" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">IT Startup Two</a>
+                                            </Link>
+                                        </li>
+ 
+                                        <li className="nav-item">
+                                            <Link href="/iot" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">IOT</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/hosting" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Hosting</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/machine-learning" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Machine Learning</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/machine-learning-2" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Machine Learning 2</a>
+                                            </Link>
+                                        </li> 
+
+                                        <li className="nav-item">
+                                            <Link href="/bigdata-analytics" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Bigdata Analytics</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/digital-agency" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Digital Agency</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/digital-agency-portfolio" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Digital Agency Portfolio</a>
+                                            </Link>
+                                        </li>
+  
+                                        <li className="nav-item">
+                                            <Link href="/pc-repair" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">PC Repair</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/#">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            About <Icon.ChevronDown />
+                                        </a>
+                                    </Link> 
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/about-1" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">About Style 1</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/about-2" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">About Style 2</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/about-3" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">About Style 3</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/#">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            Pages <Icon.ChevronDown />
+                                        </a>
+                                    </Link>
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/#" activeClassName="active">
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    Features <Icon.ChevronDown />
+                                                </a>
+                                            </Link>
+
+                                            <ul className="dropdown-menu">
+                                                <li className="nav-item">
+                                                    <Link href="/features" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Features</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/feature-details" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Features Details</a>
+                                                    </Link>
+                                                </li>
+                                            </ul>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/#" activeClassName="active">
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    Services <Icon.ChevronDown />
+                                                </a>
+                                            </Link>
+
+                                            <ul className="dropdown-menu">
+                                                <li className="nav-item">
+                                                    <Link href="/services-1" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 1</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/services-2" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 2</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/services-3" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 3</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/services-4" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 4</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/services-5" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 5</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/service-details" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Details</a>
+                                                    </Link>
+                                                </li>
+                                            </ul>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/feedback" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Feedback</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/#" activeClassName="active">
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    Projects <Icon.ChevronDown />
+                                                </a>
+                                            </Link>
+
+                                            <ul className="dropdown-menu">
+                                                <li className="nav-item">
+                                                    <Link href="/projects-1" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Project Style 1</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/projects-2" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Project Style 1</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/project-details" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Project Details</a>
+                                                    </Link>
+                                                </li>
+                                            </ul>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/team" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Team</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/pricing" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Pricing</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/#" activeClassName="active">
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    User <Icon.ChevronDown />
+                                                </a>
+                                            </Link>
+
+                                            <ul className="dropdown-menu">
+                                                <li className="nav-item">
+                                                    <Link href="/login" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Login</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/sign-up" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Sign Up</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/forgot-password" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Forgot Password</a>
+                                                    </Link>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                    
+                                        <li className="nav-item">
+                                            <Link href="/faq" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">FAQ's</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/coming-soon" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Coming Soon</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/404" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">404 Error Page</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/#" activeClassName="active">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            Shop <Icon.ChevronDown />
+                                        </a>
+                                    </Link>
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/shop" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Shop</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/product-details" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Products Details</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/cart" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Cart</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/checkout" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Checkout</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/#">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            Blog <Icon.ChevronDown />
+                                        </a>
+                                    </Link>
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/blog-1" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Grid</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-2" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Right Sidebar</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-3" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Grid 2</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-4" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Right Sidebar 2</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-5" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Grid 3</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-6" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Right Sidebar 3</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-details" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Details</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/contact" activeClassName="active">
+                                        <a onClick={toggleNavbar} className="nav-link">Contact</a>
+                                    </Link>
+                                </li>
+                            </ul>
+                        </div>
+
+                        <div className="others-option">
+                            <Link href="/cart">
+                                <a className="cart-wrapper-btn">
+                                    <Icon.ShoppingCart /> 
+                                    <span>0</span>
+                                </a>
+                            </Link>
+
+                            <Link href="/contact">
+							    <a className="btn btn-light">Support</a>
+                            </Link>
+
+                            <Link href="/login">
+							    <a className="btn btn-primary">Login</a>
+                            </Link>
+						</div>
+                    </nav>
+                </div>
+            </div>
+        </header>
+    );
+}
+
+export default NavbarStyleThree;

components/_App/NavbarStyleTwo.js

@@ -0,0 +1,439 @@
+import React, { useState } from "react";
+import Link from '@/utils/ActiveLink';
+import * as Icon from 'react-feather';
+
+const NavbarStyleTwo = () => {
+    const [menu, setMenu] = React.useState(true)
+ 
+    const toggleNavbar = () => {
+        setMenu(!menu)
+    }
+
+    React.useEffect(() => {
+        let elementId = document.getElementById("header");
+        document.addEventListener("scroll", () => {
+            if (window.scrollY > 170) {
+                elementId.classList.add("is-sticky");
+            } else {
+                elementId.classList.remove("is-sticky");
+            }
+        });
+        window.scrollTo(0, 0); 
+    })
+ 
+    const classOne = menu ? 'collapse navbar-collapse' : 'collapse navbar-collapse show';
+    const classTwo = menu ? 'navbar-toggler navbar-toggler-right collapsed' : 'navbar-toggler navbar-toggler-right';
+
+    return (
+        <header id="header" className="headroom navbar-style-two">
+            <div className="startp-nav">
+                <div className="container">
+                    <nav className="navbar navbar-expand-md navbar-light">
+                        <Link href="/it-startup">
+                            <a onClick={toggleNavbar} className="navbar-brand">
+                                <img src="/images/logo.png" alt="logo" />
+                            </a>
+                        </Link>
+
+                        <button 
+                            onClick={toggleNavbar} 
+                            className={classTwo}
+                            type="button" 
+                            data-toggle="collapse" 
+                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 
+                            aria-expanded="false" 
+                            aria-label="Toggle navigation"
+                        >
+                            <span className="icon-bar top-bar"></span>
+                            <span className="icon-bar middle-bar"></span>
+                            <span className="icon-bar bottom-bar"></span>
+                        </button>
+
+                        <div className={classOne} id="navbarSupportedContent">
+                            <ul className="navbar-nav ms-auto">
+                                <li className="nav-item">
+                                    <Link href="/#" activeClassName="active">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            Home <Icon.ChevronDown />
+                                        </a>
+                                    </Link>
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/it-startup" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">IT Startup</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/it-startup-2" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">IT Startup Two</a>
+                                            </Link>
+                                        </li>
+ 
+                                        <li className="nav-item">
+                                            <Link href="/iot" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">IOT</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/hosting" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Hosting</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/machine-learning" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Machine Learning</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/machine-learning-2" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Machine Learning 2</a>
+                                            </Link>
+                                        </li> 
+
+                                        <li className="nav-item">
+                                            <Link href="/bigdata-analytics" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Bigdata Analytics</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/digital-agency" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Digital Agency</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/digital-agency-portfolio" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Digital Agency Portfolio</a>
+                                            </Link>
+                                        </li>
+  
+                                        <li className="nav-item">
+                                            <Link href="/pc-repair" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">PC Repair</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/#">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            About <Icon.ChevronDown />
+                                        </a>
+                                    </Link> 
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/about-1" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">About Style 1</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/about-2" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">About Style 2</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/about-3" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">About Style 3</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/#">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            Pages <Icon.ChevronDown />
+                                        </a>
+                                    </Link>
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/#" activeClassName="active">
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    Features <Icon.ChevronDown />
+                                                </a>
+                                            </Link>
+
+                                            <ul className="dropdown-menu">
+                                                <li className="nav-item">
+                                                    <Link href="/features" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Features</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/feature-details" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Features Details</a>
+                                                    </Link>
+                                                </li>
+                                            </ul>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/#" activeClassName="active">
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    Services <Icon.ChevronDown />
+                                                </a>
+                                            </Link>
+
+                                            <ul className="dropdown-menu">
+                                                <li className="nav-item">
+                                                    <Link href="/services-1" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 1</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/services-2" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 2</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/services-3" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 3</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/services-4" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 4</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/services-5" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Style 5</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/service-details" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Services Details</a>
+                                                    </Link>
+                                                </li>
+                                            </ul>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/feedback" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Feedback</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/#" activeClassName="active">
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    Projects <Icon.ChevronDown />
+                                                </a>
+                                            </Link>
+
+                                            <ul className="dropdown-menu">
+                                                <li className="nav-item">
+                                                    <Link href="/projects-1" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Project Style 1</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/projects-2" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Project Style 1</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/project-details" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Project Details</a>
+                                                    </Link>
+                                                </li>
+                                            </ul>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/team" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Team</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/pricing" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Pricing</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/#" activeClassName="active">
+                                                <a onClick={e => e.preventDefault()} className="nav-link">
+                                                    User <Icon.ChevronDown />
+                                                </a>
+                                            </Link>
+
+                                            <ul className="dropdown-menu">
+                                                <li className="nav-item">
+                                                    <Link href="/login" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Login</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/sign-up" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Sign Up</a>
+                                                    </Link>
+                                                </li>
+
+                                                <li className="nav-item">
+                                                    <Link href="/forgot-password" activeClassName="active">
+                                                        <a onClick={toggleNavbar} className="nav-link">Forgot Password</a>
+                                                    </Link>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                    
+                                        <li className="nav-item">
+                                            <Link href="/faq" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">FAQ's</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/coming-soon" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Coming Soon</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/404" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">404 Error Page</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/#" activeClassName="active">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            Shop <Icon.ChevronDown />
+                                        </a>
+                                    </Link>
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/shop" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Shop</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/product-details" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Products Details</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/cart" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Cart</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/checkout" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Checkout</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/#">
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            Blog <Icon.ChevronDown />
+                                        </a>
+                                    </Link>
+
+                                    <ul className="dropdown-menu">
+                                        <li className="nav-item">
+                                            <Link href="/blog-1" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Grid</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-2" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Right Sidebar</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-3" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Grid 2</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-4" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Right Sidebar 2</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-5" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Grid 3</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-6" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Right Sidebar 3</a>
+                                            </Link>
+                                        </li>
+
+                                        <li className="nav-item">
+                                            <Link href="/blog-details" activeClassName="active">
+                                                <a onClick={toggleNavbar} className="nav-link">Blog Details</a>
+                                            </Link>
+                                        </li>
+                                    </ul>
+                                </li>
+
+                                <li className="nav-item">
+                                    <Link href="/contact" activeClassName="active">
+                                        <a onClick={toggleNavbar} className="nav-link">Contact</a>
+                                    </Link>
+                                </li>
+                            </ul>
+                        </div>
+
+                        <div className="others-option">
+                            <Link href="/cart">
+                                <a className="cart-wrapper-btn">
+                                    <Icon.ShoppingCart /> 
+                                    <span>0</span>
+                                </a>
+                            </Link>
+
+                            <Link href="/contact">
+							    <a className="btn btn-light">Support</a>
+                            </Link>
+
+                            <Link href="/login">
+							    <a className="btn btn-primary">Login</a>
+                            </Link>
+						</div>
+                    </nav>
+                </div>
+            </div>
+        </header>
+    );
+}
+
+export default NavbarStyleTwo;

components/others/BigdataAnalytics/BigdataFunFacts.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import Link from 'next/link';
+
+const BigdataFunFacts = () => {
+    return (
+        <div className="funfacts-area bg-image ptb-80">
+			<div className="container">
+				<div className="section-title">
+					<h2>We always try to understand users expectation</h2>
+					<div className="bar"></div>
+					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+				</div>
+
+				<div className="row">
+					<div className="col-lg-3 col-md-3 col-6 col-sm-6">
+						<div className="single-funfact">
+							<h3>180K</h3>
+							<p>Downloaded</p>
+						</div>
+					</div>
+
+					<div className="col-lg-3 col-md-3 col-6 col-sm-6">
+						<div className="single-funfact">
+							<h3>20K</h3>
+							<p>Feedback</p>
+						</div>
+					</div>
+
+					<div className="col-lg-3 col-md-3 col-6 col-sm-6">
+						<div className="single-funfact">
+							<h3>500+</h3>
+							<p>Workers</p>
+						</div>
+					</div>
+
+					<div className="col-lg-3 col-md-3 col-6 col-sm-6">
+						<div className="single-funfact">
+							<h3>70+</h3>
+							<p>Contributors</p>
+						</div>
+					</div>
+				</div>
+
+				<div className="contact-cta-box">
+					<h3>Have any question about us?</h3>
+					<p>Don't hesitate to contact us</p>
+
+                    <Link href="/contact">
+					    <a className="btn btn-primary">Contact Us</a>
+                    </Link>
+				</div>
+			</div>
+		</div>
+    )
+}
+
+export default BigdataFunFacts;  

components/others/BigdataAnalytics/BlogPost.js

@@ -0,0 +1,142 @@
+import React from 'react';
+import Link from 'next/link';
+import * as Icon from 'react-feather';
+
+const BlogPost = () => {
+    return (
+        <div className="blog-area pt-80 pb-50">
+			<div className="container">
+				<div className="section-title">
+					<h2>Our Recent Story</h2>
+					<div className="bar"></div>
+					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                </div>
+                
+                <div className="row justify-content-center">
+                    <div className="col-lg-4 col-md-6">
+                        <div className="single-blog-post-box bg-f4faff">
+                            <div className="entry-thumbnail">
+                                <Link href="/blog-details">
+                                    <a>
+                                        <img src="/images/blog-image/blog1.jpg" alt="image" />
+                                    </a>
+                                </Link>
+                            </div>
+
+                            <div className="entry-post-content">
+                                <div className="entry-meta">
+                                    <ul>
+                                        <li><a >Admin</a></li>
+                                        <li>August 15, 2021</li>
+                                    </ul>
+                                </div>
+
+                                <h3>
+                                    <Link href="/blog-details">
+                                        <a>Making Peace With The Feast Or Famine Of Freelancing</a>
+                                    </Link>
+                                </h3>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p>
+
+                                <Link href="/blog-details">
+                                    <a className="learn-more-btn">
+                                        Read Story <Icon.Plus />
+                                    </a>
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="col-lg-4 col-md-6">
+                        <div className="single-blog-post-box bg-f4faff">
+                            <div className="entry-thumbnail">
+                                <Link href="/blog-details">
+                                    <a><img src="/images/blog-image/blog2.jpg" alt="image" /></a>
+                                </Link>
+                            </div>
+
+                            <div className="entry-post-content">
+                                <div className="entry-meta">
+                                    <ul>
+                                        <li><a >Admin</a></li>
+                                        <li>August 18, 2021</li>
+                                    </ul>
+                                </div>
+
+                                <h3>
+                                    <Link href="/blog-details">
+                                        <a>I Used The Web For A Day On A 50 MB Budget</a>
+                                    </Link>
+                                </h3>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p>
+                                
+                                <Link href="/blog-details">
+                                    <a className="learn-more-btn">
+                                        Read Story <Icon.Plus />
+                                    </a>
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="col-lg-4 col-md-6">
+                        <div className="single-blog-post-box bg-f4faff">
+                            <div className="entry-thumbnail">
+                                <Link href="/blog-details">
+                                    <a><img src="/images/blog-image/blog3.jpg" alt="image" /></a>
+                                </Link>
+                            </div>
+
+                            <div className="entry-post-content">
+                                <div className="entry-meta">
+                                    <ul>
+                                        <li><a >Admin</a></li>
+                                        <li>August 15, 2021</li>
+                                    </ul>
+                                </div>
+
+                                <h3>
+                                    <Link href="/blog-details">
+                                        <a>Here are the 5 most telling signs of micromanagement</a>
+                                    </Link>
+                                </h3>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p>
+                                
+                                <Link href="/blog-details">
+                                    <a className="learn-more-btn">
+                                        Read Story <Icon.Plus />
+                                    </a>
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+			</div>
+
+            {/* Shape Images */}
+			<div className="shape1">
+                <img src="/images/shape1.png" alt="shape" />
+            </div>
+			<div className="shape2 rotateme">
+                <img src="/images/shape2.svg" alt="shape" />
+            </div>
+			<div className="shape3">
+                <img src="/images/shape3.svg" alt="shape" />
+            </div>
+			<div className="shape4">
+                <img src="/images/shape4.svg" alt="shape" />
+            </div>
+			<div className="shape6 rotateme">
+                <img src="/images/shape4.svg" alt="shape" />
+            </div>
+			<div className="shape7">
+                <img src="/images/shape4.svg" alt="shape" />
+            </div>
+			<div className="shape8 rotateme">
+                <img src="/images/shape2.svg" alt="shape" />
+            </div>
+        </div>
+    )
+}
+
+export default BlogPost;