link fixed

app/Mobile/Drawer.js

@@ -61,7 +61,7 @@ function Drawer({ drawer, action }) {
                                 <div className="offcanvas-social">
                                     <ul className="text-center">
                                         <li>
-                                            <a href={process.env.REACT_APP_FACEBOOK_LINK} >
+                                            <a href={process.env.NEXT_PUBLIC_FACEBOOK_LINK} >
                                                 <i className="fab fa-facebook-f"></i>
                                             </a>
                                         </li>
@@ -78,12 +78,12 @@ function Drawer({ drawer, action }) {
                                         <li>
                                             <a href="#">
                                                 <i className="fal fa-envelope"></i>{' '}
-                                               {process.env.REACT_APP_SUPPORT_EMAIL}
+                                               {process.env.NEXT_PUBLIC_SUPPORT_EMAIL}
                                             </a>
                                         </li>
                                         <li>
                                             <a href="#">
-                                                <i className="fal fa-phone"></i> {process.env.REACT_APP_SUPPORT_PHONE}
+                                                <i className="fal fa-phone"></i> {process.env.NEXT_PUBLIC_SUPPORT_PHONE}
                                             </a>
                                         </li>
                                         <li>

app/blog/page.tsx

@@ -1,5 +1,9 @@
 import React from 'react'
 import FooterHomeOne from '../components/FooterHomeOne';
+import HeroNews from '../components/News/HeroNews';
+import BackToTop from '../components/BackToTop';
+import ServiceNav from '../components/navigation/ServiceNav';
+import Blogs from '../components/News/Blogs';
 
 // must be a better way to centralize the style = TEMPORARY USE 
 import '../assets/css/bootstrap.min.css';
@@ -14,8 +18,25 @@ import '../assets/css/style.css';
 function page() {
   return (
     <> 
-    <div>Bog Here</div>
-    <FooterHomeOne className={undefined} />
+         <ServiceNav />
+        <HeroNews
+          title="Blogs"
+          breadcrumb={[
+            { link: "/", title: "Home" },
+            { link: "/blog", title: "Blogs" },
+          ]}
+        />
+        <section className="blogpage-section">
+          <div className="container">
+            <div className="row">
+              <div className="col-12">
+                <Blogs pathname='/blog' />
+              </div>
+            </div>
+          </div>
+        </section>
+        <FooterHomeOne className='' />
+        <BackToTop className='' />
     </>
    
   )

app/components/AboutApp.js

@@ -0,0 +1,55 @@
+import React from 'react'
+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'
+import Image from 'next/image';
+
+const AboutApp = ({ video, dark }) => {
+  return (
+    <>
+      <section className="row_am about_app_section _">
+        <div className="container">
+          <div className="row modern_ui_section">
+            <div className="col-lg-6">
+              <div className="about_img" data-aos="fade-in" data-aos-duration="1500">
+                <div className="frame_img">
+                  <Image width='100%' height='auto' className="w-100 moving_position_animatin" src={frame} alt="image" />
+                </div>
+                <div className="screen_img">
+                  <Image width='100%' height='auto' className="w-100 moving_animation" src={screen} alt="image" />
+                </div>
+              </div>
+            </div>
+            <div className="col-lg-6">
+              <div className="about_text">
+                <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
+                  <h2>Motivate & Organize <br /> <span>Rewards</span></h2>
+                  <p>
+                    With a planned reward, the parent can introduce the family to earning and start financial education early.
+                  </p>
+                </div>
+
+
+                <ul className="design_block">
+                  <li data-aos="fade-up" data-aos-duration="1500">
+                    <h4>Goals Completed</h4>
+                    <p>Motivate with rewards for goals completed, passing the exam, finishing chores, and learning new skills. </p>
+                  </li>
+                  <li data-aos="fade-up" data-aos-duration="1500">
+                    <h4>Connect Family</h4>
+                    <p>It takes a village to raise a kid and share good news and encouragement from the more prominent family. Connect family to the achievements to boost encouragement. </p>
+                  </li>
+                  <li data-aos="fade-up" data-aos-duration="1500">
+                    <h4>Find any Task </h4>
+                    <p>Make more, connect to the marketplace, and earn from appropriate tasks.</p>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  )
+}
+
+export default AboutApp

app/components/HomeOne.js

@@ -24,10 +24,10 @@ function HomeOne() {
            <HeroHomeOne />
            <AfterHero />
            <SelectFeatures className='pb-55-err' />
-           <NextAfterHero />
+           {/*<NextAfterHero />*/}
            {/*<ServicesHomeOne />*/}
            <TrafficHomeOne />
-           <TrafficHomeTwo />
+           {/*<TrafficHomeTwo />*/}
            <BlogHomeOne />
            <FooterHomeOne />
            <BackToTop className='' />

app/components/SelectFeatutes.js

@@ -14,7 +14,7 @@ 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">
+        <section className={`appie-features-area pt-100 ${className}`} id="features"    style={{  marginBottom: '20px' }} >
             <div className="container">
                 <div className="row align-items-center">
                     <div className="col-lg-3">
@@ -35,7 +35,7 @@ function SelectFeatures({ className }) {
                                     aria-controls="v-pills-home"
                                     aria-selected="true"
                                 >
-                                    <i className="fas fa-cog" /> Settings
+                                    <i className="fas fa-cog" /> Reward achievement
                                 </a>
                                 <a
                                     onClick={(e) => handleClick(e, 'report')}
@@ -47,7 +47,7 @@ function SelectFeatures({ className }) {
                                     aria-controls="v-pills-profile"
                                     aria-selected="false"
                                 >
-                                    <i className="fas fa-exclamation-triangle" /> Report
+                                    <i className="fas fa-exclamation-triangle" /> Assign tasks or chores
                                 </a>
                                 <a
                                     onClick={(e) => handleClick(e, 'notice')}
@@ -59,7 +59,7 @@ function SelectFeatures({ className }) {
                                     aria-controls="v-pills-messages"
                                     aria-selected="false"
                                 >
-                                    <i className="fas fa-bell" /> Saeety Notices
+                                    <i className="fas fa-bell" /> Family engagement
                                 </a>
                                 <a
                                     onClick={(e) => handleClick(e, 'app')}
@@ -71,7 +71,7 @@ function SelectFeatures({ className }) {
                                     aria-controls="v-pills-settings"
                                     aria-selected="false"
                                 >
-                                    <i className="fas fa-lock" /> App Lock
+                                    <i className="fas fa-lock" /> Fund wallets
                                 </a>
                             </div>
                         </div>
@@ -103,7 +103,7 @@ function SelectFeatures({ className }) {
                                             data-wow-duration="2000ms"
                                             data-wow-delay="600ms"
                                         >
-                                            <span>Custom Reacyions</span>
+                                            <span>Custom Reactions</span>
                                             <h3 className="title">
                                                 Let the <br /> Conversation flow
                                             </h3>
@@ -236,15 +236,15 @@ function SelectFeatures({ className }) {
                     </div>
                 </div>
             </div>
-            <div className="features-shape-1">
-                <Image src={shapeSix} alt="" />
-            </div>
-            <div className="features-shape-2">
-                <Image src={shapeSeven} alt="" />
-            </div>
-            <div className="features-shape-3">
-                <Image src={shapeEight} alt="" />
-            </div>
+            {/*<div className="features-shape-1">*/}
+            {/*    <Image src={shapeSix} alt="" />*/}
+            {/*</div>*/}
+            {/*<div className="features-shape-2">*/}
+            {/*    <Image src={shapeSeven} alt="" />*/}
+            {/*</div>*/}
+            {/*<div className="features-shape-3">*/}
+            {/*    <Image src={shapeEight} alt="" />*/}
+            {/*</div>*/}
         </section>
     );
 }

app/components/navigation/Services.js

@@ -26,10 +26,10 @@ function Services({ action }) {
                             </div>
                             <div className="col-lg-4  col-md-7 col-sm-6 col-6 order-2 order-sm-3">
                                 <div className="appie-btn-box text-right">
-                                    <a className="login-btn" href={process.env.REACT_APP_DASH_URL_LOGIN}>
+                                    <a className="login-btn" href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>
                                         <i className="fal fa-user"></i> Login
                                     </a>
-                                    <a className="main-btn ml-30" href={process.env.REACT_APP_DASH_URL_SIGNUP}>
+                                    <a className="main-btn ml-30" href={process.env.NEXT_PUBLIC_DASH_URL_SIGNUP}>
                                         Get Started
                                     </a>
                                     <div

app/contact/Forms.js

@@ -0,0 +1,202 @@
+"use client"
+import React, {useState} from 'react';
+import ContactData from '../Services/ContactData';
+
+
+function Forms() {
+
+    const [formDetails, setFormDetails] = useState({
+        first_name: '',
+        last_name: '',
+        email: '',
+        subject: '',
+        phone_number: '',
+        action: 1001,
+        message: '',
+        channel: 'WEB',
+        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}))
+    }
+
+    const [requestStatus, setRequestStatus] = useState({loading:false, status:false, msg:''})
+
+    function handleSubmit(e) {
+        e.preventDefault()
+        setRequestStatus({loading:true, status:false, msg:''})
+        if(!validForm){
+            setRequestStatus({loading:false, status:false, msg:'please, fill all fields'})
+            setTimeout(()=>{
+                setRequestStatus({loading:false, status:false, msg:''})
+            },3000)
+            return
+        }
+
+        delete formDetails.terms_conditions
+
+       ContactData(formDetails).then(res =>{
+        if(res?.data?.result != '100'){
+            setRequestStatus({loading:false, status:false, msg:'failed to send message'})
+            setTimeout(()=>{
+                setRequestStatus({loading:false, status:false, msg:''})
+            },3000)
+            return
+        }
+        setRequestStatus({loading:false, status:true, msg:'message Sent'})
+        setTimeout(()=>{
+            setRequestStatus({loading:false, status:false, msg:''})
+            setFormDetails({
+                first_name: '',
+                last_name: '',
+                email: '',
+                subject: '',
+                phone_number: '',
+                action: 1001,
+                message: '',
+                channel: 'WEB',
+                terms_conditions: false
+            })
+        },3000)
+       }).catch(err => {
+        setRequestStatus({loading:false, status:false, msg:'failed something went wrong'})
+        setTimeout(()=>{
+            setRequestStatus({loading:false, status:false, msg:''})
+        },3000)
+       });
+    }
+
+
+    return (
+        <>
+            <section className="contact-section">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-md-4">
+                            <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">
+                                    <h5>Headquaters</h5>
+                                    <p>
+                                        <i className="fal fa-home"></i>
+                                        {process.env.NEXT_PUBLIC_SUPPORT_US_ADDRESS}
+                                    </p>
+                                </div>
+                                <div className="single-info">
+                                    <h5>Phone</h5>
+                                    <p>
+                                        <i className="fal fa-phone"></i>
+                                        {process.env.NEXT_PUBLIC_SUPPORT_PHONE}
+                                        <br />
+                                    </p>
+                                </div>
+                                <div className="single-info">
+                                    <h5>Support</h5>
+                                    <p>
+                                        <i className="fal fa-envelope"></i>
+                                        {process.env.NEXT_PUBLIC_SUPPORT_EMAIL}
+                                       
+                                    </p>
+                                </div>
+                                <div className="ab-social">
+                                    <h5>Follow Us</h5>
+                                    <a className="fac" href={process.env.NEXT_PUBLIC_FACEBOOK_LINK}>
+                                        <i className="fab fa-facebook-f"></i>
+                                    </a>
+                                    <a className="twi" href={process.env.NEXT_PUBLIC_TWITTER_LINK}>
+                                        {/* <i className="fab fa-twitter"></i> */}
+                                        <i className="fab fa-x-twitter" />
+                                    </a>
+                                    <a className="you" href="#">
+                                        <i className="fab fa-youtube"></i>
+                                    </a>
+                                    <a className="lin" href={process.env.NEXT_PUBLIC_LINKEDIN_LINK}>
+                                        <i className="fab fa-linkedin-in"></i>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="col-md-8">
+                            <div className="contact-form">
+                                <h4>Let’s Connect</h4>
+                                <form onSubmit={handleSubmit} className="row">
+                                    <div className="col-md-6">
+                                        <input type="text" name="first_name" placeholder="First Name"  maxLength={15} onChange={handleChange} value={formDetails.first_name} />
+                                    </div>
+                                    <div className="col-md-6">
+                                        <input type="text" name="last_name" placeholder="Last Name"  maxLength={15} onChange={handleChange} value={formDetails.last_name} />
+                                    </div>
+                                    <div className="col-md-6">
+                                        <input
+                                            type="email"
+                                            name="email"
+                                            placeholder="Email Address" 
+                                            maxLength={35} 
+                                            onChange={handleChange}
+                                            value={formDetails.email}
+                                        />
+                                    </div>
+                                    <div className="col-md-6">
+                                        <input
+                                            type="number"
+                                            name="phone_number"
+                                            placeholder="Phone Number" 
+                                            maxLength={15} 
+                                            onChange={handleChange}
+                                            value={formDetails.phone_number}
+                                        />
+                                    </div>
+                                    <div className="col-md-12">
+                                        <input type="text" name="subject" placeholder="Subject"  maxLength={35} value={formDetails.subject} onChange={handleChange}  />
+                                    </div>
+                                    <div className="col-md-12">
+                                        <textarea
+                                            name="message"
+                                            placeholder="How can we help?"
+                                            onChange={handleChange}
+                                            value={formDetails.message}
+                                        ></textarea>
+                                    </div>
+                                    <div className="col-md-6">
+                                        <div className="condition-check">
+                                            <input id="terms-conditions" name="terms_conditions" type="checkbox" value={formDetails.terms_conditions} onChange={handleChange} />
+                                            <label htmlFor="terms-conditions">
+                                                I agree to the <a href="#">Terms & Conditions</a>
+                                            </label>
+                                        </div>
+                                    </div>
+                                    <div className="col-md-6 text-right">
+                                        <input 
+                                            type="submit"  
+                                            value={ requestStatus.loading ? 'Sending...' : 'Send Message'} 
+                                            disabled={requestStatus.loading} 
+                                            className={`${!validForm ? 'opacity-25' : 'opacity-100'}`}
+                                        />
+                                    </div>
+                                    {/* <div className="p-2 col-12">
+                                        {requestStatus.msg &&
+                                        }
+                                    </div> */}
+                                    <p className={`p-1 w-100 text-center ${requestStatus.status ? 'text-success' : 'text-danger'}`}>{requestStatus.msg}</p>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <div className="bisylms-map">
+                <iframe
+                    title="map"
+                    src="https://maps.google.com/maps?width=720&amp;height=600&amp;hl=en&amp;coord=33.8573837,-84.4766235&amp;q=Cumberland+Pkwy+SE,+Atlanta,+GA+30339&amp;ie=UTF8&amp;t=p&amp;z=16&amp;iwloc=B&amp;output=embed"
+                ></iframe>
+            </div>
+        </>
+    );
+}
+
+export default Forms;

app/contact/page.tsx

@@ -1,5 +1,9 @@
 import React from 'react'
 import FooterHomeOne from '../components/FooterHomeOne';
+import BackToTop from '../components/BackToTop';
+import HeroNews from '../components/News/HeroNews';
+import ServiceNav from '../components/navigation/ServiceNav';
+import Forms from './Forms'
 
 // 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>Contact us Here</div>
-    <FooterHomeOne className={undefined} />
+      <ServiceNav />
+      <HeroNews
+          title="Contact us"
+          breadcrumb={[
+              { link: '/', title: 'home' },
+              { link: '/contact', title: 'Contact' },
+          ]}
+      />
+      <Forms />
+      <FooterHomeOne className='' />
+      <BackToTop className='' />
     </>
    
   )

app/use-cases/UseCase.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import blogImg1 from '../assets/images/blog/1.jpg';
+import UseCaseData from '../Services/UseCaseData';
+import Image from 'next/image';
+import Link from 'next/link';
+
+
+function UseCase() {
+
+    var UseCaseDataResult = UseCaseData();
+
+    return (
+        <>
+            <div className="row">
+                {
+                    UseCaseDataResult.map((i, index )=> {
+                        var blgImg = i.meta_value != null ? "/images/" + i.meta_value : blogImg1;
+
+                        return (
+                            <div key={index} className="col-12 col-md-6 col-lg-4">
+                                <div className="post-item-1">
+
+                                    {<img src={blgImg} alt={i.title} />}
+                                    <div className="b-post-details">
+                                        <h3>
+                                            <Link href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>
+                                                {i.title}
+                                            </Link>
+                                        </h3>
+                                        <Link className="read-more" href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>
+                                            Learn more<i className="fal fa-arrow-right"></i>
+                                        </Link>
+                                    </div>
+
+                                </div>
+                            </div>
+
+                        )
+
+                    })
+                }
+            </div>
+        </>
+    );
+}
+
+export default UseCase;

app/use-cases/page.tsx

@@ -1,5 +1,10 @@
 import React from 'react'
 import FooterHomeOne from '../components/FooterHomeOne';
+import BackToTop from '../components/BackToTop';
+import HeroNews from '../components/News/HeroNews';
+import ServiceNav from '../components/navigation/ServiceNav';
+import AboutApp from '../components/AboutApp'
+import UseCase from './UseCase'
 
 // must be a better way to centralize the style = TEMPORARY USE 
 import '../assets/css/bootstrap.min.css';
@@ -14,8 +19,27 @@ import '../assets/css/style.css';
 function page() {
   return (
     <> 
-    <div>use Case Here</div>
-    <FooterHomeOne className={undefined} />
+      <ServiceNav />
+      <HeroNews
+          title="Use Cases"
+          breadcrumb={[
+              { link: '/', title: 'Home' },
+              { link: '/use-cases', title: 'Use Cases' },
+          ]}
+      />
+      <AboutApp video='' dark='' />
+      <section className="blogpage-section">
+          <div className="container">
+              <div className="row">
+                  {/* <div className="col-lg-12 col-md-7">
+                      <UseCase />
+                  </div> */}
+                  <UseCase />
+              </div>
+          </div>
+      </section>
+      <FooterHomeOne className='' />
+      <BackToTop className='' />
     </>
    
   )