Merge branch 'contact-address' of WrenchBoard/WrenchBoardMainSite2025 into master

This reverts commit c27e8a36b2.

.env

@@ -1,3 +1,4 @@
+APP_PORT=9081
 ESLINT_NO_DEV_ERRORS=true
 
 NEXT_PUBLIC_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
@@ -12,6 +13,7 @@ NEXT_PUBLIC_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?
 NEXT_PUBLIC_FACEBOOK_LINK='https://www.facebook.com/wrenchboard'
 NEXT_PUBLIC_TWITTER_LINK='https://twitter.com/wrenchboard/'
 NEXT_PUBLIC_LINKEDIN_LINK="https://www.linkedin.com/company/wrenchboard/"
+NEXT_PUBLIC_YOUTUBE_LINK="https://www.youtube.com/@WrenchBoard/"
 NEXT_PUBLIC_SUPPORT_EMAIL='support@wrenchboard.com'
 NEXT_PUBLIC_SUPPORT_PHONE='404 855-7966'
 NEXT_PUBLIC_SUPPORT_PHONE_NG='(+420) 336 476 328'

.env.development

@@ -1,3 +1,4 @@
+APP_PORT=9081
 ESLINT_NO_DEV_ERRORS=true
 
 NEXT_PUBLIC_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"

.env.production

@@ -1,7 +1,8 @@
+APP_PORT=9081
 ESLINT_NO_DEV_ERRORS=true
 
-NEXT_PUBLIC_AUX_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
-NEXT_PUBLIC_USERS_ENDPOINT="https://apigate.lotus.g1.wrenchboard.com/en/wrench/api/v1"
+NEXT_PUBLIC_AUX_ENDPOINT="https://apigate.nebula.g1.wrenchboard.com/en/wrench/api/v1"
+NEXT_PUBLIC_USERS_ENDPOINT="https://apigate.nebula.g1.wrenchboard.com/en/wrench/api/v1"
 
 NEXT_PUBLIC_SITE_NAME='WrenchBoard'
 NEXT_PUBLIC_DASH_URL='https://users.wrenchboard.com'

FeaturedScreenTwo.js

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

app/Services/ContactData.js

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

app/Services/FaqData.js

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

app/Services/JobsData.js

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

app/Services/UseCaseData.js

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

app/about-us/AboutText.js

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

app/about-us/HeaderAbout.js

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

app/about-us/HeroAbout.js

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

app/about-us/TeamAbout.js

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

app/assets/css/main.css

@@ -62,7 +62,7 @@ h4,
 h5,
 h6 {
   font-family: "Roboto", sans-serif;
-  font-weight: 900;
+  font-weight: 900 !important;
   color: #0e1133;
   margin: 0px;
 }
@@ -2046,7 +2046,7 @@ p {
   right: -30px;
   top: 50%;
   transform: translateY(-50%);
-  box-shadow: 0px 30px 70px 0px rgba(68, 1, 15, 0.2);
+  /* box-shadow: 0px 30px 70px 0px rgba(68, 1, 15, 0.2); */
 }
 .appie-hero-thumb::before {
   position: absolute;
@@ -2859,7 +2859,7 @@ p {
 .appie-features-tabs-btn .nav a {
   border-right: 3px solid #e8eaef;
   border-radius: 0;
-  font-size: 15px;
+  font-size: 18px;
   font-weight: 500;
   color: #505056;
 }
@@ -6117,7 +6117,7 @@ blockquote cite {
   padding-top: 250px;
   width: 100%;
   min-height: 100vh;
-  background: url("../images//wrench-page-notfound.jpg") center/cover;
+  background: url(/assets//images/wrench-page-notfound.jpg) center/cover;
   position: relative;
   /* z-index: 1; */
 }
@@ -6809,6 +6809,31 @@ blockquote cite {
   border-color: #db0f30;
 }
 
+.refer-container a {
+  position: relative;
+  padding-left: 12px;
+}
+
+.refer-container a::before{
+  content: "■";
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 0px;
+  font-size: 12px;
+
+}
+
+.refer-container a {
+  border: none;
+  color: #505056;
+  margin-top: 20px;
+}
+.refer-container a:hover {
+  color: #4687ba;
+  background-color: transparent;
+  border: none;
+}
 /*===========================
     12.APPIE COUNTER css 
 ===========================*/
@@ -8639,29 +8664,29 @@ LND PAGE STYLE STARTS HERE
 }
 
 
-/* -----------Interface_Section-Css-Start----------------- */
-
+/* -----------Interface_Section-Css-Start FOR HOME IMAGE SLIDERS ----------------- */
 /* interface wraper */
-.interface_section .screen_slider {
+/* .interface_section .screen_slider {
   margin-top: 35px;
-  /* min-height: 520px; */
+  min-height: 520px;
   display: flex;
   align-items: center;
+} */
+
+.carousel-container{
+  padding: 120px 0px 50px;
 }
 
-/* interface images */
-.interface_section .owl-item .screen_frame_img img {
+.react-multi-carousel, .slick-slide{
   transform: scale(.9);
-  /* border: 2px solid #000; */
-  border-radius: 20px;
-  transition: 1s all;
+  transition: all 2s;
+  /* border: 2px solid #000;
   margin: 0 auto;
   height: 520px;
-  width: auto;
+  width: auto; */
 }
 
-.interface_section .owl-item.center .screen_frame_img img {
+.react-multi-carousel-item--active, .slick-center{
   transform: scale(1);
-  /* border: 3px solid #000; */
-  /* padding: 5px; */
-}
+  transition: all 2s;
+}

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

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

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

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

app/blog/blogdetail/Blog.jsx

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

app/blog/blogdetail/BlogSideBar.js

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

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

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

app/components/AcceptCookies.js

@@ -0,0 +1,44 @@
+"use client";
+import React, { useLayoutEffect, useState } from 'react';
+
+export default function AcceptCookies() {
+  // Safe cookie getter
+  function getCookie(name) {
+    if (typeof document === 'undefined') return null; // SSR safety
+    const value = `; ${document.cookie}`;
+    const parts = value.split(`; ${name}=`);
+    if (parts.length === 2) return parts.pop().split(';').shift();
+    return null;
+  }
+
+  const [cookies, setCookies] = useState(true); // Start as true
+
+  const acceptCookies = () => {
+    document.cookie = `use_cookies=${encodeURIComponent('true')}; path=/; max-age=31536000`; // 1 year
+    setCookies(true);
+  };
+
+  useLayoutEffect(()=>{
+      const useCookies = getCookie('use_cookies');
+      if (useCookies && decodeURIComponent(useCookies) === 'true') {
+          setCookies(true);
+        }else{
+            setCookies(false)
+        }
+  },[])
+
+  return (
+    <>
+      {cookies ? <></> : (
+        <div className={`${cookies ? 'slide-down' : 'slide-up'} cookies-wrapper position-fixed d-lg-flex justify-content-center align-items-center gap-5 p-2`}>
+          <p className="m-0">
+            This website uses cookies to provide you the best experience possible, as well as for tracking performance and marketing purposes. You can check our privacy policy for more information. By clicking &#x275B;&#x275B;Confirm&#x275C;&#x275C; or by continuing to use our website, you consent to our use of cookies.
+          </p>
+          <button onClick={acceptCookies} className="px-5 py-2">
+            Accept
+          </button>
+        </div>
+      )}
+    </>
+  );
+}

app/components/AfterHero.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import thumb5 from '../assets/images/about-thumb-5.png';
-import cardImg from '../assets/images/home/wrench-card-only.png'
-// import bg from '../assets/images/background-bg.jpg'
 import Image from 'next/image';
 
+import cardImg from '../assets/images/home/wrench-card-only.png'
+import wrenchAgent from '../assets/images/home/wrench-agent.png'
+// import bg from '../assets/images/background-bg.jpg'
+
 function AfterHero() {
     return (
         <>
@@ -29,7 +30,7 @@ function AfterHero() {
                                             Reward Accomplishments
                                         </h3>
                                         <p>
-                                            Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform to plan rewards off pick your nose and blow
+                                            On WrenchBoard, set goals, tasks, or anything else that motivates or needs to be done, and reward completion. WrenchBoard is the platform for planning rewards, engaging, and connecting with family.
                                         </p>
                                         <div className=''>
                                             <a className="mb-5 mb-md-0 main-btn" href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>
@@ -51,24 +52,26 @@ function AfterHero() {
                         </div>
                         <div className="col-lg-5">
                             <div className='appie-about-container'>
-                                <div className='row appie-about-8-box'>
+                                <div className='h-100 row appie-about-8-box'>
                                     <div className="col-12 col-md-6">
-                                        <h3 className="title">
-                                            Assign Faster with <br />
-                                            wrenchAgent
-                                        </h3>
-                                        <p>
-                                            Ask our &#x275B;&#x275B;<span className=''>wrench</span><span className=''>Agent</span>&#x275C;&#x275C; Generative AI to assist
-                                        </p>
-                                        <div className=''>
-                                            <a className="mb-5 mb-md-0 main-btn" href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>
-                                                Learn More <i className="fal fa-arrow-right" />
-                                            </a>
+                                        <div className='h-100 d-flex flex-column justify-content-between'>
+                                            <h3 className="title">
+                                                Assign Faster with <br />
+                                                wrenchAgent
+                                            </h3>
+                                            <p>
+                                                Ask our &#x275B;&#x275B;<span className=''>wrench</span><span className=''>Agent</span>&#x275C;&#x275C; Generative AI to assist
+                                            </p>
+                                            <div className=''>
+                                                <a className="mb-5 mb-md-0 main-btn" href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>
+                                                    Learn More <i className="fal fa-arrow-right" />
+                                                </a>
+                                            </div>
                                         </div>
                                     </div>
                                     <div className="col-12 col-md-6">
                                         <Image
-                                            src={thumb5}
+                                            src={wrenchAgent}
                                             className='w-100 h-100'
                                             width={'100%'}
                                             height={'100%'}

app/components/Error/index.js

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

app/components/FeaturedScreen.js

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

app/components/FeaturedScreenTwo.js

@@ -0,0 +1,83 @@
+"use client"
+// NOTE React-Slick and slick-carousel goes together. DO install both
+import React from 'react';
+import Slider from 'react-slick';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+import Image from 'next/image'
+
+export default function FeaturedScreenTwo() {
+    const settings = {
+        dots: true,
+        autoplay: true,
+        infinite: true,
+        centerMode: true,
+        
+        className: 'center',
+        centerPadding: '60px',
+      
+        slidesToShow: 5,
+        slidesToScroll: 1,
+        speed: 4000,
+        // autoplaySpeed: 2000,
+        cssEase: "linear",
+      
+        responsive: [
+          {
+            breakpoint: 1024,
+            settings: {
+              slidesToShow: 5,
+              slidesToScroll: 1,
+            //   initialSlide: 1,
+            //   infinite: true,
+            //   dots: true,
+            },
+          },
+          {
+            breakpoint: 600,
+            settings: {
+              slidesToShow: 3,
+              slidesToScroll: 1,
+            },
+          },
+          {
+            breakpoint: 480,
+            settings: {
+              slidesToShow: 1,
+              slidesToScroll: 1,
+            },
+          },
+        ],
+      };
+    
+    return (
+        <div className='carousel-container'>
+          <Slider
+            {...settings}
+          >
+            {/* here you can also pass any other element attributes. Also, you can use your custom components as slides */}
+            <div className='slider-img-con'>
+              <img src={'/assets/images/slider/app_sliders/screen_1.png'} alt="image" />
+            </div>
+            <div className='slider-img-con'>
+              <img src={'/assets/images/slider/app_sliders/screen_2.png'} alt="image" />
+            </div>
+            <div className='slider-img-con'>
+              <img src={'/assets/images/slider/app_sliders/screen_3.png'} alt="image" />
+            </div>
+            <div className='slider-img-con'>
+              <img src={'/assets/images/slider/app_sliders/screen_6.png'} alt="image" />
+            </div>
+            <div className='slider-img-con'>
+              <img src={'/assets/images/slider/app_sliders/screen_4.png'} alt="image" />
+            </div>
+            <div className='slider-img-con'>
+              <img src={'/assets/images/slider/app_sliders/screen_7.png'} alt="image" />
+            </div>
+            <div className='slider-img-con'>
+              <img src={'/assets/images/slider/app_sliders/screen_5.png'} alt="image" />
+            </div>
+          </Slider>
+        </div>
+      );
+}

app/components/FooterHomeOne.js

@@ -31,21 +31,25 @@ function FooterHomeOne({ className }) {
                                 <Link href="/service">
                                     Read More <i className="fal fa-arrow-right" />
                                 </Link>
-                                <div className="social mt-30">
+                                {/* <div className="social mt-30">
                                     <ul>
                                         <li>
-                                            <a href={site.facebook_link}>
-                                                <i className="fab fa-facebook-f" />
+                                            <a target='_blank' href={site.facebook_link}>
+                                                <i className="fab fa-facebook-f"/>
                                             </a>
                                         </li>
                                         <li>
-                                            <a href={process.env.NEXT_PUBLIC_TWITTER_LINK}>
-                                                {/* <i className="fab fa-twitter" /> */}
+                                            <a target='_blank' href={process.env.NEXT_PUBLIC_TWITTER_LINK}>
                                                 <i className="fab fa-x-twitter"></i>
                                             </a>
                                         </li>
+                                        <li>
+                                            <a target='_blank' className="you" href={process.env.NEXT_PUBLIC_YOUTUBE_LINK}>
+                                                <i className="fab fa-youtube"></i>
+                                            </a>
+                                        </li>
                                     </ul>
-                                </div>
+                                </div> */}
                             </div>
                         </div>
                         <div className="col-lg-2 col-md-6">
@@ -79,7 +83,7 @@ function FooterHomeOne({ className }) {
                                         <Link href="/contact">Contact</Link>
                                     </li>
                                     <li>
-                                        <Link href="/faq">Faqs</Link>
+                                        <Link href="/faq">FAQs</Link>
                                     </li>
                                     <li>
                                         <a href="https://blog.wrenchboard.com/resources/">Resources</a>
@@ -102,7 +106,7 @@ function FooterHomeOne({ className }) {
                                             <i className="fal fa-envelope" /> {site.support_email}
                                         </a>
                                     </li>
-                                    <li>
+                                    {/* <li>
                                         <a href="#">
                                             <i className="fal fa-phone" />  404-855-7966
                                         </a>
@@ -111,14 +115,35 @@ function FooterHomeOne({ className }) {
                                         <a href="#">
                                             <i className="fal fa-map-marker-alt" />Atlanta, GA 30339 
                                         </a>
-                                    </li>
+                                    </li> */}
                                 </ul>
                             </div>
+                            <div className='footer-about-widget'>
+                                <div className="social mt-30">
+                                    <ul>
+                                        <li>
+                                            <a target='_blank' href={site.facebook_link}>
+                                                <i className="fab fa-facebook-f"/>
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a target='_blank' href={process.env.NEXT_PUBLIC_TWITTER_LINK}>
+                                                <i className="fab fa-x-twitter"></i>
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a target='_blank' className="you" href={process.env.NEXT_PUBLIC_YOUTUBE_LINK}>
+                                                <i className="fab fa-youtube"></i>
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
                         </div>
                     </div>
                     <div className="row">
                         <div className="col-lg-12">
-                            <div className="footer-copyright d-flex align-items-center justify-content-between pt-2">
+                            <div className="footer-copyright d-lg-flex align-items-center justify-content-between pt-2">
                                 <div className="apps-download-btn">
                                     <ul>
                                         <li>

app/components/HeroHomeOne.js

@@ -3,6 +3,7 @@ import React from 'react';
 import Image from 'next/image'
 
 import heroThumbTwo from '../assets/images/app-pic.png';
+import AI from '../assets/images/home/ai-assisted.png'
 
 import CustomSlider from './customSlider/CustomSlider'
 
@@ -32,7 +33,7 @@ function HeroHomeOne() {
                   Turn Chores into Exciting Challenges and Earn <span className='earn-rewards px-2'>Rewards!</span>
                 </h1>
                 <p>Your place to set family goals and reward achievements. Find tasks to earn from, or build a task portfolio and find others to perform tasks for you.</p>
-                <ul className='d-flex justify-content-center justify-content-lg-start'>
+                <ul className='d-sm-flex justify-content-center justify-content-lg-start'>
                   <li className=''>
                       <a className="item-2" target='_blank'  href={process.env.NEXT_PUBLIC_APPLE_APP}>
                           <i className="fab fa-apple"></i>
@@ -74,9 +75,9 @@ function HeroHomeOne() {
                   data-wow-delay="600ms"
                 >
                   <Image
-                    src={heroThumbTwo}
-                    width={'100%'}
-                    height={'100%'}
+                    src={AI}
+                    width={'150'}
+                    height={'150'}
                     alt="Image"
                   />
                 </div>

app/components/HomeOne.js

@@ -4,16 +4,15 @@ import BlogHomeOne from './BlogHomeOne';
 // import FeaturesHomeOne from './FeaturesHomeOne';
 import FooterHomeOne from './FooterHomeOne';
 import HeroHomeOne from './HeroHomeOne';
-import ServicesHomeOne from './ServicesHomeOne';
+// import ServicesHomeOne from './ServicesHomeOne';
 import TrafficHomeOne from './TrafficHomeOne';
-import TrafficHomeTwo from './TrafficHomeTwo';
-//import FeaturedScreen from './FeaturedScreen'; 
+// import TrafficHomeTwo from './TrafficHomeTwo';
+//import FeaturedScreen from './FeaturedScreen';
 import AfterHero from './AfterHero';
-import NextAfterHero from './NextAfterHero';
+// import NextAfterHero from './NextAfterHero';
 import BackToTop from './BackToTop';
 import SelectFeatures from "@/app/components/SelectFeatutes";
-
-
+// import FeaturedScreenTwo from './FeaturedScreenTwo'
 
 
 
@@ -23,11 +22,12 @@ function HomeOne() {
            <HomeNav />
            <HeroHomeOne />
            <AfterHero />
-           <SelectFeatures className='pb-55-err' />
+           <SelectFeatures className='pb-95' />
            {/*<NextAfterHero />*/}
            {/*<ServicesHomeOne />*/}
            <TrafficHomeOne />
            {/*<TrafficHomeTwo />*/}
+           {/*<FeaturedScreenTwo />*/}
            <BlogHomeOne />
            <FooterHomeOne />
            <BackToTop className='' />

app/components/News/Blog.js

@@ -4,6 +4,7 @@ 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';
+import Image from 'next/image';
 
 function Blog() {
     return (
@@ -13,13 +14,13 @@ function Blog() {
                     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
+                    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
+                    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
+                    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
+                    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
@@ -32,7 +33,7 @@ function Blog() {
                     kyver cack zonked tickety boo mush morish.
                 </p>
                 <div className="post-thumb">
-                    <img src={singlePost} alt="" />
+                    <Image width='100' height='100' src={singlePost} alt="" />
                 </div>
                 <h4 className="article-title">Logotype Masterclass with Jessica Hische</h4>
                 <p>
@@ -51,32 +52,32 @@ function Blog() {
                 </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
+                    over tit blower mush the bee&#39;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.
+                        I don&#39;t want no agro brilliant are you taking the piss skive off super boot
+                        chancer don&#39;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
+                    burke, the bee&#39;s knees what a load of rubbish golly gosh mufty is Elizabeth
+                    squiffy, lurgy chimney pot Jeffrey Richard naff Queen&#39;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
+                    Harry don&#39;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
+                    amongst, lavatory twit bits and bobs pardon you daft ummm I&#39;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
+                    lavatory boot victoria sponge spend a penny grub ummm I&#39;m telling, absolutely
+                    bladdered A bit of how&#39;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">
@@ -98,7 +99,7 @@ function Blog() {
                     </a>
                 </div>
                 <div className="post-admin">
-                    <img src={author} alt="" />
+                    <Image width='100' height='100' src={author} alt="" />
                     <a href="#">Justin Case</a>
                     <span>About Author</span>
                     <p>
@@ -112,7 +113,7 @@ function Blog() {
                 <ol className="comment-list">
                     <li>
                         <div className="single-comment">
-                            <img src={cmnt1} alt="" />
+                            <Image width='100' height='100' src={cmnt1} alt="" />
                             <h5>
                                 <a href="#">Jason Response</a>
                             </h5>
@@ -121,7 +122,7 @@ function Blog() {
                                 <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.
+                                    twit bits and bobs pardon you daft ummm I&#39;m telling.
                                 </p>
                             </div>
                             <a className="comment-reply-link" href="#">
@@ -132,7 +133,7 @@ function Blog() {
                         <ul className="children">
                             <li>
                                 <div className="single-comment">
-                                    <img src={cmnt2} alt="" />
+                                    <Image width='100' height='100' src={cmnt2} alt="" />
                                     <h5>
                                         <a href="#">Sue Shei</a>
                                     </h5>
@@ -141,7 +142,7 @@ function Blog() {
                                         <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
+                                            pardon you daft ummm I&#39;m telling. Blatant matie boy say
                                             bugger all mate butty gormless
                                         </p>
                                     </div>
@@ -153,7 +154,7 @@ function Blog() {
                             </li>
                             <li>
                                 <div className="single-comment">
-                                    <img src={cmnt3} alt="" />
+                                    <Image width='100' height='100' src={cmnt3} alt="" />
                                     <h5>
                                         <a href="#">Douglas Lyphe</a>
                                     </h5>
@@ -163,7 +164,7 @@ function Blog() {
                                             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.
+                                            and bobs pardon you daft ummm I&#39;m telling.
                                         </p>
                                     </div>
                                     <a className="comment-reply-link" href="#">

app/components/News/BlogSideBar.js

@@ -3,6 +3,7 @@ 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';
+import Image from 'next/image';
 
 function BlogSideBar() {
     return (
@@ -52,7 +53,7 @@ function BlogSideBar() {
                 <h3 className="widget-title">Popular Posts</h3>
                 <div className="popular-post">
                     <a href="single-post.html">
-                        <img src={BlogImg1} alt="" />
+                        <Image width='100' height='100' src={BlogImg1} alt="" />
                     </a>
                     <h5>
                         <a href="single-post.html">Using creative problem Solving</a>
@@ -61,7 +62,7 @@ function BlogSideBar() {
                 </div>
                 <div className="popular-post">
                     <a href="single-post.html">
-                        <img src={BlogImg2} alt="" />
+                        <Image width='100' height='100' src={BlogImg2} alt="" />
                     </a>
                     <h5>
                         <a href="single-post.html">Fundamentals of UI Design</a>
@@ -70,7 +71,7 @@ function BlogSideBar() {
                 </div>
                 <div className="popular-post">
                     <a href="single-post.html">
-                        <img src={BlogImg3} alt="" />
+                        <Image width='100' height='100' src={BlogImg3} alt="" />
                     </a>
                     <h5>
                         <a href="single-post.html">Making music with Other people</a>
@@ -79,7 +80,7 @@ function BlogSideBar() {
                 </div>
                 <div className="popular-post">
                     <a href="single-post.html">
-                        <img src={BlogImg4} alt="" />
+                        <Image width='100' height='100' src={BlogImg4} alt="" />
                     </a>
                     <h5>
                         <a href="single-post.html">Brush strokes energize Trees in paintings</a>

app/components/News/Blogs.js

@@ -1,7 +1,9 @@
 "use client"
 import React, { useEffect, useState } from "react";
+import Link from "next/link";
 import blogOne from "../../assets/images/blog/1.jpg";
 import BlogData from "../../Services/BlogData";
+import Image from "next/image";
 
 /**
  * Fetches blog data from an API and renders the blogs on the page.
@@ -47,14 +49,14 @@ function Blogs({ pathname }) {
             data-wow-duration="3000ms"
             data-wow-delay="200ms"
           >
-            <a href={`/blog/blogdetail/${blog?.id}`} className="thumb">
+            <Link href={`/blog/blogdetail/${blog?.id}`} className="thumb">
               <img 
                 src={blgImg}
                 alt={blog.post_title} 
                 width={370} height={'auto'}
                 // style={{height: 'auto' }}
               />
-            </a>
+            </Link>
             <div className="content">
               <div className="blog-meta">
                 <ul>
@@ -62,11 +64,11 @@ function Blogs({ pathname }) {
                 </ul>
               </div>
               <h3 className="title">
-                <a href={`/blog/blogdetail/${blog?.id}`}>{blog.post_title}</a>
+                <Link href={`/blog/blogdetail/${blog?.id}`}>{blog.post_title}</Link>
               </h3>
-              <a href={`/blog/blogdetail/${blog?.id}`}>
+              <Link href={`/blog/blogdetail/${blog?.id}`}>
                 Learn More <i className="fal fa-arrow-right" />
-              </a>
+              </Link>
             </div>
           </div>
         </div>

app/components/News/HeaderNews.js

@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import Image from 'next/image';
 import logo from '../../assets/images/wrenchboard-logo-text.png';
 import StickyMenu from '../../lib/StickyMenu';
 import Navigation from '../Navigation';
@@ -18,7 +19,7 @@ function HeaderNews({ action }) {
                             <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="" />
+                                        <Image width='auto' height='auto' src={logo} alt="" />
                                     </a>
                                 </div>
                             </div>

app/components/NextAfterHero.js

@@ -38,7 +38,7 @@ function NextAfterHero() {
                                         </div>
                                         <h4 className="title">Carefully designed</h4>
                                         <p>
-                                            He lost his bottle loo don't get shirty with me ruddy.
+                                            He lost his bottle loo don&#39;t get shirty with me ruddy.
                                         </p>
                                     </div>
                                 </div>
@@ -60,7 +60,7 @@ function NextAfterHero() {
                                         </div>
                                         <h4 className="title">Clean Modern Code</h4>
                                         <p>
-                                            He lost his bottle loo don't get shirty with me ruddy.
+                                            He lost his bottle loo don&#39;t get shirty with me ruddy.
                                         </p>
                                     </div>
                                 </div>
@@ -82,7 +82,7 @@ function NextAfterHero() {
                                         </div>
                                         <h4 className="title">User Interactive</h4>
                                         <p>
-                                            He lost his bottle loo don't get shirty with me ruddy.
+                                            He lost his bottle loo don&#39;t get shirty with me ruddy.
                                         </p>
                                     </div>
                                 </div>
@@ -104,7 +104,7 @@ function NextAfterHero() {
                                         </div>
                                         <h4 className="title">Choose a App</h4>
                                         <p>
-                                            He lost his bottle loo don't get shirty with me ruddy.
+                                            He lost his bottle loo don&#39;t get shirty with me ruddy.
                                         </p>
                                     </div>
                                 </div>

app/components/ProjectHomeOne.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Image from 'next/image';
 
 function ProjectHomeOne() {
     return (
@@ -29,7 +30,7 @@ function ProjectHomeOne() {
                                     </div>
                                 </div>
                                 <div className="appie-project-thumb">
-                                    <img src="assets/images/project-thumb.png" alt="" />
+                                    <Image width='auto' height='auto' src="assets/images/project-thumb.png" alt="" />
                                 </div>
                             </div>
                         </div>

app/components/RecentJobsOne.js

@@ -60,11 +60,11 @@ titleLen(title){
                         <div className="row">
 
                             {
-                                this.state.jobsDataResults.map(i => {
+                                this.state.jobsDataResults.map((i, index) => {
                                     var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
                                     var postDt  = new Date(i.expire).toLocaleDateString("en-US", options); 
 
-                                    return (<div className="col-md-6 col-xl-3">
+                                    return (<div key={index} className="col-md-6 col-xl-3">
                                         <div
                                             className="appie-single-service container-fluid mt-30 wow animated fadeInUp boxBorder d-flex align-items-center"
                                             data-wow-duration="3000ms"

app/components/SelectFeatutes.js

@@ -1,11 +1,15 @@
 "use client"
 import React, { useState } from 'react';
-//import { Link } from 'react-router-dom';
-import thumb from '../assets/images/features-thumb-01.png';
-import shapeSix from '../assets/images/shape/shape-6.png';
-import shapeSeven from '../assets/images/shape/shape-7.png';
-import shapeEight from '../assets/images/shape/shape-8.png';
 import Image from 'next/image';
+
+//import { Link } from 'react-router-dom';
+import thumb from '../assets/images/features-thumb-11.png';
+
+import rewardIcon from '../assets/images/home/circular-reward.png'
+import walletIcon from '../assets/images/home/circular-wallet.png'
+import taskIcon from '../assets/images/home/circular-task.png'
+import familyIcon from '../assets/images/home/circular-family.png'
+
 function SelectFeatures({ className }) {
     const [tab, setTab] = useState('setting');
     const handleClick = (e, value) => {
@@ -14,8 +18,8 @@ function SelectFeatures({ className }) {
     };
     //appie-services-2-area appie-services-8-area pt-90 pb-55
     return (
-        <section className={`appie-features-area pt-100 ${className}`} id="features"    style={{  marginBottom: '20px' }} >
-            <div className="container">
+        <section className={`appie-features-area pt-100 ${className}`} id="features" >
+            <div className="container" style={{  marginBottom: '20px' }} >
                 <div className="row align-items-center">
                     <div className="col-lg-3">
                         <div className="appie-features-tabs-btn">
@@ -35,7 +39,7 @@ function SelectFeatures({ className }) {
                                     aria-controls="v-pills-home"
                                     aria-selected="true"
                                 >
-                                    <i className="fas fa-cog" /> Reward achievement
+                                    <span className={`p-1 rounded-pill`}><Image src={rewardIcon} height='25' width='25' /></span> Reward achievement
                                 </a>
                                 <a
                                     onClick={(e) => handleClick(e, 'report')}
@@ -47,7 +51,7 @@ function SelectFeatures({ className }) {
                                     aria-controls="v-pills-profile"
                                     aria-selected="false"
                                 >
-                                    <i className="fas fa-exclamation-triangle" /> Assign tasks or chores
+                                    <span className={`p-1 rounded-pill`}><Image src={taskIcon} height='25' width='25' /></span> Assign tasks or chores
                                 </a>
                                 <a
                                     onClick={(e) => handleClick(e, 'notice')}
@@ -59,7 +63,7 @@ function SelectFeatures({ className }) {
                                     aria-controls="v-pills-messages"
                                     aria-selected="false"
                                 >
-                                    <i className="fas fa-bell" /> Family engagement
+                                    <span className={`p-1 rounded-pill`}><Image src={familyIcon} height='25' width='25' /></span> Family engagement
                                 </a>
                                 <a
                                     onClick={(e) => handleClick(e, 'app')}
@@ -71,7 +75,7 @@ function SelectFeatures({ className }) {
                                     aria-controls="v-pills-settings"
                                     aria-selected="false"
                                 >
-                                    <i className="fas fa-lock" /> Fund wallets
+                                    <span className={`p-1 rounded-pill`}><Image src={walletIcon} height='25' width='25' /></span> Fund wallets
                                 </a>
                             </div>
                         </div>
@@ -103,13 +107,14 @@ function SelectFeatures({ className }) {
                                             data-wow-duration="2000ms"
                                             data-wow-delay="600ms"
                                         >
-                                            <span>Custom Reactions</span>
+                                            <span>
+                                                {/*Reward Achievement*/}
+                                            </span>
                                             <h3 className="title">
-                                                Let the <br /> Conversation flow
+                                                Reward <br /> Achievement
                                             </h3>
                                             <p>
-                                                Car boot absolutely bladdered posh burke the
-                                                wireless mush some dodg.
+                                                Reward with points, badges, recognition, or rewards with easy steps
                                             </p>
                                             <a className="main-btn" href="/about-us">
                                                 Learn More
@@ -141,13 +146,14 @@ function SelectFeatures({ className }) {
                                             data-wow-duration="2000ms"
                                             data-wow-delay="600ms"
                                         >
-                                            <span>Custom Reacyions</span>
+                                            <span>
+                                                {/*Reward Achievement ee*/}
+                                            </span>
                                             <h3 className="title">
-                                                Let the <br /> Conversation flow
+                                                Assign <br /> tasks or chores
                                             </h3>
                                             <p>
-                                                Car boot absolutely bladdered posh burke the
-                                                wireless mush some dodg.
+                                                Adapt to your family&#39;s needs with the flexibility of using one-time or repeated tasks or chores with the option to find any task.
                                             </p>
                                             <a className="main-btn" href="#">
                                                 Learn More
@@ -179,13 +185,14 @@ function SelectFeatures({ className }) {
                                             data-wow-duration="2000ms"
                                             data-wow-delay="600ms"
                                         >
-                                            <span>Custom Reacyions</span>
+                                            <span>
+                                                {/*Custom Reacyions 77*/}
+                                            </span>
                                             <h3 className="title">
-                                                Let the <br /> Conversation flow
+                                                Family  <br /> engagement
                                             </h3>
                                             <p>
-                                                Car boot absolutely bladdered posh burke the
-                                                wireless mush some dodg.
+                                                Connect with education challenges, such as quizzes or learning tasks, and private chats, and invite others to your family.
                                             </p>
                                             <a className="main-btn" href="#">
                                                 Learn More
@@ -217,13 +224,14 @@ function SelectFeatures({ className }) {
                                             data-wow-duration="2000ms"
                                             data-wow-delay="600ms"
                                         >
-                                            <span>Custom Reacyions</span>
+                                            <span>
+                                                {/*Reward Achievement*/}
+                                            </span>
                                             <h3 className="title">
-                                                Let the <br /> Conversation flow
+                                                Fund  <br /> wallets
                                             </h3>
                                             <p>
-                                                Car boot absolutely bladdered posh burke the
-                                                wireless mush some dodg.
+                                                Take control and feel secure by creating a virtual or physical card, allocating funds, and managing wallets for your kids.
                                             </p>
                                             <a className="main-btn" href="#">
                                                 Learn More
@@ -250,3 +258,11 @@ function SelectFeatures({ className }) {
 }
 
 export default SelectFeatures;
+
+
+
+
+
+
+
+

app/components/ServiceSideMenu.js

@@ -60,12 +60,12 @@ function ServiceSideMenu() {
                         </li>
 
                         <li>
-                            <a href={process.env.REACT_APP_APPLE_APP}>
+                            <a href={process.env.NEXT_PUBLIC_APPLE_APP}>
                                 <i className="fab fa-apple" /> Download for iOS
                             </a>
                         </li>
                         <li>
-                            <a className="item-2" href={process.env.REACT_APP_ANDROID_APP}>
+                            <a className="item-2" href={process.env.NEXT_PUBLIC_ANDROID_APP}>
                                 <i className="fab fa-google-play" /> Download for
                                 Android
                             </a>

app/components/ServicesHomeOne.js

@@ -4,6 +4,7 @@ import IconTwo from '../assets/images/icon/assign-chores.png';
 import IconThree from '../assets/images/icon/financial-education.png';
 import IconFour from '../assets/images/icon/family-connect.png';
 import Main from '../lnd/LndParts/Design/Main';
+import Image from 'next/image';
 
 function ServiceItem({ icon, title, description, index }) {
   return (
@@ -14,7 +15,7 @@ function ServiceItem({ icon, title, description, index }) {
       style={{ cursor: "default" }}
     >
       <div className="icon">
-        <img src={icon} alt={title} width={70} height={70} loading="lazy" />
+        <Image src={icon} alt={title} width={70} height={70} loading="lazy" />
       </div>
       <h4 className="appie-title">{title}</h4>
       <p>{description}</p>

app/components/TeamHomeOne.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Image from 'next/image';
 import teamOne from '../../assets/images/Olu-Amey-001.jpg';
 import teamTwo from '../../assets/images/team-2.jpg';
 import teamThree from '../../assets/images/Toks-Law.jpg';
@@ -25,7 +26,7 @@ function TeamHomeOne() {
                                 data-wow-delay="200ms"
                             >
                                 <div className="thumb">
-                                    <img src={teamOne} alt="" />
+                                    <Image width='auto' height='auto' src={teamOne} alt="" />
                                     <ul>
                                         <li>
                                             <a href="#">
@@ -57,7 +58,7 @@ function TeamHomeOne() {
                                 data-wow-delay="400ms"
                             >
                                 <div className="thumb">
-                                    <img src={teamTwo} alt="" />
+                                    <Image width='auto' height='auto' src={teamTwo} alt="" />
                                     <ul>
                                         <li>
                                             <a href="#">
@@ -89,7 +90,7 @@ function TeamHomeOne() {
                                 data-wow-delay="600ms"
                             >
                                 <div className="thumb">
-                                    <img src={teamThree} alt="" />
+                                    <Image width='auto' height='auto' src={teamThree} alt="" />
                                     <ul>
                                         <li>
                                             <a href="#">
@@ -121,7 +122,7 @@ function TeamHomeOne() {
                                 data-wow-delay="800ms"
                             >
                                 <div className="thumb">
-                                    <img src={teamFour} alt="" />
+                                    <Image width='auto' height='auto' src={teamFour} alt="" />
                                     <ul>
                                         <li>
                                             <a href="#">

app/components/TestimonialHomeOne.js

@@ -1,4 +1,5 @@
 import React, { useRef } from 'react';
+import Image from 'next/image';
 import Slider from 'react-slick';
 import 'slick-carousel/slick/slick-theme.css';
 import 'slick-carousel/slick/slick.css';
@@ -30,13 +31,13 @@ function TestimonialHomeOne() {
                             <Slider ref={sliderRef} dots arrows={false}>
                                 <div className="appie-testimonial-item text-center">
                                     <div className="author-info">
-                                        <img src={user} alt="" />
+                                        <Image width='auto' height='auto' src={user} alt="" />
                                         <h5 className="title">Lanta Greece</h5>
                                         <span>July, 2021</span>
                                     </div>
                                     <div className="text">
                                         <p>
-                                            Loving what you do to earn an income is the new word of mouth. I would absolutely recommend WrenchBoard.It 's so easy to use and you get paid instantly.
+                                            Loving what you do to earn an income is the new word of mouth. I would absolutely recommend WrenchBoard.It&#39;s so easy to use and you get paid instantly.
                                         </p>
                                         <ul>
                                             <li>
@@ -59,7 +60,7 @@ function TestimonialHomeOne() {
                                 </div>
                                 <div className="appie-testimonial-item text-center">
                                     <div className="author-info">
-                                        <img src={user} alt="" />
+                                        <Image width='auto' height='auto' src={user} alt="" />
                                         <h5 className="title">Jason Response</h5>
                                         <span>April 14, 2022</span>
                                     </div>
@@ -90,7 +91,7 @@ function TestimonialHomeOne() {
                                 </div>
                                 <div className="appie-testimonial-item text-center">
                                     <div className="author-info">
-                                        <img src={user} alt="" />
+                                        <Image width='auto' height='auto' src={user} alt="" />
                                         <h5 className="title">Jason Response</h5>
                                         <span>April 14, 2022</span>
                                     </div>

app/components/TrafficHomeOne.js

@@ -11,7 +11,7 @@ function TrafficHomeTwo() {
                         <div className="appie-traffic-title">
                             <h3 className="title">Family Connect</h3>
                             <p>
-                            All you need for a family to get moving with rewards and more. Plan activities and booster family interactions. 
+                            Looking for ways to keep your family active and engaged? We offer a variety of fun activities, challenges, and rewards to inspire and motivate your loved ones. 
                             </p>
                         </div>
                         <div className="row">
@@ -21,7 +21,7 @@ function TrafficHomeTwo() {
                                         <i className="fal fa-check" />
                                     </div>
                                     <h5 className="title">Organize Chores</h5>
-                                    <p>Simple one-time tasks to repeated tasks or promise of performance or set goals.</p>
+                                    <p>Whether is one-time or reoccuring task, make chores fun and exciting again for kids.</p>
                                 </div>
                             </div>
                             <div className="col-lg-6 col-md-6">
@@ -29,8 +29,8 @@ function TrafficHomeTwo() {
                                     <div className="icon">
                                         <i className="fal fa-check" />
                                     </div>
-                                    <h5 className="title">Sibling Activities</h5>
-                                    <p>Wrenchboard allows family members to create product connections with educational content with reward tools.
+                                    <h5 className="title">Challenge Zone</h5>
+                                    <p>Discover exciting challenges, rewards, and friendly competition to keep your kids and whole family engaged.
                                     </p>
                                 </div>
                             </div>
@@ -48,14 +48,14 @@ function TrafficHomeTwo() {
                                     <div className="icon">
                                         <i className="fal fa-check" />
                                     </div>
-                                    <h5 className="title">Games & More </h5>
-                                    <p>More opportunities to learn with games or the artificial intelligence library and shared material.</p>
+                                    <h5 className="title">Play and Learn</h5>
+                                    <p>Discover a world of learning opportunities, from games to cutting-edge AI tools and our vast resource library.</p>
                                 </div>
                             </div>
                             <div className="col-lg-12">
                                 <div className="traffic-btn mt-50">
-                                    <a className="main-btn" href="#">
-                                        Learn more about what you can do with WrenchBoard <i className="fal fa-arrow-right" />
+                                    <a className="main-btn" href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>
+                                        Join us today and start creating lasting memories together <i className="fal fa-arrow-right" />
                                     </a>
                                 </div>
                             </div>

app/components/WrenchBoardHome.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Image from 'next/image';
 import heroThumbOne from '../../assets/images/Actualize.jpg';
 import heroThumbTwo from '../../assets/images/hero-thumb-2.png';
 import shapeTwo from '../../assets/images/shape/shape-2.png';
@@ -42,14 +43,14 @@ function WrenchBoardHome() {
                                     data-wow-duration="2000ms"
                                     data-wow-delay="200ms"
                                 >
-                                    <img src={heroThumbOne} alt="" />
+                                    <Image width='auto' height='auto' src={heroThumbOne} alt="" />
                                 </div>
                                 <div
                                     className="thumb-2 wow animated fadeInRight"
                                     data-wow-duration="2000ms"
                                     data-wow-delay="600ms"
                                 >
-                                    <img src={heroThumbTwo} alt="" />
+                                    <Image width='auto' height='auto' src={heroThumbTwo} alt="" />
                                 </div>
                             </div>
                         </div>

app/contact/Forms.js

@@ -17,19 +17,38 @@ function Forms() {
         terms_conditions: false
     })
 
-    const validForm = formDetails.first_name && formDetails.last_name && formDetails.email && formDetails.phone_number && formDetails.subject && formDetails.message
-
+    
     const handleChange = ({target:{name, value}}) => {
-        setFormDetails(prev => ({...prev, [name]:value}))
+        if(name == 'terms_conditions'){
+            setFormDetails(prev => ({...prev, [name]:!prev.terms_conditions}))
+        }else{
+            setFormDetails(prev => ({...prev, [name]:value}))
+        }
     }
-
+    
     const [requestStatus, setRequestStatus] = useState({loading:false, status:false, msg:''})
-
+    
+    const validForm = formDetails.first_name && formDetails.last_name && formDetails.email && formDetails.phone_number && formDetails.subject && formDetails.message
     function handleSubmit(e) {
         e.preventDefault()
+        const isChecked = formDetails.terms_conditions
         setRequestStatus({loading:true, status:false, msg:''})
         if(!validForm){
-            setRequestStatus({loading:false, status:false, msg:'please, fill all fields'})
+            setRequestStatus({loading:false, status:false, msg:'Please, fill all fields'})
+            setTimeout(()=>{
+                setRequestStatus({loading:false, status:false, msg:''})
+            },3000)
+            return
+        }
+        if(!(/^\d{7,15}$/.test(formDetails.phone_number))){
+            setRequestStatus({loading:false, status:false, msg:'Please, enter a valid phone number'})
+            setTimeout(()=>{
+                setRequestStatus({loading:false, status:false, msg:''})
+            },3000)
+            return
+        }
+        if(!isChecked){
+            setRequestStatus({loading:false, status:false, msg:'Please, Accept Terms & Conditions'})
             setTimeout(()=>{
                 setRequestStatus({loading:false, status:false, msg:''})
             },3000)
@@ -79,7 +98,7 @@ function Forms() {
                             <div className="contact--info-area">
                                 <h3>Get in touch</h3>
                                 <p>Looking for help? Fill the form and start a new discussion.</p>
-                                <div className="single-info">
+                                {/* <div className="single-info">
                                     <h5>Headquaters</h5>
                                     <p>
                                         <i className="fal fa-home"></i>
@@ -93,7 +112,7 @@ function Forms() {
                                         {process.env.NEXT_PUBLIC_SUPPORT_PHONE}
                                         <br />
                                     </p>
-                                </div>
+                                </div> */}
                                 <div className="single-info">
                                     <h5>Support</h5>
                                     <p>
@@ -135,14 +154,14 @@ function Forms() {
                                             type="email"
                                             name="email"
                                             placeholder="Email Address" 
-                                            maxLength={35} 
+                                            maxLength={55} 
                                             onChange={handleChange}
                                             value={formDetails.email}
                                         />
                                     </div>
                                     <div className="col-md-6">
                                         <input
-                                            type="number"
+                                            type="text"
                                             name="phone_number"
                                             placeholder="Phone Number" 
                                             maxLength={15} 
@@ -151,7 +170,7 @@ function Forms() {
                                         />
                                     </div>
                                     <div className="col-md-12">
-                                        <input type="text" name="subject" placeholder="Subject"  maxLength={35} value={formDetails.subject} onChange={handleChange}  />
+                                        <input type="text" name="subject" placeholder="Subject"  maxLength={150} value={formDetails.subject} onChange={handleChange}  />
                                     </div>
                                     <div className="col-md-12">
                                         <textarea
@@ -159,6 +178,7 @@ function Forms() {
                                             placeholder="How can we help?"
                                             onChange={handleChange}
                                             value={formDetails.message}
+                                            maxLength={350}
                                         ></textarea>
                                     </div>
                                     <div className="col-md-6">

app/faq/FAQService.js

@@ -0,0 +1,116 @@
+"use client"
+import React, { useEffect, useState } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+
+import ServiceSideMenu from '../components/ServiceSideMenu';
+import FaqData from '../Services/FaqData';
+import Arrow from '../assets/images/arrow-down.png'
+
+function FAQService() {
+    const [isOpen, setOpen] = React.useState({type: 'faq0'});
+    const accordionHandler = (name) => {
+      setOpen(prev => {
+        if(prev.type == name){
+            return {type: ''}
+        }else {
+            return {type: name}
+        }
+      });
+    };
+    let [faq, setFaq] = useState([])
+
+    useEffect(()=>{
+        FaqData().then(res => {
+            setFaq(res.data.result_list)
+        }).catch(err => {
+            console.log('You got an error ========> '+ err)
+        })
+    },[])
+
+    return (
+        <>
+            <section className="appie-service-details-area pt-100 pb-100">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-lg-4">
+                            <ServiceSideMenu />
+                        </div>
+                        <div className="col-lg-8 accordion-wrapper">
+                            <div className="p-3 service-details-content accordion-con">
+                                <div className="container-fluid">
+                                  <div className='content'>
+                                    <h3 className='p-3 text-center title'>Frequently asked questions</h3>
+                                  </div>
+                                </div>
+                                <div className='row'>
+                                    <div class="col-12 col-lg-6 accordion" id="accordionExample">
+                                        {faq.map((item, index)=>{
+                                            if(index%2 == 0 && item.public != 0){
+                                                return(
+                                                <div key={index} className='my-3'>
+                                                    <Accordion name={`faq${index}`} datas={item} accordionHandler={accordionHandler} isOpen={isOpen} />
+                                                </div>
+                                                )
+                                            }
+                                        })}
+                                    </div>
+                                    <div class="col-12 col-lg-6 accordion" id="accordionExample">
+                                        {faq.map((item, index)=>{
+                                            if(index%2 != 0 && item.public != 0){
+                                                return(
+                                                <div key={index} className='my-3'>
+                                                    <Accordion name={`faq${index}`} datas={item} accordionHandler={accordionHandler} isOpen={isOpen} />
+                                                </div>
+                                                )
+                                            }
+                                        })}
+                                    </div>
+                                </div>
+                                <div className='container-fluid text-center'>
+                                    <p className='my-4'>Can&#39;t find an answer <Link href='/contact'>contact us</Link> </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+}
+
+export default FAQService;
+
+export function Accordion({ datas, name, accordionHandler, isOpen }) {
+    return (
+      <>
+        <div className="accordion-item">
+          <div
+            className="accordion-title-bar container-fluid"
+            onClick={()=>{accordionHandler(name)}}
+          >
+            <div className="accordion-title">
+              <p className="">
+                {datas.title}
+              </p>
+            </div>
+            <div className="accordion-title-icon">
+              <span className={`horizontal ${isOpen.type == name ? 'vertical' : ''}`}>
+                <Image width='auto' height='auto' className="" src={Arrow} alt='image' />
+              </span>
+            </div>
+          </div>
+          <div className={`${isOpen.type == name ? "accordion-body-show" : "accordion-body-hide"}`}>
+            <div className="accordion-body-content" style={{display: 'flex', padding: '10px'}}>
+              <div className="rounded-[28px]" style={{width: '3px', backgroundColor: 'skyblue'}}></div>
+              <div className="flex-1">
+                <p className="" style={{padding: '0px 10px', letterSpacing:'.5px'}}>
+                  {datas.msg}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }

app/faq/page.tsx

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

app/globals.css

@@ -100,6 +100,42 @@ a {
   text-decoration: none;
 }
 
+/* ACCEPT COOKIE SLIDE UP EFFECT */
+.cookies-wrapper{
+  width: 90%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: white;
+  box-shadow: 0px 0px 1px black;
+  z-index: 999;
+}
+
+.slide-up {
+  animation: slideup 1s linear forwards;
+}
+
+.slide-down {
+  animation: slidedown 1s linear forwards;
+}
+
+@keyframes slideup {
+  0%{bottom: -50%;}
+  100%{bottom: 0;}
+}
+
+@keyframes slidedown {
+  0%{bottom: 0;}
+  100%{bottom: -50%; display: none;}
+}
+
+@media only screen and (max-width: 992px) {
+  .cookies-wrapper p, .cookies-wrapper button {
+    font-size: 14px;
+    line-height: 20px;
+  }
+}
+/* END ACCEPT COOKIE SLIDE UP EFFECT */
+
 @media (prefers-color-scheme: dark) {
   html {
     color-scheme: dark;

app/layout.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import Script from "next/script";
+import AcceptCookies from "./components/AcceptCookies";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -30,7 +32,37 @@ export default function RootLayout({
     />
     <meta property="og:image" content="%PUBLIC_URL%/favicon-32x32.png" />
 
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        {children}
+        <AcceptCookies />
+      </body>
+      {/* <Script id='chat-support'>
+        {`
+            var LHC_API = LHC_API || {};
+            LHC_API.args = {
+              mode: "widget",
+              lhc_base_url: "//chat.live.wrenchboard.com/",
+              wheight: 450,
+              wwidth: 350,
+              pheight: 520,
+              pwidth: 500,
+              leaveamessage: true,
+              check_messages: false,
+            };
+            (function () {
+              var po = document.createElement("script");
+              po.type = "text/javascript";
+              po.setAttribute("crossorigin", "anonymous");
+              po.async = true;
+              var date = new Date();
+              po.src =
+                "//chat.live.wrenchboard.com/design/defaulttheme/js/widgetv2/index.js?" +
+                ("" + date.getFullYear() + date.getMonth() + date.getDate());
+              var s = document.getElementsByTagName("script")[0];
+              s.parentNode.insertBefore(po, s);
+            })();
+        `}
+      </Script> */}
     </html>
   );
 }

app/lib/LazyImage.js

@@ -1,4 +1,6 @@
+"use client"
 import React, { useEffect, useRef, useState } from 'react';
+import Image from 'next/image';
 
 /**
  * Renders an image lazily using the Intersection Observer API.
@@ -12,12 +14,13 @@ function LazyImage({ src, alt }) {
   const [isVisible, setIsVisible] = useState(false);
 
   useEffect(() => {
+    const currentRef = imgRef.current
     const observer = new IntersectionObserver(
       (entries) => {
         const [entry] = entries;
         if (entry.isIntersecting) {
           setIsVisible(true);
-          observer.unobserve(imgRef.current); // Stop observing once the image is in the viewport
+          observer.unobserve(currentRef); // Stop observing once the image is in the viewport
         }
       },
       {
@@ -27,19 +30,19 @@ function LazyImage({ src, alt }) {
       }
     );
 
-    if (imgRef.current) {
-      observer.observe(imgRef.current);
+    if (currentRef) {
+      observer.observe(currentRef);
     }
 
     return () => {
-      if (imgRef.current) {
-        observer.unobserve(imgRef.current);
+      if (currentRef) {
+        observer.unobserve(currentRef);
       }
     };
   }, []);
 
   return (
-    <img
+    <Image width='auto' height='auto'
       ref={imgRef}
       src={isVisible ? src : ''}
       alt={alt}

app/lnd/Lnd.js

@@ -27,6 +27,7 @@
 
 
 import React , {useState, useEffect} from 'react'
+import Image from 'next/image'
 //import { HashLink as Link } from 'react-router-hash-link';
 import Design from './LndParts/Design/Main'
 import Work from './LndParts/Work/Main'
@@ -63,7 +64,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
             <div className="container">
                 <nav className="navbar navbar-expand-lg">
                     <Link to="/" className="navbar-brand">
-                        <img src="assets/images/logo.png" alt="image" />
+                        <Image width='auto' height='auto' src="assets/images/logo.png" alt="image" />
                     </Link>
                     <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                         aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -138,9 +139,9 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
             <section className="banner_section homedark-banner min-vh-100">
                 <div className="container">
                     <div className="row position-relative">
-                        <span className="position-absolute banner_shape1"> <img src={localImgLoad('images/banner-shape-one1.png')} width='10px' alt="image" /> </span>
-                        <span className="position-absolute banner_shape2"> <img src={localImgLoad('images/banner-shape2two.png')} width='10px' alt="image" /> </span>
-                        <span className="position-absolute banner_shape3"> <img src={localImgLoad('images/banner-shapethree3.png')} width='10px' alt="image" /> </span>
+                        <span className="position-absolute banner_shape1"> <Image height='auto' src={localImgLoad('images/banner-shape-one1.png')} width='10px' alt="image" /> </span>
+                        <span className="position-absolute banner_shape2"> <Image height='auto' src={localImgLoad('images/banner-shape2two.png')} width='10px' alt="image" /> </span>
+                        <span className="position-absolute banner_shape3"> <Image height='auto' src={localImgLoad('images/banner-shapethree3.png')} width='10px' alt="image" /> </span>
 
                         <div className="col-12 col-lg-6 mx-auto text-center"  data-aos="fade-right" data-aos-duration="1500">
                             <div className="banner_text my-3 p-4">
@@ -151,7 +152,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                                 <div className="thumbnil">
                                     <a className="popup-youtube play-button" onClick = {() => setytShow(true)} data-url="#" data-toggle="modal" data-target="#myModal" title="XJj2PbenIsU">
                                         {/* <span className="play_btn position-relative">
-                                            <img src={localImgLoad('images/play_icon.png')} className='position-relative' width='30px' height='30px' alt="image" />
+                                            <Image src={localImgLoad('images/play_icon.png')} className='position-relative' width='30px' height='30px' alt="image" />
                                             <div className="waves-block">
                                                 <div className="waves wave-1"></div>
                                                 <div className="waves wave-2"></div>
@@ -159,7 +160,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                                             </div>
                                         </span> */}
                                         <span className="play_btn position-relative rounded-circle d-flex justify-content-center align-items-center">
-                                            <img src={localImgLoad('images/play_icon.png')} className='p-1 position-relative rounded-circle' width='30px' height='30px' alt="image" />
+                                            <Image src={localImgLoad('images/play_icon.png')} className='p-1 position-relative rounded-circle' width='30px' height='30px' alt="image" />
                                         </span>
                                     </a>
                                 </div>
@@ -172,30 +173,30 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                         <div className="img-con d-block d-sm-flex justify-content-around align-items-center gap-5">
                             <div className="col-lg-2 d-none d-lg-block">
                                 <div className="banner_screen screen1 text-center">
-                                    <img className="moving_position_animatin" src={localImgLoad('images/hero-image-5.png')} alt="image" />
+                                    <Image width='auto' height='auto' className="moving_position_animatin" src={localImgLoad('images/hero-image-5.png')} alt="image" />
                                 </div>
                             </div>
 
                             <div className="col-12 col-sm-4 col-lg-2">
                                 <div className="banner_screen screen2 text-center">
-                                    <img className="moving_animation" src={localImgLoad('images/hero-image-4.png')} alt="image" />
+                                    <Image width='auto' height='auto' className="moving_animation" src={localImgLoad('images/hero-image-4.png')} alt="image" />
                                 </div>
                             </div>
 
                             <div className="my-4 my-md-0 col-12 col-sm-4 col-lg-3">
                                 <div className="banner_screen screen3 text-center">
-                                    <img className="moving_position_animatin" src={localImgLoad('images/hero-image-1.png')} alt="image" />
+                                    <Image width='auto' height='auto' className="moving_position_animatin" src={localImgLoad('images/hero-image-1.png')} alt="image" />
                                 </div>
                             </div>
 
                             <div className="col-12 col-sm-4 col-lg-2">
                                 <div className="banner_screen screen4 text-center">
-                                    <img className="moving_animation" src={localImgLoad('images/hero-image-2.png')} alt="image" />
+                                    <Image width='auto' height='auto' className="moving_animation" src={localImgLoad('images/hero-image-2.png')} alt="image" />
                                 </div>
                             </div>
                             <div className="col-lg-2 d-none d-lg-block">
                                 <div className="banner_screen screen5 text-center">
-                                    <img className="moving_position_animatin" src={localImgLoad('images/hero-image-3.png')} alt="image" />
+                                    <Image width='auto' height='auto' className="moving_position_animatin" src={localImgLoad('images/hero-image-3.png')} alt="image" />
                                 </div>
                             </div>
                         </div>
@@ -208,14 +209,14 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                     <ul className="app_btn" data-aos="fade-in" data-aos-duration="1500">
                         <li>
                             <a href="#" className="app_store">
-                                <img className="blue_img" src={localImgLoad('images/appstore_blue.png')} alt="image" />
-                                <img className="white_img" src={localImgLoad('images/appstore_white.png')} alt="image" />
+                                <Image width='auto' height='auto' className="blue_img" src={localImgLoad('images/appstore_blue.png')} alt="image" />
+                                <Image width='auto' height='auto' className="white_img" src={localImgLoad('images/appstore_white.png')} alt="image" />
                             </a>
                         </li>
                         <li>
                             <a href="#">
-                                <img className="blue_img" src={localImgLoad('images/googleplay_blue.png')} alt="image" />
-                                <img className="white_img" src={localImgLoad('images/googleplay_white.png')} alt="image" />
+                                <Image width='auto' height='auto' className="blue_img" src={localImgLoad('images/googleplay_blue.png')} alt="image" />
+                                <Image width='auto' height='auto' className="white_img" src={localImgLoad('images/googleplay_white.png')} alt="image" />
                             </a>
                         </li>
                     </ul>
@@ -227,7 +228,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                         <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12" data-aos="fade-up" data-aos-duration="1000">
                             <li>
                                 <div className="icon">
-                                    <img src={localImgLoad('images/download-dark.png')} alt="image" />
+                                    <Image width='auto' height='auto' src={localImgLoad('images/download-dark.png')} alt="image" />
                                 </div>
                                 <div className="text">
                                     <p><span className="counter-value" data-count="17">0</span><span>M+</span></p>
@@ -239,7 +240,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                         <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12 " data-aos="fade-up" data-aos-duration="1200">
                             <li>
                                 <div className="icon">
-                                    <img src={localImgLoad('images/followers-dark.png')} alt="image" />
+                                    <Image width='auto' height='auto' src={localImgLoad('images/followers-dark.png')} alt="image" />
                                 </div>
                                 <div className="text">
                                     <p><span className="counter-value" data-count="08">0 </span><span>M+</span></p>
@@ -251,7 +252,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                         <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12 " data-aos="fade-up" data-aos-duration="1400">
                             <li>
                                 <div className="icon">
-                                    <img src={localImgLoad('images/reviews-dark.png')} alt="image" />
+                                    <Image width='auto' height='auto' src={localImgLoad('images/reviews-dark.png')} alt="image" />
                                 </div>
                                 <div className="text">
                                     <p><span className="counter-value" data-count="2300">1500</span><span>+</span></p>
@@ -263,7 +264,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                         <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12 " data-aos="fade-up" data-aos-duration="1600">
                             <li>
                                 <div className="icon">
-                                    <img src={localImgLoad('images/countries-dark.png')} alt="image" />
+                                    <Image width='auto' height='auto' src={localImgLoad('images/countries-dark.png')} alt="image" />
                                 </div>
                                 <div className="text">
                                     <p><span className="counter-value" data-count="150">0</span><span>+</span></p>
@@ -286,7 +287,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                                 <div className="col-md-4">
                                     <div className="feature_box" data-aos="fade-up" data-aos-duration="1500">
                                         <div className="image">
-                                            <img src={localImgLoad('images/features1.png')} alt="image" />
+                                            <Image width='auto' height='auto' src={localImgLoad('images/features1.png')} alt="image" />
                                         </div>
                                         <div className="text">
                                             <h4>Secure data</h4>
@@ -298,7 +299,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                                 <div className="col-md-4">
                                     <div className="feature_box" data-aos="fade-up" data-aos-duration="1700">
                                         <div className="image">
-                                            <img src={localImgLoad('images/features2.png')} alt="image" />
+                                            <Image width='auto' height='auto' src={localImgLoad('images/features2.png')} alt="image" />
                                         </div>
                                         <div className="text">
                                             <h4>Automate everything</h4>
@@ -310,7 +311,7 @@ const Lnd = ({setnavbar,setfooter,setbrdcum}) => {
                                 <div className="col-md-4">
                                     <div className="feature_box" data-aos="fade-up" data-aos-duration="1900">
                                         <div className="image">
-                                            <img src={localImgLoad('images/features3.png')} alt="image" />
+                                            <Image width='auto' height='auto' src={localImgLoad('images/features3.png')} alt="image" />
                                         </div>
                                         <div className="text">
                                             <h4>Secure data</h4>

app/lnd/LndParts/AboutApp/Main.js

@@ -1,5 +1,5 @@
-import { Link } from 'react-router-dom'
 import React from 'react'
+import Image from 'next/image';
 //import frame from '../../../../assets/images/about-frame.png'
 import frame from '../../../../assets/images/use-case-side-main.png'; //about-frame.png'
 import screen from '../../../../assets/images/use-case-side-extra.png'; //about-screen.png'
@@ -17,10 +17,10 @@ const Main = ({ video, dark }) => {
             <div className="col-lg-6">
               <div className="about_img" data-aos="fade-in" data-aos-duration="1500">
                 <div className="frame_img">
-                  <img className="moving_position_animatin" src={frame} alt="image" />
+                  <Image width='auto' height='auto' className="moving_position_animatin" src={frame} alt="image" />
                 </div>
                 <div className="screen_img">
-                  <img className="moving_animation" src={screen} alt="image" />
+                  <Image width='auto' height='auto' className="moving_animation" src={screen} alt="image" />
                 </div>
               </div>
             </div>

app/lnd/LndParts/Design/Main.js

@@ -1,5 +1,6 @@
 "use client"
 import React, { useState } from 'react'
+import Image from 'next/image'
 //import localImgLoad from  "../../../lib/localImgLoad"; // "../../../lib/localImgLoad"; 
 
 // import img1 from '../../../../assets/images/modern01.png'
@@ -22,7 +23,7 @@ const Main = ({gredient}) => {
         <section className={`row_am ${gredient && "gredient-bg"}`} >
             {gredient &&
             <div className="modernui_section_bg modernui-gredient"> 
-                <img src="assets/images/section-bg.png" alt="image"/> 
+                <Image width='auto' height='auto' src="assets/images/section-bg.png" alt="image"/> 
             </div>
             }
             <div className="container">
@@ -43,7 +44,7 @@ const Main = ({gredient}) => {
                             </div>
                             <div className="row">
                             {list?.map(({ icon, header, paragraph, name }, idx) => (
-                                <div className="col-12 mb-10" key={idx} onClick={()=>changeActiveImg(name)} style={{cursor: 'pointer'}}>
+                                <div key={idx} className="col-12 mb-10" onClick={()=>changeActiveImg(name)} style={{cursor: 'pointer'}}>
                                     <div
                                         className={`appie-traffic-service features appie-modern-design`}
                                     >

app/lnd/LndParts/Download/Main.js

@@ -1,5 +1,6 @@
-import { Link } from 'react-router-dom'
+import Link from 'next/link'
 import React, {useState} from 'react'
+import Image from 'next/image'
 import img from '../../../../assets/images/anim_line.png'
 import blueapp from '../../../../assets/images/appstore_blue.png'
 import blue from '../../../../assets/images/googleplay_blue.png'
@@ -32,15 +33,15 @@ const Main = () => {
             <div className="container">
                 <div className={`free_app_inner aos-init ${animate && "aos-animate"}`} data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100"> 
                     <div className="anim_line dark_bg">
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
-                        <span><img src={img} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={img} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={img} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={img} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={img} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={img} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={img} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={img} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={img} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={img} alt="anim_line" /></span>
                     </div>
                     <div className="row">
                         <div className="col-md-6">
@@ -52,13 +53,13 @@ const Main = () => {
                                 </div>
                                 <ul className="app_btn">
                                 <li>
-                                    <Link to="#">
-                                    <img src={blueapp} alt="image" />
+                                    <Link href="#">
+                                    <Image width='auto' height='auto' src={blueapp} alt="image" />
                                     </Link>
                                 </li>
                                 <li>
-                                    <Link to="#">
-                                    <img src={blue} alt="image" />
+                                    <Link href="#">
+                                    <Image width='auto' height='auto' src={blue} alt="image" />
                                     </Link>
                                 </li>
                                 </ul>
@@ -66,8 +67,8 @@ const Main = () => {
                         </div>
                         <div className="col-md-6">
                             <div className="free_img">
-                                <img src={screen} alt="image" />
-                                <img className="mobile_mockup" src={screen1} alt="image" />
+                                <Image width='auto' height='auto' src={screen} alt="image" />
+                                <Image width='auto' height='auto' className="mobile_mockup" src={screen1} alt="image" />
                             </div>
                         </div>
                     </div>

app/lnd/LndParts/Faq/Main.js

@@ -1,4 +1,5 @@
 import React ,{ useState } from 'react'
+import Image from 'next/image'
 
 const Main = ({gredient}) => {
 
@@ -7,7 +8,7 @@ const Main = ({gredient}) => {
   return (
     <>
         <section className="row_am faq_section">
-        {gredient && <div className="faq_bg"> <img src="assets/images/section-bg.png" alt="image"/> </div>}
+        {gredient && <div className="faq_bg"> <Image width='auto' height='auto' src="assets/images/section-bg.png" alt="image"/> </div>}
             <div className="container">
                 <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
                     <h2><span>FAQ</span> - Frequently Asked Questions</h2>

app/lnd/LndParts/Features/Main.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import Image from 'next/image'
 import img1 from '../../../assets/images/secure_data.png'
 import img2 from '../../../assets/images/functional.png'
 import img3 from '../../../assets/images/live-chat.png'
@@ -20,7 +21,7 @@ const Main = ({video}) => {
                 <div className="left_data feature_box">
                     <div className="data_block" data-aos="fade-right" data-aos-duration="1500">
                     <div className="icon">
-                        <img src="assets/images/secure.png" alt="image" />
+                        <Image width='auto' height='auto' src="assets/images/secure.png" alt="image" />
                     </div>
                     <div className="text">
                         <h4>Secure data</h4>
@@ -29,7 +30,7 @@ const Main = ({video}) => {
                     </div>
                     <div className="data_block" data-aos="fade-right" data-aos-duration="1500">
                     <div className="icon">
-                        <img src="assets/images/abt_functional.png" alt="image" />
+                        <Image width='auto' height='auto' src="assets/images/abt_functional.png" alt="image" />
                     </div>
                     <div className="text">
                         <h4>Fully functional</h4>
@@ -40,7 +41,7 @@ const Main = ({video}) => {
                 <div className="right_data feature_box">
                     <div className="data_block" data-aos="fade-left" data-aos-duration="1500">
                     <div className="icon">
-                        <img src="assets/images/communication.png" alt="image"/>
+                        <Image width='auto' height='auto' src="assets/images/communication.png" alt="image"/>
                     </div>
                     <div className="text">
                         <h4>Live chat</h4>
@@ -49,7 +50,7 @@ const Main = ({video}) => {
                     </div>
                     <div className="data_block" data-aos="fade-left" data-aos-duration="1500">
                     <div className="icon">
-                        <img src="assets/images/abt_support.png" alt="image" />
+                        <Image width='auto' height='auto' src="assets/images/abt_support.png" alt="image" />
                     </div>
                     <div className="text">
                         <h4>24-7 Support</h4>
@@ -58,7 +59,7 @@ const Main = ({video}) => {
                     </div>
                 </div>
                 <div className="feature_img" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
-                    <img src="assets/images/features_frame.png" alt="image" />
+                    <Image width='auto' height='auto' src="assets/images/features_frame.png" alt="image" />
                 </div>
                 </div>
             </div>
@@ -75,7 +76,7 @@ const Main = ({video}) => {
                 <div className="left_data feature_box">
                     <div className="data_block" data-aos="fade-right" data-aos-duration="1500">
                     <div className="icon">
-                        <img src={img1} alt="image" />
+                        <Image width='auto' height='auto' src={img1} alt="image" />
                     </div>
                     <div className="text">
                         <h4>Secure data</h4>
@@ -84,7 +85,7 @@ const Main = ({video}) => {
                     </div>
                     <div className="data_block" data-aos="fade-right" data-aos-duration="1500">
                     <div className="icon">
-                        <img src={img2} alt="image" />
+                        <Image width='auto' height='auto' src={img2} alt="image" />
                     </div>
                     <div className="text">
                         <h4>Fully functional</h4>
@@ -95,7 +96,7 @@ const Main = ({video}) => {
                 <div className="right_data feature_box">
                     <div className="data_block" data-aos="fade-left" data-aos-duration="1500">
                     <div className="icon">
-                        <img src={img3} alt="image"/>
+                        <Image width='auto' height='auto' src={img3} alt="image"/>
                     </div>
                     <div className="text">
                         <h4>Live chat</h4>
@@ -104,7 +105,7 @@ const Main = ({video}) => {
                     </div>
                     <div className="data_block" data-aos="fade-left" data-aos-duration="1500">
                     <div className="icon">
-                        <img src={img4} alt="image" />
+                        <Image width='auto' height='auto' src={img4} alt="image" />
                     </div>
                     <div className="text">
                         <h4>24-7 Support</h4>
@@ -113,7 +114,7 @@ const Main = ({video}) => {
                     </div>
                 </div>
                 <div className="feature_img" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
-                    <img src={img5} alt="image" />
+                    <Image width='auto' height='auto' src={img5} alt="image" />
                 </div>
                 </div>
             </div>

app/lnd/LndParts/Interface/Main.js

@@ -1,5 +1,6 @@
 import OwlCarousel from 'react-owl-carousel'
 import React from 'react'
+import Image from 'next/image'
 import img1 from '../../../assets/images/screen-1.png'
 import img2 from '../../../assets/images/screen-2.png'
 import img3 from '../../../assets/images/screen-3.png'
@@ -42,32 +43,32 @@ const Main = () => {
                     <OwlCarousel id="screen_slider" {...screen_slider} className="owl-carousel owl-theme owl-loaded owl-drag">
                         <div className="item">
                             <div className="screen_frame_img">
-                                <img src={img1} alt="image" />
+                                <Image width='auto' height='auto' src={img1} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
-                                <img src={img2} alt="image" />
+                                <Image width='auto' height='auto' src={img2} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
-                                <img src={img3} alt="image" />
+                                <Image width='auto' height='auto' src={img3} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
-                                <img src={img4} alt="image" />
+                                <Image width='auto' height='auto' src={img4} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
-                                <img src={img5} alt="image" />
+                                <Image width='auto' height='auto' src={img5} alt="image" />
                             </div>
                         </div>
                         <div className="item">
                             <div className="screen_frame_img">
-                                <img src={img3} alt="image" />
+                                <Image width='auto' height='auto' src={img3} alt="image" />
                             </div>
                         </div>
                     </OwlCarousel>

app/lnd/LndParts/Pricing/Main.js

@@ -1,5 +1,6 @@
-import { Link } from 'react-router-dom'
 import React , { useState} from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
 import img1 from '../../../assets/images/standard.png'
 import img2 from '../../../assets/images/unlimited.png'
 import img3 from '../../../assets/images/premium.png'
@@ -32,7 +33,7 @@ const Main = ({gredient , video}) => {
                             <div className="col-md-4">
                                 <div className="pricing_block">
                                     <div className="icon">
-                                    <img src="assets/images/standard-one.png" alt="image" />
+                                    <Image width='auto' height='auto' src="assets/images/standard-one.png" alt="image" />
                                     </div>
                                     <div className="pkg_name">
                                     <h3>Standard</h3>
@@ -56,13 +57,13 @@ const Main = ({gredient , video}) => {
                                         <p>Support on request</p>
                                     </li>
                                     </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                    <Link href="/faq" className="btn white_btn">BUY NOW</Link>
                                 </div>
                             </div>
                             <div className="col-md-4">
                                 <div className="pricing_block highlited_block">
                                     <div className="icon">
-                                    <img src="assets/images/unlimited-one.png" alt="image"/>
+                                    <Image width='auto' height='auto' src="assets/images/unlimited-one.png" alt="image"/>
                                     </div>
                                     <div className="pkg_name">
                                     <h3>Unlimited</h3>
@@ -86,13 +87,13 @@ const Main = ({gredient , video}) => {
                                         <p>24/7 Customer support</p>
                                     </li>
                                     </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                    <Link href="/faq" className="btn white_btn">BUY NOW</Link>
                                 </div>
                             </div>
                             <div className="col-md-4">
                                 <div className="pricing_block">
                                     <div className="icon">
-                                    <img src="assets/images/premium-one.png" alt="image" />
+                                    <Image width='auto' height='auto' src="assets/images/premium-one.png" alt="image" />
                                     </div>
                                     <div className="pkg_name">
                                     <h3>Premium</h3>
@@ -116,7 +117,7 @@ const Main = ({gredient , video}) => {
                                         <p>24/7 Customer support</p>
                                     </li>
                                     </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                    <Link href="/faq" className="btn white_btn">BUY NOW</Link>
                                 </div>
                             </div>
                         </div>
@@ -127,7 +128,7 @@ const Main = ({gredient , video}) => {
                             <div className="col-md-4">
                                 <div className="pricing_block">
                                     <div className="icon">
-                                    <img src="assets/images/standard.png" alt="image" />
+                                    <Image width='auto' height='auto' src="assets/images/standard.png" alt="image" />
                                     </div>
                                     <div className="pkg_name">
                                     <h3>Standard</h3>
@@ -151,14 +152,14 @@ const Main = ({gredient , video}) => {
                                         <p>Support on request</p>
                                     </li>
                                     </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                    <Link href="/faq" className="btn white_btn">BUY NOW</Link>
                                 </div>
                             </div>
 
                             <div className="col-md-4">
                                 <div className="pricing_block highlited_block">
                                     <div className="icon">
-                                    <img src="assets/images/unlimited.png" alt="image" />
+                                    <Image width='auto' height='auto' src="assets/images/unlimited.png" alt="image" />
                                     </div>
                                     <div className="pkg_name">
                                     <h3>Unlimited</h3>
@@ -182,14 +183,14 @@ const Main = ({gredient , video}) => {
                                         <p>24/7 Customer support</p>
                                     </li>
                                     </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                    <Link href="/faq" className="btn white_btn">BUY NOW</Link>
                                 </div>
                             </div>
 
                             <div className="col-md-4">
                                 <div className="pricing_block">
                                     <div className="icon">
-                                    <img src="assets/images/premium.png" alt="image" />
+                                    <Image width='auto' height='auto' src="assets/images/premium.png" alt="image" />
                                     </div>
                                     <div className="pkg_name">
                                     <h3>Premium</h3>
@@ -213,13 +214,13 @@ const Main = ({gredient , video}) => {
                                         <p>24/7 Customer support</p>
                                     </li>
                                     </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                    <Link href="/faq" className="btn white_btn">BUY NOW</Link>
                                 </div>
                             </div>
                         </div>
                     </div>
 
-                    <p className="contact_text" data-aos="fade-up" data-aos-duration="1500">Not sure what to choose ? <Link to="/contact">contact us</Link> for custom packages</p>
+                    <p className="contact_text" data-aos="fade-up" data-aos-duration="1500">Not sure what to choose ? <Link href="/contact">contact us</Link> for custom packages</p>
                 </div>
             </section>
         :
@@ -244,7 +245,7 @@ const Main = ({gredient , video}) => {
                             <div className="col-md-4">
                                 <div className="pricing_block">
                                     <div className="icon">
-                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={img1} alt="image" /> }
+                                    { video ? <Image width='auto' height='auto' src="assets/images/standard-one.png" alt="image" /> : <Image width='auto' height='auto' src={img1} alt="image" /> }
                                     </div>
                                     <div className="pkg_name">
                                     <h3>Standard</h3>
@@ -268,13 +269,13 @@ const Main = ({gredient , video}) => {
                                         <p>Support on request</p>
                                     </li>
                                     </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                    <Link href="/faq" className="btn white_btn">BUY NOW</Link>
                                 </div>
                             </div>
                             <div className="col-md-4">
                                 <div className="pricing_block highlited_block">
                                     <div className="icon">
-                                    { video ? <img src="assets/images/unlimited-one.png" alt="image"/> : <img src={img2} alt="image"/> }
+                                    { video ? <Image width='auto' height='auto' src="assets/images/unlimited-one.png" alt="image"/> : <Image width='auto' height='auto' src={img2} alt="image"/> }
                                     </div>
                                     <div className="pkg_name">
                                     <h3>Unlimited</h3>
@@ -298,13 +299,13 @@ const Main = ({gredient , video}) => {
                                         <p>24/7 Customer support</p>
                                     </li>
                                     </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                    <Link href="/faq" className="btn white_btn">BUY NOW</Link>
                                 </div>
                             </div>
                             <div className="col-md-4">
                                 <div className="pricing_block">
                                     <div className="icon">
-                                    {video ? <img src="assets/images/premium-one.png" alt="image" /> : <img src={img3} alt="image" /> }
+                                    {video ? <Image width='auto' height='auto' src="assets/images/premium-one.png" alt="image" /> : <Image width='auto' height='auto' src={img3} alt="image" /> }
                                     </div>
                                     <div className="pkg_name">
                                     <h3>Premium</h3>
@@ -328,7 +329,7 @@ const Main = ({gredient , video}) => {
                                         <p>24/7 Customer support</p>
                                     </li>
                                     </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                    <Link href="/faq" className="btn white_btn">BUY NOW</Link>
                                 </div>
                             </div>
                         </div>
@@ -339,7 +340,7 @@ const Main = ({gredient , video}) => {
                             <div className="col-md-4">
                                 <div className="pricing_block">
                                     <div className="icon">
-                                    { video ? <img src="assets/images/standard-one.png" alt="image" /> : <img src={img1} alt="image" /> }
+                                    { video ? <Image width='auto' height='auto' src="assets/images/standard-one.png" alt="image" /> : <Image width='auto' height='auto' src={img1} alt="image" /> }
                                     </div>
                                     <div className="pkg_name">
                                     <h3>Standard</h3>
@@ -363,14 +364,14 @@ const Main = ({gredient , video}) => {
                                         <p>Support on request</p>
                                     </li>
                                     </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                    <Link href="/faq" className="btn white_btn">BUY NOW</Link>
                                 </div>
                             </div>
 
                             <div className="col-md-4">
                                 <div className="pricing_block highlited_block">
                                     <div className="icon">
-                                    { video ? <img src="assets/images/unlimited-one.png" alt="image"/> : <img src={img2}alt="image"/> }
+                                    { video ? <Image width='auto' height='auto' src="assets/images/unlimited-one.png" alt="image"/> : <Image width='auto' height='auto' src={img2}alt="image"/> }
                                     </div>
                                     <div className="pkg_name">
                                     <h3>Unlimited</h3>
@@ -394,14 +395,14 @@ const Main = ({gredient , video}) => {
                                         <p>24/7 Customer support</p>
                                     </li>
                                     </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                    <Link href="/faq" className="btn white_btn">BUY NOW</Link>
                                 </div>
                             </div>
 
                             <div className="col-md-4">
                                 <div className="pricing_block">
                                     <div className="icon">
-                                    {video ? <img src="assets/images/premium-one.png" alt="image" /> : <img src={img3} alt="image" /> }
+                                    {video ? <Image width='auto' height='auto' src="assets/images/premium-one.png" alt="image" /> : <Image width='auto' height='auto' src={img3} alt="image" /> }
                                     </div>
                                     <div className="pkg_name">
                                     <h3>Premium</h3>
@@ -425,13 +426,13 @@ const Main = ({gredient , video}) => {
                                         <p>24/7 Customer support</p>
                                     </li>
                                     </ul>
-                                    <Link to="/faq" className="btn white_btn">BUY NOW</Link>
+                                    <Link href="/faq" className="btn white_btn">BUY NOW</Link>
                                 </div>
                             </div>
                         </div>
                     </div>
 
-                    <p className="contact_text" data-aos="fade-up" data-aos-duration="1500">Not sure what to choose ? <Link to="/contact">contact us</Link> for custom packages</p>
+                    <p className="contact_text" data-aos="fade-up" data-aos-duration="1500">Not sure what to choose ? <Link href="/contact">contact us</Link> for custom packages</p>
                 </div>
             </section>
         }

app/lnd/LndParts/Story/Main.js

@@ -1,4 +1,5 @@
-import { Link } from 'react-router-dom'
+import Link from 'next/link'
+import Image from 'next/image'
 import React from 'react'
 import story1 from '../../../../assets/images/story01.png'
 import story2 from '../../../../assets/images/story02.png'
@@ -17,7 +18,7 @@ const Main = () => {
                     <div className="col-md-4">
                         <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
                             <div className="story_img">
-                            <img src={story1} alt="image" />
+                            <Image width='auto' height='auto' src={story1} alt="image" />
                             <span>45 min ago</span>
                             </div>
                             <div className="story_text">
@@ -31,26 +32,26 @@ const Main = () => {
                     <div className="col-md-4">
                         <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
                             <div className="story_img">
-                            <img src={story2} alt="image" />
+                            <Image width='auto' height='auto' src={story2} alt="image" />
                             <span>45 min ago</span>
                             </div>
                             <div className="story_text">
                                 <h3>Top rated app! Yupp.</h3>
                                 <p>Simply dummy text of the printing and typesetting industry lorem Ipsum has Lorem Ipsum is.</p>
-                                <Link to="/blog-single">READ MORE</Link>
+                                <Link href="/blog-single">READ MORE</Link>
                             </div>
                         </div>
                     </div>
                     <div className="col-md-4">
                         <div className="story_box" data-aos="fade-up" data-aos-duration="1500">
                             <div className="story_img">
-                            <img src={story3} alt="image" />
+                            <Image width='auto' height='auto' src={story3} alt="image" />
                             <span>45 min ago</span>
                             </div>
                             <div className="story_text">
                                 <h3>Creative ideas on app.</h3>
                                 <p>Printing and typesetting industry lorem Ipsum has Lorem simply dummy text of the.</p>
-                                <Link to="/blog-single">READ MORE</Link>
+                                <Link href="/blog-single">READ MORE</Link>
                             </div>
                         </div>
                     </div>

app/lnd/LndParts/Testimonial/Main.js

@@ -1,5 +1,6 @@
 import OwlCarousel from 'react-owl-carousel'
-import { Link } from 'react-router-dom'
+import Image from 'next/image'
+import Link from 'next/link'
 import React from 'react'
 import user1 from '../../../../assets/images/testimonial_user1.png'
 import user2 from '../../../../assets/images/testimonial_user2.png'
@@ -52,7 +53,7 @@ const Main = () => {
                                 beenthe standar dummy. ”
                                 </p>
                                 <div className="testimonial_img">
-                                <img src={user1} alt="image" />
+                                <Image width='auto' height='auto' src={user1} alt="image" />
                                 </div>
                                 <h3>Shayna John</h3>
                                 <span className="designation">Careative inc</span>
@@ -72,7 +73,7 @@ const Main = () => {
                                 beenthe standar dummy. ”
                                 </p>
                                 <div className="testimonial_img">
-                                <img src={user2} alt="image" />
+                                <Image width='auto' height='auto' src={user2} alt="image" />
                                 </div>
                                 <h3>Willium Den</h3>
                                 <span className="designation">Careative inc</span>
@@ -92,7 +93,7 @@ const Main = () => {
                                 beenthe standar dummy. ”
                                 </p>
                                 <div className="testimonial_img">
-                                <img src={user3} alt="image" />
+                                <Image width='auto' height='auto' src={user3} alt="image" />
                                 </div>
                                 <h3>Cyrus Stephen</h3>
                                 <span className="designation">Careative inc</span>
@@ -110,11 +111,11 @@ const Main = () => {
                         <p>5.0 / 5.0</p>
                         </div>
                         <h3>2578</h3>
-                        <Link to="/review">TOTAL USER REVIEWS <i className="icofont-arrow-right"></i></Link>
+                        <Link href="/review">TOTAL USER REVIEWS <i className="icofont-arrow-right"></i></Link>
                     </div>
 
                     <div className="avtar_faces">
-                        <img src={user4} alt="image" />
+                        <Image width='auto' height='auto' src={user4} alt="image" />
                     </div>
                 </div>
             </div>

app/lnd/LndParts/Trusted/Main.js

@@ -5,6 +5,7 @@ import img2 from '../../../assets/images/spoty.png'
 import img3 from '../../../assets/images/shopboat.png'
 import img4 from '../../../assets/images/slack.png'
 import img5 from '../../../assets/images/envato.png'
+import Image from 'next/image'
 
 const Main = () => {
     const company_slider = {
@@ -40,42 +41,42 @@ const Main = () => {
                 <OwlCarousel id="company_slider" {...company_slider} className="owl-carousel owl-theme owl-loaded owl-drag">
                     <div className="item">
                     <div className="logo">
-                        <img src={img1} alt="image" />
+                        <Image width='auto' height='auto' src={img1} alt="image" />
                     </div>
                     </div>
                     <div className="item">
                     <div className="logo">
-                        <img src={img2} alt="image" />
+                        <Image width='auto' height='auto' src={img2} alt="image" />
                     </div>
                     </div>
                     <div className="item">
                     <div className="logo">
-                        <img src={img3} alt="image" />
+                        <Image width='auto' height='auto' src={img3} alt="image" />
                     </div>
                     </div>
                     <div className="item">
                     <div className="logo">
-                        <img src={img4} alt="image" />
+                        <Image width='auto' height='auto' src={img4} alt="image" />
                     </div>
                     </div>
                     <div className="item">
                     <div className="logo">
-                        <img src={img5} alt="image" />
+                        <Image width='auto' height='auto' src={img5} alt="image" />
                     </div>
                     </div>
                     <div className="item">
                     <div className="logo">
-                        <img src={img1} alt="image" />
+                        <Image width='auto' height='auto' src={img1} alt="image" />
                     </div>
                     </div>
                     <div className="item">
                     <div className="logo">
-                        <img src={img2} alt="image" />
+                        <Image width='auto' height='auto' src={img2} alt="image" />
                     </div>
                     </div>
                     <div className="item">
                     <div className="logo">
-                        <img src={img3} alt="image" />
+                        <Image width='auto' height='auto' src={img3} alt="image" />
                     </div>
                     </div>
                 </OwlCarousel>

app/lnd/LndParts/Work/Main.js

@@ -1,5 +1,6 @@
 import React , {useState} from 'react'
-import { Link } from 'react-router-dom'
+import Link from 'next/link'
+import Image from 'next/image'
 import img from '../../../../assets/images/download_app.jpg'
 import img1 from '../../../../assets/images/create_account.jpg'
 import img2 from '../../../../assets/images/enjoy_app.jpg'
@@ -29,9 +30,9 @@ const Main = ({dark}) => {
                                 <div className="step_text" data-aos="fade-right" data-aos-duration="1500">
                                 <h4>Download app</h4>
                                 <div className="app_icon">
-                                    <Link to="#"><i className="icofont-brand-android-robot"></i></Link>
-                                    <Link to="#"><i className="icofont-brand-apple"></i></Link>
-                                    <Link to="#"><i className="icofont-brand-windows"></i></Link>
+                                    <Link href="#"><i className="icofont-brand-android-robot"></i></Link>
+                                    <Link href="#"><i className="icofont-brand-apple"></i></Link>
+                                    <Link href="#"><i className="icofont-brand-windows"></i></Link>
                                 </div>
                                 <p>Download App either for Windows, Mac or Android</p>
                                 </div>
@@ -39,7 +40,7 @@ const Main = ({dark}) => {
                                 <h3>01</h3>
                                 </div>
                                 <div className="step_img" data-aos="fade-left" data-aos-duration="1500">
-                                <img src={img} alt="image" />
+                                <Image width='auto' height='auto' src={img} alt="image" />
                                 </div>
                             </li>
                             <li>
@@ -52,20 +53,20 @@ const Main = ({dark}) => {
                                 <h3>02</h3>
                                 </div>
                                 <div className="step_img" data-aos="fade-right" data-aos-duration="1500">
-                                <img src={img1} alt="image" />
+                                <Image width='auto' height='auto' src={img1} alt="image" />
                                 </div>
                             </li>
                             <li>
                                 <div className="step_text" data-aos="fade-right" data-aos-duration="1500">
                                 <h4>It’s done, enjoy the app</h4>
-                                <span>Have any questions check our <Link to="#">FAQs</Link></span>
+                                <span>Have any questions check our <Link href="#">FAQs</Link></span>
                                 <p>Get most amazing app experience,Explore and share the app</p>
                                 </div>
                                 <div className="step_number">
                                 <h3>03</h3>
                                 </div>
                                 <div className="step_img" data-aos="fade-left" data-aos-duration="1500">
-                                <img src={img2} alt="image" />
+                                <Image width='auto' height='auto' src={img2} alt="image" />
                                 </div>
                             </li>
                         </ul>
@@ -76,25 +77,25 @@ const Main = ({dark}) => {
                 <div className="yt_video" style={{display: "none"}} data-aos="fade-in" data-aos-duration="1500">
                     <div className="anim_line dark_bg">
                         
-                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
-                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
-                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
-                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
-                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
-                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
-                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
-                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
-                        <span><img src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src="assets/images/anim_line.png" alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src="assets/images/anim_line.png" alt="anim_line" /></span>
                     </div>
                     <div className="thumbnil">
                          
-                        <span className="banner_shape1"> <img src="assets/images/banner-shape1.png" alt="image"/> </span>
-                        <span className="banner_shape2"> <img src="assets/images/banner-shape2.png" alt="image"/> </span>
-                        <span className="banner_shape3"> <img src="assets/images/banner-shape3.png" alt="image"/> </span>
-                        <img src="assets/images/yt_thumb.png" alt="image" />
-                        <Link to="#" className="popup-youtube play-button" data-url="#" onClick={() => setytShow(true)} data-toggle="modal" data-target="#myModal" title="XJj2PbenIsU">
+                        <span className="banner_shape1"> <Image width='auto' height='auto' src="assets/images/banner-shape1.png" alt="image"/> </span>
+                        <span className="banner_shape2"> <Image width='auto' height='auto' src="assets/images/banner-shape2.png" alt="image"/> </span>
+                        <span className="banner_shape3"> <Image width='auto' height='auto' src="assets/images/banner-shape3.png" alt="image"/> </span>
+                        <Image width='auto' height='auto' src="assets/images/yt_thumb.png" alt="image" />
+                        <Link href="#" className="popup-youtube play-button" data-url="#" onClick={() => setytShow(true)} data-toggle="modal" data-target="#myModal" title="XJj2PbenIsU">
                         <span className="play_btn">
-                            <img src={video} alt="image" />
+                            <Image width='auto' height='auto' src={video} alt="image" />
                             <div className="waves-block">
                             <div className="waves wave-1"></div>
                             <div className="waves wave-2"></div>
@@ -108,25 +109,25 @@ const Main = ({dark}) => {
                 </div> :
                 <div className="yt_video" data-aos="fade-in" data-aos-duration="1500">
                     <div className="anim_line dark_bg">
-                    <span><img src={line} alt="anim_line" /></span>
-                        <span><img src={line} alt="anim_line" /></span>
-                        <span><img src={line} alt="anim_line" /></span>
-                        <span><img src={line} alt="anim_line" /></span>
-                        <span><img src={line} alt="anim_line" /></span>
-                        <span><img src={line} alt="anim_line" /></span>
-                        <span><img src={line} alt="anim_line" /></span>
-                        <span><img src={line} alt="anim_line" /></span>
-                        <span><img src={line} alt="anim_line" /></span>
+                    <span><Image width='auto' height='auto' src={line} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={line} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={line} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={line} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={line} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={line} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={line} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={line} alt="anim_line" /></span>
+                        <span><Image width='auto' height='auto' src={line} alt="anim_line" /></span>
                         
                     </div>
                     <div className="thumbnil">
-                        <span className="banner_shape1"> <img src={banner} alt="image"/> </span>
-                        <span className="banner_shape2"> <img src={banner1} alt="image"/> </span>
-                        <span className="banner_shape3"> <img src={banner2} alt="image"/> </span>
-                        <img src={ytvideo} alt="image" />
-                        <Link to="#" className="popup-youtube play-button" data-url="#" onClick={() => setytShow(true)} data-toggle="modal" data-target="#myModal" title="XJj2PbenIsU">
+                        <span className="banner_shape1"> <Image width='auto' height='auto' src={banner} alt="image"/> </span>
+                        <span className="banner_shape2"> <Image width='auto' height='auto' src={banner1} alt="image"/> </span>
+                        <span className="banner_shape3"> <Image width='auto' height='auto' src={banner2} alt="image"/> </span>
+                        <Image width='auto' height='auto' src={ytvideo} alt="image" />
+                        <Link href="#" className="popup-youtube play-button" data-url="#" onClick={() => setytShow(true)} data-toggle="modal" data-target="#myModal" title="XJj2PbenIsU">
                         <span className="play_btn">
-                            <img src={video} alt="image" />
+                            <Image width='auto' height='auto' src={video} alt="image" />
                             <div className="waves-block">
                             <div className="waves wave-1"></div>
                             <div className="waves wave-2"></div>

app/myrefer/Hero.tsx

@@ -0,0 +1,106 @@
+"use client"
+import React from 'react';
+import Image from 'next/image';
+import { useParams } from 'next/navigation';
+
+import cardImg from '../assets/images/home/wrench-card-only.png'
+import wrenchAgent from '../assets/images/home/wrench-agent.png'
+import Link from 'next/link';
+// import bg from '../assets/images/background-bg.jpg'
+
+function Hero() {
+    const {refer_link} = useParams()
+
+    return (
+        <>
+            <section className="appie-about-8-area pt-50 pb-70">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-lg-12">
+                            <div className="appie-section-title">
+                                <h3 className="appie-title">
+                                    {/* We bring everything <br />
+                                    that's required to build apps */}
+                                    Join WrenchBoard and Start Earning
+                                </h3>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="row">
+                        <div className="col-lg-7 mb-3 mb-lg-0">
+                            <div className='appie-about-container'>
+                                <div className='row appie-about-8-box'>
+                                    <div className="col-12 col-md-6">
+                                        <h3 className="title">
+                                            Get Reward for Accomplishments
+                                        </h3>
+                                        <p>
+                                            On WrenchBoard, set goals, tasks, or anything else that motivates or needs to be done, and reward completion. WrenchBoard is the platform for planning rewards, engaging, and connecting with family.
+                                        </p>
+                                        <div className=''>
+                                            <a className="mb-5 mb-md-0 main-btn" href={`${process.env.NEXT_PUBLIC_DASH_URL}/myrefer/${refer_link}`}>
+                                                Get Started <i className="fal fa-arrow-right" />
+                                            </a>
+                                        </div>
+                                    </div>
+                                    <div className="col-12 col-md-6">
+                                        <Image
+                                            src={cardImg}
+                                            className='w-100 h-100'
+                                            width={'100'}
+                                            height={'100'}
+                                            alt="" 
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="col-lg-5">
+                            <div className='appie-about-container'>
+                                <div className='h-100 row appie-about-8-box'>
+                                    <div className="col-12 col-md-6">
+                                        <div className='h-100 d-flex flex-column gap-5'>
+                                            <h3 className="title">
+                                                Learn more...
+                                            </h3>
+                                            <ul className='refer-container'>
+                                                <li>
+                                                    <Link href="/about-us">About WrenchBoard</Link>
+                                                </li>
+                                                <li>
+                                                    <Link href="/use-cases">Use Cases</Link>
+                                                </li>
+                                                <li>
+                                                    <Link href="/service">Services</Link>
+                                                </li>
+                                                <li>
+                                                    <Link href="/faq">FAQ</Link>
+                                                </li>
+                                            </ul>
+                                            <div className='d-none'>
+                                                <a className="mb-5 mb-md-0 main-btn" href={`${process.env.NEXT_PUBLIC_DASH_URL}/myrefer/${refer_link}`}>
+                                                    Get Started <i className="fal fa-arrow-right" />
+                                                </a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className="col-12 col-md-6">
+                                        <Image
+                                            src={wrenchAgent}
+                                            className='w-100 h-auto'
+                                            width={'100'}
+                                            height={'100'}
+                                            alt="" 
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+}
+
+export default Hero;

app/myrefer/[refer_link]/page.tsx

@@ -1,5 +1,8 @@
 import React from 'react'
+import HomeNav from '../../components/navigation/HomeNav';
+import Hero from '../Hero';
 import FooterHomeOne from '../../components/FooterHomeOne';
+import BackToTop from '../../components/BackToTop';
 
 // must be a better way to centralize the style = TEMPORARY USE 
 import '../../assets/css/bootstrap.min.css';
@@ -10,15 +13,14 @@ 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 function page() {
+    return (
+        <>
+           {/* <HomeNav />
+           <div className='' style={{paddingTop:'100px'}}></div> */}
+           <Hero />
+           <FooterHomeOne className={''} />
+           <BackToTop className='' />
+        </>
+    );
 }
-
-export default page

app/not-found.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import Error from './components/Error'
+
+// 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';
+
+
+export default function notFound() {
+  return (
+    <Error />
+  )
+}

app/privacy/DetailsPrivacy.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import ServiceSideMenu from '../components/ServiceSideMenu';
+
+function DetailsPrivacy() {
+    return (
+        <>
+            <section className="appie-service-details-area pt-100 pb-100">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-lg-4">
+                            <ServiceSideMenu />
+                        </div>
+                        <div className="col-lg-8">
+                            <div className="service-details-content">
+                               
+                                <div className="content">
+                                    <h4 className="title">Privacy Policy</h4>
+                                    <p>
+                                    Wrenchboard issues this policy to inform users about the information we collect, the use and disclosures in the course of interactions with the WrenchBoard services by customers. We value the privacy of our customers and such strive to employ best industry standards and practices to protect their privacy. By signing up for this services, using our products or technologies offered through the WrenchBoard website, you expressly agree to the terms of this Privacy Policy.
+                                    </p>
+                                    <span>
+                                      -
+                                    </span>
+                                    <hr size="1" />
+                                    <h4 className="title">Collection of Information </h4>
+                                    <p>
+                                    When you sign up for WrenchBoard platform as a user, freelancer, worker or client, you inadvertently provide certain personal information such as name and email address. This information may be used to identify or contact you as part of the service we provide. Below is information we may collect from registered users of the service.
+                                    <ul class="list-group">
+                                        <li class="list-group-item">We collect financial information which include bank account numbers, debit/credit account.</li>
+                                        <li class="list-group-item">We also collect other personal information such as date of birth to ensure compliance to lab our regulations as the platform is strictly for persons 18 years and above.</li>
+                                        <li class="list-group-item">We collect personal information (names email addresses) from you and your friends when you use our referral program. We may also receive information about you from third party sites during promotions and campaigns.</li>
+                                    </ul>
+                                    </p>
+                                    <hr size="1" />
+                                    <h4 className="title">Use of Personal Information </h4> 
+                                    <p>
+                                    The information we collect about you is mainly utilized to provide a secure, efficient and smooth user experience as you interact with the site. We may also utilize the information to contact you to resolve issues with your account or resolve disputes between freelancers and clients. We also use your personal information in the following ways.
+                                    <ul class="list-group">
+                                        <li class="list-group-item">To comply with the regulatory requirement, whenever the need arises. </li>
+                                        <li class="list-group-item">To improve business relationship between Wrenchboard and users. </li>
+                                        <li class="list-group-item">To manage and protect our IT infrastructure. </li>
+                                        <li class="list-group-item">To contact you as the need arises as part of the services we offer to users. </li>
+                                        <li class="list-group-item">To provide some indication on the promotional offers and advertisement we direct to you. </li>
+                                        <li class="list-group-item">To protect you and your information. We regularly send you notification based on activities as you use the service. </li>
+                                    </ul>
+                                    </p>
+
+                                    <hr size="1" />
+                                    <h4>How We Share Your Personal Information: </h4>
+                                    <p>
+                                        When you sign up to the Service as a freelancer and create a profile, we will share your limited personal information with clients or project owners for whom you may perform a task or do work for based on expression of interest. Such information will include name, profile information with experience and your ranking based on previous performance. This information will be available to the public.</p>
+                                    <p>When you register as a client or project owner and post a job in the market place or offer jobs to preselected freelancers or workers on this service, information about you, your business will be shared. This information will be based on the information provided in your profile.</p>
+                                    <p>In order to deliver a quality service on WrenchBoard, we require the services of third parties and agents such as PayPal, Quickteller Service or banks to facilitate and process transactions.</p>
+                                    <p>We may also share your personal information when and if compelled or mandated by government agencies, or court injunctions or regulatory requirement. In order to settle disputes or claims, we may also be compelled to share your information in order to deliver services to you.</p>
+                                    <p>Finally, we may share your information with companies that we plan to to merge with or to be acquired by. We will take necessary measure to ensure that all such new affiliations and corporate entities comply with the Privacy Policies hereby stated failing which you will be notified duly.</p>
+                                
+                                    <hr size="1" />
+                                   <h4 className="title"> How We Use Cookies and Related Technologies.</h4>
+                                    <p>
+                                        When you access the service or website, www.wrenchboard.com , we store small files called Cookies in your browser. Cookies and related technologies like beacons and tags are used to identify customers uniquely. With Cookies, we can track and trend the pages of interest within the website. Hence, these technologies help us focus only relevant promotions or advertisement to each customer. Through this technologies, we are able to improve the service based on the feedback from the interaction with users. We also rely on these technologies to mitigate fraudulent attempts on your WrenchBoard account. You may elect to disable cookies to prevent installation of cookies from the website to your browser. However, your functional experience with the service or website may be impacted. Note that you automatically disconnect from cookies when you close your browser session or log out of the service.
+                                    </p>
+
+
+                                    <hr size="1" />
+                                    <h4 className="title"> Measures We Take to Secure Your Information</h4>
+                                    <p>
+                                        Your data and privacy are important to us as such we take extreme care on how we protect your information. We use a combination of industry standard encryption technologies to protect your information. Your password is not visible to our technical support team or any one in WrenchBoard. Our IT infrastructures are located in hosting facilities with strict access controls, and security protocols with only pre checked and authorized persons have access.
+                                    </p>
+
+
+                                    <hr size="1" />
+                                    <h4 className="title">Updating Your Information or Opting Out.</h4> 
+                                    <p>
+                                    Users of this service may update the information posted in profiles or their accounts at any time. The accuracy of information posted on the profiles and accounts is entirely the responsibility of users. You may also decide to opt out the service or close your account at any time. We may also deactivate your account if you violate the terms of use of the website. Whilst we will endeavor to delete your core information in such instances, we will retain minimal records for reasons including disputes, claims or administrative purposes. Also, note that it may not be possible to delete any information you had shared with other users on the website previously.
+                                    </p>
+
+                                    <hr size="1" />
+                                    <h4 className="title">Deactivate/Delete your account.</h4> 
+                                    <p>
+                                    If you no longer wish to use our Services, you can deactivate your Services account. If you want to deactivate your account, that setting is available to you in your account settings. Otherwise, please get in touch with our support. While we close any associated process, you will not be able to access your account. Note that this process cannot be reversed since we will remove your data. If you want to use our services in the future, it will be a new account altogether.   </p>
+
+                                    <hr size="1" />
+                                    <h4 className="title">Changes To the Policy</h4>
+                                    <p>
+                                    We reserve the rights to update and make changes to this Privacy policy at anytime. Changes will become effective once posted. However, we will notify you by email or when you log on to the service or website about any changes that fundamentally affect how we manage your personal information.
+                                    Contacting Us: You may contact us about this policy through our email address anytime : support@wrenchboard.com
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+}
+
+export default DetailsPrivacy;

app/privacy/HeroPrivacy.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import thumb from '../assets/images/fun-fact-thumb.png';
+import Image from 'next/image';
+
+function HeroPrivacy({title}) {
+    return (
+        <>
+            <div className="appie-page-title-area appie-page-service-title-area">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-lg-12">
+                            <div className="appie-page-title-item">
+                                <h1 className="appie-title">
+                                {title}
+                                </h1>
+                                <div className="thumb">
+                                    <Image src={thumb} alt="" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default HeroPrivacy;

app/privacy/page.tsx

@@ -1,5 +1,9 @@
 import React from 'react'
+import ServiceNav from '../components/navigation/ServiceNav';
+import HeroPrivacy from './HeroPrivacy'
+import DetailsPrivacy from './DetailsPrivacy'
 import FooterHomeOne from '../components/FooterHomeOne';
+import BackToTop from '../components/BackToTop';
 
 // must be a better way to centralize the style = TEMPORARY USE 
 import '../assets/css/bootstrap.min.css';
@@ -14,8 +18,11 @@ import '../assets/css/style.css';
 function page() {
   return (
     <> 
-    <div>Privacy Here</div>
-    <FooterHomeOne className={undefined} />
+      <ServiceNav />
+      <HeroPrivacy title="Privacy Policy" />
+      <DetailsPrivacy />
+      <FooterHomeOne className='' />
+      <BackToTop className='' />
     </>
    
   )

app/service/MissionStatement.js

@@ -67,8 +67,9 @@ function MissionStatement() {
                                     data-grp-name="faq-accrodion"
                                 >
                                     {
-                                         ourMissions.map((item) => (
+                                         ourMissions.map((item, index) => (
                                                 <div
+                                                    key={index}
                                                     className={`accrodion ${
                                                         showQuestion === item.id ? 'active' : ''
                                                     }`}

app/service/ServiceTopart.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import ServiceSideMenu from './ServiceSideMenu';
+// import ServiceSideMenu from './ServiceSideMenu';
+import ServiceSideMenu from '../components/ServiceSideMenu';
 
 function ServiceTopart() {
 

app/terms/DetailsService.js

@@ -0,0 +1,281 @@
+import React from 'react';
+import ServiceSideMenu from './ServiceSideMenu';
+
+function DetailsService() {
+    return (
+        <>
+            <section className="appie-service-details-area pt-100 pb-100">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-lg-4">
+                            <ServiceSideMenu />
+                        </div>
+                        <div className="col-lg-8">
+                            <div className="service-details-content">
+                                <div className="content">
+                                    <div className="mb-4">
+                                    <h4 className="title mb-4">
+                                        Terms of use
+                                    </h4>
+                                    <p className="">
+                                        (updated August 10, 2023)
+                                    </p>
+                                    <p className="">
+                                        These Website Terms & Conditions (“T&Cs”) apply to your access and
+                                        use of www.wrenchboard.com,users.wrenchboard.com (the “Site”),
+                                        native apps, including all software, data, reports, text, images,
+                                        sounds, video, and all contents made available through any portion
+                                        of the Site (collectively, the “Content”). The range includes all
+                                        such elements as whole, individual, and parts.
+                                    </p>
+                                    </div>
+                                    <hr />
+                                    <div className="my-4">
+                                    <h4 className="title mb-4">
+                                        Acceptance of Terms
+                                    </h4>
+                                    <p className="">
+                                        WRENCHBOARD permits you (“User” or “you” or “your”) to access and
+                                        use the Site and Content, subject to these T&Cs. By accessing or
+                                        using any portion of the Site, you acknowledge that you have read,
+                                        understood, and agree to be bound by these T&Cs. If you do not agree
+                                        with these T&Cs, you must not accept these T&Cs or access or use the
+                                        site or content.
+                                    </p>
+                                    </div>
+                                    <hr />
+
+                                    <div className="my-4">
+                                    <h4 className="title mb-4">
+                                        General Conditions of Use
+                                    </h4>
+                                    <ul className="ml-4">
+                                        <li className="">
+                                        <h6 className="title my-4">
+                                            Authorization to Access and Use Site and Content.
+                                        </h6>
+                                        <p className="">
+                                            Subject to your compliance with these T&Cs and the provisions
+                                            hereof, you may access or use the Site and Content solely to
+                                            evaluate WRENCHBOARD and WRENCHBOARD’s products and services.
+                                            You may only link to the Site or Content, or any portion
+                                            thereof, as expressly permitted by WRENCHBOARD.
+                                        </p>
+                                        </li>
+                                        <li className="">
+                                        <h6 className="title my-4">
+                                            Ownership and Restrictions
+                                        </h6>
+                                        <p className="">
+                                            All rights, title, and interest in and to the Site and Content
+                                            will remain exclusive to WRENCHBOARD. You will not:
+                                        </p>
+                                        <ol className="ml-4" style={{listStyleType: 'number'}}>
+                                            <li className="my-2">
+                                            Sublicense, resell, rent, lease, transfer, assign, timeshare,
+                                            or commercially exploit or make the Site and any Content
+                                            available to any third party.
+                                            </li>
+                                            <li className="my-2">
+                                            Use the Site and Content in any unlawful manner (including
+                                            without limitation in violation of any data, privacy, or
+                                            export control laws) or in any way that interferes with or
+                                            disrupts the integrity or performance of the Site and Content
+                                            or their related components.
+                                            </li>
+                                            <li className="my-2">
+                                            Modify, adapt, or hack the Site and Content to, or try to,
+                                            gain unauthorized access to the restricted portions of the
+                                            Site and Content or related systems or networks (i.e.,
+                                            circumvent any encryption or other security measures, gain
+                                            access to any source code or any other underlying form of
+                                            technology or information, and gain access to any part of the
+                                            Site and Content, or any other products or services of
+                                            WRENCHBOARD that are not readily made available to the general
+                                            public).
+                                            </li>
+                                        </ol>
+                                        <p className="my-4">
+                                            You are not permitted to copy, modify, frame, repost, publicly
+                                            perform or display, sell, reproduce, distribute, or create
+                                            derivative works of the Site and Content, except that you may
+                                            download and print one copy of the publicly available materials
+                                            (i.e., the Content that does not require an Account name or
+                                            password to access) on any single computer solely for your
+                                            personal, non-commercial use, provided that you do not modify
+                                            the material in any way. You keep intact all copyright,
+                                            trademark, and other proprietary notices.
+                                        </p>
+                                        <p className="my-4">
+                                            You agree not to access the Site or Content by any means other
+                                            than through the interface that WRENCHBOARD provides to access
+                                            the same. You may not use any “page-scrape,” “deep-link,”
+                                            “spider,” or “robot or other automatic program, device,
+                                            algorithm or methodology, or any similar manual process, to
+                                            access, copy, acquire, or monitor any portion of the Site or any
+                                            Content, or in any way reproduce or circumvent the presentation
+                                            or navigational structure of the Site or any Content, to obtain
+                                            or attempt to obtain any Content or other information through
+                                            any means not made generally available through the Site by
+                                            WRENCHBOARD.
+                                        </p>
+                                        <p className="my-4">
+                                            WRENCHBOARD reserves the right to take lawful measures to
+                                            prevent such activity. You may not forge headers or otherwise
+                                            manipulate identifiers to disguise the origin of any message or
+                                            transmittal you send to WRENCHBOARD on or through the Site or
+                                            any service offered on or through the Site. You may not pretend
+                                            that you are, or that you represent, someone else or impersonate
+                                            any other individual or entity.
+                                        </p>
+                                        </li>
+                                        <li className="">
+                                        <h6 className="title my-4">
+                                            Responsibility for Your Data
+                                        </h6>
+                                        <p className="">
+                                            You are solely responsible for all data, information, and other
+                                            Content, that you upload, post, or otherwise provide or store
+                                            (hereafter “post(ing)”) in connection with or relating to the
+                                            Site. By posting your information and other Content (“User
+                                            Content”) on or through the Site and Content, you grant
+                                            WRENCHBOARD a worldwide, non-exclusive, perpetual, irrevocable,
+                                            royalty-free, sublicensable, and transferable license to use,
+                                            modify, reproduce, distribute, display, publish and perform User
+                                            Content in connection with the Site and Content. WRENCHBOARD has
+                                            the right, but not the obligation, to monitor the Site and
+                                            Content and User Content. <br />
+                                            WRENCHBOARD may remove or turn off any User Content at any time
+                                            for any reason or no reason. WRENCHBOARD will have no liability
+                                            to you for any unauthorized access or use of any of User Content
+                                            or any corruption, deletion, destruction, or loss of any of User
+                                            Content.
+                                        </p>
+                                        </li>
+                                        <li className="">
+                                        <h6 className="title my-4">
+                                            Feedback
+                                        </h6>
+                                        <p className="">
+                                            You may submit ideas, suggestions, or comments (“Feedback”)
+                                            regarding the Site and Content or WRENCHBOARD’s business,
+                                            products, or services. By submitting any Feedback, you
+                                            acknowledge and agree that:{" "}
+                                        </p>
+                                        <ol className="ml-5" style={{listStyleType: 'number'}}>
+                                            <li className="my-2">
+                                            Your Feedback is provided by you voluntarily, and WRENCHBOARD
+                                            may, without any obligations or limitations, use and exploit
+                                            such Feedback in any manner and for any purpose.
+                                            </li>
+                                            <li className="my-2">
+                                            You will not seek and are not entitled to any money or other
+                                            form of compensation, consideration, or attribution concerning
+                                            your Feedback, regardless of whether WRENCHBOARD considered or
+                                            used your Feedback in any manner.
+                                            </li>
+                                            <li className="my-2">
+                                            Your Feedback is not confidential or proprietary information
+                                            of you or any third party.
+                                            </li>
+                                        </ol>
+                                        </li>
+                                    </ul>
+                                    </div>
+                                    <hr />
+
+                                    <div className="my-4">
+                                    <h4 className="title mb-4">
+                                        Termination of Access Due to Violations
+                                    </h4>
+                                    <p className="">
+                                        WRENCHBOARD may, in its sole discretion and without prior notice,
+                                        terminate your access to the Site and block your future access to
+                                        the Site if we determine that you have violated these T&Cs or other
+                                        agreements or guidelines which may be associated with your use of
+                                        the Site. Further, WRENCHBOARD may, in its sole discretion and
+                                        without prior notice, terminate your access to the Site for cause,
+                                        which includes (but is not limited to):
+                                    </p>
+                                    <ol className="ml-4" style={{listStyleType: 'number'}}>
+                                        <li className="my-2">
+                                        Requests by law enforcement or other government agencies
+                                        </li>
+                                        <li className="my-2">
+                                        Discontinuance or material modification of the Site or any service
+                                        offered on or through the Site
+                                        </li>
+                                        <li className="my-2">
+                                        Unexpected technical issues or problems.T&Cs Updates
+                                        </li>
+                                    </ol>
+                                    <p className="">
+                                        WRENCHBOARD reserves the right, at its sole discretion, to change or
+                                        modify portions of these T&Cs at any time. WRENCHBOARD will post the
+                                        changes to these T&Cs on the Site and indicate at the top of this
+                                        page the date these terms were last revised. It is your
+                                        responsibility to check the T&Cs periodically for changes. Your
+                                        continued use of the Site and Content after the date any such
+                                        changes become effective constitutes your acceptance of the new or
+                                        revised T&Cs.
+                                    </p>
+                                    </div>
+                                    <hr />
+
+                                    <div className="my-4">
+                                    <h4 className="title mb-4">
+                                        NO WARRANTIES AND DISCLAIMER BY WRENCHBOARD
+                                    </h4>
+                                    <p className="">
+                                        THE SITE AND CONTENT, AND ALL SERVER AND NETWORK COMPONENTS, ARE
+                                        PROVIDED ON AN “AS IS” AND “AS AVAILABLE” BASIS WITH ALL ERRORS AND
+                                        DEFECTS AND WITHOUT ANY WARRANTIES OF ANY KIND, AND WRENCHBOARD
+                                        EXPRESSLY DISCLAIMS ALL REPRESENTATIONS AND WARRANTIES, INCLUDING
+                                        ANY IMPLIED WARRANTIES OF ACCURACY, COMPLETENESS, MERCHANTABILITY,
+                                        FITNESS FOR A PARTICULAR PURPOSE OR NON-INFRINGEMENT, AND ANY
+                                        REPRESENTATIONS OR WARRANTIES ARISING FROM COURSE OF DEALING, COURSE
+                                        OF PERFORMANCE OR USAGE OF TRADE. YOU ACKNOWLEDGE THAT WRENCHBOARD
+                                        DOES NOT WARRANT THAT YOUR ACCESS OR USE OR BOTH OF THE SITE AND
+                                        CONTENT WILL BE UNINTERRUPTED, TIMELY, SECURE, ERROR-FREE, OR
+                                        VIRUS-FREE, AND WRENCHBOARD DOES NOT MAKE ANY WARRANTY AS TO THE
+                                        RESULTS THAT MAY BE OBTAINED FROM THE USE OF THE SITE AND CONTENT.
+                                        NO INFORMATION, ADVICE, OR SERVICES OBTAINED BY YOU FROM WRENCHBOARD
+                                        OR THROUGH THE SITE WILL CREATE ANY WARRANTY NOT EXPRESSLY STATED IN
+                                        THESE TERMS and CONDITIONS, AND YOU SHOULD NOT RELY ON THE SITE AND
+                                        THE GENERAL CONTENT ALONE AS THE BASIS FOR YOUR BUSINESS DECISIONS.
+                                    </p>
+                                    </div>
+                                    <hr />
+
+                                    <div className="my-4">
+                                    <p className="">
+                                        WRENCHBOARD reserves the right to do any of the following, at any
+                                        time, without notice: ( 1 ); to modify, suspend or terminate operation
+                                        of or access to the Site, or any portion of the Site, for any
+                                        reason; ( 2 ) to modify or change the Site, or any portion of the
+                                        Site, for any reason; and ( 3 ) to interrupt the operation of the
+                                        Site, or any portion of the Site, as necessary to perform routine or
+                                        non-routine maintenance, error correction, or other changes. Changes
+                                        to the Policy
+                                    </p>
+
+                                    <p className="my-4">
+                                        We reserve the right to update and change this Privacy policy at any
+                                        time. Changes will become effective once posted. However, we will
+                                        notify you by email or when you log on to the service or website
+                                        about any changes that fundamentally affect how we manage your
+                                        personal information. Contacting Us: You may contact us about this
+                                        policy through our email address anytime: support@wrenchboard.com
+                                    </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </>
+    );
+}
+
+export default DetailsService;

app/terms/HeroTerms.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import thumb from '../assets/images/fun-fact-thumb.png';
+import Image from 'next/image';
+
+function HeroTerms({title}) {
+    return (
+        <>
+            <div className="appie-page-title-area appie-page-service-title-area">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-lg-12">
+                            <div className="appie-page-title-item">
+                                <h1 className="appie-title">
+                                {title}
+                                </h1>
+                                <div className="thumb">
+                                    <Image src={thumb} alt="" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default HeroTerms;

app/terms/ServiceSideMenu.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+
+import AboutIcon from '../assets/images/icon/about-us.ico'
+import HomeIcon from '../assets/images/icon/home-icon.ico'
+import UseCaseIcon from '../assets/images/icon/use-case.ico'
+import PrivacyIcon from '../assets/images/icon/privacy-policy.ico'
+import TermsIcon from '../assets/images/icon/term-and-conditions.ico'
+
+function ServiceSideMenu() {
+    return (
+        <>
+            <div className="service-details-sidebar mr-50">
+
+                <div className="service-download-widget">
+                    <Link href="/">
+                        {/* <i className="fal fa-download"></i> */}
+                        <Image src={HomeIcon} alt='sidenav-icon' />
+                        <span>Home</span>
+                    </Link>
+                </div>
+
+                <div className="service-download-widget">
+                    <Link href="/about-us">
+                        {/* <i className="fal fa-download"></i> */}
+                        <Image src={AboutIcon} alt='sidenav-icon' />
+                        <span>About us</span>
+                    </Link>
+                </div>
+                <div className="service-download-widget">
+                    <Link href="/use-cases">
+                        {/* <i className="fal fa-file-pdf"></i> */}
+                        <Image src={UseCaseIcon} alt='sidenav-icon' />
+                        <span>Use Cases</span>
+                    </Link>
+                </div>
+
+
+
+                <div className="service-download-widget">
+                    <Link href="/privacy">
+                        {/* <i className="fal fa-download"></i> */}
+                        <Image src={PrivacyIcon} alt='sidenav-icon' />
+                        <span>Privacy Policy</span>
+                    </Link>
+                </div>
+                <div className="service-download-widget">
+                    <Link href="/terms">
+                        {/* <i className="fal fa-file-pdf"></i> */}
+                        <Image src={TermsIcon} alt='sidenav-icon' />
+                        <span>Terms of use</span>
+                    </Link>
+                </div>
+
+                <div className="service-category-widget">
+                    <ul>
+                        <li>
+                            Get WrenchBoard App
+                        </li>
+
+                        <li>
+                            <a href={process.env.NEXT_PUBLIC_APPLE_APP}>
+                                <i className="fab fa-apple" /> Download for iOS
+                            </a>
+                        </li>
+                        <li>
+                            <a className="item-2" href={process.env.NEXT_PUBLIC_ANDROID_APP}>
+                                <i className="fab fa-google-play" /> Download for
+                                Android
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+
+            </div>
+
+
+        </>
+    );
+}
+
+export default ServiceSideMenu;

app/terms/page.tsx

@@ -1,6 +1,10 @@
 import React from 'react'
+import ServiceNav from '../components/navigation/ServiceNav';
+import HeroTerms from './HeroTerms'
+import DetailsService from './DetailsService'
 import FooterHomeOne from '../components/FooterHomeOne';
-import HomeNav from '../components/navigation/HomeNav'
+import BackToTop from '../components/BackToTop';
+
 // must be a better way to centralize the style = TEMPORARY USE 
 import '../assets/css/bootstrap.min.css';
 import '../assets/css/custom-animated.css';
@@ -14,9 +18,11 @@ import '../assets/css/style.css';
 function page() {
   return (
     <>
-    <HomeNav />
-    <div>Terms Here</div>
-    <FooterHomeOne className={undefined} />
+      <ServiceNav />
+      <HeroTerms title="Terms of use" />
+      <DetailsService />
+      <FooterHomeOne className='' />
+      <BackToTop className='' />
     </>
    
   )

app/use-cases/UseCase.js

@@ -20,7 +20,7 @@ function UseCase() {
                             <div key={index} className="col-12 col-md-6 col-lg-4">
                                 <div className="post-item-1">
 
-                                    {<img src={blgImg} alt={i.title} />}
+                                    {<Image width='100' height='100' src={blgImg} alt={i.title} />}
                                     <div className="b-post-details">
                                         <h3>
                                             <Link href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>

docker-compose.yml

@@ -5,14 +5,16 @@ services:
       context: .
       dockerfile: docker/Dockerfile
     restart: unless-stopped
-    #image: registry.chiefsoft.net/wrenchboardmainsite_wrenchboard-www:latest
+    image: registry.chiefsoft.net/wrenchboardmainsite_wrenchboard-www2025:latest
     ports:
-      - 9581:3000
+      - ${APP_PORT}:3000
     working_dir: /app
     volumes:
       - ./:/app
       - ./src/:/app/src
       - ./run.sh:/app/run.sh
+      - ./node_modules:/app/node_modules
+      - ./next:/app/.next
     extra_hosts:
       - backend.wrenchboard.api.live:10.10.33.15
       - backend.wrenchboard.api.test:10.10.33.15

docker/Dockerfile

@@ -110,6 +110,8 @@ RUN apk add --no-cache --virtual .build-deps-yarn curl gnupg tar \
 # COPY docker-entrypoint.sh /usr/local/bin/
 # ENTRYPOINT ["docker-entrypoint.sh"]
 
+RUN mkdir -p /app
+
 # set working directory
 WORKDIR /app
 
@@ -117,18 +119,25 @@ WORKDIR /app
 ENV PATH /app/node_modules/.bin:$PATH
 
 # install app dependencies
-COPY package.json ./
-#COPY package-lock.json ./
+COPY package.json /app
+#COPY package-lock.json /app
 RUN npm install --silent
 #RUN npm install react-scripts@3.4.1 -g --silent
 #RUN npm install -g serve
+RUN npm install -g next
+RUN npm install sharp
 
 # add app
-COPY . ./
+COPY . /app
 
 # build app
 #RUN npm run-script build
 
 # start app
 #CMD ["serve", "-s", "build"]
-CMD ["npm", "run", "dev"]
+#CMD ["npm", "run", "dev"]
+
+#RUN npm run build
+#CMD ["npm", "run", "start"]
+CMD ["sh", "-c", "next build && next start"]
+

package-lock.json

@@ -8,18 +8,32 @@
       "name": "wrenchboard-www2025",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^1.7.2",
+        "caniuse-lite": "^1.0.30001651",
         "next": "14.2.5",
         "react": "^18",
         "react-dom": "^18",
-        "react-router-dom": "^6.25.1"
+        "react-owl-carousel": "^2.3.3",
+        "react-router-dom": "^6.25.1",
+        "react-simply-carousel": "^9.1.4",
+        "sharp": "^0.33.4"
       },
       "devDependencies": {
-        "@types/node": "^20",
-        "@types/react": "^18",
+        "@types/node": "20.14.14",
+        "@types/react": "18.3.3",
         "@types/react-dom": "^18",
         "eslint": "^8",
         "eslint-config-next": "14.2.5",
-        "typescript": "^5"
+        "typescript": "5.5.4"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.2.0.tgz",
+      "integrity": "sha512-bV21/9LQmcQeCPEg3BDFtvwL6cwiTMksYNWQQ4KOxCZikEGalWtenoZ0wCiukJINlGCIi2KXx01g4FoH/LxpzQ==",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
       }
     },
     "node_modules/@eslint-community/eslint-utils": {
@@ -120,6 +134,437 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.4.tgz",
+      "integrity": "sha512-p0suNqXufJs9t3RqLBO6vvrgr5OhgbWp76s5gTRvdmxmuv9E1rcaqGUsl3l4mKVmXPkTkTErXediAui4x+8PSA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.4.tgz",
+      "integrity": "sha512-0l7yRObwtTi82Z6ebVI2PnHT8EB2NxBgpK2MiKJZJ7cz32R4lxd001ecMhzzsZig3Yv9oclvqqdV93jo9hy+Dw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.2.tgz",
+      "integrity": "sha512-tcK/41Rq8IKlSaKRCCAuuY3lDJjQnYIW1UXU1kxcEKrfL8WR7N6+rzNoOxoQRJWTAECuKwgAHnPvqXGN8XfkHA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "macos": ">=11",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.2.tgz",
+      "integrity": "sha512-Ofw+7oaWa0HiiMiKWqqaZbaYV3/UGL2wAPeLuJTx+9cXpCRdvQhCLG0IH8YGwM0yGWGLpsF4Su9vM1o6aer+Fw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "macos": ">=10.13",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.2.tgz",
+      "integrity": "sha512-iLWCvrKgeFoglQxdEwzu1eQV04o8YeYGFXtfWU26Zr2wWT3q3MTzC+QTCO3ZQfWd3doKHT4Pm2kRmLbupT+sZw==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.28",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.2.tgz",
+      "integrity": "sha512-x7kCt3N00ofFmmkkdshwj3vGPCnmiDh7Gwnd4nUwZln2YjqPxV1NlTyZOvoDWdKQVDL911487HOueBvrpflagw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.2.tgz",
+      "integrity": "sha512-cmhQ1J4qVhfmS6szYW7RT+gLJq9dH2i4maq+qyXayUSn9/3iY2ZeWpbAgSpSVbV2E1JUL2Gg7pwnYQ1h8rQIog==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.28",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.2.tgz",
+      "integrity": "sha512-E441q4Qdb+7yuyiADVi5J+44x8ctlrqn8XgkDTwr4qPJzWkaHwD489iZ4nGDgcuya4iMN3ULV6NwbhRZJ9Z7SQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.2.tgz",
+      "integrity": "sha512-3CAkndNpYUrlDqkCM5qhksfE+qSIREVpyoeHIU6jd48SJZViAmznoQQLAv4hVXF7xyUB9zf+G++e2v1ABjCbEQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.2.tgz",
+      "integrity": "sha512-VI94Q6khIHqHWNOh6LLdm9s2Ry4zdjWJwH56WoiJU7NTeDwyApdZZ8c+SADC8OH98KWNQXnE01UdJ9CSfZvwZw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.4.tgz",
+      "integrity": "sha512-RUgBD1c0+gCYZGCCe6mMdTiOFS0Zc/XrN0fYd6hISIKcDUbAW5NtSQW9g/powkrXYm6Vzwd6y+fqmExDuCdHNQ==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.28",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.4.tgz",
+      "integrity": "sha512-2800clwVg1ZQtxwSoTlHvtm9ObgAax7V6MTAB/hDT945Tfyy3hVkmiHpeLPCKYqYR1Gcmv1uDZ3a4OFwkdBL7Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.4.tgz",
+      "integrity": "sha512-h3RAL3siQoyzSoH36tUeS0PDmb5wINKGYzcLB5C6DIiAn2F3udeFAum+gj8IbA/82+8RGCTn7XW8WTFnqag4tQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.31",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.4.tgz",
+      "integrity": "sha512-GoR++s0XW9DGVi8SUGQ/U4AeIzLdNjHka6jidVwapQ/JebGVQIpi52OdyxCNVRE++n1FCLzjDovJNozif7w/Aw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.4.tgz",
+      "integrity": "sha512-nhr1yC3BlVrKDTl6cO12gTpXMl4ITBUZieehFvMntlCXFzH2bvKG76tBL2Y/OqhupZt81pR7R+Q5YhJxW0rGgQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.4.tgz",
+      "integrity": "sha512-uCPTku0zwqDmZEOi4ILyGdmW76tH7dm8kKlOIV1XC5cLyJ71ENAAqarOHQh0RLfpIpbV5KOpXzdU6XkJtS0daw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.4.tgz",
+      "integrity": "sha512-Bmmauh4sXUsUqkleQahpdNXKvo+wa1V9KhT2pDA4VJGKwnKMJXiSTGphn0gnJrlooda0QxCtXc6RX1XAU6hMnQ==",
+      "cpu": [
+        "wasm32"
+      ],
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.1.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.4.tgz",
+      "integrity": "sha512-99SJ91XzUhYHbx7uhK3+9Lf7+LjwMGQZMDlO/E/YVJ7Nc3lyDFZPGhjwiYdctoH2BOzW9+TnfqcaMKt0jHLdqw==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.4.tgz",
+      "integrity": "sha512-3QLocdTRVIrFNye5YocZl+KKpYKP+fksi1QhmOArgx7GyhIbQp/WrJRu176jm8IxromS7RIkzMiMINVdBtC8Aw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -415,11 +860,10 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "20.14.13",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.13.tgz",
-      "integrity": "sha512-+bHoGiZb8UiQ0+WEtmph2IWQCjIqg8MDZMAV+ppRRhUZnquF5mQkP/9vpSwJClEiSM/C7fZZExPzfU0vJTyp8w==",
+      "version": "20.14.14",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.14.tgz",
+      "integrity": "sha512-d64f00982fS9YoOgJkAMolK7MN8Iq3TDdVjchbYHdEmjth/DHowx82GnoA+tVUAN+7vxfYUgAzi+JXbKNd2SDQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -428,15 +872,14 @@
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
       "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "18.3.3",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
       "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
-      "dev": true,
-      "license": "MIT",
+      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -851,6 +1294,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -877,6 +1325,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.3.tgz",
+      "integrity": "sha512-Ar7ND9pU99eJ9GpoGQKhKf58GpUOgnzuaB7ueNQ5BMi0p+LZ5oaEnfF999fAArcTIBwXTCHAmGcHOZJaWPq9Nw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz",
@@ -960,9 +1418,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001643",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001643.tgz",
-      "integrity": "sha512-ERgWGNleEilSrHM6iUz/zJNSQTP8Mr21wDWpdgvRwcTXGAq6jMtOUPP4dqFPTdKqZ2wKTdtB+uucZ3MRpAUSmg==",
+      "version": "1.0.30001651",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz",
+      "integrity": "sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==",
       "funding": [
         {
           "type": "opencollective",
@@ -976,8 +1434,7 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ],
-      "license": "CC-BY-4.0"
+      ]
     },
     "node_modules/chalk": {
       "version": "4.1.2",
@@ -1002,11 +1459,22 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
@@ -1019,9 +1487,28 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1048,7 +1535,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
@@ -1206,6 +1693,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
+      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -2022,6 +2525,25 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -2049,6 +2571,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2481,6 +3016,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "node_modules/is-async-function": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz",
@@ -2896,6 +3436,11 @@
         "@pkgjs/parseargs": "^0.11.0"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3075,6 +3620,25 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3194,7 +3758,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -3354,6 +3917,14 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/owl.carousel": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/owl.carousel/-/owl.carousel-2.3.4.tgz",
+      "integrity": "sha512-JaDss9+feAvEW8KZppPSpllfposEzQiW+Ytt/Xm5t/3CTJ7YVmkh6RkWixoA2yXk2boIwedYxOvrrppIGzru9A==",
+      "dependencies": {
+        "jquery": ">=1.8.3"
+      }
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -3534,7 +4105,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -3542,6 +4112,11 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3602,9 +4177,58 @@
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-owl-carousel": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/react-owl-carousel/-/react-owl-carousel-2.3.3.tgz",
+      "integrity": "sha512-B4TI2EDDtp7IDM8CWzl5Rh/17p1NfMW/QBIbkC18CkiMGCbO9ztY+vAPTN60tp+63V9v/oLqArLjkiQtDGqj/A==",
+      "dependencies": {
+        "owl.carousel": "~2.3.4",
+        "react": "16.14.0",
+        "react-dom": "16.14.0"
+      },
+      "peerDependencies": {
+        "jquery": ">=1.8.3",
+        "react": ">=15"
+      }
+    },
+    "node_modules/react-owl-carousel/node_modules/react": {
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-owl-carousel/node_modules/react-dom": {
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
+      "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.19.1"
+      },
+      "peerDependencies": {
+        "react": "^16.14.0"
+      }
+    },
+    "node_modules/react-owl-carousel/node_modules/scheduler": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
+      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
     "node_modules/react-router": {
       "version": "6.25.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.25.1.tgz",
@@ -3635,6 +4259,21 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-simply-carousel": {
+      "version": "9.1.4",
+      "resolved": "https://registry.npmjs.org/react-simply-carousel/-/react-simply-carousel-9.1.4.tgz",
+      "integrity": "sha512-jeOzIwy9jCQKDoxs4Ld4dMyOikyCDvowgP+t5wSX85npa5eGSmcjpJ12f4YabzDR6BEHQ18+5k3/7MwFOyeFkA==",
+      "peerDependencies": {
+        "@types/react": "^16.8 || ^17 || ^18",
+        "react": "^16.8 || ^17 || ^18",
+        "react-dom": "^16.8 || ^17 || ^18"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
@@ -3838,7 +4477,6 @@
       "version": "7.6.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
       "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "dev": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -3881,6 +4519,45 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/sharp": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.4.tgz",
+      "integrity": "sha512-7i/dt5kGl7qR4gwPRD2biwD2/SvBn3O04J77XKFgL2OnZtQw+AG9wnuS/csmu80nPRHLYE9E41fyEiG8nhH6/Q==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.3",
+        "semver": "^7.6.0"
+      },
+      "engines": {
+        "libvips": ">=8.15.2",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.33.4",
+        "@img/sharp-darwin-x64": "0.33.4",
+        "@img/sharp-libvips-darwin-arm64": "1.0.2",
+        "@img/sharp-libvips-darwin-x64": "1.0.2",
+        "@img/sharp-libvips-linux-arm": "1.0.2",
+        "@img/sharp-libvips-linux-arm64": "1.0.2",
+        "@img/sharp-libvips-linux-s390x": "1.0.2",
+        "@img/sharp-libvips-linux-x64": "1.0.2",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.2",
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.2",
+        "@img/sharp-linux-arm": "0.33.4",
+        "@img/sharp-linux-arm64": "0.33.4",
+        "@img/sharp-linux-s390x": "0.33.4",
+        "@img/sharp-linux-x64": "0.33.4",
+        "@img/sharp-linuxmusl-arm64": "0.33.4",
+        "@img/sharp-linuxmusl-x64": "0.33.4",
+        "@img/sharp-wasm32": "0.33.4",
+        "@img/sharp-win32-ia32": "0.33.4",
+        "@img/sharp-win32-x64": "0.33.4"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -3936,6 +4613,14 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -4416,7 +5101,6 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
       "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
       "dev": true,
-      "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"

package.json

@@ -10,17 +10,20 @@
   },
   "dependencies": {
     "axios": "^1.7.2",
+    "caniuse-lite": "^1.0.30001651",
     "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18",
-    "react-router-dom": "^6.25.1"
+    "react-owl-carousel": "^2.3.3",
+    "react-router-dom": "^6.25.1",
+    "sharp": "^0.33.4"
   },
   "devDependencies": {
-    "@types/node": "^20",
-    "@types/react": "^18",
+    "@types/node": "20.14.14",
+    "@types/react": "18.3.3",
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
-    "typescript": "^5"
+    "typescript": "5.5.4"
   }
 }