services page

app/assets/css/main.css

@@ -4420,7 +4420,7 @@ p {
   right: 0;
   height: 100%;
   width: 50%;
-  background-image: url(../images/faq-play-bg.png);
+  background-image: url(/assets/images/faq-play-bg.png);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
@@ -4432,7 +4432,7 @@ p {
   right: 0;
   height: 750px;
   width: 50%;
-  background-image: url(../images/mission-bg.png);
+  background-image: url(/assets/images/mission-bg.png);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;

app/components/PopupVideo.js

@@ -0,0 +1,42 @@
+import React from 'react';
+
+function PopupVideo({ videoSrc, handler }) {
+    /* 
+     //www.youtube.com/embed/EE7NqzhMDms?autoplay=1
+    */
+    return (
+        <div>
+            <div onClick={handler} className="mfp-bg mfp-ready"></div>
+            <div
+                className="mfp-wrap mfp-close-btn-in mfp-auto-cursor mfp-ready"
+                tabIndex="-1"
+                style={{ overflow: ' hidden auto' }}
+            >
+                <div className="mfp-container mfp-s-ready mfp-iframe-holder">
+                    <div className="mfp-content">
+                        <div className="mfp-iframe-scaler">
+                            <button
+                                onClick={handler}
+                                title="Close (Esc)"
+                                type="button"
+                                className="mfp-close"
+                            >
+                                ×
+                            </button>
+                            <iframe
+                                title="video"
+                                className="mfp-iframe"
+                                src={videoSrc}
+                                frameBorder="0"
+                                allowFullScreen=""
+                            />
+                        </div>
+                    </div>
+                    <div className="mfp-preloader">Loading...</div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default PopupVideo;

app/service/MissionStatement.js

@@ -0,0 +1,111 @@
+
+"use client"
+import React, { useState } from 'react';
+import PopupVideo from '../components/PopupVideo'
+
+
+function MissionStatement() {
+    const [showQuestion, setQuestion] = useState(1);
+    const [showVideo, setVideoValue] = useState(false);
+    const openQuestion = (e, value) => {
+        e.preventDefault();
+        setQuestion(value);
+    };
+
+    const ourMissions = [
+        {
+            id: 1,
+            title: "Rewards Family and Personal Goals",
+            content: "We will be the best platform for you to set a rewardable goal for you, your family, and others",
+        },
+        {
+            id: 2,
+            title: "Expand Earning Opportunities",
+            content: "We will always present opportunities equally",
+        },
+        {
+            id: 3,
+            title: "Exhibit  your Capabilities",
+            content: "We will let your ability shine to opportunities",
+        },
+        {
+            id: 4,
+            title: "Get your work done",
+            content: "For other tasks you need to get done, we will be there for smooth engagement",
+        }
+    ];
+
+    const handleShowVideo = (e) => {
+        e.preventDefault();
+        setVideoValue(!showVideo);
+    };
+    return (
+        <>
+            {showVideo && (
+                <PopupVideo
+                    videoSrc="//www.youtube.com/embed/EE7NqzhMDms?autoplay=1"
+                    handler={(e) => handleShowVideo(e)}
+                />
+            )}
+            <div className="appie-faq-8-area pt-100 pb-100" id="counter">
+                <div className="container">
+                    <div className="row">
+                        <div className="col-lg-5">
+                            <div className="appie-section-title">
+                                <h3 className="appie-title">Our Mission.</h3>
+                                <p>
+                                    Our mission at WrenchBoard is to empower individuals, families and communities through :
+                                </p>
+                            </div>
+                            <div
+                                className="faq-accordion wow fadeInRight mt-30"
+                                data-wow-duration="1500ms"
+                            >
+                                <div
+                                    className="accrodion-grp wow fadeIn faq-accrodion"
+                                    data-wow-duration="1500ms"
+                                    data-grp-name="faq-accrodion"
+                                >
+                                    {
+                                         ourMissions.map((item) => (
+                                                <div
+                                                    className={`accrodion ${
+                                                        showQuestion === item.id ? 'active' : ''
+                                                    }`}
+                                                    onClick={(e) => openQuestion(e, item.id)}
+                                                >
+                                                    <div className="accrodion-inner">
+                                                        <div className="accrodion-title">
+                                                            <h4>{item.title}</h4>
+                                                        </div>
+                                                        <div
+                                                            className="accrodion-content"
+                                                            style={{
+                                                                display: showQuestion === item.id ? 'block' : 'none',
+                                                            }}
+                                                        >
+                                                            <div className="inner">
+                                                                <p>
+                                                                    {item.content}
+                                                                </p>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+
+                                            ))
+                                    }
+
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className="mission-side-box"></div>
+            </div>
+        </>
+    );
+}
+
+export default MissionStatement;
+

app/service/page.tsx

@@ -3,6 +3,8 @@ import FooterHomeOne from '../components/FooterHomeOne';
 import ServiceNav from '../components/navigation/ServiceNav'
 import HeroNews from '../components/News/HeroNews'
 import ServiceTopart from './ServiceTopart'
+import MissionStatement from './MissionStatement'
+import BackToTop from '../components/BackToTop'
 
 // must be a better way to centralize the style = TEMPORARY USE 
 import '../assets/css/bootstrap.min.css';
@@ -26,9 +28,9 @@ function page() {
         ]}
     />
     <ServiceTopart />
-    {/* <MissionStatement /> */}
+    <MissionStatement />
     <FooterHomeOne className={undefined} />
-    {/* <BackToTop /> */}
+    <BackToTop className='' />
     </>
    
   )