added refer link page

.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'

app/components/AcceptCookies.js

@@ -1,17 +1,17 @@
 "use client"
 import React, { useEffect, useState } from 'react'
-import Cookies from 'js-cookie'
+//import Cookies from 'js-cookie'
 
 export default function AcceptCookies() {
     const [cookies, setCookies] = useState(true)
     
     const acceptCookies = () => {
-        Cookies.set('useCookies', 'true')
+    //    Cookies.set('useCookies', 'true')
         setCookies(true)
     }
 
     useEffect(()=>{
-        const useCookies = Cookies.get('useCookies')
+        const useCookies = false; // Cookies.get('useCookies')
         if(useCookies == 'true'){
             setCookies(true)
         }else{

app/components/FooterHomeOne.js

@@ -35,7 +35,7 @@ function FooterHomeOne({ className }) {
                                     <ul>
                                         <li>
                                             <a href={site.facebook_link}>
-                                                <i className="fab fa-facebook-f" />
+                                                <i className="fab fa-facebook-f"/>
                                             </a>
                                         </li>
                                         <li>
@@ -44,6 +44,11 @@ function FooterHomeOne({ className }) {
                                                 <i className="fab fa-x-twitter"></i>
                                             </a>
                                         </li>
+                                        <li>
+                                            <a className="you" href={process.env.NEXT_PUBLIC_YOUTUBE_LINK}>
+                                                <i className="fab fa-youtube"></i>
+                                            </a>
+                                        </li>
                                     </ul>
                                 </div>
                             </div>
@@ -79,7 +84,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>

app/components/HeroHomeOne.js

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

app/myrefer/Hero.tsx

@@ -0,0 +1,95 @@
+"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 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 */}
+                                    Set Chores, Set Goals
+                                </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">
+                                            Reward 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 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}/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-100'
+                                            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='' />
+        </>
+    );
+}