refactor: improve page width consistency (#133)

haricnugraha · web-flow · commit a08e8432060a · 2025-10-21T13:22:54.000+07:00
diff --git a/app/[lang]/(hyperjump)/case-studies/[slug]/page.tsx b/app/[lang]/(hyperjump)/case-studies/[slug]/page.tsx
@@ -103,7 +103,7 @@ function Hero({ heading }: { heading: string }) {
 
       <div className="relative z-10 mt-10 flex h-[351px] items-center justify-center">
         <h1
-          className="mb-4 max-w-3xl px-4 text-center text-2xl font-medium text-white sm:text-4xl md:px-20 md:text-[40px]"
+          className="mb-4 max-w-3xl px-4 text-center text-2xl font-medium text-white sm:text-4xl md:px-20 md:text-4xl"
           dangerouslySetInnerHTML={{
             __html: heading
           }}
@@ -121,8 +121,8 @@ type RecommendationProps = {
 function Recommendation({ caseStudies, lang }: RecommendationProps) {
   return (
     <section className="bg-white py-10">
-      <div className="mx-auto max-w-6xl">
-        <h2 className="text-hyperjump-black mb-5 text-2xl font-semibold capitalize md:text-4xl">
+      <div className="mx-auto max-w-5xl">
+        <h2 className="text-hyperjump-black mb-5 text-2xl font-semibold md:text-4xl">
           {caseStudyMore(lang)}
         </h2>
         <div className="grid gap-6 md:grid-cols-2">
diff --git a/app/[lang]/(hyperjump)/components/footer.tsx b/app/[lang]/(hyperjump)/components/footer.tsx
@@ -11,7 +11,7 @@ type FooterProps = { lang: SupportedLanguage };
 
 export default function Footer({ lang }: FooterProps) {
   return (
-    <footer className="relative overflow-hidden px-4 py-10 text-white md:px-20 md:py-14">
+    <footer className="relative overflow-hidden px-4 py-10 text-white md:px-20 md:py-14 xl:px-0">
       <div className="absolute inset-0 z-0">
         <Image
           src="/images/swatch.svg"
diff --git a/app/[lang]/(hyperjump)/products/page.tsx b/app/[lang]/(hyperjump)/products/page.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 
-import GridItemsContainer, { GridItems } from "@/app/components/grid-items";
+import { GridItems } from "@/app/components/grid-items";
 import { Hero } from "@/app/components/hero";
 import { dynamicOpengraph } from "@/lib/default-metadata";
 import {
@@ -49,21 +49,21 @@ export default async function productsPage({ params }: ProductsProps) {
   const { lang } = await params;
 
   return (
-    <main className="bg-white">
+    <main className="pb-10">
       <Hero
         subtitle={productsHeroDesc(lang)}
         title={productsHeroHeading(lang)}
       />
-      <div className="xxl:max-w-7xl mx-auto -mt-10 flex w-full max-w-6xl flex-wrap items-center justify-center px-2 py-6 md:-mt-24 md:px-20 xl:px-0">
-        <GridItemsContainer id="commercial-product">
-          <GridItems
-            items={[...getCommercialProduct(lang), ...getOpenSource(lang)]}
-            columns={{ base: 1, sm: 2, lg: 3 }}
-            cardClassName="rounded"
-            lang={lang}
-          />
-        </GridItemsContainer>
-      </div>
+      <section
+        id="commercial-product"
+        className="mx-auto max-w-5xl px-4 md:-mt-5 md:px-20 xl:px-0">
+        <GridItems
+          items={[...getCommercialProduct(lang), ...getOpenSource(lang)]}
+          columns={{ base: 1, sm: 2, md: 2, lg: 3 }}
+          cardClassName="rounded"
+          lang={lang}
+        />
+      </section>
     </main>
   );
 }
diff --git a/app/[lang]/(hyperjump)/services/[slug]/page.tsx b/app/[lang]/(hyperjump)/services/[slug]/page.tsx
@@ -143,7 +143,7 @@ function About({ service }: ServiceProps) {
 
   return (
     <section className="bg-[#F6F8F9] py-8 md:py-16">
-      <div className="text-hyperjump-black mx-auto flex w-full max-w-4xl flex-wrap items-center px-4 py-10 md:px-16 md:py-20 xl:px-0">
+      <div className="text-hyperjump-black mx-auto flex w-full max-w-4xl flex-wrap items-center px-4 py-10 md:px-20 md:py-20 xl:px-0">
         <h2 className="mb-5 text-[34px] font-medium md:text-4xl">{title}</h2>
         <p
           className="text-xl leading-relaxed"
@@ -165,7 +165,7 @@ function WhoIsIt({ lang, service }: LangProps & ServiceProps) {
 
   return (
     <section className="flex bg-white px-4 py-8 md:px-20 md:py-16">
-      <div className="xxl:max-w-7xl mx-auto flex w-full max-w-6xl flex-col items-center gap-6 md:flex-row">
+      <div className="mx-auto flex w-full max-w-5xl flex-col items-start gap-6 md:flex-row">
         <div className="relative w-full xl:w-1/2">
           <Image
             src="/images/services/background.webp"
@@ -218,12 +218,12 @@ function WhatWeDeliver({ lang, service }: LangProps & ServiceProps) {
 
   return (
     <section className="bg-white py-8 md:py-16">
-      <div className="text-hyperjump-black xxl:max-w-7xl mx-auto flex w-full max-w-6xl flex-col items-center justify-center px-4 text-center md:px-20 xl:px-0">
+      <div className="text-hyperjump-black mx-auto flex w-full max-w-5xl flex-col items-center justify-center px-4 text-center md:px-20 xl:px-0">
         <h3 className="mb-5 text-[34px] font-medium md:text-4xl">
           {servicesWhatWeDeliver(lang)}
         </h3>
         <p className="text-hyperjump-gray mt-2 max-w-lg">{description}</p>
-        <div className="mt-6 grid w-full grid-cols-1 gap-6 md:mt-12 md:grid-cols-3 xl:grid-cols-3">
+        <div className="mt-6 grid w-full grid-cols-1 gap-6 md:mt-12 xl:grid-cols-3">
           {items.map(({ description, iconUrl, items, title }) => (
             <div
               key={title}
@@ -259,7 +259,7 @@ function HowItWorks({ lang, service }: LangProps & ServiceProps) {
 
   return (
     <section className="bg-[#F6F8F9 py-8 md:py-16">
-      <div className="text-hyperjump-black xxl:max-w-7xl mx-auto flex w-full max-w-6xl flex-col items-center px-4 text-center">
+      <div className="text-hyperjump-black mx-auto flex w-full max-w-5xl flex-col items-center px-4 text-center md:px-20 xl:px-0">
         <h2 className="mb-5 text-[34px] font-medium md:text-4xl">
           {servicesHowItWorks(lang)}
         </h2>
@@ -305,7 +305,7 @@ function WhatYouGet({ lang, service }: LangProps & ServiceProps) {
 
   return (
     <section className="flex bg-white px-4 py-8 md:px-20 md:py-16">
-      <div className="xxl:max-w-7xl mx-auto flex w-full max-w-6xl flex-col items-center gap-6 md:flex-row-reverse">
+      <div className="mx-auto flex w-full max-w-5xl flex-col items-start gap-6 md:flex-row-reverse">
         <div className="relative w-full xl:w-1/2">
           <Image
             src={imageUrl}
@@ -347,7 +347,7 @@ function WhyUs({ lang, service }: LangProps & ServiceProps) {
   } = service;
   return (
     <section className="flex bg-white px-4 py-8 md:px-20 md:py-16">
-      <div className="xxl:max-w-7xl mx-auto flex w-full max-w-6xl flex-col items-center gap-6 md:flex-row">
+      <div className="mx-auto flex w-full max-w-5xl flex-col items-start gap-6 md:flex-row">
         <div className="relative w-full xl:w-1/2">
           <Image
             src={backgroundImageUrl}
@@ -411,9 +411,9 @@ function Recommendation({ caseStudies, lang }: RecommendationProps) {
   if (caseStudies.length === 0) return null;
 
   return (
-    <section className="flex bg-white px-4 py-8 md:px-20 md:py-16">
-      <div className="mx-auto flex w-full flex-col items-center md:max-w-4xl">
-        <h2 className="text-hyperjump-black mb-5 max-w-3/4 text-center text-[34px] font-medium md:text-[40px]">
+    <section className="flex bg-white py-8">
+      <div className="mx-auto flex w-full max-w-5xl flex-col items-center px-4 md:px-20 xl:px-0">
+        <h2 className="text-hyperjump-black mb-5 max-w-3/4 text-center text-3xl font-medium md:text-4xl">
           {servicesCaseStudies(lang)}
         </h2>
         <div className="grid gap-6 md:grid-cols-2">
diff --git a/app/[lang]/(hyperjump)/services/page.tsx b/app/[lang]/(hyperjump)/services/page.tsx
@@ -63,7 +63,7 @@ export default async function Services({ params }: ServicesProps) {
         subtitle={servicesHeroDesc(lang)}
         title={servicesHeroHeading(lang)}
       />
-      <div className="xxl:max-w-7xl mx-auto flex w-full max-w-6xl flex-wrap items-center justify-center px-4 pb-15 text-center md:px-20 xl:px-0">
+      <div className="mx-auto flex w-full max-w-5xl flex-wrap items-center justify-center px-4 pb-15 text-center md:px-20 xl:px-0">
         <section className="space-y-16">
           {services(lang).map(({ slug }, index) => (
             <Service
diff --git a/locales/en/ai.json b/locales/en/ai.json
@@ -29,7 +29,7 @@
       }
     },
     "card_1": {
-      "title": "Training, fine-Tuning & prompt Engineering",
+      "title": "Training, fine-tuning & prompt engineering",
       "text": "We tailor the agent's behavior to your domain:",
       "items": {
         "0": "Fine-tune models or use adapters",
@@ -85,7 +85,7 @@
     "desc": "We deliver a working custom AI agent tailored to your domain that adapts to your workflow and grows with your business.",
     "items": {
       "0": "Integration & orchestration",
-      "1": "Training, fine-Tuning & prompt Engineering",
+      "1": "Training, fine-tuning & prompt engineering",
       "2": "Safety, monitoring & guardrails",
       "3": "Deployment & maintenance"
     }
diff --git a/locales/en/ctoaas.json b/locales/en/ctoaas.json
@@ -1,7 +1,7 @@
 {
   "hero": {
     "heading": "CTO-as-a-Service",
-    "desc": "Build Like the Best. Without Hiring a CTO."
+    "desc": "Build like the best. Without hiring a CTO."
   },
   "description": "Finding, hiring, managing, and retaining top software engineers is complex and time-consuming. Let us handle it all for you.",
   "bestFor": ["Non-technical founders", "growth-stage startups"],
diff --git a/locales/en/saas.json b/locales/en/saas.json
@@ -1,7 +1,7 @@
 {
   "hero": {
     "heading": "Software as a Service",
-    "desc": "Own the Product Vision. Let us Build the Engine."
+    "desc": "Own the product vision. Let us build the engine."
   },
   "description": "Deploy and scale software solutions tailored to your enterprise for optimal performance and growth.",
   "bestFor": ["Startups & scale-ups"],
diff --git a/locales/en/tdd.json b/locales/en/tdd.json
@@ -1,7 +1,7 @@
 {
   "hero": {
     "heading": "Tech Due Diligence",
-    "desc": "Identify Risks. Unlock Opportunities. Build with Confidence."
+    "desc": "Identify risks. Unlock opportunities. Build with confidence."
   },
   "description": "Verify and assess your company's ability to execute its roadmap and evaluate its current state.",
   "bestFor": ["Investors", "CTOs", "PE/VC firms"],
@@ -23,7 +23,7 @@
   "what_we_deliver": {
     "desc": "From deep-dive audits to scalable systems, we deliver clarity, speed, and results. Tailored to your growth stage.",
     "card_0": {
-      "title": "Software Delivery Performance",
+      "title": "Software delivery performance",
       "text": "We evaluate how efficiently your team ships software:",
       "items": {
         "0": "Deployment frequency",
@@ -33,7 +33,7 @@
       }
     },
     "card_1": {
-      "title": "Application Architecture & Maintainability",
+      "title": "Application architecture & maintainability",
       "text": "We analyze the current codebase and infrastructure:",
       "items": {
         "0": "Scalability & fault tolerance",
@@ -43,7 +43,7 @@
       }
     },
     "card_2": {
-      "title": "IT Infrastructure Cost & Optimization",
+      "title": "IT infrastructure cost & optimization",
       "text": "We help you answer: Are you overpaying for underused systems?",
       "items": {
         "0": "Cloud usage audit",
@@ -58,19 +58,19 @@
     "desc": "Discover how we turn ideas into impact. Our process is built to be simple, transparent, and focused on results. Every step of the way.",
     "step": {
       "0": {
-        "title": "Discovery & Interviews",
+        "title": "Discovery & interviews",
         "text": "We talk to engineering, product, and business teams to understand goals and context."
       },
       "1": {
-        "title": "Hands-On Audit",
+        "title": "Hands-On audit",
         "text": "We dive into your repositories, CI/CD pipelines, cloud infra, and documentation."
       },
       "2": {
-        "title": "Report & Recommendations",
+        "title": "Report & recommendations",
         "text": "You'll receive a comprehensive report detailing strengths, risks, and actionable next steps. With severity levels and roadmap suggestions."
       },
       "3": {
-        "title": "Post-Audit Implementation Support (Optional)",
+        "title": "Post-Audit implementation support (optional)",
         "text": "Need help fixing what we found? Our engineering teams can jump in and help you close the gaps."
       }
     }
@@ -80,9 +80,9 @@
     "desc": "Everything you need to evaluate, improve, and scale. Delivered in a format that speaks to both business and technical decision-makers.",
     "items": {
       "0": "Executive summary for C-Level & investors",
-      "1": "Technical Audit Report (code quality, architecture, infra)",
-      "2": "KPI Benchmarking & Recommendations",
-      "3": "Action Plan (Quick Wins + Long-Term Strategy)"
+      "1": "Technical audit report (code quality, architecture, infra)",
+      "2": "KPI benchmarking & recommendations",
+      "3": "Action plan (quick wins + long-term strategy)"
     }
   },
 
diff --git a/locales/id/ai.json b/locales/id/ai.json
@@ -29,7 +29,7 @@
       }
     },
     "card_1": {
-      "title": "Pelatihan, fine-Tuning & rekayasa prompt",
+      "title": "Pelatihan, fine-tuning & rekayasa prompt",
       "text": "Kami menyesuaikan perilaku agen sesuai domain Anda:",
       "items": {
         "0": "Fine-tune model atau gunakan adaptor",
@@ -85,7 +85,7 @@
     "desc": "Kami menghadirkan agen AI kustom yang berfungsi dan disesuaikan dengan domain Anda, sistem yang beradaptasi dengan alur kerja serta berkembang bersama bisnis Anda.",
     "items": {
       "0": "Integrasi & orkestrasi",
-      "1": "Pelatihan, fine-Tuning & rekayasa prompt",
+      "1": "Pelatihan, fine-tuning & rekayasa prompt",
       "2": "Keamanan, pemantauan & guardrail",
       "3": "Penerapan & pemeliharaan"
     }
diff --git a/locales/id/ctoaas.json b/locales/id/ctoaas.json
@@ -1,7 +1,7 @@
 {
   "hero": {
     "heading": "CTO-as-a-Service",
-    "desc": "Bangun Seperti Perusahaan Terbaik. Tanpa Perlu Merekrut CTO."
+    "desc": "Bangun seperti perusahaan terbaik. Tanpa perlu merekrut CTO."
   },
   "description": "Mencari, merekrut, mengelola, dan mempertahankan engineer perangkat lunak terbaik adalah proses yang kompleks dan memakan waktu. Serahkan semua itu kepada kami.",
   "bestFor": ["Founder non-teknis", "startup tahap pertumbuhan"],
diff --git a/locales/id/saas.json b/locales/id/saas.json
@@ -1,7 +1,7 @@
 {
   "hero": {
     "heading": "Software sebagai Layanan (SaaS)",
-    "desc": "Miliki Visi Produk. Biarkan Kami yang Bangun Mesinnya."
+    "desc": "Miliki visi produk. Biarkan kami yang bangun mesinnya."
   },
   "description": "Kami membangun dan mengelola solusi perangkat lunak yang disesuaikan dengan kebutuhan perusahaan Anda untuk kinerja dan pertumbuhan optimal.",
   "bestFor": ["Startup & perusahaan tahap ekspansi"],
diff --git a/locales/id/tdd.json b/locales/id/tdd.json
@@ -1,7 +1,7 @@
 {
   "hero": {
     "heading": "Tech Due Diligence",
-    "desc": "Identifikasi Risiko. Temukan Peluang. Bangun dengan Keyakinan."
+    "desc": "Identifikasi risiko. Temukan peluang. Bangun dengan keyakinan."
   },
   "description": "Verifikasi dan nilai kemampuan perusahaan Anda dalam menjalankan roadmap serta mengevaluasi kondisi teknis saat ini.",
   "bestFor": ["Investor", "Direktur teknologi", "perusahaan modal ventura"],
@@ -23,7 +23,7 @@
   "what_we_deliver": {
     "desc": "Mulai dari audit mendalam hingga sistem yang dapat diskalakan, kami memberikan kejelasan, kecepatan, dan hasil. Disesuaikan dengan tahap pertumbuhan Anda.",
     "card_0": {
-      "title": "Performa Pengiriman Perangkat Lunak",
+      "title": "Performa pengiriman perangkat lunak",
       "text": "Kami menilai seberapa efisien tim Anda dalam merilis perangkat lunak:",
       "items": {
         "0": "Frekuensi deployment",
@@ -33,7 +33,7 @@
       }
     },
     "card_1": {
-      "title": "Arsitektur Aplikasi & Kemudahan Pemeliharaan",
+      "title": "Arsitektur aplikasi & kemudahan pemeliharaan",
       "text": "Kami menganalisis kode dan infrastruktur Anda saat ini:",
       "items": {
         "0": "Skalabilitas & toleransi terhadap kegagalan",
@@ -43,7 +43,7 @@
       }
     },
     "card_2": {
-      "title": "Biaya Infrastruktur TI & Optimalisasi",
+      "title": "Biaya infrastruktur TI & optimalisasi",
       "text": "Kami bantu Anda menjawab: Apakah Anda membayar mahal untuk sistem yang jarang digunakan?",
       "items": {
         "0": "Audit penggunaan cloud",
@@ -58,19 +58,19 @@
     "desc": "Lihat bagaimana kami mengubah wawasan menjadi dampak. Proses kami dirancang agar sederhana, transparan, dan fokus pada hasil di setiap langkahnya.",
     "step": {
       "0": {
-        "title": "Discovery & Wawancara",
+        "title": "Discovery & wawancara",
         "text": "Kami berdiskusi dengan tim engineering, produk, dan bisnis untuk memahami tujuan dan konteks."
       },
       "1": {
-        "title": "Audit Mendalam",
+        "title": "Audit mendalam",
         "text": "Kami meninjau repositori, pipeline CI/CD, infrastruktur cloud, dan dokumentasi Anda secara langsung."
       },
       "2": {
-        "title": "Laporan & Rekomendasi",
+        "title": "Laporan & rekomendasi",
         "text": "Anda akan menerima laporan komprehensif yang merinci kekuatan, risiko, dan langkah-langkah yang dapat diambil. Lengkap dengan tingkat keparahan dan saran roadmap."
       },
       "3": {
-        "title": "Dukungan Implementasi Pasca Audit (Opsional)",
+        "title": "Dukungan implementasi pasca audit (opsional)",
         "text": "Butuh bantuan menindaklanjuti hasil audit? Tim engineer kami siap membantu menutup celah yang ditemukan."
       }
     }
@@ -80,9 +80,9 @@
     "desc": "Semua yang Anda butuhkan untuk mengevaluasi, meningkatkan, dan menskalakan. Disajikan dalam format yang mudah dipahami baik oleh pengambil keputusan teknis maupun bisnis.",
     "items": {
       "0": "Ringkasan eksekutif untuk C-Level & investor",
-      "1": "Laporan Audit Teknis (kualitas kode, arsitektur, infrastruktur)",
-      "2": "Benchmark KPI & Rekomendasi",
-      "3": "Rencana Aksi (Quick Wins + Strategi Jangka Panjang)"
+      "1": "Laporan audit teknis (kualitas kode, arsitektur, infrastruktur)",
+      "2": "Benchmark KPI & rekomendasi",
+      "3": "Rencana aksi (quick wins + strategi jangka panjang)"
     }
   },
 

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"hero": {`
`3`	`3`	`"heading": "CTO-as-a-Service",`
`4`		`- "desc": "Build Like the Best. Without Hiring a CTO."`
	`4`	`+ "desc": "Build like the best. Without hiring a CTO."`
`5`	`5`	`},`
`6`	`6`	`"description": "Finding, hiring, managing, and retaining top software engineers is complex and time-consuming. Let us handle it all for you.",`
`7`	`7`	`"bestFor": ["Non-technical founders", "growth-stage startups"],`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"hero": {`
`3`	`3`	`"heading": "Software as a Service",`
`4`		`- "desc": "Own the Product Vision. Let us Build the Engine."`
	`4`	`+ "desc": "Own the product vision. Let us build the engine."`
`5`	`5`	`},`
`6`	`6`	`"description": "Deploy and scale software solutions tailored to your enterprise for optimal performance and growth.",`
`7`	`7`	`"bestFor": ["Startups & scale-ups"],`