WrenchBoard/WrenchBoardMainSite
2
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

mission statement parts

Browse Source
This commit is contained in:
CHIEFSOFT\ameye
2023-06-29 22:18:43 -04:00
parent 6f34b1bf57
commit a10a98a393
3 changed files with 108 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Service/MissionStatement.js
+54 -78
View File
@@ -4,12 +4,36 @@ import CounterUpCom from '../../lib/CounterUpCom';
import PopupVideo from '../PopupVideo';
function MissionStatement() {
const [showQuestion, setQuestion] = useState(0);
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: "unleash their creativity, complete their projects, and make a positive impact on their surroundings. At Wrenchboard.com",
},
{
id: 2,
title: "Expand Earning Opportunities",
content: "unleash their creativity, complete their projects, and make a positive impact on their surroundings. At Wrenchboard.com",
},
{
id: 3,
title: "Exhibit your Capabilities ",
content: "unleash their creativity, complete their projects, and make a positive impact on their surroundings. At Wrenchboard.com",
},
{
id: 4,
title: "Get you work done",
content: "unleash their creativity, complete their projects, and make a positive impact on their surroundings. At Wrenchboard.com",
}
];
const handleShowVideo = (e) => {
e.preventDefault();
setVideoValue(!showVideo);
@@ -41,84 +65,36 @@ function MissionStatement() {
data-wow-duration="1500ms"
data-grp-name="faq-accrodion"
>
<div
className={`accrodion ${
showQuestion === 0 ? 'active' : ''
}`}
onClick={(e) => openQuestion(e, 0)}
>
<div className="accrodion-inner">
<div className="accrodion-title">
<h4>Does Appie have dynamic content?</h4>
</div>
<div
className="accrodion-content"
style={{
display: showQuestion === 0 ? 'block' : 'none',
}}
>
<div className="inner">
<p>
Naff Oxford vagabond in my flat chinwag
blatant grub tomfoolery that I bits and bobs
up the cras boot.
</p>
{
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
className={`accrodion ${
showQuestion === 1 ? 'active' : ''
}`}
onClick={(e) => openQuestion(e, 1)}
>
<div className="accrodion-inner">
<div className="accrodion-title">
<h4>Where do I usually find FAQs in a page?</h4>
</div>
<div
className="accrodion-content"
style={{
display: showQuestion === 1 ? 'block' : 'none',
}}
>
<div className="inner">
<p>
Naff Oxford vagabond in my flat chinwag
blatant grub tomfoolery that I bits and bobs
up the cras boot.
</p>
</div>
</div>
</div>
</div>
<div
className={`accrodion ${
showQuestion === 2 ? 'active' : ''
}`}
onClick={(e) => openQuestion(e, 2)}
>
<div className="accrodion-inner">
<div className="accrodion-title">
<h4>Website & Mobile App Design</h4>
</div>
<div
className="accrodion-content"
style={{
display: showQuestion === 2 ? 'block' : 'none',
}}
>
<div className="inner">
<p>
Naff Oxford vagabond in my flat chinwag
blatant grub tomfoolery that I bits and bobs
up the cras boot.
</p>
</div>
</div>
</div>
</div>
))
}
</div>
</div>
</div>