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

first commit

Browse Source
This commit is contained in:
Olu Amey
2021-12-18 20:23:31 -05:00
commit bce242fd22
308 changed files with 42398 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/HomeThree/FunFactHomeThree.js
+101
View File
@@ -0,0 +1,101 @@
import React, { useState } from 'react';
import FunFactThumb from '../../assets/images/fun-fact-thumb.png';
import CounterUpCom from '../../lib/CounterUpCom';
import PopupVideo from '../PopupVideo';
function FunFactHomeThree() {
const [showVideo, setVideoValue] = useState(false);
const handleShowVideo = (e) => {
e.preventDefault();
setVideoValue(!showVideo);
};
return (
<>
{showVideo && (
<PopupVideo
videoSrc="//www.youtube.com/embed/EE7NqzhMDms?autoplay=1"
handler={(e) => handleShowVideo(e)}
/>
)}
<section className="appie-fun-fact-area" id="fun-fact-area">
<div className="container">
<div className="row">
<div className="col-lg-12">
<div
className="appie-fun-fact-box wow animated fadeInUp"
data-wow-duration="2000ms"
data-wow-delay="400ms"
>
<div className="row">
<div className="col-lg-6">
<div className="appie-fun-fact-content">
<h3 className="title">
Get started with Appie Template.
</h3>
<p>
The app provides design and digital marketing,
applied arts can include industrial design
</p>
<div className="row">
<div className="col-sm-4">
<div className="appie-fun-fact-item">
<h4 className="title">
<CounterUpCom
endValue="700"
sectionSelect="fun-fact-area"
/>
k
</h4>
<span>App Downloads</span>
</div>
</div>
<div className="col-sm-4">
<div className="appie-fun-fact-item">
<h4 className="title">
<CounterUpCom
endValue="476"
sectionSelect="fun-fact-area"
/>
+
</h4>
<span>Average Review</span>
</div>
</div>
<div className="col-sm-4">
<div className="appie-fun-fact-item">
<h4 className="title">
<CounterUpCom
endValue="30"
sectionSelect="fun-fact-area"
/>
M
</h4>
<span>Active Users</span>
</div>
</div>
</div>
</div>
</div>
<div className="col-lg-6">
<div className="appie-fun-fact-play">
<a
onClick={(e) => handleShowVideo(e)}
className="appie-video-popup"
href="https://www.youtube.com/watch?v=EE7NqzhMDms"
>
<i className="fas fa-play" />
</a>
<img src={FunFactThumb} alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</>
);
}
export default FunFactHomeThree;