125 lines
6.9 KiB
TypeScript
125 lines
6.9 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect, useRef } from 'react';
|
|
|
|
const AboutThree = () => {
|
|
const [count, setCount] = useState(0);
|
|
const countTarget = 10;
|
|
const [hasCounted, setHasCounted] = useState(false);
|
|
const counterRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const observer = new IntersectionObserver((entries) => {
|
|
if (entries[0].isIntersecting) {
|
|
setHasCounted(true);
|
|
let start = 0;
|
|
const duration = 1500;
|
|
const increment = countTarget / (duration / 16);
|
|
const timer = setInterval(() => {
|
|
start += increment;
|
|
if (start >= countTarget) {
|
|
setCount(countTarget);
|
|
clearInterval(timer);
|
|
} else {
|
|
setCount(Math.floor(start));
|
|
}
|
|
}, 16);
|
|
} else {
|
|
setHasCounted(false);
|
|
setCount(0);
|
|
}
|
|
}, { threshold: 0.5 });
|
|
|
|
if (counterRef.current) {
|
|
observer.observe(counterRef.current);
|
|
}
|
|
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
return (
|
|
<section className="about-three">
|
|
<div className="about-three__bg">
|
|
<div className="about-three__shape-one">
|
|
<img src="/assets/images/careers/2/element-1.webp" alt="Team defining innovation strategy at Metatron Cube Solutions." />
|
|
</div>
|
|
<div className="about-three__shape-two">
|
|
<img src="/assets/images/careers/2/element-2.webp" alt="element-1" />
|
|
</div>
|
|
</div>
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-xl-6 wow fadeInUp animated" data-wow-delay="100ms">
|
|
<div className="about-three__content">
|
|
<div className="sec-title">
|
|
<div className="sec-title__shape"></div>
|
|
<h6 className="sec-title__tagline">Benefits That Matter</h6>
|
|
<h3 className="sec-title__title">What We Offer</h3>
|
|
</div>
|
|
<p className="about-three__text">
|
|
From career growth to work-life balance, discover why Metatroncube is the right place for you.
|
|
</p>
|
|
<div className="about-three__card">
|
|
<ul className="about-three__card__list">
|
|
<li className="about-three__card__item">
|
|
<div className="about-three__card__icon">
|
|
<img src="/assets/images/careers/2/icon.webp" alt="Innovate Fearlessly" />
|
|
</div>
|
|
<h3 className='text-white'>Innovate Fearlessly</h3>
|
|
</li>
|
|
<li>
|
|
{/* <span className="fa-solid fa-circle-check" style={{ color: '#1a1f2b', fontSize: '20px', marginRight: '8px' }}></span>
|
|
The right therapist can help you develop skills */}
|
|
</li>
|
|
</ul>
|
|
<div className="about-three__card__exp count-box counted" ref={counterRef}>
|
|
<h3 className="about-three__card__exp__number">
|
|
<span className="count-text">{count}</span>+
|
|
</h3>
|
|
<p className="about-three__card__exp__text">Years Experience</p>
|
|
</div>
|
|
</div>
|
|
<div className="about-three__benefits pt-20">
|
|
<ul className="about-three__benefits__list">
|
|
<li className="bullet-item d-flex align-items-center mb-20">
|
|
<i className="fa-solid fa-circle-check" style={{ marginRight: '10px' }}></i>
|
|
<span><b>Opportunities to Innovate: </b> Work on cutting-edge projects that challenge you to think outside the box.</span>
|
|
</li>
|
|
<li className="bullet-item d-flex align-items-center mb-20">
|
|
<i className="fa-solid fa-circle-check" style={{ marginRight: '10px' }}></i>
|
|
<span><b>Global Exposure:</b> Collaborate with international clients and diverse teams.</span>
|
|
</li>
|
|
<li className="bullet-item d-flex align-items-center mb-20">
|
|
<i className="fa-solid fa-circle-check" style={{ marginRight: '10px' }}></i>
|
|
<span><b>
|
|
Career Growth:</b> Advance your skills with our mentorship programs, certifications, and workshops.</span>
|
|
</li>
|
|
<li className="bullet-item d-flex align-items-center mb-20">
|
|
<i className="fa-solid fa-circle-check" style={{ marginRight: '10px' }}></i>
|
|
<span><b>
|
|
Inclusive Culture:</b> Be part of a workplace that values diversity, equity, and belonging.</span>
|
|
</li>
|
|
<li className="bullet-item d-flex align-items-center">
|
|
<i className="fa-solid fa-circle-check" style={{ marginRight: '10px' }}></i>
|
|
<span><b>
|
|
Employee-First Approach:</b> Enjoy flexible work policies, wellness programs, and a focus on work-life balance.</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-xl-6 wow fadeInRight animated" data-wow-delay="200ms">
|
|
<div className="pelocis-stretch-element-inside-column" style={{ marginLeft: '0px', marginRight: '-375.012px' }}>
|
|
<div className="about-three__img">
|
|
<img src="/assets/images/careers/2/right-img.webp" alt="What we offer" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default AboutThree;
|