Documentation
Erepair - Electrician Services & Electrical Repairs Nextjs Template
Erepair – is a modern, unique, and clean template. It could be a perfect choice, created especially for gadgets and electronics repair services, mobile, computers & laptop repair and maintenance services. We have included a documentation file, to guide you, All files and code have been well organized and nicely commented on for ease of customizing.
React.JS Installation & Setup A JavaScript library for building user interfaces.
Installing
Make sure if NODEJS is installed on your computer
npm install -g create-react-app
command from your teminal to install React Globally.
Install npm :-
Run
npm install command from your project
directory. It will create 'node_module' folder in this all
dependency files will be install with this command.
Run Project :-
Run
npm run dev command from your project directory.
With is command file will be compiled and it will be loaded
on local server `http://localhost:3000`.
Production Build :-
Run
npm run build Builds the app for production to
the `build` folder. It correctly bundles React in production
mode and optimizes the build for the best performance.
Further help :-
To get more help on the
nextjs.js checkout
nextjs
Note: You can learn more in the Create Next App Documentation. To learn Next, check out the Next Documentation.
layout.js Structure
import "@/node_modules/react-modal-video/css/modal-video.css"
import "public/assets/css/style.css"
import 'swiper/css'
// import "swiper/css/navigation"
import "swiper/css/pagination"
import 'swiper/css/free-mode';
import { archivo, titilliumWeb, pacifico } from '@/lib/font'
export const metadata = {
title: 'Erepair',
description: 'Electrician Services & Electrical Repairs react next Js template',
}
export default function RootLayout({ children }) {
return (
<html lang="en" className={`${archivo.variable} ${titilliumWeb.variable} ${pacifico.variable}`}>
<body>{children}</body>
</html>
)
}
Create a PageHow to create a custom page
1. Create page component app\MyPage.js
import React from "react";
export function MyPage() {
return(
<h1>Hello!</h1>
)
}
- Nextjs Click to See
- Google fonts are used in the template. Krub
- Font Awesome: Click to See
- All Images are used: Pexels.com
- Bootstrap framework Bootstrap
- React Slick Click to See
- Isotope Layout Click to See
- WOW JS Click to See
- React countup Click to See
- React visibility sensor Click to See
Layout.js
'use client'
import { useEffect, useState } from "react"
import BackToTop from '../elements/BackToTop'
import DataBg from "../elements/DataBg"
import Breadcrumb from './Breadcrumb'
import SearchPopup from "./SearchPopup"
import Sidebar from "./Sidebar"
import Header1 from "./header/Header1"
import Header2 from './header/Header2'
import Header3 from "./header/Header3"
import Footer1 from './footer/Footer1'
import Footer2 from './footer/Footer2'
import Footer3 from "./footer/Footer3"
import Footer4 from "./footer/Footer4"
export default function Layout({ headerStyle, footerStyle, headTitle, breadcrumbTitle, children, wrapperCls }) {
const [scroll, setScroll] = useState(0)
// Mobile Menu
const [isMobileMenu, setMobileMenu] = useState(false)
const handleMobileMenu = () => {
setMobileMenu(!isMobileMenu)
!isMobileMenu ? document.body.classList.add("mobile-menu-visible") : document.body.classList.remove("mobile-menu-visible")
}
// Popup
const [isPopup, setPopup] = useState(false)
const handlePopup = () => setPopup(!isPopup)
// Sidebar
const [isSidebar, setSidebar] = useState(false)
const handleSidebar = () => setSidebar(!isSidebar)
useEffect(() => {
const WOW = require('wowjs')
window.wow = new WOW.WOW({
live: false
})
window.wow.init()
document.addEventListener("scroll", () => {
const scrollCheck = window.scrollY > 100
if (scrollCheck !== scroll) {
setScroll(scrollCheck)
}
})
}, [])
return (
<>
<DataBg />
<div className={`page-wrapper ${wrapperCls ? wrapperCls : ""}`} id="#top">
{!headerStyle && <Header1 scroll={scroll} isMobileMenu={isMobileMenu} handleMobileMenu={handleMobileMenu} handlePopup={handlePopup} isSidebar={isSidebar} handleSidebar={handleSidebar} />}
{headerStyle == 1 ? <Header1 scroll={scroll} isMobileMenu={isMobileMenu} handleMobileMenu={handleMobileMenu} handlePopup={handlePopup} isSidebar={isSidebar} handleSidebar={handleSidebar} /> : null}
{headerStyle == 2 ? <Header2 scroll={scroll} isMobileMenu={isMobileMenu} handleMobileMenu={handleMobileMenu} handlePopup={handlePopup} isSidebar={isSidebar} handleSidebar={handleSidebar} /> : null}
{headerStyle == 3 ? <Header3 scroll={scroll} isMobileMenu={isMobileMenu} handleMobileMenu={handleMobileMenu} handlePopup={handlePopup} isSidebar={isSidebar} handleSidebar={handleSidebar} /> : null}
<Sidebar isSidebar={isSidebar} handleSidebar={handleSidebar} />
<SearchPopup isPopup={isPopup} handlePopup={handlePopup} />
{breadcrumbTitle && <Breadcrumb breadcrumbTitle={breadcrumbTitle} />}
{children}
{!footerStyle && < Footer1 />}
{footerStyle == 1 ? < Footer1 /> : null}
{footerStyle == 2 ? < Footer2 /> : null}
{footerStyle == 3 ? < Footer3 /> : null}
{footerStyle == 4 ? < Footer4 /> : null}
</div>
<BackToTop scroll={scroll} />
</>
)
}
Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template.
REGULAR SUPPORT : You have in template support if you face any issue with the usage of it then you can contact us on below Email ID.
EXTENDED SUPPORT : Development it is chargeable according to your requirement. For that you need to mail us your requirement on below Email ID.
COST OF SERVICE : Depends on the hours required. But as you are already using our template we have discounted rates for our template customer.
EXTENDED LICENSE : With the Extended Support we also include Extended License. So you save much more with your investment than you will with purchasing Regular License and later buying Extended one + Development cost.
You will get a quick reply from our team and feel free to contact us. We don’t charge for requirement discussion so don’t worry.