logo logo
  • Request Support
  • Awesome template
  • Purchase Now

ChatenAI Navigation

  • ChatenAIGetting Started
    • What's Included
    • How to Install ChatenAI Website Templates
    • How to Convert Chatenai LTR to RTL
    • How to Convert ChatenAI Default Templates into Light mode
  • briefcaseTemplate Structures
    • HTML Structure
    • CSS Files and Structure
    • Javascript Files
  • chatenaiChange Contents
    • Changing Images
    • Changing Brand Logo
    • Changing Colors
  • chatenaiHeader
    • Header Default
    • Header Transparent
    • Dashboard Header
  • chatenaiElements
    • Button
    • Accordion
    • Toolsbar On Header
    • Toolsbar On Modal
    • Separator Top
    • Separator Bottom
    • Left Sidebar
    • Right Sidebar
    • Brand
    • Callto Action
  • chatenaiFooter
    • Footer Default
  • chatenaiSources and Credits
  • chatenaiChange Log
  • chatenaiSupport

ChatenAI Documentation


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

chatenai
Working with Doc

You can any work by following our docs

chatenai
Formatting Content

Our content is more formating for your website

chatenai
Perfect Responsive

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

chatenai
Sass Available

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

chatenai
Fast Loading Speed

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

chatenai
24 Support System

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

Getting Started

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

Unlock the potential of ChatenAI, 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 ChatenAI—where innovation meets seamless user experience.

ChatenAI Core Features

  • NEXTJS14
  • Responsive layout (desktops, tablets, mobile devices)
  • Built with Bootstrap v5.0.2
  • Well structured code
  • Contact Form Working
  • Hinted Typography
  • Light Mode Available
  • RTL Available
  • Sass Available
  • W3 Valid 100%
  • Fast Loading Speed
  • Cross Browser Support
  • Dedicated Support, Lifetime Updates
  • And much more …

What's Included

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

  1. ChatenAI template: A .zip file with all .js files with all necessary assets.
  2. Documentation: An HTML format documentation.
  3. Licensing.

How to Install ChatenAI 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.

  1. Requirements

To install and set up the ChatenAI 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
                                                    
                                                
  1. 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
                                                
                                            
  1. Deploying to Vercel

Convert Chatenai LTR to RTL

If you want to convert your default chatenai nextjs template to RTL.Then you have follow this steps.

Step - 1: Add the RTL Attribute in html:

                                                                                                            
                                                                                                                <!DOCTYPE html>
                                                                                                                <html lang="en" dir="rtl">                                                                                                   
                                                                                                             
                                                                                                        

Step - 2: Include the RTL SCSS File:

Ensure you link to an RTL SCSS file in the style.scss file

Home Page

Step - 3: Need to change in some Nextjs class name:

To convert inner pages into rtl you have add some chnage mr--0 to ml--0 in those js file


appearance.js || application.js || chat-export.js || dashboard.js || help.js || notification.js || plans-billing.js || privacy-policy.js || profile-details.js || release-notes.js || sessions.js || terms-policy.js

Home Page
                                                                                                            
                                                                                                        <div className="ml--0"></div>
                                                                                                             
                                                                                                        

How to Convert ChatenAi Default Templates into Light mode

  1. Need to add SCSS

To enable light mode for the chatenai interface, you will need to include the specified SCSS file into the styles.scss file.

Home Page

Then you need to add another scss file for the switcher style _switcher.scss

Home Page
Note

You need to include some new variables into your _variables.scss

  1. Customize Folder

Add an additional subfolder named light within the existing images folder to organize the new images.

Home Page
  1. Customize Code

You need to add this file to switch between light theme and dark theme

Home Page
                                                                        
                                                                            <div id="my_switcher" className="my_switcher">
                                                                                <ul onClick={switchTheme}>
                                                                                    {isLight ? (
                                                                                        <li>
                                                                                           <button data-theme="light" className="setColor light">
                                                                                               <Image src={dark} alt="Sun images" />
                                                                                           </button>
                                                                                        </li>
                                                                                    ): (
                                                                                        <li>
                                                                                            <button data-theme="dark" className="setColor dark">
                                                                                                <Image src={light} alt="Vector images" />
                                                                                            </button>
                                                                                        </li>
                                                                                    )}
                                                                                </ul>
                                                                            </div>
                                                                        
                                                                    

You need to do some changes into Context > context.js file

Home Page

To access the switcher button into all pages. Then you need to import DarkSwitch in all HeaderStyle file.

  1. Switch logo

Home Page

Template Structures

Articles

  • CSS Files and Structure

CSS Files and Structure

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

HTML Images
                                            
                                                /**************************************
                                                Template Name: ChatenAI 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 -----/

                                                01.Variables
                                                02.Mixins
                                                03.Reset
                                                04.Typography
                                                05.Extend
                                                06.Animations
                                                07.Shortcode
                                                08.Spacing
                                                09.Common
                                                10.Forms
                                                11.Sal
                                                12.Text Animation
                                                13.Themebg

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

                                                01.Headerdefault
                                                02.Nav
                                                03.Header Top
                                                04.HeaderTopBar
                                                05.Mobilemenu

                                                /--- Elements -----/

                                                01.Breadcrumb
                                                02.Sectiontitle
                                                03.Button
                                                04.Service
                                                05.Card
                                                06.Counter
                                                07.Progressbar
                                                08.Accordion
                                                09.Social Share
                                                10.Team
                                                11.Portfolio
                                                12.Testimonial
                                                13.Slickslide
                                                14.Timeline
                                                15.Call to Action
                                                16.Tab
                                                17.Pricing
                                                18.Split
                                                19.Vedio
                                                20.Gallery
                                                21.Contact
                                                22.Brand
                                                23.404
                                                24.Advance Tab
                                                25.Advancepricing
                                                26.Contact Form
                                                27.Swicher
                                                28.Backto Top
                                                29.About
                                                30.Newsletter

                                                /--- Blog -----/
                                                01.Blog
                                                02.Sidebar
                                                03.Blog Details

                                                /--- Footer -----/
                                                01.Footer
                                                02.Copyright

                                                /--- Template -----/
                                                01.Banner
                                                02.Portfoliodetails
                                                03.Splash
                                                04.Lightmode

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

Change Contents

  • Changing Images
  • Changing Brand Logo
  • Changing Email Settings of the Contact Form

Changing Images

To change any images of the website

  1. Carefully collect the source name of the image (i.e. banner-img.jpg)
  2. Open the file called public > images.
  3. Find the particular image file.
  4. Replace the file with your image.
  5. 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={201} height={35} alt="ChatBot Logo"/>
                                                            </Link>
                                                        </div>
                                                    
                                                
HTML Images

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

  1. Open the file called images.
  2. Find the particular image file called banner-img.jpg
  3. Replace the file with your image
  4. 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
  1. Carefully collect the source name of the image (i.e. banner-img.jpg)
  2. Open the file called images.
  3. Find the particular image file.
  4. Replace the file with your image.
  5. 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={201} height={35} alt="ChatBot Logo"/>
                                                                </Link>
                                                            </div>
                                                        
                                                    
HTML Images

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

Changing default template colors

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

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

Images

Header Types

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

01. Header Default

To change any images of the website

Images

                                                    
                                                        <!-- 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 -->
                                                    
                                                

02. Header With Topbar

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

Images

                                                    
                                                        <!-- 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 -->
                                                    
                                                

03. Dashboard Header

Header with ceneter navigation menu to change your header area.

Images

                                                    
                                                        <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 left"></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="feather-sidebar right"></i></button>                                    
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </header>
                                                    
                                                

All Elemnts and Shortcode Types


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

Buttons

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

Images

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


Images

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


Images

                                                    
                                                        <Link className="btn-default bg-light-gradient btn-large" href="/text-generator">
                                                            <div className="has-bg-light"></div>
                                                            <span>Start writing for free</span>
                                                        </Link>
                                                    
                                                


Accordion

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

Images

                                                    
                                                        <!-- Start Accordion-2 Area  -->
                                                        <div className="rainbow-accordion-style  accordion">
                                                            <div className="accordion" id="accordionExamplea">
                                                                <div className="accordion-item card bg-flashlight">
                                                                    <h2 className="accordion-header card-header" id="headingOne">
                                                                        <button className="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                                                            What is ChatenAI ? How does it work?
                                                                        </button>
                                                                    </h2>
                                                                    <div id="collapseOne" className="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExamplea">
                                                                        <div className="accordion-body card-body">
                                                                            ChatenAI is an AI-powered messaging platform that understands and responds to your natural language queries. Ask anything you'd typically ask a human assistant—get weather updates, news, restaurant recommendations, and more!
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div className="accordion-item card bg-flashlight">
                                                                    <h2 className="accordion-header card-header" id="headingTwo">
                                                                        <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                                                            What kind of questions can I ask ChatenAI?
                                                                        </button>
                                                                    </h2>
                                                                    <div id="collapseTwo" className="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExamplea">
                                                                        <div className="accordion-body card-body">
                                                                            ChatenAI, an AI-driven messaging platform, adeptly communicates with users using natural language understanding. It delivers helpful responses to your inquiries and requests.
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div className="accordion-item card bg-flashlight">
                                                                    <h2 className="accordion-header card-header" id="headingThree">
                                                                        <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                                                            Can I get update regularly and For how long do I get updates?
                                                                        </button>
                                                                    </h2>
                                                                    <div id="collapseThree" className="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExamplea">
                                                                        <div className="accordion-body card-body">
                                                                            Yes, We will get update the ChatenAI. And you can get it any time. Next
                                                                            time we will comes with more feature. You can be get update for
                                                                            unlimited times. Our dedicated team works for update.
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- End Accordion-2 Area  -->
                                                    
                                                

Toolsbar On Header

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

Images

                                                    
                                                        <!-- Start Tools Area -->
                                                        <div className="mainmenu-nav d-none d-lg-block one-menu">
                                                            <ul className="mainmenu one-menu-item">
                                                                <li className="with-megamenu has-menu-child-item position-relative menu-item-open">
                                                                    <a className="header-round-btn" href="#">
                                                                        <span><i className="feather-grid"></i></span>
                                                                    </a>
                                                                    <div className="rainbow-megamenu with-mega-item-2 right-align">
                                                                        <div className="wrapper">
                                                                            <div className="row row--0">
                                                                                <div className="col-lg-4 single-mega-item">
                                                                                    <div className="genarator-section">
                                                                                        <ul className="genarator-card-group full-width-list">
                                                                                            ..
                                                                                        </ul>
                                                                                    </div>
                                                                                </div>
                                                                                <div className="col-lg-4 single-mega-item">
                                                                                    <div className="genarator-section">
                                                                                        <ul className="genarator-card-group full-width-list">
                                                                                            ..
                                                                                        </ul>
                                                                                    </div>
                                                                                </div>
                                                                                <div className="col-lg-4 single-mega-item">
                                                                                    <div className="genarator-section">
                                                                                        <ul className="genarator-card-group full-width-list">
                                                                                            ..
                                                                                        </ul>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <!-- End Tools Area -->
                                                    
                                                

Toolsbar On Modal

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

Images

                                                    

                                                        <!--New Chat Section Modal JS -->
                                                        <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>

                                                    
                                                

Separator Top

You can create an Separator top with the panel component see the code for better understanding

Images

                                                    
                                                        <!-- Start Separator  -->
                                                        <div className="chatenai-separator">
                                                            <Image className="w-100" src={separatorTop} alt="Separator Images"/>
                                                        </div>
                                                        <!-- END Separator  -->
                                                    
                                                

Separator Bottom

You can create an Separator bottom with the panel component see the code for better understanding

Separator Images

                                                    
                                                        <!-- Start Separator  -->
                                                        <div className="chatenai-separator">
                                                            <Image className="w-100" src={separatorBottom} alt="Separator Images"/>
                                                        </div>
                                                        <!-- END Separator  -->
                                                    
                                                

Left Sidebar

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

Sidebar Image

                                                    
                                                        <!--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 -->
                                                    
                                                

Rifgt Sidebar

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

Sidebar Image

                                                    
                                                        <!-- 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 -->
                                                    
                                                

Clients

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

Images

                                                    
                                                        <!-- Start Clients -->
                                                        <ul class="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>
                                                            <li><Link href="#"><Image src="assets/images/brand/brand-05.png" alt="Brand Image"/></Link></li>
                                                            <li><Link href="#"><Image src="assets/images/brand/brand-06.png" alt="Brand Image"/></Link></li>
                                                            <li><Link href="#"><Image src="assets/images/brand/brand-07.png" alt="Brand Image"/></Link></li>
                                                            <li><Link href="#"><Image src="assets/images/brand/brand-08.png" alt="Brand Image"/></Link></li>
                                                            <li><Link href="#"><Image src="assets/images/brand/brand-01.png" alt="Brand Image"/></Link></li>
                                                        </ul>
                                                        <!-- End Clients -->
                                                    
                                                

Call To Action

Awesome call to action styles. See below image and code for more information.

Images

                                                    
                                                        <!-- Start Call TO Action Area  -->
                                                        <div className="rainbow-callto-action-area">
                                                            <div className="wrapper">
                                                                <div className="rainbow-callto-action clltoaction-style-default rainbow-section-gap">
                                                                    <div className="container">
                                                                        <div className="row row--0">
                                                                            <div className="col-lg-12">
                                                                                <div className="align-items-center content-wrapper">
                                                                                    <div className="inner">
                                                                                        <div className="content text-center">
                                                                                            ..
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div className="fancy-genearate-section">
                                                                    <div className="container">
                                                                        <div className="genarator-section">
                                                                            ..
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- End Call TO Action Area  -->
                                                    
                                                

Footer Style

Welcome to ChatenAI 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.

Images

                                                    

                                                        <!-- Start Footer Area  -->
                                                        <footer className="rainbow-footer footer-style-default footer-style-3 position-relative">
                                                            <div className="chatenai-separator has-position-top">
                                                                ..
                                                            </div>
                                                            <div className="footer-top">
                                                                <div className="container">
                                                                    <div className="row justify-content-center mb--30">
                                                                        <div className="col-lg-4 col-md-6 col-sm-12 col-12">
                                                                            <div className="rainbow-footer-widget text-center">
                                                                                <div className="logo">
                                                                                    ..
                                                                                </div>
                                                                                <p className="b1 text-center mt--20 mb--0">Create Website By ChatenAI So Quick Download And Make Your Site.</p>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div className="separator-animated animated-true mt--30 mb--50"></div>
                                                                    <div className="row">
                                                                        <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-top">
                                                                                    ..
                                                                                </div>
                                                                            </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 className="widget-menu-top">
                                                                                    ..
                                                                                </div>
                                                                            </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>
                                                                </div>
                                                            </div>
                                                        </footer>
                                                        <!-- End Footer Area  -->

                                                    
                                                

Sources and Credits

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

  • Google Fonts
  • Feathericons Icon fonts
  • Swiperjs Slider
  • Venobox
  • Animate.css
  • Prismjs
  • Clipboard
  • React Tooltip
  • Sal Animation
  • React Select

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

Support Image

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.

03 October 2024

Init release

1.0.0

NewTheme release

Still stuck? How can we help?

If you like our product. Please Rate Us

If you need the template customization or custom development services please contact us.

Email Us

chatenai

© 2023 All Rights Reserved by Rainbow Themes