SkillHub - Education LMS & Online Courses NextJS Template

Introduction

Thank you for purchasing SkillHub - Education LMS & Online Courses NextJS 14+ Template If you have any questions that are beyond the scope of this help file, please feel free to email, or put a ticket at Support Center.Thank you so much!

Please feel free to get back to me in case if you are having any question or feedback.

Setup Next

Introduction

We are using npm which allows having complete automation for build flow. Please follow below steps to install and setup all prerequisites:

Prerequisites

Please follow below steps to install and setup all prerequisites:

  • Nodejs

    Make sure to have the Node.js installed & running in your computer. If you already have installed Node on your computer, you can skip this step if your existing node version is greater than 18.

  • Git

    Make sure to have the Git installed globally & running on your computer. If you already have installed git on your computer, you can skip this step.

Installation

To setup the admin theme, follow below-mentioned steps:

  • Install Prerequisites

    Make sure to have all above prerequisites installed & running on your computer

After you finished with the above steps, you can run the following commands into the terminal / command prompt from the root directory of the project to run the project locally or build for production use:

Command Description
npm install This would install all the required dependencies in the node_modules folder.
npm run dev Runs the project locally, starts the development server and watches for any changes in your code. The development server is accessible at http://localhost:3000.
npm run build Generates a .next directory with all the production files.

Folder & File Structure

skillhub_next_v1.0.0
│
├──  Documentation   
├──  skillhub_next  
│
├── public/assets
|     └──  imgs
|     └──  js
|     └──  media
|     └──  scss
├── src
    └──  app
    │   └──  (blogs)
    │	  └──  (courses)
    │	  └──  (pages)
    │	  └──  children-education
    │	  └──  health-coach
    │	  └──  fonts
    │	  └──  layout.js 
    │   └──  components
    │       └──  About 
    │       └──  Blog 
    │       └──  Blog Content 
    │       └──  Blog Detail 
    │       └──  Blog Sidebar 
    │       └──  Breadcrumb 
    │       └──  Card 
    │       └──  Category 
    │       └──  Client 
    │       └──  Counter 
    │       └──  Course 
    │       └──  Course Detail
    │       └──  Course Filter
    │       └──  CTA 
    │       └──  Faq 
    │       └──  Feature 
    │       └──  Footer 
    │       └──  Form 
    │       └──  Header 
    │       └──  Hero 
    │       └──  Instructor
    │       └──  Layout 
    │       └──  Menu 
    │       └──  Partner 
    │       └──  Services 
    │       └──  Testimonial 
    │       └──  Video 
	└──  context
	└──  data
	│   └──  about.js
	│   └──  blog.js
	│   └──  category.js
	│   └──  contact.js 
	│   └──  counter.js 
	│   └──  course.js 
	│   └──  cta.js 
	│   └──  faq.js 
	│   └──  feature.js 
	│   └──  footer.js 
	│   └──  header.js  
	│   └──  hero.js  
	│   └──  instructor.js  
	│   └──  menu.js  
	│   └──  partner.js  
	│   └──  service.js  
	│   └──  social.js  
	│   └──  testimonial.js  
└──  jsconfig.json
└──  next.config.js
└──  package.json

How to change the fonts family in SkillHub?

Please follow the step by step process

Step 1

Open the layout.js (path: skillhub_next/src/app/layout.js) file and please import the font on top of the page import { DM_Serif_Display } from 'next/font/google'

Step 2

Import your font family in layout.js (path: skillhub_next/src/app/layout.js) file, or replace your font name in layout.js (path: skillhub_next/src/app/layout.js) file.

import {DM_Serif_Display } from 'next/font/google' - Themes primary font family is DM_Serif_Display
Step 3

Pass your font family in layout.js (path: skillhub_next/src/app/layout.js) file, or replace your font name in layout.js (path: skillhub_next/src/app/layout.js) file.

const phosporFont = localFont({ src: [ { path: "./fonts/phosphor/Phosphor.woff2", weight: "700", style: "normal", display: "swap", adjustFontFallback: false, }, { path: "./fonts/phosphor/Phosphor.woff", weight: "700", style: "normal", display: "swap", adjustFontFallback: false, }, { path: "./fonts/phosphor/Phosphor.ttf", weight: "400", style: "normal", display: "swap", adjustFontFallback: false, }, ], variable: "--font-phosphor", });
const bluuFont = localFont({ src: [ { path: "./fonts/BluuNext-Bold.otf", weight: "700", style: "normal", display: "swap", adjustFontFallback: false, }, ], variable: "--font-bluu-next", });



- Themes secondary font family is DM_Serif_Display
- Themes primary font family is Urbanist
Step 4

change your font family in _variables.scss(path: skillhub_next/src/app/assets/scss/_variables.scss) file

--font-primary:     var(--font-primary);
--font-secondary:     var(--font-primary);

How to change the Theme primary color in SkillHub?

If you change the theme or template color please follow the below step, Please first of all open the _variables.css (path: public/assets/scss/_variables.scss) find the --font-primary and replace or changes with color code

like:
--font-primary:     #ff6b2c; replace only #e82b4b to your color (#ff6b2c)

Template Customization

Here is the example of a components customization. In src directory you will find a data folder. From this folder you can change/update template content like img/heading/title etc.

Dependency

Here is the list of plugin which used in SkillHub NextJs:

Plugin Version
next 14.2.3
react 18
react-dom 18
bootstrap 5.3.3
gsap 3.12.5
@gsap/react 2.1.1
SASS 1.76.1
swiper 11.1.1
isotope-layout 3.0.6
imagesloaded 5.0.0
@phosphor-icons/react 2.1.5
react-countup 6.5.3
react-visibility-sensor" 5.1.1
sharp 0.33.3

Supports

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have any queries, please feel free to contact us at Support Center. [email protected]

If you have any questions that are beyond the scope of this documentation, please feel free to email or contact us via my page.

Email Us at : [email protected]

- Academine

Changelog

Version v1.0 - 16 May 2024

  • Initial Released