58 lines
2.4 KiB
JavaScript
58 lines
2.4 KiB
JavaScript
import React from 'react'
|
|
import CountUp, { useCountUp } from 'react-countup';
|
|
import VideoModal from '../ModalVideo/VideoModal';
|
|
|
|
const FunFact = (props) => {
|
|
|
|
useCountUp({
|
|
ref: 'counter',
|
|
end: 1234567,
|
|
enableScrollSpy: true,
|
|
scrollSpyDelay: 1000,
|
|
});
|
|
|
|
return (
|
|
<section className="wpo-fun-fact-section content">
|
|
<div className="right-bg">
|
|
<VideoModal/>
|
|
</div>
|
|
<div className="container-fluid">
|
|
<div className="row">
|
|
<div className="col col-lg-6">
|
|
<div className="wpo-fun-fact-wrap">
|
|
<div className="wpo-fun-fact-grids clearfix">
|
|
<div className="grid">
|
|
<div className="info">
|
|
<h3><span><CountUp end={35} enableScrollSpy /></span>K</h3>
|
|
<p>Total People lived in our city</p>
|
|
</div>
|
|
</div>
|
|
<div className="grid">
|
|
<div className="info">
|
|
<h3><span><CountUp end={12} enableScrollSpy /></span>K</h3>
|
|
<p>Square kilometers region covers</p>
|
|
</div>
|
|
</div>
|
|
<div className="grid">
|
|
<div className="info">
|
|
<h3><span><CountUp end={25} enableScrollSpy /></span>%</h3>
|
|
<p>Private & domestic garden land</p>
|
|
</div>
|
|
</div>
|
|
<div className="grid">
|
|
<div className="info">
|
|
<h3><span><CountUp end={8} enableScrollSpy /></span>th</h3>
|
|
<p>Average Costs of Home Ownership</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span id="counter" className='d-none' />
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default FunFact; |