Documentation

Azzle-Ai

Welcome to the documentation for the Azzle React Template! This guide will help you understand the structure of the template, its components, and how to effectively use and customize it for your projects.

Installation

Hello! Welcome to Azzle's official documentation. Simple, Flexible, ready to use React Template which will bring you so much closer to your end goals. Let’s dive in.

npm install

How To Run Development Server

To start our development server run command below:

npm run dev

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

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

File Structure

Follow the steps below to setup your site template:

1. Unzip the downloaded package and open the /azzle-ai folder to find all the template files. You will need to upload these files to your hosting web server using FTP or localhost in order to use it on your website.
2. Below is the folder structure and needs to be uploaded to your website or localhost root directory:
   • azzle-react/src/components - Component files
   • azzle-react/src/hooks - Hooks files
   • azzle-react/src/pages - All pages
   • azzle-react/public/assets - Asset files
   • azzle-react/src/styles - Style files
   • azzle-react/index.html - Root file
3. You should upload all or specific React files as per your need.
4. You are good to go for adding your content now!

Tailwind CSS

We have integrated Tailwind CSS for styling in the template. If you're familiar with Tailwind CSS, you can modify the Tailwind configuration file tailwind.config.js to customize the design according to your requirements.

The styles are organized in the src/style directory. You can locate the style.css file within this directory, which serves as the entry point for Tailwind CSS. Here, you can customize Tailwind's utility classes and extend them as needed.

To make changes, navigate to the src/style directory and edit the style.css file based on your preferences. Tailwind's utility-first approach allows for quick and efficient styling adjustments.

If you require a more advanced setup, you can edit the respective files yourself within the same folder. Tailwind provides modular CSS files, allowing you to include only the necessary styles for your project. You can manage these styles in your style.css file.

Feel free to leverage Tailwind's extensive utility classes to minimize the CSS output and include only the styles required for your components. This can be achieved by configuring your tailwind.config.js file to include only the necessary utilities.

Logo Settings

Replace logo with same name:

You can update the logo by simply replacing it with a new logo of the same name.

1. Navigate to the src/assets/img directory within your project.

2. Locate the existing logo file that you wish to replace. Ensure that the replacement logo you have matches the same file format (e.g., PNG, JPG) and has the same name as the original logo file.

3. Once you've found the original logo file, simply replace it with your new logo file. Make sure to use the same filename to ensure that the project references the new logo correctly.

4. After replacing the logo file, any references to the logo throughout your project will automatically reflect the changes, as long as they are referencing the file by its filename.

5. You may need to restart your development server or rebuild your project for the changes to take effect, depending on your development environment.

6. That's it! You've successfully replaced the logo in your project.

Stricture

Documentation and examples for header, footer, layout and Root App.jsx

Pages

Pages Structure:

In the azzle-react/src/pages directory, you'll find two folders: common and home

The common folder contains pages that are shared and can be used across different sections of the application. These pages, such as login and signup, are designed to be reusable and can be integrated with any other home pages.

Within the home folder, you'll discover four distinct home pages. Each home page represents a unique layout or design variation for the main landing page of the application.

App.jsx

The App.js file, located at azzle-react/src/App.js, sets up the routing for the application using react-router-dom . Here's an overview of the App.js component:

Routing Setup:

• The Routes component is used to define the routing for the application.
• Inside the Routes, there is a < Route > element that wraps the < Layout /> component.
• The < Layout /> component serves as the layout for the entire application, containing the header, main content, and footer.
• Specific routes are defined for:
  • Home page (Home_01)
  • Login page (Login)
  • Blog page (Blog)
  • Any other unmatched paths will display the Error_404 component.

Layout.jsx

The Layout.jsx component, located at azzle-react/src/components/layout/Layout.jsx , provides a consistent layout structure for the pages. It includes a header, main content area, and footer. Here's an example of the Layout.jsx component:

Component Structure:

• The Layout.jsx component is a functional component that wraps the entire content in a < div > element with the class page-wrapper.
• Inside this wrapper:
  • The Header component is rendered at the top.
  • The < Outlet /> component is used as a placeholder for rendering child components based on the nested routes.
  • The Footer_01 component is rendered at the bottom.

Summary of App.jsx and Layout.jsx

1. App.js Component:
   • Sets up the routing for the application.
   • Defines specific routes for home, login, signup, blog, and error pages.
   • Uses the < Layout /> component to provide a consistent layout structure.
2. Layout.jsx Component:
   • Provides a layout structure for the entire application.
   • Includes the header, main content area, and footer.
   • Uses the < Outlet /> component to render nested child components based on routes.

Header

To integrate the Header component into your pages, follow these steps:

Header Component Integration:

1. First, import the Header component from the src/components/header directory into your page component file.
2. Next, use the Header component in your page component's JSX code. Pass any necessary props such as loginCSS, signupCSS, navColor, and light as needed for customization.
3. Within the Header component usage, you can customize it by passing different values for the loginCSS, signupCSS, navColor, and light props. These props allow you to control the appearance and behavior of the header based on your application's design requirements.
   • loginCSS: CSS class for the login Button.
   • signupCSS: CSS class for the sign-up Button.
   • navColor: Color for the navigation bar.
   • light: Boolean value to determine if the header should have a light or dark style.
4. Integrating the Header component in this way ensures a consistent and customizable header across various sections or pages of your application. It simplifies the process of managing the header's appearance and functionality, enhancing the user experience.

Footer

The list of various footer types & its descriptions are provided below for your reference: Inside the src/components/footer folder, you'll find four distinct footer components contributing to the project's structure.

Footer 1

Inside the src/components/footer/Footer_01 folder, you'll find Footer Variant One component.

Footer 2

Inside the src/components/footer/Footer_02 folder, you'll find Footer Variant Two component.

Footer 3

Inside the src/components/footer/Footer_03 folder, you'll find Footer Variant Three component.

Footer 4

Inside the src/components/footer/Footer_04 folder, you'll find Footer Variant Four component.

Content

Documentation and examples for displaying typography, table, image and video and more..

Typography

Documentation and examples for typography, headings, body text, lists, and more.

Headings

Inline Text elements

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

Icons

The React Icons library is a popular set of icon components for React applications. It provides a collection of icon components that can be easily integrated into your React projects, allowing you to add icons to your user interface without the need for external image files.

FAQ

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

Source & Credits

Images:

• Freepik
• Unsplash
• Pexels

Fonts:

• Icons Font Face
• Custom Icon Font
• Typography Font

Packages:

• bootstrap 5
• react
• react-dom
• react-router-dom
• react-animated-cursor
• react-modal-video
• react-icons
• react-odometerjs
• sass
• aos
• gsap
• swiper
• swiper-react

Changelog

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

Version 1.0

Initial Release