Hi-soft (React)

ReactJS is the latest JavaScript framework that forces you to think regarding components. This model of thinking fits user interfaces well. Depending on your background it might feel alien at first. You will have to think very carefully about the concept of state.

Hi-soft React file structure in the Hi-soft-react folder.

Below is a list of the file structure in a react app.

This section guides you to install all required software and libraries to utilize Hi-soft  for your projects fully.

Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine. Node.js is required to build the Hi-soft React. Download the latest version of Node and install it: Download Nodejs

Npm is the package manager for JavaScript and the world’s largest software registry. Npm is a separate project from Node.js and tends to update more frequently. As a result, even if you’ve just downloaded Node.js (and therefore npm), you’ll probably need to update your npm.

 npm install --global npm@latest

Verify that npm in successfully installed, and version of installed npm will appear

 npm --version

Installation

1. First, unzip the zip file that you have download from ThemeForest. You will find a Hi-soft-react project and readme file.

2. Then after Extract zip File (Hi-soft-react.zip) into a folder, you have to work within.

3. Open a Node Prompt. Go to your Working Folder, And run the Following Command and wait for finish installation.

npm install

4. This command will install all the required node module into node_module/ inside your working folder.

5. You are ready to run the react-Hi-soft application for the first time

Working With React-Hi-soft

While still your working folder And run the following command

npm start

This section covers global elements which are used throughout in application.

To change logo go to the layout directory inside of the component directory. Open layout directory and open inheader.js add below code.

Here are some Header related components to make a header the way you like.

Here are some Footer related components to make a footer the way you like.

Here are change Page Header area by components. The list of page title options & their descriptions are provided below for your reference:

1. Import Page Header component from below file.

import PageHeader from "../layouts/page-header/PageHeader";

2. See below Code - structure to use Page Header Component.

<PageHeader 
				title="About Hi-Soft"
				description="Our Expertise. Know more about what we do"
				breadCrumbItems={[
				    { label: 'Home', path: '/' },
				    { label: 'Pages', path: '#' },
				    { label: 'About Us', path: '#', active: true },
				]}
			/>

Here are some Footer related components to make a footer the way you like.

Here you can Customize Main Menu, go to the location by following screenshot which are given bellow.

Hi-soft comes with many different types of reusable components making it easier to manage and maintain large-scale applications. This section will explain to you how to use them in your Theme.

If you want to use an Action Box component in your project, you need to follow below steps.

- Import ActionBox, ActionBoxMini component from below file.

import ActionBox, { ActionBoxMini } from '../component/action-box';

ActionBox Mini

- See below Code - structure to use ActionBox Mini Component.

<ActionBoxMini 
				btnClass="btn-primary-round"
				content="We provide solutions for all types of big industries"
				btnText="Browse Industries"
			/>

ActionBox

- See below Code - structure to use ActionBox Component.

<ActionBox 
				btnClass="btn-primary-round text-light"
				title="Tell us about your idea, and we’ll make it happen."
				content="Have a brand problem that needs to be solved? We’d love to hear about it!"
				btnText="Let’s Get Started"
			/>

Note: Here is Demo URL : https://themes.potenzaglobalsolutions.com/react/hi-soft/elements-action-box

If you want to use an Accordion component in your project, you need to follow below steps.

1. Import Accordion component from below file.

import AccordionPGS from "../component/accordion";

2. See below Code - structure to use Accordion data from Seprate Data file.

<AccordionPGS 
				defaultActive="1" 
				accordionData={faqData} 
			/>

3. See below Code - structure to use Accordion inline data.

<AccordionPGS
				defaultActive="1"
				accordionItems={[
					{ id: 1, title: "Accordion Title 01", content: "Accordion Content 01" },
					{ id: 2, title: "Accordion Title 02", content: "Accordion Content 02" },
					{ id: 3, title: "Accordion Title 03", content: "Accordion Content 03" },
				]}
			/>

Note: Here is Demo URL : https://themes.potenzaglobalsolutions.com/react/hi-soft/elements-accordion

If you want to use an Accordion component in your project, you need to follow below steps.

1. Import Button component from below file.

import Button from "../component/button/button";

2. See below Code - structure to use Button Component.

<Button
		btnClass="btn-primary"
		btnText="Button"
		btnURL="/button"
	/>

- Use btn-primary-round class for Primary Rounde button, Use btn-link link-primary class for button Primary Link.

- Use btn-secondary-round class for Secondary Rounde button, Use btn-link link-secondary class for button Secondary Link.

- Use btn-light-round class for Light Rounde button, Use btn-link link-light class for button Light Link.

Note: Here is Demo URL : https://themes.potenzaglobalsolutions.com/react/hi-soft/elements-button

If you want to use an Blog component in your project, you need to follow below steps.

1. Import Blog component from below file.

import BlogItem from "../component/blog";

2. See below Code - structure to use Blog Component.

<BlogItem key={ind} 
		imgSrc={val.imgSrc}
		postType={val.postType}
		category={val.category}
		date={val.date}
		title={val.title}
		id={val.id}
	/>

Note: Here is Demo URL : https://themes.potenzaglobalsolutions.com/react/hi-soft/elements-blog

If you want to use an Client Logo component in your project, you need to follow below steps.

1. Import Client Logo component from below file.

import ClientLogo from "../component/client-logo";

2. See below Code - structure to use Client Logo Component.

<ClientLogo 
		key={ind}
		className="cl-size-lg"
		theme="logo-default"
		data={val.imgSrc}
	/>

Note: Here is Demo URL : https://themes.potenzaglobalsolutions.com/react/hi-soft/elements-client-logo

If you want to use an Category Box component in your project, you need to follow below steps.

1. Import Category Box component from below file.

import ClientLogo from "../component/client-logo";

2. See below Code - structure to use CategoryBoxStyle1 and CategoryBoxStyle2 Component.

<CategoryBoxStyle1
		key={item}
		icon={val.icon}
		className={val.className}
		title={val.title}
		id={val.id}
		list={val.lists}           
	/>

<CategoryBoxStyle2
		key={item}
		icon={val.icon}
		className={val.className}
		title={val.title}
		id={val.id}
		list={val.lists}           
	/>

Note: Here is Demo URL : https://themes.potenzaglobalsolutions.com/react/hi-soft/elements-case-study

If you want to use an Case Study component in your project, you need to follow below steps.

1. Import Case Study component from below file.

import CaseStudyStyle1, { CaseStudyStyle2, CaseStudyStyle3 } from "../component/case-study";

2. There is 3 Case Study Style, YOu can see below Code - structure to use CaseStudyStyle1, CaseStudyStyle2 and CaseStudyStyle3 Component.

<CaseStudyStyle1
			key={ind}
			extraClass="masonry"
			id={val.id}
			image={val.imgsrc}
			title={val.title}
			category={val.category}
			description={val.description}
	/>

Note: Here is Demo URL : https://themes.potenzaglobalsolutions.com/react/hi-soft/elements-case-study

If you want to use an Counter component in your project, you need to follow below steps.

1. Import Case Study component from below file.

import Counter from "../component/counter/counter";

2. See below Code - structure to use Counter Component.

<Counter
		countStart="0"
		countEnd="100"
		countIcon="fa-brands fa-react"
		countTitle="Happy Clients"
	/>

Add className to use counter-grey for Grey Color and Use counter-light For Light Color.

Note: Here is Demo URL : https://themes.potenzaglobalsolutions.com/react/hi-soft/elements-counter

If you want to use an Countdown component in your project, you need to follow below steps.

1. Import Countdown component from below file.

import Countdown from '../component/countdown/countdown';

2. See below Code - structure to use Countdown Component.

<Countdown
		dateTime='11/31/2023'
		size="size-sm"
	/>

Note: Here is Demo URL : https://themes.potenzaglobalsolutions.com/react/hi-soft/elements-countdown

If you want to use an Services component in your project, you need to follow below steps.

1. Import Services component from below file.

import Services from "../component/services/services-item";

2. See below Code - structure to use Services Component.

<Services
			key={ind}
			theme="feature-info-style-01"
			imgsrc={val.imgsrc}
			icon={val.icon}
			title={val.title}
			description={val.description}
			id={val.id}
			servicesurl={val.servicesurl}
	/>

Use theme="feature-info-style-02" for Services Style 2.

Note: Here is Demo URL : https://themes.potenzaglobalsolutions.com/react/hi-soft/elements-countdown

If you want to use an Services Box component in your project, you need to follow below steps.

1. Import Services Box component from below file.

import ServiceBoxStyle1, { ServiceBoxStyle2 } from "../component/service-box/service-box";

2. See below Code - structure to use ServiceBoxStyle1 Component.

<ServiceBoxStyle1
			title="Mission and Vision"
			content="Our Vision & Mission are both helping our team to achieve the goal. We identify the clients' requirements and provide the best solutions."
	/>

3. See below Code - structure to use ServiceBoxStyle2 Component.

<ServiceBoxStyle2
			title="Mission and Vision"
			content="Our Vision & Mission are both helping our team to achieve the goal. We identify the clients' requirements and provide the best solutions."
			buttonText="View Positions"
			buttonLink="/"
	/>

Note: Here is Demo URL : https://themes.potenzaglobalsolutions.com/react/hi-soft/elements-countdown

If you want to use an Infobox component in your project, you need to follow below steps.

1. Import Infobox component with 3 deferent style from below file.

import InfoBox, { InfoBox2, InfoBox3 } from "../component/infobox";

2. See below Code - structure to use Infobox Component.

<InfoBox
			extraClass="left" 
			icon="flaticon-data"
			title="Information Security"
			description="Lorem Ipsum is simply dummy text of the printing and typesetting industry. "
	/>

Use InfoBox2 for Infobox Style 2 and use InfoBox3 for Infobox Style 3.

Note: Here is Demo URL : https://themes.potenzaglobalsolutions.com/react/hi-soft/elements-countdown

If you want to use an Feature Step component in your project, you need to follow below steps.

1. Import Feature Step and Feature Timeline component from below file.

import FeatureStep, { FeatureTimeline } from "../component/feature-step/feature-step";

2. See below Code - structure to use FeatureStep Component. For Light color use extraClass="feature-step-light"

<FeatureStep
			extraClass=""
			featureImg={val.featureImg}
			stepNumber={val.stepNumber}
			title={val.title}
			description={val.description}
	/>

3. See below Code - structure to use FeatureTimeline Component. For Light color use extraClass="feature-timeline-light"

<FeatureTimeline
			extraClass=""
			featureImg={val.featureImg}
			stepNumber={val.stepNumber}
			title={val.title}
			description={val.description}
	/>

Note: Here is Demo URL : https://themes.potenzaglobalsolutions.com/react/hi-soft/elements-countdown

If you want to use an Feature Info component in your project, you need to follow below steps.

1. Import Feature Info component from below file.

import FeatureInfo from "../component/feature-info";

2. See below Code - structure to use Feature Info Component.

<FeatureInfo
			image={aboutImage1}
			title="Mission and vision"
			content="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
			link="#"
	/>

Note: Here is Demo URL : https://themes.potenzaglobalsolutions.com/react/hi-soft/elements-feature-info

If you want to use an Testimonial component in your project, you need to follow below steps.

1. Import Testimonial component from below file.

import TestimonialStyle1, { TestimonialStyle2 } from "../component/testimonial/testimonial-item";

2. See below Code - structure to use Testimonial Style 1 Component.

<TestimonialStyle1 key={ind}
			authorImg={val.authorImg}
			authorName={val.authorName}
			authorPosition={val.authorPosition}
			description={val.description}
	/>

3. See below Code - structure to use Testimonial Style 2 Component.

<TestimonialStyle2 key={ind}
			authorImg={val.authorImg}
			authorName={val.authorName}
			authorPosition={val.authorPosition}
			description={val.description}
	/>

Note: Here is Demo URL : https://themes.potenzaglobalsolutions.com/react/hi-soft/elements-testimonial

If you want to use an Team component in your project, you need to follow below steps.

1. Import Team component from below file.

import TeamStyle1 from "../component/team/team-item";

2. See below Code - structure to use Team Component.

<TeamStyle1 key={index}
			image={val.image}
			name={val.name}
			position={val.position}
			list={val.social}
	/>

Note: Here is Demo URL : https://themes.potenzaglobalsolutions.com/react/hi-soft/elements-team

If you want to use an Tabs component in your project, you need to follow below steps.

1. Import Tabs component from below file.

import TabsPGS, { TabsPGSLeft } from "../component/tabs/tabs";

2. See below Code - structure to use Tabs Left Position Component.

<TabsPGSLeft
			extraClass=""
			tabActive="0"
			tabsTitle={[
				{ title: "Mission and vision" },
				{ title: "Our challenges", icon: "flaticon-author" },
				{ title: "Technology partners", icon: "flaticon-chart" },
			]}
			tabsContent={[
				{ content: data1 },
				{ content: data2 },
				{ content: data3 },
			]}                
	/>

3. See below Code - structure to use Tabs Top Position Component.

<TabsPGS
			extraClass="justify-content-center"
			tabActive="0"
			tabsTitle={[
			    { title: "E-commerce Solution", },
			    { title: "Digital Strategy", icon: "flaticon-author" },
			    { title: "Website Development", icon: "flaticon-chart" },
			]}
			tabsContent={[
			    { content: "Lorem Ipsum is simply dummy text of printing and typesetting industry."},
			    { content: "Lorem Ipsum is simply dummy text of printing and typesetting industry." },
			    { content: "Lorem Ipsum is simply dummy text of printing and typesetting industry." },
			]}
	/>

Note: Here is Demo URL : https://themes.potenzaglobalsolutions.com/react/hi-soft/elements-tab

If you want to use an Pricing Table component in your project, you need to follow below steps.

1. Import Pricing Table component from below file.

import PricingTable from '../component/pricing-table/pricing-table';

2. Import Pricing Table Data from below file.

import { planBasic, planStandard, planProfessional} from '../data/pricing';

3. See below Code - structure to use Pricing Table Component.

<PricingTable 
			theme="pricing-style-1"
			data={planStandard}
			className="active"
			btnStyle="btn-primary-round"
	/>

See Below Pricing Data - Structure

 const planBasic = [
    {
        id: 1,
        title: "Basic",
        content: "Only the basics - Everything you need to get started. Best for startup",
        price: "19",
        period: "month",
        listItem: [
            { list: '5 Analytics Campaign', isActive: false },
            { list: 'Branded Reports', isActive: true },
            { list: '500 Keywords', isActive: false },
            { list: '0 Social Account', isActive: true },
            { list: 'Phone & Email Support', isActive: true }
        ],
        buttonTitle: "Choose plan",
        buttonLink: "#",
    },
 ];

 const planStandard = [
    {
        id: 1,
        title: "Standard",
        content: "When you are ready to grow, We will grow with you. Get a Standard plan",
        price: "39",
        period: "month",
        listItem: [
            { list: '30 Analytics Campaign', isActive: true },
            { list: 'Branded Reports', isActive: true },
            { list: '700 Keywords', isActive: false },
            { list: '100 Social Account', isActive: true },
            { list: 'Phone & Email Support', isActive: true }
        ],
        buttonTitle: "Choose plan",
        buttonLink: "#",
    },
 ];

 const planProfessional = [
    {
        id: 1,
        title: "Professional",
        content: "Ready to kick it up a notch? Go for big with Professional membership",
        price: "69",
        period: "month",
        listItem: [
            { list: '50 Analytics Campaign', isActive: true },
            { list: 'Branded Reports', isActive: true },
            { list: '900 Keywords', isActive: true },
            { list: '200 Social Account', isActive: true },
            { list: 'Phone & Email Support', isActive: true }
        ],
        buttonTitle: "Choose plan",
        buttonLink: "#",
    },
 ]
	

Note: Here is Demo URL : https://themes.potenzaglobalsolutions.com/react/hi-soft/elements-tab

If you want to use an Image Gallery component in your project, you need to follow below steps.

1. Import Image Gallery component from below file.

import ImageGallery from '../component/image-gallery';

2. Import Image Gallery Data file from below location.

import ImageGalleryList, {ImageGalleryList2} from '../data/image-gallery'

3. See below Code - structure to use ImageGallery Component.

<ImageGallery 
			items="6"
			theme="gallery-style-1"
			data={ImageGalleryList}
	/>

- Set ImageGallery total items by items="6"

- Use theme="gallery-style-2" for Image Gallery Style 2.

Note: Here is Demo URL : https://themes.potenzaglobalsolutions.com/react/hi-soft/elements-image-gallery

If you want to use an List component in your project, you need to follow below steps.

1. Import List component from below file.

import List from "../component/list";

2. See below Code - structure to use List Component.

<List
		icon="fas fa-check"
		link={true}
		data={listItems}
	/>

- Add/Update Icon by icon="fas fa-check" code.

- Desable List Link then Remove link={true} code.

Note: Here is Demo URL : https://themes.potenzaglobalsolutions.com/react/hi-soft/elements-list

If you want to use an Video component in your project, you need to follow below steps.

1. Import Video component from below file.

import VideoPopup from "../component/video";

2. See below Code - structure to use Video Component.

<VideoPopup
			theme="video-style-2"
			size="lg"
			videoURL="https://player.vimeo.com/video/783455878?h=46672b3b96"
	/>

Use theme="video-style-2" for without Image.

Use size="lg" to Change Video PopUp Size.

Add Video URL in videoURL="" code.

Note: Here is Demo URL : https://themes.potenzaglobalsolutions.com/react/hi-soft/elements-video

Hi-soft supports all major Browsers like Google Chrome, Mozilla Firefox, Safari, Opera and Internet Explorer 10+.

If you like our theme and support, Please do not forget to rate it with 5 stars in your Downloads section and write a review in Comments as it will add more value to our services!

Kindly visit here: http://themeforest.net/downloads and find “Rate this item” below the download button and rate out the theme.

Advance Thanks in Anticipation!

Version 2.0.2 - Released on 13 Feb 2024

• Fixed: Mobile Menu Hide when click on Menu Link
• Updated: Minor code/formatting improvements and fixes.

Version 2.0.1 - Released on 17 Jan 2024

• Updated: Packages Version
• Updated: React Bootstrap to 2.10.0
• Updated: Swiper to 11.0.5
• Updated: React Router Dom to 6.14.0
• Updated: Web Vitals to 3.5.1
• Updated: Minor code/formatting improvements and fixes.

Version 2.0.0 - Released on 08 Jan 2024

• Added : 7 New Demo Added
• Added : Home 4 New Demo Added
• Added : Home 5 New Demo Added
• Added : Home 6 New Demo Added
• Added : Home 7 New Demo Added
• Added : Home 8 New Demo Added
• Added : Home 9 New Demo Added
• Added : Home 10 New Demo Added
• Updated: Minor code/formatting improvements and fixes.

Version 1.0.0 - Released on 01 Jun 2023

• Initial Release

Images

• Shutterstock Shutterstock
• Pexels Pexels
• Unsplash Unsplash

React Scripts

• react
• react-router-dom
• React Bootstrap
• react-18-image-lightbox
• react-countup
• react-scroll-trigger
• swiper

CSS & Fonts

• Font Awesome
• Flaticon
• Google Fonts