├── .github └── workflows │ └── main.yml ├── .gitignore ├── CHANGELOG.md ├── ISSUE_TEMPLATE.md ├── LICENSE.md ├── README.md ├── 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 ├── PageChange │ └── PageChange.js └── Sidebar │ └── Sidebar.js ├── jsconfig.json ├── layouts ├── Admin.js └── Auth.js ├── next.config.js ├── package.json ├── pages ├── 404.js ├── _app.js ├── _document.js ├── _error.js ├── admin │ ├── dashboard.js │ ├── maps.js │ ├── settings.js │ └── tables.js ├── auth │ ├── login.js │ └── register.js ├── index.js ├── landing.js └── profile.js ├── public └── img │ ├── angular.jpg │ ├── bootstrap.jpg │ ├── brand │ ├── apple-icon.png │ └── favicon.ico │ ├── 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 │ ├── img-1-1000x600.jpg │ ├── landing.jpg │ ├── login.jpg │ ├── pattern_nextjs.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 └── 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-nextjs?ref=nnjs-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 | 25 | .next/ 26 | out/ 27 | 28 | commit.sh 29 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | ## [1.1.0] 2021-03-19 4 | ### Bug fixing 5 | - Rename `master` branch to `main` 6 | - To make a lot of our changes, we've followed the instructions from here (minus the `colors` and `font-sizes`): https://tailwindcss.com/docs/upgrading-to-v2 7 | - For the colors, the only change that we made, is the fact that we've added all Tailwind CSS colors to our `tailwind.config.js` files, and inside our product, all `{type}-gray-{number}` classes were renamed to `{type}-blueGray-{number}` 8 | - After that, we've changed `{type}-blueGray-{number}` to `{type}-blueGray-{lower-number}`, i.e. (`100` became `50`, `200` became `100`, ..., `900` became `800`) 9 | - You can achieve this, by search in your whole project for `blueGray-100` and replace it with `blueGray-50` 10 | - Then, you search in your whole project for `blueGray-200` and replace it with `blueGray-100` 11 | - Then, you search in your whole project for `blueGray-300` and replace it with `blueGray-200` 12 | - Then, you search in your whole project for `blueGray-400` and replace it with `blueGray-300` 13 | - Then, you search in your whole project for `blueGray-500` and replace it with `blueGray-400` 14 | - Then, you search in your whole project for `blueGray-600` and replace it with `blueGray-500` 15 | - Then, you search in your whole project for `blueGray-700` and replace it with `blueGray-600` 16 | - Then, you search in your whole project for `blueGray-800` and replace it with `blueGray-700` 17 | - Then, you search in your whole project for `blueGray-900` and replace it with `blueGray-800` 18 | - For the colors, the only change that we made, is the fact that we've added all Tailwind CSS colors to our `tailwind.config.js` files, and inside our product, all `{type}-blue-{number}` classes were renamed to `{type}-lightBlue-{number}` 19 | - For the colors, the only change that we made, is the fact that we've added all Tailwind CSS colors to our `tailwind.config.js` files, and inside our product, all `{type}-green-{number}` classes were renamed to `{type}-emerald-{number}` 20 | - `lg:bg-transparent` is not working anymore, so we've changed it with `lg:bg-opacity-0` 21 | - Since we've dropped the usage of custom CSS, and reverted to `Built-In CSS Support` from `NextJS`, we had to move our images inside the `public` folder, and our styles inside the `styles` folder 22 | - All the `require` images have been replaced by simple `/img/` strings 23 | - https://github.com/creativetimofficial/notus-angular/issues/4 24 | - https://github.com/creativetimofficial/notus-js/issues/4 25 | - https://github.com/creativetimofficial/notus-js/pull/5 26 | - https://github.com/creativetimofficial/notus-js/pull/6 27 | - https://github.com/creativetimofficial/notus-nextjs/issues/6 28 | - https://github.com/creativetimofficial/notus-nextjs/issues/7 29 | - https://github.com/creativetimofficial/notus-nextjs/issues/8 30 | - https://github.com/creativetimofficial/notus-react/issues/3 31 | - https://github.com/creativetimofficial/notus-svelte/issues/3 32 | - https://github.com/creativetimofficial/notus-svelte/issues/6 33 | - https://github.com/creativetimofficial/vue-notus/pull/4/ 34 | ### Major style changes 35 | - The upgrade of Tailwind CSS from version 1 to version 2, will cause multiple style changes, check them out on the official Tailwind CSS websites: 36 | - https://blog.tailwindcss.com/tailwindcss-v2 37 | - https://tailwindcss.com/ 38 | - https://tailwindcss.com/docs/upgrading-to-v2 39 | ### Deleted components 40 | - `next.config.js` (we do not need it anymore since we now use `Built-In CSS Support` from `NextJS`) 41 | - for the absolute imports, we've used the `jsconfig.json` file 42 | ### Added components 43 | - `jsconfig.json` (to keep our absolute imports) 44 | ### Deleted dependencies 45 | - `@tailwindcss/custom-forms` 46 | - `react-google-maps` (replaced by simple Google Maps API) 47 | - `@types/googlemaps` (dependencies of `react-google-maps`) 48 | - `@types/markerclustererplus` (dependencies of `react-google-maps`) 49 | - `@types/react` (dependencies of `react-google-maps`) 50 | - `@zeit/next-css` (we'll use the default `Built-In CSS Support` from `NextJS`) 51 | - `@zeit/next-sass` (we'll use the default `Built-In CSS Support` from `NextJS`) 52 | - `node-sass` (we'll use the default `Built-In CSS Support` from `NextJS`) 53 | - `next-images` (we'll use the default `Built-In CSS Support` from `NextJS`) 54 | - `next-fonts` (we'll use the default `Built-In CSS Support` from `NextJS`) 55 | - `next-compose-plugins` (we'll use the default `Built-In CSS Support` from `NextJS`) 56 | - `path` (we'll use the default `Built-In CSS Support` from `NextJS`) 57 | - `webpack` (we'll use the default `Built-In CSS Support` from `NextJS`) 58 | ### Added dependencies 59 | - `@tailwindcss/forms` (replaces `@tailwindcss/custom-forms`) 60 | - `autoprefixer` 61 | - `postcss` 62 | ### Updated dependencies 63 | ``` 64 | @fortawesome/fontawesome-free 5.14.0 → 5.15.3 65 | @popperjs/core 2.5.1 → 2.9.1 66 | chart.js 2.9.3 → 2.9.4 67 | next 9.5.3 → 10.0.9 68 | react 16.13.1 → 17.0.1 69 | @types/react 16.9.49 → 17.0.3 70 | react-dom 16.13.1 → 17.0.1 71 | react-scripts 3.4.3 → 4.0.3 72 | tailwindcss 1.8.10 → 2.0.4 73 | typescript 4.0.3 → 4.2.3 74 | ``` 75 | ### Warning 76 | _On a clean install there may be some warnings from request, chokidar, fsevents - they come from node_modules, and they do not affect the product at all._ 77 | 78 | ## [1.0.0] 2020-09-29 79 | ### Original Release 80 | - Started project from [Tailwind Starter Kit by Creative Tim](https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation?ref=nnjs-changelog) 81 | - Added design from Tailwind Starter Kit by Creative Tim 82 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | 14 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Creative Tim (https://www.creative-tim.com?ref=nnjs-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 NextJS ![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.1.0-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) ![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/notus-nextjs.svg) ![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/notus-nextjs.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 NextJS](https://github.com/creativetimofficial/public-assets/blob/master/notus-nextjs/notus-nextjs.jpg?raw=true) 6 | 7 | ### A beautiful UI Kit and Admin for Tailwind CSS and NextJS. 8 | 9 | Start your development with a Free Tailwind CSS and NextJS UI Kit and Admin. Let Notus NextJS amaze you with its cool features and build tools and get your project to a whole new level. 10 | 11 | Notus NextJS is Free and Open Source. It features multiple HTML and NextJS elements and it comes with dynamic components for NextJS. 12 | 13 | It is based on [Tailwind Starter Kit](https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation?ref=nnjs-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 run dev` 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-nextjs/?ref=nnjs-github-readme) 40 | - Admin Samples 41 | - [Dashboard](https://demos.creative-tim.com/notus-nextjs/admin/dashboard?ref=nnjs-github-readme) 42 | - [Settings](https://demos.creative-tim.com/notus-nextjs/admin/settings?ref=nnjs-github-readme) 43 | - [Tables](https://demos.creative-tim.com/notus-nextjs/admin/tables?ref=nnjs-github-readme) 44 | - [Maps](https://demos.creative-tim.com/notus-nextjs/admin/maps?ref=nnjs-github-readme) 45 | - Authentication Samples 46 | - [Login](https://demos.creative-tim.com/notus-nextjs/auth/login?ref=nnjs-github-readme) 47 | - [Register](https://demos.creative-tim.com/notus-nextjs/auth/register?ref=nnjs-github-readme) 48 | - Presentation Samples 49 | - [Landing](https://demos.creative-tim.com/notus-nextjs/landing?ref=nnjs-github-readme) 50 | - [Profile](https://demos.creative-tim.com/notus-nextjs/profile?ref=nnjs-github-readme) 51 | 52 | 53 | ### Fully Coded Components 54 | 55 | Notus NextJS 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 NextJS comes with 120 Fully Coded CSS elements, such as [Alerts](https://www.creative-tim.com/learning-lab/tailwind/nextjs/alerts/notus?ref=nnjs-github-readme), [Buttons](https://www.creative-tim.com/learning-lab/tailwind/nextjs/buttons/notus?ref=nnjs-github-readme), [Inputs](https://www.creative-tim.com/learning-lab/tailwind/nextjs/inputs/notus?ref=nnjs-github-readme) and many more. 66 | 67 | Please [check all of them here](https://www.creative-tim.com/learning-lab/tailwind/nextjs/alerts/notus?ref=nnjs-github-readme). 68 | 69 | ### NextJS Components 70 | 71 | We also feature the following 18 dynamic components: 72 | - [Alerts](https://www.creative-tim.com/learning-lab/tailwind/nextjs/alerts/notus?ref=nnjs-github-readme) 73 | - [Popper for Menus](https://www.creative-tim.com/learning-lab/tailwind/nextjs/dropdowns/notus?ref=nnjs-github-readme) 74 | - [Menus](https://www.creative-tim.com/learning-lab/tailwind/nextjs/menus/notus?ref=nnjs-github-readme) 75 | - [Modals](https://www.creative-tim.com/learning-lab/tailwind/nextjs/modals/notus?ref=nnjs-github-readme) 76 | - [Navbars](https://www.creative-tim.com/learning-lab/tailwind/nextjs/navbar/notus?ref=nnjs-github-readme) 77 | - [Popper for popover content](https://www.creative-tim.com/learning-lab/tailwind/nextjs/popovers/notus?ref=nnjs-github-readme) 78 | - [Tabs](https://www.creative-tim.com/learning-lab/tailwind/nextjs/tabs/notus?ref=nnjs-github-readme) 79 | - [Popper for tooltips content](https://www.creative-tim.com/learning-lab/tailwind/nextjs/tooltips/notus?ref=nnjs-github-readme) 80 | 81 | 82 | ## Table of Contents 83 | 84 | * [Versions](#versions) 85 | * [Documentation](#documentation) 86 | * [Quick Start](#quick-start) 87 | * [Deploy](#deploy) 88 | * [Files and folders](#files-and-folders) 89 | * [Browser Support](#browser-support) 90 | * [Reporting Issues](#reporting-issues) 91 | * [Licensing](#licensing) 92 | * [Useful Links](#useful-links) 93 | * [Resources](#resources) 94 | 95 | ## Versions 96 | 97 | [](https://www.creative-tim.com/product/notus-angular?ref=nnjs-github-readme)[](https://www.creative-tim.com/product/notus-js?ref=nnjs-github-readme)[](https://www.creative-tim.com/product/notus-nextjs?ref=nnjs-github-readme)[](https://www.creative-tim.com/product/notus-react?ref=nnjs-github-readme)[](https://www.creative-tim.com/product/notus-svelte?ref=nnjs-github-readme)[](https://www.creative-tim.com/product/vue-notus?ref=nnjs-github-readme) 98 | 99 | 100 | | Angular | JavaScript / HTML | NextJS | React | Svelte | VueJS | 101 | | :---: | :---: | :---: | :---: | :---: | :---: | 102 | | [![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=nnjs-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=nnjs-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=nnjs-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=nnjs-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=nnjs-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=nnjs-github-readme) 103 | 104 | ## Documentation 105 | The documentation for the Notus NextJS is hosted at our website. 106 | 107 | ## Quick start 108 | 109 | - Download from Creative Tim. 110 | - Check it on Github. 111 | 112 | ## Deploy 113 | :rocket: You can deploy your own version of the template to Genezio with one click: 114 | 115 | [![Deploy to Genezio](https://raw.githubusercontent.com/Genez-io/graphics/main/svg/deploy-button.svg)](https://app.genez.io/start/deploy?repository=https://github.com/creativetimofficial/notus-nextjs&utm_source=github&utm_medium=referral&utm_campaign=github-creativetim&utm_term=deploy-project&utm_content=button-head) 116 | 117 | ## Files and Folder 118 | 119 | This is the project structure that you will get upon the download: 120 | ``` 121 | notus-nextjs 122 | . 123 | ├── CHANGELOG.md 124 | ├── ISSUE_TEMPLATE.md 125 | ├── LICENSE.md 126 | ├── README.md 127 | ├── assets 128 | │   ├── img 129 | │   │   ├── brand 130 | │   │   │   └── favicon.ico 131 | │   │   ├── github.svg 132 | │   │   └── google.svg 133 | │   └── styles 134 | │   ├── index.css 135 | │   └── tailwind.css 136 | ├── components 137 | │   ├── Cards 138 | │   │   ├── CardBarChart.js 139 | │   │   ├── CardLineChart.js 140 | │   │   ├── CardPageVisits.js 141 | │   │   ├── CardProfile.js 142 | │   │   ├── CardSettings.js 143 | │   │   ├── CardSocialTraffic.js 144 | │   │   ├── CardStats.js 145 | │   │   └── CardTable.js 146 | │   ├── Dropdowns 147 | │   │   ├── IndexDropdown.js 148 | │   │   ├── NotificationDropdown.js 149 | │   │   ├── PagesDropdown.js 150 | │   │   ├── TableDropdown.js 151 | │   │   └── UserDropdown.js 152 | │   ├── Footers 153 | │   │   ├── Footer.js 154 | │   │   ├── FooterAdmin.js 155 | │   │   └── FooterSmall.js 156 | │   ├── Headers 157 | │   │   └── HeaderStats.js 158 | │   ├── Maps 159 | │   │   └── MapExample.js 160 | │   ├── Navbars 161 | │   │   ├── AdminNavbar.js 162 | │   │   ├── AuthNavbar.js 163 | │   │   └── IndexNavbar.js 164 | │   ├── PageChange 165 | │   │   └── PageChange.js 166 | │   └── Sidebar 167 | │   └── Sidebar.js 168 | ├── layouts 169 | │   ├── Admin.js 170 | │   └── Auth.js 171 | ├── next.config.js 172 | ├── package.json 173 | ├── pages 174 | │   ├── 404.js 175 | │   ├── _app.js 176 | │   ├── _document.js 177 | │   ├── _error.js 178 | │   ├── admin 179 | │   │   ├── dashboard.js 180 | │   │   ├── maps.js 181 | │   │   ├── settings.js 182 | │   │   └── tables.js 183 | │   ├── auth 184 | │   │   ├── login.js 185 | │   │   └── register.js 186 | │   ├── index.js 187 | │   ├── landing.js 188 | │   └── profile.js 189 | └── tailwind.config.js 190 | ``` 191 | 192 | ## Browser Support 193 | 194 | At present, we officially aim to support the last two versions of the following browsers: 195 | 196 | | Chrome | Firefox | Edge | Safari | Opera | 197 | |:---:|:---:|:---:|:---:|:---:| 198 | | | | | | | 199 | 200 | ## Reporting Issues 201 | 202 | We use GitHub Issues as the official bug tracker for the Notus NextJS. Here are some advices for our users that want to report an issue: 203 | 204 | 1. Make sure that you are using the latest version of the Notus NextJS. Check the CHANGELOG from your dashboard on our website. 205 | 2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed. 206 | 3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help. 207 | 208 | ## Licensing 209 | 210 | - Copyright 2021 Creative Tim 211 | 212 | - Licensed under MIT 213 | 214 | ## Useful Links 215 | 216 | - Tutorials 217 | - Affiliate Program (earn money) 218 | - Blog Creative Tim 219 | - Free Products from Creative Tim 220 | - Premium Products from Creative Tim 221 | - React Products from Creative Tim 222 | - Angular Products from Creative Tim 223 | - VueJS Products from Creative Tim 224 | - More products from Creative Tim 225 | - Check our Bundles here 226 | - Check our awesome builder here 227 | - Check Tailwind Starter Kit, the project behind this product here 228 | 229 | ### Social Media 230 | 231 | Twitter: https://twitter.com/CreativeTim 232 | 233 | Facebook: https://www.facebook.com/CreativeTim 234 | 235 | Dribbble: https://dribbble.com/creativetim 236 | 237 | Instagram: https://www.instagram.com/creativetimofficial/ 238 | 239 | 240 | ## Resources 241 | - Demo: https://demos.creative-tim.com/notus-nextjs/?ref=nnjs-readme 242 | - Download Page: https://www.creative-tim.com/product/notus-nextjs 243 | - Documentation: https://www.creative-tim.com/learning-lab/tailwind/nextjs/overview/notus?ref=nnjs-readme 244 | - License Agreement: https://www.creative-tim.com/license?ref=nnjs-readme 245 | - Support: https://www.creative-tim.com/contact-us?ref=nnjs-readme 246 | - Issues: Github Issues Page 247 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | 177 |
178 |
179 |
180 |
181 |
182 |
183 | 184 | ); 185 | } 186 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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-emerald-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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /components/Dropdowns/IndexDropdown.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Link from "next/link"; 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 | 47 | 53 | Dashboard 54 | 55 | 56 | 57 | 63 | Settings 64 | 65 | 66 | 67 | 73 | Tables 74 | 75 | 76 | 77 | 83 | Maps 84 | 85 | 86 |
87 | 92 | Auth Layout 93 | 94 | 95 | 101 | Login 102 | 103 | 104 | 105 | 111 | Register 112 | 113 | 114 |
115 | 120 | No Layout 121 | 122 | 123 | 129 | Landing 130 | 131 | 132 | 133 | 139 | Profile 140 | 141 | 142 |
143 | 144 | ); 145 | }; 146 | 147 | export default IndexDropdown; 148 | -------------------------------------------------------------------------------- /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 | 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 |
38 | e.preventDefault()} 44 | > 45 | Action 46 | 47 | e.preventDefault()} 53 | > 54 | Another action 55 | 56 | e.preventDefault()} 62 | > 63 | Something else here 64 | 65 |
66 | e.preventDefault()} 72 | > 73 | Seprated link 74 | 75 |
76 | 77 | ); 78 | }; 79 | 80 | export default NotificationDropdown; 81 | -------------------------------------------------------------------------------- /components/Dropdowns/PagesDropdown.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Link from "next/link"; 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 | 47 | 53 | Dashboard 54 | 55 | 56 | 57 | 63 | Settings 64 | 65 | 66 | 67 | 73 | Tables 74 | 75 | 76 | 77 | 83 | Maps 84 | 85 | 86 |
87 | 92 | Auth Layout 93 | 94 | 95 | 101 | Login 102 | 103 | 104 | 105 | 111 | Register 112 | 113 | 114 |
115 | 120 | No Layout 121 | 122 | 123 | 129 | Landing 130 | 131 | 132 | 133 | 139 | Profile 140 | 141 | 142 |
143 | 144 | ); 145 | }; 146 | 147 | export default PagesDropdown; 148 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /components/Footers/Footer.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function Footer() { 4 | return ( 5 | <> 6 | 160 | 161 | ); 162 | } 163 | -------------------------------------------------------------------------------- /components/Footers/FooterAdmin.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function FooterAdmin() { 4 | return ( 5 | <> 6 | 60 | 61 | ); 62 | } 63 | -------------------------------------------------------------------------------- /components/Footers/FooterSmall.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function FooterSmall(props) { 4 | return ( 5 | <> 6 | 66 | 67 | ); 68 | } 69 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /components/Maps/MapExample.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function MapExample() { 4 | const mapRef = React.useRef(null); 5 | React.useEffect(() => { 6 | let google = window.google; 7 | let map = mapRef.current; 8 | let lat = "40.748817"; 9 | let lng = "-73.985428"; 10 | const myLatlng = new google.maps.LatLng(lat, lng); 11 | const mapOptions = { 12 | zoom: 12, 13 | center: myLatlng, 14 | scrollwheel: false, 15 | zoomControl: true, 16 | styles: [ 17 | { 18 | featureType: "administrative", 19 | elementType: "labels.text.fill", 20 | stylers: [{ color: "#444444" }], 21 | }, 22 | { 23 | featureType: "landscape", 24 | elementType: "all", 25 | stylers: [{ color: "#f2f2f2" }], 26 | }, 27 | { 28 | featureType: "poi", 29 | elementType: "all", 30 | stylers: [{ visibility: "off" }], 31 | }, 32 | { 33 | featureType: "road", 34 | elementType: "all", 35 | stylers: [{ saturation: -100 }, { lightness: 45 }], 36 | }, 37 | { 38 | featureType: "road.highway", 39 | elementType: "all", 40 | stylers: [{ visibility: "simplified" }], 41 | }, 42 | { 43 | featureType: "road.arterial", 44 | elementType: "labels.icon", 45 | stylers: [{ visibility: "off" }], 46 | }, 47 | { 48 | featureType: "transit", 49 | elementType: "all", 50 | stylers: [{ visibility: "off" }], 51 | }, 52 | { 53 | featureType: "water", 54 | elementType: "all", 55 | stylers: [{ color: "#cbd5e0" }, { visibility: "on" }], 56 | }, 57 | ], 58 | }; 59 | 60 | map = new google.maps.Map(map, mapOptions); 61 | 62 | const marker = new google.maps.Marker({ 63 | position: myLatlng, 64 | map: map, 65 | animation: google.maps.Animation.DROP, 66 | title: "Notus NextJS!", 67 | }); 68 | 69 | const contentString = 70 | '

Notus NextJS

' + 71 | "

A free Admin for Tailwind CSS, React, React Hooks, and NextJS.

"; 72 | 73 | const infowindow = new google.maps.InfoWindow({ 74 | content: contentString, 75 | }); 76 | 77 | google.maps.event.addListener(marker, "click", function () { 78 | infowindow.open(map, marker); 79 | }); 80 | }); 81 | return ( 82 | <> 83 |
84 |
85 |
86 | 87 | ); 88 | } 89 | 90 | export default MapExample; 91 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /components/Navbars/AuthNavbar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Link from "next/link"; 3 | // components 4 | 5 | import PagesDropdown from "components/Dropdowns/PagesDropdown.js"; 6 | 7 | export default function Navbar(props) { 8 | const [navbarOpen, setNavbarOpen] = React.useState(false); 9 | return ( 10 | <> 11 | 97 | 98 | ); 99 | } 100 | -------------------------------------------------------------------------------- /components/Navbars/IndexNavbar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Link from "next/link"; 3 | // components 4 | 5 | import IndexDropdown from "components/Dropdowns/IndexDropdown.js"; 6 | 7 | export default function Navbar(props) { 8 | const [navbarOpen, setNavbarOpen] = React.useState(false); 9 | return ( 10 | <> 11 | 97 | 98 | ); 99 | } 100 | -------------------------------------------------------------------------------- /components/PageChange/PageChange.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // reactstrap components 4 | // import { Spinner } from "reactstrap"; 5 | 6 | // core components 7 | 8 | export default function PageChange(props) { 9 | return ( 10 |
11 |
17 |
18 |
19 |
20 | 21 |
22 |

23 | Loading page contents for: {props.path} 24 |

25 |
26 |
27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /components/Sidebar/Sidebar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Link from "next/link"; 3 | import { useRouter } from "next/router"; 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 | const router = useRouter(); 11 | return ( 12 | <> 13 | 356 | 357 | ); 358 | } 359 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "." 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /layouts/Admin.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // components 4 | 5 | import AdminNavbar from "components/Navbars/AdminNavbar.js"; 6 | import Sidebar from "components/Sidebar/Sidebar.js"; 7 | import HeaderStats from "components/Headers/HeaderStats.js"; 8 | import FooterAdmin from "components/Footers/FooterAdmin.js"; 9 | 10 | export default function Admin({ children }) { 11 | return ( 12 | <> 13 | 14 |
15 | 16 | {/* Header */} 17 | 18 |
19 | {children} 20 | 21 |
22 |
23 | 24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /layouts/Auth.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // components 4 | 5 | import Navbar from "components/Navbars/AuthNavbar.js"; 6 | import FooterSmall from "components/Footers/FooterSmall.js"; 7 | 8 | export default function Auth({ children }) { 9 | return ( 10 | <> 11 | 12 |
13 |
14 |
20 | {children} 21 | 22 |
23 |
24 | 25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creativetimofficial/notus-nextjs/83af9355cf3373c31d5f5f3845e65185d327186d/next.config.js -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "notus-nextjs", 3 | "homepage": "https://demos.creative-tim.com/notus-nextjs", 4 | "version": "1.1.0", 5 | "description": "Notus NextJS - A free Tailwind CSS, NextJS and React UI Kit and Admin by Creative Tim.", 6 | "repository": "https://github.com/creativetimofficial/notus-nextjs", 7 | "license": "MIT", 8 | "dependencies": { 9 | "@fortawesome/fontawesome-free": "6.0.0", 10 | "@popperjs/core": "2.11.7", 11 | "@tailwindcss/forms": "0.5.3", 12 | "chart.js": "4.3.0", 13 | "gulp": "4.0.2", 14 | "gulp-append-prepend": "1.0.9", 15 | "next": "13.4.6", 16 | "react": "18.2.0", 17 | "react-dom": "18.2.0", 18 | "react-scripts": "5.0.1", 19 | "tailwindcss": "3.3.2" 20 | }, 21 | "scripts": { 22 | "start": "next start", 23 | "build": "next build", 24 | "dev": "next dev", 25 | "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm run build:tailwind && npm run dev", 26 | "build:tailwind": "tailwind build styles/index.css -o styles/tailwind.css" 27 | }, 28 | "eslintConfig": { 29 | "extends": "react-app" 30 | }, 31 | "browserslist": { 32 | "production": [ 33 | ">0.2%", 34 | "not dead", 35 | "not op_mini all" 36 | ], 37 | "development": [ 38 | "last 1 chrome version", 39 | "last 1 firefox version", 40 | "last 1 safari version" 41 | ] 42 | }, 43 | "optionalDependencies": { 44 | "typescript": "4.9.5" 45 | }, 46 | "devDependencies": { 47 | "autoprefixer": "10.4.14", 48 | "postcss": "8.4.22" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /pages/404.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Router from "next/router"; 3 | 4 | export default class Error404 extends Component { 5 | componentDidMount = () => { 6 | Router.push("/"); 7 | }; 8 | 9 | render() { 10 | return
; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "next/app"; 4 | import Head from "next/head"; 5 | import Router from "next/router"; 6 | 7 | import PageChange from "components/PageChange/PageChange.js"; 8 | 9 | import "@fortawesome/fontawesome-free/css/all.min.css"; 10 | import "styles/tailwind.css"; 11 | 12 | Router.events.on("routeChangeStart", (url) => { 13 | console.log(`Loading: ${url}`); 14 | document.body.classList.add("body-page-transition"); 15 | ReactDOM.render( 16 | , 17 | document.getElementById("page-transition") 18 | ); 19 | }); 20 | Router.events.on("routeChangeComplete", () => { 21 | ReactDOM.unmountComponentAtNode(document.getElementById("page-transition")); 22 | document.body.classList.remove("body-page-transition"); 23 | }); 24 | Router.events.on("routeChangeError", () => { 25 | ReactDOM.unmountComponentAtNode(document.getElementById("page-transition")); 26 | document.body.classList.remove("body-page-transition"); 27 | }); 28 | 29 | export default class MyApp extends App { 30 | componentDidMount() { 31 | let comment = document.createComment(` 32 | 33 | ========================================================= 34 | * Notus NextJS - v1.1.0 based on Tailwind Starter Kit by Creative Tim 35 | ========================================================= 36 | 37 | * Product Page: https://www.creative-tim.com/product/notus-nextjs 38 | * Copyright 2021 Creative Tim (https://www.creative-tim.com) 39 | * Licensed under MIT (https://github.com/creativetimofficial/notus-nextjs/blob/main/LICENSE.md) 40 | 41 | * Tailwind Starter Kit Page: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation 42 | 43 | * Coded by Creative Tim 44 | 45 | ========================================================= 46 | 47 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 48 | 49 | `); 50 | document.insertBefore(comment, document.documentElement); 51 | } 52 | static async getInitialProps({ Component, router, ctx }) { 53 | let pageProps = {}; 54 | 55 | if (Component.getInitialProps) { 56 | pageProps = await Component.getInitialProps(ctx); 57 | } 58 | 59 | return { pageProps }; 60 | } 61 | render() { 62 | const { Component, pageProps } = this.props; 63 | 64 | const Layout = Component.layout || (({ children }) => <>{children}); 65 | 66 | return ( 67 | 68 | 69 | 73 | Notus NextJS by Creative Tim 74 | 75 | 76 | 77 | 78 | 79 | 80 | ); 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /pages/_document.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Document, { Html, Head, Main, NextScript } from "next/document"; 3 | 4 | class MyDocument extends Document { 5 | render() { 6 | return ( 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 19 |
20 |
21 | 22 | 23 | 24 | ); 25 | } 26 | } 27 | 28 | export default MyDocument; 29 | -------------------------------------------------------------------------------- /pages/_error.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Router from "next/router"; 3 | 4 | export default class _error extends Component { 5 | componentDidMount = () => { 6 | Router.push("/"); 7 | }; 8 | 9 | render() { 10 | return
; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /pages/admin/dashboard.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // components 4 | 5 | import CardLineChart from "components/Cards/CardLineChart.js"; 6 | import CardBarChart from "components/Cards/CardBarChart.js"; 7 | import CardPageVisits from "components/Cards/CardPageVisits.js"; 8 | import CardSocialTraffic from "components/Cards/CardSocialTraffic.js"; 9 | 10 | // layout for page 11 | 12 | import Admin from "layouts/Admin.js"; 13 | 14 | export default function Dashboard() { 15 | return ( 16 | <> 17 |
18 |
19 | 20 |
21 |
22 | 23 |
24 |
25 |
26 |
27 | 28 |
29 |
30 | 31 |
32 |
33 | 34 | ); 35 | } 36 | 37 | Dashboard.layout = Admin; 38 | -------------------------------------------------------------------------------- /pages/admin/maps.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // components 4 | 5 | import MapExample from "components/Maps/MapExample.js"; 6 | 7 | // layout for page 8 | 9 | import Admin from "layouts/Admin.js"; 10 | 11 | export default function Maps() { 12 | return ( 13 | <> 14 |
15 |
16 |
17 | 18 |
19 |
20 |
21 | 22 | ); 23 | } 24 | 25 | Maps.layout = Admin; 26 | -------------------------------------------------------------------------------- /pages/admin/settings.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // components 4 | 5 | import CardSettings from "components/Cards/CardSettings.js"; 6 | import CardProfile from "components/Cards/CardProfile.js"; 7 | 8 | // layout for page 9 | 10 | import Admin from "layouts/Admin.js"; 11 | 12 | export default function Settings() { 13 | return ( 14 | <> 15 |
16 |
17 | 18 |
19 |
20 | 21 |
22 |
23 | 24 | ); 25 | } 26 | 27 | Settings.layout = Admin; 28 | -------------------------------------------------------------------------------- /pages/admin/tables.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // components 4 | 5 | import CardTable from "components/Cards/CardTable.js"; 6 | 7 | // layout for page 8 | 9 | import Admin from "layouts/Admin.js"; 10 | 11 | export default function Tables() { 12 | return ( 13 | <> 14 |
15 |
16 | 17 |
18 |
19 | 20 |
21 |
22 | 23 | ); 24 | } 25 | 26 | Tables.layout = Admin; 27 | -------------------------------------------------------------------------------- /pages/auth/login.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Link from "next/link"; 3 | 4 | // layout for page 5 | 6 | import Auth from "layouts/Auth.js"; 7 | 8 | export default function Login() { 9 | return ( 10 | <> 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | Sign in with 19 |
20 |
21 |
22 | 29 | 36 |
37 |
38 |
39 |
40 |
41 | Or sign in with credentials 42 |
43 |
44 |
45 | 51 | 56 |
57 | 58 |
59 | 65 | 70 |
71 |
72 | 82 |
83 | 84 |
85 | 91 |
92 |
93 |
94 |
95 | 113 |
114 |
115 |
116 | 117 | ); 118 | } 119 | 120 | Login.layout = Auth; 121 | -------------------------------------------------------------------------------- /pages/auth/register.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // layout for page 4 | 5 | import Auth from "layouts/Auth.js"; 6 | 7 | export default function Register() { 8 | return ( 9 | <> 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | Sign up with 18 |
19 |
20 |
21 | 28 | 35 |
36 |
37 |
38 |
39 |
40 | Or sign up with credentials 41 |
42 |
43 |
44 | 50 | 55 |
56 | 57 |
58 | 64 | 69 |
70 | 71 |
72 | 78 | 83 |
84 | 85 |
86 | 103 |
104 | 105 |
106 | 112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 | 120 | ); 121 | } 122 | 123 | Register.layout = Auth; 124 | -------------------------------------------------------------------------------- /pages/landing.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Link from "next/link"; 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 NextJS. It features multiple CSS components 37 | based 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 | 134 | Check Notus NextJS! 135 | 136 | 137 |
138 | 139 |
140 |
141 | ... 146 |
147 | 153 | 157 | 158 |

159 | Top Notch Services 160 |

161 |

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

166 |
167 |
168 |
169 |
170 |
171 |
172 | 173 |
174 |
178 | 187 | 191 | 192 |
193 | 194 |
195 |
196 |
197 | ... 202 |
203 |
204 |
205 |
206 | 207 |
208 |

A growing company

209 |

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

214 |
    215 |
  • 216 |
    217 |
    218 | 219 | 220 | 221 |
    222 |
    223 |

    224 | Carefully crafted components 225 |

    226 |
    227 |
    228 |
    • 229 |
  • 230 |
    231 |
    232 | 233 | 234 | 235 |
    236 |
    237 |

    238 | Amazing page examples 239 |

    240 |
    241 |
    242 |
    • 243 |
  • 244 |
    245 |
    246 | 247 | 248 | 249 |
    250 |
    251 |

    252 | Dynamic components 253 |

    254 |
    255 |
    256 |
    • 257 |
258 |
259 |
260 |
261 |
262 |
263 | 264 |
265 |
266 |
267 |
268 |

Here are our heroes

269 |

270 | According to the National Oceanic and Atmospheric 271 | Administration, Ted, Scambos, NSIDClead scentist, puts the 272 | potentially record maximum. 273 |

274 |
275 |
276 |
277 |
278 |
279 | ... 284 |
285 |
Ryan Tompson
286 |

287 | Web Developer 288 |

289 |
290 | 296 | 302 | 308 |
309 |
310 |
311 |
312 |
313 |
314 | ... 319 |
320 |
Romina Hadid
321 |

322 | Marketing Specialist 323 |

324 |
325 | 331 | 337 |
338 |
339 |
340 |
341 |
342 |
343 | ... 348 |
349 |
Alexa Smith
350 |

351 | UI/UX Designer 352 |

353 |
354 | 360 | 366 | 372 |
373 |
374 |
375 |
376 |
377 |
378 | ... 383 |
384 |
Jenna Kardi
385 |

386 | Founder and CEO 387 |

388 |
389 | 395 | 401 | 407 | 413 |
414 |
415 |
416 |
417 |
418 |
419 |
420 | 421 |
422 |
426 | 435 | 439 | 440 |
441 | 442 |
443 |
444 |
445 |

446 | Build something 447 |

448 |

449 | Put the potentially record low maximum sea ice extent tihs 450 | year down to low ice. According to the National Oceanic and 451 | Atmospheric Administration, Ted, Scambos. 452 |

453 |
454 |
455 |
456 |
457 |
458 | 459 |
460 |
461 | Excelent Services 462 |
463 |

464 | Some quick example text to build on the card title and make up 465 | the bulk of the card's content. 466 |

467 |
468 |
469 |
470 | 471 |
472 |
473 | Grow your market 474 |
475 |

476 | Some quick example text to build on the card title and make up 477 | the bulk of the card's content. 478 |

479 |
480 |
481 |
482 | 483 |
484 |
485 | Launch time 486 |
487 |

488 | Some quick example text to build on the card title and make up 489 | the bulk of the card's content. 490 |

491 |
492 |
493 |
494 |
495 |
496 |
497 |
498 |
499 |
500 |
501 |

502 | Want to work with us? 503 |

504 |

505 | Complete this form and we will get back to you in 24 506 | hours. 507 |

508 |
509 | 515 | 520 |
521 | 522 |
523 | 529 | 534 |
535 | 536 |
537 | 543 |