Add: Add call-to-action button for the case study detail page (#159)

* Add: Add call-to-action button for the case study detail page

* fix codee

* add locales id

* fix code

Author: sintaherena

app/[lang]/(hyperjump)/case-studies/[slug]/components/button-get-in-touch.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+
+type GetInTouchButtonProps = {
+  index: string;
+  buttonChatbotMessage: string;
+  children: React.ReactNode;
+};
+
+function getTopic(index: string): string {
+  switch (index) {
+    case "erp-fisheries":
+      return "Transforming a fisheries tech team into a scalable product engine";
+    case "ctoaas-media":
+      return "Elevating a media-tech engineering team from feature factory to innovation powerhouse";
+    default:
+      return "";
+  }
+}
+
+export default function ButtonGetInTouch({
+  index,
+  buttonChatbotMessage,
+  children
+}: GetInTouchButtonProps) {
+  return (
+    <Button
+      variant="default"
+      size="lg"
+      className="bg-hyperjump-blue hover:bg-hyperjump-blue/90 w-3/4 md:w-auto"
+      onClick={() => {
+        window.dispatchEvent(
+          new CustomEvent("prefillAIAgent", {
+            detail: {
+              message: `${buttonChatbotMessage} ${getTopic(index)}`
+            }
+          })
+        );
+      }}>
+      {children}
+    </Button>
+  );
+}

app/[lang]/(hyperjump)/case-studies/[slug]/page.tsx

@@ -15,6 +15,7 @@ import type { CaseStudy } from "../../data";
 import { caseStudyBy, getCaseStudies } from "../data";
 import { Content } from "./components/content";
 import { dynamicOpengraph } from "@/lib/default-metadata";
+import ButtonGetInTouch from "./components/button-get-in-touch";
 
 type Params = { lang: SupportedLanguage; slug: string };
 
@@ -62,20 +63,30 @@ export default async function CaseStudy({ params }: CaseStudyProps) {
     notFound();
   }
 
+  const cta = caseStudy.cta;
+
   return (
     <main className="bg-white">
       <Hero heading={caseStudy.title} />
       <section className="mx-auto max-w-3xl px-4 md:px-20">
         <article className="prose prose-headings:mt-8 prose-headings:font-semibold prose-headings:text-black prose-h1:text-4xl prose-h2:text-3xl prose-h3:text-2xl prose-h4:text-xl prose-h5:text-lg prose-h6:text-md dark:prose-headings:text-white text-left">
           <Content slug={slug} lang={lang} />
         </article>
+
+        <div className="mt-12 flex flex-col items-center gap-4 text-center">
+          <h3 className="text-hyperjump-black max-w-xl text-xl font-semibold md:text-2xl">
+            {cta.heading}
+          </h3>
+
+          <ButtonGetInTouch index={slug} buttonChatbotMessage={caseStudy.title}>
+            {cta.label}
+          </ButtonGetInTouch>
+        </div>
       </section>
 
       <section className="mt-5 px-4 md:px-20">
         <Recommendation
-          caseStudies={getCaseStudies(lang).filter(
-            (caseStudy) => caseStudy.slug !== slug
-          )}
+          caseStudies={getCaseStudies(lang).filter((cs) => cs.slug !== slug)}
           lang={lang}
         />
       </section>

app/[lang]/(hyperjump)/case-studies/data.ts

@@ -4,7 +4,13 @@ import {
   caseStudyCtoaasMediaTitle,
   caseStudyErpFisheriesCategory,
   caseStudyErpFisheriesDesc,
-  caseStudyErpFisheriesTitle
+  caseStudyErpFisheriesTitle,
+  caseStudyCtoaasMediaCtaHeading,
+  caseStudyCtoaasMediaCtaLabel,
+  caseStudyCtoaasMediaCtaSubject,
+  caseStudyErpFisheriesCtaHeading,
+  caseStudyErpFisheriesCtaLabel,
+  caseStudyErpFisheriesCtaSubject
 } from "@/locales/.generated/server";
 import type { SupportedLanguage } from "@/locales/.generated/types";
 
@@ -14,13 +20,23 @@ export const getCaseStudies = (lang: SupportedLanguage) => {
       slug: "erp-fisheries",
       title: caseStudyErpFisheriesTitle(lang),
       description: caseStudyErpFisheriesDesc(lang),
-      category: caseStudyErpFisheriesCategory(lang)
+      category: caseStudyErpFisheriesCategory(lang),
+      cta: {
+        heading: caseStudyErpFisheriesCtaHeading(lang),
+        subject: caseStudyErpFisheriesCtaSubject(lang),
+        label: caseStudyErpFisheriesCtaLabel(lang)
+      }
     },
     {
       slug: "ctoaas-media",
       title: caseStudyCtoaasMediaTitle(lang),
       description: caseStudyCtoaasMediaDesc(lang),
-      category: caseStudyCtoaasMediaCategory(lang)
+      category: caseStudyCtoaasMediaCategory(lang),
+      cta: {
+        heading: caseStudyCtoaasMediaCtaHeading(lang),
+        subject: caseStudyCtoaasMediaCtaSubject(lang),
+        label: caseStudyCtoaasMediaCtaLabel(lang)
+      }
     }
   ];
 };

data.json

@@ -50,5 +50,6 @@
     }
   ],
   "title": "Hyperjump Technology",
-  "url": "https://hyperjump.tech"
+  "url": "https://hyperjump.tech",
+  "email": "solution@hyperjump.tech"
 }

locales/en/case-study.json

@@ -15,11 +15,21 @@
   "erp_fisheries": {
     "title": "Transforming a fisheries tech team into a scalable product engine",
     "desc": "A junior but passionate tech team. Zero products in production. High impact at stake. We embedded deeply with their team to introduce structure, build confidence, and ship a functional MVP within 3 months. Through rigorous agile practices and full-system rollouts, we helped evolve a fragile tech org into a reliable product engine.",
-    "category": "CTO as a Service"
+    "category": "CTO as a Service",
+    "cta": {
+      "heading": "Ready to build your future? Let's discuss your transformation",
+      "subject": "Media Transformation",
+      "label": "Get In Touch"
+    }
   },
   "ctoaas_media": {
     "title": "Elevating a media-tech engineering team from feature factory to innovation powerhouse",
     "desc": "When rapid growth outpaced engineering maturity, this team needed more than features, they needed transformation. We restructured their agile practices, automated DevOps, established measurable KPIs, and helped them move from task execution to true product ownership and experimentation.",
-    "category": "CTO as a Service"
+    "category": "CTO as a Service",
+    "cta": {
+      "heading": "Ready to transform your tech team? Let's talk about CTO-as-a-Service",
+      "subject": "CTO as a Service",
+      "label": "Get In Touch"
+    }
   }
 }

locales/id/case-study.json

@@ -15,11 +15,21 @@
   "erp_fisheries": {
     "title": "Mengubah tim teknologi perikanan menjadi mesin produk yang skalabel",
     "desc": "Tim teknologi yang masih junior namun penuh semangat. Tidak ada produk yang berjalan. Taruhan dampak besar. Kami terjun langsung mendampingi tim mereka untuk membangun struktur, meningkatkan kepercayaan diri, dan meluncurkan MVP yang fungsional dalam 3 bulan. Lewat praktik agile yang ketat dan peluncuran sistem penuh, kami bantu mengubah organisasi teknologi yang rapuh menjadi mesin produk yang andal.",
-    "category": "CTO as a Service"
+    "category": "CTO as a Service",
+    "cta": {
+      "heading": "Siap membangun masa depan Anda? Mari diskusikan transformasi Anda",
+      "subject": "Transformasi Media",
+      "label": "Hubungi Kami"
+    }
   },
   "ctoaas_media": {
     "title": "Meningkatkan tim engineering media dari pabrik fitur menjadi pusat inovasi",
     "desc": "Ketika pertumbuhan cepat melampaui kematangan engineering, tim ini butuh lebih dari sekadar fitur, mereka butuh transformasi. Kami restrukturisasi praktik agile mereka, otomatisasi DevOps, tetapkan KPI terukur, dan bantu mereka beralih dari eksekutor tugas ke pemilik produk sejati yang inovatif.",
-    "category": "CTO as a Service"
+    "category": "CTO as a Service",
+    "cta": {
+      "heading": "Siap mentransformasi tim teknologi Anda? Mari berdiskusi tentang CTO-as-a-Service",
+      "subject": "CTO sebagai Layanan",
+      "label": "Hubungi Kami"
+    }
   }
 }