Samar

Samar - Next js Creative Agency Bootstrap Template

This documentation is last updated on 24 Septmber 2024

Thank you for purchasing this Nextjs template.

If you like this template, Please support us by rating this template with 5 stars

Package Installation

1.- Install npm

It will create 'node_module' folder in this all dependency files will be install with this command

npm install

2.- Run Project

With is command file will be compiled and it will be loaded on local server `http://localhost:3000/

npm run dev

3.- Deploying your site

For More details Click

Sass Compile -

1.- Install Sass

Sass is an NPM package that compiles Sass to CSS (which it does very quickly too). To install sass run the following command in your terminal: npm add -D sass

npm add -D sass

2.- Write sass Command

Everything is ready to write a small script in order to compile Sass. Open the package.json file in a code editor. You will see something like this: In the scripts section add an scss command

"scripts": {
 "sass": "sass --watch src/assets/scss/main.scss src/assets/css/style.css",
},

3.- Run the Script

To execute our one-line script, we need to run the following command in the terminal: npm run sass

npm run sass

Folder Directories -

package.json

All dependencies
app

This folder has all pages components for various template features.
components

This folder component files for various template features.
assets/images

This folder contains all the images of Samar template.
assets/fonts

This folder font files for various template features.
assets/css

This folder contains all the CSS files of Samar template.
assets/scss

This folder has all scss File form used in the template.

Files -

package
- assets
  - css
  - icons
  - images
  - scss
- app
  - page.jsx
  - layout.jsx
  - (page-group)
    - page-name
      - page.jsx
- components
  - component-group
    - component.jsx
- next.config.mjs
- package-lock.json
- package.json

Theme Features -

Color Theme

Choosing a color theme for a website is an important part of creating a visually appealing and effective design. Here are so many color option available, you can choose a color theme for your website.

import '@/assets/css/skin/skin-1.css'

skin-1.css
skin-2.css
skin-3.css
skin-4.css
skin-5.css

Credits -

Node

Node - v20.10.0
npm

npm.js -v 10.2.3
Nextjs

Next.js 14.1.0
React

ReactJS v18
bootstrap

https://getbootstrap.com/
lightgallery

https://www.lightgalleryjs.com/docs/react-image-video-gallery/
counter

https://www.npmjs.com/package/react-countup
Swiper js

https://www.npmjs.com/package/swiper

Main Page -

app/layout.jsx

import "../public/main.css";

export default function RootLayout({ children }) {
 return (	
  <body>
    <main>    
  	 {children}
    </main>
  </body>
 ); 
}

Demo Page -

app/(page-group)/page-name/page.jsx

const Blankpage = () => {
 return (	
  <div>
    <h5>    
  	 This is empty page 
    </h5>
  </div>
 ); 
}

Our Products -

Do You Need Help To Customization

After Purchase A Template...

You Will Start Customizing According Your Requirement
BUT What If You Don't Know

SOLUTION IS HIRE DexignZone

Hire Same Team For Quality Customization

In Order To Ensure Your Website Is Live, We Will Customize
The Template According To Your Requirements And Upload It to the Server.

rahulxarma dexignzones@gmail.com

Version History - #back to top

v2.0 - 24 September 2024

Update Nextjs 14
Compatible with React 18+ & Node 20+
Update Dependency Plugins
Added: Home Page 4
Added: Home Page 5
Added: Cursor Pointer Effect
Update: SCSS Functionality
Update: Documentation
Improvement: Improve Design
Updates: Bootstrap v5
Update : All Pages Design

v1.1 - 27 March 2023

Update package

v1.0 - 12 July 2021

New - Created & Upload Samar

Documentation