First and foremost, I want to express my gratitude for choosing to purchase this template and for your continued loyalty as my customer. You're truly appreciated!
You are entitled to receive complimentary lifetime updates for this product, along with exceptional support directly from the author.
Basic tips and quick guide that will help you to edit this template.
To effectively use this template, a basic understanding of HTML, CSS and Javascript is necessary. Please conduct a quick Google search or visit W3Schools for any related queries, as addressing topic-specific issues is given top priority.
- React, Vite.js with TypeScript
- Built with latest Bootstrap
- SASS
- CSS3 Animation
- W3C validated HTML5 & CSS3 coding
- 10 color skins options for Header, Sidebar & Player
- Light and Dark version
- i18n support
- RTL support
- Analytical dashboard
- Working audio player
- Browser media API support
- Fully responsive
- Modern design
- Clean coded
- Google fonts
- Working contact form
- Form validation
- Cross-browser compatible
- SEO optimized
- Mobile first CSS
- Easy to customize
- And more...
The data displayed in the template preview is sourced from Mock JSON files. Therefore, the template is not connected to any backend technology.
To customize this template, you will require the following software:
- You will need code editing software such as VS Code, Sublime Text, or Notepad.
- You will also need a web browser for testing purposes, such as Google Chrome or Mozilla Firefox.
- You will also need an FTP tool to upload files to the server, such as FileZilla.
Upon purchasing this template, you can access and download it through your account.
Step 1: Simply log in and click on the Download link to obtain the template.
Step 2: Upon reaching the download page, you will find a list of the items you have purchased.
Click on Download button > Click on All files & documentation
Once you download the template, you will receive All files and documentation in a ZIP file. In the root folder of the ZIP file, you can view the contents to see what you will receive.
The template is built using advanced development tools including React, Vite.js, Bootstrap, and SCSS. To utilize this template, you need to follow some basic steps outlined below:
Ensure that Node.js is installed on your system. You can download and install it from the official Node.js website.
Recommend Node 20 latest version.
Open your command line interface (CLI) or terminal, navigate to the root directory of the extracted template files.
Run the command npm install to install all the necessary dependencies specified in the package.json file.
npm installAfter installing dependencies, start the development server by running npm run dev command. This will launch the application locally, typically on port 5173 by default.
npm run devOnce the development server is running, you can start customizing the template according to your needs. Modify React components, stylesheets (using SCSS), and integrate any additional functionality as required.
Exercise caution when modifying the template. Incorrect editing could result in a complete breakdown of the design layout. Please note that no assistance will be available for flawed customizations.
Please review the common structure of this template.
This template utilizes the latest features of React Router. For more details, please refer to the official website. All route components can be found inside the view/pages directory, as shown in the screenshot below.
You can find all the page components, form components, and layouts in this directory.
You can access all the helper files, including custom hooks, constant variables, data conversion functions, components, utilities, and more, in the folder linked here.
All the reusable components are located in this folder.
If you possess a fundamental understanding of HTML, CSS and Javascript, you can effortlessly modify this template using editors like VS Code.
The template includes built-in internationalization (i18n) support for easy adaptation to various languages. Language files are organized within the locale directory under their respective names. To modify languages, open the template in your editor and follow the instructions in the provided screenshot.
To change the default language, refer to the provided screenshot for guidance.
To add new languages, create a new JSON file named after the desired language and update its values accordingly. For more details, check here.
To modify Menu/Navigation, open the template in your editor and navigate to the indicated location shown in the provided screenshot.
The template is constructed using the SCSS compiler, allowing for easy modification within your editor. The files are located as indicated in the provided screenshot.
Bootstrap variables can be overridden in the _variables.scss file, enabling you to add or remove variables as needed.
The template offers you the ability to modify both the template skins and text direction through the settings component location displayed in the provided screenshot.
If you choose not to use this feature, you can simply remove the component from the UI by disabling a flag in the constant file.
By modifying just one line of code, the entire template can switch to Dark mode, or it can also adapt based on the system settings, as demonstrated in the screenshot actions.
In just one simple change, you can switch the text direction from LTR to RTL as demonstrated in the screenshot actions.
The template features various skins for the Header, Sidebar, and Player, all of which are customizable, as demonstrated in the screenshot actions.
To deploy a template on Vercel, you need to have a Git repository and be logged in to Vercel with the account that has access to the repository. Follow the steps below:
1: Create a Vercel Account
2: Add new Project
3: Import project from your Git Account
4: Deployment
You'll need to wait until the deployment process is complete. If you're unsure about the steps mentioned above, you can refer to the video below for further clarification.
Fixed volume change issue
1.0.0Initial Release
To request a refund, kindly review the article provided.
The article outlines cases in which refund requests will not be accepted.
Don't forget to rate!