This commit is contained in:
Iliyan Angelov
2025-11-24 08:18:18 +02:00
parent 366f28677a
commit 136f75a859
133 changed files with 14977 additions and 3350 deletions

View File

@@ -1,5 +1,5 @@
"use client";
import Image from "next/legacy/image";
import Image from "next/image";
import Link from "next/link";
import { useCaseStudy } from "@/lib/hooks/useCaseStudy";
import { getImageUrl } from "@/lib/imageUtils";
@@ -17,44 +17,45 @@ const RelatedCase = ({ slug }: RelatedCaseProps) => {
}
return (
<section className="pt-120 pb-120 c-study fade-wrapper">
<section className="related-case-studies luxury-related pt-120 pb-120">
<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 className="col-12">
<div className="section-header">
<h2 className="section-title">Related Case Studies</h2>
<p className="section-subtitle">Explore similar projects and success stories</p>
</div>
</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>
{caseStudy.related_case_studies.slice(0, 3).map((relatedCase) => (
<div key={relatedCase.id} className="col-12 col-md-6 col-lg-4">
<div className="related-case-card">
<Link href={`/case-study/${relatedCase.slug}`} className="case-link">
<div className="case-image-wrapper">
<Image
src={relatedCase.thumbnail ? getImageUrl(relatedCase.thumbnail) : one}
className="case-image"
alt={relatedCase.title}
width={400}
height={300}
/>
<div className="image-overlay">
<i className="fa-solid fa-arrow-right"></i>
</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 className="case-content">
{relatedCase.category_name && (
<span className="case-category">
{relatedCase.category_name}
</span>
)}
<h3 className="case-title">{relatedCase.title}</h3>
{relatedCase.excerpt && (
<p className="case-excerpt">{relatedCase.excerpt}</p>
)}
</div>
</Link>
</div>
</div>
))}