update

frontEnd/components/pages/case-study/RelatedCase.tsx

@@ -0,0 +1,67 @@
+"use client";
+import Image from "next/legacy/image";
+import Link from "next/link";
+import { useCaseStudy } from "@/lib/hooks/useCaseStudy";
+import { getImageUrl } from "@/lib/imageUtils";
+import one from "@/public/images/case/one.png";
+
+interface RelatedCaseProps {
+  slug: string;
+}
+
+const RelatedCase = ({ slug }: RelatedCaseProps) => {
+  const { caseStudy, loading } = useCaseStudy(slug);
+
+  if (loading || !caseStudy || !caseStudy.related_case_studies || caseStudy.related_case_studies.length === 0) {
+    return null;
+  }
+
+  return (
+    <section className="pt-120 pb-120 c-study fade-wrapper">
+      <div className="container">
+        <div className="row">
+          <div className="col-12 col-lg-9">
+            <h2 className="mt-8 title-anim fw-7 text-secondary mb-24">
+              Similar Case Studies
+            </h2>
+          </div>
+        </div>
+        <div className="row vertical-column-gap-lg">
+          {caseStudy.related_case_studies.slice(0, 2).map((relatedCase) => (
+            <div key={relatedCase.id} className="col-12 col-lg-6">
+              <div className="c-study-single fade-top">
+                <div className="thumb mb-24">
+                  <Link href={`/case-study/${relatedCase.slug}`} className="w-100">
+                    <div className="parallax-image-wrap">
+                      <div className="parallax-image-inner">
+                        <Image
+                          src={relatedCase.thumbnail ? getImageUrl(relatedCase.thumbnail) : one}
+                          className="w-100 mh-300 parallax-image"
+                          alt={relatedCase.title}
+                          width={600}
+                          height={400}
+                        />
+                      </div>
+                    </div>
+                  </Link>
+                </div>
+                <div className="content">
+                  <Link href={`/case-study/${relatedCase.slug}`} className="mb-30 fw-6">
+                    {relatedCase.category_name || 'Case Study'}
+                  </Link>
+                  <h4 className="fw-6 mt-8 text-secondary">
+                    <Link href={`/case-study/${relatedCase.slug}`}>
+                      {relatedCase.title}
+                    </Link>
+                  </h4>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default RelatedCase;