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.
- Next js - App Directory with TypeScript
- Built with latest Bootstrap
- SASS
- SMTP integration
- 2 Email template
- CSS3 Animation
- W3C validated HTML5 & CSS3 coding
- 10 color skins options for Header, Sidebar & Player
- Light and Dark version
- 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, Next.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 18 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 3000 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.
The template is built using the latest Next.js framework and includes default App directory features. For further information, please refer to the official website.
The template includes a fully functional send mail API using the Nodemailer package. Additionally, dummy APIs for login and register functionalities are available. You can access them here.
You can find all the page components, email templates, and layouts here.
You can access all the helper files, including constant variables, mock JSON data, components, utilities, and more, in this folder link.
All the API constant URL variables are visible in constants/api-urls.ts along with their corresponding functions in utils/api-call.ts and utils/helper.ts
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.
To modify your Site title and Metadata, open the template in your editor and navigate to the indicated location shown in the provided screenshot.
To modify Menu/Navigation, open the template in your editor and navigate to the indicated location shown in the provided screenshot.
For any href modification in the file, ensure that a file with the same name exists within the /app directory. For further information, please refer to the official Next.js website.
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 incorporates @react-email components and Nodemailer for sending emails via SMTP. Edit the template details to activate this feature.
Access the .env file to modify the SMTP details as indicated in the location displayed in the provided screenshot.
Several email templates created with @react-email/components are included in the template depicted in the screenshot below.
Made an email helper function using Nodemailer location displayed in the provided screenshot..
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.
Here we are mention project change and new release of the version.
1.1.0- Resolved the player position problem on main pages when using RTL direction.
- Corrected the color of the app buttons in the footer.
Initial Release
- Amplitude js
- Bootstrap
- Chart js
- Moment
- Nodemailer
- Notistack
- React Dropzone
- React Email
- Remix icon
- Swiper js
- Usehooks ts
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!