link fixed

.env

@@ -0,0 +1,22 @@
+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,22 @@
+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,22 @@
+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'

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/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,
@@ -185,7 +189,7 @@ p {
 }
 
 .appie-section-title {
-  padding-bottom: 25px;
+  padding-bottom: 15px;
 }
 .appie-section-title .appie-title {
   font-size: 44px;
@@ -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) {

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,17 @@
 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 cardImg from '../assets/images/home/wrench-card-only.png'
+// import bg from '../assets/images/background-bg.jpg'
 import Image from 'next/image';
 
 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 +23,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 +51,25 @@ 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='row appie-about-8-box'>
+                                    <div className="col-12 col-md-6">
+                                        <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 className="col-12 col-sm-8 order-1 order-sm-2">
+                                    <div className="col-12 col-md-6">
                                         <Image
                                             src={thumb5}
+                                            className='w-100 h-100'
                                             width={'100%'}
                                             height={'100%'}
                                             alt="" 

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. `}
                                 </p>
-                                <a href="/service">
+                                <Link href="/service">
                                     Read More <i className="fal fa-arrow-right" />
-                                </a>
+                                </Link>
                                 <div className="social mt-30">
                                     <ul>
                                         <li>
@@ -38,9 +39,9 @@ function FooterHomeOne({ className }) {
                                             </a>
                                         </li>
                                         <li>
-                                            <a href={process.env.REACT_APP_TWITTER_LINK}>
+                                            <a href={process.env.NEXT_PUBLIC_TWITTER_LINK}>
                                                 {/* <i className="fab fa-twitter" /> */}
-                                                <i className="fab fa-x-twitter" />
+                                                <i className="fab fa-x-twitter"></i>
                                             </a>
                                         </li>
                                     </ul>
@@ -52,19 +53,19 @@ function FooterHomeOne({ className }) {
                                 <h4 className="title">Company</h4>
                                 <ul>
                                     <li>
-                                        <a href="/about-us">About Us</a>
+                                        <Link href="/about-us">About Us</Link>
                                     </li>
                                     <li>
-                                        <a href="/service">Our Services</a>
+                                        <Link href="/service">Our Services</Link>
                                     </li>
                                     <li>
-                                        <a href="/use-cases">Use Cases</a>
+                                        <Link href="/use-cases">Use Cases</Link>
                                     </li>
                                     <li className='d-none'>
-                                        <a target='_blank' href={process.env.REACT_APP_AGENT_LINK}>Agent</a>
+                                        <a target='_blank' href={process.env.NEXT_PUBLIC_AGENT_LINK}>Agent</a>
                                     </li>
                                     <li>
-                                        <a href="/blog">Blog</a>
+                                        <Link href="/blog">Blog</Link>
                                     </li>
                                    
                                 </ul>
@@ -75,19 +76,19 @@ function FooterHomeOne({ className }) {
                                 <h4 className="title">Support</h4>
                                 <ul>
                                     <li>
-                                        <a href="/contact">Contact</a>
+                                        <Link href="/contact">Contact</Link>
                                     </li>
                                     <li>
-                                        <a href="/faq">Faqs</a>
+                                        <Link href="/faq">Faqs</Link>
                                     </li>
                                     <li>
                                         <a href="https://blog.wrenchboard.com/resources/">Resources</a>
                                     </li>
                                     <li>
-                                        <a href="/privacy">Privacy Policy</a>
+                                        <Link href="/privacy">Privacy Policy</Link>
                                     </li>
                                     <li>
-                                        <a href="/terms">Terms of use</a>
+                                        <Link href="/terms">Terms of use</Link>
                                     </li>
                                 </ul>
                             </div>
@@ -121,12 +122,12 @@ function FooterHomeOne({ className }) {
                                 <div className="apps-download-btn">
                                     <ul>
                                         <li>
-                                            <a href={process.env.REACT_APP_APPLE_APP} target="_blank">
+                                            <a href={process.env.NEXT_PUBLIC_APPLE_APP} target="_blank">
                                                 <i className="fab fa-apple" /> Download for iOS
                                             </a>
                                         </li>
                                         <li>
-                                            <a className="item-2" href={process.env.REACT_APP_ANDROID_APP} target="_blank">
+                                            <a className="item-2" href={process.env.NEXT_PUBLIC_ANDROID_APP} target="_blank">
                                                 <i className="fab fa-google-play" /> Download for
                                                 Android
                                             </a>

app/components/HeroHomeOne.js

@@ -34,7 +34,7 @@ function HeroHomeOne() {
                 <p>Your place to set family goals and reward achievements. Find tasks to earn from, or build a task portfolio and find others to perform tasks for you.</p>
                 <ul className='d-flex justify-content-center justify-content-lg-start'>
                   <li className=''>
-                      <a className="item-2" target='_blank'  href={process.env.REACT_APP_APPLE_APP}>
+                      <a className="item-2" target='_blank'  href={process.env.NEXT_PUBLIC_APPLE_APP}>
                           <i className="fab fa-apple"></i>
                           <span>
                               Available on the <span>App Store</span>
@@ -42,7 +42,7 @@ function HeroHomeOne() {
                       </a>
                   </li>
                   <li className=''>
-                      <a className="item-2" target='_blank' href={process.env.REACT_APP_ANDROID_APP}>
+                      <a className="item-2" target='_blank' href={process.env.NEXT_PUBLIC_ANDROID_APP}>
                           <i className="fab fa-google-play"></i>
                           <span>
                               Available on the <span>Google Play</span>

app/components/HomeOne.js

@@ -11,6 +11,7 @@ import TrafficHomeTwo from './TrafficHomeTwo';
 import AfterHero from './AfterHero';
 import NextAfterHero from './NextAfterHero';
 import BackToTop from './BackToTop';
+import SelectFeatures from "@/app/components/SelectFeatutes";
 
 
 
@@ -22,10 +23,11 @@ function HomeOne() {
            <HomeNav />
            <HeroHomeOne />
            <AfterHero />
-           <NextAfterHero />
-           <ServicesHomeOne />
+           <SelectFeatures className='pb-55-err' />
+           {/*<NextAfterHero />*/}
+           {/*<ServicesHomeOne />*/}
            <TrafficHomeOne />
-           <TrafficHomeTwo />
+           {/*<TrafficHomeTwo />*/}
            <BlogHomeOne />
            <FooterHomeOne />
            <BackToTop className='' />

app/components/HomeOneHeader.js

@@ -4,6 +4,7 @@ import logo from '../assets/images/wrenchboard-logo-text.png';
 import StickyMenu from '../lib/StickyMenu';
 import Navigation from './navigation/Navigation';
 import Image from 'next/image';
+import Link from 'next/link';
 
 function HomeOneHeader({ action, showLogoOnly = false }) {
   useEffect(() => {
@@ -16,9 +17,9 @@ function HomeOneHeader({ action, showLogoOnly = false }) {
           <div className="row align-items-center">
             <div className="col-lg-2 col-md-4 col-sm-5 col-6 order-1 order-sm-1">
               <div className="appie-logo-box">
-                <a href="/">
+                <Link href="/">
                   <Image src={logo} alt="WrenchBoard" loading='eager' width="175" height="38" />
-                </a>
+                </Link>
               </div>
             </div>
 
@@ -30,10 +31,10 @@ function HomeOneHeader({ action, showLogoOnly = false }) {
               </div>
               <div className="col-lg-4  col-md-7 col-sm-6 col-6 order-2 order-sm-3">
                 <div className="appie-btn-box text-right">
-                  <a className="login-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
+                  <a className="login-btn" href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>
                     <i className="fal fa-user" /> Login
                   </a>
-                  <a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
+                  <a className="main-btn ml-30" href={process.env.NEXT_PUBLIC_DASH_URL_SIGNUP}>
                     Get Started
                   </a>
                   <div

app/components/News/HeroNews.js

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import React from 'react';
 
 function HeroNews({ title, breadcrumb }) {
@@ -13,7 +14,7 @@ function HeroNews({ title, breadcrumb }) {
                                     <ol className="breadcrumb">
                                         {breadcrumb.map((value) => (
                                             <li key={Math.random()} className="breadcrumb-item">
-                                                <a href={value.link}>{value.title}</a>
+                                                <Link href={value.link}>{value.title}</Link>
                                             </li>
                                         ))}
                                     </ol>

app/components/SelectFeatutes.js

@@ -0,0 +1,252 @@
+"use client"
+import React, { useState } from 'react';
+//import { Link } from 'react-router-dom';
+import thumb from '../assets/images/features-thumb-01.png';
+import shapeSix from '../assets/images/shape/shape-6.png';
+import shapeSeven from '../assets/images/shape/shape-7.png';
+import shapeEight from '../assets/images/shape/shape-8.png';
+import Image from 'next/image';
+function SelectFeatures({ className }) {
+    const [tab, setTab] = useState('setting');
+    const handleClick = (e, value) => {
+        e.preventDefault();
+        setTab(value);
+    };
+    //appie-services-2-area appie-services-8-area pt-90 pb-55
+    return (
+        <section className={`appie-features-area pt-100 ${className}`} id="features"    style={{  marginBottom: '20px' }} >
+            <div className="container">
+                <div className="row align-items-center">
+                    <div className="col-lg-3">
+                        <div className="appie-features-tabs-btn">
+                            <div
+                                className="nav flex-column nav-pills"
+                                id="v-pills-tab"
+                                role="tablist"
+                                aria-orientation="vertical"
+                            >
+                                <a
+                                    onClick={(e) => handleClick(e, 'setting')}
+                                    className={`nav-link ${tab === 'setting' ? 'active' : ''}`}
+                                    id="v-pills-home-tab"
+                                    data-toggle="pill"
+                                    href="#v-pills-home"
+                                    role="tab"
+                                    aria-controls="v-pills-home"
+                                    aria-selected="true"
+                                >
+                                    <i className="fas fa-cog" /> Reward achievement
+                                </a>
+                                <a
+                                    onClick={(e) => handleClick(e, 'report')}
+                                    className={`nav-link ${tab === 'report' ? 'active' : ''}`}
+                                    id="v-pills-profile-tab"
+                                    data-toggle="pill"
+                                    href="#v-pills-profile"
+                                    role="tab"
+                                    aria-controls="v-pills-profile"
+                                    aria-selected="false"
+                                >
+                                    <i className="fas fa-exclamation-triangle" /> Assign tasks or chores
+                                </a>
+                                <a
+                                    onClick={(e) => handleClick(e, 'notice')}
+                                    className={`nav-link ${tab === 'notice' ? 'active' : ''}`}
+                                    id="v-pills-messages-tab"
+                                    data-toggle="pill"
+                                    href="#v-pills-messages"
+                                    role="tab"
+                                    aria-controls="v-pills-messages"
+                                    aria-selected="false"
+                                >
+                                    <i className="fas fa-bell" /> Family engagement
+                                </a>
+                                <a
+                                    onClick={(e) => handleClick(e, 'app')}
+                                    className={`nav-link ${tab === 'app' ? 'active' : ''}`}
+                                    id="v-pills-settings-tab"
+                                    data-toggle="pill"
+                                    href="#v-pills-settings"
+                                    role="tab"
+                                    aria-controls="v-pills-settings"
+                                    aria-selected="false"
+                                >
+                                    <i className="fas fa-lock" /> Fund wallets
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="col-lg-9">
+                        <div className="tab-content" id="v-pills-tabContent">
+                            <div
+                                className={`${
+                                    tab === 'setting' ? 'show active' : ''
+                                } tab-pane fade`}
+                                id="v-pills-home"
+                                role="tabpanel"
+                                aria-labelledby="v-pills-home-tab"
+                            >
+                                <div className="row align-items-center">
+                                    <div className="col-lg-6">
+                                        <div
+                                            className="appie-features-thumb text-center wow animated fadeInUp"
+                                            data-wow-duration="2000ms"
+                                            data-wow-delay="200ms"
+                                        >
+                                            <Image src={thumb} alt=""
+                                                   style={{ width: '350px', height:'auto', margin: 'auto' }} />
+                                        </div>
+                                    </div>
+                                    <div className="col-lg-6">
+                                        <div
+                                            className="appie-features-content wow animated fadeInRight"
+                                            data-wow-duration="2000ms"
+                                            data-wow-delay="600ms"
+                                        >
+                                            <span>Custom Reactions</span>
+                                            <h3 className="title">
+                                                Let the <br /> Conversation flow
+                                            </h3>
+                                            <p>
+                                                Car boot absolutely bladdered posh burke the
+                                                wireless mush some dodg.
+                                            </p>
+                                            <a className="main-btn" href="/about-us">
+                                                Learn More
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div
+                                className={`${tab === 'report' ? 'show active' : ''} tab-pane fade`}
+                                id="v-pills-profile"
+                                role="tabpanel"
+                                aria-labelledby="v-pills-profile-tab"
+                            >
+                                <div className="row align-items-center">
+                                    <div className="col-lg-6">
+                                        <div
+                                            className="appie-features-thumb text-center animated fadeInUp"
+                                            data-wow-duration="2000ms"
+                                            data-wow-delay="200ms"
+                                        >
+                                            <Image src={thumb} alt=""
+                                                   style={{ width: '350px', height:'auto', margin: 'auto' }} />
+                                        </div>
+                                    </div>
+                                    <div className="col-lg-6">
+                                        <div
+                                            className="appie-features-content animated fadeInRight"
+                                            data-wow-duration="2000ms"
+                                            data-wow-delay="600ms"
+                                        >
+                                            <span>Custom Reacyions</span>
+                                            <h3 className="title">
+                                                Let the <br /> Conversation flow
+                                            </h3>
+                                            <p>
+                                                Car boot absolutely bladdered posh burke the
+                                                wireless mush some dodg.
+                                            </p>
+                                            <a className="main-btn" href="#">
+                                                Learn More
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div
+                                className={`${tab === 'notice' ? 'show active' : ''} tab-pane fade`}
+                                id="v-pills-messages"
+                                role="tabpanel"
+                                aria-labelledby="v-pills-messages-tab"
+                            >
+                                <div className="row align-items-center">
+                                    <div className="col-lg-6">
+                                        <div
+                                            className="appie-features-thumb text-center animated fadeInUp"
+                                            data-wow-duration="2000ms"
+                                            data-wow-delay="200ms"
+                                        >
+                                            <Image src={thumb} alt=""
+                                                   style={{ width: '350px', height:'auto', margin: 'auto' }} />
+                                        </div>
+                                    </div>
+                                    <div className="col-lg-6">
+                                        <div
+                                            className="appie-features-content animated fadeInRight"
+                                            data-wow-duration="2000ms"
+                                            data-wow-delay="600ms"
+                                        >
+                                            <span>Custom Reacyions</span>
+                                            <h3 className="title">
+                                                Let the <br /> Conversation flow
+                                            </h3>
+                                            <p>
+                                                Car boot absolutely bladdered posh burke the
+                                                wireless mush some dodg.
+                                            </p>
+                                            <a className="main-btn" href="#">
+                                                Learn More
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div
+                                className={`${tab === 'app' ? 'show active' : ''} tab-pane fade`}
+                                id="v-pills-settings"
+                                role="tabpanel"
+                                aria-labelledby="v-pills-settings-tab"
+                            >
+                                <div className="row align-items-center">
+                                    <div className="col-lg-6">
+                                        <div
+                                            className="appie-features-thumb text-center animated fadeInUp"
+                                            data-wow-duration="2000ms"
+                                            data-wow-delay="200ms"
+                                        >
+                                            <Image src={thumb} alt=""
+                                                   style={{ width: '350px', height:'auto', margin: 'auto' }} />
+                                        </div>
+                                    </div>
+                                    <div className="col-lg-6">
+                                        <div
+                                            className="appie-features-content animated fadeInRight"
+                                            data-wow-duration="2000ms"
+                                            data-wow-delay="600ms"
+                                        >
+                                            <span>Custom Reacyions</span>
+                                            <h3 className="title">
+                                                Let the <br /> Conversation flow
+                                            </h3>
+                                            <p>
+                                                Car boot absolutely bladdered posh burke the
+                                                wireless mush some dodg.
+                                            </p>
+                                            <a className="main-btn" href="#">
+                                                Learn More
+                                            </a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {/*<div className="features-shape-1">*/}
+            {/*    <Image src={shapeSix} alt="" />*/}
+            {/*</div>*/}
+            {/*<div className="features-shape-2">*/}
+            {/*    <Image src={shapeSeven} alt="" />*/}
+            {/*</div>*/}
+            {/*<div className="features-shape-3">*/}
+            {/*    <Image src={shapeEight} alt="" />*/}
+            {/*</div>*/}
+        </section>
+    );
+}
+
+export default SelectFeatures;

app/components/navigation/Navigation.js

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import React from 'react';
 
 function Navigation() {
@@ -5,10 +6,10 @@ function Navigation() {
         <>
             <ul>
                 <li>
-                    <a href="/">Home</a>
+                    <Link href="/">Home</Link>
                 </li>
                 <li>
-                    <a href="/about-us">About</a>
+                    <Link href="/about-us">About</Link>
                 </li>
                 {/* <li>
                     <a href="#">

app/components/navigation/Services.js

@@ -2,6 +2,7 @@ import React from 'react';
 import logo from '../../assets/images/wrenchboard-logo-text.png';
 import Navigation from './Navigation';
 import Image from 'next/image';
+import Link from 'next/link';
 
 function Services({ action }) {
 
@@ -13,9 +14,9 @@ function Services({ action }) {
                         <div className="row align-items-center">
                             <div className="col-lg-2 col-md-4 col-sm-5 col-6 order-1 order-sm-1">
                                 <div className="wrench-logo-box">
-                                    <a href="/">
+                                    <Link href="/">
                                         <Image src={logo} alt="WrenchBoard" loading='eager' width="175" height="38" />
-                                    </a>
+                                    </Link>
                                 </div>
                             </div>
                             <div className="col-lg-6 col-md-1 col-sm-1 order-3 order-sm-2">
@@ -25,10 +26,10 @@ function Services({ action }) {
                             </div>
                             <div className="col-lg-4  col-md-7 col-sm-6 col-6 order-2 order-sm-3">
                                 <div className="appie-btn-box text-right">
-                                    <a className="login-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
+                                    <a className="login-btn" href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>
                                         <i className="fal fa-user"></i> Login
                                     </a>
-                                    <a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
+                                    <a className="main-btn ml-30" href={process.env.NEXT_PUBLIC_DASH_URL_SIGNUP}>
                                         Get Started
                                     </a>
                                     <div

app/contact/Forms.js

@@ -0,0 +1,202 @@
+"use client"
+import React, {useState} from 'react';
+import ContactData from '../Services/ContactData';
+
+
+function Forms() {
+
+    const [formDetails, setFormDetails] = useState({
+        first_name: '',
+        last_name: '',
+        email: '',
+        subject: '',
+        phone_number: '',
+        action: 1001,
+        message: '',
+        channel: 'WEB',
+        terms_conditions: false
+    })
+
+    const validForm = formDetails.first_name && formDetails.last_name && formDetails.email && formDetails.phone_number && formDetails.subject && formDetails.message
+
+    const handleChange = ({target:{name, value}}) => {
+        setFormDetails(prev => ({...prev, [name]:value}))
+    }
+
+    const [requestStatus, setRequestStatus] = useState({loading:false, status:false, msg:''})
+
+    function handleSubmit(e) {
+        e.preventDefault()
+        setRequestStatus({loading:true, status:false, msg:''})
+        if(!validForm){
+            setRequestStatus({loading:false, status:false, msg:'please, fill all fields'})
+            setTimeout(()=>{
+                setRequestStatus({loading:false, status:false, msg:''})
+            },3000)
+            return
+        }
+
+        delete formDetails.terms_conditions
+
+       ContactData(formDetails).then(res =>{
+        if(res?.data?.result != '100'){
+            setRequestStatus({loading:false, status:false, msg:'failed to send message'})
+            setTimeout(()=>{
+                setRequestStatus({loading:false, status:false, msg:''})
+            },3000)
+            return
+        }
+        setRequestStatus({loading:false, status:true, msg:'message Sent'})
+        setTimeout(()=>{
+            setRequestStatus({loading:false, status:false, msg:''})
+            setFormDetails({
+                first_name: '',
+                last_name: '',
+                email: '',
+                subject: '',
+                phone_number: '',
+                action: 1001,
+                message: '',
+                channel: 'WEB',
+                terms_conditions: false
+            })
+        },3000)
+       }).catch(err => {
+        setRequestStatus({loading:false, status:false, msg:'failed something went wrong'})
+        setTimeout(()=>{
+            setRequestStatus({loading:false, status:false, msg:''})
+        },3000)
+       });
+    }
+
+
+    return (
+        <>
+            <section className="contact-section">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-md-4">
+                            <div className="contact--info-area">
+                                <h3>Get in touch</h3>
+                                <p>Looking for help? Fill the form and start a new discussion.</p>
+                                <div className="single-info">
+                                    <h5>Headquaters</h5>
+                                    <p>
+                                        <i className="fal fa-home"></i>
+                                        {process.env.NEXT_PUBLIC_SUPPORT_US_ADDRESS}
+                                    </p>
+                                </div>
+                                <div className="single-info">
+                                    <h5>Phone</h5>
+                                    <p>
+                                        <i className="fal fa-phone"></i>
+                                        {process.env.NEXT_PUBLIC_SUPPORT_PHONE}
+                                        <br />
+                                    </p>
+                                </div>
+                                <div className="single-info">
+                                    <h5>Support</h5>
+                                    <p>
+                                        <i className="fal fa-envelope"></i>
+                                        {process.env.NEXT_PUBLIC_SUPPORT_EMAIL}
+                                       
+                                    </p>
+                                </div>
+                                <div className="ab-social">
+                                    <h5>Follow Us</h5>
+                                    <a className="fac" href={process.env.NEXT_PUBLIC_FACEBOOK_LINK}>
+                                        <i className="fab fa-facebook-f"></i>
+                                    </a>
+                                    <a className="twi" href={process.env.NEXT_PUBLIC_TWITTER_LINK}>
+                                        {/* <i className="fab fa-twitter"></i> */}
+                                        <i className="fab fa-x-twitter" />
+                                    </a>
+                                    <a className="you" href="#">
+                                        <i className="fab fa-youtube"></i>
+                                    </a>
+                                    <a className="lin" href={process.env.NEXT_PUBLIC_LINKEDIN_LINK}>
+                                        <i className="fab fa-linkedin-in"></i>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="col-md-8">
+                            <div className="contact-form">
+                                <h4>Let’s Connect</h4>
+                                <form onSubmit={handleSubmit} className="row">
+                                    <div className="col-md-6">
+                                        <input type="text" name="first_name" placeholder="First Name"  maxLength={15} onChange={handleChange} value={formDetails.first_name} />
+                                    </div>
+                                    <div className="col-md-6">
+                                        <input type="text" name="last_name" placeholder="Last Name"  maxLength={15} onChange={handleChange} value={formDetails.last_name} />
+                                    </div>
+                                    <div className="col-md-6">
+                                        <input
+                                            type="email"
+                                            name="email"
+                                            placeholder="Email Address" 
+                                            maxLength={35} 
+                                            onChange={handleChange}
+                                            value={formDetails.email}
+                                        />
+                                    </div>
+                                    <div className="col-md-6">
+                                        <input
+                                            type="number"
+                                            name="phone_number"
+                                            placeholder="Phone Number" 
+                                            maxLength={15} 
+                                            onChange={handleChange}
+                                            value={formDetails.phone_number}
+                                        />
+                                    </div>
+                                    <div className="col-md-12">
+                                        <input type="text" name="subject" placeholder="Subject"  maxLength={35} value={formDetails.subject} onChange={handleChange}  />
+                                    </div>
+                                    <div className="col-md-12">
+                                        <textarea
+                                            name="message"
+                                            placeholder="How can we help?"
+                                            onChange={handleChange}
+                                            value={formDetails.message}
+                                        ></textarea>
+                                    </div>
+                                    <div className="col-md-6">
+                                        <div className="condition-check">
+                                            <input id="terms-conditions" name="terms_conditions" type="checkbox" value={formDetails.terms_conditions} onChange={handleChange} />
+                                            <label htmlFor="terms-conditions">
+                                                I agree to the <a href="#">Terms & Conditions</a>
+                                            </label>
+                                        </div>
+                                    </div>
+                                    <div className="col-md-6 text-right">
+                                        <input 
+                                            type="submit"  
+                                            value={ requestStatus.loading ? 'Sending...' : 'Send Message'} 
+                                            disabled={requestStatus.loading} 
+                                            className={`${!validForm ? 'opacity-25' : 'opacity-100'}`}
+                                        />
+                                    </div>
+                                    {/* <div className="p-2 col-12">
+                                        {requestStatus.msg &&
+                                        }
+                                    </div> */}
+                                    <p className={`p-1 w-100 text-center ${requestStatus.status ? 'text-success' : 'text-danger'}`}>{requestStatus.msg}</p>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <div className="bisylms-map">
+                <iframe
+                    title="map"
+                    src="https://maps.google.com/maps?width=720&amp;height=600&amp;hl=en&amp;coord=33.8573837,-84.4766235&amp;q=Cumberland+Pkwy+SE,+Atlanta,+GA+30339&amp;ie=UTF8&amp;t=p&amp;z=16&amp;iwloc=B&amp;output=embed"
+                ></iframe>
+            </div>
+        </>
+    );
+}
+
+export default Forms;

app/contact/page.tsx

@@ -1,5 +1,9 @@
 import React from 'react'
 import FooterHomeOne from '../components/FooterHomeOne';
+import BackToTop from '../components/BackToTop';
+import HeroNews from '../components/News/HeroNews';
+import ServiceNav from '../components/navigation/ServiceNav';
+import Forms from './Forms'
 
 // must be a better way to centralize the style = TEMPORARY USE 
 import '../assets/css/bootstrap.min.css';
@@ -14,8 +18,17 @@ import '../assets/css/style.css';
 function page() {
   return (
     <> 
-    <div>Contact us Here</div>
-    <FooterHomeOne className={undefined} />
+      <ServiceNav />
+      <HeroNews
+          title="Contact us"
+          breadcrumb={[
+              { link: '/', title: 'home' },
+              { link: '/contact', title: 'Contact' },
+          ]}
+      />
+      <Forms />
+      <FooterHomeOne className='' />
+      <BackToTop className='' />
     </>
    
   )

app/use-cases/UseCase.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import blogImg1 from '../assets/images/blog/1.jpg';
+import UseCaseData from '../Services/UseCaseData';
+import Image from 'next/image';
+import Link from 'next/link';
+
+
+function UseCase() {
+
+    var UseCaseDataResult = UseCaseData();
+
+    return (
+        <>
+            <div className="row">
+                {
+                    UseCaseDataResult.map((i, index )=> {
+                        var blgImg = i.meta_value != null ? "/images/" + i.meta_value : blogImg1;
+
+                        return (
+                            <div key={index} className="col-12 col-md-6 col-lg-4">
+                                <div className="post-item-1">
+
+                                    {<img src={blgImg} alt={i.title} />}
+                                    <div className="b-post-details">
+                                        <h3>
+                                            <Link href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>
+                                                {i.title}
+                                            </Link>
+                                        </h3>
+                                        <Link className="read-more" href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>
+                                            Learn more<i className="fal fa-arrow-right"></i>
+                                        </Link>
+                                    </div>
+
+                                </div>
+                            </div>
+
+                        )
+
+                    })
+                }
+            </div>
+        </>
+    );
+}
+
+export default UseCase;

app/use-cases/page.tsx

@@ -1,5 +1,10 @@
 import React from 'react'
 import FooterHomeOne from '../components/FooterHomeOne';
+import BackToTop from '../components/BackToTop';
+import HeroNews from '../components/News/HeroNews';
+import ServiceNav from '../components/navigation/ServiceNav';
+import AboutApp from '../components/AboutApp'
+import UseCase from './UseCase'
 
 // must be a better way to centralize the style = TEMPORARY USE 
 import '../assets/css/bootstrap.min.css';
@@ -14,8 +19,27 @@ import '../assets/css/style.css';
 function page() {
   return (
     <> 
-    <div>use Case Here</div>
-    <FooterHomeOne className={undefined} />
+      <ServiceNav />
+      <HeroNews
+          title="Use Cases"
+          breadcrumb={[
+              { link: '/', title: 'Home' },
+              { link: '/use-cases', title: 'Use Cases' },
+          ]}
+      />
+      <AboutApp video='' dark='' />
+      <section className="blogpage-section">
+          <div className="container">
+              <div className="row">
+                  {/* <div className="col-lg-12 col-md-7">
+                      <UseCase />
+                  </div> */}
+                  <UseCase />
+              </div>
+          </div>
+      </section>
+      <FooterHomeOne className='' />
+      <BackToTop className='' />
     </>
    
   )

public/index.html

@@ -36,7 +36,7 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
     <!-- Preload Font Awesome -->
-    <link
+    <!-- <link
       rel="preload"
       href="//use.fontawesome.com/releases/v6.4.2/css/all.css"
       as="style"
@@ -47,7 +47,9 @@
         rel="stylesheet"
         href="//use.fontawesome.com/releases/v6.4.2/css/all.css"
       />
-    </noscript>
+    </noscript> -->
+    <!-- link to font awesome -->
+    <link rel="stylesheet" href="//use.fontawesome.com/releases/v6.4.2/css/all.css">
 
     <title>WrenchBoard</title>
     <!-- Google tag (gtag.js) -->