bug fixed

.env

@@ -0,0 +1,23 @@
+APP_PORT=9081
+ESLINT_NO_DEV_ERRORS=true
+
+NEXT_PUBLIC_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+NEXT_PUBLIC_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+
+NEXT_PUBLIC_SITE_NAME='WrenchBoard'
+NEXT_PUBLIC_DASH_URL='https://dev-users.wrenchboard.com'
+NEXT_PUBLIC_DASH_URL_LOGIN="https://dev-users.wrenchboard.com/login?cnt=us"
+NEXT_PUBLIC_DASH_URL_SIGNUP="https://dev-users.wrenchboard.com/signup?cnt=us"
+NEXT_PUBLIC_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
+NEXT_PUBLIC_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
+NEXT_PUBLIC_FACEBOOK_LINK='https://www.facebook.com/wrenchboard'
+NEXT_PUBLIC_TWITTER_LINK='https://twitter.com/wrenchboard/'
+NEXT_PUBLIC_LINKEDIN_LINK="https://www.linkedin.com/company/wrenchboard/"
+NEXT_PUBLIC_SUPPORT_EMAIL='support@wrenchboard.com'
+NEXT_PUBLIC_SUPPORT_PHONE='404 855-7966'
+NEXT_PUBLIC_SUPPORT_PHONE_NG='(+420) 336 476 328'
+NEXT_PUBLIC_SUPPORT_US_ADDRESS='Cumberland Pkwy, Atlanta GA 30339'
+NEXT_PUBLIC_SUPPORT_NG_ADDRESS='Saka Tinubu Street, Victoria Island Lagos, Nigeria'
+
+#AGENT LINK
+NEXT_PUBLIC_AGENT_LINK='https://dev-agents.wrenchboard.com'

.env.development

@@ -0,0 +1,23 @@
+APP_PORT=9081
+ESLINT_NO_DEV_ERRORS=true
+
+NEXT_PUBLIC_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+NEXT_PUBLIC_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+
+NEXT_PUBLIC_SITE_NAME='WrenchBoard'
+NEXT_PUBLIC_DASH_URL='https://dev-users.wrenchboard.com'
+NEXT_PUBLIC_DASH_URL_LOGIN="https://dev-users.wrenchboard.com/login?cnt=us"
+NEXT_PUBLIC_DASH_URL_SIGNUP="https://dev-users.wrenchboard.com/signup?cnt=us"
+NEXT_PUBLIC_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
+NEXT_PUBLIC_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
+NEXT_PUBLIC_FACEBOOK_LINK='https://www.facebook.com/wrenchboard'
+NEXT_PUBLIC_TWITTER_LINK='https://twitter.com/wrenchboard/'
+NEXT_PUBLIC_LINKEDIN_LINK="https://www.linkedin.com/company/wrenchboard/"
+NEXT_PUBLIC_SUPPORT_EMAIL='support@wrenchboard.com'
+NEXT_PUBLIC_SUPPORT_PHONE='404 855-7966'
+NEXT_PUBLIC_SUPPORT_PHONE_NG='(+420) 336 476 328'
+NEXT_PUBLIC_SUPPORT_US_ADDRESS='Cumberland Pkwy, Atlanta GA 30339'
+NEXT_PUBLIC_SUPPORT_NG_ADDRESS='Saka Tinubu Street, Victoria Island Lagos, Nigeria'
+
+#AGENT LINK
+NEXT_PUBLIC_AGENT_LINK='https://dev-agents.wrenchboard.com'

.env.production

@@ -0,0 +1,23 @@
+APP_PORT=9081
+ESLINT_NO_DEV_ERRORS=true
+
+NEXT_PUBLIC_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+NEXT_PUBLIC_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+
+NEXT_PUBLIC_SITE_NAME='WrenchBoard'
+NEXT_PUBLIC_DASH_URL='https://users.wrenchboard.com'
+NEXT_PUBLIC_DASH_URL_LOGIN="https://users.wrenchboard.com/login?cnt=us"
+NEXT_PUBLIC_DASH_URL_SIGNUP="https://users.wrenchboard.com/signup?cnt=us"
+NEXT_PUBLIC_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
+NEXT_PUBLIC_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
+NEXT_PUBLIC_FACEBOOK_LINK='https://www.facebook.com/wrenchboard'
+NEXT_PUBLIC_TWITTER_LINK='https://twitter.com/wrenchboard/'
+NEXT_PUBLIC_LINKEDIN_LINK="https://www.linkedin.com/company/wrenchboard/"
+NEXT_PUBLIC_SUPPORT_EMAIL='support@wrenchboard.com'
+NEXT_PUBLIC_SUPPORT_PHONE='404 855-7966'
+NEXT_PUBLIC_SUPPORT_PHONE_NG='(+420) 336 476 328'
+NEXT_PUBLIC_SUPPORT_US_ADDRESS='Cumberland Pkwy, Atlanta GA 30339'
+NEXT_PUBLIC_SUPPORT_NG_ADDRESS='Saka Tinubu Street, Victoria Island Lagos, Nigeria'
+
+#AGENT LINK
+NEXT_PUBLIC_AGENT_LINK='https://agents.wrenchboard.com'

FeaturedScreenTwo.js

@@ -0,0 +1,145 @@
+"use client"
+import React, {useState} from 'react'
+import Carousel from 'react-simply-carousel';
+import Image from 'next/image'
+
+export default function FeaturedScreenTwo() {
+    const [activeSlide, setActiveSlide] = useState(0);
+    const handleSlideIndexChange = () => {
+        setActiveSlideIndex(2)
+    }
+    
+    return (
+        <div className='carousel pt-5'>
+          <Carousel
+            activeSlideIndex={activeSlide}
+            onRequestChange={setActiveSlide}
+            itemsToShow={1}
+            itemsToScroll={1}
+            infinite={true}
+            autoplay={true}
+            // delay={3000}
+            autoplayDelay={5000}
+            speed={3000}
+            easing="linear"
+            centerMode
+            preventScrollOnSwipe
+            swipeTreshold={60}
+            updateOnItemClick={true}
+            activeSlideProps={{
+                style: {
+                  transform: 'scale(1)'
+                }
+              }}
+            containerProps={{
+                style: {
+                    width: "100%",
+                    justifyContent: "space-between",
+                    userSelect: "none"
+                }
+            }}
+            forwardBtnProps={{
+              //here you can also pass className, or any other button element attributes
+              style: {
+                alignSelf: 'center',
+                background: 'black',
+                border: 'none',
+                borderRadius: '50%',
+                color: 'white',
+                cursor: 'pointer',
+                fontSize: '20px',
+                height: 30,
+                lineHeight: 1,
+                textAlign: 'center',
+                width: 30,
+                display: 'none'
+              },
+              children: <span>{`>`}</span>,
+            }}
+            backwardBtnProps={{
+              //here you can also pass className, or any other button element attributes
+              style: {
+                alignSelf: 'center',
+                background: 'black',
+                border: 'none',
+                borderRadius: '50%',
+                color: 'white',
+                cursor: 'pointer',
+                fontSize: '20px',
+                height: 30,
+                lineHeight: 1,
+                textAlign: 'center',
+                width: 30,
+                display: 'none'
+              },
+              children: <span>{`<`}</span>,
+            }}
+            dotsNav={{
+                show: true,
+                itemBtnProps: {
+                    style: {
+                    height: 16,
+                    width: 16,
+                    borderRadius: "50%",
+                    border: 0
+                    }
+                },
+                activeItemBtnProps: {
+                    style: {
+                    height: 16,
+                    width: 16,
+                    borderRadius: "50%",
+                    border: 0,
+                    background: "black"
+                    }
+                }
+            }}
+            responsiveProps={[
+                {
+                itemsToShow: 1,
+                itemsToScroll: 1,
+                minWidth: 0,
+              },
+              {
+                itemsToShow: 3,
+                itemsToScroll: 1,
+                minWidth: 568,
+              },
+              {
+                itemsToShow: 5,
+                itemsToScroll: 1,
+                minWidth: 992,
+              },
+              {
+                itemsToShow: 7,
+                itemsToScroll: 1,
+                minWidth: 1440,
+              },
+            ]}
+          >
+            {/* here you can also pass any other element attributes. Also, you can use your custom components as slides */}
+            <div className='slider' style={{ background: 'transparent' }}>
+              <img src={'/assets/images/slider/app_sliders/screen_1.png'} alt="image" />
+            </div>
+            <div className='slider' style={{ background: 'transparent' }}>
+              <img src={'/assets/images/slider/app_sliders/screen_2.png'} alt="image" />
+            </div>
+            <div className='slider' style={{ background: 'transparent' }}>
+              <img src={'/assets/images/slider/app_sliders/screen_3.png'} alt="image" />
+            </div>
+            <div className='slider' style={{ background: 'transparent' }}>
+              <img src={'/assets/images/slider/app_sliders/screen_6.png'} alt="image" />
+            </div>
+            <div className='slider' style={{ background: 'transparent' }}>
+              <img src={'/assets/images/slider/app_sliders/screen_4.png'} alt="image" />
+            </div>
+            <div className='slider' style={{ background: 'transparent' }}>
+              <img src={'/assets/images/slider/app_sliders/screen_7.png'} alt="image" />
+            </div>
+            <div className='slider' style={{ background: 'transparent' }}>
+              <img src={'/assets/images/slider/app_sliders/screen_5.png'} alt="image" />
+            </div>
+          </Carousel>
+        </div>
+      );
+}

app/Mobile/Drawer.js

@@ -1,6 +1,7 @@
 import logo from '../assets/images/wrenchboard-logo-text.png';
 import getConfig from  "../../Config/config"; // './../../Config/config'
 import Image from 'next/image';
+import Link from 'next/link'
 
 
 function Drawer({ drawer, action }) {
@@ -32,7 +33,7 @@ function Drawer({ drawer, action }) {
                                             className="menu-item-has-children active"
                                         >
                                           
-                                            <a href="/">Home</a>
+                                            <Link href="/">Home</Link>
                                             
                                         </li>
                                         <li
@@ -40,10 +41,10 @@ function Drawer({ drawer, action }) {
                                             id="service"
                                             className="menu-item-has-children active"
                                         >
-                                            <a href="/service">Service</a>
+                                            <Link href="/service">Service</Link>
                                         </li>
                                         <li>
-                                                    <a href="/about-us">About Us</a>
+                                                    <Link href="/about-us">About Us</Link>
                                                 </li>
 
                                         
@@ -53,14 +54,14 @@ function Drawer({ drawer, action }) {
                                             id="contact"
                                             className="menu-item-has-children active"
                                         >
-                                            <a href="/contact">Contact</a>
+                                            <Link href="/contact">Contact</Link>
                                         </li>
                                     </ul>
                                 </div>
                                 <div className="offcanvas-social">
                                     <ul className="text-center">
                                         <li>
-                                            <a href={process.env.REACT_APP_FACEBOOK_LINK} >
+                                            <a href={process.env.NEXT_PUBLIC_FACEBOOK_LINK} >
                                                 <i className="fab fa-facebook-f"></i>
                                             </a>
                                         </li>
@@ -77,12 +78,12 @@ function Drawer({ drawer, action }) {
                                         <li>
                                             <a href="#">
                                                 <i className="fal fa-envelope"></i>{' '}
-                                               {process.env.REACT_APP_SUPPORT_EMAIL}
+                                               {process.env.NEXT_PUBLIC_SUPPORT_EMAIL}
                                             </a>
                                         </li>
                                         <li>
                                             <a href="#">
-                                                <i className="fal fa-phone"></i> {process.env.REACT_APP_SUPPORT_PHONE}
+                                                <i className="fal fa-phone"></i> {process.env.NEXT_PUBLIC_SUPPORT_PHONE}
                                             </a>
                                         </li>
                                         <li>

app/Services/BlogData.js

@@ -1,8 +1,7 @@
 import Axios from 'axios';
 
 async function BlogData() {
-    // let response = await Axios.post(`${process.env.REACT_APP_AUX_ENDPOINT}/blogdata`);
-    let response = await Axios.post(`${'https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1'}/blogdata`);
+    let response = await Axios.post(`${process.env.NEXT_PUBLIC_AUX_ENDPOINT}/blogdata`);
     return await response;
 }
 

app/Services/ContactData.js

@@ -5,7 +5,7 @@ async function ContactData(reqData) {
     for (let value in reqData) {
         formData.append(value, reqData[value]);
       }
-    let response = await axios.post(`${process.env.REACT_APP_AUX_ENDPOINT}/sitecontact`, reqData);
+    let response = await axios.post(`${process.env.NEXT_PUBLIC_AUX_ENDPOINT}/sitecontact`, reqData);
     return response;
 }
 

app/Services/FaqData.js

@@ -1,10 +1,7 @@
 import Axios from 'axios';
-import getConfig from './../Config/config'
 
 async function FaqData() {
-    // debugger;
-    var site = getConfig()[0];
-    let response = await Axios.post(`${process.env.REACT_APP_AUX_ENDPOINT}/faq`);
+    let response = await Axios.post(`${process.env.NEXT_PUBLIC_AUX_ENDPOINT}/faq`);
     return await response;
 }
 

app/Services/JobsData.js

@@ -1,8 +1,7 @@
 import Axios from 'axios';
-import getConfig from './../Config/config'
 
 async function JobsData() {
-    var site = getConfig()[0];
+
     var callData = [{
         "limit": 10,
         "page": 1
@@ -16,7 +15,7 @@ async function JobsData() {
         });
     }
 */
-    let response = await Axios.post(process.env.REACT_APP_AUX_ENDPOINT+'/startjoblist', callData);
+    let response = await Axios.post(process.env.NEXT_PUBLIC_AUX_ENDPOINT+'/startjoblist', callData);
     return await response;
 }
 

app/Services/UseCaseData.js

@@ -5,7 +5,7 @@ import Axios from 'axios';
 
 function UseCaseData() {
 
-    console.log("~~~~~~~~ ameye 009 ~~~~~~~~~");
+    // console.log("~~~~~~~~ ameye 009 ~~~~~~~~~");
 var res = null;
    const getWrenchBoardBlog = () => {
         Axios.get("http://10.0.0.52:5101/wp/wrenchboard/", {
@@ -19,7 +19,7 @@ var res = null;
           }).then((response) => {
            console.log(response);
            res = response;
-           console.log("~~~~~~~~ ameye ~~~~~~~~~");
+        //    console.log("~~~~~~~~ ameye ~~~~~~~~~");
            return response;
           // console.log(blogResultData);
         });

app/about-us/AboutText.js

@@ -33,7 +33,7 @@ function AboutTextComponent() {
         <div className="row">
           <div className="row">
             {servicesContent?.map(({ id, ...item }) => (
-              <div className="col-lg-3 col-md-6">
+              <div key={id} className="col-lg-3 col-md-6">
                 <ServiceItem index={id} {...item} />
               </div>
             ))}

app/about-us/HeaderAbout.js

@@ -4,6 +4,7 @@ import StickyMenu from '../../lib/StickyMenu';
 import Navigation from '../Navigation';
 import getConfig from './../../Config/config'
 import { Link } from 'react-router-dom';
+import Image from 'next/image';
 
 function HeaderAbout({ action }) {
     useEffect(() => {
@@ -20,7 +21,7 @@ function HeaderAbout({ action }) {
                             <div className="col-lg-2 col-md-4 col-sm-5 col-6 order-1 order-sm-1">
                                 <div className="appie-logo-box">
                                     <Link to="/">
-                                        <img src={logo} alt="" width="175px" height="38px" loading='eager' />
+                                        <Image src={logo} alt="" width="175px" height="38px" loading='eager' />
                                     </Link>
                                 </div>
                             </div>

app/about-us/HeroAbout.js

@@ -20,7 +20,7 @@ function HeroAbout() {
                       We Empower Reward for Achievements
                       </h3>
                       <p>
-                        WrenchBoard is the platform for planning and rewarding accomplishments for individuals and parents. Parents can set up family accounts to oversee their children's activities and earnings.
+                        WrenchBoard is the platform for planning and rewarding accomplishments for individuals and parents. Parents can set up family accounts to oversee their children&#39;s activities and earnings.
                       </p>
                       <p>
                         At WrenchBoard, we believe in the power of motivating through rewards. As children complete projects, tasks, or chores and earn rewards, children also gain financial, time management, and valuable execution skills that enhance the joy of personal growth.

app/about-us/TeamAbout.js

@@ -3,6 +3,7 @@ import team1 from '../../assets/images/team-1.jpg';
 import team2 from '../../assets/images/team-2.jpg';
 import team3 from '../../assets/images/team-3.jpg';
 import team4 from '../../assets/images/team-4.jpg';
+import Image from 'next/image';
 
 function TeamAbout() {
     return (
@@ -25,7 +26,7 @@ function TeamAbout() {
                                 data-wow-delay="200ms"
                             >
                                 <div className="thumb">
-                                    <img src={team1} alt="" />
+                                    <Image width='100' height='100' src={team1} alt="" />
                                     <ul>
                                         <li>
                                             <a href="#">
@@ -57,7 +58,7 @@ function TeamAbout() {
                                 data-wow-delay="400ms"
                             >
                                 <div className="thumb">
-                                    <img src={team2} alt="" />
+                                    <Image width='100' height='100' src={team2} alt="" />
                                     <ul>
                                         <li>
                                             <a href="#">
@@ -89,7 +90,7 @@ function TeamAbout() {
                                 data-wow-delay="600ms"
                             >
                                 <div className="thumb">
-                                    <img src={team3} alt="" />
+                                    <Image width='100' height='100' src={team3} alt="" />
                                     <ul>
                                         <li>
                                             <a href="#">
@@ -121,7 +122,7 @@ function TeamAbout() {
                                 data-wow-delay="800ms"
                             >
                                 <div className="thumb">
-                                    <img src={team4} alt="" />
+                                    <Image width='100' height='100' src={team4} alt="" />
                                     <ul>
                                         <li>
                                             <a href="#">

app/assets/css/font-awesome.min.css

@@ -5633,7 +5633,7 @@ readers do not read off random characters that represent icons */
   content: "\f099"; }
 
 .fa-x-twitter:before {
-  content: "\e61b"; }
+  content: "𝕏"; }
 
 .fa-twitter-square:before {
   content: "\f081"; }

app/assets/css/main.css

@@ -49,6 +49,10 @@ span,
 a {
   display: inline-block;
   transition: all linear 0.3s;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: none !important;
 }
 
 h1,
@@ -58,7 +62,7 @@ h4,
 h5,
 h6 {
   font-family: "Roboto", sans-serif;
-  font-weight: 900;
+  font-weight: 900 !important;
   color: #0e1133;
   margin: 0px;
 }
@@ -185,7 +189,7 @@ p {
 }
 
 .appie-section-title {
-  padding-bottom: 25px;
+  padding-bottom: 15px;
 }
 .appie-section-title .appie-title {
   font-size: 44px;
@@ -2042,7 +2046,7 @@ p {
   right: -30px;
   top: 50%;
   transform: translateY(-50%);
-  box-shadow: 0px 30px 70px 0px rgba(68, 1, 15, 0.2);
+  /* box-shadow: 0px 30px 70px 0px rgba(68, 1, 15, 0.2); */
 }
 .appie-hero-thumb::before {
   position: absolute;
@@ -6113,7 +6117,7 @@ blockquote cite {
   padding-top: 250px;
   width: 100%;
   min-height: 100vh;
-  background: url("../images//wrench-page-notfound.jpg") center/cover;
+  background: url(/assets//images/wrench-page-notfound.jpg) center/cover;
   position: relative;
   /* z-index: 1; */
 }
@@ -6729,7 +6733,7 @@ blockquote cite {
 }
 
 .appie-about-8-area {
-  /* background-image: url(../images/background-bg.jpg); */
+  background-image: url(/assets/images/background-bg.jpg);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -6748,12 +6752,12 @@ blockquote cite {
 }
 
 .appie-about-8-box {
-  padding: 50px 50px 0px 50px;
+  padding: 50px;
   z-index: 10;
 }
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
   .appie-about-8-box {
-    padding: 50px 25px 0px 25px;
+    padding: 25px;
   }
 }
 @media only screen and (min-width: 768px) and (max-width: 991px) {
@@ -8635,8 +8639,7 @@ LND PAGE STYLE STARTS HERE
 }
 
 
-/* -----------Interface_Section-Css-Start----------------- */
-
+/* -----------Interface_Section-Css-Start FOR HOME IMAGE SLIDERS ----------------- */
 /* interface wraper */
 .interface_section .screen_slider {
   margin-top: 35px;
@@ -8660,4 +8663,14 @@ LND PAGE STYLE STARTS HERE
   transform: scale(1);
   /* border: 3px solid #000; */
   /* padding: 5px; */
+}
+
+.carousel .slider {
+  height: auto !important;
+  width: 300px !important;
+  transform: scale(.9);
+}
+
+.carousel div {
+  gap: 5px !important;
 }

app/assets/images/home/001-reward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64" id="reward"><defs><linearGradient id="b" x1="11.249" x2="57.751" y1="24.596" y2="24.596" gradientUnits="userSpaceOnUse"><stop offset=".102" stop-color="#f8d751"></stop><stop offset=".996" stop-color="#f5aa42"></stop></linearGradient><linearGradient id="a" x1="55.079" x2="40.704" y1="58.21" y2="37.085" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f8d751"></stop><stop offset=".505" stop-color="#f49500"></stop><stop offset=".991" stop-color="#f25d00"></stop></linearGradient><linearGradient id="c" x1="15.235" x2="24.485" y1="57.382" y2="39.632" xlink:href="#a"></linearGradient><linearGradient id="d" x1="19.567" x2="49.434" y1="24.59" y2="24.59" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"></stop><stop offset="1" stop-color="#f1f2f2"></stop></linearGradient></defs><path fill="url(#b)" d="M48.846,39.04l-3.411.6-3.752,7.07-.711-.35L34.5,43.193l-7.183,3.514-.093-.175-3.659-6.895-4.72-.824-3.154-.557,1.124-7.915L11.249,24.59l5.566-5.75-1.124-7.915,7.874-1.382,3.752-7.059,7.183,3.5,7.183-3.5,3.752,7.059,7.874,1.382L52.185,18.84l5.566,5.75-5.566,5.751,1.124,7.915Z"></path><polygon fill="url(#a)" points="41.683 46.707 45.435 39.637 48.846 39.04 59.688 55.777 53.329 55.55 50.238 61.105 40.921 46.47 40.972 46.357 41.683 46.707"></polygon><polygon fill="url(#c)" points="23.565 39.637 27.224 46.532 18.711 62.012 15.671 56.426 9.312 56.591 18.763 39.256 18.845 38.813 23.565 39.637"></polygon><circle cx="34.5" cy="24.59" r="14.934" fill="url(#d)"></circle></svg>

app/assets/images/home/002-task.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 128 128" viewBox="0 0 128 128" id="task"><g><circle cx="64" cy="64" r="63.5" fill="#FFD05B"></circle><path fill="#FFF" d="M47.2,22.7v10.3c0,3.4-2.8,6.2-6.2,6.2H30.7v59.8c0,3.4,2.8,6.2,6.2,6.2h54.2c3.4,0,6.2-2.8,6.2-6.2V28.9   c0-3.4-2.8-6.2-6.2-6.2H47.2z"></path><path fill="#E6E9EE" d="M47.2,22.7L30.7,39.3H41c3.4,0,6.2-2.8,6.2-6.2V22.7z"></path><g><path fill="#84DBFF" d="M47.4 47.3h-8.3c-.5 0-1 .4-1 1v8.3c0 .5.4 1 1 1h8.3c.5 0 1-.4 1-1v-8.3C48.4 47.8 47.9 47.3 47.4 47.3zM46.4 55.6h-6.3v-6.3h6.3V55.6zM47.4 64.7h-8.3c-.5 0-1 .4-1 1V74c0 .5.4 1 1 1h8.3c.5 0 1-.4 1-1v-8.3C48.4 65.2 47.9 64.7 47.4 64.7zM46.4 73h-6.3v-6.3h6.3V73zM47.4 82.1h-8.3c-.5 0-1 .4-1 1v8.3c0 .5.4 1 1 1h8.3c.5 0 1-.4 1-1v-8.3C48.4 82.6 47.9 82.1 47.4 82.1zM46.4 90.4h-6.3v-6.3h6.3V90.4z"></path></g><circle cx="82.1" cy="69.4" r="21.1" fill="#FF7058"></circle><g><path fill="#FFF" d="M78.8,81.1c-0.6-0.1-1.2-0.5-1.6-1l-5-6.5c-0.9-1.1-0.7-2.8,0.5-3.7c1.1-0.9,2.8-0.7,3.7,0.5l2.8,3.6    L88.8,60c0.8-1.2,2.4-1.5,3.6-0.7c1.2,0.8,1.5,2.5,0.7,3.6L81.5,80c-0.5,0.7-1.3,1.1-2.1,1.1C79.2,81.2,79,81.2,78.8,81.1z"></path></g></g></svg>

app/blog/blogdetail/Blog.jsx

@@ -0,0 +1,64 @@
+import singlePost from "../../assets/images/single-post/1.jpg";
+import { BlogLoader, ImageLoader } from "../../lib/SkeletonLoaders";
+import Image from "next/image";
+// import LazyImage from "../../lib/LazyImage";
+
+/**
+ * Renders a blog post component.
+ * @returns {JSX.Element} The rendered blog post component.
+ */
+function Blog({ blogItem, imgUrl, loader }) {
+  // Generate a unique ID
+  const uniqueId = `element_${Math.random().toString(36).substr(2, 9)}`;
+
+  const blogImg = `${imgUrl}/${blogItem?.meta_value || singlePost}`;
+
+  const imgLoaderStyles = {
+    "--loader-width": "750px",
+    "--loader-height": "550px",
+  };
+
+  const headerLoaderStyles = {
+    "--text-container-width": "300px",
+    "--text-container-height": "18px",
+  };
+
+  const bodyTextLoaderStyles = {
+    "--text-container-width": "770px",
+    "--text-container-height": "15px",
+  };
+
+  return (
+    <>
+      <div className="single-post-area">
+        <div className="post-thumb" style={{ marginTop: "0" }}>
+          {loader ? (
+            <div style={imgLoaderStyles}>
+              <ImageLoader />
+            </div>
+          ) : (
+            <img src={blogImg} alt={blogItem?.meta_value || "single-post.jpg"} key={uniqueId} />
+          )}
+        </div>
+        {loader ? (
+          <div style={headerLoaderStyles}>
+            <BlogLoader />
+          </div>
+        ) : (
+          <h4 className="article-title">{blogItem?.post_title}</h4>
+        )}
+        {loader ? (
+          <div style={bodyTextLoaderStyles}>
+            <BlogLoader />
+          </div>
+        ) : (
+          <div
+            dangerouslySetInnerHTML={{ __html: blogItem?.post_content }}
+          ></div>
+        )}
+      </div>
+    </>
+  );
+}
+
+export default Blog;

app/blog/blogdetail/BlogSideBar.js

@@ -0,0 +1,69 @@
+import React from "react";
+import Link from "next/link";
+import BlogImg1 from "../../assets/images/blog/p1.jpg";
+
+/**
+ * Renders a sidebar for a blog.
+ * @param {Object} blogs - An object containing the data for the blog posts.
+ * @returns {JSX.Element} - JSX code that renders the blog sidebar.
+ */
+function BlogSideBar({ blogs }) {
+  /**
+   * Renders other blog posts.
+   * This is an Array of JSX elements representing the other blog posts.
+   */
+  const renderOtherBlogPosts = () => {
+    return blogs?.blogdata?.slice(0, 4).map((post) => {
+      const blogDate = new Date(post.post_date).toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+      });
+
+      const blogImg =
+        post.meta_value != null
+          ? `${blogs?.image_url}/${post.meta_value}`
+          : BlogImg1;
+
+      return (
+        <div className="popular-post" key={post.id}>
+          <Link href={`/blog/blogdetail/${post?.id}`}>
+            <img width='auto' height='auto' src={blogImg} alt="blog-img" style={{top: "20px"}} loading="lazy" />
+          </Link>
+          <h5>
+            <Link href={`/blog/blogdetail/${post?.id}`}>{post?.post_title}</Link>
+          </h5>
+          <span>{blogDate}</span>
+        </div>
+      );
+    });
+  };
+
+  return (
+    <div className="blog-sidebar">
+      <aside className="widget widget-categories">
+        {/*<h3 className="widget-title">Categories</h3>*/}
+        <ul>
+          <li>
+            <Link href="/about-us">About</Link>
+          </li>
+          <li>
+            <a href={process.env.NEXT_PUBLIC_DASH_URL_SIGNUP}>Sign up</a>
+          </li>
+          <li>
+            <a href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>Login</a>
+          </li>
+          <li>
+            <a href="https://blog.wrenchboard.com/">More Articles</a>
+          </li>
+        </ul>
+      </aside>
+      <aside className="widget widget-trend-post">
+        <h3 className="widget-title">Other Posts</h3>
+        {renderOtherBlogPosts()}
+      </aside>
+    </div>
+  );
+}
+
+export default BlogSideBar;

app/blog/blogdetail/[id]/page.js

@@ -0,0 +1,84 @@
+"use client"
+import React, { useEffect, useMemo, useState } from 'react'
+import { useParams } from 'next/navigation';
+import ServiceNav from '@/app/components/navigation/ServiceNav';
+import HeroNews from '@/app/components/News/HeroNews';
+import FooterHomeOne from '../../../components/FooterHomeOne';
+import BackToTop from '@/app/components/BackToTop';
+import BlogData from '@/app/Services/BlogData';
+
+import Blog from '../Blog'
+import BlogSideBar from '../BlogSideBar'
+
+// must be a better way to centralize the style = TEMPORARY USE 
+import '../../../assets/css/bootstrap.min.css';
+import '../../../assets/css/custom-animated.css';
+import '../../../assets/css/default.css';
+import '../../../assets/css/font-awesome.min.css';
+import '../../../assets/css/magnific-popup.css';
+import '../../../assets/css/main.css';
+import '../../../assets/css/style.css';
+
+
+function Page() {
+    const [isLoading, setIsLoading] = useState(false);
+    const [blogs, setBlogs] = useState([]);
+    const { id } = useParams();
+  
+    useEffect(() => {
+      const fetchBlogs = async () => {
+        setIsLoading(true);
+        try {
+          const res = await BlogData();
+          setBlogs(res.data);
+          setIsLoading(false)
+        } catch (err) {
+          console.log("Error loading blogdata", err);
+          setIsLoading(false)
+        }
+      };
+  
+      fetchBlogs();
+    }, []);
+  
+    const blogItem = useMemo(() => {
+      return blogs?.blogdata?.find((item) => item.id == id);
+    }, [blogs, id]);
+  return (
+    <>
+      <ServiceNav />
+
+      {/* Renders the hero section */}
+      <HeroNews
+        title="Blog"
+        breadcrumb={[
+          { link: "/", title: "Home" },
+          { link: "/blog", title: "Blogs" },
+          {
+            link: `/blog/blogdetail/${id}`,
+            title: isLoading ? "please wait..." : blogItem ? blogItem.post_title : "Post not found",
+          },
+        ]}
+      />
+
+      {/* Renders the blog content and sidebar */}
+      <section className="blogpage-section">
+        <div className="container">
+          <div className="row">
+            <div className="col-lg-8 col-md-7">
+              <Blog blogItem={blogItem} imgUrl={blogs?.image_url} loader={isLoading} />
+            </div>
+            <div className="col-lg-4 col-md-5">
+              <BlogSideBar blogs={blogs} />
+            </div>
+          </div>
+        </div>
+      </section>
+      <FooterHomeOne className='' />
+      <BackToTop className='' />
+    </>
+   
+  )
+}
+
+export default Page

app/blog/blogdetail/page.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import FooterHomeOne from '../../components/FooterHomeOne';
-
-// must be a better way to centralize the style = TEMPORARY USE 
-import '../../assets/css/bootstrap.min.css';
-import '../../assets/css/custom-animated.css';
-import '../../assets/css/default.css';
-import '../../assets/css/font-awesome.min.css';
-import '../../assets/css/magnific-popup.css';
-import '../../assets/css/main.css';
-import '../../assets/css/style.css';
-
-
-function page() {
-  return (
-    <> 
-    <div>Bog Detail Here</div>
-    <FooterHomeOne className={undefined} />
-    </>
-   
-  )
-}
-
-export default page

app/blog/page.tsx

@@ -1,5 +1,9 @@
 import React from 'react'
 import FooterHomeOne from '../components/FooterHomeOne';
+import HeroNews from '../components/News/HeroNews';
+import BackToTop from '../components/BackToTop';
+import ServiceNav from '../components/navigation/ServiceNav';
+import Blogs from '../components/News/Blogs';
 
 // must be a better way to centralize the style = TEMPORARY USE 
 import '../assets/css/bootstrap.min.css';
@@ -14,8 +18,25 @@ import '../assets/css/style.css';
 function page() {
   return (
     <> 
-    <div>Bog Here</div>
-    <FooterHomeOne className={undefined} />
+         <ServiceNav />
+        <HeroNews
+          title="Blogs"
+          breadcrumb={[
+            { link: "/", title: "Home" },
+            { link: "/blog", title: "Blogs" },
+          ]}
+        />
+        <section className="blogpage-section">
+          <div className="container">
+            <div className="row">
+              <div className="col-12">
+                <Blogs pathname='/blog' />
+              </div>
+            </div>
+          </div>
+        </section>
+        <FooterHomeOne className='' />
+        <BackToTop className='' />
     </>
    
   )

app/components/AboutApp.js

@@ -0,0 +1,55 @@
+import React from 'react'
+import frame from '../assets/images/use-case-side-main.png'; //about-frame.png'
+import screen from '../assets/images/use-case-side-extra.png'; //about-screen.png'
+import Image from 'next/image';
+
+const AboutApp = ({ video, dark }) => {
+  return (
+    <>
+      <section className="row_am about_app_section _">
+        <div className="container">
+          <div className="row modern_ui_section">
+            <div className="col-lg-6">
+              <div className="about_img" data-aos="fade-in" data-aos-duration="1500">
+                <div className="frame_img">
+                  <Image width='100%' height='auto' className="w-100 moving_position_animatin" src={frame} alt="image" />
+                </div>
+                <div className="screen_img">
+                  <Image width='100%' height='auto' className="w-100 moving_animation" src={screen} alt="image" />
+                </div>
+              </div>
+            </div>
+            <div className="col-lg-6">
+              <div className="about_text">
+                <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
+                  <h2>Motivate & Organize <br /> <span>Rewards</span></h2>
+                  <p>
+                    With a planned reward, the parent can introduce the family to earning and start financial education early.
+                  </p>
+                </div>
+
+
+                <ul className="design_block">
+                  <li data-aos="fade-up" data-aos-duration="1500">
+                    <h4>Goals Completed</h4>
+                    <p>Motivate with rewards for goals completed, passing the exam, finishing chores, and learning new skills. </p>
+                  </li>
+                  <li data-aos="fade-up" data-aos-duration="1500">
+                    <h4>Connect Family</h4>
+                    <p>It takes a village to raise a kid and share good news and encouragement from the more prominent family. Connect family to the achievements to boost encouragement. </p>
+                  </li>
+                  <li data-aos="fade-up" data-aos-duration="1500">
+                    <h4>Find any Task </h4>
+                    <p>Make more, connect to the marketplace, and earn from appropriate tasks.</p>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  )
+}
+
+export default AboutApp

app/components/AfterHero.js

@@ -1,17 +1,18 @@
 import React from 'react';
-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';
 
+import cardImg from '../assets/images/home/wrench-card-only.png'
+import wrenchAgent from '../assets/images/home/wrench-agent.png'
+// import bg from '../assets/images/background-bg.jpg'
+
 function AfterHero() {
     return (
         <>
-            <section className="appie-about-8-area pt-50 pb-70" style={{ backgroundImage: `url(${bg.src})`, backgroundSize: 'cover' }}>
+            <section className="appie-about-8-area pt-50 pb-70">
                 <div className="container">
                     <div className="row">
                         <div className="col-lg-12">
-                            <div className="appie-section-title mb-30">
+                            <div className="appie-section-title">
                                 <h3 className="appie-title">
                                     {/* We bring everything <br />
                                     that's required to build apps */}
@@ -23,23 +24,24 @@ function AfterHero() {
                     <div className="row">
                         <div className="col-lg-7 mb-3 mb-lg-0">
                             <div className='appie-about-container'>
-                                <div className="appie-about-8-box">
-                                    <h3 className="title">
-                                        Reward Accomplishments
-                                    </h3>
-                                    <p>
-                                        Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform to plan rewards off pick your nose and blow
-                                    </p>
-                                </div>
-                                <div className='row'>
-                                    <div className='col-12 col-sm-4 order-2 order-sm-1 align-self-end'>
-                                        <a className="m-1 main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
-                                            Learn More <i className="fal fa-arrow-right" />
-                                        </a>
+                                <div className='row appie-about-8-box'>
+                                    <div className="col-12 col-md-6">
+                                        <h3 className="title">
+                                            Reward Accomplishments
+                                        </h3>
+                                        <p>
+                                            Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform to plan rewards off pick your nose and blow
+                                        </p>
+                                        <div className=''>
+                                            <a className="mb-5 mb-md-0 main-btn" href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>
+                                                Learn More <i className="fal fa-arrow-right" />
+                                            </a>
+                                        </div>
                                     </div>
-                                    <div className="col-12 col-sm-8 order-1 order-sm-2">
+                                    <div className="col-12 col-md-6">
                                         <Image
                                             src={cardImg}
+                                            className='w-100 h-100'
                                             width={'100%'}
                                             height={'100%'}
                                             alt="" 
@@ -50,24 +52,27 @@ function AfterHero() {
                         </div>
                         <div className="col-lg-5">
                             <div className='appie-about-container'>
-                                <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>
-                                </div>
-                                <div className='row'>
-                                    <div className='col-12 col-sm-4 order-2 order-sm-1 align-self-end'>
-                                        <a className="m-1 main-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
-                                            Learn More <i className="fal fa-arrow-right" />
-                                        </a>
+                                <div className='h-100 row appie-about-8-box'>
+                                    <div className="col-12 col-md-6">
+                                        <div className='h-100 d-flex flex-column justify-content-between'>
+                                            <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>
+                                            <div className=''>
+                                                <a className="mb-5 mb-md-0 main-btn" href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>
+                                                    Learn More <i className="fal fa-arrow-right" />
+                                                </a>
+                                            </div>
+                                        </div>
                                     </div>
-                                    <div className="col-12 col-sm-8 order-1 order-sm-2">
+                                    <div className="col-12 col-md-6">
                                         <Image
-                                            src={thumb5}
+                                            src={wrenchAgent}
+                                            className='w-100 h-100'
                                             width={'100%'}
                                             height={'100%'}
                                             alt="" 

app/components/Error/index.js

@@ -0,0 +1,42 @@
+"use client"
+import React from 'react';
+import Link from 'next/link';
+// import { useHistory } from 'react-router-dom';
+import Svg from './Svg';
+
+function Error() {
+    // const history = useHistory();
+    const goBack = (e) => {
+        e.preventDefault();
+        // history.goBack();
+    };
+    return (
+        <>
+            <div className="appie-error-area">
+                <div className="container">
+                    <div className="row justify-content-center">
+                        <div className="col-lg-6">
+                            <div className="appie-error-content text-center">
+                                <Svg />
+                                <span>Sorry!</span>
+                                <h3 className="title">The page can&#39;t be found.</h3>
+                                <p>
+                                    The page you&#39;re looking for isn&#39;t available. Use the go back
+                                    button below
+                                </p>
+                                {/* <a onClick={(e) => goBack(e)} href="#">
+                                    Go Back <i className="fal fa-arrow-right"></i>
+                                </a> */}
+                                <Link href="/">
+                                    Go Back <i className="fal fa-arrow-right"></i>
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default Error;

app/components/FeaturedScreen.js

@@ -5,6 +5,7 @@ import localImgLoad from '../../lib/localImgLoad'
 import 'owl.carousel/dist/assets/owl.carousel.css'
 import 'owl.carousel/dist/assets/owl.theme.default.css'
 import LazyImage from '../../lib/LazyImage'
+import Image from 'next/image'
 
 export default function FeaturedScreen() {
   
@@ -47,43 +48,43 @@ export default function FeaturedScreen() {
                         <div className="item">
                             <div className="screen_frame_img">
                                 {/* <img src={localImgLoad('images/slider/slider_1.png')} alt="image" /> */}
-                                <img src={localImgLoad('images/slider/app_sliders/screen_1.png')} alt="image" />
+                                <Image width='auto' height='auto' src={localImgLoad('images/slider/app_sliders/screen_1.png')} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
                                 {/* <img src={localImgLoad('images/slider/slider_2.png')} alt="image" /> */}
-                                <img src={localImgLoad('images/slider/app_sliders/screen_2.png')} alt="image" />
+                                <Image width='auto' height='auto' src={localImgLoad('images/slider/app_sliders/screen_2.png')} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
                                 {/* <img src={localImgLoad('images/slider/slider_3.png')} alt="image" /> */}
-                                <img src={localImgLoad('images/slider/app_sliders/screen_3.png')} alt="image" />
+                                <Image width='auto' height='auto' src={localImgLoad('images/slider/app_sliders/screen_3.png')} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
                                 {/* <img src={localImgLoad('images/slider/slider_4.png')} alt="image" /> */}
-                                <img src={localImgLoad('images/slider/app_sliders/screen_6.png')} alt="image" />
+                                <Image width='auto' height='auto' src={localImgLoad('images/slider/app_sliders/screen_6.png')} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
                                 {/* <img src={localImgLoad('images/slider/slider_5.png')} alt="image" /> */}
-                                <img src={localImgLoad('images/slider/app_sliders/screen_4.png')} alt="image" />
+                                <Image width='auto' height='auto' src={localImgLoad('images/slider/app_sliders/screen_4.png')} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
                                 {/* <img src={localImgLoad('images/slider/slider_7.png')} alt="image" /> */}
-                                <img src={localImgLoad('images/slider/app_sliders/screen_7.png')} alt="image" />
+                                <Image width='auto' height='auto' src={localImgLoad('images/slider/app_sliders/screen_7.png')} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
                                 {/* <img src={localImgLoad('images/slider/slider_7.png')} alt="image" /> */}
-                                <img src={localImgLoad('images/slider/app_sliders/screen_5.png')} alt="image" />
+                                <Image width='auto' height='auto' src={localImgLoad('images/slider/app_sliders/screen_5.png')} alt="image" />
                             </div>
                         </div>
                     </OwlCarousel>

app/components/FooterHomeOne.js

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import Image from 'next/image';
 import logo from '../assets/images/wrenchboard-logo-text.png';
 import getConfig from '../../Config/config'; // './../../Config/config'
+import Link from 'next/link';
 
 function FooterHomeOne({ className }) {
     var site = useMemo(() => getConfig()[0], []);;
@@ -15,21 +16,21 @@ function FooterHomeOne({ className }) {
                         <div className="col-lg-4 col-md-6">
                             <div className="footer-about-widget">
                                 <div className="logo">
-                                    <a href="#">
+                                    <Link href="#">
                                         <Image
                                             src={logo}
                                             width={'175'}
                                             height={'38'}
                                             alt="" 
                                         />
-                                    </a>
+                                    </Link>
                                 </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. `}