bug fixed

This reverts commit c27e8a36b2.

app/assets/css/main.css

@@ -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;
 }
@@ -8641,36 +8641,27 @@ LND PAGE STYLE STARTS HERE
 
 /* -----------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;
 }
-
-.carousel .slider {
-  height: auto !important;
-  width: 300px !important;
-  transform: scale(.9);
-}
-
-.carousel div {
-  gap: 5px !important;
-}

app/components/AcceptCookies.js

@@ -0,0 +1,36 @@
+"use client"
+import React, { useEffect, useState } from 'react'
+import Cookies from 'js-cookie'
+
+export default function AcceptCookies() {
+    const [cookies, setCookies] = useState(true)
+    
+    const acceptCookies = () => {
+        Cookies.set('useCookies', 'true')
+        setCookies(true)
+    }
+
+    useEffect(()=>{
+        const useCookies = Cookies.get('useCookies')
+        if(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

@@ -30,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}>

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/HeroHomeOne.js

@@ -3,7 +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-assist.png'
+import AI from '../assets/images/home/ai-assisted.png'
 
 import CustomSlider from './customSlider/CustomSlider'
 
@@ -76,8 +76,8 @@ function HeroHomeOne() {
                 >
                   <Image
                     src={AI}
-                    width={'100%'}
-                    height={'100%'}
+                    width={'150'}
+                    height={'150'}
                     alt="Image"
                   />
                 </div>

app/components/HomeOne.js

@@ -12,8 +12,7 @@ import AfterHero from './AfterHero';
 // import NextAfterHero from './NextAfterHero';
 import BackToTop from './BackToTop';
 import SelectFeatures from "@/app/components/SelectFeatutes";
-//import FeaturedScreenTwo from './FeaturedScreenTwo'
-
+// import FeaturedScreenTwo from './FeaturedScreenTwo'
 
 
 
@@ -28,7 +27,7 @@ function HomeOne() {
            {/*<ServicesHomeOne />*/}
            <TrafficHomeOne />
            {/*<TrafficHomeTwo />*/}
-           {/*<FeaturedScreenTwo /> olu temp */}
+           {/*<FeaturedScreenTwo />*/}
            <BlogHomeOne />
            <FooterHomeOne />
            <BackToTop className='' />

app/components/SelectFeatutes.js

@@ -4,13 +4,11 @@ import Image from 'next/image';
 
 //import { Link } from 'react-router-dom';
 import thumb from '../assets/images/features-thumb-11.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 rewardIcon from '../assets/images/home/001-reward.png'
-import walletIcon from '../assets/images/home/004-wallet.png'
-import taskIcon from '../assets/images/home/002-task.png'
-import familyIcon from '../assets/images/home/003-family.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');
@@ -116,7 +114,7 @@ function SelectFeatures({ className }) {
                                                 Reward <br /> Achievement
                                             </h3>
                                             <p>
-                                                Reward with points, badges, recognition, or money rewards with easy steps
+                                                Reward with points, badges, recognition, or rewards with easy steps
                                             </p>
                                             <a className="main-btn" href="/about-us">
                                                 Learn More
@@ -233,7 +231,7 @@ function SelectFeatures({ className }) {
                                                 Fund  <br /> wallets
                                             </h3>
                                             <p>
-                                                Take control and feel secure by creating a virtual or physical card, allocating funds, and managing wallets for your kids. .
+                                                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

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/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

@@ -2,6 +2,7 @@ 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"] });
 
@@ -31,7 +32,10 @@ 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 || {};

docker/Dockerfile

@@ -135,9 +135,9 @@ COPY . /app
 
 # 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"]
+CMD ["sh", "-c", "next build && next start"]
 

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "axios": "^1.7.2",
     "caniuse-lite": "^1.0.30001651",
+    "js-cookie": "^3.0.5",
     "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18",