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

.env

@@ -13,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.production

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

app/assets/css/main.css

@@ -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 
 ===========================*/
@@ -8664,4 +8689,4 @@ LND PAGE STYLE STARTS HERE
 .react-multi-carousel-item--active, .slick-center{
   transform: scale(1);
   transition: all 2s;
-}
+}

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/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,9 +115,30 @@ 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">

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'
 
@@ -33,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>
@@ -76,8 +76,8 @@ function HeroHomeOne() {
                 >
                   <Image
                     src={AI}
-                    width={'100%'}
-                    height={'100%'}
+                    width={'150'}
+                    height={'150'}
                     alt="Image"
                   />
                 </div>

app/components/HomeOne.js

@@ -16,7 +16,6 @@ import SelectFeatures from "@/app/components/SelectFeatutes";
 
 
 
-
 function HomeOne() {
     return (
         <>

app/components/SelectFeatutes.js

@@ -231,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/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/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,8 +32,11 @@ export default function RootLayout({
     />
     <meta property="og:image" content="%PUBLIC_URL%/favicon-32x32.png" />
 
-      <body className={inter.className}>{children}</body>
-      <Script id='chat-support'>
+      <body className={inter.className}>
+        {children}
+        <AcceptCookies />
+      </body>
+      {/* <Script id='chat-support'>
         {`
             var LHC_API = LHC_API || {};
             LHC_API.args = {
@@ -58,7 +62,7 @@ export default function RootLayout({
               s.parentNode.insertBefore(po, s);
             })();
         `}
-      </Script>
+      </Script> */}
     </html>
   );
 }

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

@@ -0,0 +1,26 @@
+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';
+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 page() {
+    return (
+        <>
+           {/* <HomeNav />
+           <div className='' style={{paddingTop:'100px'}}></div> */}
+           <Hero />
+           <FooterHomeOne className={''} />
+           <BackToTop className='' />
+        </>
+    );
+}