introduction

Saasto is a versatile Nextjs template that caters to a wide range of businesses, including web design, software development, and industrial services. The design is modern and visually appealing, built on award-winning design concepts that incorporate captivating animations and smooth transitions. The template is highly customizable, allowing users to modify every aspect, from the animation and cursor to the layout and more. Saasto is designed to look beautiful on all devices, including laptops, iPads, iPhones, Android mobiles, and tablets.

Its responsive design ensures that your website will look great on any screen size, providing a seamless user experience. Whether you're looking to start a new business or refresh your existing website, Saasto is an excellent choice that will help you stand out in the competitive online landscape.

This documentaion is to guide you regarding all the step for building and deploying along with how to customize

In order to customize this template React js and Next js Knowledge is Required

  • Template Name : SaaSto Next
  • Template Version : V 1.0.0
  • Author : WpRealizer

Folder Structure

A guide to understanding how the theme is structured. when you open the zip file you will see 2 folders

📁 public
📁 src
📁 src is the folder what contain the theme
  • 📁
    components
    is the folder where you can find all the components
  • 📁
    constant
    is the folder what contain some constant variable from where you can change header and footer information
  • 📁
    utilities
    is the folder where all the animations code and utilities is located
  • 📁
    pages
    is the folder where all the page is located
  • 📁
    public
    is the folder where all the images and fonts is located
  • 📁
    styles
    is the folder where all the css files is located

Dependencies

This is all the dependencies used for this theme

Bootstrap-5

bootstrap is used for designing responsive layouts.

Learn more ...

WOW.js

For implementing animations

Learn more ...

React-Icons

Used to display stunning icons in the site.

Learn more ...

react-slick & slick-carousel

Used for Hero and testimonial sliders.

Learn more ...

swiper

Used for sliders.

Learn more ...

SASS

To manage css easily & less css code.

Learn more ...

customizer

In order to customize first open the 📁 SaaSto next folder via any code editor. and set up development envirement. i am using ( VS code )

npm install && npm run dev

Now you can view the template in http://locahost:3000

To Edit Navbar 📁 src/components/home/Header.js
To Edit Footer Info 📁 src/components/home1 or any folder/Footer.js

build

npm run build && npm start

Now you can view the build template in http://locahost:3000

deploy

Now this theme is ready to deploy. here we are going to deploy this Theme to Vercel from github.

git init
git add .
git commit -m "init app"
git remote add origin ( your github repo url )
git push
Visit Vercel and Continue with github
Click on new project
Search Your Project and Click on import
Now click on deploy and it will be deployed

Thank you

Thank you for buying our template . if you liked our template don't forget to rate us