added home nav

app/Mobile/Drawer.js

@@ -1,23 +1,10 @@
-"use client"
-import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
 import logo from '../assets/images/wrenchboard-logo-text.png';
 import getConfig from  "../../Config/config"; // './../../Config/config'
+import Image from 'next/image';
 
 
 function Drawer({ drawer, action }) {
     var site = getConfig()[0];
-
-    const [itemSize, setSize] = useState('0px');
-    const [item, setItem] = useState('home');
-    const handler = (e, value) => {
-        e.preventDefault();
-        const getItems = document.querySelectorAll(`#${value} li`).length;
-        if (getItems > 0) {
-            setSize(`${43 * getItems}px`);
-            setItem(value);
-        }
-    };
     return (
         <>
             <div
@@ -35,7 +22,7 @@ function Drawer({ drawer, action }) {
                                     </a>
                                 </div>
                                 <div className="offcanvas-brand text-center mb-40">
-                                    <img src={logo} alt="WrechBoard" />
+                                    <Image width='260' height='57' src={logo} alt="WrechBoard" />
                                 </div>
                                 <div id="menu" className="text-left ">
                                     <ul className="offcanvas_main_menu">
@@ -53,10 +40,10 @@ function Drawer({ drawer, action }) {
                                             id="service"
                                             className="menu-item-has-children active"
                                         >
-                                            <Link to="/service">Service</Link>
+                                            <a href="/service">Service</a>
                                         </li>
                                         <li>
-                                                    <Link to="/about-us">About Us</Link>
+                                                    <a href="/about-us">About Us</a>
                                                 </li>
 
                                         
@@ -66,7 +53,7 @@ function Drawer({ drawer, action }) {
                                             id="contact"
                                             className="menu-item-has-children active"
                                         >
-                                            <Link to="/contact">Contact</Link>
+                                            <a href="/contact">Contact</a>
                                         </li>
                                     </ul>
                                 </div>

app/Services/BlogData.js

@@ -0,0 +1,9 @@
+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`);
+    return await response;
+}
+
+export default BlogData;

app/Services/ContactData.js

@@ -0,0 +1,12 @@
+import axios from 'axios';
+
+async function ContactData(reqData) {
+    let formData = new FormData()
+    for (let value in reqData) {
+        formData.append(value, reqData[value]);
+      }
+    let response = await axios.post(`${process.env.REACT_APP_AUX_ENDPOINT}/sitecontact`, reqData);
+    return response;
+}
+
+export default ContactData;

app/Services/FaqData.js

@@ -0,0 +1,11 @@
+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`);
+    return await response;
+}
+
+export default FaqData;

app/Services/JobsData.js

@@ -0,0 +1,25 @@
+import Axios from 'axios';
+import getConfig from './../Config/config'
+
+async function JobsData() {
+    var site = getConfig()[0];
+    var callData = [{
+        "limit": 10,
+        "page": 1
+    }];
+/*
+    var res = null;
+    const getWrenchBoardJobs = () => {
+        Axios.post("https://dashboard.wrenchboard.com/svs/user/startjoblist", callData).then((response) => {
+            res = response;
+            return response;
+        });
+    }
+*/
+    let response = await Axios.post(process.env.REACT_APP_AUX_ENDPOINT+'/startjoblist', callData);
+    return await response;
+}
+
+export default JobsData;
+
+

app/Services/UseCaseData.js

@@ -0,0 +1,212 @@
+// http://172.31.4.19:8000/wordpress-data
+
+//import React from 'react';
+import Axios from 'axios';
+
+function UseCaseData() {
+
+    console.log("~~~~~~~~ ameye 009 ~~~~~~~~~");
+var res = null;
+   const getWrenchBoardBlog = () => {
+        Axios.get("http://10.0.0.52:5101/wp/wrenchboard/", {
+            headers: { 
+                'Access-Control-Allow-Origin' : '*',
+                'Access-Control-Allow-Credentials':true,
+                'crossorigin':true,
+                'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS',
+              },
+            responseType: "json",
+          }).then((response) => {
+           console.log(response);
+           res = response;
+           console.log("~~~~~~~~ ameye ~~~~~~~~~");
+           return response;
+          // console.log(blogResultData);
+        });
+    }
+
+  /*  return (
+        <>
+            Ameye
+        </>
+    );
+*/
+// getWrenchBoardBlog();
+
+//console.log(getWrenchBoardBlog());
+
+//console.log("Ameye got here");
+ //   return blogResultData; // getWrenchBoardBlog();
+
+ var res1  = [
+    {
+        "id": 78,
+        "ID": 78,
+        "post_author": 1,
+        "post_date": "2018-06-25T18:54:22.000Z",
+        "post_date_gmt": "2018-06-25T18:54:22.000Z",
+        "post_content": "Globalization spells danger for the type of jobs that will be available at graduation. The nature of jobs changes so often that it could frustrate for the students. The changes also present new opportunities. Globalization also ensures that job can come anonymously from any part of the world and transaction can be completed privately.\n\nThis is where <a href=\"https://www.wrenchboard.com\">WrenchBoard </a>comes in, rather than focus on your primary education as your source of income, the new economy will look at your skills as this guide.  Your question is to self-examine and attributes values to what you have that others need to make their own or goal complete.\n\nUniversity students can earn extra income along with their regular educational and school work by taking part-time tasks online. To get a project up and running there are a lot of components of service that every business goes through and there are those tasks that students can attend to. Students are in best position to do an initial critique of sites, write articles that bear innocence or interest meddling or test an app for a company in beta phase.\n\nThe online nature of the jobs gives the student the necessary flexibility to operate and added the benefit of interacting with people that don’t think like them, it is an opportunity for the larger world. It is getting very hard to manufacture excuses for not to be involved with one online job or the other when the opportunities and the capabilities collide. A student should be made aware of the fact that life is going to get busier once the excuse of the school is removed.\n\nThere are many jobs students can easily do online\n<ul>\n \t<li>\tOnline marketing  - most students have Facebooks and other social environments with tons of friends or connection. Somebody on this planet needs that profile or demography and will be will to pay for it if there is a way to do so</li>\n \t<li>\nTeaching - being a student also has the benefit of living in environment where you play with commercial tools, somebody have question about those tools you are playing with that they are willing to pay for - for example, student work with expensive robots in labs and an industrial hand may have questions that you can check out in your experiment environment</li>\n \t<li>\nWriting Articles/Blogging -</li>\n \t<li>\nSurveys/Research</li>\n \t<li>Campaigns</li>\n</ul>",
+        "title": "Propose relevant articles for my site",
+        "post_excerpt": "",
+        "post_status": "publish",
+        "comment_status": "open",
+        "ping_status": "open",
+        "post_password": "",
+        "post_name": "online-jobs-university-students",
+        "to_ping": "",
+        "pinged": "",
+        "post_modified": "2022-01-01T23:29:05.000Z",
+        "post_modified_gmt": "2022-01-01T23:29:05.000Z",
+        "post_content_filtered": "",
+        "post_parent": 0,
+        "guid": "https://blog.wrenchboard.com/?p=78",
+        "menu_order": 0,
+        "post_type": "post",
+        "post_mime_type": "",
+        "comment_count": 0,
+        "meta_value": "wrechboard-sample.jpg"
+    },
+    {
+        "id": 41,
+        "ID": 41,
+        "post_author": 1,
+        "post_date": "2017-11-23T14:05:51.000Z",
+        "post_date_gmt": "2017-11-23T14:05:51.000Z",
+        "post_content": "There are different types of online jobs and some pay more money than others do while some typing jobs may need special equipment, education, or training in order to do them. The advantage of an online job is that you can work at any time of the day around your personal schedule. You can even work in the evening or at night.\n\nYour income from an online job will also depend on the kind of job you do, your experience and your skills.\n\n<strong>Price management</strong>\n\nFirstly, you will need to establish the services you will offer your clients and a business essentially succeeds by filling a void or a niche in the market.\n\nEnsure you are familiar with the different online jobs out there as each job category pays differently. The categories of online jobs include Copywriting, SEO copywriting, Content writing, Proofreading, editing, freelance writing, social media marketing and professional blogging. You do not have to work in one field only; you can work in various fields. Research on how much each field pays; this is so you do not sell yourself short and earn less money than you should be earning.\n\nAlways do your best work for every project as the quality of your work will speak for you and you can gauge your prices better while establishing your reputation.\n\nNetworking is also essential both online and in person. You can use social media platforms like LinkedIn to network online. The more you work towards being noticed, the more clients and projects you will get.\n\n<strong>Time management </strong>\n\nWorking an online business means, you will be working from home in most cases and time management is an essential part of working online. Here are a few tips to help you manage your time better with an online job.\n<ul>\n \t<li>Remove all the extra tabs from your web browser, as they can be reminders of the fact that the internet is a vast wormhole of your attention. Open fewer tabs if you want to have a more productive workday.</li>\n \t<li>Remove papers from your desktop as a ton of paperwork on your desktop could discourage you from remaining focused. Ensure you clear your desktop after each workday.</li>\n \t<li>Avoid social media interruptions as social media can hinder your productivity if you do not practice mindfulness. You can set up a specific time to socialize before your workday begins or just before retiring after your workday.</li>\n \t<li>Block any needless distractions because at times pure silence might be all you need to do to enhance your production. Turn your radio, television, or telephone off. Avoid visiting any social media platforms, ignore email notifications, and even close your browser.</li>\n \t<li>Select the best time for you to work; you may find that you are more productive during certain hours of the day. Find out what your optimal time frame is and work during said hours so that you get more work done. Most importantly, ensure you follow your schedule strictly.</li>\n</ul>\n&nbsp;",
+        "title": "Share my writeup on your social site",
+        "post_excerpt": "",
+        "post_status": "publish",
+        "comment_status": "open",
+        "ping_status": "open",
+        "post_password": "",
+        "post_name": "time-price-management-working-online-job",
+        "to_ping": "",
+        "pinged": "",
+        "post_modified": "2022-01-01T23:29:35.000Z",
+        "post_modified_gmt": "2022-01-01T23:29:35.000Z",
+        "post_content_filtered": "",
+        "post_parent": 0,
+        "guid": "https://blog.wrenchboard.com/?p=41",
+        "menu_order": 0,
+        "post_type": "post",
+        "post_mime_type": "",
+        "comment_count": 0,
+        "meta_value": "share-my-content.jpg"
+    },
+    {
+        "id": 39,
+        "ID": 39,
+        "post_author": 1,
+        "post_date": "2017-11-23T14:04:49.000Z",
+        "post_date_gmt": "2017-11-23T14:04:49.000Z",
+        "post_content": "Content syndication involves methods of content republication on other websites so you can reach a wider audience. Syndication of your content is a great way to enhance your brand awareness and your reach, direct traffic to your article, and build links. The internet is vast and it is not reasonable to assume that everyone you want to reach will read your content simply because you published it on your own site. Syndicating your content gets it to a different audience who might have never known it was there in the first place. Content syndication is a good and cheap way to further your content. It is a content marketing strategy. There are 4 kinds of content syndication you should know of:\n<ol>\n \t<li><strong>Syndicating content (3rd party) on your website </strong></li>\n</ol>\nPublishers can ask different websites for permission to display their content on your website or blog. Your site should have roughly 10% syndicated content ideally. Even though it might be unoriginal, it is always good to feature useful content that your readers will find beneficial and worth reading. It is difficult to find great authors committed to writing content for you when you run a website or blog with multiple authors. Ask an influencer on whether you can feature their existing content as a reasonable resolution. Syndicated content diversifies your site content instantly by highlighting something valuable and new to your target audience.\n<ol start=\"2\">\n \t<li><strong>Syndicating your content on other blogs or websites</strong></li>\n</ol>\nPublishers can syndicate their content to be displayed on another partner website or sites. You can either create content that is not original for your partner who will just be republishing your content. Alternatively, you can agree on a split which both sides find acceptable i.e. you can give them syndicated content for one month and produce original content the next month. If the agreement calls for 1-4 posts monthly, one of them must at least be original.\n<ol start=\"3\">\n \t<li><strong>Publish your content on websites syndicating their content</strong></li>\n</ol>\nAnother way to syndicate your content is by contributing regularly to websites already syndicating their content. Think of it this way, if you are publishing your content for a specific website on a regular basis and they are content syndicators, their content would also end up on other significant partner websites.\n<ol start=\"4\">\n \t<li><strong>Self-service syndication</strong></li>\n</ol>\nPublishers are also able to syndicate their own content with Medium as a great place to start with this endeavor. Medium allows you to import your already existing content from the internet edit, format, and publishing it. It allows you to run your own publications using minimal effort. LinkedIn is another platform you can use to republish your own website content so it reaches a bigger audience.\n\nYou have tools available at your disposal that can help you get your content to a wider target audience while enhancing traffic to your website, establishing a stronger following, and developing your reputation.",
+        "title": "Give feedback on my website or app ",
+        "post_excerpt": "",
+        "post_status": "publish",
+        "comment_status": "open",
+        "ping_status": "open",
+        "post_password": "",
+        "post_name": "use-syndication-techniques-promote-articles-online",
+        "to_ping": "",
+        "pinged": "",
+        "post_modified": "2022-01-02T22:42:09.000Z",
+        "post_modified_gmt": "2022-01-02T22:42:09.000Z",
+        "post_content_filtered": "",
+        "post_parent": 0,
+        "guid": "https://blog.wrenchboard.com/?p=39",
+        "menu_order": 0,
+        "post_type": "post",
+        "post_mime_type": "",
+        "comment_count": 0,
+        "meta_value": "test-site-app.jpg"
+    },
+    {
+        "id": 37,
+        "ID": 37,
+        "post_author": 1,
+        "post_date": "2017-11-23T14:03:39.000Z",
+        "post_date_gmt": "2017-11-23T14:03:39.000Z",
+        "post_content": "<strong>Paying mind to similarity index and why ignoring it could have serious repercussions&nbsp; </strong>\n\nThe similarity index is a term you should be familiar with as an online writer. It is defined as the composite number that is highlighted after matching two texts to determine how similar the content from both pieces is. It is typically displayed as a percentage and the displayed number measures the percentage of your article that the program found the matching text for. This is regardless of proper citation in your work or lack thereof.\n\nIf the similarity index is high this could mean the writer has quoted various other works to a large extent even if it is legitimate.\n\nIt is understandable that you will want to offer quality content for search engines in terms of consideration and indexation and this can lead you to weed your indexable content down. You may also be worried that search engines will not be able to comprehend your content due to existing similar pages because of things like product variations. It will be unwise for you to rush into a decision that could damage your SEO in the process of trying to make search engines happy while destroying your organic visibility in the process.\n\nYou can make use of canonical tags to instruct crawling search engines of the representative alternatives of similar or duplicate content. You just have to place these tags within your source code head section. Canonical tags are very effective in dealing with similar or duplicate content. The easiest way to determine whether you have similar content on your website is to review the site manually while addressing sections of the site appearing to have different URLs but similar content. Take some of the URLs and use tools such as Similar Page Checker or simply review the site for any similar content using Siteliner.\n\nYou may also want to consider consolidating multiple pages into one or expanding certain pages if you have multiple pages that appear to be similar. For example, if you have a site with two distinct pages for different but related topics but the information is the same on both these pages, you may either expand each page further to encompass original content about each topic or merge both pages into one about both topics.\n\nSimilar content can present an issue if not addressed:\n\nYour website will suffer in terms of ranking and you may end up losing traffic. Both losses typically originate from 2 main issues\n\n-&nbsp;&nbsp;&nbsp; Search engines rarely show multiple options of similar content in order to give users an optimum search experience. They will, therefore, be forced to select the best version which will be shown as the best result diluting visibility of websites with similar or duplicate content.\n\n-&nbsp;&nbsp;&nbsp; Equity of links will also be diluted further because other websites will have to choose the best option from the duplicates. As opposed to all the inbound links directing to one content piece, they will link to several pieces distributing the equity of the links among these duplicates. Inbound links are considered a ranking factor so they can affect the search visibility of certain pieces of content.\n\nThe overall result is that the piece of content will not get the search visibility it deserves.\n\n&nbsp;",
+        "title": "Share my product with your friends",
+        "post_excerpt": "",
+        "post_status": "publish",
+        "comment_status": "open",
+        "ping_status": "open",
+        "post_password": "",
+        "post_name": "paying-mind-similarity-index",
+        "to_ping": "",
+        "pinged": "",
+        "post_modified": "2022-01-02T22:42:29.000Z",
+        "post_modified_gmt": "2022-01-02T22:42:29.000Z",
+        "post_content_filtered": "",
+        "post_parent": 0,
+        "guid": "https://blog.wrenchboard.com/?p=37",
+        "menu_order": 0,
+        "post_type": "post",
+        "post_mime_type": "",
+        "comment_count": 0,
+        "meta_value": "share-product.jpg"
+    },
+    {
+        "id": 35,
+        "ID": 35,
+        "post_author": 1,
+        "post_date": "2017-11-23T14:02:54.000Z",
+        "post_date_gmt": "2017-11-23T14:02:54.000Z",
+        "post_content": "The internet is a vast source of information and you can use this information to improve and expand your skill set. You always stand to benefit by adding some extra skills to your CV. The internet is one of the best areas to look if you want to enhance your knowledge base and your skill set in an effort to impress your possible employers. There are so many ways to use the internet to gain extra technical skills\n\n<strong>Design</strong>\n\nThe internet is jam-packed with various online programs that people use for photo editing and graphic design for their websites and blogs. Such design skills must be stated in your CV if they will be relevant to the position you are applying for in any company. You can easily download the relevant design programs or apps from the internet and use your free time to sharpen your design skills while racking up your design portfolio. You may land a position in a good design agency if you have some good examples of your design work.\n\n<strong>Social media</strong>\n\nSocial media is another way that the internet has proven useful in that it can be used in more ways than one. Once you find a way to use social media to your advantage, this will be a valuable asset because lots of organizations are currently looking for social media skills when looking to hire new staff. Businesses have realized the benefit of using social media marketing in reaching out to a bigger audience. Think of ways to boost your follower base via your own social media pages like Instagram, Twitter, or Facebook. Such platforms and more like Snapchat or LinkedIn are free to download and easy to use plus there is a lot you can learn in terms of using your social media feed or platforms to attract followers which in itself is a form of marketing.\n\n<strong>IT skills</strong>\n\nThis is one of the obvious skills that one can polish online or on their computer. More businesses are being geared towards a digital direction and employers want to know they are hiring an applicant(s) with strong IT skills. This means you have to know how to use various programs and software to create different types of documents. Showing that you are highly proficient in computer applications and operation will do you justice when applying for different jobs or even starting your own business.\n\n<strong>Online Courses</strong>\n\nYou can now get plenty of qualifications from the comfort of your home as long as you have a computer and a strong internet connection. Find a free course that would be relevant or helpful to you, sign up, and you can begin studying as soon as immediately. There are many skills you can study online with these courses and you may add an impressive qualification to your resume. The advantage of online courses is that you can do them in coordination with your current schedule meaning you still get to earn while you study.\n\n<strong>Languages</strong>\n\nA second language also looks quite impressive on your CV as bilingual employees show to be quite useful if an employer’s business trades in an international market. You can use apps like Duolingo or sign up for an online course to learn a new language. A second language might really help you get work experience in foreign countries.",
+        "title": "Exhibit your skills, somebody needs it",
+        "post_excerpt": "",
+        "post_status": "publish",
+        "comment_status": "open",
+        "ping_status": "open",
+        "post_password": "",
+        "post_name": "using-internet-expand-technological-skill-set",
+        "to_ping": "",
+        "pinged": "",
+        "post_modified": "2022-01-02T22:44:39.000Z",
+        "post_modified_gmt": "2022-01-02T22:44:39.000Z",
+        "post_content_filtered": "",
+        "post_parent": 0,
+        "guid": "https://blog.wrenchboard.com/?p=35",
+        "menu_order": 0,
+        "post_type": "post",
+        "post_mime_type": "",
+        "comment_count": 0,
+        "meta_value": "your-skills.jpg"
+    },
+    {
+        "id": 33,
+        "ID": 33,
+        "post_author": 1,
+        "post_date": "2017-11-23T14:01:30.000Z",
+        "post_date_gmt": "2017-11-23T14:01:30.000Z",
+        "post_content": "Anyone can do an online job as long as you have the right set of skills. As your own boss, you will have to do plenty of day-to-day tasks yourself and you will need to practice good judgment on how you do things. This is why you need an effective strategy to help you progress your online career.\n\n<strong>You need the right skills</strong>\n\nAs does any job, you need to have the proper equipment and tools to accomplish things accordingly. This means you will have to invest in a good-quality PC or laptop, subscribe to a dependable ISP, and ensure you have a backup ISP in the event of an emergency. You could even get your own office with a backup computer, a cloud account, or a spare hard drive.\n\n<strong>You need to be dedicated to your career</strong>\n\nThe misconception that you need to go to college to learn all the skills you need to get a job in the outside world is not the case. Of course, you need to update your skills and knowledge to gain a competitive edge over your peers and colleagues. This means that you should always keep learning in order to have an effective online career or job. Read on industry news daily, take some courses to spruce up your skills; you can even go back to school.\n\n<strong>Technical proficiency</strong>\n\nComputer literacy is something you obviously must have when working on an online career. However, in order to progress with your career, you have to be up to date with current software and online tools available to help you be more efficient in your strategy.\n\n<strong>Ensure every project has a contract</strong>\n\nYou do not need something complex that will take you more time to look over when you should be using this time to make money. To start with, you should have a general agreement covering important but basic terms you and your client must agree on. Setting basic terms for each project helps to protect you and inform your clients of how you work. Some of the terms your contract must cover include payment terms and the client’s proprietary details etc. If things work in your favor and you show significant growth in your career, you will need a specially crafted contract courtesy of a legal professional.\n\n<strong>Focusing your business</strong>\n\nFocusing the identity of your brand and the caliber of projects you undertake will make things much easier on your part from the marketing process to the design work. Pick one service or even two and take on work falling along those lines then decline the rest. Deciding on the services you intend to specialize in will help you translate this in your brand. Everything on your website should be reworded to suit those specific phrases and keywords and only exhibit this kind of work in your portfolio. Begin producing content centered on these services to display your expertise. This is all a result of marketing and it will direct traffic and new projects in your direction.\n\n&nbsp;",
+        "title": "Plan and conduct survey with incentives",
+        "post_excerpt": "",
+        "post_status": "publish",
+        "comment_status": "open",
+        "ping_status": "open",
+        "post_password": "",
+        "post_name": "implement-effective-online-career-strategy",
+        "to_ping": "",
+        "pinged": "",
+        "post_modified": "2022-01-02T22:44:57.000Z",
+        "post_modified_gmt": "2022-01-02T22:44:57.000Z",
+        "post_content_filtered": "",
+        "post_parent": 0,
+        "guid": "https://blog.wrenchboard.com/?p=33",
+        "menu_order": 0,
+        "post_type": "post",
+        "post_mime_type": "",
+        "comment_count": 0,
+        "meta_value": "surveys.jpg"
+    }
+];
+
+
+ return res1;
+  }
+
+export default UseCaseData;
+
+

app/about-us/AboutText.js

@@ -0,0 +1,157 @@
+import React from "react";
+
+import Design from "../assets/images/design.png";
+import Approach from "../assets/images/approach.png";
+import Interactive from "../assets/images/interactive.png";
+import Mobility from "../assets/images/mobility-approach.png";
+import Privacy from "../assets/images/privacy.png";
+import Seamless from "../assets/images/seamless.png";
+import Security from "../assets/images/security.png";
+
+function ServiceItem(props) {
+  return (
+    <div
+      className={`mt-0 p-4 appie-single-service-2 appie-single-service-about item-${props.index} wow animated fadeInUp`}
+      data-wow-duration="2000ms"
+      data-wow-delay={`${props.delay}ms`}
+      style={{ cursor: "default" }}
+    >
+      <div className="icon d-flex justify-content-center align-items-center">
+        <img src={props.image} alt="icon" />
+      </div>
+      <h4 className="title">{props.title}</h4>
+      <p>{props.description}</p>
+    </div>
+  );
+}
+
+function AboutTextComponent() {
+  return (
+    <>
+      <div className="container">
+        <div className="row">
+          <div className="row">
+            {servicesContent?.map(({ id, ...item }) => (
+              <div className="col-lg-3 col-md-6">
+                <ServiceItem index={id} {...item} />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default AboutTextComponent;
+
+const servicesContent = [
+  {
+    id: 1,
+    image: Design,
+    delay: 200,
+    title: "Engagement",
+    description:
+      "We encourage healthy online activities for individuals, groups, or households.",
+  },
+  {
+    id: 2,
+    image: Mobility,
+    delay: 400,
+    title: "Opportunity",
+    description:
+      "We prioritize developing a strong opportunity mindset for our users and teamwork.",
+  },
+  {
+    id: 3,
+    image: Interactive,
+    delay: 600,
+    title: "Modern",
+    description:
+        "We endeavor to improve our features to catch up to how we can best serve our users.",
+  },
+  {
+    id: 4,
+    image: Security,
+    delay: 600,
+    title: "Security & Safety",
+    description:
+      "Healthy communication and privacy are the foundation of all features now and in the future.",
+  },
+  // {
+  //   id: 4,
+  //   image: Mobility,
+  //   delay: 200,
+  //   title: "Social Media Management",
+  //   description:
+  //     "Teach youngsters the art of handling social media profiles for small enterprises, cultivating essential marketing and communication abilities while also generating income. Manage tasks, track responses, and stay connected effortlessly. Experience a true mobile lifestyle with WrenchBoard!",
+  // },
+  // {
+  //   id: 5,
+  //   image: Seamless,
+  //   delay: 400,
+  //   title: "Inspiring Future Leaders",
+  //   description:
+  //     "By offering a platform for kids to earn, learn, and contribute, WrenchBoard is nurturing the next generation of entrepreneurs, creators, and leaders. We're sowing the seeds of ambition and self-confidence, preparing them for a brighter future.",
+  // },
+  // {
+  //   id: 6,
+  //   image: Privacy,
+  //   delay: 600,
+  //   title: "Privacy",
+  //   description:
+  //     "Your privacy matters. WrenchBoard works without data sharing, ensuring your information stays secure. Manage tasks across platforms confidently, enjoying a unified experience that respects your privacy.",
+  // },
+];
+
+
+const servicesContentBAK = [
+  {
+    id: 1,
+    image: Design,
+    delay: 200,
+    title: "Unlocking Potential",
+    description:
+        "At WrenchBoard, we believe age should never limit one's ability to pursue their passions and generate income. Our platform offers a variety of categories for kids to explore and turn into profitable endeavors, fostering financial awareness and unlocking their potential for a brighter future.",
+  },
+  {
+    id: 2,
+    image: Approach,
+    delay: 400,
+    title: "Growing Money Mindset",
+    description:
+        "We prioritize developing a strong money mindset in Kids. WrenchBoard offers a safe and supportive space for kids to explore their passions, learn new skills, and earn money. By instilling the value of hard work, saving, and investing, we aim to empower the next generation to make informed financial decisions and reach their goals.",
+  },
+  {
+    id: 3,
+    image: Interactive,
+    delay: 600,
+    title: "Realtime Notifications",
+    description:
+        "Stay up-to-date with WrenchBoard! Our platform keeps you in the loop with convenient alerts and notifications. Choose your preferred method of receiving updates - email, text, or push notifications - and never miss a beat.",
+  },
+  {
+    id: 4,
+    image: Mobility,
+    delay: 200,
+    title: "Social Media Management",
+    description:
+        "Teach youngsters the art of handling social media profiles for small enterprises, cultivating essential marketing and communication abilities while also generating income. Manage tasks, track responses, and stay connected effortlessly. Experience a true mobile lifestyle with WrenchBoard!",
+  },
+  {
+    id: 5,
+    image: Seamless,
+    delay: 400,
+    title: "Inspiring Future Leaders",
+    description:
+        "By offering a platform for kids to earn, learn, and contribute, WrenchBoard is nurturing the next generation of entrepreneurs, creators, and leaders. We're sowing the seeds of ambition and self-confidence, preparing them for a brighter future.",
+  },
+  {
+    id: 6,
+    image: Privacy,
+    delay: 600,
+    title: "Privacy",
+    description:
+        "Your privacy matters. WrenchBoard works without data sharing, ensuring your information stays secure. Manage tasks across platforms confidently, enjoying a unified experience that respects your privacy.",
+  },
+];

app/about-us/HeaderAbout.js

@@ -0,0 +1,56 @@
+import React, { useEffect } from 'react';
+import logo from '../../assets/images/wrenchboard-logo-text.png';
+import StickyMenu from '../../lib/StickyMenu';
+import Navigation from '../Navigation';
+import getConfig from './../../Config/config'
+import { Link } from 'react-router-dom';
+
+function HeaderAbout({ action }) {
+    useEffect(() => {
+        StickyMenu();
+    });
+    var site = getConfig()[0];
+
+    return (
+        <>
+            <header className="appie-header-area appie-sticky">
+                <div className="container">
+                    <div className="header-nav-box">
+                        <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">
+                                    <Link to="/">
+                                        <img src={logo} alt="" width="175px" height="38px" loading='eager' />
+                                    </Link>
+                                </div>
+                            </div>
+                            <div className="col-lg-6 col-md-1 col-sm-1 order-3 order-sm-2">
+                                <div className="appie-header-main-menu">
+                                    <Navigation />
+                                </div>
+                            </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}>
+                                        <i className="fal fa-user"></i> Login
+                                    </a>
+                                    <a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
+                                        Get Started
+                                    </a>
+                                    <div
+                                        onClick={(e) => action(e)}
+                                        className="toggle-btn ml-30 canvas_open d-lg-none d-block"
+                                    >
+                                        <i className="fa fa-bars"></i>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </header>
+        </>
+    );
+}
+
+export default HeaderAbout;

app/about-us/HeroAbout.js

@@ -0,0 +1,49 @@
+
+function HeroAbout() {
+  return (
+    <>
+      <div className="appie-about-top-title-area">
+        <div className="container">
+          <div className="row">
+            <div className="col-lg-7">
+              <div className="appie-about-top-title">
+                <h2 className="title">Plan and reward accomplishment with ease.</h2>
+              </div>
+            </div>
+            <section className="appie-about-page-area">
+              <div className="container">
+                <div className="row">
+                  {/* col-lg-8 */}
+                  <div className="col-12">
+                    <div className="appie-about-page-content">
+                      <h3 className="title">
+                      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.
+                      </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.
+                      </p>
+                      <p>
+                        WrenchBoard is more than just a platform for rewards; it fosters holistic growth in children, and WrenchBoard prioritizes safety above all. We implement strict guidelines to ensure age-appropriate tasks and interactions, providing a worry-free space for kids and their guardians.
+
+                                {/*WrenchBoard prioritizes safety above all. Parents can set up family accounts to oversee their children's activities and earnings. We implement strict guidelines to ensure age-appropriate tasks and interactions, providing a worry-free space for both kids and their guardians.*/}
+                                {/*We believe that earning should go hand in hand with learning. As kids complete projects and earn, they also acquire essential life skills such as financial literacy, time management, and effective communication. WrenchBoard isn't just about making money; it's about fostering holistic growth.*/}
+
+
+                                </p>
+                      <p>Learn more at <a href={process.env.REACT_APP_DASH_URL}>www.WrenchBoard.com</a></p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </section>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default HeroAbout;

app/about-us/ServicesAbout.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import AboutTextComponent from './AboutText';
+
+function ServicesAbout() {
+  return (
+    <>
+      <section className="appie-services-2-area pt-20" id="service">
+        <div className="container">
+          <div className="row align-items-end">
+            <div className="col-12 col-lg-8">
+              <div className="appie-section-title pb-0">
+                <h3 className="appie-title">We’re driven by your values</h3>
+                {/* <p>{servicesContent.subTitle}</p> */}
+              </div>
+            </div>
+          </div>        
+        </div>
+      </section>
+    </>
+  );
+}
+
+export default ServicesAbout;

app/about-us/TeamAbout.js

@@ -0,0 +1,163 @@
+import React from 'react';
+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';
+
+function TeamAbout() {
+    return (
+        <>
+            <section className="appie-team-area appie-team-about-area pb-90">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-lg-12">
+                            <div className="appie-section-title text-center">
+                                <h3 className="appie-title">Meet our Team Members</h3>
+                                <p>Different layouts and styles for team sections.</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="row">
+                        <div className="col-lg-3 col-md-6">
+                            <div
+                                className="appie-team-item appie-team-item-about mt-30 wow animated fadeInUp"
+                                data-wow-duration="2000ms"
+                                data-wow-delay="200ms"
+                            >
+                                <div className="thumb">
+                                    <img src={team1} alt="" />
+                                    <ul>
+                                        <li>
+                                            <a href="#">
+                                                <i className="fab fa-facebook-f"></i>
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a href="#">
+                                                <i className="fab fa-twitter"></i>
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a href="#">
+                                                <i className="fab fa-pinterest-p"></i>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div className="content text-left">
+                                    <h5 className="title">Benjamin Evalent</h5>
+                                    <span>CEO-Founder</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="col-lg-3 col-md-6">
+                            <div
+                                className="appie-team-item appie-team-item-about mt-30 wow animated fadeInUp"
+                                data-wow-duration="2000ms"
+                                data-wow-delay="400ms"
+                            >
+                                <div className="thumb">
+                                    <img src={team2} alt="" />
+                                    <ul>
+                                        <li>
+                                            <a href="#">
+                                                <i className="fab fa-facebook-f"></i>
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a href="#">
+                                                <i className="fab fa-twitter"></i>
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a href="#">
+                                                <i className="fab fa-pinterest-p"></i>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div className="content text-left">
+                                    <h5 className="title">Benjamin Evalent</h5>
+                                    <span>CEO-Founder</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="col-lg-3 col-md-6">
+                            <div
+                                className="appie-team-item appie-team-item-about mt-30 wow animated fadeInUp"
+                                data-wow-duration="2000ms"
+                                data-wow-delay="600ms"
+                            >
+                                <div className="thumb">
+                                    <img src={team3} alt="" />
+                                    <ul>
+                                        <li>
+                                            <a href="#">
+                                                <i className="fab fa-facebook-f"></i>
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a href="#">
+                                                <i className="fab fa-twitter"></i>
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a href="#">
+                                                <i className="fab fa-pinterest-p"></i>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div className="content text-left">
+                                    <h5 className="title">Benjamin Evalent</h5>
+                                    <span>CEO-Founder</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="col-lg-3 col-md-6">
+                            <div
+                                className="appie-team-item appie-team-item-about mt-30 wow animated fadeInUp"
+                                data-wow-duration="2000ms"
+                                data-wow-delay="800ms"
+                            >
+                                <div className="thumb">
+                                    <img src={team4} alt="" />
+                                    <ul>
+                                        <li>
+                                            <a href="#">
+                                                <i className="fab fa-facebook-f"></i>
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a href="#">
+                                                <i className="fab fa-twitter"></i>
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a href="#">
+                                                <i className="fab fa-pinterest-p"></i>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div className="content text-left">
+                                    <h5 className="title">Benjamin Evalent</h5>
+                                    <span>CEO-Founder</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="col-lg-12">
+                            <div className="team-btn text-center mt-50">
+                                <a className="main-btn" href="https://www.wrenchboard.com/signup">
+                                   Get Started <i className="fal fa-arrow-right"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+}
+
+export default TeamAbout;

app/about-us/index.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import useToggle from '../../Hooks/useToggle';
+import BackToTop from '../BackToTop';
+import SignupHomeEight from '../HomeEight/SignupHomeEight';
+import FooterHomeOne from '../HomeOne/FooterHomeOne';
+import SponserHomeTwo from '../HomeTwo/SponserHomeTwo';
+import Drawer from '../Mobile/Drawer';
+import HeaderAbout from './HeaderAbout';
+import HeroAbout from './HeroAbout';
+import ServicesAbout from './ServicesAbout';
+import TeamAbout from './TeamAbout';
+import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
+import AboutTextComponent from '../AboutText/AboutText';
+
+function AboutUs() {
+    const [drawer, drawerAction] = useToggle(false);
+    return (
+        <>
+            <Drawer drawer={drawer} action={drawerAction.toggle} />
+            {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
+            <HeaderAbout drawer={drawer} action={drawerAction.toggle} />
+            <HeroAbout />
+            <ServicesAbout />
+            {/* <TeamAbout />*/}
+            {/* <SponserHomeTwo />
+           <SignupHomeEight />*/}
+           <AboutTextComponent/>
+            <FooterHomeOne className="appie-footer-about-area" />
+            <BackToTop />
+        </>
+    );
+}
+
+export default AboutUs;

app/about-us/page.tsx

@@ -0,0 +1,36 @@
+"use client"
+import React from 'react'
+import useToggle from '../Hooks/useToggle';
+import FooterHomeOne from '../components/FooterHomeOne';
+import HeroAbout from './HeroAbout';
+import ServicesAbout from './ServicesAbout';
+import AboutTextComponent from './AboutText';
+import HeaderAbout from './HeaderAbout';
+
+// 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 [drawer, drawerAction] = useToggle(false);
+
+  return (
+    <> 
+    <div>Abouut us  Here</div>
+    {/* <HeaderAbout drawer={drawer} action={drawerAction.toggle} /> */}
+    <HeroAbout />
+    <ServicesAbout />
+    <AboutTextComponent/>
+    <FooterHomeOne className="appie-footer-about-area" />
+    </>
+   
+  )
+}
+
+export default page

app/blog/blogdetail/page.tsx

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

@@ -0,0 +1,24 @@
+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 Here</div>
+    <FooterHomeOne className={undefined} />
+    </>
+   
+  )
+}
+
+export default page

app/components/BlogHomeOne.js

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import Blogs from '../News/Blogs';
+import React from 'react';
+import Blogs from './News/Blogs';
 
 function BlogHomeOne() {
     return (

app/components/HomeOne.js

@@ -1,15 +1,13 @@
 import React from 'react';
-import useToggle from '../Hooks/useToggle';
 // import BackToTop from '../BackToTop';
-import Drawer from '../Mobile/Drawer';
-// import BlogHomeOne from './BlogHomeOne';
+import HomeNav from './navigation/HomeNav'
+import BlogHomeOne from './BlogHomeOne';
 // import FeaturesHomeOne from './FeaturesHomeOne';
 import FooterHomeOne from './FooterHomeOne';
 import HeroHomeOne from './HeroHomeOne';
-// import HomeOneHeader from './HomeOneHeader';
 import ServicesHomeOne from './ServicesHomeOne';
-// import TrafficHomeOne from './TrafficHomeOne';
-// import TrafficHomeTwo from './TrafficHomeTwo';
+import TrafficHomeOne from './TrafficHomeOne';
+import TrafficHomeTwo from './TrafficHomeTwo';
 //import FeaturedScreen from './FeaturedScreen'; 
 import AfterHero from './AfterHero';
 import NextAfterHero from './NextAfterHero';
@@ -19,18 +17,17 @@ import NextAfterHero from './NextAfterHero';
 
 
 function HomeOne() {
-    // needed  const [drawer, drawerAction] = useToggle(false);
-
     return (
         <>
-          {/* <Drawer drawer={drawer} action={drawerAction.toggle} /> */}
-           <div className='text-center'>THIS IS HOME </div>
+           <HomeNav />
            <HeroHomeOne />
            <AfterHero />
            <NextAfterHero />
            <ServicesHomeOne />
+           <TrafficHomeOne />
+           <TrafficHomeTwo />
+           <BlogHomeOne />
            <FooterHomeOne />
-
         </>
     );
 }

app/components/HomeOneHeader.js

@@ -1,12 +1,11 @@
+"use client"
 import React, { useEffect } from 'react';
-import logo from '../../assets/images/wrenchboard-logo-text.png';
-import StickyMenu from '../../lib/StickyMenu';
-import Navigation from '../Navigation';
-import getConfig from './../../Config/config'
-import { Link } from 'react-router-dom';
+import logo from '../assets/images/wrenchboard-logo-text.png';
+import StickyMenu from '../lib/StickyMenu';
+import Navigation from './navigation/Navigation';
+import Image from 'next/image';
 
 function HomeOneHeader({ action, showLogoOnly = false }) {
-  var site = getConfig()[0];
   useEffect(() => {
     StickyMenu();
   }, []);
@@ -17,9 +16,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">
-                <Link to="/">
-                  <img src={logo} alt="WrenchBoard" loading='eager' width="175px" height="38px" />
-                </Link>
+                <a href="/">
+                  <Image src={logo} alt="WrenchBoard" loading='eager' width="175" height="38" />
+                </a>
               </div>
             </div>
 

app/components/News/Blog.js

@@ -0,0 +1,215 @@
+import React from 'react';
+import singlePost from '../../assets/images/single-post/1.jpg';
+import author from '../../assets/images/single-post/author.png';
+import cmnt1 from '../../assets/images/single-post/c1.png';
+import cmnt2 from '../../assets/images/single-post/c2.png';
+import cmnt3 from '../../assets/images/single-post/c3.png';
+
+function Blog() {
+    return (
+        <>
+            <div className="single-post-area">
+                <p>
+                    Tosser posh grub he lost his bottle bamboozled show off show off pick your nose
+                    and blow off cheesed off starkers what a load of rubbish, Jeffrey bubble and
+                    squeak I Charles a load of old tosh some dodgy chav wind up David gormless,
+                    hotpot arse over tit hanky panky bog-standard don't get shirty with me bloke
+                    Richard. Smashing he legged it in my flat bodge a blinding shot amongst
+                    brilliant blag, I grub A bit of how's your father bite your arm off the BBC the
+                    full monty chancer, bobby bender he nicked it down the pub Why cheeky bugger.
+                    Starkers pardon you bubble and squeak a blinding shot it's all gone to pot bits
+                    and bobs car boot lurgy so I said cheesed off boot Harry such a fibber, naff
+                    chinwag bamboozled the bee's knees bloke fanny around loo are you taking the
+                    piss barney off his nut cack. Arse over tit he nicked it that matie boy lost the
+                    plot pardon me my lady well cheers he legged it, boot bits and bobs brown bread
+                    is cras bamboozled bite your arm off down the pub brolly, cobblers horse play
+                    what a load of rubbish sloshed chancer say you mug cockup. Geeza some dodgy chav
+                    bonnet Oxford so I said pukka pardon you starkers cor blimey guvnor are you
+                    taking the piss, cheesed off in my flat cheeky posh down the pub horse play
+                    nancy boy plastered cobblers cack, morish chinwag the BBC my good sir jolly good
+                    cuppa amongst blatant. Grub owt to do with me cheeky bugger squiffy chinwag
+                    pukka say hunky-dory crikey quaint fanny around jolly good brown bread up the
+                    kyver cack zonked tickety boo mush morish.
+                </p>
+                <div className="post-thumb">
+                    <img src={singlePost} alt="" />
+                </div>
+                <h4 className="article-title">Logotype Masterclass with Jessica Hische</h4>
+                <p>
+                    Lost the plot morish bleeder absolutely bladdered my lady chinwag that bleeding
+                    Eaton blag, cheeky bugger burke matie boy brown bread say pukka off his nut
+                    sloshed mufty, squiffy show off show off pick your nose and blow off brolly bite
+                    your arm off bloke bubble and squeak hotpot happy days. Old spiffing cras bugger
+                    blimey chancer me old mucker vagabond you mug, amongst absolutely bladdered
+                    spend a penny ruddy wellies he lost his bottle hanky panky up the kyver bender,
+                    give us a bell my good sir car boot pear shaped young delinquent victoria sponge
+                    tomfoolery. Lavatory knackered pukka chip shop a blinding shot cor blimey guvnor
+                    bodge blower, barmy faff about cheeky nice one at public school. Have it down
+                    the pub posh matie boy wind up hunky-dory, he lost his bottle the full monty
+                    bugger all mate cheeky bugger cras chancer, absolutely bladdered amongst
+                    tomfoolery pukka. Knackered
+                </p>
+                <p>
+                    James Bond old happy days the wireless cracking goal bloke me old mucker, arse
+                    over tit blower mush the bee's knees chip shop the BBC, say lemon squeezy
+                    blatant what a load of rubbish bog-standard nancy boy. Mush spiffing good time
+                    brown bread cheeky bite your arm off chip shop bugger all mate, my lady down the
+                    pub is faff about pukka.
+                </p>
+                <blockquote>
+                    <p>
+                        I don't want no agro brilliant are you taking the piss skive off super boot
+                        chancer don't get shirty.
+                    </p>
+                    <cite>Indigo Violet</cite>
+                </blockquote>
+                <p>
+                    That faff about the full monty blower bubble and squeak cheeky old matie boy
+                    burke, the bee's knees what a load of rubbish golly gosh mufty is Elizabeth
+                    squiffy, lurgy chimney pot Jeffrey Richard naff Queen's English cheesed off. Old
+                    bonnet cheesed off lurgy me old mucker a blinding shot bits and bobs lavatory
+                    barney, say no biggie jolly good mush chancer pukka what a load of rubbish,
+                    Harry don't get shirty with me arse over tit he lost his bottle spiffing good
+                    time bubble and squeak say. I bog Harry a load of old tosh quaint brown bread
+                    get stuffed mate bobby, lemon squeezy boot bum bag chimney pot codswallop
+                    amongst, lavatory twit bits and bobs pardon you daft ummm I'm telling. Blatant
+                    matie boy say bugger all mate butty gormless, you mug pukka happy days bobby.
+                    Down the pub what a load of rubbish geeza faff about chancer bits and bobs daft
+                    lavatory boot victoria sponge spend a penny grub ummm I'm telling, absolutely
+                    bladdered A bit of how's your father arse over tit do one chimney pot tomfoolery
+                    porkies owt to do with me spiffing good time zonked.
+                </p>
+                <div className="post-tags">
+                    <h5>Tags:</h5>
+                    <a href="#">Bisy LMS</a>
+                    <a href="#">Design</a>
+                    <a href="#">General</a>
+                </div>
+                <div className="post-share">
+                    <h5>Share:</h5>
+                    <a className="fac" href="#">
+                        <i className="fab fa-facebook-f"></i>
+                    </a>
+                    <a className="twi" href="#">
+                        <i className="fab fa-twitter"></i>
+                    </a>
+                    <a className="goo" href="#">
+                        <i className="fab fa-google"></i>
+                    </a>
+                </div>
+                <div className="post-admin">
+                    <img src={author} alt="" />
+                    <a href="#">Justin Case</a>
+                    <span>About Author</span>
+                    <p>
+                        Me old mucker bits and bobs you mug tickety-boo a load of old tosh bender
+                        mufty bloke old daft.
+                    </p>
+                </div>
+            </div>
+            <div className="comment-area">
+                <h3>Comment (3)</h3>
+                <ol className="comment-list">
+                    <li>
+                        <div className="single-comment">
+                            <img src={cmnt1} alt="" />
+                            <h5>
+                                <a href="#">Jason Response</a>
+                            </h5>
+                            <span>April 03, 2019</span>
+                            <div className="comment">
+                                <p>
+                                    He legged it bevvy mush owt to do with me such fibber fa about
+                                    cup of tea sloshed morish butty bubble. Butty gormless lavatory
+                                    twit bits and bobs pardon you daft ummm I'm telling.
+                                </p>
+                            </div>
+                            <a className="comment-reply-link" href="#">
+                                <i className="fal fa-reply"></i>Reply
+                            </a>
+                            <div className="c-border"></div>
+                        </div>
+                        <ul className="children">
+                            <li>
+                                <div className="single-comment">
+                                    <img src={cmnt2} alt="" />
+                                    <h5>
+                                        <a href="#">Sue Shei</a>
+                                    </h5>
+                                    <span>April 14, 2019</span>
+                                    <div className="comment">
+                                        <p>
+                                            Super chancer cheeky bloke haggle give us a bell well
+                                            mufty chinwag say bite. lavatory twit bits and bobs
+                                            pardon you daft ummm I'm telling. Blatant matie boy say
+                                            bugger all mate butty gormless
+                                        </p>
+                                    </div>
+                                    <a className="comment-reply-link" href="#">
+                                        <i className="fal fa-reply"></i>Reply
+                                    </a>
+                                    <div className="c-border"></div>
+                                </div>
+                            </li>
+                            <li>
+                                <div className="single-comment">
+                                    <img src={cmnt3} alt="" />
+                                    <h5>
+                                        <a href="#">Douglas Lyphe</a>
+                                    </h5>
+                                    <span>July 27, 2020</span>
+                                    <div className="comment">
+                                        <p>
+                                            Oxford baking cakes dropped clanger fanny around
+                                            vagabond amongst cor blimey guvnor. Blatant matie boy
+                                            say bugger all mate butty gormless lavatory twit bits
+                                            and bobs pardon you daft ummm I'm telling.
+                                        </p>
+                                    </div>
+                                    <a className="comment-reply-link" href="#">
+                                        <i className="fal fa-reply"></i>Reply
+                                    </a>
+                                    <div className="c-border"></div>
+                                </div>
+                            </li>
+                        </ul>
+                    </li>
+                </ol>
+            </div>
+            <div className="comment-form-area">
+                <h3>Post a Comment</h3>
+                <p>Your email address will not be published. Required fields are marked</p>
+                <div className="comment-form">
+                    <form className="row" action="#" method="post">
+                        <div className="col-md-6">
+                            <input type="text" name="name" placeholder="Name" />
+                        </div>
+                        <div className="col-md-6">
+                            <input type="email" name="email" placeholder="Email" />
+                        </div>
+                        <div className="col-md-12">
+                            <input type="url" name="url" placeholder="Website" />
+                        </div>
+                        <div className="col-md-12">
+                            <div className="save-comment">
+                                <input id="history-name" type="checkbox" />
+                                <label htmlFor="history-name">
+                                    Save my name, email, and website in this browser for the next
+                                    time I comment.
+                                </label>
+                            </div>
+                        </div>
+                        <div className="col-md-12">
+                            <textarea placeholder="Coment"></textarea>
+                        </div>
+                        <div className="col-md-12">
+                            <button type="submit">Post Comment</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default Blog;

app/components/News/BlogSideBar.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import BlogImg1 from '../../assets/images/blog/p1.jpg';
+import BlogImg2 from '../../assets/images/blog/p2.jpg';
+import BlogImg3 from '../../assets/images/blog/p3.jpg';
+import BlogImg4 from '../../assets/images/blog/p4.jpg';
+
+function BlogSideBar() {
+    return (
+        <div className="blog-sidebar">
+            <aside className="widget widget-search">
+                <form className="search-form" action="#" method="post">
+                    <input type="search" name="s" placeholder="Search..." />
+                    <button type="submit">
+                        <i className="fal fa-search"></i>
+                    </button>
+                </form>
+            </aside>
+            <aside className="widget widget-categories">
+                <h3 className="widget-title">Categories</h3>
+                <ul>
+                    <li>
+                        <a href="#">Web Design</a>
+                        <span>(24)</span>
+                    </li>
+                    <li>
+                        <a href="#">Marketing</a>
+                        <span>(15)</span>
+                    </li>
+                    <li>
+                        <a href="#">Frontend</a>
+                        <span>(8)</span>
+                    </li>
+                    <li>
+                        <a href="#">IT & Software</a>
+                        <span>(13)</span>
+                    </li>
+                    <li>
+                        <a href="#">Photography</a>
+                        <span>(4)</span>
+                    </li>
+                    <li>
+                        <a href="#">Technology</a>
+                        <span>(16)</span>
+                    </li>
+                    <li>
+                        <a href="#">General</a>
+                        <span>(12)</span>
+                    </li>
+                </ul>
+            </aside>
+            <aside className="widget widget-trend-post">
+                <h3 className="widget-title">Popular Posts</h3>
+                <div className="popular-post">
+                    <a href="single-post.html">
+                        <img src={BlogImg1} alt="" />
+                    </a>
+                    <h5>
+                        <a href="single-post.html">Using creative problem Solving</a>
+                    </h5>
+                    <span>March 10, 2020</span>
+                </div>
+                <div className="popular-post">
+                    <a href="single-post.html">
+                        <img src={BlogImg2} alt="" />
+                    </a>
+                    <h5>
+                        <a href="single-post.html">Fundamentals of UI Design</a>
+                    </h5>
+                    <span>Jan 14, 2020</span>
+                </div>
+                <div className="popular-post">
+                    <a href="single-post.html">
+                        <img src={BlogImg3} alt="" />
+                    </a>
+                    <h5>
+                        <a href="single-post.html">Making music with Other people</a>
+                    </h5>
+                    <span>April 12, 2020</span>
+                </div>
+                <div className="popular-post">
+                    <a href="single-post.html">
+                        <img src={BlogImg4} alt="" />
+                    </a>
+                    <h5>
+                        <a href="single-post.html">Brush strokes energize Trees in paintings</a>
+                    </h5>
+                    <span>July 4, 2020</span>
+                </div>
+            </aside>
+            <aside className="widget">
+                <h3 className="widget-title">Popular Tags</h3>
+                <div className="tags">
+                    <a href="#">Bisy LMS</a>
+                    <a href="#">Design</a>
+                    <a href="#">General</a>
+                    <a href="#">Online</a>
+                    <a href="#">Prevention</a>
+                    <a href="#">Artist</a>
+                    <a href="#">Education</a>
+                    <a href="#">Motivation</a>
+                    <a href="#">Politico</a>
+                    <a href="#">Live Cases</a>
+                </div>
+            </aside>
+        </div>
+    );
+}
+
+export default BlogSideBar;

app/components/News/Blogs.js

@@ -0,0 +1,86 @@
+"use client"
+import React, { useEffect, useState } from "react";
+import blogOne from "../../assets/images/blog/1.jpg";
+import BlogData from "../../Services/BlogData";
+
+/**
+ * Fetches blog data from an API and renders the blogs on the page.
+ * Displays a maximum of six blogs on the home page and all blogs on other pages.
+ */
+function Blogs({ pathname }) {
+  const [blogs, setBlogs] = useState([]);
+
+  useEffect(() => {
+    const fetchBlogs = async () => {
+      try {
+        const res = await BlogData();
+        setBlogs(res.data);
+      } catch (err) {
+        console.log("Error loading blogdata", err);
+      }
+    };
+
+    fetchBlogs();
+  }, []);
+
+  const renderBlogs = () => {
+    return blogs?.blogdata?.map((blog, index) => {
+      const options = {
+        weekday: "short",
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      };
+      const postDt = new Date(blog.post_date).toLocaleDateString(
+        "en-US",
+        options
+      );
+      const blgImg =
+        blog.meta_value != null
+          ? `${blogs?.blogconfig?.media_url}/${blog.meta_value}`
+          : blogOne;
+
+      return (
+        <div key={blog.id} className="col-lg-4 col-md-6">
+          <div
+            className="appie-blog-item mt-30 wow animated fadeInUp"
+            data-wow-duration="3000ms"
+            data-wow-delay="200ms"
+          >
+            <a href={`/blog/blogdetail/${blog?.id}`} className="thumb">
+              <img 
+                src={blgImg}
+                alt={blog.post_title} 
+                width={370} height={'auto'}
+                // style={{height: 'auto' }}
+              />
+            </a>
+            <div className="content">
+              <div className="blog-meta">
+                <ul>
+                  <li style={{cursor: "pointer"}}>{postDt}</li>
+                </ul>
+              </div>
+              <h3 className="title">
+                <a href={`/blog/blogdetail/${blog?.id}`}>{blog.post_title}</a>
+              </h3>
+              <a href={`/blog/blogdetail/${blog?.id}`}>
+                Learn More <i className="fal fa-arrow-right" />
+              </a>
+            </div>
+          </div>
+        </div>
+      );
+    });
+  };
+
+  return (
+    <>
+      <div className="row">
+        {pathname === "/" ? renderBlogs()?.slice(0, 6) : renderBlogs()}
+      </div>
+    </>
+  );
+}
+
+export default Blogs;

app/components/News/HeaderNews.js

@@ -0,0 +1,54 @@
+import React, { useEffect } from 'react';
+import logo from '../../assets/images/wrenchboard-logo-text.png';
+import StickyMenu from '../../lib/StickyMenu';
+import Navigation from '../Navigation';
+import getConfig from './../../Config/config'
+
+function HeaderNews({ action }) {
+    var site = getConfig()[0];
+    useEffect(() => {
+        StickyMenu();
+    });
+    return (
+        <>
+            <header className="appie-header-area appie-header-page-area appie-sticky">
+                <div className="container">
+                    <div className="header-nav-box header-nav-box-3 header-nav-box-inner-page">
+                        <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="/">
+                                        <img src={logo} alt="" />
+                                    </a>
+                                </div>
+                            </div>
+                            <div className="col-lg-6 col-md-1 col-sm-1 order-3 order-sm-2">
+                                <div className="appie-header-main-menu">
+                                    <Navigation />
+                                </div>
+                            </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}>
+                                        <i className="fal fa-user"></i> Login
+                                    </a>
+                                    <a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
+                                        Get Started
+                                    </a>
+                                    <div
+                                        onClick={(e) => action(e)}
+                                        className="toggle-btn ml-30 canvas_open d-lg-none d-block"
+                                    >
+                                        <i className="fa fa-bars"></i>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </header>
+        </>
+    );
+}
+
+export default HeaderNews;

app/components/News/HeroNews.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+function HeroNews({ title, breadcrumb }) {
+    return (
+        <>
+            <div className="appie-page-title-area">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-lg-12">
+                            <div className="appie-page-title-item">
+                                <h3 className="title">{title}</h3>
+                                <nav aria-label="breadcrumb">
+                                    <ol className="breadcrumb">
+                                        {breadcrumb.map((value) => (
+                                            <li key={Math.random()} className="breadcrumb-item">
+                                                <Link to={value.link}>{value.title}</Link>
+                                            </li>
+                                        ))}
+                                    </ol>
+                                </nav>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default HeroNews;

app/components/News/SingleNews.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import useToggle from '../../Hooks/useToggle';
+import BackToTop from '../BackToTop';
+import FooterHomeOne from '../HomeOne/FooterHomeOne';
+import Drawer from '../Mobile/Drawer';
+import Blog from './Blog';
+import BlogSideBar from './BlogSideBar';
+import HeaderNews from './HeaderNews';
+import HeroNews from './HeroNews';
+import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
+
+function SingleNews() {
+    const [drawer, drawerAction] = useToggle(false);
+    return (
+        <>
+            <Drawer drawer={drawer} action={drawerAction.toggle} />
+            {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
+            <HeaderNews action={drawerAction.toggle} />
+            <HeroNews
+                title="Blog"
+                breadcrumb={[
+                    { link: '/', title: 'home' },
+                    { link: '/news', title: 'Blogs' },
+                    { link: '/news/single-news', title: 'Blog' },
+                ]}
+            />
+            <section className="blogpage-section">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-lg-8 col-md-7">
+                            <Blog />
+                        </div>
+                        <div className="col-lg-4 col-md-5">
+                            <BlogSideBar />
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <FooterHomeOne />
+            <BackToTop />
+        </>
+    );
+}
+
+export default SingleNews;

app/components/News/index.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import useToggle from '../../Hooks/useToggle';
+import BackToTop from '../BackToTop';
+import FooterHomeOne from '../HomeOne/FooterHomeOne';
+import Drawer from '../Mobile/Drawer';
+import Blogs from './Blogs';
+import BlogSideBar from './BlogSideBar';
+import HeaderNews from './HeaderNews';
+import HeroNews from './HeroNews';
+import StickyHeaderNav from '../StickyHeader/StickyHeaderNav';
+
+function News() {
+    const [drawer, drawerAction] = useToggle(false);
+    return (
+        <>
+            <Drawer drawer={drawer} action={drawerAction.toggle} />
+            {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
+            <HeaderNews action={drawerAction.toggle} />
+            <HeroNews
+                title="Blogs"
+                breadcrumb={[
+                    { link: '/', title: 'home' },
+                    { link: '/news', title: 'Blogs' },
+                ]}
+            />
+            <section className="blogpage-section">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-lg-12 col-md-7">
+                            <Blogs />
+                        </div>
+                      
+                    </div>
+                </div>
+            </section>
+            <FooterHomeOne />
+            <BackToTop />
+        </>
+    );
+}
+
+export default News;

app/components/NextAfterHero.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import serviceThumb from '../assets/images/service-thumb-1.png';
+import Image from 'next/image';
 
 function NextAfterHero() {
     return (
@@ -111,7 +112,7 @@ function NextAfterHero() {
                         </div>
                         <div className="col-lg-5">
                             <div className="service-thumb">
-                                <img src={serviceThumb} alt="" />
+                                <Image src={serviceThumb} alt="" />
                             </div>
                         </div>
                     </div>

app/components/TrafficHomeOne.js

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

app/components/TrafficHomeTwo.js

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

app/components/navigation/HomeNav.js

@@ -0,0 +1,15 @@
+"use client"
+import React from 'react'
+import useToggle from '../../Hooks/useToggle'
+import HomeOneHeader from '../HomeOneHeader'
+import Drawer from '../../Mobile/Drawer'
+
+export default function HomeNav() {
+    const [drawer, drawerAction] = useToggle(false);
+  return (
+    <>
+        <Drawer drawer={drawer} action={drawerAction.toggle} />
+        <HomeOneHeader action={drawerAction.toggle} />
+    </>
+  )
+}

app/components/navigation/Navigation.js

@@ -0,0 +1,34 @@
+import React from 'react';
+
+function Navigation() {
+    return (
+        <>
+            <ul>
+                <li>
+                    <a href="/">Home</a>
+                </li>
+                <li>
+                    <a href="/about-us">About</a>
+                </li>
+                {/* <li>
+                    <a href="#">
+                        Resources <i className="fal fa-angle-down" />
+                    </a>
+                    <ul className="sub-menu">
+                        <li>
+                            <Link to="/about-us">About</Link>
+                        </li>
+                        <li>
+                            <Link to="/blog">Blog</Link>
+                        </li>
+                        <li>
+                            <Link to="/faq">FAQs</Link>
+                        </li>
+                    </ul>
+                </li> */}
+            </ul>
+        </>
+    );
+}
+
+export default Navigation;

app/contact/page.tsx

@@ -0,0 +1,24 @@
+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>Contact us Here</div>
+    <FooterHomeOne className={undefined} />
+    </>
+   
+  )
+}
+
+export default page

app/faq/page.tsx

@@ -0,0 +1,24 @@
+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>Faq Here</div>
+    <FooterHomeOne className={undefined} />
+    </>
+   
+  )
+}
+
+export default page

app/layout.tsx

@@ -5,8 +5,8 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "WrenchBoard: Reward Accomplishments | Get Family Engaged",
+  description: "Empower families to reward accomplishment, set goals, and encourage kids to understand goals",
 };
 
 export default function RootLayout({

app/privacy/page.tsx

@@ -0,0 +1,24 @@
+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>Privacy Here</div>
+    <FooterHomeOne className={undefined} />
+    </>
+   
+  )
+}
+
+export default page

app/resources/page.tsx

@@ -0,0 +1,24 @@
+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>Resources Here</div>
+    <FooterHomeOne className={undefined} />
+    </>
+   
+  )
+}
+
+export default page

app/service/page.tsx

@@ -0,0 +1,24 @@
+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>Service Here</div>
+    <FooterHomeOne className={undefined} />
+    </>
+   
+  )
+}
+
+export default page

app/terms/page.tsx

@@ -0,0 +1,24 @@
+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>Terms Here</div>
+    <FooterHomeOne className={undefined} />
+    </>
+   
+  )
+}
+
+export default page

app/use-cases/page.tsx

@@ -0,0 +1,24 @@
+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>use Case Here</div>
+    <FooterHomeOne className={undefined} />
+    </>
+   
+  )
+}
+
+export default page

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "axios": "^1.7.2",
     "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18",