dev-chiefworks
85 lines
2.0 KiB
React
85 lines
2.0 KiB
React
|
|
|
|
'use client'
|
|
|
|
|
|
|
|
import React from "react";
|
|
import CountUp from "react-countup";
|
|
import VisibilitySensor from "react-visibility-sensor";
|
|
|
|
const counterUpContent = [
|
|
{
|
|
startCount: "0",
|
|
endCount: "1500",
|
|
endPointText: "+",
|
|
countMeta: "Positive Review",
|
|
meta: "A place to think and track ideas",
|
|
animationDelay: "0",
|
|
},
|
|
{
|
|
startCount: "0",
|
|
endCount: "200",
|
|
endPointText: "+",
|
|
countMeta: "Branches",
|
|
meta: "A home for your iqu team, best",
|
|
animationDelay: "100",
|
|
},
|
|
{
|
|
startCount: "0",
|
|
endCount: "2",
|
|
endPointText: "k+",
|
|
countMeta: "Work Done",
|
|
meta: "Beautiful docs for your APIs, Products",
|
|
animationDelay: "200",
|
|
},
|
|
];
|
|
|
|
const CounterFive = () => {
|
|
const [focus, setFocus] = React.useState(false);
|
|
return (
|
|
<div className="row justify-content-center">
|
|
{counterUpContent.map((val, i) => (
|
|
<div
|
|
className="col-lg-4 col-sm-6"
|
|
data-aos="fade-up"
|
|
data-aos-duration="1200"
|
|
data-aos-delay={val.animationDelay}
|
|
key={i}
|
|
>
|
|
<div className="counter-box-two">
|
|
<h2 className="number">
|
|
<span className="timer">
|
|
{" "}
|
|
<CountUp
|
|
start={focus ? val.startCount : null}
|
|
end={val.endCount}
|
|
duration={1}
|
|
redraw={true}
|
|
>
|
|
{({ countUpRef }) => (
|
|
<VisibilitySensor
|
|
onChange={(isVisible) => {
|
|
if (isVisible) {
|
|
setFocus(true);
|
|
}
|
|
}}
|
|
>
|
|
<span ref={countUpRef} />
|
|
</VisibilitySensor>
|
|
)}
|
|
</CountUp>
|
|
</span>
|
|
{val.endPointText}
|
|
</h2>
|
|
<em>{val.countMeta}</em>
|
|
<p className="font-rubik">{val.meta}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CounterFive;
|