Olu Amey
102 lines
5.5 KiB
JavaScript
102 lines
5.5 KiB
JavaScript
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;
|