Fix: Fix the content alignment on the case studies detail page (#41)

sintaherena · web-flow · commit 5abed5fcca06 · 2025-05-21T12:31:59.000+07:00
* Fix: Fix the content alignment on the case studies detail page

* Fix: category case studies
diff --git a/app/(case-studies)/case-studies/ctoaas-media/[lang]/page.tsx b/app/(case-studies)/case-studies/ctoaas-media/[lang]/page.tsx
@@ -140,47 +140,41 @@ function Home({ lang }: { lang: SupportedLanguage }) {
         </div>
 
         {/* CI/CD Transformation  */}
-        <div className="text-hyperjump-black text-left">
+        <div className="text-hyperjump-black mt-5 text-left">
           <h3 className="mb-2 text-lg font-semibold capitalize md:text-[22px]">
             {caseStudyCtoaasMediaCiCdTitle(lang)}
           </h3>
           <ul
-            className="list-disc pl-5"
+            className="list-outside list-disc space-y-2 pl-5 text-lg"
             dangerouslySetInnerHTML={{
               __html: [
                 caseStudyCtoaasMediaCiCd1,
                 caseStudyCtoaasMediaCiCd2,
                 caseStudyCtoaasMediaCiCd3
               ]
-                .map(
-                  (point, index) =>
-                    `<li key=${index} className="mb-2 text-lg">${point(lang)}</li>`
-                )
+                .map((point) => `<li>${point(lang)}</li>`)
                 .join("")
             }}
           />
         </div>
 
         {/* Quality Assurance Reinforcement  */}
-        <div className="text-hyperjump-black text-left">
+        <div className="text-hyperjump-black mt-5 text-left">
           <h3 className="mb-2 text-lg font-semibold capitalize md:text-[22px]">
             {caseStudyCtoaasMediaQaTitle(lang)}
           </h3>
           <ul
-            className="list-disc pl-5"
+            className="list-outside list-disc space-y-2 pl-5 text-lg"
             dangerouslySetInnerHTML={{
               __html: [caseStudyCtoaasMediaQa1, caseStudyCtoaasMediaQa2]
-                .map(
-                  (point, index) =>
-                    `<li key=${index} className="mb-2 text-lg">${point(lang)}</li>`
-                )
+                .map((point) => `<li>${point(lang)}</li>`)
                 .join("")
             }}
           />
         </div>
 
         {/* KPI-Driven Growth  */}
-        <div className="text-hyperjump-black text-left">
+        <div className="text-hyperjump-black mt-5 text-left">
           <h3 className="mb-2 text-lg font-semibold capitalize md:text-[22px]">
             {caseStudyCtoaasMediaKpiTitle(lang)}
           </h3>
@@ -202,28 +196,25 @@ function Home({ lang }: { lang: SupportedLanguage }) {
         </div>
 
         {/* Centralized Feedback Handling  */}
-        <div className="text-hyperjump-black text-left">
+        <div className="text-hyperjump-black mt-5 text-left">
           <h3 className="mb-2 text-lg font-semibold capitalize md:text-[22px]">
             {caseStudyCtoaasMediaCentralizedTitle(lang)}
           </h3>
           <ul
-            className="list-disc pl-5"
+            className="list-outside list-disc space-y-2 pl-5 text-lg"
             dangerouslySetInnerHTML={{
               __html: [
                 caseStudyCtoaasMediaCentralized1,
                 caseStudyCtoaasMediaCentralized2
               ]
-                .map(
-                  (point, index) =>
-                    `<li key=${index} className="mb-2 text-lg">${point(lang)}</li>`
-                )
+                .map((point) => `<li>${point(lang)}</li>`)
                 .join("")
             }}
           />
         </div>
 
         {/* Key Learnings */}
-        <div className="text-hyperjump-black py-4 text-left">
+        <div className="text-hyperjump-black py-5 text-left">
           <h3 className="mb-2 text-2xl font-semibold capitalize md:text-[28px]">
             {caseStudyCtoaasMediaKeyLearningsTitle(lang)}
           </h3>
diff --git a/app/(case-studies)/case-studies/erp-fisheries/[lang]/page.tsx b/app/(case-studies)/case-studies/erp-fisheries/[lang]/page.tsx
@@ -102,7 +102,7 @@ function Home({ lang }: { lang: SupportedLanguage }) {
         </div>
 
         {/* Our Approach */}
-        <div className="text-hyperjump-black pt-4 text-left">
+        <div className="text-hyperjump-black pt-5 text-left">
           <h3 className="mb-2 text-2xl font-semibold capitalize md:text-[28px]">
             {caseStudyErpFisheriesApproachTitle(lang)}
           </h3>
@@ -133,7 +133,7 @@ function Home({ lang }: { lang: SupportedLanguage }) {
         </div>
 
         {/* From Zero to Launch */}
-        <div className="text-hyperjump-black text-left">
+        <div className="text-hyperjump-black mt-5 text-left">
           <h3 className="mb-2 text-lg font-semibold capitalize md:text-[22px]">
             {caseStudyErpFisheriesLaunchTitle(lang)}
           </h3>
@@ -154,7 +154,7 @@ function Home({ lang }: { lang: SupportedLanguage }) {
         </div>
 
         {/* Engineering Maturity */}
-        <div className="text-hyperjump-black text-left">
+        <div className="text-hyperjump-black mt-5 text-left">
           <h3 className="mb-2 text-lg font-semibold capitalize md:text-[22px]">
             {caseStudyErpFisheriesEngineeringTitle(lang)}
           </h3>
@@ -176,7 +176,7 @@ function Home({ lang }: { lang: SupportedLanguage }) {
         </div>
 
         {/* Full-System Rollouts */}
-        <div className="text-hyperjump-black text-left">
+        <div className="text-hyperjump-black mt-5 text-left">
           <h3 className="mb-2 text-lg font-semibold capitalize md:text-[22px]">
             {caseStudyErpFisheriesFullSystemRolloutsTitle(lang)}
           </h3>
diff --git a/app/components/grid-items.tsx b/app/components/grid-items.tsx
@@ -240,7 +240,7 @@ export function GridItems({
               {category && (
                 <p
                   className={cn(
-                    "mb-2 w-28 rounded-3xl px-2 py-1.5 text-center text-sm font-medium",
+                    "mb-2 w-36 rounded-3xl px-2 py-1.5 text-center text-sm font-medium",
                     categoryClassName
                   )}>
                   {category}
diff --git a/locales/en/case-study.json b/locales/en/case-study.json
@@ -10,7 +10,7 @@
   },
   "explore": "Explore Our Case Studies",
   "button": "Read Case Study",
-  "category": "Case Studies",
+  "category": "CTO as a Service",
   "erp_fisheries": {
     "title": "Transforming a Fisheries Tech Team into a Scalable Product Engine",
     "text": "Empowering a mission-driven startup to digitize Indonesia’s fisheries supply chain—coast to customer.",
diff --git a/locales/en/main.json b/locales/en/main.json
@@ -44,11 +44,11 @@
     "button": "Read Case Study",
     "0_title": "Transforming a Fisheries Tech Team into a Scalable Product Engine",
     "0_text": "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.",
-    "0_category": "Case Studies",
+    "0_category": "CTO as a Service",
 
     "1_title": "Elevating a Media-Tech Engineering Team from Feature Factory to Innovation Powerhouse",
     "1_text": "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.",
-    "1_category": "Case Studies"
+    "1_category": "CTO as a Service"
   },
   "project": {
     "heading": "Open Source Product",
diff --git a/locales/id/case-study.json b/locales/id/case-study.json
@@ -10,7 +10,7 @@
   },
   "explore": "Jelajahi Studi Kasus Kami",
   "button": "Baca Studi Kasus",
-  "category": "Studi Kasus",
+  "category": "CTO as a Service",
   "erp_fisheries": {
     "title": "Mengubah Tim Teknologi Perikanan Menjadi Mesin Produk yang Skalabel",
     "text": "Mendukung startup berbasis misi dalam mendigitalkan rantai pasok perikanan Indonesia—dari pesisir ke pelanggan.",
diff --git a/locales/id/main.json b/locales/id/main.json
@@ -44,11 +44,11 @@
     "button": "Baca Studi Kasus",
     "0_title": "Mengubah Tim Teknologi Perikanan Menjadi Mesin Produk yang Skalabel",
     "0_text": "Sebuah tim teknologi junior namun penuh semangat. Tidak ada produk yang sudah berjalan. Taruhannya besar. Kami terlibat secara mendalam dengan tim mereka untuk memperkenalkan struktur, membangun kepercayaan diri, dan merilis MVP yang berfungsi dalam 3 bulan. Melalui praktik agile yang ketat dan peluncuran sistem menyeluruh, kami membantu mengubah organisasi teknologi yang rapuh menjadi mesin produk yang andal.",
-    "0_category": "Studi Kasus",
+    "0_category": "CTO as a Service",
 
     "1_title": "Meningkatkan Tim Rekayasa Media-Tech dari Pabrik Fitur Menjadi Pusat Inovasi",
     "1_text": "Ketika pertumbuhan pesat melampaui kematangan rekayasa, tim ini membutuhkan lebih dari sekadar fitur—mereka membutuhkan transformasi. Kami merestrukturisasi praktik agile mereka, mengotomatisasi DevOps, menetapkan KPI yang terukur, dan membantu mereka beralih dari sekadar mengeksekusi tugas menjadi pemilik produk sejati yang mampu berinovasi.",
-    "1_category": "Studi Kasus"
+    "1_category": "CTO as a Service"
   },
   "project": {
     "heading": "Produk Open Source",
