├── .github └── workflows │ └── main.yml ├── .gitignore ├── CHANGELOG.md ├── ISSUE_TEMPLATE.md ├── LICENSE.md ├── README.md ├── gulpfile.js ├── jsconfig.json ├── package.json ├── public ├── apple-icon.png ├── favicon.ico ├── index.html ├── manifest.json └── robots.txt ├── src ├── assets │ ├── img │ │ ├── angular.jpg │ │ ├── bootstrap.jpg │ │ ├── component-btn-pink.png │ │ ├── component-btn.png │ │ ├── component-info-2.png │ │ ├── component-info-card.png │ │ ├── component-menu.png │ │ ├── component-profile-card.png │ │ ├── documentation.png │ │ ├── github.svg │ │ ├── google.svg │ │ ├── ill_header.png │ │ ├── landing.jpg │ │ ├── login.jpg │ │ ├── pattern_react.png │ │ ├── profile.jpg │ │ ├── react.jpg │ │ ├── register_bg_2.png │ │ ├── sketch.jpg │ │ ├── team-1-800x800.jpg │ │ ├── team-2-800x800.jpg │ │ ├── team-3-800x800.jpg │ │ ├── team-4-470x470.png │ │ └── vue.jpg │ └── styles │ │ ├── index.css │ │ └── tailwind.css ├── components │ ├── Cards │ │ ├── CardBarChart.js │ │ ├── CardLineChart.js │ │ ├── CardPageVisits.js │ │ ├── CardProfile.js │ │ ├── CardSettings.js │ │ ├── CardSocialTraffic.js │ │ ├── CardStats.js │ │ └── CardTable.js │ ├── Dropdowns │ │ ├── IndexDropdown.js │ │ ├── NotificationDropdown.js │ │ ├── PagesDropdown.js │ │ ├── TableDropdown.js │ │ └── UserDropdown.js │ ├── Footers │ │ ├── Footer.js │ │ ├── FooterAdmin.js │ │ └── FooterSmall.js │ ├── Headers │ │ └── HeaderStats.js │ ├── Maps │ │ └── MapExample.js │ ├── Navbars │ │ ├── AdminNavbar.js │ │ ├── AuthNavbar.js │ │ └── IndexNavbar.js │ └── Sidebar │ │ └── Sidebar.js ├── index.js ├── layouts │ ├── Admin.js │ └── Auth.js └── views │ ├── Index.js │ ├── Landing.js │ ├── Profile.js │ ├── admin │ ├── Dashboard.js │ ├── Maps.js │ ├── Settings.js │ └── Tables.js │ └── auth │ ├── Login.js │ └── Register.js └── tailwind.config.js /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Autocloser 2 | on: [issues] 3 | jobs: 4 | autoclose: 5 | runs-on: ubuntu-latest 6 | steps: 7 | - name: Issue auto-closer 8 | uses: roots/issue-closer-action@v1.1 9 | with: 10 | repo-token: ${{ secrets.GITHUB_TOKEN }} 11 | issue-close-message: "@${issue.user.login} this issue was automatically closed because it did not follow our rules:\n\n
\n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.creative-tim.com/new-issue/notus-react?ref=nr-new-issue\n\n**If your issue was not created using the app above, it will be closed immediately.**\n\n\n\nLove Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:\n👉  https://www.creative-tim.com/bundles\n👉  https://www.creative-tim.com\n\n\n
\n\n" 12 | issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>) 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## [1.0.0] 2020-09-29 4 | ### Original Release 5 | - Started project from [Tailwind Starter Kit by Creative Tim](https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation?ref=nr-changelog) 6 | - Added design from Tailwind Starter Kit by Creative Tim 7 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Creative Tim (https://www.creative-tim.com?ref=nr-license) 4 | 5 | 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: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | 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. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Notus React ![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter) 2 | 3 | ![version](https://img.shields.io/badge/version-1.0.0-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) ![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/notus-react.svg) ![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/notus-react.svg) ![Join the chat at https://gitter.im/NIT-dgp/General](https://badges.gitter.im/NIT-dgp/General.svg) ![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg) 4 | 5 | ![Notus React](https://github.com/creativetimofficial/public-assets/blob/master/notus-react/notus-react.jpg?raw=true) 6 | 7 | ### A beautiful UI Kit and Admin for Tailwind CSS and React. 8 | 9 | Start your development with a Free Tailwind CSS and React UI Kit and Admin. Let Notus React amaze you with its cool features and build tools and get your project to a whole new level. 10 | 11 | Notus React is Free and Open Source. It features multiple HTML and React elements and it comes with dynamic components for React. 12 | 13 | It is based on [Tailwind Starter Kit](https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation?ref=nr-github-readme) by Creative Tim, and it is build with both presentation pages, and pages for an admin dashboard. 14 | 15 | Speed up your web development with a beautiful product made by Creative Tim . 16 | If you like bright and fresh colors, you will love this Free Tailwind CSS Template! It features a huge number of components that can help you create amazing websites. 17 | 18 | ### Get Started 19 | 20 | - Install NodeJS **LTS** version from NodeJs Official Page 21 | - Download the product on this page 22 | - Unzip the downloaded file to a folder in your computer 23 | - Open Terminal 24 | - Go to your file project (where you’ve unzipped the product) 25 | - (If you are on a linux based terminal) Simply run `npm run install:clean` 26 | - (If not) Run in terminal `npm install` 27 | - (If not) Run in terminal `npm run build:tailwind` (each time you add a new class, a class that does not exist in `src/assets/styles/tailwind.css`, you will need to run this command) 28 | - (If not) Run in terminal `npm start` 29 | - Navigate to https://localhost:3000 30 | - Check more about [Tailwind CSS](https://tailwindcss.com/?ref=creativetim) 31 | 32 | ### Pages 33 | 34 | If you want to get inspiration or just show something directly to your clients, 35 | you can jump start your development with our pre-built example pages. You will be able 36 | to quickly set up the basic structure for your web project. 37 | 38 | Here are all the page from the project: 39 | - [Presentation](https://demos.creative-tim.com/notus-react/?ref=nr-github-readme) 40 | - Admin Samples 41 | - [Dashboard](https://demos.creative-tim.com/notus-react/admin/dashboard?ref=nr-github-readme) 42 | - [Settings](https://demos.creative-tim.com/notus-react/admin/settings?ref=nr-github-readme) 43 | - [Tables](https://demos.creative-tim.com/notus-react/admin/tables?ref=nr-github-readme) 44 | - [Maps](https://demos.creative-tim.com/notus-react/admin/maps?ref=nr-github-readme) 45 | - Authentication Samples 46 | - [Login](https://demos.creative-tim.com/notus-react/auth/login?ref=nr-github-readme) 47 | - [Register](https://demos.creative-tim.com/notus-react/auth/register?ref=nr-github-readme) 48 | - Presentation Samples 49 | - [Landing](https://demos.creative-tim.com/notus-react/landing?ref=nr-github-readme) 50 | - [Profile](https://demos.creative-tim.com/notus-react/profile?ref=nr-github-readme) 51 | 52 | 53 | ### Fully Coded Components 54 | 55 | Notus React is built with over frontend 120 components, giving you the freedom of choosing and combining. All components can take variations in colors, that you can easily modify using Tailwind CSS classes (NOTE: each time you add a new class, a class that does not exist in `src/assets/styles/tailwind.css`, you will need to compile again tailwind). 56 | 57 | You will save a lot of time going from prototyping to full-functional code, because all elements are implemented. 58 | This Free Tailwind CSS Template is coming with prebuilt examples, so the development process is seamless, switching from our pages to the real website is very easy to be done. 59 | 60 | Every element has multiple states for colors, styles, hover, focus, that you can easily access and use. 61 | 62 | 63 | ### CSS Components 64 | 65 | Notus React comes with 120 Fully Coded CSS elements, such as [Alerts](https://www.creative-tim.com/learning-lab/tailwind/react/alerts/notus?ref=nr-github-readme), [Buttons](https://www.creative-tim.com/learning-lab/tailwind/react/buttons/notus?ref=nr-github-readme), [Inputs](https://www.creative-tim.com/learning-lab/tailwind/react/inputs/notus?ref=nr-github-readme) and many more. 66 | 67 | Please [check all of them here](https://www.creative-tim.com/learning-lab/tailwind/react/alerts/notus?ref=nr-github-readme). 68 | 69 | ### React Components 70 | 71 | We also feature the following 18 dynamic components: 72 | - [Alerts](https://www.creative-tim.com/learning-lab/tailwind/react/alerts/notus?ref=nr-github-readme) 73 | - [Popper for Menus](https://www.creative-tim.com/learning-lab/tailwind/react/dropdowns/notus?ref=nr-github-readme) 74 | - [Menus](https://www.creative-tim.com/learning-lab/tailwind/react/menus/notus?ref=nr-github-readme) 75 | - [Modals](https://www.creative-tim.com/learning-lab/tailwind/react/modals/notus?ref=nr-github-readme) 76 | - [Navbars](https://www.creative-tim.com/learning-lab/tailwind/react/navbar/notus?ref=nr-github-readme) 77 | - [Popper for popover content](https://www.creative-tim.com/learning-lab/tailwind/react/popovers/notus?ref=nr-github-readme) 78 | - [Tabs](https://www.creative-tim.com/learning-lab/tailwind/react/tabs/notus?ref=nr-github-readme) 79 | - [Popper for tooltips content](https://www.creative-tim.com/learning-lab/tailwind/react/tooltips/notus?ref=nr-github-readme) 80 | 81 | 82 | ## Table of Contents 83 | 84 | * [Versions](#versions) 85 | * [Documentation](#documentation) 86 | * [Quick Start](#quick-start) 87 | * [Files and folders](#files-and-folders) 88 | * [Browser Support](#browser-support) 89 | * [Reporting Issues](#reporting-issues) 90 | * [Licensing](#licensing) 91 | * [Useful Links](#useful-links) 92 | * [Resources](#resources) 93 | 94 | ## Versions 95 | 96 | [](https://www.creative-tim.com/product/notus-angular?ref=nr-github-readme)[](https://www.creative-tim.com/product/notus-js?ref=nr-github-readme)[](https://www.creative-tim.com/product/notus-nextjs?ref=nr-github-readme)[](https://www.creative-tim.com/product/notus-react?ref=nr-github-readme)[](https://www.creative-tim.com/product/notus-svelte?ref=nr-github-readme)[](https://www.creative-tim.com/product/vue-notus?ref=nr-github-readme) 97 | 98 | 99 | | Angular | JavaScript / HTML | NextJS | React | Svelte | VueJS | 100 | | :---: | :---: | :---: | :---: | :---: | :---: | 101 | | [![Notus Angular](https://github.com/creativetimofficial/public-assets/blob/master/notus-angular/notus-angular.jpg?raw=true)](https://www.creative-tim.com/product/notus-angular?ref=nr-github-readme) | [![Notus JS](https://github.com/creativetimofficial/public-assets/blob/master/notus-js/notus-js.jpg?raw=true)](https://www.creative-tim.com/product/notus-js?ref=nr-github-readme) | [![Notus NextJS](https://github.com/creativetimofficial/public-assets/blob/master/notus-nextjs/notus-nextjs.jpg?raw=true)](https://www.creative-tim.com/product/notus-nextjs?ref=nr-github-readme) | [![Notus React](https://github.com/creativetimofficial/public-assets/blob/master/notus-react/notus-react.jpg?raw=true)](https://www.creative-tim.com/product/notus-react?ref=nr-github-readme) | [![Notus Svelte](https://github.com/creativetimofficial/public-assets/blob/master/notus-svelte/notus-svelte.jpg?raw=true)](https://www.creative-tim.com/product/notus-svelte?ref=nr-github-readme) | [![Vue Notus](https://github.com/creativetimofficial/public-assets/blob/master/vue-notus/vue-notus.jpg?raw=true)](https://www.creative-tim.com/product/vue-notus?ref=nr-github-readme) 102 | 103 | ## Documentation 104 | The documentation for the Notus React is hosted at our website. 105 | 106 | ## Quick start 107 | 108 | - Download from Creative Tim. 109 | - Check it on Github. 110 | 111 | ## Files and Folder 112 | 113 | This is the project structure that you will get upon the download: 114 | ``` 115 | notus-react 116 | . 117 | ├── CHANGELOG.md 118 | ├── ISSUE_TEMPLATE.md 119 | ├── LICENSE.md 120 | ├── README.md 121 | ├── gulpfile.js 122 | ├── jsconfig.json 123 | ├── package.json 124 | ├── public 125 | │   ├── favicon.ico 126 | │   ├── index.html 127 | │   ├── manifest.json 128 | │   └── robots.txt 129 | ├── src 130 | │   ├── assets 131 | │   │   ├── img 132 | │   │   │   ├── github.svg 133 | │   │   │   └── google.svg 134 | │   │   └── styles 135 | │   │   ├── index.css 136 | │   │   └── tailwind.css 137 | │   ├── components 138 | │   │   ├── Cards 139 | │   │   │   ├── CardBarChart.js 140 | │   │   │   ├── CardLineChart.js 141 | │   │   │   ├── CardPageVisits.js 142 | │   │   │   ├── CardProfile.js 143 | │   │   │   ├── CardSettings.js 144 | │   │   │   ├── CardSocialTraffic.js 145 | │   │   │   ├── CardStats.js 146 | │   │   │   └── CardTable.js 147 | │   │   ├── Dropdowns 148 | │   │   │   ├── IndexDropdown.js 149 | │   │   │   ├── NotificationDropdown.js 150 | │   │   │   ├── PagesDropdown.js 151 | │   │   │   ├── TableDropdown.js 152 | │   │   │   └── UserDropdown.js 153 | │   │   ├── Footers 154 | │   │   │   ├── Footer.js 155 | │   │   │   ├── FooterAdmin.js 156 | │   │   │   └── FooterSmall.js 157 | │   │   ├── Headers 158 | │   │   │   └── HeaderStats.js 159 | │   │   ├── Maps 160 | │   │   │   └── MapExample.js 161 | │   │   ├── Navbars 162 | │   │   │   ├── AdminNavbar.js 163 | │   │   │   ├── AuthNavbar.js 164 | │   │   │   └── IndexNavbar.js 165 | │   │   └── Sidebar 166 | │   │   └── Sidebar.js 167 | │   ├── index.js 168 | │   ├── layouts 169 | │   │   ├── Admin.js 170 | │   │   └── Auth.js 171 | │   └── views 172 | │   ├── Index.js 173 | │   ├── Landing.js 174 | │   ├── Profile.js 175 | │   ├── admin 176 | │   │   ├── Dashboard.js 177 | │   │   ├── Maps.js 178 | │   │   ├── Settings.js 179 | │   │   └── Tables.js 180 | │   └── auth 181 | │   ├── Login.js 182 | │   └── Register.js 183 | └── tailwind.config.js 184 | ``` 185 | 186 | ## Browser Support 187 | 188 | At present, we officially aim to support the last two versions of the following browsers: 189 | 190 | | Chrome | Firefox | Edge | Safari | Opera | 191 | |:---:|:---:|:---:|:---:|:---:| 192 | | | | | | | 193 | 194 | ## Reporting Issues 195 | 196 | We use GitHub Issues as the official bug tracker for the Notus React. Here are some advices for our users that want to report an issue: 197 | 198 | 1. Make sure that you are using the latest version of the Notus React. Check the CHANGELOG from your dashboard on our website. 199 | 2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed. 200 | 3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help. 201 | 202 | ## Licensing 203 | 204 | - Copyright 2020 Creative Tim 205 | 206 | - Licensed under MIT 207 | 208 | ## Useful Links 209 | 210 | - Tutorials 211 | - Affiliate Program (earn money) 212 | - Blog Creative Tim 213 | - Free Products from Creative Tim 214 | - Premium Products from Creative Tim 215 | - React Products from Creative Tim 216 | - Angular Products from Creative Tim 217 | - VueJS Products from Creative Tim 218 | - More products from Creative Tim 219 | - Check our Bundles here 220 | - Check our awesome builder here 221 | - Check Tailwind Starter Kit, the project behind this product here 222 | 223 | ### Social Media 224 | 225 | Twitter: https://twitter.com/CreativeTim 226 | 227 | Facebook: https://www.facebook.com/CreativeTim 228 | 229 | Dribbble: https://dribbble.com/creativetim 230 | 231 | Instagram: https://www.instagram.com/creativetimofficial/ 232 | 233 | 234 | ## Resources 235 | - Demo: https://demos.creative-tim.com/notus-react/?ref=nr-readme 236 | - Download Page: https://www.creative-tim.com/product/notus-react 237 | - Documentation: https://www.creative-tim.com/learning-lab/tailwind/react/overview/notus?ref=nr-readme 238 | - License Agreement: https://www.creative-tim.com/license?ref=nr-readme 239 | - Support: https://www.creative-tim.com/contact-us?ref=nr-readme 240 | - Issues: Github Issues Page 241 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const gap = require("gulp-append-prepend"); 3 | 4 | gulp.task("licenses", async function () { 5 | // this is to add Creative Tim licenses in the production mode for the minified js 6 | gulp 7 | .src("build/static/js/*chunk.js", { base: "./" }) 8 | .pipe( 9 | gap.prependText(`/*! 10 | 11 | ========================================================= 12 | * Notus React - v1.0.0 based on Tailwind Starter Kit by Creative Tim 13 | ========================================================= 14 | 15 | * Product Page: https://www.creative-tim.com/product/notus-react 16 | * Copyright 2020 Creative Tim (https://www.creative-tim.com) 17 | * Licensed under MIT (https://github.com/creativetimofficial/notus-react/blob/master/LICENSE.md) 18 | 19 | * Tailwind Starter Kit Page: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation 20 | 21 | * Coded by Creative Tim 22 | 23 | ========================================================= 24 | 25 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 26 | 27 | */`) 28 | ) 29 | .pipe(gulp.dest("./", { overwrite: true })); 30 | 31 | // this is to add Creative Tim licenses in the production mode for the minified html 32 | gulp 33 | .src("build/index.html", { base: "./" }) 34 | .pipe( 35 | gap.prependText(``) 54 | ) 55 | .pipe(gulp.dest("./", { overwrite: true })); 56 | 57 | // this is to add Creative Tim licenses in the production mode for the minified css 58 | gulp 59 | .src("build/static/css/*chunk.css", { base: "./" }) 60 | .pipe( 61 | gap.prependText(`/*! 62 | 63 | ========================================================= 64 | * Notus React - v1.0.0 based on Tailwind Starter Kit by Creative Tim 65 | ========================================================= 66 | 67 | * Product Page: https://www.creative-tim.com/product/notus-react 68 | * Copyright 2020 Creative Tim (https://www.creative-tim.com) 69 | * Licensed under MIT (https://github.com/creativetimofficial/notus-react/blob/master/LICENSE.md) 70 | 71 | * Tailwind Starter Kit Page: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation 72 | 73 | * Coded by Creative Tim 74 | 75 | ========================================================= 76 | 77 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 78 | 79 | */`) 80 | ) 81 | .pipe(gulp.dest("./", { overwrite: true })); 82 | return; 83 | }); 84 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src", 4 | "paths": { 5 | "*": ["src/*"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "notus-react", 3 | "version": "1.0.0", 4 | "description": "Notus React - A free Tailwind CSS and React UI Kit and Admin by Creative Tim.", 5 | "repository": "https://github.com/creativetimofficial/notus-react", 6 | "license": "MIT", 7 | "dependencies": { 8 | "@fortawesome/fontawesome-free": "5.14.0", 9 | "@popperjs/core": "2.5.1", 10 | "@tailwindcss/custom-forms": "0.2.1", 11 | "chart.js": "2.9.3", 12 | "gulp": "4.0.2", 13 | "gulp-append-prepend": "1.0.8", 14 | "react": "16.13.1", 15 | "react-dom": "16.13.1", 16 | "react-google-maps": "9.4.5", 17 | "react-router": "5.2.0", 18 | "react-router-dom": "5.2.0", 19 | "react-scripts": "3.4.3", 20 | "tailwindcss": "1.8.10" 21 | }, 22 | "scripts": { 23 | "start": "react-scripts start", 24 | "build": "react-scripts build && gulp licenses", 25 | "test": "react-scripts test", 26 | "eject": "react-scripts eject", 27 | "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm run build:tailwind && npm start", 28 | "build:tailwind": "tailwind build src/assets/styles/index.css -o src/assets/styles/tailwind.css" 29 | }, 30 | "eslintConfig": { 31 | "extends": "react-app" 32 | }, 33 | "browserslist": { 34 | "production": [ 35 | ">0.2%", 36 | "not dead", 37 | "not op_mini all" 38 | ], 39 | "development": [ 40 | "last 1 chrome version", 41 | "last 1 firefox version", 42 | "last 1 safari version" 43 | ] 44 | }, 45 | "optionalDependencies": { 46 | "@types/googlemaps": "3.39.13", 47 | "@types/markerclustererplus": "2.1.33", 48 | "@types/react": "16.9.49", 49 | "typescript": "4.0.3" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /public/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/notus-react/aaf81840b97015c551f6766b8c8151d9332e7ee6/public/apple-icon.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/notus-react/aaf81840b97015c551f6766b8c8151d9332e7ee6/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 28 | 29 | 34 | 38 | 39 | 48 | 49 | Notus React by Creative Tim | Free and Open Source UI Kit 50 | 51 | 52 | 53 | 54 |
55 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Notus React", 3 | "name": "Notus React by Creative Tim", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "apple-icon.png", 12 | "sizes": "64x64 32x32 24x24 16x16", 13 | "type": "image/x-icon" 14 | } 15 | ], 16 | "start_url": ".", 17 | "display": "standalone", 18 | "theme_color": "#000000", 19 | "background_color": "#ffffff" 20 | } 21 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /src/assets/img/angular.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/notus-react/aaf81840b97015c551f6766b8c8151d9332e7ee6/src/assets/img/angular.jpg -------------------------------------------------------------------------------- /src/assets/img/bootstrap.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/notus-react/aaf81840b97015c551f6766b8c8151d9332e7ee6/src/assets/img/bootstrap.jpg -------------------------------------------------------------------------------- /src/assets/img/component-btn-pink.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/notus-react/aaf81840b97015c551f6766b8c8151d9332e7ee6/src/assets/img/component-btn-pink.png -------------------------------------------------------------------------------- /src/assets/img/component-btn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/notus-react/aaf81840b97015c551f6766b8c8151d9332e7ee6/src/assets/img/component-btn.png -------------------------------------------------------------------------------- /src/assets/img/component-info-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/notus-react/aaf81840b97015c551f6766b8c8151d9332e7ee6/src/assets/img/component-info-2.png -------------------------------------------------------------------------------- /src/assets/img/component-info-card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/notus-react/aaf81840b97015c551f6766b8c8151d9332e7ee6/src/assets/img/component-info-card.png -------------------------------------------------------------------------------- /src/assets/img/component-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/notus-react/aaf81840b97015c551f6766b8c8151d9332e7ee6/src/assets/img/component-menu.png -------------------------------------------------------------------------------- /src/assets/img/component-profile-card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/notus-react/aaf81840b97015c551f6766b8c8151d9332e7ee6/src/assets/img/component-profile-card.png -------------------------------------------------------------------------------- /src/assets/img/documentation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/notus-react/aaf81840b97015c551f6766b8c8151d9332e7ee6/src/assets/img/documentation.png -------------------------------------------------------------------------------- /src/assets/img/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | UI/icons/dark/github 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/img/google.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | UI/icons/color/google 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/assets/img/ill_header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/notus-react/aaf81840b97015c551f6766b8c8151d9332e7ee6/src/assets/img/ill_header.png -------------------------------------------------------------------------------- /src/assets/img/landing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/notus-react/aaf81840b97015c551f6766b8c8151d9332e7ee6/src/assets/img/landing.jpg -------------------------------------------------------------------------------- /src/assets/img/login.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/notus-react/aaf81840b97015c551f6766b8c8151d9332e7ee6/src/assets/img/login.jpg -------------------------------------------------------------------------------- /src/assets/img/pattern_react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/notus-react/aaf81840b97015c551f6766b8c8151d9332e7ee6/src/assets/img/pattern_react.png -------------------------------------------------------------------------------- /src/assets/img/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/notus-react/aaf81840b97015c551f6766b8c8151d9332e7ee6/src/assets/img/profile.jpg -------------------------------------------------------------------------------- /src/assets/img/react.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/notus-react/aaf81840b97015c551f6766b8c8151d9332e7ee6/src/assets/img/react.jpg -------------------------------------------------------------------------------- /src/assets/img/register_bg_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/notus-react/aaf81840b97015c551f6766b8c8151d9332e7ee6/src/assets/img/register_bg_2.png -------------------------------------------------------------------------------- /src/assets/img/sketch.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/notus-react/aaf81840b97015c551f6766b8c8151d9332e7ee6/src/assets/img/sketch.jpg -------------------------------------------------------------------------------- /src/assets/img/team-1-800x800.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/notus-react/aaf81840b97015c551f6766b8c8151d9332e7ee6/src/assets/img/team-1-800x800.jpg -------------------------------------------------------------------------------- /src/assets/img/team-2-800x800.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/notus-react/aaf81840b97015c551f6766b8c8151d9332e7ee6/src/assets/img/team-2-800x800.jpg -------------------------------------------------------------------------------- /src/assets/img/team-3-800x800.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/notus-react/aaf81840b97015c551f6766b8c8151d9332e7ee6/src/assets/img/team-3-800x800.jpg -------------------------------------------------------------------------------- /src/assets/img/team-4-470x470.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/notus-react/aaf81840b97015c551f6766b8c8151d9332e7ee6/src/assets/img/team-4-470x470.png -------------------------------------------------------------------------------- /src/assets/img/vue.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/srsedev/notus-react/aaf81840b97015c551f6766b8c8151d9332e7ee6/src/assets/img/vue.jpg -------------------------------------------------------------------------------- /src/assets/styles/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | 3 | @tailwind components; 4 | 5 | @tailwind utilities; 6 | -------------------------------------------------------------------------------- /src/components/Cards/CardBarChart.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Chart from "chart.js"; 3 | 4 | export default function CardBarChart() { 5 | React.useEffect(() => { 6 | let config = { 7 | type: "bar", 8 | data: { 9 | labels: [ 10 | "January", 11 | "February", 12 | "March", 13 | "April", 14 | "May", 15 | "June", 16 | "July", 17 | ], 18 | datasets: [ 19 | { 20 | label: new Date().getFullYear(), 21 | backgroundColor: "#ed64a6", 22 | borderColor: "#ed64a6", 23 | data: [30, 78, 56, 34, 100, 45, 13], 24 | fill: false, 25 | barThickness: 8, 26 | }, 27 | { 28 | label: new Date().getFullYear() - 1, 29 | fill: false, 30 | backgroundColor: "#4c51bf", 31 | borderColor: "#4c51bf", 32 | data: [27, 68, 86, 74, 10, 4, 87], 33 | barThickness: 8, 34 | }, 35 | ], 36 | }, 37 | options: { 38 | maintainAspectRatio: false, 39 | responsive: true, 40 | title: { 41 | display: false, 42 | text: "Orders Chart", 43 | }, 44 | tooltips: { 45 | mode: "index", 46 | intersect: false, 47 | }, 48 | hover: { 49 | mode: "nearest", 50 | intersect: true, 51 | }, 52 | legend: { 53 | labels: { 54 | fontColor: "rgba(0,0,0,.4)", 55 | }, 56 | align: "end", 57 | position: "bottom", 58 | }, 59 | scales: { 60 | xAxes: [ 61 | { 62 | display: false, 63 | scaleLabel: { 64 | display: true, 65 | labelString: "Month", 66 | }, 67 | gridLines: { 68 | borderDash: [2], 69 | borderDashOffset: [2], 70 | color: "rgba(33, 37, 41, 0.3)", 71 | zeroLineColor: "rgba(33, 37, 41, 0.3)", 72 | zeroLineBorderDash: [2], 73 | zeroLineBorderDashOffset: [2], 74 | }, 75 | }, 76 | ], 77 | yAxes: [ 78 | { 79 | display: true, 80 | scaleLabel: { 81 | display: false, 82 | labelString: "Value", 83 | }, 84 | gridLines: { 85 | borderDash: [2], 86 | drawBorder: false, 87 | borderDashOffset: [2], 88 | color: "rgba(33, 37, 41, 0.2)", 89 | zeroLineColor: "rgba(33, 37, 41, 0.15)", 90 | zeroLineBorderDash: [2], 91 | zeroLineBorderDashOffset: [2], 92 | }, 93 | }, 94 | ], 95 | }, 96 | }, 97 | }; 98 | let ctx = document.getElementById("bar-chart").getContext("2d"); 99 | window.myBar = new Chart(ctx, config); 100 | }, []); 101 | return ( 102 | <> 103 |
104 |
105 |
106 |
107 |
108 | Performance 109 |
110 |

111 | Total orders 112 |

113 |
114 |
115 |
116 |
117 | {/* Chart */} 118 |
119 | 120 |
121 |
122 |
123 | 124 | ); 125 | } 126 | -------------------------------------------------------------------------------- /src/components/Cards/CardLineChart.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Chart from "chart.js"; 3 | 4 | export default function CardLineChart() { 5 | React.useEffect(() => { 6 | var config = { 7 | type: "line", 8 | data: { 9 | labels: [ 10 | "January", 11 | "February", 12 | "March", 13 | "April", 14 | "May", 15 | "June", 16 | "July", 17 | ], 18 | datasets: [ 19 | { 20 | label: new Date().getFullYear(), 21 | backgroundColor: "#4c51bf", 22 | borderColor: "#4c51bf", 23 | data: [65, 78, 66, 44, 56, 67, 75], 24 | fill: false, 25 | }, 26 | { 27 | label: new Date().getFullYear() - 1, 28 | fill: false, 29 | backgroundColor: "#fff", 30 | borderColor: "#fff", 31 | data: [40, 68, 86, 74, 56, 60, 87], 32 | }, 33 | ], 34 | }, 35 | options: { 36 | maintainAspectRatio: false, 37 | responsive: true, 38 | title: { 39 | display: false, 40 | text: "Sales Charts", 41 | fontColor: "white", 42 | }, 43 | legend: { 44 | labels: { 45 | fontColor: "white", 46 | }, 47 | align: "end", 48 | position: "bottom", 49 | }, 50 | tooltips: { 51 | mode: "index", 52 | intersect: false, 53 | }, 54 | hover: { 55 | mode: "nearest", 56 | intersect: true, 57 | }, 58 | scales: { 59 | xAxes: [ 60 | { 61 | ticks: { 62 | fontColor: "rgba(255,255,255,.7)", 63 | }, 64 | display: true, 65 | scaleLabel: { 66 | display: false, 67 | labelString: "Month", 68 | fontColor: "white", 69 | }, 70 | gridLines: { 71 | display: false, 72 | borderDash: [2], 73 | borderDashOffset: [2], 74 | color: "rgba(33, 37, 41, 0.3)", 75 | zeroLineColor: "rgba(0, 0, 0, 0)", 76 | zeroLineBorderDash: [2], 77 | zeroLineBorderDashOffset: [2], 78 | }, 79 | }, 80 | ], 81 | yAxes: [ 82 | { 83 | ticks: { 84 | fontColor: "rgba(255,255,255,.7)", 85 | }, 86 | display: true, 87 | scaleLabel: { 88 | display: false, 89 | labelString: "Value", 90 | fontColor: "white", 91 | }, 92 | gridLines: { 93 | borderDash: [3], 94 | borderDashOffset: [3], 95 | drawBorder: false, 96 | color: "rgba(255, 255, 255, 0.15)", 97 | zeroLineColor: "rgba(33, 37, 41, 0)", 98 | zeroLineBorderDash: [2], 99 | zeroLineBorderDashOffset: [2], 100 | }, 101 | }, 102 | ], 103 | }, 104 | }, 105 | }; 106 | var ctx = document.getElementById("line-chart").getContext("2d"); 107 | window.myLine = new Chart(ctx, config); 108 | }, []); 109 | return ( 110 | <> 111 |
112 |
113 |
114 |
115 |
116 | Overview 117 |
118 |

Sales value

119 |
120 |
121 |
122 |
123 | {/* Chart */} 124 |
125 | 126 |
127 |
128 |
129 | 130 | ); 131 | } 132 | -------------------------------------------------------------------------------- /src/components/Cards/CardPageVisits.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // components 4 | 5 | export default function CardPageVisits() { 6 | return ( 7 | <> 8 |
9 |
10 |
11 |
12 |

13 | Page visits 14 |

15 |
16 |
17 | 23 |
24 |
25 |
26 |
27 | {/* Projects table */} 28 | 29 | 30 | 31 | 34 | 37 | 40 | 43 | 44 | 45 | 46 | 47 | 50 | 53 | 56 | 60 | 61 | 62 | 65 | 68 | 71 | 75 | 76 | 77 | 80 | 83 | 86 | 90 | 91 | 92 | 95 | 98 | 101 | 105 | 106 | 107 | 110 | 113 | 116 | 120 | 121 | 122 |
32 | Page name 33 | 35 | Visitors 36 | 38 | Unique users 39 | 41 | Bounce rate 42 |
48 | /argon/ 49 | 51 | 4,569 52 | 54 | 340 55 | 57 | 58 | 46,53% 59 |
63 | /argon/index.html 64 | 66 | 3,985 67 | 69 | 319 70 | 72 | 73 | 46,53% 74 |
78 | /argon/charts.html 79 | 81 | 3,513 82 | 84 | 294 85 | 87 | 88 | 36,49% 89 |
93 | /argon/tables.html 94 | 96 | 2,050 97 | 99 | 147 100 | 102 | 103 | 50,87% 104 |
108 | /argon/profile.html 109 | 111 | 1,795 112 | 114 | 190 115 | 117 | 118 | 46,53% 119 |
123 |
124 |
125 | 126 | ); 127 | } 128 | -------------------------------------------------------------------------------- /src/components/Cards/CardProfile.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // components 4 | 5 | export default function CardProfile() { 6 | return ( 7 | <> 8 |
9 |
10 |
11 |
12 |
13 | ... 18 |
19 |
20 |
21 |
22 |
23 | 24 | 22 25 | 26 | Friends 27 |
28 |
29 | 30 | 10 31 | 32 | Photos 33 |
34 |
35 | 36 | 89 37 | 38 | Comments 39 |
40 |
41 |
42 |
43 |
44 |

45 | Jenna Stones 46 |

47 |
48 | {" "} 49 | Los Angeles, California 50 |
51 |
52 | 53 | Solution Manager - Creative Tim Officer 54 |
55 |
56 | 57 | University of Computer Science 58 |
59 |
60 |
61 |
62 |
63 |

64 | An artist of considerable range, Jenna the name taken by 65 | Melbourne-raised, Brooklyn-based Nick Murphy writes, performs 66 | and records all of his own music, giving it a warm, intimate 67 | feel with a solid groove structure. An artist of considerable 68 | range. 69 |

70 | e.preventDefault()} 74 | > 75 | Show more 76 | 77 |
78 |
79 |
80 |
81 |
82 | 83 | ); 84 | } 85 | -------------------------------------------------------------------------------- /src/components/Cards/CardSettings.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // components 4 | 5 | export default function CardSettings() { 6 | return ( 7 | <> 8 |
9 |
10 |
11 |
My account
12 | 18 |
19 |
20 |
21 |
22 |
23 | User Information 24 |
25 |
26 |
27 |
28 | 34 | 39 |
40 |
41 |
42 |
43 | 49 | 54 |
55 |
56 |
57 |
58 | 64 | 69 |
70 |
71 |
72 |
73 | 79 | 84 |
85 |
86 |
87 | 88 |
89 | 90 |
91 | Contact Information 92 |
93 |
94 |
95 |
96 | 102 | 107 |
108 |
109 |
110 |
111 | 117 | 122 |
123 |
124 |
125 |
126 | 132 | 137 |
138 |
139 |
140 |
141 | 147 | 152 |
153 |
154 |
155 | 156 |
157 | 158 |
159 | About Me 160 |
161 |
162 |
163 |
164 | 170 | 176 |
177 |
178 |
179 |
180 |
181 |
182 | 183 | ); 184 | } 185 | -------------------------------------------------------------------------------- /src/components/Cards/CardSocialTraffic.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // components 4 | 5 | export default function CardSocialTraffic() { 6 | return ( 7 | <> 8 |
9 |
10 |
11 |
12 |

13 | Social traffic 14 |

15 |
16 |
17 | 23 |
24 |
25 |
26 |
27 | {/* Projects table */} 28 | 29 | 30 | 31 | 34 | 37 | 38 | 39 | 40 | 41 | 42 | 45 | 48 | 61 | 62 | 63 | 66 | 69 | 82 | 83 | 84 | 87 | 90 | 103 | 104 | 105 | 108 | 111 | 124 | 125 | 126 | 129 | 132 | 145 | 146 | 147 |
32 | Referral 33 | 35 | Visitors 36 |
43 | Facebook 44 | 46 | 1,480 47 | 49 |
50 | 60% 51 |
52 |
53 |
57 |
58 |
59 |
60 |
64 | Facebook 65 | 67 | 5,480 68 | 70 |
71 | 70% 72 |
73 |
74 |
78 |
79 |
80 |
81 |
85 | Google 86 | 88 | 4,807 89 | 91 |
92 | 80% 93 |
94 |
95 |
99 |
100 |
101 |
102 |
106 | Instagram 107 | 109 | 3,678 110 | 112 |
113 | 75% 114 |
115 |
116 |
120 |
121 |
122 |
123 |
127 | twitter 128 | 130 | 2,645 131 | 133 |
134 | 30% 135 |
136 |
137 |
141 |
142 |
143 |
144 |
148 |
149 |
150 | 151 | ); 152 | } 153 | -------------------------------------------------------------------------------- /src/components/Cards/CardStats.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | 4 | export default function CardStats({ 5 | statSubtitle, 6 | statTitle, 7 | statArrow, 8 | statPercent, 9 | statPercentColor, 10 | statDescripiron, 11 | statIconName, 12 | statIconColor, 13 | }) { 14 | return ( 15 | <> 16 |
17 |
18 |
19 |
20 |
21 | {statSubtitle} 22 |
23 | 24 | {statTitle} 25 | 26 |
27 |
28 |
34 | 35 |
36 |
37 |
38 |

39 | 40 | {" "} 49 | {statPercent}% 50 | 51 | {statDescripiron} 52 |

53 |
54 |
55 | 56 | ); 57 | } 58 | 59 | CardStats.defaultProps = { 60 | statSubtitle: "Traffic", 61 | statTitle: "350,897", 62 | statArrow: "up", 63 | statPercent: "3.48", 64 | statPercentColor: "text-green-500", 65 | statDescripiron: "Since last month", 66 | statIconName: "far fa-chart-bar", 67 | statIconColor: "bg-red-500", 68 | }; 69 | 70 | CardStats.propTypes = { 71 | statSubtitle: PropTypes.string, 72 | statTitle: PropTypes.string, 73 | statArrow: PropTypes.oneOf(["up", "down"]), 74 | statPercent: PropTypes.string, 75 | // can be any of the text color utilities 76 | // from tailwindcss 77 | statPercentColor: PropTypes.string, 78 | statDescripiron: PropTypes.string, 79 | statIconName: PropTypes.string, 80 | // can be any of the background color utilities 81 | // from tailwindcss 82 | statIconColor: PropTypes.string, 83 | }; 84 | -------------------------------------------------------------------------------- /src/components/Cards/CardTable.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | 4 | // components 5 | 6 | import TableDropdown from "components/Dropdowns/TableDropdown.js"; 7 | 8 | export default function CardTable({ color }) { 9 | return ( 10 | <> 11 |
17 |
18 |
19 |
20 |

26 | Card Tables 27 |

28 |
29 |
30 |
31 |
32 | {/* Projects table */} 33 | 34 | 35 | 36 | 46 | 56 | 66 | 76 | 86 | 94 | 95 | 96 | 97 | 98 | 113 | 116 | 119 | 143 | 156 | 159 | 160 | 161 | 176 | 179 | 183 | 207 | 220 | 223 | 224 | 225 | 240 | 243 | 246 | 270 | 283 | 286 | 287 | 288 | 303 | 306 | 310 | 334 | 347 | 350 | 351 | 352 | 367 | 370 | 374 | 398 | 411 | 414 | 415 | 416 |
44 | Project 45 | 54 | Budget 55 | 64 | Status 65 | 74 | Users 75 | 84 | Completion 85 |
99 | ...{" "} 104 | 110 | Argon Design System 111 | 112 | 114 | $2,500 USD 115 | 117 | pending 118 | 120 |
121 | ... 126 | ... 131 | ... 136 | ... 141 |
142 | 		144 |
145 | 60% 146 |
147 |
148 |
152 |
153 |
154 |
155 | 		157 | 158 |
162 | ...{" "} 167 | 173 | Angular Now UI Kit PRO 174 | 175 | 177 | $1,800 USD 178 | 180 | {" "} 181 | completed 182 | 184 |
185 | ... 190 | ... 195 | ... 200 | ... 205 |
206 | 		208 |
209 | 100% 210 |
211 |
212 |
216 |
217 |
218 |
219 | 		221 | 222 |
226 | ...{" "} 231 | 237 | Black Dashboard Sketch 238 | 239 | 241 | $3,150 USD 242 | 244 | delayed 245 | 247 |
248 | ... 253 | ... 258 | ... 263 | ... 268 |
269 | 		271 |
272 | 73% 273 |
274 |
275 |
279 |
280 |
281 |
282 | 		284 | 285 |
289 | ...{" "} 294 | 300 | React Material Dashboard 301 | 302 | 304 | $4,400 USD 305 | 307 | on 308 | schedule 309 | 311 |
312 | ... 317 | ... 322 | ... 327 | ... 332 |
333 | 		335 |
336 | 90% 337 |
338 |
339 |
343 |
344 |
345 |
346 | 		348 | 349 |
353 | ...{" "} 358 | 364 | React Material Dashboard 365 | 366 | 368 | $2,200 USD 369 | 371 | {" "} 372 | completed 373 | 375 |
376 | ... 381 | ... 386 | ... 391 | ... 396 |
397 | 		399 |
400 | 100% 401 |
402 |
403 |
407 |
408 |
409 |
410 | 		412 | 413 |
417 |
418 |
419 | 420 | ); 421 | } 422 | 423 | CardTable.defaultProps = { 424 | color: "light", 425 | }; 426 | 427 | CardTable.propTypes = { 428 | color: PropTypes.oneOf(["light", "dark"]), 429 | }; 430 | -------------------------------------------------------------------------------- /src/components/Dropdowns/IndexDropdown.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | import { createPopper } from "@popperjs/core"; 4 | 5 | const IndexDropdown = () => { 6 | // dropdown props 7 | const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false); 8 | const btnDropdownRef = React.createRef(); 9 | const popoverDropdownRef = React.createRef(); 10 | const openDropdownPopover = () => { 11 | createPopper(btnDropdownRef.current, popoverDropdownRef.current, { 12 | placement: "bottom-start", 13 | }); 14 | setDropdownPopoverShow(true); 15 | }; 16 | const closeDropdownPopover = () => { 17 | setDropdownPopoverShow(false); 18 | }; 19 | return ( 20 | <> 21 | { 26 | e.preventDefault(); 27 | dropdownPopoverShow ? closeDropdownPopover() : openDropdownPopover(); 28 | }} 29 | > 30 | Demo Pages 31 | 32 |
39 | 44 | Admin Layout 45 | 46 | 50 | Dashboard 51 | 52 | 56 | Settings 57 | 58 | 62 | Tables 63 | 64 | 68 | Maps 69 | 70 |
71 | 76 | Auth Layout 77 | 78 | 82 | Login 83 | 84 | 88 | Register 89 | 90 |
91 | 96 | No Layout 97 | 98 | 102 | Lading 103 | 104 | 108 | Profile 109 | 110 |
111 | 112 | ); 113 | }; 114 | 115 | export default IndexDropdown; 116 | -------------------------------------------------------------------------------- /src/components/Dropdowns/NotificationDropdown.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createPopper } from "@popperjs/core"; 3 | 4 | const NotificationDropdown = () => { 5 | // dropdown props 6 | const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false); 7 | const btnDropdownRef = React.createRef(); 8 | const popoverDropdownRef = React.createRef(); 9 | const openDropdownPopover = () => { 10 | console.log("hey"); 11 | createPopper(btnDropdownRef.current, popoverDropdownRef.current, { 12 | placement: "bottom-start", 13 | }); 14 | setDropdownPopoverShow(true); 15 | }; 16 | const closeDropdownPopover = () => { 17 | setDropdownPopoverShow(false); 18 | }; 19 | return ( 20 | <> 21 | { 26 | e.preventDefault(); 27 | dropdownPopoverShow ? closeDropdownPopover() : openDropdownPopover(); 28 | }} 29 | > 30 | 31 | 32 |
39 | e.preventDefault()} 45 | > 46 | Action 47 | 48 | e.preventDefault()} 54 | > 55 | Another action 56 | 57 | e.preventDefault()} 63 | > 64 | Something else here 65 | 66 |
67 | e.preventDefault()} 73 | > 74 | Seprated link 75 | 76 |
77 | 78 | ); 79 | }; 80 | 81 | export default NotificationDropdown; 82 | -------------------------------------------------------------------------------- /src/components/Dropdowns/PagesDropdown.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | import { createPopper } from "@popperjs/core"; 4 | 5 | const PagesDropdown = () => { 6 | // dropdown props 7 | const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false); 8 | const btnDropdownRef = React.createRef(); 9 | const popoverDropdownRef = React.createRef(); 10 | const openDropdownPopover = () => { 11 | createPopper(btnDropdownRef.current, popoverDropdownRef.current, { 12 | placement: "bottom-start", 13 | }); 14 | setDropdownPopoverShow(true); 15 | }; 16 | const closeDropdownPopover = () => { 17 | setDropdownPopoverShow(false); 18 | }; 19 | return ( 20 | <> 21 | { 26 | e.preventDefault(); 27 | dropdownPopoverShow ? closeDropdownPopover() : openDropdownPopover(); 28 | }} 29 | > 30 | Demo Pages 31 | 32 |
39 | 44 | Admin Layout 45 | 46 | 52 | Dashboard 53 | 54 | 60 | Settings 61 | 62 | 68 | Tables 69 | 70 | 76 | Maps 77 | 78 |
79 | 84 | Auth Layout 85 | 86 | 92 | Login 93 | 94 | 100 | Register 101 | 102 |
103 | 108 | No Layout 109 | 110 | 116 | Lading 117 | 118 | 124 | Profile 125 | 126 |
127 | 128 | ); 129 | }; 130 | 131 | export default PagesDropdown; 132 | -------------------------------------------------------------------------------- /src/components/Dropdowns/TableDropdown.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createPopper } from "@popperjs/core"; 3 | 4 | const NotificationDropdown = () => { 5 | // dropdown props 6 | const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false); 7 | const btnDropdownRef = React.createRef(); 8 | const popoverDropdownRef = React.createRef(); 9 | const openDropdownPopover = () => { 10 | createPopper(btnDropdownRef.current, popoverDropdownRef.current, { 11 | placement: "left-start", 12 | }); 13 | setDropdownPopoverShow(true); 14 | }; 15 | const closeDropdownPopover = () => { 16 | setDropdownPopoverShow(false); 17 | }; 18 | return ( 19 | <> 20 | { 25 | e.preventDefault(); 26 | dropdownPopoverShow ? closeDropdownPopover() : openDropdownPopover(); 27 | }} 28 | > 29 | 30 | 31 | 66 | 67 | ); 68 | }; 69 | 70 | export default NotificationDropdown; 71 | -------------------------------------------------------------------------------- /src/components/Dropdowns/UserDropdown.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createPopper } from "@popperjs/core"; 3 | 4 | const UserDropdown = () => { 5 | // dropdown props 6 | const [dropdownPopoverShow, setDropdownPopoverShow] = React.useState(false); 7 | const btnDropdownRef = React.createRef(); 8 | const popoverDropdownRef = React.createRef(); 9 | const openDropdownPopover = () => { 10 | createPopper(btnDropdownRef.current, popoverDropdownRef.current, { 11 | placement: "bottom-start", 12 | }); 13 | setDropdownPopoverShow(true); 14 | }; 15 | const closeDropdownPopover = () => { 16 | setDropdownPopoverShow(false); 17 | }; 18 | return ( 19 | <> 20 | { 25 | e.preventDefault(); 26 | dropdownPopoverShow ? closeDropdownPopover() : openDropdownPopover(); 27 | }} 28 | > 29 |
30 | 31 | ... 36 | 37 |
38 | 39 |
46 | e.preventDefault()} 52 | > 53 | Action 54 | 55 | e.preventDefault()} 61 | > 62 | Another action 63 | 64 | e.preventDefault()} 70 | > 71 | Something else here 72 | 73 | 84 | 85 | ); 86 | }; 87 | 88 | export default UserDropdown; 89 | -------------------------------------------------------------------------------- /src/components/Footers/Footer.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function Footer() { 4 | return ( 5 | <> 6 | 160 | 161 | ); 162 | } 163 | -------------------------------------------------------------------------------- /src/components/Footers/FooterAdmin.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function FooterAdmin() { 4 | return ( 5 | <> 6 | 60 | 61 | ); 62 | } 63 | -------------------------------------------------------------------------------- /src/components/Footers/FooterSmall.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function FooterSmall(props) { 4 | return ( 5 | <> 6 | 66 | 67 | ); 68 | } 69 | -------------------------------------------------------------------------------- /src/components/Headers/HeaderStats.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // components 4 | 5 | import CardStats from "components/Cards/CardStats.js"; 6 | 7 | export default function HeaderStats() { 8 | return ( 9 | <> 10 | {/* Header */} 11 |
12 |
13 |
14 | {/* Card stats */} 15 |
16 |
17 | 27 |
28 |
29 | 39 |
40 |
41 | 51 |
52 |
53 | 63 |
64 |
65 |
66 |
67 |
68 | 69 | ); 70 | } 71 | -------------------------------------------------------------------------------- /src/components/Maps/MapExample.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // react plugin used to create google maps 3 | import { 4 | withScriptjs, 5 | withGoogleMap, 6 | GoogleMap, 7 | Marker, 8 | } from "react-google-maps"; 9 | 10 | const MapExampleScript = withScriptjs( 11 | withGoogleMap((props) => ( 12 | 61 | 62 | 63 | )) 64 | ); 65 | 66 | function MapExample() { 67 | return ( 68 | } 71 | containerElement={
} 72 | mapElement={
} 73 | /> 74 | ); 75 | } 76 | 77 | export default MapExample; 78 | -------------------------------------------------------------------------------- /src/components/Navbars/AdminNavbar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import UserDropdown from "components/Dropdowns/UserDropdown.js"; 4 | 5 | export default function Navbar() { 6 | return ( 7 | <> 8 | {/* Navbar */} 9 | 38 | {/* End Navbar */} 39 | 40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /src/components/Navbars/AuthNavbar.js: -------------------------------------------------------------------------------- 1 | /*eslint-disable*/ 2 | import React from "react"; 3 | import { Link } from "react-router-dom"; 4 | 5 | // components 6 | 7 | import PagesDropdown from "components/Dropdowns/PagesDropdown.js"; 8 | 9 | export default function Navbar(props) { 10 | const [navbarOpen, setNavbarOpen] = React.useState(false); 11 | return ( 12 | <> 13 | 97 | 98 | ); 99 | } 100 | -------------------------------------------------------------------------------- /src/components/Navbars/IndexNavbar.js: -------------------------------------------------------------------------------- 1 | /*eslint-disable*/ 2 | import React from "react"; 3 | import { Link } from "react-router-dom"; 4 | // components 5 | 6 | import IndexDropdown from "components/Dropdowns/IndexDropdown.js"; 7 | 8 | export default function Navbar(props) { 9 | const [navbarOpen, setNavbarOpen] = React.useState(false); 10 | return ( 11 | <> 12 | 96 | 97 | ); 98 | } 99 | -------------------------------------------------------------------------------- /src/components/Sidebar/Sidebar.js: -------------------------------------------------------------------------------- 1 | /*eslint-disable*/ 2 | import React from "react"; 3 | import { Link } from "react-router-dom"; 4 | 5 | import NotificationDropdown from "components/Dropdowns/NotificationDropdown.js"; 6 | import UserDropdown from "components/Dropdowns/UserDropdown.js"; 7 | 8 | export default function Sidebar() { 9 | const [collapseShow, setCollapseShow] = React.useState("hidden"); 10 | return ( 11 | <> 12 | 335 | 336 | ); 337 | } 338 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom"; 4 | 5 | import "@fortawesome/fontawesome-free/css/all.min.css"; 6 | import "assets/styles/tailwind.css"; 7 | 8 | // layouts 9 | 10 | import Admin from "layouts/Admin.js"; 11 | import Auth from "layouts/Auth.js"; 12 | 13 | // views without layouts 14 | 15 | import Landing from "views/Landing.js"; 16 | import Profile from "views/Profile.js"; 17 | import Index from "views/Index.js"; 18 | 19 | ReactDOM.render( 20 | 21 | 22 | {/* add routes with layouts */} 23 | 24 | 25 | {/* add routes without layouts */} 26 | 27 | 28 | 29 | {/* add redirect for first page */} 30 | 31 | 32 | , 33 | document.getElementById("root") 34 | ); 35 | -------------------------------------------------------------------------------- /src/layouts/Admin.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Switch, Route, Redirect } from "react-router-dom"; 3 | 4 | // components 5 | 6 | import AdminNavbar from "components/Navbars/AdminNavbar.js"; 7 | import Sidebar from "components/Sidebar/Sidebar.js"; 8 | import HeaderStats from "components/Headers/HeaderStats.js"; 9 | import FooterAdmin from "components/Footers/FooterAdmin.js"; 10 | 11 | // views 12 | 13 | import Dashboard from "views/admin/Dashboard.js"; 14 | import Maps from "views/admin/Maps.js"; 15 | import Settings from "views/admin/Settings.js"; 16 | import Tables from "views/admin/Tables.js"; 17 | 18 | export default function Admin() { 19 | return ( 20 | <> 21 | 22 |
23 | 24 | {/* Header */} 25 | 26 |
27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
36 |
37 | 38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /src/layouts/Auth.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Switch, Route, Redirect } from "react-router-dom"; 3 | 4 | // components 5 | 6 | import Navbar from "components/Navbars/AuthNavbar.js"; 7 | import FooterSmall from "components/Footers/FooterSmall.js"; 8 | 9 | // views 10 | 11 | import Login from "views/auth/Login.js"; 12 | import Register from "views/auth/Register.js"; 13 | 14 | export default function Auth() { 15 | return ( 16 | <> 17 | 18 |
19 |
20 |
27 | 28 | 29 | 30 | 31 | 32 | 33 |
34 |
35 | 36 | ); 37 | } 38 | -------------------------------------------------------------------------------- /src/views/Landing.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | // components 5 | 6 | import Navbar from "components/Navbars/AuthNavbar.js"; 7 | import Footer from "components/Footers/Footer.js"; 8 | 9 | export default function Landing() { 10 | return ( 11 | <> 12 | 13 |
14 |
15 |
22 | 26 |
27 |
28 |
29 |
30 |
31 |

32 | Your story starts with us. 33 |

34 |

35 | This is a simple example of a Landing Page you can build 36 | using Notus React. It features multiple CSS components based 37 | on the Tailwind CSS design system. 38 |

39 |
40 |
41 |
42 |
43 |
47 | 56 | 60 | 61 |
62 |
63 | 64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 | 72 |
73 |
Awarded Agency
74 |

75 | Divide details about your product or agency work into 76 | parts. A paragraph describing a feature will be enough. 77 |

78 |
79 |
80 |
81 | 82 |
83 |
84 |
85 |
86 | 87 |
88 |
Free Revisions
89 |

90 | Keep you user engaged by providing meaningful information. 91 | Remember that by this time, the user is curious. 92 |

93 |
94 |
95 |
96 | 97 |
98 |
99 |
100 |
101 | 102 |
103 |
Verified Company
104 |

105 | Write a few lines about each one. A paragraph describing a 106 | feature will be enough. Keep you user engaged! 107 |

108 |
109 |
110 |
111 |
112 | 113 |
114 |
115 |
116 | 117 |
118 |

119 | Working with us is a pleasure 120 |

121 |

122 | Don't let your uses guess by attaching tooltips and popoves to 123 | any element. Just make sure you enable them first via 124 | JavaScript. 125 |

126 |

127 | The kit comes with three pre-built pages to help you get 128 | started faster. You can change the text and images and you're 129 | good to go. Just make sure you enable them first via 130 | JavaScript. 131 |

132 | 133 | Check Notus React! 134 | 135 |
136 | 137 |
138 |
139 | ... 144 |
145 | 151 | 155 | 156 |

157 | Top Notch Services 158 |

159 |

160 | The Arctic Ocean freezes every winter and much of the 161 | sea-ice then thaws every summer, and that process will 162 | continue whatever happens. 163 |

164 |
165 |
166 |
167 |
168 |
169 |
170 | 171 |
172 |
176 | 185 | 189 | 190 |
191 | 192 |
193 |
194 |
195 | ... 200 |
201 |
202 |
203 |
204 | 205 |
206 |

A growing company

207 |

208 | The extension comes with three pre-built pages to help you 209 | get started faster. You can change the text and images and 210 | you're good to go. 211 |

212 |
    213 |
  • 214 |
    215 |
    216 | 217 | 218 | 219 |
    220 |
    221 |

    222 | Carefully crafted components 223 |

    224 |
    225 |
    226 |
    • 227 |
  • 228 |
    229 |
    230 | 231 | 232 | 233 |
    234 |
    235 |

    236 | Amazing page examples 237 |

    238 |
    239 |
    240 |
    • 241 |
  • 242 |
    243 |
    244 | 245 | 246 | 247 |
    248 |
    249 |

    Dynamic components

    250 |
    251 |
    252 |
    • 253 |
254 |
255 |
256 |
257 |
258 |
259 | 260 |
261 |
262 |
263 |
264 |

Here are our heroes

265 |

266 | According to the National Oceanic and Atmospheric 267 | Administration, Ted, Scambos, NSIDClead scentist, puts the 268 | potentially record maximum. 269 |

270 |
271 |
272 |
273 |
274 |
275 | ... 280 |
281 |
Ryan Tompson
282 |

283 | Web Developer 284 |

285 |
286 | 292 | 298 | 304 |
305 |
306 |
307 |
308 |
309 |
310 | ... 315 |
316 |
Romina Hadid
317 |

318 | Marketing Specialist 319 |

320 |
321 | 327 | 333 |
334 |
335 |
336 |
337 |
338 |
339 | ... 344 |
345 |
Alexa Smith
346 |

347 | UI/UX Designer 348 |

349 |
350 | 356 | 362 | 368 |
369 |
370 |
371 |
372 |
373 |
374 | ... 379 |
380 |
Jenna Kardi
381 |

382 | Founder and CEO 383 |

384 |
385 | 391 | 397 | 403 | 409 |
410 |
411 |
412 |
413 |
414 |
415 |
416 | 417 |
418 |
422 | 431 | 435 | 436 |
437 | 438 |
439 |
440 |
441 |

442 | Build something 443 |

444 |

445 | Put the potentially record low maximum sea ice extent tihs 446 | year down to low ice. According to the National Oceanic and 447 | Atmospheric Administration, Ted, Scambos. 448 |

449 |
450 |
451 |
452 |
453 |
454 | 455 |
456 |
457 | Excelent Services 458 |
459 |

460 | Some quick example text to build on the card title and make up 461 | the bulk of the card's content. 462 |

463 |
464 |
465 |
466 | 467 |
468 |
469 | Grow your market 470 |
471 |

472 | Some quick example text to build on the card title and make up 473 | the bulk of the card's content. 474 |

475 |
476 |
477 |
478 | 479 |
480 |
481 | Launch time 482 |
483 |

484 | Some quick example text to build on the card title and make up 485 | the bulk of the card's content. 486 |

487 |
488 |
489 |
490 |
491 |
492 |
493 |
494 |
495 |
496 |
497 |

498 | Want to work with us? 499 |

500 |

501 | Complete this form and we will get back to you in 24 502 | hours. 503 |

504 |
505 | 511 | 516 |
517 | 518 |
519 | 525 | 530 |
531 | 532 |
533 | 539 |