136 lines
4.4 KiB
TypeScript
136 lines
4.4 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState, useRef } from "react";
|
|
|
|
export default function CTASection() {
|
|
const [mounted, setMounted] = useState(false);
|
|
const ctaRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
|
|
// Initialize Jarallax manually after mount
|
|
const initJarallax = () => {
|
|
if (ctaRef.current && typeof window !== 'undefined' && (window as any).jarallax) {
|
|
(window as any).jarallax(ctaRef.current, {
|
|
speed: 0.6
|
|
});
|
|
}
|
|
};
|
|
|
|
// Delay to ensure jarallax library is loaded
|
|
setTimeout(initJarallax, 200);
|
|
|
|
return () => {
|
|
// Cleanup jarallax on unmount
|
|
if (ctaRef.current && typeof window !== 'undefined' && (window as any).jarallax) {
|
|
(window as any).jarallax(ctaRef.current, 'destroy');
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
if (!mounted) {
|
|
// Server-side render: simple div without jarallax
|
|
return (
|
|
<div
|
|
className="cta-wrap"
|
|
style={{backgroundImage: 'url("/assets/img/bg-img/20.jpg")', backgroundSize: 'cover', backgroundPosition: 'center'}}
|
|
>
|
|
<div className="divider"></div>
|
|
<div className="container">
|
|
<div className="row justify-content-end">
|
|
<div className="col-12 col-sm-11 col-md-10 col-lg-7 col-xl-6 col-xxl-5">
|
|
<div className="cta-card">
|
|
<div className="total-clients-wrap">
|
|
<div className="total-number">
|
|
<h3>200+</h3>
|
|
<p className="mb-0">Satisfied Customers</p>
|
|
</div>
|
|
<div className="clients-images">
|
|
<img src="/assets/img/bg-img/21.png" alt="" />
|
|
<img src="/assets/img/bg-img/22.png" alt="" />
|
|
<img src="/assets/img/bg-img/23.png" alt="" />
|
|
<img src="/assets/img/bg-img/24.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<div className="cta-stats">
|
|
<div>
|
|
<h2>100+</h2>
|
|
<p className="mb-0">Global Clients</p>
|
|
</div>
|
|
<div>
|
|
<h2>150+</h2>
|
|
<p className="mb-0">Team Members</p>
|
|
</div>
|
|
<div>
|
|
<h2>15+</h2>
|
|
<p className="mb-0">Business Experience</p>
|
|
</div>
|
|
<div>
|
|
<h2>300+</h2>
|
|
<p className="mb-0">Projects Complete</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="divider"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Client-side render: with jarallax
|
|
return (
|
|
<div
|
|
ref={ctaRef}
|
|
className="cta-wrap jarallax"
|
|
data-jarallax=""
|
|
data-speed="0.6"
|
|
style={{backgroundImage: 'url("/assets/img/bg-img/20.jpg")'}}
|
|
>
|
|
<div className="divider"></div>
|
|
<div className="container">
|
|
<div className="row justify-content-end">
|
|
<div className="col-12 col-sm-11 col-md-10 col-lg-7 col-xl-6 col-xxl-5">
|
|
<div className="cta-card">
|
|
<div className="total-clients-wrap">
|
|
<div className="total-number">
|
|
<h3>200+</h3>
|
|
<p className="mb-0">Satisfied Customers</p>
|
|
</div>
|
|
<div className="clients-images">
|
|
<img src="/assets/img/bg-img/21.png" alt="" />
|
|
<img src="/assets/img/bg-img/22.png" alt="" />
|
|
<img src="/assets/img/bg-img/23.png" alt="" />
|
|
<img src="/assets/img/bg-img/24.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<div className="cta-stats">
|
|
<div>
|
|
<h2>100+</h2>
|
|
<p className="mb-0">Global Clients</p>
|
|
</div>
|
|
<div>
|
|
<h2>150+</h2>
|
|
<p className="mb-0">Team Members</p>
|
|
</div>
|
|
<div>
|
|
<h2>15+</h2>
|
|
<p className="mb-0">Business Experience</p>
|
|
</div>
|
|
<div>
|
|
<h2>300+</h2>
|
|
<p className="mb-0">Projects Complete</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="divider"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|