beyhan/next-dj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Beyhan Oğur
2026-04-26 22:12:36 +03:00
commit e881f38e4e
278 changed files with 24095 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
components/CTASection.tsx Normal file
View File

@@ -0,0 +1,135 @@
"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>
);
}