96 lines
3.5 KiB
TypeScript
96 lines
3.5 KiB
TypeScript
"use client";
|
|
import Image from "next/legacy/image";
|
|
import Link from "next/link";
|
|
import { useCaseStudies } from "@/lib/hooks/useCaseStudy";
|
|
import { getImageUrl } from "@/lib/imageUtils";
|
|
import one from "@/public/images/case/one.png";
|
|
|
|
const CaseItems = () => {
|
|
const { caseStudies, loading: casesLoading } = useCaseStudies();
|
|
|
|
if (casesLoading) {
|
|
return (
|
|
<section className="fix-top pb-120 c-study">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<p className="text-center">Loading case studies...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<section className="fix-top pb-120 c-study">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<div className="c-study-banner pb-120">
|
|
<div className="row">
|
|
<div className="col-12 col-lg-9">
|
|
<h2 className="mt-8 title-anim fw-7 text-secondary mb-24">
|
|
Case Studies
|
|
</h2>
|
|
<p className="cur-lg">
|
|
Discover how we help enterprises solve complex challenges with
|
|
secure, scalable solutions. Our case studies highlight real
|
|
business outcomes accelerated delivery, reduced costs,
|
|
improved reliability, and data-driven growth powered by modern
|
|
cloud, AI, and platform engineering.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<div className="c-content-wrapper mt-60">
|
|
<div className="c-tab-single active-tab">
|
|
<div className="row vertical-column-gap-lg">
|
|
{caseStudies.map((caseStudy) => (
|
|
<div key={caseStudy.id} className="col-12 col-lg-6">
|
|
<div className="c-study-single">
|
|
<div className="thumb mb-24">
|
|
<Link href={`/case-study/${caseStudy.slug}`} className="w-100">
|
|
<Image
|
|
src={caseStudy.thumbnail ? getImageUrl(caseStudy.thumbnail) : one}
|
|
className="w-100 mh-300"
|
|
alt={caseStudy.title}
|
|
width={600}
|
|
height={400}
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<div className="content">
|
|
<Link href={`/case-study/${caseStudy.slug}`} className="mb-30 fw-6">
|
|
{caseStudy.category_name || 'Case Study'}
|
|
</Link>
|
|
<h4 className="fw-6 mt-8 text-secondary">
|
|
<Link href={`/case-study/${caseStudy.slug}`}>
|
|
{caseStudy.title}
|
|
</Link>
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{caseStudies.length === 0 && (
|
|
<div className="col-12">
|
|
<p className="text-center">No case studies found.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default CaseItems;
|