diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 0a2f972..8b3b708 100644
--- a/app/assets/css/main.css
+++ b/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;
diff --git a/app/components/PopupVideo.js b/app/components/PopupVideo.js
new file mode 100644
index 0000000..b4ba8ac
--- /dev/null
+++ b/app/components/PopupVideo.js
@@ -0,0 +1,42 @@
+import React from 'react';
+
+function PopupVideo({ videoSrc, handler }) {
+ /*
+ //www.youtube.com/embed/EE7NqzhMDms?autoplay=1
+ */
+ return (
+
+ );
+}
+
+export default PopupVideo;
diff --git a/app/service/MissionStatement.js b/app/service/MissionStatement.js
new file mode 100644
index 0000000..7f07698
--- /dev/null
+++ b/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 && (
+ handleShowVideo(e)}
+ />
+ )}
+
+
+
+
+
+
Our Mission.
+
+ Our mission at WrenchBoard is to empower individuals, families and communities through :
+
+
+
+
+ {
+ ourMissions.map((item) => (
+
openQuestion(e, item.id)}
+ >
+
+
+
+ ))
+ }
+
+
+
+
+
+
+
+
+ >
+ );
+}
+
+export default MissionStatement;
+
diff --git a/app/service/page.tsx b/app/service/page.tsx
index 9a8b40d..fa0308c 100644
--- a/app/service/page.tsx
+++ b/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() {
]}
/>
- {/* */}
+
- {/* */}
+
>
)
diff --git a/public/assets/images/faq-play-bg.png b/public/assets/images/faq-play-bg.png
new file mode 100644
index 0000000..74547d0
Binary files /dev/null and b/public/assets/images/faq-play-bg.png differ
diff --git a/public/assets/images/mission-bg.png b/public/assets/images/mission-bg.png
new file mode 100644
index 0000000..d2b441a
Binary files /dev/null and b/public/assets/images/mission-bg.png differ