Documentation

Ravo - React Creative & Modern Multi Purpose template

Ravo is a React.js Creative & Modern Multi Purpose Template is a perfect template for creative agencies and business startup. Multiple templates are included in this template with lots of CSS and React animations, a perfect template for business startups, web studio, and digital agencies. All files has been well organized and nicely commented for easy to customize.

Version: 1.1
Author: ThemesCamp

Created: 30 May, 2022
Update: 13 June, 2022

If you have any questions that are beyond the scope of this help file, Please feel free to contact us via ThemesCamp.

Features

Build on React.js (No jQuery)
Build on Next.js
Based on Bootstrap 5
10+ Stunning Hompages
50+ Huge Template Collection
70+ Inner Pages
SEO Friendly
Mega Menu
Parallax Effect
Working Contact Form
Fully Responsive
Modern Design
24/7 Support
Free Updates
W3C Validated Code

Files Include

ravo_react Folder

Folder contains main template code & all jsx, json, scss, css, images, fonts, js files

ravo-react-docs Folder

Documentation folder of "ravo react" written in html css

Installation

Follow the steps below to setup your template:

Download the latest theme source code from the Marketplace.
Download and install Node.js and npm from Nodejs. The suggested version to install is LTS.

Open terminal in ravo_react template folder.

                  > cd /ravo_react/

Install npm packages. You must have to install packages of your project to install all the necessary dependencies, You can do this by running the following command.
```
                  > npm install
                
```

Run Development Server

Start your app development server to change, update and customize your app.

Run npm run dev in the terminal from the root of your project to start a dev server

              > npm run dev

Navigate to http://localhost:3000 to see your app, the app will automatically reload if you change any of the source files.

Build For Production

Build the app for production and make it ready for deployment

Run npm run build to build the project for production.

              > npm run build

The build artifacts will be stored in the /.next/ directory.

Run npm start to run the production build of the project locally.

Deployment

You can deploy your project to any hosting provider that supports Node.js
We suggest some hosting you can consider to use:

Deploy to Heroku
Deploy to Vercel
Deploy to Netlify
Deploy to Amazon Web Service
And more...

Folder Structure

Ravo comes with a flexible file structure that can be easily used for small to large scope projects. This section will explain the entire file structure and how to adapt it to your project.

Root Folder

[root_folder] folder contains the whole project folders & files

Root Folder Content:

File/Folder	Description
`public`	Next.js public folder that can serve static files which files inside it can then be referenced by your code starting from the base URL `"/"`, like images, fonts and vendors.
`src`	The source folder that contains all template source files like Pages, Components, Data, SCSS, Javascript and media files. Required only for development and can be excluded for production.
`node_modules`	A directory created by npm and a way of tracking each packages you install locally via package.json
`.next`	A directory created by next.js during build time to be the destination folder that contains the compiled html and assets.
`.eslintrc`	Config file format for ESLint
`next.config.js`	A regular Node.js module, not a JSON file. It gets used by the Next.js server for custom advanced configuration of Next.js and build phases, and it's not included in the browser build
`package.json`	Includes the list of dependencies to install from npm

Src Folder

[root_folder]/src/ source folder that contains all template source files.

Layouts Folder

[root_folder]/src/layouts folder contains all template layouts.

File	Description
`preview.jsx`	React component represents the Preview layout for main Landing Preview page
`main-light.jsx`	React component represents the Main layout for most of the project pages
`app-layout.jsx`	React component represents the App layout, such as layout for restaurant, freelancer, mobile app or architecture pages

Pages Folder

[root_folder]/src/pages folder contains template pages files.

Folders content:

/home-main
index.jsx
/home-landing-2
index.jsx
/home-nft-market
index.jsx
/about-business
index.jsx
...

Each file is a react component exported from a .js, .jsx file in the pages directory is associated with a route based on its containing folder name.

Components Folder

[root_folder]/src/components folder contains template components that imported and used in pages.

Components folders are grouped together according to the pages with same style.
e.g. Architecture Folder contains all the components of architecture pages

/Architecture
/Header
index.jsx //= Architecture Header Component
/Services
index.jsx //= Architecture Services Component
...
/Creative
/Header
index.jsx //= Creative Header Component
/Services
index.jsx //= Creative Services Component
...
...

Each folder contains a react components that is imported and rendered in some pages component.

Data Folder

[root_folder]/src/data folder contains static app data in json format.

Each folder contains a page components data stored in JSON format.

/architecture
header.json //= Architecture Header Component Data
services.json //= Architecture Services Component Data
...
/creative
header.json //= Creative Header Component Data
services.json //= Creative Services Component Data
...
...

Each file contains JSON data that imported and rendered on it's component.

Common Folder

[root_folder]/src/common folder contains common helper functions.

Each file is JavaScript function that is commonly used in project components.

Code Structure

Main template components code structure

App

[root_folder]/src/pages/_app.js Next.js uses the App component to initialize pages which is the main application file.

// ./src/page/_app.js

//= Import React & Next Components
import React from "react";
import Head from "next/head";
import Script from "next/script";

//= Import Global Components
import ProgressScroll from "../components/Progress-Scroll";

//= Import Global CSS/SCSS
import "../styles/globals.css";

// App Component
function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <title>Ravo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
      </Head>

      <!-- Rendered Pages Component -->
      <Component {...pageProps} />
      <ProgressScroll />

      <!-- Scripts -->
      <Script strategy="beforeInteractive" src="/js/bootstrap.bundle.min.js"></Script>
      <Script strategy="beforeInteractive" src="/js/wow.min.js"></Script>
      <Script strategy="beforeInteractive" src="/js/splitting.min.js"></Script>
      <Script strategy="beforeInteractive"src="/js/simpleParallax.min.js"></Script>
      <Script strategy="beforeInteractive" src="/js/isotope.pkgd.min.js"></Script>
      <Script strategy="lazyOnload" src="/js/main.js"></Script>
    </>
  );
}

export default MyApp;

Layout

[root_folder]/src/layouts/[layout].jsx React component that contains app layout.

// ./src/layouts/preview.jsx
import { useEffect, useRef } from "react";
import Head from "next/head";
import Script from "next/script";
//= Components
import Navbar from "../components/Navbars/MainNavbar";

// Layout Component
const PreviewLayout = ({ children }) => {
  const navbarRef = useRef(null);

  useEffect(() => {
    var navbar = navbarRef.current;
    
    if (window.pageYOffset > 300) navbar.classList.add("nav-scroll");
    else navbar.classList.remove("nav-scroll");

    window.addEventListener("scroll", () => {
      if (window.pageYOffset > 300) navbar.classList.add("nav-scroll");
      else navbar.classList.remove("nav-scroll");
    });
  }, [navbarRef]);

  return (
    <>
      <Head>
        <!-- Layout CSS Files -->
        <link rel="stylesheet" href="/css/plugins.css" />
        <link rel="stylesheet" href="/css/style.css" />
        <link rel="stylesheet" href="/landing-preview/css/preview-style.css" />
      </Head>

      <!-- Layout Navbar -->
      <Navbar navbarRef={navbarRef} />
      <!-- Layout Wrapped Content -->
      { children }
      
      <!-- Layout Scripts -->
      <Script> strategy="beforeInteractive" src="/landing-preview/js/parallax.min.js"></Script>
    </>
  );
};

export default PreviewLayout;

Layout component wraps pages content and contains specific configurations such as common components, css or scripts.

Page

[root_folder]/src/pages/[page_folder]/[page].jsx React component that contains a page code.

// ./src/pages/home-main/index.jsx
//= Import React Hooks
import { useEffect } from 'react';
import Head from 'next/head';
//= Layout
import MainLightLayout from '../../layouts/main-light';
//= Components
import StickyBar from '../../components/Common/StickyBar';
import FixedSearch from '../../components/Common/FixedSearch';
import Header from '../../components/Main/Header1';
import IntroUp from '../../components/Main/IntroUp';
import IntroOutBox from '../../components/Main/IntroOut';
import Services from '../../components/Main/Services1';
import Portfolio from '../../components/Main/Portfolio1';
import Section from '../../components/Main/Section';
import Process from '../../components/Main/Process1';
import Testimonials from '../../components/Main/Testimonials1';
import Numbers from '../../components/Main/Numbers';
import Team from '../../components/Main/Team';
import CallToAction from '../../components/Main/CallAction';
import Blog from '../../components/Main/Blog1';
import Footer from "../../components/Footers/MainFooter";

// Page Component
const HomeMain = () => {
  useEffect(() => {
    document.body.classList.add('index-main');
    document.body.classList.remove(...toBeRemovedClasses);
  }, []);

  return (
    <>
      <Head>
        <title>Ravo - Home Main</title>
      </Head>

      <!-- Usage of page layout -->
      <MainLightLayout>
        <!-- Usage of imported components -->
        <StickyBar />
        <FixedSearch />
        <Header />
        <IntroUp />
        <IntroOutBox />
        <Services />
        <Portfolio />
        <Section />
        <Process />
        <Testimonials />
        <Numbers />
        <Team />
        <CallToAction />
        <Blog />
        <Footer footerClass="main-footer bg-dark-blue" />
      </MainLightLayout>
    </>
  )
}

export default HomeMain;

Component

[root_folder]/src/components/[component_folder]/index.jsx React component contains part of a page code.

// ./src/components/Common/StickyBar/index.jsx
import { useEffect } from 'react';
import Link from 'next/link';

const StickyBar = () => {
  useEffect(() => {
    const sticky_bar = document.querySelector('.sticky-bar');
    if (window.pageYOffset > 600) sticky_bar.classList.add("active");
    else sticky_bar.classList.remove("active");

    window.addEventListener("scroll", () => {
      if (window.pageYOffset > 600) sticky_bar.classList.add("active");
      else sticky_bar.classList.remove("active");
    });
  }, []);

  return (
    <div className="sticky-bar">
      <div className="left-bar">
        <Link href="/contact-creative">
          <a className="contact-butn">
            <span>Contact Us</span>
            <span className="icon ml-10">
              <i> className="far fa-comment"></i>
            </span>
          </a>
        </Link>
      </div>
      <div className="right-bar">
        <div className="social-text fz-13">
          <span> className="text">Follow Us</span>
          <a> href="#0">Fa.</a>
          <i>/</i>
          <a> href="#0">Tw.</a>
          <i>/</i>
          <a> href="#0">Be.</a>
        </div>
      </div>
    </div>
  )
}

export default StickyBar

Data

[root_folder]/src/data/[data_folder]/[data_file].json JSON file stores component data.

// ./src/data/landing-preview/demos.json
[
  {
    "id": 1,
    "link": "/home-main",
    "image": "landing-preview/img/demos/1.jpg",
    "type": "Creative",
    "title": "Main Demo"
  },
  {
    "id": 2,
    "link": "/home-landing-3",
    "image": "landing-preview/img/demos/2.jpg",
    "type": "Creative",
    "title": "Modern Agency"
  },
  {
    "id": 3,
    "link": "/home-mobile-app",
    "image": "landing-preview/img/demos/3.jpg",
    "type": "Creative",
    "title": "Mobile App"
  }
  .
  .
  .
]

Source & Credits

Images:

Pexels - https://pexels.com
Unsplash - https://unsplash.com

Images are only for demo purpose and not included with the download bundle.

Fonts:

Poppins - https://fonts.google.com/specimen/Poppins?query=pop
Noto Sans - https://fonts.google.com/noto/specimen/Noto+Sans

Scripts:

Next.js - https://nextjs.org
React.js - https://reactjs.org
Bootstrap 5 - http://getbootstrap.com
Swiper Carousel - https://swiperjs.com
react-scroll - https://www.npmjs.com/package/react-scroll
react-progress-bar - https://www.npmjs.com/package/@ramonak/react-progress-bar
react-parallax-tilt - https://www.npmjs.com/package/react-parallax-tilt
react-fade-in - https://www.npmjs.com/package/react-fade-in
react-slidedown - https://www.npmjs.com/package/react-slidedown
react-tsparticles - https://www.npmjs.com/package/react-tsparticles
react-modal-video - https://appleple.github.io/react-modal-video

Thank you for purchased Ravo template

We truly appreciate and really hope that you'll enjoy our template!

If you like our template, plase rate us 5 star !