Documentation

Construz - Construction React Next Js Template

Thank you so much for purchasing our item from themeforest

  • Created: 5 September 2024

Installation

Hello! Welcome to Construz official documentation. Simple, flexible, and ready to use, this Next.js template will bring you much closer to achieving your end goals. Let’s dive in.

Prerequisites

Next.js is built on top of Node.js. To start working with Next.js, you'll need to have an up-to-date version of Node.js. and npm installed on your machine. For managing routing within your Next.js application, routing is handled automatically, but you can customize it using the built-in file-based routing system provided by Next.js.

Installing Development Environment

We require many packages (dependencies) to run our site. Move into /translo-next (project root) directory and run command below. 

npm install

After the installation, you should have a folder named /node_modules in the project root directory..

How To Run Development Server

To start our development server run command below:

npm run dev

Open your browser and visit http://localhost:3000!. You should see a page like below.

Voila! You are a genious. Now open the code editor and start hacking!

CLI Commands

Some useful commands to work with the project.

1. npm run dev to Start development server at http://localhost:3000

2. npm run build for Generating production build

3. npm serve To serve build files at http://localhost:9000

File Structure

  1. Below is the folder structure and needs to be uploaded to your website or localhost root directory:
    • Contruz-main/public/landing-assets - Demo Page Assets (Eg:css,fonts,image)
    • Contruz-main/public/main-assets - Main Page Assets (Eg:css,fonts,image)
    • Contruz-main/src/app - All pages

Logo Settings



1. Call this Brandlogo to use logo:

You have the option to modify default logo. All you have to do is substitute the custom name at this location.



2. Pass the image for logo as props:

You have the option to pass the custom logo image in any component.


Layout

Documentation and examples for header, footer, grid

Header 1

Main header of the website. It contains the logo, menu and contact information.

Header 2

Second header of the website. It contains the logo, menu and the contact information.

Header 3

Third header of the website. It contains the logo, menu and the contact information.

Header 4

Fourth (default) header of the website. It contains the logo, menu and the contact information.

FAQ

A FAQ is a list of frequently asked questions (FAQs) and answers on a particular topic.

Yes. You can customize our items to fit the needs of your end product
Royalty free means you just need to pay for rights to use the item once per end product. You don't need to pay additional or ongoing fees for each person who sees or uses it.

Please note that there may be some limits placed on uses under the different license types available on the marketplaces.
The item is what you purchase from Envato Market. The end product is what you build with that item.
- You can buy a web template, add your text and images, and use it as your website.
- You can buy an HTML site template, convert it to WordPress, and use it as your website (but not as a stock template for sale).
Contact through themeforest support
.

Source & Credits

Images:

  • Freepik
  • Unsplash
  • Pexels

Fonts:

  • Google font

Packages:

  • next
  • react
  • react-dom
  • bootstrap
  • rc-slider
  • react-slick
  • react-countup
  • isotope-layout
  • react-bootstrap
  • react-nice-select
  • react-scroll-to-top
  • react-responsive-modal
  • react-intersection-observer

Changelog

See what's new added, changed, fixed, improved or updated in the latest versions.

Version 1.0

Initial Release