first commit

.gitignore

@@ -0,0 +1,28 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+/out
+
+# misc
+.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

CHANGELOG.md

@@ -0,0 +1,51 @@
+# Change Log
+
+## [1.1.0] 2020-05-08
+### Bug fixing
+- `https://github.com/creativetimofficial/nextjs-material-kit/issues/10` (changed the `title`, from simple `string` to `node`, so now, you can pass a title like so `title={<Link href="/"><a>Free Chat</a></Link>}` if you want to have link functionality - NOTE: the `node` that you pass to the `InfoArea` component will have to be styled)
+- `https://github.com/creativetimofficial/nextjs-material-kit/issues/6` (check `https://github.com/creativetimofficial/nextjs-material-kit/pull/7` for more info)
+- `https://github.com/creativetimofficial/nextjs-material-kit/issues/5`
+- `https://github.com/creativetimofficial/nextjs-material-kit/issues/4`
+- `https://github.com/creativetimofficial/nextjs-material-kit/issues/2`
+### Major style changes
+- `assets/jss/nextjs-material-kit.js`
+- `assets/jss/nextjs-material-kit/components/buttonStyle.js`
+- `assets/jss/nextjs-material-kit/components/headerStyle.js`
+- `assets/jss/nextjs-material-kit/components/navPillsStyle.js`
+- `assets/jss/nextjs-material-kit/components/paginationStyle.js`
+- `assets/jss/nextjs-material-kit/components/paginationStyle.js`
+### Deleted components
+### Added components
+### Deleted dependencies
+### Added dependencies
+### Updated dependencies
+```
+@material-ui/core        4.3.2   →    4.9.13
+@material-ui/icons       4.2.1   →     4.9.1
+moment                  2.24.0   →    2.25.3
+next                     9.0.5   →     9.3.6
+next-images              1.1.2   →     1.3.1
+nextjs-redirect          1.0.2   →     2.0.2
+node-sass               4.12.0   →    4.14.1
+nouislider              14.0.2   →    14.4.0
+react                   16.9.0   →   16.13.1
+react-dom               16.9.0   →   16.13.1
+react-swipeable-views   0.13.3   →    0.13.9
+styled-components        4.3.2   →     5.1.0
+webpack                 4.39.3   →    4.43.0
+```
+### Warning
+_The following warnings come from some of our dependencies, however they do not affect the UI or the functionality of the product - if the issues will persist and will change into errors in the next version of React (v17), we will drop their usage and replace with other dependencies:_
+```
+npm WARN deprecated popper.js@1.16.1: Popper changed home, find its new releases at @popperjs/core
+npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
+npm WARN deprecated mkdirp@0.5.3: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
+```
+_The following dependencies raise warnings (of deprecation or renamed) in development mode: DateTime, ReactSwipableView. If the warnings will persist, and will become errors in React 17, we will drop their usage and replace them with other plugins._
+
+## [1.0.0] 2019-09-13
+### Original Release
+- Started project with NextJS
+- Added Material-UI as base framework
+- Added design from Material Kit by Creative Tim
+- Added components from Material Kit React by Creative Tim

Documentation/assets/css/demo-documentation.css

@@ -0,0 +1,637 @@
+body{
+    background-color: #E5E5E5;
+    color: #3C4858;
+}
+
+.section .wizard-card{
+    min-height: inherit;
+}
+
+.tim-row{
+    margin-bottom: 20px;
+}
+.tim-white-buttons {
+    background-color: #777777;
+}
+.title{
+    margin-top: 30px;
+    margin-bottom: 25px;
+    min-height: 32px;
+    font-weight: 500;
+}
+
+.tim-row p{
+    font-size: 16px;
+    line-height: 1.6em;
+}
+
+.title.text-center{
+    margin-bottom: 50px;
+}
+.tim-typo{
+    padding-left: 25%;
+    margin-bottom: 40px;
+    position: relative;
+}
+.tim-typo .tim-note{
+    bottom: 10px;
+    color: #c0c1c2;
+    display: block;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 13px;
+    left: 0;
+    margin-left: 20px;
+    position: absolute;
+    width: 260px;
+}
+.tim-row{
+    padding-top: 50px;
+}
+.tim-row h3{
+    margin-top: 0;
+}
+.switch{
+    margin-right: 20px;
+}
+#navbar-full .navbar{
+    border-radius: 0 !important;
+    margin-bottom: 15px;
+    z-index: 2;
+}
+.space{
+    height: 130px;
+    display: block;
+}
+.space-110{
+    height: 110px;
+    display: block;
+}
+.space-50{
+    height: 50px;
+    display: block;
+}
+.space-70{
+    height: 70px;
+    display: block;
+}
+.navigation-example .img-src{
+    background-attachment: scroll;
+}
+
+.navigation-example{
+    background-image: url('../img/bg.jpg');
+    background-position: center center;
+    background-size: cover;
+    margin-top:0;
+    min-height: 740px;
+}
+#notifications{
+    background-color: #FFFFFF;
+    display: block;
+    width: 100%;
+    position: relative;
+}
+#notifications .alert-danger{
+    margin-bottom: 0px;
+}
+.tim-note{
+    text-transform: capitalize;
+}
+
+#buttons .btn{
+    margin: 0 0px 15px;
+}
+.space-100{
+    height: 100px;
+    display: block;
+    width: 100%;
+}
+
+.be-social{
+    padding-bottom: 20px;
+/*     border-bottom: 1px solid #aaa; */
+    margin: 0 auto 40px;
+}
+.txt-white{
+    color: #FFFFFF;
+}
+.txt-gray{
+    color: #ddd !important;
+}
+
+
+.parallax{
+  width:100%;
+  height:570px;
+
+  display: block;
+  background-attachment: fixed;
+    background-repeat:no-repeat;
+    background-size:cover;
+    background-position: center center;
+
+}
+
+.logo-container.logo-documentation{
+    position: relative;
+    top: 0;
+    left: 0;
+}
+
+.logo-container .logo{
+    overflow: hidden;
+    border-radius: 50%;
+    border: 1px solid #333333;
+    width: 50px;
+    float: left;
+}
+
+.logo-container .brand{
+    font-size: 16px;
+    line-height: 18px;
+    float: left;
+    color: #fff;
+    margin-left: 10px;
+    margin-top: 7px;
+    width: 70px;
+    height: 40px;
+    text-align: left;
+}
+
+
+.navbar-default .logo-container .brand{
+    color: #999999;
+}
+.navbar-transparent .logo-container .brand{
+    color: #FFFFFF;
+}
+
+.logo-container .brand-material{
+    font-size: 18px;
+    margin-top: 15px;
+    height: 25px;
+    width: auto;
+}
+
+.logo-container .logo img{
+    width: 100%;
+}
+.navbar-small .logo-container .brand{
+    color: #333333;
+}
+
+.fixed-section{
+    top: 90px;
+    max-height: 80vh;
+    overflow: scroll;
+}
+.fixed-section ul li{
+    list-style: none;
+}
+.fixed-section li a{
+    font-size: 14px;
+    padding: 2px;
+    display: block;
+    color: #666666;
+}
+.fixed-section li a.active{
+    color: #00bbff;
+}
+.fixed-section.float{
+    position: fixed;
+    top: 100px;
+    width: 200px;
+    margin-top: 0;
+}
+
+
+.parallax .parallax-image{
+    width: 100%;
+    overflow: hidden;
+    position: absolute;
+}
+.parallax .parallax-image img{
+    width: 100%;
+}
+
+@media (max-width: 768px){
+    .parallax .parallax-image{
+         width: 100%;
+         height: 640px;
+         overflow: hidden;
+     }
+    .parallax .parallax-image img{
+       height: 100%;
+       width: auto;
+   }
+}
+
+.separator{
+    content: "Separator";
+    color: #FFFFFF;
+    display: block;
+    width: 100%;
+    padding: 20px;
+}
+.separator-line{
+    background-color: #EEE;
+    height: 1px;
+    width: 100%;
+    display: block;
+}
+.separator.separator-gray{
+    background-color: #EEEEEE;
+}
+.social-buttons-demo .btn{
+    margin-right: 5px;
+    margin-bottom: 7px;
+}
+
+.img-container{
+    width: 100%;
+    overflow: hidden;
+}
+.img-container img{
+    width: 100%;
+}
+
+.lightbox img{
+    width: 100%;
+}
+.lightbox .modal-content{
+    overflow: hidden;
+}
+.lightbox .modal-body{
+    padding: 0;
+}
+@media screen and (min-width: 991px){
+    .lightbox .modal-dialog{
+        width: 960px;
+    }
+}
+
+@media (max-width: 768px){
+    .btn, .btn-morphing{
+        margin-bottom: 10px;
+    }
+    .parallax .motto{
+        top: 170px;
+        margin-top: 0;
+        font-size: 60px;
+        width: 270px;
+    }
+}
+
+/*       Loading dots  */
+
+/*      transitions */
+.presentation .front, .presentation .front:after, .presentation .front .btn, .logo-container .logo, .logo-container .brand{
+     -webkit-transition: all .2s;
+    -moz-transition: all .2s;
+    -o-transition: all .2s;
+    transition: all .2s;
+}
+
+
+#images h4{
+    margin-bottom: 30px;
+}
+#javascriptComponents{
+    padding-bottom: 0;
+}
+#javascriptComponents .btn-raised{
+    margin: 10px 5px;
+}
+
+
+/*      layer animation          */
+
+.layers-container{
+    display: block;
+    margin-top: 50px;
+    position: relative;
+}
+.layers-container img {
+  position: absolute;
+  width: 100%;
+  height: auto;
+  top: 0;
+  left: 0;
+  text-align: center;
+}
+
+.section-black {
+  background-color: #333;
+}
+
+.animate {
+  transition: 1.5s ease-in-out;
+  -moz-transition: 1.5s ease-in-out;
+  -webkit-transition: 1.5s ease-in-out;
+}
+
+.navbar-default.navbar-small .logo-container .brand{
+    color: #333333;
+}
+.navbar-transparent.navbar-small .logo-container .brand{
+    color: #FFFFFF;
+}
+.navbar-default.navbar-small .logo-container .brand{
+    color: #333333;
+}
+
+.sharing-area{
+    margin-top: 80px;
+}
+.sharing-area .btn{
+    margin: 15px 4px 0;
+    color: #FFFFFF;
+}
+.sharing-area .btn i{
+    font-size: 18px;
+    position: relative;
+    top: 2px;
+    margin-right: 5px;
+}
+.sharing-area .btn-twitter{
+    background-color: #55acee;
+}
+.sharing-area .btn-facebook{
+    background-color: #3b5998;
+}
+.sharing-area .btn-google-plus{
+    background-color: #dd4b39;
+}
+.sharing-area .btn-github{
+    background-color: #333333;
+}
+.section-thin,
+.section-notifications{
+    padding: 0;
+}
+.section-navbars{
+    padding-top: 0;
+}
+#navbar .navbar{
+    border-radius: 0;
+}
+.section-tabs{
+    background: #EEEEEE;
+}
+.section-pagination{
+    padding-bottom: 0;
+}
+.section-download h4{
+    margin-bottom: 50px;
+}
+.section-examples a{
+    text-decoration: none;
+}
+.section-examples h5{
+    margin-top: 30px;
+}
+.components-page .wrapper > .header,
+.tutorial-page .wrapper > .header{
+    height: 400px;
+    padding-top: 100px;
+    background-size: cover;
+    background-position: center center;
+}
+
+.main {
+  background: #FFFFFF;
+  position: relative;
+  z-index: 3;
+}
+
+.main-raised {
+    margin: -60px 30px 0px;
+    border-radius: 6px;
+    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
+}
+
+.header-filter {
+  position: relative;
+}
+.header-filter:before, .header-filter:after {
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  display: block;
+  left: 0;
+  top: 0;
+  content: "";
+}
+.header-filter::before {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.header-filter .container {
+  z-index: 2;
+  position: relative;
+  padding-top: 20vh;
+}
+
+.page-header .title{
+    font-weight: 700;
+    font-family: "Roboto Slab", "Times New Roman", serif;
+    line-height: 1.15em;
+    color: #fff;
+}
+
+.section {
+  padding: 50px 0;
+  background-position: center center;
+  background-size: cover;
+}
+
+
+
+.navbar {
+  border: 0;
+  border-radius: 3px;
+  box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 3px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
+  padding: 10px 0;
+
+  -webkit-transition: all 150ms ease 0s;
+ -moz-transition: all 150ms ease 0s;
+ -o-transition: all 150ms ease 0s;
+ -ms-transition: all 150ms ease 0s;
+ transition: all 150ms ease 0s;
+}
+.navbar .navbar-brand {
+  position: relative;
+  height: 50px;
+  line-height: 30px;
+  color: inherit;
+  padding: 10px 15px;
+}
+.navbar .navbar-brand:hover, .navbar .navbar-brand:focus {
+  color: inherit;
+  background-color: transparent;
+}
+
+.navbar.navbar-transparent {
+  background-color: transparent;
+  box-shadow: none;
+  color: #fff;
+  padding-top: 25px;
+}
+
+.navbar-fixed-top {
+  border-radius: 0;
+}
+
+.navbar .navbar-nav > li > a .material-icons,
+.navbar .navbar-nav > li > a .fa {
+  font-size: 20px;
+  max-width: 20px;
+}
+.navbar .navbar-nav > li > a:hover,
+.navbar .navbar-nav > li > a:focus {
+    color: inherit;
+    background-color: transparent;
+}
+
+.navbar .navbar-nav > li > a:not(.btn) .material-icons {
+  margin-top: -3px;
+  top: 0px;
+  position: relative;
+  margin-right: 3px;
+}
+
+.navbar, .navbar.navbar-default {
+  background-color: #9c27b0;
+  color: #FFFFFF;
+}
+
+@media (max-width: 991px) {
+    .fixed-section.affix {
+        position: relative;
+        margin-bottom: 100px;
+    }
+
+}
+
+
+@media (max-width: 1199px) {
+
+  .navbar .navbar-brand {
+    height: 50px;
+    padding: 10px 15px;
+  }
+}
+
+footer {
+  padding: 15px 0;
+  text-align: center;
+
+}
+.footer a{
+    font-weight: bold;
+}
+
+footer.footer-documentation{
+    margin-top: 0;
+    bottom: 0;
+    text-shadow: none;
+    color: inherit;
+}
+
+footer.footer-documentation li a{
+    color: inherit;
+}
+
+footer.footer-documentation li a:hover,
+footer.footer-documentation li a:focus{
+    color: #89229b;
+}
+
+footer ul {
+  margin-bottom: 0;
+  padding: 0;
+  list-style: none;
+}
+footer ul li {
+  display: inline-block;
+}
+footer ul li a {
+  color: inherit;
+  padding: 15px;
+  font-weight: 500;
+  font-size: 12px;
+  text-transform: uppercase;
+  border-radius: 3px;
+  text-decoration: none;
+  position: relative;
+  display: block;
+}
+footer ul li a:hover {
+  text-decoration: none;
+}
+footer ul li .btn {
+  margin: 0;
+}
+footer ul.links-horizontal:first-child a {
+  padding-left: 0;
+}
+footer ul.links-horizontal:last-child a {
+  padding-right: 0;
+}
+footer ul.links-vertical li {
+  display: block;
+}
+footer ul.links-vertical li a {
+  padding: 5px 0;
+}
+footer .social-buttons a,
+footer .social-buttons .btn {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+footer .footer-brand {
+  float: left;
+  height: 50px;
+  padding: 15px 15px;
+  font-size: 18px;
+  line-height: 20px;
+  margin-left: -15px;
+}
+footer .footer-brand:hover, footer .footer-brand:focus {
+  color: #3C4858;
+}
+footer .copyright {
+  padding: 15px 0;
+  text-align: center;
+}
+footer .copyright .material-icons {
+  font-size: 18px;
+  position: relative;
+  top: 3px;
+}
+footer .pull-center {
+  display: inline-block;
+  float: none;
+}
+
+@media (max-width: 768px) {
+  .footer .copyright {
+    display: inline-block;
+    text-align: center;
+    padding: 10px 0;
+    float: none !important;
+    width: 100%;
+  }
+
+  .navbar.navbar-transparent {
+    background-color: rgba(0, 0, 0, 0.4);
+    padding-top: 10px;
+    border-radius: 0;
+  }
+
+  .main-raised {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+}

Documentation/tutorial-components.html

@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link
+      rel="apple-touch-icon"
+      sizes="76x76"
+      href="assets/img/apple-icon.png"
+    />
+    <link rel="icon" type="image/png" href="assets/img/favicon.png" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <title>Tutorial Components - NextJS Material Kit by Creative Tim</title>
+    <meta
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+      name="viewport"
+    />
+    <!--     Fonts and icons     -->
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"
+    />
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"
+    />
+    <!-- CSS Files -->
+    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
+    <link href="assets/css/material-dashboard.css" rel="stylesheet" />
+    <link href="assets/css/demo-documentation.css" rel="stylesheet" />
+    <style media="screen">
+      .page-header {
+        height: 100vh;
+      }
+
+      .page-header .description {
+        color: #ffffff;
+      }
+
+      .header-filter .container {
+        padding-top: 33vh;
+      }
+    </style>
+  </head>
+
+  <body class="components-page">
+    <nav
+      class="navbar navbar-transparent navbar-fixed-top navbar-color-on-scroll"
+    >
+      <div class="container">
+        <!-- Brand and toggle get grouped for better mobile display -->
+        <div class="navbar-header">
+          <button id="menu-toggle" type="button" class="navbar-toggle">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar bar1"></span>
+            <span class="icon-bar bar2"></span>
+            <span class="icon-bar bar3"></span>
+          </button>
+          <a href="https://www.creative-tim.com?ref=njsmk-static-docs" target="_blank">
+            <div class="logo-container">
+              <div class="logo">
+                <img src="assets/img/new_logo.png" alt="Creative Tim Logo" />
+              </div>
+              <div class="brand">Creative Tim</div>
+            </div>
+          </a>
+        </div>
+        <!-- Collect the nav links, forms, and other content for toggling -->
+        <div class="collapse navbar-collapse">
+          <ul class="nav navbar-nav navbar-right">
+            <li>
+              <a
+                href="https://demos.creative-tim.com/nextjs-material-kit/components?ref=njsmk-static-docs"
+                target="_blank"
+                >NextJS Material Kit</a
+              >
+            </li>
+            <li>
+              <a
+                href="https://github.com/creativetimofficial/nextjs-material-kit/issues"
+                target="_blank"
+                >Have an issue?</a
+              >
+            </li>
+          </ul>
+        </div>
+        <!-- /.navbar-collapse -->
+      </div>
+      <!-- /.container-fluid -->
+    </nav>
+    <div
+      class="page-header header-filter"
+      style="background-image: url('assets/img/cover.jpeg');"
+    >
+      <div class="container">
+        <div class="row">
+          <div class="col-md-8 col-md-offset-2 text-center">
+            <h1 class="title ">NextJS Material Kit</h1>
+            <h4 class="title">Tutorial and Components</h4>
+            <h5 class="description">v1.1.0</h5>
+            <a
+              href="https://demos.creative-tim.com/nextjs-material-kit/documentation/tutorial?ref=njsmk-static-docs"
+              class="btn btn-rose btn-fill btn-round"
+              target="_blank"
+              >View documentation</a
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <footer class="footer footer-transparent">
+      <div class="container">
+        <nav class="pull-left">
+          <ul>
+            <li>
+              <a href="https://www.creative-tim.com?ref=njsmk-static-docs" target="_blank">
+                Creative Tim
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://www.creative-tim.com/presentation?ref=njsmk-static-docs"
+                target="_blank"
+              >
+                About Us
+              </a>
+            </li>
+            <li>
+              <a href="http://blog.creative-tim.com?ref=njsmk-static-docs" target="_blank"> Blog </a>
+            </li>
+            <li>
+              <a href="https://www.creative-tim.com/license?ref=njsmk-static-docs" target="_blank">
+                Licenses
+              </a>
+            </li>
+          </ul>
+        </nav>
+        <div class="social-area pull-right">
+          <a
+            class="btn btn-just-icon btn-twitter btn-simple"
+            href="https://twitter.com/CreativeTim"
+            target="_blank"
+          >
+            <i class="fa fa-twitter"></i>
+          </a>
+          <a
+            class="btn btn-just-icon btn-facebook btn-simple"
+            href="https://www.facebook.com/CreativeTim"
+            target="_blank"
+          >
+            <i class="fa fa-facebook-square"></i>
+          </a>
+          <a
+            class="btn btn-just-icon btn-google btn-simple"
+            href="https://plus.google.com/+CreativetimPage"
+            target="_blank"
+          >
+            <i class="fa fa-google-plus"></i>
+          </a>
+          <a
+            class="btn btn-just-icon btn-instagram btn-simple"
+            href="https://www.instagram.com/creativetimofficial"
+            target="_blank"
+          >
+            <i class="fa fa-instagram"></i>
+          </a>
+        </div>
+        <div class="copyright">
+          &copy;
+          <script>
+            document.write(new Date().getFullYear());
+          </script>
+          Creative Tim, made with love
+        </div>
+      </div>
+    </footer>
+  </body>
+  <!--   Core JS Files   -->
+  <script src="assets/js/jquery-3.2.1.min.js" type="text/javascript"></script>
+  <script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
+  <script>
+    var header_height;
+    var fixed_section;
+    var floating = false;
+
+    $().ready(function() {
+      suggestions_distance = $("#suggestions").offset();
+      pay_height = $(".fixed-section").outerHeight();
+
+      $(window).on("scroll", md.checkScrollForTransparentNavbar);
+      demo.initDocumentationCharts();
+    });
+  </script>
+</html>

ISSUE_TEMPLATE.md

@@ -0,0 +1,13 @@
+<!--
+ IMPORTANT: Please use the following link to create a new issue:
+
+  https://www.creative-tim.com/new-issue/nextjs-material-kit
+
+**If your issue was not created using the app above, it will be closed immediately.**
+-->
+
+<!--
+Love Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:
+👉  https://www.creative-tim.com/bundles
+👉  https://www.creative-tim.com
+-->

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Creative Tim
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,245 @@
+# [NextJS Material Kit](https://demos.creative-tim.com/nextjs-material-kit?ref=njsmk-readme) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/share?url=https%3A%2F%2Fdemos.creative-tim.com%2Fnextjs-material-kit%2Fcomponents&text=NextJS%20Material%20Kit&via=Creative%20Tim&hashtags=nextjs%20%23creativetim%20%23materialdesign)
+
+
+ ![version](https://img.shields.io/badge/version-1.1.0-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/nextjs-material-kit.svg?maxAge=2592000)](https://github.com/creativetimofficial/nextjs-material-kit/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/nextjs-material-kit.svg?maxAge=2592000)](https://github.com/creativetimofficial/nextjs-material-kit/issues?q=is%3Aissue+is%3Aclosed) [![Join the chat at https://gitter.im/NIT-dgp/General](https://badges.gitter.im/NIT-dgp/General.svg)](https://gitter.im/creative-tim-general/Lobby) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/E4aHAQy)
+
+
+![Product Presentation Image](https://raw.githubusercontent.com/creativetimofficial/public-assets/master/nextjs-material-kit/nextjs-material-kit.jpg)
+
+**[NextJS Material Kit](https://demos.creative-tim.com/nextjs-material-kit/?ref=njsmk-readme)** is a Free Material-UI Kit with a fresh, new design inspired by Google's material design and is was developed using [NextJS](https://nextjs.org/?ref=creativetim), starting from [this starter project](https://github.com/mui-org/material-ui/tree/master/examples/nextjs) by [Material-UI](https://material-ui.com/?ref=creativetim) and [Material Kit React](https://www.creative-tim.com/product/material-kit-react?ref=njsmk-readme) by Creative Tim. You asked for it, so we built it. It's a great pleasure to introduce to you the material concepts in an easy to use and beautiful set of components. Along with the restyling of the Material-UI elements, you will find three fully-coded example pages, to help you design your NextJS project.
+
+**[NextJS Material Kit](https://demos.creative-tim.com/nextjs-material-kit/?ref=njsmk-readme)** makes use of light, surface and movement. It uses a deliberate color choice, edge-to-edge imagery and large scale typography. The general layout resembles sheets of paper following multiple different layers, so that the depth and order is obvious. The navigation stays mainly on the left and the actions on the right.
+
+This new design has elements that have been the result of research regarding ink and paper and the way objects and materials interact in real life. The result is a beautiful and consistent set of elements that can get you started with your next project. NextJS Material Kit is a great tool if you are looking to create a web presence for your web application and need to be consistent, leaving the impression of visually similar elements. It is also a great resource in its own right, looking gorgeous and helping you build your web pages.
+
+**[NextJS Material Kit](https://demos.creative-tim.com/nextjs-material-kit/?ref=njsmk-readme)** was built with the help of [nextjs](https://nextjs.org/?ref=creativetim) and it uses a framework built by our friends from **[Material-UI](https://material-ui.com/?ref=creativetim)**, who did an amazing job creating the backbone for the material effects, animations, ripples and transitions. Big thanks to this team for the effort and forward thinking they put into it.
+
+
+## Table of Contents
+
+* [Versions](#versions)
+* [Demo](#demo)
+* [Quick Start](#quick-start)
+* [Documentation](#documentation)
+* [File Structure](#file-structure)
+* [Browser Support](#browser-support)
+* [Resources](#resources)
+* [Reporting Issues](#reporting-issues)
+* [Licensing](#licensing)
+* [Useful Links](#useful-links)
+
+
+## Versions
+
+[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/html-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/material-kit?ref=njsmk-readme)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/nextjs_logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/nextjs-material-kit?ref=njsmk-readme)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/vue-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/vue-material-kit?ref=njsmk-readme)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/react-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/material-kit-react?ref=njsmk-readme)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/react-native-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/material-kit-react-native?ref=njsmk-readme)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/figma-logo.jpg?raw=true" width="60" height="60" />](https://demos.creative-tim.com/material-kit-figma/presentation.html?ref=njsmk-readme)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/wordpress-logo.jpg?raw=true" width="60" height="60" />](https://themeisle.com/themes/hestia/?ref=creativetim)[<img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/photoshop-logo.jpg" width="60" height="60" />](https://github.com/creativetimofficial/material-kit/tree/photoshop)[<img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/sketch-logo.jpg" width="60" height="60" />](https://github.com/creativetimofficial/material-kit/tree/sketch)
+
+
+
+| React Native | Figma | WordPress | NextJS |
+| ---  | --- | --- | --- |
+| [![Material Kit React Native](https://github.com/creativetimofficial/public-assets/blob/master/material-kit-react-native/opt_mkrn_thumbnail.jpg?raw=true)](https://www.creative-tim.com/product/material-kit-react-native?ref=njsmk-readme) | [![Material Kit Figma](https://github.com/creativetimofficial/public-assets/blob/master/material-kit-figma/material-kit-figma.jpg?raw=true)](https://demos.creative-tim.com/material-kit-figma/presentation.html?ref=njsmk-readme) | [![Material Kit WordPress](https://github.com/creativetimofficial/public-assets/blob/master/material-kit-wordpress/opt_smd_thumbnail.jpg?raw=true)](https://themeisle.com/themes/hestia/?ref=creativetim)  | [![NextJS Material Kit](https://github.com/creativetimofficial/public-assets/blob/master/nextjs-material-kit/nextjs-material-kit.jpg?raw=true)](https://www.creative-tim.com/product/nextjs-material-kit?ref=njsmk-readme)
+
+
+| HTML | React | Vue |
+| --- | --- | --- |
+| [![Material Kit  HTML](https://github.com/creativetimofficial/public-assets/blob/master/material-kit/material-kit.jpeg?raw=true)](https://www.creative-tim.com/product/material-kit?ref=njsmk-readme)  | [![Material Kit React](https://github.com/creativetimofficial/public-assets/blob/master/material-kit-react/material-kit-react.jpeg?raw=true)](https://www.creative-tim.com/product/material-kit-react?ref=njsmk-readme)  | [![Vue Material Kit](https://github.com/creativetimofficial/public-assets/blob/master/vue-material-kit/vue-material-kit.jpeg?raw=true)](https://www.creative-tim.com/product/vue-material-kit?ref=njsmk-readme)
+
+## Demo
+
+| Buttons | Inputs | Navbars  |
+| --- | --- | ---  |
+| [![Buttons](https://github.com/creativetimofficial/public-assets/blob/master/nextjs-material-kit/buttons.png?raw=true)](https://demos.creative-tim.com/nextjs-material-kit/?ref=njsmk-readme)  | [![Inputs](https://github.com/creativetimofficial/public-assets/blob/master/nextjs-material-kit/inputs.png?raw=true)](https://demos.creative-tim.com/nextjs-material-kit/?ref=njsmk-readme)  | [![Navbar](https://github.com/creativetimofficial/public-assets/blob/master/nextjs-material-kit/navbars.png?raw=true)](https://demos.creative-tim.com/nextjs-material-kit/?ref=njsmk-readme)  
+
+| Login Page | Landing Page | Profile Page  |
+| --- | --- | ---  |
+| [![Login Page](https://raw.githubusercontent.com/creativetimofficial/public-assets/master/nextjs-material-kit/login-page.png)](https://demos.creative-tim.com/nextjs-material-kit/login?ref=njsmk-readme)  | [![Landing Page](https://github.com/creativetimofficial/public-assets/blob/master/nextjs-material-kit/landing-page.png?raw=true)](https://demos.creative-tim.com/nextjs-material-kit/landing?ref=njsmk-readme)  | [![Profile Page](https://github.com/creativetimofficial/public-assets/blob/master/nextjs-material-kit/profile-page.png?raw=true)](https://demos.creative-tim.com/nextjs-material-kit/profile?ref=njsmk-readme)  
+
+[View More](https://demos.creative-tim.com/nextjs-material-kit/?ref=njsmk-readme)
+
+
+## Quick start
+
+- [Download from Github](https://github.com/creativetimofficial/nextjs-material-kit/archive/master.zip).
+- [Download from Creative Tim](https://www.creative-tim.com/product/nextjs-material-kit?ref=njsmk-readme).
+- Clone the repo: `git clone https://github.com/creativetimofficial/nextjs-material-kit.git`.
+- `npm i nextjs-material-kit`
+- Install with [Bower](https://bower.io/?ref=creativetim): ```bower install nextjs-material-kit```.
+
+
+## Documentation
+The documentation for the NextJS Material Kit is hosted at our [website](https://demos.creative-tim.com/nextjs-material-kit/documentation/tutorial?ref=njsmk-readme).
+
+
+## File Structure
+Within the download you'll find the following directories and files:
+
+```
+nextjs-material-kit
+.
+├── CHANGELOG.md
+├── ISSUE_TEMPLATE.md
+├── LICENSE.md
+├── README.md
+├── next.config.js
+├── package.json
+├── Documentation
+│   ├── assets
+│   └── tutorial-components.html
+├── assets
+│   ├── css
+│   ├── img
+│   │   ├── examples
+│   │   └── faces
+│   ├── jss
+│   │   ├── nextjs-material-kit
+│   │   │   ├── components
+│   │   │   └── pages
+│   │   │       ├── componentsSections
+│   │   │       └── landingPageSections
+│   │   └── nextjs-material-kit.js
+│   └── scss
+│       ├── core
+│       │   ├── mixins
+│       │   └── variables
+│       ├── plugins
+│       └── nextjs-material-kit.scss
+├── pages
+│   ├── _app.js
+│   ├── _document.js
+│   ├── _error.js
+│   ├── components.js
+│   ├── index.js
+│   ├── landingpage.js
+│   ├── loginpage.js
+│   └── profilepage.js
+├── components
+│   ├── Badge
+│   │   └── Badge.js
+│   ├── Card
+│   │   ├── Card.js
+│   │   ├── CardBody.js
+│   │   ├── CardFooter.js
+│   │   └── CardHeader.js
+│   ├── Clearfix
+│   │   └── Clearfix.js
+│   ├── CustomButtons
+│   │   └── Button.js
+│   ├── CustomDropdown
+│   │   └── CustomDropdown.js
+│   ├── CustomInput
+│   │   └── CustomInput.js
+│   ├── CustomLinearProgress
+│   │   └── CustomLinearProgress.js
+│   ├── CustomTabs
+│   │   └── CustomTabs.js
+│   ├── Footer
+│   │   └── Footer.js
+│   ├── Grid
+│   │   ├── GridContainer.js
+│   │   └── GridItem.js
+│   ├── Header
+│   │   ├── Header.js
+│   │   └── HeaderLinks.js
+│   ├── InfoArea
+│   │   └── InfoArea.js
+│   ├── NavPills
+│   │   └── NavPills.js
+│   ├── PageChange
+│   │   └── PageChange.js
+│   ├── Pagination
+│   │   └── Pagination.js
+│   ├── Parallax
+│   │   └── Parallax.js
+│   ├── Snackbar
+│   │   └── SnackbarContent.js
+│   └── Typography
+│       ├── Danger.js
+│       ├── Info.js
+│       ├── Muted.js
+│       ├── Primary.js
+│       ├── Quote.js
+│       ├── Small.js
+│       ├── Success.js
+│       └── Warning.js
+└── pages-sections
+    ├── Components-Sections
+    │   ├── SectionBasics.js
+    │   ├── SectionCarousel.js
+    │   ├── SectionCompletedExamples.js
+    │   ├── SectionDownload.js
+    │   ├── SectionExamples.js
+    │   ├── SectionJavascript.js
+    │   ├── SectionLogin.js
+    │   ├── SectionNavbars.js
+    │   ├── SectionNotifications.js
+    │   ├── SectionPills.js
+    │   ├── SectionTabs.js
+    │   └── SectionTypography.js
+    └── LandingPage-Sections
+        ├── ProductSection.js
+        ├── TeamSection.js
+        └── WorkSection.js
+```
+
+
+## Browser Support
+
+At present, we officially aim to support the last two versions of the following browsers:
+
+<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/chrome-logo.png?raw=true" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/firefox-logo.png" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/edge-logo.png" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/safari-logo.png" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/opera-logo.png" width="64" height="64">
+
+
+
+## Resources
+- Demo: <https://demos.creative-tim.com/nextjs-material-kit/?ref=njsmk-readme>
+- Download Page: <https://www.creative-tim.com/product/nextjs-material-kit?ref=njsmk-readme>
+- Documentation: <https://demos.creative-tim.com/nextjs-material-kit/documentation/tutorial?ref=njsmk-readme>
+- License Agreement: <https://www.creative-tim.com/license?ref=njsmk-readme>
+- Support: <https://www.creative-tim.com/contact-us?ref=njsmk-readme>
+- Issues: [Github Issues Page](https://github.com/creativetimofficial/nextjs-material-kit/issues)
+- **Dashboards:**
+
+| HTML | React | Vue  | Angular |
+| --- | --- | ---  | ---  |
+| [![Material Dashboard  HTML](https://github.com/creativetimofficial/public-assets/blob/master/material-dashboard-html/material-dashboard.jpeg?raw=true)](https://www.creative-tim.com/product/material-dashboard?ref=njsmk-readme) | [![Material Dashboard  React](https://github.com/creativetimofficial/public-assets/blob/master/material-dashboard-react/material-dashboard-react.jpeg?raw=true)](https://www.creative-tim.com/product/material-dashboard-react?ref=njsmk-readme) | [![Vue Material Dashboard](https://github.com/creativetimofficial/public-assets/blob/master/vue-material-dashboard/vue-material-dashboard.jpeg?raw=true)](https://www.creative-tim.com/product/vue-material-dashboard?ref=njsmk-readme)  | [![ Material Dashboard Angular](https://github.com/creativetimofficial/public-assets/blob/master/material-dashboard-angular/material-dashboard-angular.jpg?raw=true)](https://www.creative-tim.com/product/material-dashboard-angular2?ref=njsmk-readme)
+
+| HTML Dark | Laravel | Vuetify |
+| --- | --- | --- |
+| [![Material Dashboard Dark](https://github.com/creativetimofficial/public-assets/blob/master/material-dashboard-dark/material-dashboard-dark.jpg?raw=true)](https://www.creative-tim.com/product/material-dashboard-dark?ref=njsmk-readme) |[![Material Dashboard Laravel](https://github.com/creativetimofficial/public-assets/blob/master/material-dashboard-laravel/material-dashboard-laravel.jpg?raw=true)](https://www.creative-tim.com/product/material-dashboard-laravel?ref=njsmk-readme)| [![Material Dashboard Vuetify](https://github.com/creativetimofficial/public-assets/blob/master/material-dashboard-vuetify/material-dashboard-vuetify.jpg?raw=true)](https://www.creative-tim.com/product/vuetify-material-dashboard?ref=njsmk-readme)
+
+## Reporting Issues
+
+We use GitHub Issues as the official bug tracker for the NextJS Material Kit. Here are some advices for our users that want to report an issue:
+
+1. Make sure that you are using the latest version of the Material Kit. Check the CHANGELOG from your dashboard on our [website](https://www.creative-tim.com/?ref=njsmk-readme).
+2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
+3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.
+
+## Licensing
+
+- Copyright 2020 Creative Tim (https://www.creative-tim.com/?ref=njsmk-readme)
+
+- Licensed under MIT (https://github.com/creativetimofficial/nextjs-material-kit/blob/master/LICENSE.md)
+
+## Useful Links
+
+- [Tutorials](https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w)
+- [Affiliate Program](https://www.creative-tim.com/affiliates/new?ref=njsmk-readme) (earn money)
+- [Blog Creative Tim](http://blog.creative-tim.com/?ref=njsmk-readme)
+- [Free Products](https://www.creative-tim.com/templates/free?direction=desc&sort=created_at&ref=njsmk-readme) from Creative Tim
+- [Premium Products](https://www.creative-tim.com/templates/premium?direction=desc&sort=created_at&ref=njsmk-readme) from Creative Tim
+- [React Products](https://www.creative-tim.com/templates/react?direction=desc&sort=created_at&ref=njsmk-readme) from Creative Tim
+- [Angular Products](https://www.creative-tim.com/templates/angular?direction=desc&sort=created_at&ref=njsmk-readme) from Creative Tim
+- [VueJS Products](https://www.creative-tim.com/templates/vuejs?direction=desc&sort=created_atref=njsmk-readme) from Creative Tim
+- [More products](https://www.creative-tim.com/templates?ref=njsmk-readme) from Creative Tim
+- Check our Bundles [here](https://www.creative-tim.com/bundles?ref=njsmk-readme)
+
+### Social Media
+
+Twitter: <https://twitter.com/CreativeTim>
+
+Facebook: <https://www.facebook.com/CreativeTim>
+
+Dribbble: <https://dribbble.com/creativetim>
+
+Instagram: <https://www.instagram.com/CreativeTimOfficial>

assets/jss/nextjs-material-kit.js

@@ -0,0 +1,266 @@
+/*!
+
+ =========================================================
+ * NextJS Material Kit - v1.1.0 based on Material Kit - v2.0.2 and Material Kit React - v1.8.0
+ =========================================================
+
+ * Product Page: https://www.creative-tim.com/product/nextjs-material-kit
+ * Copyright 2020 Creative Tim (https://www.creative-tim.com)
+ * Licensed under MIT (https://github.com/creativetimofficial/nextjs-material-kit/blob/master/LICENSE.md)
+
+ =========================================================
+
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+ */
+
+// ##############################
+// // // Variables - Styles that are used on more than one component
+// #############################
+
+const hexColorToRGB = function(hexColor) {
+  let detectShorthand = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; // #000 vs #000000
+  hexColor = hexColor.replace(detectShorthand, function(m, r, g, b) {
+    return r + r + g + g + b + b;
+  });
+
+  const hex_array = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexColor); // #000000 to #ffffff
+  return hex_array
+    ? {
+        r: parseInt(hex_array[1], 16), // 0-255
+        g: parseInt(hex_array[2], 16), // 0-255
+        b: parseInt(hex_array[3], 16) // 0-255
+      }
+    : null;
+};
+
+const hexToRGBAlpha = function(hexColor, alpha) {
+  let rgb = hexColorToRGB(hexColor);
+  return `rgba(${rgb.r},${rgb.g},${rgb.b},${alpha})`;
+};
+
+const drawerWidth = 260;
+
+const transition = {
+  transition: "all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1)"
+};
+
+const conatinerFluid = {
+  paddingRight: "15px",
+  paddingLeft: "15px",
+  marginRight: "auto",
+  marginLeft: "auto",
+  width: "100%"
+};
+const container = {
+  ...conatinerFluid,
+  "@media (min-width: 576px)": {
+    maxWidth: "540px"
+  },
+  "@media (min-width: 768px)": {
+    maxWidth: "720px"
+  },
+  "@media (min-width: 992px)": {
+    maxWidth: "960px"
+  },
+  "@media (min-width: 1200px)": {
+    maxWidth: "1140px"
+  }
+};
+
+const boxShadow = {
+  boxShadow:
+    "0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)"
+};
+
+const card = {
+  display: "inline-block",
+  position: "relative",
+  width: "100%",
+  margin: "25px 0",
+  boxShadow: "0 1px 4px 0 rgba(0, 0, 0, 0.14)",
+  borderRadius: "3px",
+  color: "rgba(0, 0, 0, 0.87)",
+  background: "#fff"
+};
+
+const defaultFont = {
+  fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+  fontWeight: "300",
+  lineHeight: "1.5em"
+};
+
+const primaryColor = "#9c27b0";
+const warningColor = "#ff9800";
+const dangerColor = "#f44336";
+const successColor = "#4caf50";
+const infoColor = "#00acc1";
+const roseColor = "#e91e63";
+const grayColor = "#999999";
+
+const primaryBoxShadow = {
+  boxShadow: `0 12px 20px -10px ${hexToRGBAlpha(
+    primaryColor,
+    0.28
+  )}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha(
+    primaryColor,
+    0.2
+  )}`
+};
+const infoBoxShadow = {
+  boxShadow: `0 12px 20px -10px ${hexToRGBAlpha(
+    infoColor,
+    0.28
+  )}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha(
+    infoColor,
+    0.2
+  )}`
+};
+const successBoxShadow = {
+  boxShadow: `0 12px 20px -10px ${hexToRGBAlpha(
+    successColor,
+    0.28
+  )}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha(
+    successColor,
+    0.2
+  )}`
+};
+const warningBoxShadow = {
+  boxShadow: `0 12px 20px -10px ${hexToRGBAlpha(
+    warningColor,
+    0.28
+  )}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha(
+    warningColor,
+    0.2
+  )}`
+};
+const dangerBoxShadow = {
+  boxShadow: `0 12px 20px -10px ${hexToRGBAlpha(
+    dangerColor,
+    0.28
+  )}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${hexToRGBAlpha(
+    dangerColor,
+    0.2
+  )}`
+};
+const roseBoxShadow = {
+  boxShadow: `0 4px 20px 0px ${hexToRGBAlpha(
+    "#000",
+    0.14
+  )}, 0 7px 10px -5px ${hexToRGBAlpha(roseColor, 0.4)}`
+};
+
+const warningCardHeader = {
+  color: "#fff",
+  background: "linear-gradient(60deg, #ffa726, #fb8c00)",
+  ...warningBoxShadow
+};
+const successCardHeader = {
+  color: "#fff",
+  background: "linear-gradient(60deg, #66bb6a, #43a047)",
+  ...successBoxShadow
+};
+const dangerCardHeader = {
+  color: "#fff",
+  background: "linear-gradient(60deg, #ef5350, #e53935)",
+  ...dangerBoxShadow
+};
+const infoCardHeader = {
+  color: "#fff",
+  background: "linear-gradient(60deg, #26c6da, #00acc1)",
+  ...infoBoxShadow
+};
+const primaryCardHeader = {
+  color: "#fff",
+  background: "linear-gradient(60deg, #ab47bc, #8e24aa)",
+  ...primaryBoxShadow
+};
+const roseCardHeader = {
+  color: "#fff",
+  background: "linear-gradient(60deg, #ec407a, #d81b60)",
+  ...roseBoxShadow
+};
+const cardActions = {
+  margin: "0 20px 10px",
+  paddingTop: "10px",
+  borderTop: "1px solid #eeeeee",
+  height: "auto",
+  ...defaultFont
+};
+
+const cardHeader = {
+  margin: "-30px 15px 0",
+  borderRadius: "3px",
+  padding: "15px"
+};
+
+const defaultBoxShadow = {
+  border: "0",
+  borderRadius: "3px",
+  boxShadow:
+    "0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 3px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)",
+  padding: "10px 0",
+  transition: "all 150ms ease 0s"
+};
+
+const title = {
+  color: "#3C4858",
+  margin: "1.75rem 0 0.875rem",
+  textDecoration: "none",
+  fontWeight: "700",
+  fontFamily: `"Roboto Slab", "Times New Roman", serif`
+};
+
+const cardTitle = {
+  ...title,
+  marginTop: ".625rem"
+};
+
+const cardLink = {
+  "& + $cardLink": {
+    marginLeft: "1.25rem"
+  }
+};
+
+const cardSubtitle = {
+  marginBottom: "0",
+  marginTop: "-.375rem"
+};
+
+export {
+  hexToRGBAlpha,
+  //variables
+  drawerWidth,
+  transition,
+  container,
+  conatinerFluid,
+  boxShadow,
+  card,
+  defaultFont,
+  primaryColor,
+  warningColor,
+  dangerColor,
+  successColor,
+  infoColor,
+  roseColor,
+  grayColor,
+  primaryBoxShadow,
+  infoBoxShadow,
+  successBoxShadow,
+  warningBoxShadow,
+  dangerBoxShadow,
+  roseBoxShadow,
+  warningCardHeader,
+  successCardHeader,
+  dangerCardHeader,
+  infoCardHeader,
+  primaryCardHeader,
+  roseCardHeader,
+  cardActions,
+  cardHeader,
+  defaultBoxShadow,
+  title,
+  cardTitle,
+  cardLink,
+  cardSubtitle
+};

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

@@ -0,0 +1,48 @@
+import {
+  primaryColor,
+  warningColor,
+  dangerColor,
+  successColor,
+  infoColor,
+  roseColor
+} from "assets/jss/nextjs-material-kit.js";
+
+const badgeStyle = {
+  badge: {
+    marginRight: "3px",
+    borderRadius: "12px",
+    padding: "5px 12px",
+    textTransform: "uppercase",
+    fontSize: "10px",
+    fontWeight: "500",
+    lineHeight: "1",
+    color: "#fff",
+    textAlign: "center",
+    whiteSpace: "nowrap",
+    verticalAlign: "baseline",
+    display: "inline-block"
+  },
+  primary: {
+    backgroundColor: primaryColor
+  },
+  warning: {
+    backgroundColor: warningColor
+  },
+  danger: {
+    backgroundColor: dangerColor
+  },
+  success: {
+    backgroundColor: successColor
+  },
+  info: {
+    backgroundColor: infoColor
+  },
+  rose: {
+    backgroundColor: roseColor
+  },
+  gray: {
+    backgroundColor: "#6c757d"
+  }
+};
+
+export default badgeStyle;

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

@@ -0,0 +1,385 @@
+import {
+  hexToRGBAlpha,
+  grayColor,
+  roseColor,
+  primaryColor,
+  infoColor,
+  successColor,
+  warningColor,
+  dangerColor
+} from "assets/jss/nextjs-material-kit.js";
+
+const buttonStyle = {
+  button: {
+    minHeight: "auto",
+    minWidth: "auto",
+    backgroundColor: grayColor,
+    color: "#FFFFFF",
+    boxShadow:
+      "0 2px 2px 0 rgba(153, 153, 153, 0.14), 0 3px 1px -2px rgba(153, 153, 153, 0.2), 0 1px 5px 0 rgba(153, 153, 153, 0.12)",
+    border: "none",
+    borderRadius: "3px",
+    position: "relative",
+    padding: "12px 30px",
+    margin: ".3125rem 1px",
+    fontSize: "12px",
+    fontWeight: "400",
+    textTransform: "uppercase",
+    letterSpacing: "0",
+    willChange: "box-shadow, transform",
+    transition:
+      "box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+    lineHeight: "1.42857143",
+    textAlign: "center",
+    whiteSpace: "nowrap",
+    verticalAlign: "middle",
+    touchAction: "manipulation",
+    cursor: "pointer",
+    "&:hover,&:focus": {
+      color: "#FFFFFF",
+      backgroundColor: grayColor,
+      boxShadow:
+        "0 14px 26px -12px rgba(153, 153, 153, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(153, 153, 153, 0.2)"
+    },
+    "& .fab,& .fas,& .far,& .fal,& .material-icons": {
+      position: "relative",
+      display: "inline-block",
+      top: "0",
+      fontSize: "1.1rem",
+      marginRight: "4px",
+      verticalAlign: "middle"
+    },
+    "& svg": {
+      position: "relative",
+      display: "inline-block",
+      top: "0",
+      width: "18px",
+      height: "18px",
+      marginRight: "4px",
+      verticalAlign: "middle"
+    },
+    "&$justIcon": {
+      "& .fab,& .fas,& .far,& .fal,& .material-icons": {
+        marginRight: "0px",
+        position: "absolute",
+        width: "100%",
+        transform: "none",
+        left: "0px",
+        top: "0px",
+        height: "100%",
+        lineHeight: "41px",
+        fontSize: "20px"
+      }
+    }
+  },
+  fullWidth: {
+    width: "100%"
+  },
+  primary: {
+    backgroundColor: primaryColor,
+    boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(
+      primaryColor,
+      0.14
+    )}, 0 3px 1px -2px ${hexToRGBAlpha(
+      primaryColor,
+      0.2
+    )}, 0 1px 5px 0 ${hexToRGBAlpha(primaryColor, 0.12)}`,
+    "&:hover,&:focus": {
+      backgroundColor: primaryColor,
+      boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(
+        primaryColor,
+        0.42
+      )}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(
+        primaryColor,
+        0.2
+      )}`
+    }
+  },
+  info: {
+    backgroundColor: infoColor,
+    boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(
+      infoColor,
+      0.14
+    )}, 0 3px 1px -2px ${hexToRGBAlpha(
+      infoColor,
+      0.2
+    )}, 0 1px 5px 0 ${hexToRGBAlpha(infoColor, 0.12)}`,
+    "&:hover,&:focus": {
+      backgroundColor: infoColor,
+      boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(
+        infoColor,
+        0.42
+      )}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(
+        infoColor,
+        0.2
+      )}`
+    }
+  },
+  success: {
+    backgroundColor: successColor,
+    boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(
+      successColor,
+      0.14
+    )}, 0 3px 1px -2px ${hexToRGBAlpha(
+      successColor,
+      0.2
+    )}, 0 1px 5px 0 ${hexToRGBAlpha(successColor, 0.12)}`,
+    "&:hover,&:focus": {
+      backgroundColor: successColor,
+      boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(
+        successColor,
+        0.42
+      )}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(
+        successColor,
+        0.2
+      )}`
+    }
+  },
+  warning: {
+    backgroundColor: warningColor,
+    boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(
+      warningColor,
+      0.14
+    )}, 0 3px 1px -2px ${hexToRGBAlpha(
+      warningColor,
+      0.2
+    )}, 0 1px 5px 0 ${hexToRGBAlpha(warningColor, 0.12)}`,
+    "&:hover,&:focus": {
+      backgroundColor: warningColor,
+      boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(
+        warningColor,
+        0.42
+      )}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(
+        warningColor,
+        0.2
+      )}`
+    }
+  },
+  danger: {
+    backgroundColor: dangerColor,
+    boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(
+      dangerColor,
+      0.14
+    )}, 0 3px 1px -2px ${hexToRGBAlpha(
+      dangerColor,
+      0.2
+    )}, 0 1px 5px 0 ${hexToRGBAlpha(dangerColor, 0.12)}`,
+    "&:hover,&:focus": {
+      backgroundColor: dangerColor,
+      boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(
+        dangerColor,
+        0.42
+      )}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(
+        dangerColor,
+        0.2
+      )}`
+    }
+  },
+  rose: {
+    backgroundColor: roseColor,
+    boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(
+      primaryColor,
+      0.14
+    )}, 0 3px 1px -2px ${hexToRGBAlpha(
+      primaryColor,
+      0.2
+    )}, 0 1px 5px 0 ${hexToRGBAlpha(primaryColor, 0.12)}`,
+    "&:hover,&:focus": {
+      backgroundColor: roseColor,
+      boxShadow: `0 14px 26px -12px ${hexToRGBAlpha(
+        primaryColor,
+        0.42
+      )}, 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px ${hexToRGBAlpha(
+        primaryColor,
+        0.2
+      )}`
+    }
+  },
+  white: {
+    "&,&:focus,&:hover,&:visited": {
+      backgroundColor: "#FFFFFF",
+      color: grayColor
+    }
+  },
+  twitter: {
+    backgroundColor: "#55acee",
+    color: "#fff",
+    boxShadow:
+      "0 2px 2px 0 rgba(85, 172, 238, 0.14), 0 3px 1px -2px rgba(85, 172, 238, 0.2), 0 1px 5px 0 rgba(85, 172, 238, 0.12)",
+    "&:hover,&:focus,&:visited": {
+      backgroundColor: "#55acee",
+      color: "#fff",
+      boxShadow:
+        "0 14px 26px -12px rgba(85, 172, 238, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(85, 172, 238, 0.2)"
+    }
+  },
+  facebook: {
+    backgroundColor: "#3b5998",
+    color: "#fff",
+    boxShadow:
+      "0 2px 2px 0 rgba(59, 89, 152, 0.14), 0 3px 1px -2px rgba(59, 89, 152, 0.2), 0 1px 5px 0 rgba(59, 89, 152, 0.12)",
+    "&:hover,&:focus": {
+      backgroundColor: "#3b5998",
+      color: "#fff",
+      boxShadow:
+        "0 14px 26px -12px rgba(59, 89, 152, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(59, 89, 152, 0.2)"
+    }
+  },
+  google: {
+    backgroundColor: "#dd4b39",
+    color: "#fff",
+    boxShadow:
+      "0 2px 2px 0 rgba(221, 75, 57, 0.14), 0 3px 1px -2px rgba(221, 75, 57, 0.2), 0 1px 5px 0 rgba(221, 75, 57, 0.12)",
+    "&:hover,&:focus": {
+      backgroundColor: "#dd4b39",
+      color: "#fff",
+      boxShadow:
+        "0 14px 26px -12px rgba(221, 75, 57, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(221, 75, 57, 0.2)"
+    }
+  },
+  github: {
+    backgroundColor: "#333333",
+    color: "#fff",
+    boxShadow:
+      "0 2px 2px 0 rgba(51, 51, 51, 0.14), 0 3px 1px -2px rgba(51, 51, 51, 0.2), 0 1px 5px 0 rgba(51, 51, 51, 0.12)",
+    "&:hover,&:focus": {
+      backgroundColor: "#333333",
+      color: "#fff",
+      boxShadow:
+        "0 14px 26px -12px rgba(51, 51, 51, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(51, 51, 51, 0.2)"
+    }
+  },
+  simple: {
+    "&,&:focus,&:hover,&:visited": {
+      color: "#FFFFFF",
+      background: "transparent",
+      boxShadow: "none"
+    },
+    "&$primary": {
+      "&,&:focus,&:hover,&:visited": {
+        color: primaryColor
+      }
+    },
+    "&$info": {
+      "&,&:focus,&:hover,&:visited": {
+        color: infoColor
+      }
+    },
+    "&$success": {
+      "&,&:focus,&:hover,&:visited": {
+        color: successColor
+      }
+    },
+    "&$warning": {
+      "&,&:focus,&:hover,&:visited": {
+        color: warningColor
+      }
+    },
+    "&$rose": {
+      "&,&:focus,&:hover,&:visited": {
+        color: roseColor
+      }
+    },
+    "&$danger": {
+      "&,&:focus,&:hover,&:visited": {
+        color: dangerColor
+      }
+    },
+    "&$twitter": {
+      "&,&:focus,&:hover,&:visited": {
+        color: "#55acee"
+      }
+    },
+    "&$facebook": {
+      "&,&:focus,&:hover,&:visited": {
+        color: "#3b5998"
+      }
+    },
+    "&$google": {
+      "&,&:focus,&:hover,&:visited": {
+        color: "#dd4b39"
+      }
+    },
+    "&$github": {
+      "&,&:focus,&:hover,&:visited": {
+        color: "#333333"
+      }
+    }
+  },
+  transparent: {
+    "&,&:focus,&:hover,&:visited": {
+      color: "inherit",
+      background: "transparent",
+      boxShadow: "none"
+    }
+  },
+  disabled: {
+    opacity: "0.65",
+    pointerEvents: "none"
+  },
+  lg: {
+    padding: "1.125rem 2.25rem",
+    fontSize: "0.875rem",
+    lineHeight: "1.333333",
+    borderRadius: "0.2rem"
+  },
+  sm: {
+    padding: "0.40625rem 1.25rem",
+    fontSize: "0.6875rem",
+    lineHeight: "1.5",
+    borderRadius: "0.2rem"
+  },
+  round: {
+    borderRadius: "30px"
+  },
+  block: {
+    width: "100% !important"
+  },
+  link: {
+    "&,&:hover,&:focus": {
+      backgroundColor: "transparent",
+      color: "#999999",
+      boxShadow: "none"
+    }
+  },
+  justIcon: {
+    paddingLeft: "12px",
+    paddingRight: "12px",
+    fontSize: "20px",
+    height: "41px",
+    minWidth: "41px",
+    width: "41px",
+    "& .fab,& .fas,& .far,& .fal,& svg,& .material-icons": {
+      marginRight: "0px"
+    },
+    "&$lg": {
+      height: "57px",
+      minWidth: "57px",
+      width: "57px",
+      lineHeight: "56px",
+      "& .fab,& .fas,& .far,& .fal,& .material-icons": {
+        fontSize: "32px",
+        lineHeight: "56px"
+      },
+      "& svg": {
+        width: "32px",
+        height: "32px"
+      }
+    },
+    "&$sm": {
+      height: "30px",
+      minWidth: "30px",
+      width: "30px",
+      "& .fab,& .fas,& .far,& .fal,& .material-icons": {
+        fontSize: "17px",
+        lineHeight: "29px"
+      },
+      "& svg": {
+        width: "17px",
+        height: "17px"
+      }
+    }
+  }
+};
+
+export default buttonStyle;

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

@@ -0,0 +1,8 @@
+const cardBodyStyle = {
+  cardBody: {
+    padding: "0.9375rem 1.875rem",
+    flex: "1 1 auto"
+  }
+};
+
+export default cardBodyStyle;

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

@@ -0,0 +1,10 @@
+const cardFooterStyle = {
+  cardFooter: {
+    display: "flex",
+    alignItems: "center",
+    backgroundColor: "transparent",
+    padding: "0.9375rem 1.875rem"
+  }
+};
+
+export default cardFooterStyle;

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

@@ -0,0 +1,30 @@
+import {
+  warningCardHeader,
+  successCardHeader,
+  dangerCardHeader,
+  infoCardHeader,
+  primaryCardHeader
+} from "assets/jss/nextjs-material-kit.js";
+
+const cardHeaderStyle = {
+  cardHeader: {
+    borderRadius: "3px",
+    padding: "1rem 15px",
+    marginLeft: "15px",
+    marginRight: "15px",
+    marginTop: "-30px",
+    border: "0",
+    marginBottom: "0"
+  },
+  cardHeaderPlain: {
+    marginLeft: "0px",
+    marginRight: "0px"
+  },
+  warningCardHeader,
+  successCardHeader,
+  dangerCardHeader,
+  infoCardHeader,
+  primaryCardHeader
+};
+
+export default cardHeaderStyle;

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

@@ -0,0 +1,29 @@
+const cardStyle = {
+  card: {
+    border: "0",
+    marginBottom: "30px",
+    marginTop: "30px",
+    borderRadius: "6px",
+    color: "rgba(0, 0, 0, 0.87)",
+    background: "#fff",
+    width: "100%",
+    boxShadow:
+      "0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12)",
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    minWidth: "0",
+    wordWrap: "break-word",
+    fontSize: ".875rem",
+    transition: "all 300ms linear"
+  },
+  cardPlain: {
+    background: "transparent",
+    boxShadow: "none"
+  },
+  cardCarousel: {
+    overflow: "hidden"
+  }
+};
+
+export default cardStyle;

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

@@ -0,0 +1,188 @@
+import {
+  defaultFont,
+  primaryColor,
+  primaryBoxShadow,
+  infoColor,
+  infoBoxShadow,
+  successColor,
+  successBoxShadow,
+  warningColor,
+  warningBoxShadow,
+  dangerColor,
+  dangerBoxShadow,
+  roseColor,
+  roseBoxShadow
+} from "assets/jss/nextjs-material-kit.js";
+
+const customDropdownStyle = theme => ({
+  popperClose: {
+    pointerEvents: "none"
+  },
+  pooperNav: {
+    [theme.breakpoints.down("sm")]: {
+      position: "static !important",
+      left: "unset !important",
+      top: "unset !important",
+      transform: "none !important",
+      willChange: "none !important",
+      "& > div": {
+        boxShadow: "none !important",
+        marginLeft: "1.5rem",
+        marginRight: "1.5rem",
+        transition: "none !important",
+        marginTop: "0px !important",
+        marginBottom: "5px !important",
+        padding: "0px !important"
+      }
+    }
+  },
+  dropdown: {
+    borderRadius: "3px",
+    border: "0",
+    boxShadow: "0 2px 5px 0 rgba(0, 0, 0, 0.26)",
+    top: "100%",
+    zIndex: "1000",
+    minWidth: "160px",
+    padding: "5px 0",
+    margin: "2px 0 0",
+    fontSize: "14px",
+    textAlign: "left",
+    listStyle: "none",
+    backgroundColor: "#fff",
+    backgroundClip: "padding-box"
+  },
+  menuList: {
+    padding: "0"
+  },
+  popperResponsive: {
+    zIndex: "1200",
+    position: "absolute !important",
+    [theme.breakpoints.down("sm")]: {
+      zIndex: "1640",
+      position: "static !important",
+      float: "none",
+      width: "auto",
+      marginTop: "0",
+      backgroundColor: "transparent",
+      border: "0",
+      boxShadow: "none",
+      color: "black"
+    }
+  },
+  dropdownItem: {
+    ...defaultFont,
+    fontSize: "13px",
+    padding: "10px 20px",
+    margin: "0 5px",
+    borderRadius: "2px",
+    position: "relative",
+    transition: "all 150ms linear",
+    display: "block",
+    clear: "both",
+    fontWeight: "400",
+    height: "fit-content",
+    color: "#333",
+    whiteSpace: "nowrap",
+    minHeight: "unset"
+  },
+  blackHover: {
+    "&:hover": {
+      boxShadow:
+        "0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(33, 33, 33, 0.4)",
+      backgroundColor: "#212121",
+      color: "#fff"
+    }
+  },
+  primaryHover: {
+    "&:hover": {
+      backgroundColor: infoColor,
+      color: "#FFFFFF",
+      ...primaryBoxShadow
+    }
+  },
+  infoHover: {
+    "&:hover": {
+      backgroundColor: infoColor,
+      color: "#FFFFFF",
+      ...infoBoxShadow
+    }
+  },
+  successHover: {
+    "&:hover": {
+      backgroundColor: successColor,
+      color: "#FFFFFF",
+      ...successBoxShadow
+    }
+  },
+  warningHover: {
+    "&:hover": {
+      backgroundColor: warningColor,
+      color: "#FFFFFF",
+      ...warningBoxShadow
+    }
+  },
+  dangerHover: {
+    "&:hover": {
+      backgroundColor: dangerColor,
+      color: "#FFFFFF",
+      ...dangerBoxShadow
+    }
+  },
+  roseHover: {
+    "&:hover": {
+      backgroundColor: roseColor,
+      color: "#FFFFFF",
+      ...roseBoxShadow
+    }
+  },
+  dropdownItemRTL: {
+    textAlign: "right"
+  },
+  dropdownDividerItem: {
+    margin: "5px 0",
+    backgroundColor: "rgba(0, 0, 0, 0.12)",
+    height: "1px",
+    overflow: "hidden"
+  },
+  buttonIcon: {
+    width: "20px",
+    height: "20px"
+  },
+  caret: {
+    transition: "all 150ms ease-in",
+    display: "inline-block",
+    width: "0",
+    height: "0",
+    marginLeft: "4px",
+    verticalAlign: "middle",
+    borderTop: "4px solid",
+    borderRight: "4px solid transparent",
+    borderLeft: "4px solid transparent"
+  },
+  caretActive: {
+    transform: "rotate(180deg)"
+  },
+  caretRTL: {
+    marginRight: "4px"
+  },
+  dropdownHeader: {
+    display: "block",
+    padding: "0.1875rem 1.25rem",
+    fontSize: "0.75rem",
+    lineHeight: "1.428571",
+    color: "#777",
+    whiteSpace: "nowrap",
+    fontWeight: "inherit",
+    marginTop: "10px",
+    minHeight: "unset",
+    "&:hover,&:focus": {
+      backgroundColor: "transparent",
+      cursor: "auto"
+    }
+  },
+  noLiPadding: {
+    padding: "0"
+  }
+});
+
+export default customDropdownStyle;

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

@@ -0,0 +1,89 @@
+import {
+  primaryColor,
+  dangerColor,
+  successColor,
+  defaultFont
+} from "assets/jss/nextjs-material-kit.js";
+
+const customInputStyle = {
+  disabled: {
+    "&:before": {
+      borderColor: "transparent !important"
+    }
+  },
+  underline: {
+    "&:hover:not($disabled):before,&:before": {
+      borderColor: "#D2D2D2 !important",
+      borderWidth: "1px !important"
+    },
+    "&:after": {
+      borderColor: primaryColor
+    }
+  },
+  underlineError: {
+    "&:after": {
+      borderColor: dangerColor
+    }
+  },
+  underlineSuccess: {
+    "&:after": {
+      borderColor: successColor
+    }
+  },
+  whiteUnderline: {
+    "&:hover:not($disabled):before,&:before": {
+      borderColor: "#FFFFFF"
+    },
+    "&:after": {
+      borderColor: "#FFFFFF"
+    }
+  },
+  labelRoot: {
+    ...defaultFont,
+    color: "#AAAAAA !important",
+    fontWeight: "400",
+    fontSize: "14px",
+    lineHeight: "1.42857",
+    top: "10px",
+    letterSpacing: "unset",
+    "& + $underline": {
+      marginTop: "0px"
+    }
+  },
+  labelRootError: {
+    color: dangerColor + " !important"
+  },
+  labelRootSuccess: {
+    color: successColor + " !important"
+  },
+  formControl: {
+    margin: "0 0 17px 0",
+    paddingTop: "27px",
+    position: "relative",
+    "& svg,& .fab,& .far,& .fal,& .fas,& .material-icons": {
+      color: "#495057"
+    }
+  },
+  input: {
+    color: "#495057",
+    height: "unset",
+    "&,&::placeholder": {
+      fontSize: "14px",
+      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+      fontWeight: "400",
+      lineHeight: "1.42857",
+      opacity: "1"
+    },
+    "&::placeholder": {
+      color: "#AAAAAA"
+    }
+  },
+  whiteInput: {
+    "&,&::placeholder": {
+      color: "#FFFFFF",
+      opacity: "1"
+    }
+  }
+};
+
+export default customInputStyle;

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

@@ -0,0 +1,64 @@
+import {
+  primaryColor,
+  warningColor,
+  dangerColor,
+  successColor,
+  infoColor,
+  roseColor,
+  grayColor
+} from "assets/jss/nextjs-material-kit.js";
+
+const customLinearProgressStyle = {
+  root: {
+    height: "4px",
+    marginBottom: "20px",
+    overflow: "hidden"
+  },
+  bar: {
+    height: "4px"
+  },
+  primary: {
+    backgroundColor: primaryColor
+  },
+  warning: {
+    backgroundColor: warningColor
+  },
+  danger: {
+    backgroundColor: dangerColor
+  },
+  success: {
+    backgroundColor: successColor
+  },
+  info: {
+    backgroundColor: infoColor
+  },
+  rose: {
+    backgroundColor: roseColor
+  },
+  gray: {
+    backgroundColor: grayColor
+  },
+  primaryBackground: {
+    background: "rgba(156, 39, 176, 0.2)"
+  },
+  warningBackground: {
+    background: "rgba(255, 152, 0, 0.2)"
+  },
+  dangerBackground: {
+    background: "rgba(244, 67, 54, 0.2)"
+  },
+  successBackground: {
+    background: "rgba(76, 175, 80, 0.2)"
+  },
+  infoBackground: {
+    background: "rgba(0, 188, 212, 0.2)"
+  },
+  roseBackground: {
+    background: "rgba(233, 30, 99, 0.2)"
+  },
+  grayBackground: {
+    background: "rgba(221, 221, 221, 0.2)"
+  }
+};
+
+export default customLinearProgressStyle;

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

@@ -0,0 +1,58 @@
+const customTabsStyle = {
+  cardTitle: {
+    float: "left",
+    padding: "10px 10px 10px 0px",
+    lineHeight: "24px"
+  },
+  cardTitleRTL: {
+    float: "right",
+    padding: "10px 0px 10px 10px !important"
+  },
+  displayNone: {
+    display: "none !important"
+  },
+  tabsRoot: {
+    minHeight: "unset !important"
+  },
+  tabRootButton: {
+    minHeight: "unset !important",
+    minWidth: "unset !important",
+    width: "unset !important",
+    height: "unset !important",
+    maxWidth: "unset !important",
+    maxHeight: "unset !important",
+    padding: "10px 15px",
+    borderRadius: "3px",
+    lineHeight: "24px",
+    border: "0 !important",
+    color: "#fff !important",
+    marginLeft: "4px",
+    fontWeight: "500",
+    fontSize: "12px",
+    "&:last-child": {
+      marginLeft: "0px"
+    }
+  },
+  tabSelected: {
+    backgroundColor: "rgba(255, 255, 255, 0.2)",
+    transition: "0.2s background-color 0.1s"
+  },
+  tabWrapper: {
+    display: "inline-block",
+    minHeight: "unset !important",
+    minWidth: "unset !important",
+    width: "unset !important",
+    height: "unset !important",
+    maxWidth: "unset !important",
+    maxHeight: "unset !important",
+    "& > svg": {
+      verticalAlign: "middle",
+      margin: "-1.55px 5px 0 0 !important"
+    },
+    "&,& *": {
+      letterSpacing: "normal !important"
+    }
+  }
+};
+
+export default customTabsStyle;

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

@@ -0,0 +1,59 @@
+import { container, primaryColor } from "assets/jss/nextjs-material-kit.js";
+
+const footerStyle = {
+  block: {
+    color: "inherit",
+    padding: "0.9375rem",
+    fontWeight: "500",
+    fontSize: "12px",
+    textTransform: "uppercase",
+    borderRadius: "3px",
+    textDecoration: "none",
+    position: "relative",
+    display: "block"
+  },
+  left: {
+    float: "left!important",
+    display: "block"
+  },
+  right: {
+    padding: "15px 0",
+    margin: "0",
+    float: "right!important"
+  },
+  footer: {
+    padding: "0.9375rem 0",
+    textAlign: "center",
+    display: "flex",
+    zIndex: "2",
+    position: "relative"
+  },
+  a: {
+    color: primaryColor,
+    textDecoration: "none",
+    backgroundColor: "transparent"
+  },
+  footerWhiteFont: {
+    "&,&:hover,&:focus": {
+      color: "#FFFFFF"
+    }
+  },
+  container,
+  list: {
+    marginBottom: "0",
+    padding: "0",
+    marginTop: "0"
+  },
+  inlineBlock: {
+    display: "inline-block",
+    padding: "0px",
+    width: "auto"
+  },
+  icon: {
+    width: "18px",
+    height: "18px",
+    position: "relative",
+    top: "3px"
+  }
+};
+export default footerStyle;

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

@@ -0,0 +1,125 @@
+import { defaultFont } from "assets/jss/nextjs-material-kit.js";
+
+import tooltip from "assets/jss/nextjs-material-kit/tooltipsStyle.js";
+
+const headerLinksStyle = theme => ({
+  list: {
+    ...defaultFont,
+    fontSize: "14px",
+    margin: 0,
+    paddingLeft: "0",
+    listStyle: "none",
+    paddingTop: "0",
+    paddingBottom: "0",
+    color: "inherit"
+  },
+  listItem: {
+    float: "left",
+    color: "inherit",
+    position: "relative",
+    display: "block",
+    width: "auto",
+    margin: "0",
+    padding: "0",
+    [theme.breakpoints.down("sm")]: {
+      width: "100%",
+      "&:after": {
+        width: "calc(100% - 30px)",
+        content: '""',
+        display: "block",
+        height: "1px",
+        marginLeft: "15px",
+        backgroundColor: "#e5e5e5"
+      }
+    }
+  },
+  listItemText: {
+    padding: "0 !important"
+  },
+  navLink: {
+    color: "inherit",
+    position: "relative",
+    padding: "0.9375rem",
+    fontWeight: "400",
+    fontSize: "12px",
+    textTransform: "uppercase",
+    borderRadius: "3px",
+    lineHeight: "20px",
+    textDecoration: "none",
+    margin: "0px",
+    display: "inline-flex",
+    "&:hover,&:focus": {
+      color: "inherit",
+      background: "rgba(200, 200, 200, 0.2)"
+    },
+    [theme.breakpoints.down("sm")]: {
+      width: "calc(100% - 30px)",
+      marginLeft: "15px",
+      marginBottom: "8px",
+      marginTop: "8px",
+      textAlign: "left",
+      "& > span:first-child": {
+        justifyContent: "flex-start"
+      }
+    }
+  },
+  notificationNavLink: {
+    [theme.breakpoints.down("md")]: {
+      top: "0",
+      margin: "5px 15px"
+    },
+    color: "#FFF",
+    padding: "0.9375rem",
+    fontWeight: "400",
+    fontSize: "12px",
+    textTransform: "uppercase",
+    lineHeight: "20px",
+    textDecoration: "none",
+    margin: "0px",
+    display: "inline-flex",
+    top: "4px"
+  },
+  registerNavLink: {
+    [theme.breakpoints.down("md")]: {
+      top: "0",
+      margin: "5px 15px"
+    },
+    top: "3px",
+    position: "relative",
+    fontWeight: "400",
+    fontSize: "12px",
+    textTransform: "uppercase",
+    lineHeight: "20px",
+    textDecoration: "none",
+    margin: "0px",
+    display: "inline-flex"
+  },
+  navLinkActive: {
+    color: "inherit",
+    backgroundColor: "rgba(255, 255, 255, 0.1)"
+  },
+  icons: {
+    width: "20px",
+    height: "20px",
+    marginRight: "3px"
+  },
+  socialIcons: {
+    position: "relative",
+    fontSize: "20px !important",
+    marginRight: "4px"
+  },
+  dropdownLink: {
+    "&,&:hover,&:focus": {
+      color: "inherit",
+      textDecoration: "none",
+      display: "block",
+      padding: "10px 20px"
+    }
+  },
+  ...tooltip,
+  marginRight5: {
+    marginRight: "5px"
+  }
+});
+
+export default headerLinksStyle;

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

@@ -0,0 +1,165 @@
+import {
+  container,
+  hexToRGBAlpha,
+  defaultFont,
+  primaryColor,
+  infoColor,
+  successColor,
+  warningColor,
+  dangerColor,
+  roseColor,
+  transition,
+  boxShadow,
+  drawerWidth
+} from "assets/jss/nextjs-material-kit.js";
+
+const headerStyle = {
+  appBar: {
+    display: "flex",
+    border: "0",
+    borderRadius: "3px",
+    padding: "0.625rem 0",
+    marginBottom: "20px",
+    color: "#555",
+    width: "100%",
+    backgroundColor: "#fff",
+    boxShadow:
+      "0 4px 18px 0px rgba(0, 0, 0, 0.12), 0 7px 10px -5px rgba(0, 0, 0, 0.15)",
+    transition: "all 150ms ease 0s",
+    alignItems: "center",
+    flexFlow: "row nowrap",
+    justifyContent: "flex-start",
+    position: "relative",
+    zIndex: "unset"
+  },
+  absolute: {
+    position: "absolute",
+    zIndex: "1100"
+  },
+  fixed: {
+    position: "fixed",
+    zIndex: "1100"
+  },
+  container: {
+    ...container,
+    minHeight: "50px",
+    flex: "1",
+    alignItems: "center",
+    justifyContent: "space-between",
+    display: "flex",
+    flexWrap: "nowrap"
+  },
+  flex: {
+    flex: 1
+  },
+  title: {
+    ...defaultFont,
+    lineHeight: "30px",
+    fontSize: "18px",
+    borderRadius: "3px",
+    textTransform: "none",
+    color: "inherit",
+    padding: "8px 16px",
+    letterSpacing: "unset",
+    "&:hover,&:focus": {
+      color: "inherit",
+      background: "transparent"
+    }
+  },
+  appResponsive: {
+    margin: "20px 10px"
+  },
+  primary: {
+    backgroundColor: primaryColor,
+    color: "#FFFFFF",
+    boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 12px -5px ${hexToRGBAlpha(
+      primaryColor,
+      0.46
+    )}`
+  },
+  info: {
+    backgroundColor: infoColor,
+    color: "#FFFFFF",
+    boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 12px -5px ${hexToRGBAlpha(
+      infoColor,
+      0.46
+    )}`
+  },
+  success: {
+    backgroundColor: successColor,
+    color: "#FFFFFF",
+    boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 12px -5px ${hexToRGBAlpha(
+      successColor,
+      0.46
+    )}`
+  },
+  warning: {
+    backgroundColor: warningColor,
+    color: "#FFFFFF",
+    boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 12px -5px ${hexToRGBAlpha(
+      warningColor,
+      0.46
+    )}`
+  },
+  danger: {
+    backgroundColor: dangerColor,
+    color: "#FFFFFF",
+    boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 12px -5px ${hexToRGBAlpha(
+      dangerColor,
+      0.46
+    )}`
+  },
+  rose: {
+    backgroundColor: roseColor,
+    color: "#FFFFFF",
+    boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 12px -5px ${hexToRGBAlpha(
+      roseColor,
+      0.46
+    )}`
+  },
+  transparent: {
+    backgroundColor: "transparent !important",
+    boxShadow: "none",
+    paddingTop: "25px",
+    color: "#FFFFFF"
+  },
+  dark: {
+    color: "#FFFFFF",
+    backgroundColor: "#212121 !important",
+    boxShadow:
+      "0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 12px -5px rgba(33, 33, 33, 0.46)"
+  },
+  white: {
+    border: "0",
+    padding: "0.625rem 0",
+    marginBottom: "20px",
+    color: "#555",
+    backgroundColor: "#fff !important",
+    boxShadow:
+      "0 4px 18px 0px rgba(0, 0, 0, 0.12), 0 7px 10px -5px rgba(0, 0, 0, 0.15)"
+  },
+  drawerPaper: {
+    border: "none",
+    bottom: "0",
+    transitionProperty: "top, bottom, width",
+    transitionDuration: ".2s, .2s, .35s",
+    transitionTimingFunction: "linear, linear, ease",
+    width: drawerWidth,
+    ...boxShadow,
+    position: "fixed",
+    display: "block",
+    top: "0",
+    height: "100vh",
+    right: "0",
+    left: "auto",
+    visibility: "visible",
+    overflowY: "visible",
+    borderTop: "none",
+    textAlign: "left",
+    paddingRight: "0px",
+    paddingLeft: "0",
+    ...transition
+  }
+};
+
+export default headerStyle;

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

@@ -0,0 +1,68 @@
+import {
+  primaryColor,
+  warningColor,
+  dangerColor,
+  successColor,
+  infoColor,
+  roseColor,
+  grayColor,
+  title
+} from "assets/jss/nextjs-material-kit.js";
+
+const infoStyle = {
+  infoArea: {
+    maxWidth: "360px",
+    margin: "0 auto",
+    padding: "0px"
+  },
+  iconWrapper: {
+    float: "left",
+    marginTop: "24px",
+    marginRight: "10px"
+  },
+  primary: {
+    color: primaryColor
+  },
+  warning: {
+    color: warningColor
+  },
+  danger: {
+    color: dangerColor
+  },
+  success: {
+    color: successColor
+  },
+  info: {
+    color: infoColor
+  },
+  rose: {
+    color: roseColor
+  },
+  gray: {
+    color: grayColor
+  },
+  icon: {
+    width: "36px",
+    height: "36px"
+  },
+  descriptionWrapper: {
+    color: grayColor,
+    overflow: "hidden"
+  },
+  title,
+  description: {
+    color: grayColor,
+    overflow: "hidden",
+    marginTop: "0px",
+    fontSize: "14px"
+  },
+  iconWrapperVertical: {
+    float: "none"
+  },
+  iconVertical: {
+    width: "61px",
+    height: "61px"
+  }
+};
+
+export default infoStyle;

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

@@ -0,0 +1,157 @@
+import {
+  hexToRGBAlpha,
+  roseColor,
+  primaryColor,
+  infoColor,
+  successColor,
+  warningColor,
+  dangerColor
+} from "assets/jss/nextjs-material-kit.js";
+
+const navPillsStyle = theme => ({
+  root: {
+    marginTop: "20px",
+    paddingLeft: "0",
+    marginBottom: "0",
+    overflow: "visible !important",
+    lineHeight: "24px",
+    textTransform: "uppercase",
+    fontSize: "12px",
+    fontWeight: "500",
+    position: "relative",
+    display: "block",
+    color: "inherit"
+  },
+  flexContainer: {
+    [theme.breakpoints.down("xs")]: {
+      display: "flex",
+      flexWrap: "wrap"
+    }
+  },
+  displayNone: {
+    display: "none !important"
+  },
+  fixed: {
+    overflow: "visible !important"
+  },
+  horizontalDisplay: {
+    display: "block"
+  },
+  pills: {
+    float: "left",
+    position: "relative",
+    display: "block",
+    borderRadius: "30px",
+    minWidth: "100px",
+    textAlign: "center",
+    transition: "all .3s",
+    padding: "10px 15px",
+    color: "#555555",
+    height: "auto",
+    opacity: "1",
+    maxWidth: "100%",
+    margin: "0 5px"
+  },
+  pillsWithIcons: {
+    borderRadius: "4px"
+  },
+  tabIcon: {
+    width: "30px",
+    height: "30px",
+    display: "block",
+    margin: "15px 0 !important",
+    "&, & *": {
+      letterSpacing: "normal !important"
+    }
+  },
+  horizontalPills: {
+    width: "100%",
+    float: "none !important",
+    "& + button": {
+      margin: "10px 0"
+    }
+  },
+  contentWrapper: {
+    marginTop: "20px"
+  },
+  primary: {
+    "&,&:hover": {
+      color: "#FFFFFF",
+      backgroundColor: infoColor,
+      boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px ${hexToRGBAlpha(
+        primaryColor,
+        0.4
+      )}`
+    }
+  },
+  info: {
+    "&,&:hover": {
+      color: "#FFFFFF",
+      backgroundColor: infoColor,
+      boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px ${hexToRGBAlpha(
+        infoColor,
+        0.4
+      )}`
+    }
+  },
+  success: {
+    "&,&:hover": {
+      color: "#FFFFFF",
+      backgroundColor: successColor,
+      boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(
+        successColor,
+        0.14
+      )}, 0 3px 1px -2px ${hexToRGBAlpha(
+        successColor,
+        0.2
+      )}, 0 1px 5px 0 ${hexToRGBAlpha(successColor, 0.12)}`
+    }
+  },
+  warning: {
+    "&,&:hover": {
+      color: "#FFFFFF",
+      backgroundColor: warningColor,
+      boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px ${hexToRGBAlpha(
+        warningColor,
+        0.4
+      )}`
+    }
+  },
+  danger: {
+    "&,&:hover": {
+      color: "#FFFFFF",
+      backgroundColor: dangerColor,
+      boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px ${hexToRGBAlpha(
+        dangerColor,
+        0.4
+      )}`
+    }
+  },
+  rose: {
+    "&,&:hover": {
+      color: "#FFFFFF",
+      backgroundColor: roseColor,
+      boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px ${hexToRGBAlpha(
+        roseColor,
+        0.4
+      )}`
+    }
+  },
+  alignCenter: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  tabWrapper: {
+    color: "inherit",
+    position: "relative",
+    fontSize: "12px",
+    lineHeight: "24px",
+    fontWeight: "500",
+    textTransform: "uppercase",
+    "&,& *": {
+      letterSpacing: "normal"
+    }
+  }
+});
+
+export default navPillsStyle;

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

@@ -0,0 +1,174 @@
+import {
+  hexToRGBAlpha,
+  grayColor,
+  primaryColor,
+  infoColor,
+  successColor,
+  warningColor,
+  dangerColor,
+  roseColor
+} from "assets/jss/nextjs-material-kit.js";
+
+const paginationStyle = {
+  pagination: {
+    display: "inline-block",
+    paddingLeft: "0",
+    margin: "0 0 20px 0",
+    borderRadius: "4px"
+  },
+  paginationItem: {
+    display: "inline"
+  },
+  paginationLink: {
+    ":first-of-type": {
+      marginleft: "0"
+    },
+    letterSpacing: "unset",
+    border: "0",
+    borderRadius: "30px !important",
+    transition: "all .3s",
+    padding: "0px 11px",
+    margin: "0 3px",
+    minWidth: "30px",
+    height: "30px",
+    minHeight: "auto",
+    lineHeight: "30px",
+    fontWeight: "400",
+    fontSize: "12px",
+    textTransform: "uppercase",
+    background: "transparent",
+    position: "relative",
+    float: "left",
+    textDecoration: "none",
+    boxSizing: "border-box",
+    "&,&:hover,&:focus": {
+      color: grayColor
+    },
+    "&:hover,&:focus": {
+      zIndex: "3",
+      backgroundColor: "#eee",
+      borderColor: "#ddd"
+    },
+    "&:hover": {
+      cursor: "pointer"
+    }
+  },
+  primary: {
+    "&,&:hover,&:focus": {
+      backgroundColor: primaryColor,
+      borderColor: primaryColor,
+      color: "#FFFFFF",
+      boxShadow: `0 4px 5px 0 ${hexToRGBAlpha(
+        primaryColor,
+        0.14
+      )}, 0 1px 10px 0 ${hexToRGBAlpha(
+        primaryColor,
+        0.12
+      )}, 0 2px 4px -1px ${hexToRGBAlpha(primaryColor, 0.2)}`
+    },
+    "&:hover,&:focus": {
+      zIndex: "2",
+      cursor: "default"
+    }
+  },
+  info: {
+    "&,&:hover,&:focus": {
+      backgroundColor: infoColor,
+      borderColor: infoColor,
+      color: "#FFFFFF",
+      boxShadow: `0 4px 5px 0 ${hexToRGBAlpha(
+        infoColor,
+        0.14
+      )}, 0 1px 10px 0 ${hexToRGBAlpha(
+        infoColor,
+        0.12
+      )}, 0 2px 4px -1px ${hexToRGBAlpha(infoColor, 0.2)}`
+    },
+    "&:hover,&:focus": {
+      zIndex: "2",
+      cursor: "default"
+    }
+  },
+  success: {
+    "&,&:hover,&:focus": {
+      backgroundColor: successColor,
+      borderColor: successColor,
+      color: "#FFFFFF",
+      boxShadow: `0 4px 5px 0 ${hexToRGBAlpha(
+        successColor,
+        0.14
+      )}, 0 1px 10px 0 ${hexToRGBAlpha(
+        successColor,
+        0.12
+      )}, 0 2px 4px -1px ${hexToRGBAlpha(successColor, 0.2)}`
+    },
+    "&:hover,&:focus": {
+      zIndex: "2",
+      cursor: "default"
+    }
+  },
+  warning: {
+    "&,&:hover,&:focus": {
+      backgroundColor: warningColor,
+      borderColor: warningColor,
+      color: "#FFFFFF",
+      boxShadow: `0 4px 5px 0 ${hexToRGBAlpha(
+        warningColor,
+        0.14
+      )}, 0 1px 10px 0 ${hexToRGBAlpha(
+        warningColor,
+        0.12
+      )}, 0 2px 4px -1px ${hexToRGBAlpha(warningColor, 0.2)}`
+    },
+    "&:hover,&:focus": {
+      zIndex: "2",
+      cursor: "default"
+    }
+  },
+  danger: {
+    "&,&:hover,&:focus": {
+      backgroundColor: dangerColor,
+      borderColor: dangerColor,
+      color: "#FFFFFF",
+      boxShadow: `0 4px 5px 0 ${hexToRGBAlpha(
+        dangerColor,
+        0.14
+      )}, 0 1px 10px 0 ${hexToRGBAlpha(
+        dangerColor,
+        0.12
+      )}, 0 2px 4px -1px ${hexToRGBAlpha(dangerColor, 0.2)}`
+    },
+    "&:hover,&:focus": {
+      zIndex: "2",
+      cursor: "default"
+    }
+  },
+  rose: {
+    "&,&:hover,&:focus": {
+      backgroundColor: roseColor,
+      borderColor: roseColor,
+      color: "#FFFFFF",
+      boxShadow: `0 4px 5px 0 ${hexToRGBAlpha(
+        roseColor,
+        0.14
+      )}, 0 1px 10px 0 ${hexToRGBAlpha(
+        roseColor,
+        0.12
+      )}, 0 2px 4px -1px ${hexToRGBAlpha(roseColor, 0.2)}`
+    },
+    "&:hover,&:focus": {
+      zIndex: "2",
+      cursor: "default"
+    }
+  },
+  disabled: {
+    "&,&:hover,&:focus": {
+      color: "#777",
+      cursor: "not-allowed",
+      backgroundColor: "#fff",
+      borderColor: "#ddd"
+    }
+  }
+};
+
+export default paginationStyle;

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

@@ -0,0 +1,40 @@
+const parallaxStyle = theme => ({
+  parallax: {
+    height: "90vh",
+    maxHeight: "1000px",
+    overflow: "hidden",
+    position: "relative",
+    backgroundPosition: "center top",
+    backgroundSize: "cover",
+    margin: "0",
+    padding: "0",
+    border: "0",
+    display: "flex",
+    alignItems: "center"
+  },
+  filter: {
+    "&:before": {
+      background: "rgba(0, 0, 0, 0.5)"
+    },
+    "&:after,&:before": {
+      position: "absolute",
+      zIndex: "1",
+      width: "100%",
+      height: "100%",
+      display: "block",
+      left: "0",
+      top: "0",
+      content: "''"
+    }
+  },
+  small: {
+    height: "380px"
+  },
+  parallaxResponsive: {
+    [theme.breakpoints.down("md")]: {
+      minHeight: "660px"
+    }
+  }
+});
+
+export default parallaxStyle;

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

@@ -0,0 +1,87 @@
+import {
+  defaultFont,
+  primaryBoxShadow,
+  infoBoxShadow,
+  successBoxShadow,
+  warningBoxShadow,
+  dangerBoxShadow,
+  container
+} from "assets/jss/nextjs-material-kit.js";
+
+const snackbarContentStyle = {
+  root: {
+    ...defaultFont,
+    position: "relative",
+    padding: "20px 15px",
+    lineHeight: "20px",
+    marginBottom: "20px",
+    fontSize: "14px",
+    backgroundColor: "white",
+    color: "#555555",
+    borderRadius: "0px",
+    maxWidth: "100%",
+    minWidth: "auto",
+    boxShadow:
+      "0 12px 20px -10px rgba(255, 255, 255, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(255, 255, 255, 0.2)"
+  },
+  info: {
+    backgroundColor: "#00d3ee",
+    color: "#ffffff",
+    ...infoBoxShadow
+  },
+  success: {
+    backgroundColor: "#5cb860",
+    color: "#ffffff",
+    ...successBoxShadow
+  },
+  warning: {
+    backgroundColor: "#ffa21a",
+    color: "#ffffff",
+    ...warningBoxShadow
+  },
+  danger: {
+    backgroundColor: "#f55a4e",
+    color: "#ffffff",
+    ...dangerBoxShadow
+  },
+  primary: {
+    backgroundColor: "#af2cc5",
+    color: "#ffffff",
+    ...primaryBoxShadow
+  },
+  message: {
+    padding: "0",
+    display: "block",
+    maxWidth: "89%",
+    "&,& *": {
+      letterSpacing: "normal"
+    }
+  },
+  close: {
+    width: "14px",
+    height: "14px"
+  },
+  iconButton: {
+    width: "24px",
+    height: "24px",
+    float: "right",
+    fontSize: "1.5rem",
+    fontWeight: "500",
+    lineHeight: "1",
+    position: "absolute",
+    right: "-4px",
+    top: "0",
+    padding: "0"
+  },
+  icon: {
+    display: "block",
+    float: "left",
+    marginRight: "1.071rem"
+  },
+  container: {
+    ...container,
+    position: "relative"
+  }
+};
+
+export default snackbarContentStyle;

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

@@ -0,0 +1,61 @@
+import {
+  defaultFont,
+  primaryColor,
+  infoColor,
+  successColor,
+  warningColor,
+  dangerColor
+} from "assets/jss/nextjs-material-kit.js";
+
+const typographyStyle = {
+  defaultFontStyle: {
+    ...defaultFont,
+    fontSize: "14px"
+  },
+  defaultHeaderMargins: {
+    marginTop: "20px",
+    marginBottom: "10px"
+  },
+  quote: {
+    padding: "10px 20px",
+    margin: "0 0 20px",
+    fontSize: "17.5px",
+    borderLeft: "5px solid #eee"
+  },
+  quoteText: {
+    margin: "0 0 10px",
+    fontStyle: "italic"
+  },
+  quoteAuthor: {
+    display: "block",
+    fontSize: "80%",
+    lineHeight: "1.42857143",
+    color: "#777"
+  },
+  mutedText: {
+    color: "#777"
+  },
+  primaryText: {
+    color: primaryColor
+  },
+  infoText: {
+    color: infoColor
+  },
+  successText: {
+    color: successColor
+  },
+  warningText: {
+    color: warningColor
+  },
+  dangerText: {
+    color: dangerColor
+  },
+  smallText: {
+    fontSize: "65%",
+    fontWeight: "400",
+    lineHeight: "1",
+    color: "#777"
+  }
+};
+
+export default typographyStyle;

assets/jss/nextjs-material-kit/customCheckboxRadioSwitch.js

@@ -0,0 +1,181 @@
+import {
+  primaryColor,
+  dangerColor,
+  roseColor,
+  grayColor,
+  hexToRGBAlpha
+} from "assets/jss/nextjs-material-kit.js";
+
+const customCheckboxRadioSwitch = {
+  checkRoot: {
+    padding: "12px",
+    "&:hover": {
+      backgroundColor: hexToRGBAlpha(primaryColor, 0.04) + "!important"
+    }
+  },
+  radioRoot: {
+    padding: "12px",
+    "&:hover": {
+      backgroundColor: hexToRGBAlpha(primaryColor, 0.04) + "!important"
+    }
+  },
+  labelRoot: {
+    marginLeft: "-14px"
+  },
+  checkboxAndRadio: {
+    position: "relative",
+    display: "block",
+    marginTop: "10px",
+    marginBottom: "10px"
+  },
+  checkboxAndRadioHorizontal: {
+    position: "relative",
+    display: "block",
+    "&:first-child": {
+      marginTop: "10px"
+    },
+    "&:not(:first-child)": {
+      marginTop: "-14px"
+    },
+    marginTop: "0",
+    marginBottom: "0"
+  },
+  checked: {
+    color: primaryColor + "!important"
+  },
+  checkedIcon: {
+    width: "20px",
+    height: "20px",
+    border: "1px solid rgba(0, 0, 0, .54)",
+    borderRadius: "3px"
+  },
+  uncheckedIcon: {
+    width: "0px",
+    height: "0px",
+    padding: "9px",
+    border: "1px solid rgba(0, 0, 0, .54)",
+    borderRadius: "3px"
+  },
+  disabledCheckboxAndRadio: {
+    opacity: "0.45"
+  },
+  label: {
+    cursor: "pointer",
+    paddingLeft: "0",
+    color: "rgba(0, 0, 0, 0.26)",
+    fontSize: "14px",
+    lineHeight: "1.428571429",
+    fontWeight: "400",
+    display: "inline-flex",
+    transition: "0.3s ease all",
+    letterSpacing: "unset"
+  },
+  labelHorizontal: {
+    color: "rgba(0, 0, 0, 0.26)",
+    cursor: "pointer",
+    display: "inline-flex",
+    fontSize: "14px",
+    lineHeight: "1.428571429",
+    fontWeight: "400",
+    paddingTop: "39px",
+    marginRight: "0",
+    "@media (min-width: 992px)": {
+      float: "right"
+    }
+  },
+  labelHorizontalRadioCheckbox: {
+    paddingTop: "22px"
+  },
+  labelLeftHorizontal: {
+    color: "rgba(0, 0, 0, 0.26)",
+    cursor: "pointer",
+    display: "inline-flex",
+    fontSize: "14px",
+    lineHeight: "1.428571429",
+    fontWeight: "400",
+    paddingTop: "22px",
+    marginRight: "0"
+  },
+  labelError: {
+    color: dangerColor
+  },
+  radio: {
+    color: primaryColor + "!important"
+  },
+  radioChecked: {
+    width: "16px",
+    height: "16px",
+    border: "1px solid " + primaryColor,
+    borderRadius: "50%"
+  },
+  radioUnchecked: {
+    width: "0px",
+    height: "0px",
+    padding: "7px",
+    border: "1px solid rgba(0, 0, 0, .54)",
+    borderRadius: "50%"
+  },
+  inlineChecks: {
+    marginTop: "8px"
+  },
+  iconCheckbox: {
+    height: "116px",
+    width: "116px",
+    color: grayColor,
+    "& > span:first-child": {
+      borderWidth: "4px",
+      borderStyle: "solid",
+      borderColor: "#CCCCCC",
+      textAlign: "center",
+      verticalAlign: "middle",
+      borderRadius: "50%",
+      color: "inherit",
+      margin: "0 auto 20px",
+      transition: "all 0.2s"
+    },
+    "&:hover": {
+      color: roseColor,
+      "& > span:first-child": {
+        borderColor: roseColor
+      }
+    }
+  },
+  iconCheckboxChecked: {
+    color: roseColor,
+    "& > span:first-child": {
+      borderColor: roseColor
+    }
+  },
+  iconCheckboxIcon: {
+    fontSize: "40px",
+    lineHeight: "111px"
+  },
+  switchBase: {
+    color: primaryColor + "!important"
+  },
+  switchIcon: {
+    boxShadow: "0 1px 3px 1px rgba(0, 0, 0, 0.4)",
+    color: "#FFFFFF !important",
+    border: "1px solid rgba(0, 0, 0, .54)"
+  },
+  switchBar: {
+    width: "30px",
+    height: "15px",
+    backgroundColor: "rgb(80, 80, 80)",
+    borderRadius: "15px",
+    opacity: "0.7!important"
+  },
+  switchChecked: {
+    "& + $switchBar": {
+      backgroundColor: "rgba(156, 39, 176, 1) !important"
+    },
+    "& $switchIcon": {
+      borderColor: "#9c27b0"
+    }
+  },
+  switchRoot: {
+    height: "48px"
+  }
+};
+
+export default customCheckboxRadioSwitch;

assets/jss/nextjs-material-kit/imagesStyles.js

@@ -0,0 +1,44 @@
+const imagesStyles = {
+  imgFluid: {
+    maxWidth: "100%",
+    height: "auto"
+  },
+  imgRounded: {
+    borderRadius: "6px !important"
+  },
+  imgRoundedCircle: {
+    borderRadius: "50% !important"
+  },
+  imgRaised: {
+    boxShadow:
+      "0 5px 15px -8px rgba(0, 0, 0, 0.24), 0 8px 10px -5px rgba(0, 0, 0, 0.2)"
+  },
+  imgGallery: {
+    width: "100%",
+    marginBottom: "2.142rem"
+  },
+  imgCardTop: {
+    width: "100%",
+    borderTopLeftRadius: "calc(.25rem - 1px)",
+    borderTopRightRadius: "calc(.25rem - 1px)"
+  },
+  imgCardBottom: {
+    width: "100%",
+    borderBottomLeftRadius: "calc(.25rem - 1px)",
+    borderBottomRightRadius: "calc(.25rem - 1px)"
+  },
+  imgCard: {
+    width: "100%",
+    borderRadius: "calc(.25rem - 1px)"
+  },
+  imgCardOverlay: {
+    position: "absolute",
+    top: "0",
+    right: "0",
+    bottom: "0",
+    left: "0",
+    padding: "1.25rem"
+  }
+};
+
+export default imagesStyles;

assets/jss/nextjs-material-kit/modalStyle.js

@@ -0,0 +1,55 @@
+const modalStyle = {
+  modal: {
+    borderRadius: "6px"
+  },
+  modalHeader: {
+    borderBottom: "none",
+    paddingTop: "24px",
+    paddingRight: "24px",
+    paddingBottom: "0",
+    paddingLeft: "24px",
+    minHeight: "16.43px"
+  },
+  modalTitle: {
+    margin: "0",
+    lineHeight: "1.42857143"
+  },
+  modalCloseButton: {
+    color: "#999999",
+    marginTop: "-12px",
+    WebkitAppearance: "none",
+    padding: "0",
+    cursor: "pointer",
+    background: "0 0",
+    border: "0",
+    fontSize: "inherit",
+    opacity: ".9",
+    textShadow: "none",
+    fontWeight: "700",
+    lineHeight: "1",
+    float: "right"
+  },
+  modalClose: {
+    width: "16px",
+    height: "16px"
+  },
+  modalBody: {
+    paddingTop: "24px",
+    paddingRight: "24px",
+    paddingBottom: "16px",
+    paddingLeft: "24px",
+    position: "relative"
+  },
+  modalFooter: {
+    padding: "15px",
+    textAlign: "right",
+    paddingTop: "0",
+    margin: "0"
+  },
+  modalFooterCenter: {
+    marginLeft: "auto",
+    marginRight: "auto"
+  }
+};
+
+export default modalStyle;

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

@@ -0,0 +1,43 @@
+import { container } from "../../../jss/nextjs-material-kit";
+
+const componentsStyle = {
+  container,
+  brand: {
+    color: "#FFFFFF",
+    textAlign: "left"
+  },
+  title: {
+    fontSize: "4.2rem",
+    fontWeight: "600",
+    display: "inline-block",
+    position: "relative"
+  },
+  subtitle: {
+    fontSize: "1.313rem",
+    maxWidth: "510px",
+    margin: "10px 0 0"
+  },
+  main: {
+    background: "#FFFFFF",
+    position: "relative",
+    zIndex: "3"
+  },
+  mainRaised: {
+    margin: "-60px 30px 0px",
+    borderRadius: "6px",
+    boxShadow:
+      "0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2)",
+    "@media (max-width: 830px)": {
+      marginLeft: "10px",
+      marginRight: "10px"
+    }
+  },
+  link: {
+    textDecoration: "none"
+  },
+  textCenter: {
+    textAlign: "center"
+  }
+};
+
+export default componentsStyle;

assets/jss/nextjs-material-kit/pages/componentsSections/basicsStyle.js

@@ -0,0 +1,31 @@
+import { container, title } from "assets/jss/nextjs-material-kit.js";
+import customCheckboxRadioSwitch from "assets/jss/nextjs-material-kit/customCheckboxRadioSwitch.js";
+
+const basicsStyle = {
+  sections: {
+    padding: "70px 0"
+  },
+  container,
+  title: {
+    ...title,
+    marginTop: "30px",
+    minHeight: "32px",
+    textDecoration: "none"
+  },
+  space50: {
+    height: "50px",
+    display: "block"
+  },
+  space70: {
+    height: "70px",
+    display: "block"
+  },
+  icons: {
+    width: "17px",
+    height: "17px",
+    color: "#FFFFFF"
+  },
+  ...customCheckboxRadioSwitch
+};
+
+export default basicsStyle;

assets/jss/nextjs-material-kit/pages/componentsSections/carouselStyle.js

@@ -0,0 +1,14 @@
+import { container } from "assets/jss/nextjs-material-kit.js";
+
+const carouselStyle = {
+  section: {
+    padding: "70px 0"
+  },
+  container,
+  marginAuto: {
+    marginLeft: "auto !important",
+    marginRight: "auto !important"
+  }
+};
+
+export default carouselStyle;

assets/jss/nextjs-material-kit/pages/componentsSections/completedStyle.js

@@ -0,0 +1,13 @@
+import { container } from "assets/jss/nextjs-material-kit.js";
+
+const completedStyle = {
+  section: {
+    padding: "70px 0"
+  },
+  container: {
+    ...container,
+    textAlign: "center !important"
+  }
+};
+
+export default completedStyle;

assets/jss/nextjs-material-kit/pages/componentsSections/downloadStyle.js

@@ -0,0 +1,27 @@
+import { container } from "assets/jss/nextjs-material-kit.js";
+
+const downloadStyle = {
+  section: {
+    padding: "70px 0"
+  },
+  container,
+  textCenter: {
+    textAlign: "center"
+  },
+  sharingArea: {
+    marginTop: "80px"
+  },
+  socials: {
+    maxWidth: "24px",
+    marginTop: "0",
+    width: "100%",
+    transform: "none",
+    left: "0",
+    top: "0",
+    height: "100%",
+    fontSize: "20px",
+    marginRight: "4px"
+  }
+};
+
+export default downloadStyle;

assets/jss/nextjs-material-kit/pages/componentsSections/exampleStyle.js

@@ -0,0 +1,19 @@
+import { conatinerFluid } from "assets/jss/nextjs-material-kit.js";
+
+import imagesStyle from "assets/jss/nextjs-material-kit/imagesStyles.js";
+
+const exampleStyle = {
+  section: {
+    padding: "70px 0"
+  },
+  container: {
+    ...conatinerFluid,
+    textAlign: "center !important"
+  },
+  ...imagesStyle,
+  link: {
+    textDecoration: "none"
+  }
+};
+
+export default exampleStyle;

assets/jss/nextjs-material-kit/pages/componentsSections/javascriptStyles.js

@@ -0,0 +1,39 @@
+import { container, title } from "assets/jss/nextjs-material-kit.js";
+
+import modalStyle from "assets/jss/nextjs-material-kit/modalStyle.js";
+import tooltipsStyle from "assets/jss/nextjs-material-kit/tooltipsStyle.js";
+import popoverStyles from "assets/jss/nextjs-material-kit/popoverStyles.js";
+
+const javascriptStyles = {
+  section: {
+    padding: "70px 0 0"
+  },
+  container,
+  title: {
+    ...title,
+    marginTop: "30px",
+    minHeight: "32px",
+    textDecoration: "none"
+  },
+  icon: {
+    width: "17px",
+    height: "17px",
+    marginRight: "4px"
+  },
+  ...modalStyle,
+  label: {
+    color: "rgba(0, 0, 0, 0.26)",
+    cursor: "pointer",
+    display: "inline-flex",
+    fontSize: "14px",
+    transition: "0.3s ease all",
+    lineHeight: "1.428571429",
+    fontWeight: "400",
+    paddingLeft: "0",
+    letterSpacing: "normal"
+  },
+  ...tooltipsStyle,
+  ...popoverStyles
+};
+
+export default javascriptStyles;

assets/jss/nextjs-material-kit/pages/componentsSections/loginStyle.js

@@ -0,0 +1,64 @@
+import { container } from "assets/jss/nextjs-material-kit.js";
+
+import image from "assets/img/sign.jpg";
+
+const loginStyle = {
+  section: {
+    minHeight: "110vh",
+    maxHeight: "1600px",
+    overflow: "hidden",
+    padding: "70px 0",
+    backgroundPosition: "top center",
+    backgroundSize: "cover",
+    margin: "0",
+    border: "0",
+    display: "flex",
+    alignItems: "center",
+    backgroundImage: "url(" + image + ")"
+  },
+  container,
+  form: {
+    margin: "0"
+  },
+  cardHeader: {
+    width: "auto",
+    textAlign: "center",
+    marginLeft: "20px",
+    marginRight: "20px",
+    marginTop: "-40px",
+    padding: "20px 0",
+    marginBottom: "15px"
+  },
+  socialIcons: {
+    maxWidth: "24px",
+    marginTop: "0",
+    width: "100%",
+    transform: "none",
+    left: "0",
+    top: "0",
+    height: "100%",
+    lineHeight: "41px",
+    fontSize: "20px"
+  },
+  divider: {
+    marginTop: "30px",
+    marginBottom: "0px",
+    textAlign: "center"
+  },
+  cardFooter: {
+    paddingTop: "0rem",
+    border: "0",
+    borderRadius: "6px",
+    justifyContent: "center !important"
+  },
+  socialLine: {
+    marginTop: "1rem",
+    textAlign: "center",
+    padding: "0"
+  },
+  inputIconsColor: {
+    color: "#495057"
+  }
+};
+
+export default loginStyle;

assets/jss/nextjs-material-kit/pages/componentsSections/navbarsStyle.js

@@ -0,0 +1,65 @@
+import { container, title, grayColor } from "assets/jss/nextjs-material-kit.js";
+import headerLinksStyle from "assets/jss/nextjs-material-kit/components/headerLinksStyle.js";
+
+const navbarsStyle = theme => ({
+  section: {
+    padding: "70px 0",
+    paddingTop: "0"
+  },
+  container,
+  title: {
+    ...title,
+    marginTop: "30px",
+    minHeight: "32px",
+    textDecoration: "none"
+  },
+  navbar: {
+    marginBottom: "-20px",
+    zIndex: "100",
+    position: "relative",
+    overflow: "hidden",
+    "& header": {
+      borderRadius: "0"
+    }
+  },
+  navigation: {
+    backgroundPosition: "center center",
+    backgroundSize: "cover",
+    marginTop: "0",
+    minHeight: "740px"
+  },
+  formControl: {
+    [theme.breakpoints.down("md")]: {
+      margin: "10px 0 0 15px !important",
+      color: grayColor
+    },
+    margin: "10px 0 0 0 !important",
+    paddingTop: "0"
+  },
+  inputRootCustomClasses: {
+    margin: "0!important"
+  },
+  searchIcon: {
+    width: "20px",
+    height: "20px",
+    color: "inherit"
+  },
+  ...headerLinksStyle(theme),
+  img: {
+    width: "40px",
+    height: "40px",
+    borderRadius: "50%"
+  },
+  imageDropdownButton: {
+    [theme.breakpoints.down("md")]: {
+      top: "0",
+      margin: "5px 15px"
+    },
+    padding: "0px",
+    top: "4px",
+    borderRadius: "50%",
+    marginLeft: "5px"
+  }
+});
+
+export default navbarsStyle;

assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js

@@ -0,0 +1,20 @@
+import { container, title } from "assets/jss/nextjs-material-kit.js";
+
+const notificationsStyles = {
+  section: {
+    backgroundColor: "#FFFFFF",
+    display: "block",
+    width: "100%",
+    position: "relative",
+    padding: "0"
+  },
+  title: {
+    ...title,
+    marginTop: "30px",
+    minHeight: "32px",
+    textDecoration: "none"
+  },
+  container
+};
+
+export default notificationsStyles;