more sections added

app/assets/css/main.css

@@ -6729,7 +6729,7 @@ blockquote cite {
 }
 
 .appie-about-8-area {
-  background-image: url(../images/background-bg.jpg);
+  /* background-image: url(../images/background-bg.jpg); */
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

app/components/AfterHero.js

@@ -1,12 +1,13 @@
 import React from 'react';
-import thumb4 from '../assets/images/about-thumb-4.png';
 import thumb5 from '../assets/images/about-thumb-5.png';
 import cardImg from '../assets/images/home/card-home-01.png'
+import bg from '../assets/images/background-bg.jpg'
+import Image from 'next/image';
 
 function AfterHero() {
     return (
         <>
-            <section className="appie-about-8-area pt-100 pb-100">
+            <section className="appie-about-8-area pt-50 pb-70" style={{ backgroundImage: `url(${bg.src})`, backgroundSize: 'cover' }}>
                 <div className="container">
                     <div className="row">
                         <div className="col-lg-12">
@@ -37,27 +38,17 @@ function AfterHero() {
                                         </a>
                                     </div>
                                     <div className="col-12 col-sm-8 order-1 order-sm-2">
-                                        <img className='w-100 h-100' src={cardImg} alt="Child Card" />
+                                        <Image
+                                            src={cardImg}
+                                            width={'100%'}
+                                            height={'100%'}
+                                            alt="" 
+                                        />
                                     </div>
                                 </div>
                             </div>
                         </div>
                         <div className="col-lg-5">
-                            {/* <div className="appie-about-8-box">
-                                <h3 className="title">
-                                    Assign Faster with <br />
-                                    wrenchAgent
-                                </h3>
-                                <p>
-                                    Ask our &#x275B;&#x275B;<span className=''>wrench</span><span className=''>Agent</span>&#x275C;&#x275C; Generative AI to assist
-                                </p>
-                                <a className="main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
-                                    Learn More <i className="fal fa-arrow-right" />
-                                </a>
-                                <div className="thumb mr-30">
-                                    <img src={thumb5} alt="" />
-                                </div>
-                            </div> */}
                             <div className='appie-about-container'>
                                 <div className="appie-about-8-box">
                                     <h3 className="title">
@@ -75,7 +66,12 @@ function AfterHero() {
                                         </a>
                                     </div>
                                     <div className="col-12 col-sm-8 order-1 order-sm-2">
-                                        <img className='w-100 h-100' src={thumb5} alt="" />
+                                        <Image
+                                            src={thumb5}
+                                            width={'100%'}
+                                            height={'100%'}
+                                            alt="" 
+                                        />
                                     </div>
                                 </div>
                             </div>

app/components/FooterHomeOne.js

@@ -1,6 +1,5 @@
-"use client"
 import React, { useMemo } from 'react';
-import { Link } from 'react-router-dom';
+import Image from 'next/image';
 import logo from '../assets/images/wrenchboard-logo-text.png';
 import getConfig from '../../Config/config'; // './../../Config/config'
 
@@ -17,19 +16,24 @@ function FooterHomeOne({ className }) {
                             <div className="footer-about-widget">
                                 <div className="logo">
                                     <a href="#">
-                                        <img src={logo} alt="WrenchBoard" loading='eager' width={175} height={38} />
+                                        <Image
+                                            src={logo}
+                                            width={'175'}
+                                            height={'38'}
+                                            alt="" 
+                                        />
                                     </a>
                                 </div>
                                 <p>
                                     {`It is simple. You can set goals, task, or anything that needs to be done and reward accomplishment. WrenchBoard is the platform to connect opportunities. `}
                                 </p>
-                                <Link to="/service">
+                                <a href="/service">
                                     Read More <i className="fal fa-arrow-right" />
-                                </Link>
+                                </a>
                                 <div className="social mt-30">
                                     <ul>
                                         <li>
-                                            <a to={site.facebook_link}>
+                                            <a href={site.facebook_link}>
                                                 <i className="fab fa-facebook-f" />
                                             </a>
                                         </li>
@@ -48,19 +52,19 @@ function FooterHomeOne({ className }) {
                                 <h4 className="title">Company</h4>
                                 <ul>
                                     <li>
-                                        <Link to="/about-us">About Us</Link>
+                                        <a href="/about-us">About Us</a>
                                     </li>
                                     <li>
-                                        <Link to="/service">Our Services</Link>
+                                        <a href="/service">Our Services</a>
                                     </li>
                                     <li>
-                                        <Link to="/use-cases">Use Cases</Link>
+                                        <a href="/use-cases">Use Cases</a>
                                     </li>
                                     <li className='d-none'>
                                         <a target='_blank' href={process.env.REACT_APP_AGENT_LINK}>Agent</a>
                                     </li>
                                     <li>
-                                        <Link to="/blog">Blog</Link>
+                                        <a href="/blog">Blog</a>
                                     </li>
                                    
                                 </ul>
@@ -71,19 +75,19 @@ function FooterHomeOne({ className }) {
                                 <h4 className="title">Support</h4>
                                 <ul>
                                     <li>
-                                        <Link to="/contact">Contact</Link>
+                                        <a href="/contact">Contact</a>
                                     </li>
                                     <li>
-                                        <Link to="/faq">Faqs</Link>
+                                        <a href="/faq">Faqs</a>
                                     </li>
                                     <li>
                                         <a href="https://blog.wrenchboard.com/resources/">Resources</a>
                                     </li>
                                     <li>
-                                        <Link to="/privacy">Privacy Policy</Link>
+                                        <a href="/privacy">Privacy Policy</a>
                                     </li>
                                     <li>
-                                        <Link to="/terms">Terms of use</Link>
+                                        <a href="/terms">Terms of use</a>
                                     </li>
                                 </ul>
                             </div>

app/components/HeroHomeOne.js

@@ -1,20 +1,17 @@
 import React from 'react';
-import heroThumbOne from '../../assets/images/app-thumb-1.png';
 
-import heroThumbTwo from '../../assets/images/app-pic.png';
-import shapeTwo from '../../assets/images/shape/shape-2.png';
+import Image from 'next/image'
 
-import getConfig from './../../Config/config'
-import CustomSlider from '../customSlider/CustomSlider';
+import heroThumbTwo from '../assets/images/app-pic.png';
 
-// import SliderOne from '../../assets/images/home/app-slide-home-0.png'
+import CustomSlider from './customSlider/CustomSlider'
 
-import SliderOne from '../../assets/images/home/top_sliders/slide_1.png'
-import SliderTwo from '../../assets/images/home/top_sliders/slide_2.png'
-import SliderThree from '../../assets/images/home/top_sliders/slide_3.png'
-import SliderFour from '../../assets/images/home/top_sliders/slide_4.png'
-import SliderFive from '../../assets/images/home/top_sliders/slide_5.png'
-import SliderCenter from '../../assets/images/home/top_sliders/slide_33.png'
+import SliderOne from '../assets/images/home/top_sliders/slide_1.png'
+import SliderTwo from '../assets/images/home/top_sliders/slide_2.png'
+import SliderThree from '../assets/images/home/top_sliders/slide_3.png'
+import SliderFour from '../assets/images/home/top_sliders/slide_4.png'
+import SliderFive from '../assets/images/home/top_sliders/slide_5.png'
+import SliderCenter from '../assets/images/home/top_sliders/slide_33.png'
 
 
 function HeroHomeOne() {
@@ -76,7 +73,12 @@ function HeroHomeOne() {
                   data-wow-duration="2000ms"
                   data-wow-delay="600ms"
                 >
-                  <img src={heroThumbTwo} alt="" width="100%" height="100%" />
+                  <Image
+                    src={heroThumbTwo}
+                    width={'100%'}
+                    height={'100%'}
+                    alt="Image"
+                  />
                 </div>
               </div>
             </div>

app/components/HomeOne.js

@@ -4,12 +4,12 @@ import useToggle from '../Hooks/useToggle';
 import Drawer from '../Mobile/Drawer';
 // import BlogHomeOne from './BlogHomeOne';
 // import FeaturesHomeOne from './FeaturesHomeOne';
-// import FooterHomeOne from './FooterHomeOne';
-// import HeroHomeOne from './HeroHomeOne';
+import FooterHomeOne from './FooterHomeOne';
+import HeroHomeOne from './HeroHomeOne';
 // import HomeOneHeader from './HomeOneHeader';
 import ServicesHomeOne from './ServicesHomeOne';
-// import TrafficHomeOne from './TrafficHomeOne';
-// import TrafficHomeTwo from './TrafficHomeTwo';
+import TrafficHomeOne from './TrafficHomeOne';
+import TrafficHomeTwo from './TrafficHomeTwo';
 //import FeaturedScreen from './FeaturedScreen'; 
 import AfterHero from './AfterHero';
 import NextAfterHero from './NextAfterHero';
@@ -24,12 +24,14 @@ function HomeOne() {
     return (
         <>
           {/* <Drawer drawer={drawer} action={drawerAction.toggle} /> */}
-           <div>THIS IS HOME </div>
+           <div className='text-center'>THIS IS HOME </div>
+           <HeroHomeOne />
            <AfterHero />
            <NextAfterHero />
            <ServicesHomeOne />
-           {/* <FooterHomeOne /> */}
-
+           <TrafficHomeOne />
+           <TrafficHomeTwo />
+           <FooterHomeOne />
         </>
     );
 }

app/components/TrafficHomeOne.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import thumb from '../../assets/images/home-app-page.png';
+import Image from 'next/image';
+import thumb from '../assets/images/home-app-page.png';
 
 function TrafficHomeTwo() {
     return (
@@ -63,13 +64,22 @@ function TrafficHomeTwo() {
                 </div>
             </div>
             <div className="traffic-thumb ">
-                <img
+                {/* <img
                     className="wow animated fadeInRight"
                     data-wow-duration="2000ms"
                     data-wow-delay="200ms"
                     src={thumb}
                     alt=""
-                />
+                /> */}
+                <Image
+                    src={thumb}
+                    width={'100%'}
+                    height={'100%'}
+                    alt="Image"
+                    className="wow animated fadeInRight"
+                    data-wow-duration="2000ms"
+                    data-wow-delay="200ms"
+                  />
             </div>
         </section>
     );

app/components/TrafficHomeTwo.js

@@ -1,6 +1,7 @@
 import React from "react";
-import thumb from "../../assets/images/PerformingTask2.jpg";
+import thumb from "../assets/images/PerformingTask2.jpg";
 import getConfig from "./../../Config/config";
+import Image from "next/image";
 
 function TrafficHomeOne() {
   return (
@@ -37,8 +38,10 @@ function TrafficHomeOne() {
                 className="withFadeEdge position-absolute bg-transparent w-100 h-100"
                 style={{ zIndex: "1" }}
               ></div>
-              <img
+              <Image
                 className="position-relative wow animated fadeInRight p-1"
+                width={'100%'}
+                height={'100%'}
                 data-wow-duration="2000ms"
                 data-wow-delay="200ms"
                 src={thumb}

app/components/customSlider/CustomSlider.js

@@ -0,0 +1,91 @@
+"use client"
+import Image from "next/image";
+import React, { useEffect, useState } from "react";
+
+function CustomSlider({ images, speed, indicatorColor, indicatorClass }) {
+  let [sliderCount, setSliderCount] = useState(0);
+
+  const sliderStart = (count) => {
+    if (count + 1 && typeof count == "number") {
+      return setSliderCount(count);
+    }
+    if (sliderCount >= images.length - 1) {
+      return setSliderCount(0);
+    }
+    setSliderCount((prev) => prev + 1);
+  };
+
+  useEffect(() => {
+    const sliderInterval = setInterval(() => {
+      sliderStart();
+    }, speed * 1000);
+    return () => {
+      clearInterval(sliderInterval);
+    };
+  }, [sliderCount]);
+
+  return (
+    <div
+      className=""
+      style={{
+        width: "100%",
+        margin: "auto",
+        position: "relative",
+        overflow: "hidden",
+      }}
+    >
+      <div className="" style={{ width: "100%", display: "flex" }}>
+        {images.map((image, index) => (
+          <Image
+            key={index}
+            src={image}
+            width={'100%'}
+            height={'100%'}
+            alt="Screen Images"
+            style={{
+                width: "100%",
+                minWidth: "100%",
+                maxHeight: "695px",
+                height: "100%",
+                position: "relative",
+                transition: ".9s",
+                right: `${
+                  sliderCount == index ? sliderCount * 100 + "%" : "-100%"
+                }`,
+                opacity: `${sliderCount == index ? "1" : "0"}`,
+              }}
+            />
+        ))}
+      </div>
+      <div
+        className="custom_indicators"
+        style={{
+          margin: "10px auto",
+          display: "flex",
+          gap: "10px",
+          justifyContent: "center",
+        }}
+      >
+        {images.map((image, index) => (
+          <div
+            key={index}
+            onClick={() => sliderStart(index)}
+            className={`custom_indicator ${indicatorClass}`}
+            style={{
+              backgroundColor: `${
+                sliderCount == index ? `${indicatorColor}` : ""
+              }`,
+              width: "15px",
+              height: "15px",
+              borderRadius: "999px",
+              border: `1px solid ${indicatorColor}`,
+              cursor: "pointer",
+            }}
+          ></div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default CustomSlider;

app/page.tsx

@@ -12,7 +12,7 @@ import './assets/css/style.css';
 
 export default function Home() {
   return (
-    <main className={styles.main}>
+    <main className={''}>
       <HomeOne />
     </main>
   );