update

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

@@ -0,0 +1,143 @@
+"use client";
+import { use } from 'react';
+import Image from "next/legacy/image";
+import { useCaseStudy } from "@/lib/hooks/useCaseStudy";
+import { getImageUrl } from "@/lib/imageUtils";
+import poster from "@/public/images/case/poster.png";
+import project from "@/public/images/case/project.png";
+import nine from "@/public/images/case/nine.png";
+
+interface CaseSingleProps {
+  slug: string;
+}
+
+const CaseSingle = ({ slug }: CaseSingleProps) => {
+  const { caseStudy, loading, error } = useCaseStudy(slug);
+
+  if (loading) {
+    return (
+      <section className="c-details fix-top pb-120">
+        <div className="container">
+          <div className="row">
+            <div className="col-12">
+              <p className="text-center">Loading case study...</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  if (error || !caseStudy) {
+    return (
+      <section className="c-details fix-top pb-120">
+        <div className="container">
+          <div className="row">
+            <div className="col-12">
+              <p className="text-center text-danger">Case study not found.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="c-details fix-top pb-120">
+      <div className="container">
+        <div className="row">
+          <div className="col-12">
+            <div className="c-details-intro">
+              <h2 className="mt-8 text-secondary title-anim fw-7">
+                {caseStudy.title}
+              </h2>
+              {caseStudy.subtitle && (
+                <h4 className="mt-4 text-secondary">{caseStudy.subtitle}</h4>
+              )}
+              <div className="poster mt-60 fade-top">
+                <div className="parallax-image-wrap">
+                  <div className="parallax-image-inner">
+                    <Image
+                      src={caseStudy.poster_image ? getImageUrl(caseStudy.poster_image) : poster}
+                      className="w-100 parallax-image mh-300"
+                      alt={caseStudy.title}
+                      width={1200}
+                      height={600}
+                    />
+                  </div>
+                </div>
+              </div>
+              <div className="row vertical-column-gap align-items-center pt-120 pb-120">
+                <div className="col-12 col-lg-6">
+                  <div className="c-details-content">
+                    <h2 className="mt-8 fw-7 text-secondary title-anim mb-24">
+                      Project
+                    </h2>
+                    {caseStudy.project_overview ? (
+                      <p className="cur-lg">{caseStudy.project_overview}</p>
+                    ) : (
+                      <div 
+                        className="cur-lg" 
+                        dangerouslySetInnerHTML={{ __html: caseStudy.description || '' }}
+                      />
+                    )}
+                  </div>
+                </div>
+                <div className="col-12 col-lg-6 col-xxl-5 offset-xxl-1 fade-wrapper">
+                  <div className="c-details-thumb fade-top">
+                    <div className="parallax-image-wrap">
+                      <div className="parallax-image-inner">
+                        <Image
+                          src={caseStudy.project_image ? getImageUrl(caseStudy.project_image) : project}
+                          className="w-100 parallax-image mh-260"
+                          alt={`${caseStudy.title} - Project`}
+                          width={600}
+                          height={500}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              {caseStudy.site_map_content && (
+                <div className="row">
+                  <div className="col-12">
+                    <div className="road-map__content">
+                      <h2 className="mt-8 fw-7 text-secondary title-anim mb-24">
+                        Site Map
+                      </h2>
+                      <p className="cur-lg">{caseStudy.site_map_content}</p>
+                    </div>
+                  </div>
+                </div>
+              )}
+              {caseStudy.gallery_images && caseStudy.gallery_images.length > 0 && (
+                <div className="row vertical-column-gap mt-60 fade-wrapper">
+                  {caseStudy.gallery_images.map((image) => (
+                    <div key={image.id} className="col-12 col-sm-6 col-xl-3">
+                      <div className="c-details-thumb fade-top">
+                        <div className="parallax-image-wrap">
+                          <div className="parallax-image-inner">
+                            <Image
+                              src={getImageUrl(image.image) || nine}
+                              className="w-100 mh-300 parallax-image"
+                              alt={image.caption || caseStudy.title}
+                              width={300}
+                              height={300}
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default CaseSingle;