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

Mission statement starter

Browse Source
This commit is contained in:
CHIEFSOFT\ameye
2023-06-29 21:06:54 -04:00
parent f0f11cacd5
commit 6f34b1bf57
4 changed files with 152 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/css/main.css
+12
View File
@@ -4239,6 +4239,18 @@ p {
background-repeat: no-repeat;
background-size: cover;
}
.mission-side-box {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background-image: url(../images/mission-bg.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.appie-faq-8-area .faq-play-box {
display: none;
src/assets/images/mission-bg.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 815 KiB

src/components/Service/MissionStatement.js
+138
View File
@@ -0,0 +1,138 @@
import React, { useState } from 'react';
import CounterUpCom from '../../lib/CounterUpCom';
import PopupVideo from '../PopupVideo';
function MissionStatement() {
const [showQuestion, setQuestion] = useState(0);
const [showVideo, setVideoValue] = useState(false);
const openQuestion = (e, value) => {
e.preventDefault();
setQuestion(value);
};
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"
>
<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>
</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>
</div>
</div>
<div className="mission-side-box">
</div>
</div>
</>
);
}
export default MissionStatement;
src/components/Service/index.js
+2
View File
@@ -9,6 +9,7 @@ import DetailsService from './DetailsService';
import HeaderService from './HeaderService';
import HeroService from './HeroService';
import HeroNews from '../News/HeroNews';
import MissionStatement from "./MissionStatement";
function Service() {
useEffect(() => {
@@ -27,6 +28,7 @@ function Service() {
{ link: '/service', title: 'Service' },
]}
/>
{/*<MissionStatement />*/}
<DetailsService />
{/*<ProjectHomeOne />*/}
<FooterHomeOne />