Refactor: Improve hero page consistency (#132)

* chore: improve capitalization consistency

* refactor: improve hero consistency

* fix: type error

* fix: broken e2e test

Author: haricnugraha

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

@@ -1,3 +1,9 @@
+import Link from "next/link";
+import { Metadata } from "next";
+
+import { Hero } from "@/app/components/hero";
+import { Button } from "@/components/ui/button";
+import { dynamicOpengraph } from "@/lib/default-metadata";
 import {
   supportedLanguages,
   type SupportedLanguage
@@ -8,11 +14,8 @@ import {
   caseStudyHeroDesc,
   caseStudyHeroHeading
 } from "@/locales/.generated/server";
+
 import { getCaseStudies } from "./data";
-import { Button } from "@/components/ui/button";
-import Link from "next/link";
-import { Metadata } from "next";
-import { dynamicOpengraph } from "@/lib/default-metadata";
 
 export const generateStaticParams = async () => {
   return supportedLanguages.map((lang) => ({ lang }));
@@ -50,8 +53,11 @@ export default async function CaseStudiesPage({ params }: CaseStudyProps) {
 
   return (
     <main className="bg-white">
-      <Hero lang={lang} />
-      <div className="xxl:max-w-7xl mx-auto flex w-full max-w-6xl flex-wrap items-center justify-center px-4 pb-6 text-center md:px-20 xl:px-0">
+      <Hero
+        title={caseStudyHeroHeading(lang)}
+        subtitle={caseStudyHeroDesc(lang)}
+      />
+      <div className="xxl:max-w-7xl mx-auto flex w-full max-w-6xl flex-wrap items-center justify-center px-4 py-6 text-center md:px-20 xl:px-0">
         <h3 className="text-hyperjump-black w-72 text-[28px] font-medium md:w-full md:text-[40px]">
           {caseStudyExplore(lang)}
         </h3>
@@ -61,26 +67,6 @@ export default async function CaseStudiesPage({ params }: CaseStudyProps) {
   );
 }
 
-function Hero({ lang }: { lang: SupportedLanguage }) {
-  return (
-    <section
-      id="hero"
-      className="bg-services-hero text-hyperjump-black relative h-[451px] w-full px-4 text-center">
-      <div className="mx-auto flex h-full max-w-3xl flex-col items-center justify-center pt-12">
-        <div
-          className="text-hyperjump-black mb-4 text-3xl font-medium sm:text-4xl md:text-[40px]"
-          dangerouslySetInnerHTML={{
-            __html: caseStudyHeroHeading(lang)
-          }}
-        />
-        <p className="text-hyperjump-gray text-base sm:text-lg">
-          {caseStudyHeroDesc(lang)}
-        </p>
-      </div>
-    </section>
-  );
-}
-
 function CaseStudies({ lang }: { lang: SupportedLanguage }) {
   return (
     <section className="bg-white pt-5 pb-10">

app/[lang]/(hyperjump)/products/page.tsx

@@ -1,3 +1,8 @@
+import type { Metadata } from "next";
+
+import GridItemsContainer, { GridItems } from "@/app/components/grid-items";
+import { Hero } from "@/app/components/hero";
+import { dynamicOpengraph } from "@/lib/default-metadata";
 import {
   supportedLanguages,
   type SupportedLanguage
@@ -6,26 +11,24 @@ import {
   productsHeroDesc,
   productsHeroHeading
 } from "@/locales/.generated/server";
-import { Metadata } from "next";
-import { dynamicOpengraph } from "@/lib/default-metadata";
-import GridItemsContainer, { GridItems } from "@/app/components/grid-items";
+
 import { getCommercialProduct, getOpenSource } from "./data";
 
 export const generateStaticParams = async () => {
   return supportedLanguages.map((lang) => ({ lang }));
 };
 
-type productsProps = {
+type ProductsProps = {
   params: Promise<{ lang: SupportedLanguage }>;
 };
 
 export async function generateMetadata({
   params
-}: productsProps): Promise<Metadata> {
+}: ProductsProps): Promise<Metadata> {
   const { lang } = await params;
 
   const meta = {
-    title: `Our Products - ${productsHeroHeading(lang)}`,
+    title: productsHeroHeading(lang),
     description: productsHeroDesc(lang),
     alternates: {
       canonical: `https://hyperjump.tech/${lang}/products`,
@@ -42,66 +45,25 @@ export async function generateMetadata({
   return dynamicOpengraph(meta);
 }
 
-export default async function productsPage({ params }: productsProps) {
+export default async function productsPage({ params }: ProductsProps) {
   const { lang } = await params;
 
   return (
     <main className="bg-white">
-      <Hero lang={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 pb-6 md:px-20 xl:px-0">
-        <ProductCommercial lang={lang} />
-        <OpenSourceProducts lang={lang} />
+      <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>
     </main>
   );
 }
-
-function Hero({ lang }: { lang: SupportedLanguage }) {
-  return (
-    <section
-      id="hero"
-      className="bg-services-hero text-hyperjump-black relative h-[415px] w-full px-4 text-center">
-      <div className="mx-auto flex h-full max-w-3xl flex-col items-center justify-center pt-12">
-        <h1
-          className="text-hyperjump-black mb-4 text-3xl font-medium sm:text-4xl md:text-[40px]"
-          dangerouslySetInnerHTML={{
-            __html: productsHeroHeading(lang)
-          }}
-        />
-        <p className="text-hyperjump-gray text-base sm:text-lg">
-          {productsHeroDesc(lang)}
-        </p>
-      </div>
-    </section>
-  );
-}
-
-function ProductCommercial({ lang }: { lang: SupportedLanguage }) {
-  const projects = getCommercialProduct(lang);
-
-  return (
-    <GridItemsContainer id="commercial-product">
-      <GridItems
-        items={projects}
-        columns={{ base: 1, sm: 2, lg: 3 }}
-        cardClassName="rounded"
-        lang={lang}
-      />
-    </GridItemsContainer>
-  );
-}
-
-function OpenSourceProducts({ lang }: { lang: SupportedLanguage }) {
-  const projects = getOpenSource(lang);
-
-  return (
-    <GridItemsContainer id="open-source">
-      <GridItems
-        items={projects}
-        columns={{ base: 1, sm: 2, lg: 3 }}
-        cardClassName="rounded"
-        lang={lang}
-      />
-    </GridItemsContainer>
-  );
-}

app/[lang]/(hyperjump)/services/page.tsx

@@ -1,8 +1,11 @@
+import type { Metadata } from "next";
 import Link from "next/link";
 import Image from "next/image";
 
+import { Hero } from "@/app/components/hero";
 import { Button } from "@/components/ui/button";
 import data from "@/data.json";
+import { dynamicOpengraph } from "@/lib/default-metadata";
 import { cn } from "@/lib/utils";
 import {
   supportedLanguages,
@@ -19,8 +22,6 @@ import {
 
 import { Clients } from "../components/clients";
 import { serviceBySlug, services, ServiceSlug } from "../data";
-import { Metadata } from "next";
-import { dynamicOpengraph } from "@/lib/default-metadata";
 
 export async function generateMetadata(props: {
   params: Promise<{ lang: SupportedLanguage }>;
@@ -58,7 +59,10 @@ export default async function Services({ params }: ServicesProps) {
 
   return (
     <main className="bg-white">
-      <Hero lang={lang} />
+      <Hero
+        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">
         <section className="space-y-16">
           {services(lang).map(({ slug }, index) => (
@@ -112,7 +116,7 @@ function Service({ lang, isReverseImagePosition = false, slug }: ServiceProps) {
   return (
     <div
       className={cn(
-        "flex flex-col items-center gap-6 border-b border-gray-200 pb-7 md:flex-row md:pb-14",
+        "flex flex-col items-start gap-6 border-b border-gray-200 pb-7 md:flex-row md:pb-14",
         isReverseImagePosition && "md:flex-row-reverse"
       )}>
       <div className="relative w-full xl:w-1/2">
@@ -174,18 +178,3 @@ function Service({ lang, isReverseImagePosition = false, slug }: ServiceProps) {
     </div>
   );
 }
-
-function Hero({ lang }: { lang: SupportedLanguage }) {
-  return (
-    <section
-      id="hero"
-      className="bg-services-hero text-hyperjump-black relative h-[415px] w-full px-4 text-center">
-      <div className="mx-auto flex h-full max-w-3xl flex-col items-center justify-center pt-16">
-        <h1 className="text-hyperjump-black mb-4 text-4xl font-medium md:text-[40px]">
-          {servicesHeroHeading(lang)}
-        </h1>
-        <p className="text-hyperjump-gray text-lg">{servicesHeroDesc(lang)}</p>
-      </div>
-    </section>
-  );
-}

app/components/hero.tsx

@@ -0,0 +1,19 @@
+type HeroProps = { subtitle: string; title: string };
+
+export function Hero({ subtitle, title }: HeroProps) {
+  return (
+    <section
+      id="hero"
+      className="bg-services-hero text-hyperjump-black relative w-full px-4 py-10 text-center md:py-16">
+      <div className="mx-auto flex h-full max-w-3xl flex-col items-center justify-center pt-12">
+        <div
+          className="text-hyperjump-black mb-4 text-3xl font-medium sm:text-4xl md:text-[40px]"
+          dangerouslySetInnerHTML={{
+            __html: title
+          }}
+        />
+        <p className="text-hyperjump-gray text-base sm:text-lg">{subtitle}</p>
+      </div>
+    </section>
+  );
+}

app/llms.txt/route.ts

@@ -30,8 +30,8 @@ We offer expert technology solutions to help businesses scale, enhance efficienc
 
 Discover how we successfully transform challenges into opportunities with real-world solutions that drive lasting impact and business growth.
 
-- [Transforming a Fisheries Tech Team into a Scalable Product Engine](https://hyperjump.tech/case-studies/erp-fisheries): 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.
-- [Elevating a Media-Tech Engineering Team from Feature Factory to Innovation Powerhouse](https://hyperjump.tech/case-studies/ctoaas-media): 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.
+- [Transforming a fisheries tech team into a scalable product engine](https://hyperjump.tech/case-studies/erp-fisheries): 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.
+- [Elevating a media-tech engineering team from feature factory to innovation powerhouse](https://hyperjump.tech/case-studies/ctoaas-media): 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.
 
 ## Open source product
 

e2e/homepage.spec.ts

@@ -114,8 +114,8 @@ test.describe("Homepage", () => {
     await expect(caseHeading).toBeVisible();
     await expect(page.getByText("Discover how we successfully")).toBeVisible();
 
-    await expect(page.getByText("Transforming a Fisheries Tech")).toBeVisible();
-    await expect(page.getByText("Elevating a Media-Tech")).toBeVisible();
+    await expect(page.getByText("Transforming a fisheries tech")).toBeVisible();
+    await expect(page.getByText("Elevating a media-tech")).toBeVisible();
   });
 
   test("FAQ Section: should toggle FAQ items correctly on click", async ({

locales/en/ai.json

@@ -4,7 +4,7 @@
     "desc": "Your vision. Our AI solutions. Unstoppable results"
   },
   "description": "Design, develop, and deploy purpose-built AI agents that save time, cut costs, and scale operations. Without technical overwhelm.",
-  "bestFor": ["Enterprises", "Startups", "Process automation"],
+  "bestFor": ["Enterprises", "startups", "process automation"],
   "what_is": {
     "desc": "Build smart, autonomous agents tailored to your domain — without hiring a full AI team.",
     "highlight": "Not every business needs to build full AI infrastructure from scratch. With <span class=\"font-bold\">Inference AI</span>, you gain access to design, build, and maintain AI agents that reason, act, and adapt — all without needing an in-house AI team."
@@ -20,7 +20,7 @@
   "what_we_deliver": {
     "desc": "We partner with your team to automate and build AI agents that scale with your business. From planning to post-implementation, we deliver hands-on support every step of the way.",
     "card_0": {
-      "title": "Integration & Orchestration",
+      "title": "Integration & orchestration",
       "text": "Plug the agent into your systems:",
       "items": {
         "0": "Connect to APIs, databases, internal tools",
@@ -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",
@@ -38,7 +38,7 @@
       }
     },
     "card_2": {
-      "title": "Safety, Monitoring & Guardrails",
+      "title": "Safety, monitoring & guardrails",
       "text": "Ensure reliable, safe operation:",
       "items": {
         "0": "Input validation, fallback logic, human-in-the-loop",
@@ -47,7 +47,7 @@
       }
     },
     "card_3": {
-      "title": "Deployment & Operations",
+      "title": "Deployment & operations",
       "text": "We make sure your ERP delivers value:",
       "items": {
         "0": "Stabilization support",
@@ -84,10 +84,10 @@
   "what_you_get": {
     "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",
-      "2": "Safety, Monitoring & Guardrails",
-      "3": "Deployment & Maintenance"
+      "0": "Integration & orchestration",
+      "1": "Training, fine-Tuning & prompt Engineering",
+      "2": "Safety, monitoring & guardrails",
+      "3": "Deployment & maintenance"
     }
   },
   "why_us": {

locales/en/case-study.json

@@ -1,24 +1,24 @@
 {
   "hero": {
-    "heading": "From Chaos to Clarity: Real Stories of <span class=\"text-[#3276F5]\">Engineering Transformation</span>",
+    "heading": "From chaos to clarity: real stories of <span class=\"text-[#3276F5]\">engineering transformation</span>",
     "desc": "At Hyperjump, we don't just improve engineering teams. We help reshape how tech organizations think, operate, and grow. Explore how we've partnered with fast-growing companies to unlock their full potential through hands-on leadership, scalable systems, and deep technical coaching."
   },
-  "title": "From Chaos to Clarity: Real Stories of Engineering Transformation",
+  "title": "From chaos to clarity: real stories of engineering transformation",
   "cta": {
     "heading": "Not sure where to start?",
     "desc": "Let's talk about your tech goals and point you in the right direction.",
     "label": "Talk to us"
   },
-  "explore": "Explore Our Case Studies",
-  "button": "Read Case Study",
-  "more": "More Case Studies",
+  "explore": "Explore our case studies",
+  "button": "Read case study",
+  "more": "More case studies",
   "erp_fisheries": {
-    "title": "Transforming a Fisheries Tech Team into a Scalable Product Engine",
+    "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"
   },
   "ctoaas_media": {
-    "title": "Elevating a Media-Tech Engineering Team from Feature Factory to Innovation Powerhouse",
+    "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"
   }