AIwave Documentation

Welcome to AIwave ! Get familiar with the Stripe products and explore their features:

Working with Doc

You can any work by following our docs

Formatting Content

Our content is more formating for your website

Perfect Responsive

Our Template is full Perfect for all device. You can visit our template all device easily.

Sass Available

The tamplate has Sass available for css. You can Change css by sass

Fast Loading Speed

AIwave is faster loading speed. AIwave create your template so much faster

24 Support System

We are provide 24 hours support for all clients.You can purchase without hesitation.

Getting Started

Welcome to AIwave ! Get familiar with the Stripe products and explore their features:

Unlock the potential of AIwave, your go-to Modern Nextjs Template for cutting-edge AI Conversations. Built on NEXTJS14 and Bootstrap5, this template boasts a component-based structure, ensuring a developer-friendly and streamlined experience. With a contemporary design and swift loading capabilities, it transforms the landscape of AI-driven interactions. Explore a diverse range of pages, including Home Default, Dashboard and various other essential inner or details pages. Elevate your web presence with AIwave—where innovation meets seamless user experience.

AIwave Core Features

What's Included

After purchasing AIwave template on templateforest.net with your Envato account, go to your Download page. You can choose to download AIwave template only or the entire AIwave template package which contains the following files:

AIwave template: A .zip file with all .html files with all necessary assets.
Documentation: An HTML format documentation.
Licensing.

How to Install AIwave Website Templates

Installing a nuron template is not like WordPress or CMS theme installation, actually, installation keyword does not go with nuron template. Why? because you don’t install anything, yes nuron or HTML templates are automatically rendered by the browser.

Requirements

To install and set up the AIwave nextjs template and its components correctly, your computer must have Node.js 18.17 or newer. This is a necessary requirement for the installation process

Recommended NODE

node install

Installation

To add the necessary tools and features to your project, just go to the main folder of your project and type npm install. This will automatically download and set up all the required components.

Recommended NODE

npm install

If you're having trouble using 'npm install', there's an easy fix. This can happen due to different versions of Node and NPM. In that case, just use npm install --force instead. This command often solves the issue and gets your installation back on track.

npm install --force

Run the Development Server

To start a development server, type npm run dev. Now, open your web browser and go to http://localhost:3000/. The app will refresh on its own whenever you make changes to the source files.

npm run dev

Deploying to Vercel

Template Structures

Articles

CSS Files and Structure

We are using one customed CSS files (style.css) and several vendor css files. CSS file structure is as follows:

/**************************************
Template Name: AIwave Modern NEXTJS14 Template for AI Conversations
Description: A perfect Template For AI Conversations. It comes with nice and clean design.
Note: This is style css.
****************************

/--- Default Styles -----/

Variables
Mixins
Reset
Typography
Extend
Animations
Shortcode
Spacing
Common
Forms
Sal
Text Animation
Themebg

/--- Header Styles -----/

Headerdefault
Nav
Header Top
HeaderTopBar
Mobilemenu

/--- Elements -----/

Breadcrumb
Sectiontitle
Button
Service
Card
Counter
Progressbar
styleguide
Social Share
Team
Portfolio
Testimonial
Slickslide
Timeline
Call to Action
Tab
Pricing
Split
Vedio
Gallery
Contact
Brand
404
Advance Tab
Advancepricing
Contact Form
Swicher
Backto Top
About
Newsletter

/--- Blog -----/
Blog
Sidebar
Blog Details

/--- Footer -----/
Footer
Copyright

/--- Template -----/
Banner
Portfoliodetails
Splash
Lightmode

***************************************/
  |___ END STYLESHEET INDEXING
***************************************************************/HTML

Change Contents

Changing Images

To change any images of the website

Carefully collect the source name of the image (i.e. banner-img.jpg)
Open the file called public > images.
Find the particular image file.
Replace the file with your image.
Make sure that the file name does not change.The file name should be the same.

Example: Suppose you want to change the following image file:

<div className="logo">
    <Link href="/">
        <Image className="logo-light" src={logo} width={135} height={35} alt="ChatBot Logo"/>
    </Link>
</div>HTML

You have to do the following to change this image with your own image:

Open the file called images.
Find the particular image file called banner-img.jpg
Replace the file with your image
Make sure that the file name does not change.

Note

Images seen in the live preview are only set for preview purposes. They are not included in the download files.

Changing Brand Logo

To change any images of the website

Carefully collect the source name of the image (i.e. banner-img.jpg)
Open the file called images.
Find the particular image file.
Replace the file with your image.
Make sure that the file name does not change.The file name should be the same.

Example: Suppose you want to change the following image file for change your logo:

<div className="logo">
    <Link href="/">
        <Image className="logo-light" src={logo} width={135} height={35} alt="ChatBot Logo"/>
    </Link>
</div>HTML

Changing Colors

We have used scss for this project to write css. If you are familiar with scss you should customize only the .scss files. Please make sure you compile the style.scss file after you have made changes in any of the .scss files.

Changing default template colors

Open the variable.scss file from public > scss > defaults folder with a text-editor.
Change the right-side values of the variables to change any default colors of your site.
Save your file.

Have a look at the following image for a visual description:

Header Types

Welcome to AIwave Header Elements! You can choose 12 Types of header package for createing you website.

01. Header Default

To change any images of the website

<!-- Start Header Area -->
<header className="rainbow-header header-default header-not-transparent header-sticky">
    <div className="container position-relative">
        <div className="row align-items-center row--0">
            <div className="col-lg-3 col-md-6 col-6">
                <div className="logo">
                    <!-- Logo Here -->
                </div>
            </div>
            <div className="col-lg-9 col-md-6 col-6 position-static">
                <div className="header-right">

                    <nav className="mainmenu-nav d-none d-lg-block">
                        ..
                    </nav>

                    <!-- Start Header Btn  -->
                    <div className="header-btn">
                        ..
                    </div>
                    <!-- End Header Btn  -->

                    <div className="mainmenu-nav d-none d-lg-block one-menu">
                        ..
                    </div>

                    <!-- Start Mobile-Menu-Bar -->
                    <div className="mobile-menu-bar ml--5 d-block d-lg-none">
                        ..
                    </div>
                    <!-- Start Mobile-Menu-Bar -->
                </div>
            </div>
        </div>
    </div>
</header>
<!-- End Header Area -->HTML

02. Header With Topbar

Header with topbar and navigation menu to change your header area.

<!-- Start Header Top Area  -->
<div className="header-top-news bg-image1">
    <div className="wrapper">
        <div className="container">
            <div className="row">
                <div className="col-lg-12">
                    <div className="inner">
                        <div className="content">
                            ..
                        </div>
                        <div className="right-button">
                            ..
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div className="icon-close">
        <button className="close-button bgsection-activation">
            ..
        </button>
    </div>
</div>
<!-- End Header Top Area  -->
<!-- Start Header Area -->
<header className="rainbow-header header-default header-not-transparent header-sticky">
    <div className="container position-relative">
        ..
    </div>
</header>
<!-- End Header Area -->HTML

03. Dashboard Header

Header with ceneter navigation menu to change your header area.

<header className="rbt-dashboard-header rainbow-header header-default header-left-align rbt-fluid-header">
    <div className="container-fluid position-relative">
        <div className="row align-items-center">
            <div className="col-lg-2 col-md-6 col-7">
                <div className="header-left d-flex">
                    <div className="expand-btn-grp">
                        <button className="bg-solid-primary popup-dashboardleft-btn"><i className="feather-menu"></i></button>
                    </div>
                    <div className="logo">
                        ..
                    </div>
                </div>
            </div>
            <div className="col-lg-10 col-md-6 col-5">
                <div className="header-right">
                    <nav className="mainmenu-nav d-none d-lg-block text-center">
                        ..
                    </nav>

                    <div className="header-btn d-none d-md-block">
                        ..
                    </div>

                    <!-- Start Mobile-Menu-Bar -->
                    <div className="mobile-menu-bar ml--10 d-block d-lg-none">
                        ..
                    </div>
                    <!-- Start Mobile-Menu-Bar -->

                    <!-- Start admin Area  -->
                    <div className="account-access rbt-user-wrapper right-align-dropdown">
                        ..
                    </div>
                    <!-- Start admin Area  -->

                    <div className={`expand-btn-grp ${display}`}>
                        <button className="bg-solid-primary popup-dashboardright-btn"><i className="fa-sharp fa-regular fa-sidebar-flip"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>HTML

All Elemnts and Shortcode Types

Welcome to AIwave Elements and Shortcode! You can select any elements & shortcode and customize easily and build your website.

Buttons

This the button classes on an <a> and <button> element and create various button.

<!-- Start Buttons  -->
<a className="btn-default btn-small" href="#">Button Solid
    <i className="feather-arrow-right"></i>
</a>
<a className="btn-default btn-medium" href="#">Button Solid
    <i className="feather-arrow-right"></i>
</a>
<a className="btn-default btn-large" href="#">Button Solid
    <i className="feather-arrow-right"></i>
</a>
<a className="btn-default btn-extra-large" href="#">Button Solid
    <i className="feather-arrow-right"></i>
</a>
<!-- End Buttons  -->HTML

<!-- Start Buttons  -->
<a className="btn-default btn-border btn-small" href="#">Button Solid
    <i className="feather-arrow-right"></i>
</a>
<a className="btn-default btn-border btn-medium" href="#">Button Solid
    <i className="feather-arrow-right"></i>
</a>
<a className="btn-default btn-border btn-large" href="#">Button Solid
    <i className="feather-arrow-right"></i>
</a>
<a className="btn-default btn-border btn-extra-large" href="#">Button Solid
    <i className="feather-arrow-right"></i>
</a>
<!-- End Buttons  -->HTML

<!-- Start Buttons  -->
<a className="btn-default text-underline" href="#">
    <span>View More</span>
</a>
<a className="btn-read-more" href="#"><span>View More</span></a>
<a className="btn-default round" href="#">
    <span>View More</span>
</a>
<a className="btn-default square" href="#">
    <span>View More</span>
</a>
<a className="btn-default rounded-player popup-video" href="https://www.youtube.com/watch?v=tj9-MGHCs38">
    <span><i className="feather-play"></i></span>
</a>
<a className="btn-default rounded-player popup-video border" href="https://www.youtube.com/watch?v=tj9-MGHCs38">
    <span><i className="feather-play"></i></span>
</a>HTML

Style guide

Extend the default collapse behavior to create an Styleguide with the panel component see the code for better understanding

<!-- Start Style Guide Area -->
<div className="rbt-style-guide-area rbt-utilize-area rainbow-section-gap-big">
    <div className="container">
        <div className="row g-5">
            <div className="col-lg-3">
                <div className="rbt-default-sidebar sticky-top rbt-shadow-box rbt-gradient-border">
                    ..
                </div>
            </div>
            <div className="col-lg-9">

                <div id="colorPalette" className="rbt-elements-area rbt-shadow-box mb--60">
                    ..
                </div>


                <div id="gradient" className="rbt-elements-color rbt-shadow-box mb--60">
                    ..
                </div>


                <div id="typography" className="rbt-elements-area rbt-shadow-box mb--60">
                    ..
                </div>

                <div id="formElements" className="rbt-elements-area rbt-shadow-box mb--60">
                    ..
                </div>

                <div id="pagination" className="rbt-elements-area rbt-shadow-box mb--60">
                    ..
                </div>

                <div id="avatars" className="rbt-elements-area rbt-shadow-box mb--60">
                    ..
                </div>

                <div id="animatedHeading" className="rbt-elements-area rbt-shadow-box mb--60">
                    ..
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Style Guide Area -->HTML

User Guide

You can create an User Guide with the panel component see the code for better understanding

<!-- Start Style Guide Area -->
<div className="rbt-utilize-area rainbow-section-gap-big">
    <div className="container">
        <div className="utilize-inner">
            <div className="row g-5">
                <div className="col-lg-3">
                    <div className="rbt-default-sidebar sticky-top rbt-shadow-box">
                        ..
                    </div>
                </div>
                <div className="col-lg-9 inner-content pl--0">
                    ..
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Style Guide Area -->HTML

Toolsbar On Modal

You can create an Toolsbar On Modal with the panel component see the code for better understanding

<!--New Chat Section Modal -->
<div id="newchatModal" className="modal rbt-modal-box copy-modal fade" tabindex="-1">
    <div className="modal-dialog modal-dialog-centered">
        <div className="modal-content wrapper top-flashlight light-xl">
            <div className="section-title text-center mb--30 sal-animate" data-sal="slide-up" data-sal-duration="400" data-sal-delay="150">
                <h3 className="title mb--0 w-600">Unlock the power of AI</h3>
            </div>
            <div className="genarator-section">
                ..
            </div>
            <button className="close-button" data-bs-dismiss="modal">
                <i className="feather-x"></i>
            </button>
        </div>
    </div>
</div>HTML

Left Sidebar

You can create an Dashboard Left Sidebar with the panel component see the code for better understanding

<!--Start Left panel -->
<div className="rbt-left-panel popup-dashboardleft-section">
    <div className="rbt-default-sidebar">
        <div className="inner">
            <div className="content-item-content">
                <div className="rbt-default-sidebar-wrapper">
                    ..
                </div>
            </div>
        </div>
        <div className="subscription-box">
            ..
        </div>
        <p className="subscription-copyright copyright-text text-center b4  small-text">..</p>
    </div>
</div>
<!-- End Left panel -->HTML

Rifgt Sidebar

You can create an Dashboard Right Sidebar with the panel component see the code for better understanding

<!-- Dashboard Right Content -->
<div className="rbt-right-side-panel popup-dashboardright-section">

    <div className="right-side-top">
        ..
    </div>
    <div className="right-side-bottom">
        ..
    </div>
</div>
<!-- End Left panel -->HTML

Clients

Showcase of clients logos or images. See below image and code for more information.

<!-- Start Clients -->
<ul className="brand-list brand-style-2">
    <li><Link href="#"><Image src="assets/images/brand/brand-01.png" alt="Brand Image"></Link></li>
    <li><Link href="#"><Image src="assets/images/brand/brand-02.png" alt="Brand Image"></Link></li>
    <li><Link href="#"><Image src="assets/images/brand/brand-03.png" alt="Brand Image"></Link></li>
    <li><Link href="#"><Image src="assets/images/brand/brand-04.png" alt="Brand Image"></Link></li>
</ul>
<!-- End Clients -->HTML

Welcome to AIwave Footer You can select any footer & customize easily and build your website.

Footer Default

Awesome Footer styles. See below image and code for more information.

<!-- Start Footer Area  -->
<footer className="rainbow-footer footer-style-default footer-style-3 position-relative">
    <div className="footer-top">
        <div className="container">
            <div className="row justify-content-between">
                <div className="col-lg-4 col-md-6 col-sm-12 col-12">
                    <div className="rainbow-footer-widget">
                        ..
                    </div>
                </div>
                <div className="col-lg-2 col-md-6 col-sm-6 col-12">
                    <div className="rainbow-footer-widget">
                        <div className="widget-menu-bottom">
                            ..
                        </div>
                    </div>
                </div>
                <div className="col-lg-2 col-md-6 col-sm-6 col-12">
                    <div className="rainbow-footer-widget">
                        ..
                    </div>
                </div>
                <div className="col-lg-3 col-md-6 col-sm-6 col-12">
                    <div className="rainbow-footer-widget">
                        ..
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- End Footer Area  -->HTML

Sources and Credits

We've used the following fonts, free icons and plugins as listed:

Support

Thank you for purchasing my template.
If you have any questions that are beyond the scope of this help file, please feel free to open a new ticket at our Support forum

Change Log

Rainbow-Themes team never stops Improving, bug fixes, and improvements. See What's New. We recommend you to read the changelog for every update.

10 March 2024

Init release

1.0.0

NewTheme release

Still stuck? How can we help?

If you like our product. Please Rate Us

AIwave Documentation

Working with Doc

Formatting Content

Perfect Responsive

Sass Available

Fast Loading Speed

24 Support System

Getting Started

AIwave Core Features

What's Included

How to Install AIwave Website Templates

Requirements

Installation

Deploying to Vercel

Template Structures

Articles

CSS Files and Structure

Change Contents

Changing Images

You have to do the following to change this image with your own image:

Note

Changing Brand Logo

To change any images of the website

Changing Colors

Changing default template colors

Header Types

01. Header Default

02. Header With Topbar

03. Dashboard Header

All Elemnts and Shortcode Types

Buttons

Style guide

User Guide

Toolsbar On Modal

Left Sidebar

Rifgt Sidebar

Clients

Footer Style

Footer Default

Sources and Credits

Support

Change Log

10 March 2024

Still stuck? How can we help?