Add OneAI Support Section and Localization Enhancements

- Introduced a new support section for OneAI, highlighting local engineers and their availability during Indonesian office hours.
- Implemented the `getOneaiSupportPoints` function to load localized support proof points for both English and Indonesian.
- Created corresponding test cases to validate the functionality of the support points retrieval.
- Updated localization files to include support section content, ensuring accurate representation of features in both languages.
- Added a support image to enhance the visual appeal of the section.

These changes aim to improve user engagement by providing clear and localized support information, emphasizing the benefits of local engineering support.

Author: nicnocquee

app/[lang]/(hyperjump)/oneai/get-oneai-support-points.test.ts

@@ -0,0 +1,68 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  getOneaiSupportPoints,
+  ONEAI_SUPPORT_IMAGE_PATH
+} from "./get-oneai-support-points";
+
+describe("ONEAI_SUPPORT_IMAGE_PATH", () => {
+  it("points to the public support photo", () => {
+    // Act
+    const path = ONEAI_SUPPORT_IMAGE_PATH;
+
+    // Assert
+    expect(path).toBe("/images/oneai/support-engineers.jpg");
+  });
+});
+
+describe("getOneaiSupportPoints", () => {
+  it("returns three English proof points", () => {
+    // Act
+    const points = getOneaiSupportPoints({ lang: "en" });
+
+    // Assert
+    expect(points).toHaveLength(3);
+    expect(points[0]).toEqual({
+      title: "Same timezone, same workday",
+      text: "Replies during Indonesian office hours, not after your team has gone home."
+    });
+    expect(points[1]?.title).toContain("Bahasa Indonesia");
+    expect(points[2]?.title).toContain("On-site");
+  });
+
+  it("returns three Indonesian proof points", () => {
+    // Act
+    const points = getOneaiSupportPoints({ lang: "id" });
+
+    // Assert
+    expect(points).toHaveLength(3);
+    expect(points[0]?.title).toContain("Zona waktu");
+    expect(points[1]?.title).toContain("Bahasa Indonesia");
+    expect(points[2]?.title).toContain("kantor");
+  });
+
+  it("uses injected point loaders when provided", () => {
+    // Act
+    const points = getOneaiSupportPoints({
+      lang: "en",
+      pointLoaders: [
+        { title: () => "Title A", text: () => "Text A" },
+        { title: () => "Title B", text: () => "Text B" }
+      ]
+    });
+
+    // Assert
+    expect(points).toEqual([
+      { title: "Title A", text: "Text A" },
+      { title: "Title B", text: "Text B" }
+    ]);
+  });
+
+  it("returns an empty list when no loaders are provided", () => {
+    // Act
+    const points = getOneaiSupportPoints({ lang: "en", pointLoaders: [] });
+
+    // Assert
+    expect(points).toEqual([]);
+  });
+});

app/[lang]/(hyperjump)/oneai/get-oneai-support-points.ts

@@ -0,0 +1,50 @@
+import type { SupportedLanguage } from "@/locales/.generated/types";
+import {
+  oneaiSupportPoints0Text,
+  oneaiSupportPoints0Title,
+  oneaiSupportPoints1Text,
+  oneaiSupportPoints1Title,
+  oneaiSupportPoints2Text,
+  oneaiSupportPoints2Title
+} from "@/locales/.generated/strings";
+
+/** Public path to the full-bleed support section photo. */
+export const ONEAI_SUPPORT_IMAGE_PATH = "/images/oneai/support-engineers.jpg";
+
+export type OneaiSupportPoint = {
+  title: string;
+  text: string;
+};
+
+type PointLoader = {
+  title: (lang: SupportedLanguage) => string;
+  text: (lang: SupportedLanguage) => string;
+};
+
+export type GetOneaiSupportPointsOptions = {
+  lang: SupportedLanguage;
+  /** Point loaders for tests */
+  pointLoaders?: PointLoader[];
+};
+
+const DEFAULT_POINT_LOADERS: PointLoader[] = [
+  { title: oneaiSupportPoints0Title, text: oneaiSupportPoints0Text },
+  { title: oneaiSupportPoints1Title, text: oneaiSupportPoints1Text },
+  { title: oneaiSupportPoints2Title, text: oneaiSupportPoints2Text }
+];
+
+/**
+ * Loads localized support proof points for the OneAI landing page.
+ *
+ * @param options - Locale and optional point loaders for DI
+ * @returns Ordered title and text pairs shown over the support photo
+ */
+export function getOneaiSupportPoints({
+  lang,
+  pointLoaders = DEFAULT_POINT_LOADERS
+}: GetOneaiSupportPointsOptions): OneaiSupportPoint[] {
+  return pointLoaders.map(({ text, title }) => ({
+    title: title(lang),
+    text: text(lang)
+  }));
+}

app/[lang]/(hyperjump)/oneai/oneai-support-section.tsx

@@ -0,0 +1,93 @@
+import Image from "next/image";
+import Link from "next/link";
+import { MailIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import type { SupportedLanguage } from "@/locales/.generated/types";
+import {
+  oneaiSupportCta,
+  oneaiSupportEyebrow,
+  oneaiSupportHeading,
+  oneaiSupportImageAlt,
+  oneaiSupportLede
+} from "@/locales/.generated/strings";
+
+import { SectionReveal } from "../components/motion-wrappers";
+import {
+  getOneaiSupportPoints,
+  ONEAI_SUPPORT_IMAGE_PATH,
+  type OneaiSupportPoint
+} from "./get-oneai-support-points";
+
+type OneaiSupportSectionProps = {
+  lang: SupportedLanguage;
+  mailtoHref: string;
+  /** Support points loader for tests */
+  getPoints?: (options: { lang: SupportedLanguage }) => OneaiSupportPoint[];
+  /** Photo path for tests */
+  imagePath?: string;
+};
+
+/**
+ * Full-bleed support section contrasting local Hyperjump engineers with overseas vendor queues.
+ *
+ * @param props - Locale, mailto CTA, and optional loaders for DI
+ */
+export function OneaiSupportSection({
+  lang,
+  mailtoHref,
+  getPoints = getOneaiSupportPoints,
+  imagePath = ONEAI_SUPPORT_IMAGE_PATH
+}: OneaiSupportSectionProps) {
+  const points = getPoints({ lang });
+
+  return (
+    <section
+      id="support"
+      data-testid="oneai-support-section"
+      className="relative min-h-144 w-full overflow-hidden md:min-h-168">
+      <Image
+        src={imagePath}
+        alt={oneaiSupportImageAlt(lang)}
+        fill
+        className="object-cover object-[72%_center]"
+        sizes="100vw"
+      />
+      <div className="absolute inset-0 bg-linear-to-r from-[#020F15]/94 via-[#020F15]/78 to-[#020F15]/40 md:via-[#020F15]/72 md:to-[#020F15]/22" />
+
+      <div className="relative z-10 mx-auto flex min-h-144 max-w-6xl items-center px-4 py-16 md:min-h-168 md:px-20 xl:px-0">
+        <SectionReveal className="max-w-xl">
+          <p className="mb-4 text-xs font-bold tracking-[0.16em] text-yellow-300 uppercase">
+            {oneaiSupportEyebrow(lang)}
+          </p>
+          <h2
+            className="mb-5 text-3xl font-semibold tracking-tight text-white md:text-4xl lg:text-[2.75rem] lg:leading-tight"
+            data-testid="oneai-support-heading">
+            {oneaiSupportHeading(lang)}
+          </h2>
+          <p className="mb-8 text-base leading-relaxed text-white/80 md:text-lg">
+            {oneaiSupportLede(lang)}
+          </p>
+          <ul className="mb-8 space-y-4">
+            {points.map(({ text, title }) => (
+              <li key={title} className="border-l-2 border-yellow-300/70 pl-4">
+                <p className="text-sm font-semibold text-white">{title}</p>
+                <p className="mt-1 text-sm leading-relaxed text-white/70">
+                  {text}
+                </p>
+              </li>
+            ))}
+          </ul>
+          <Button
+            asChild
+            className="bg-hyperjump-blue hover:bg-hyperjump-blue/90 h-12 rounded-full px-8 text-base font-semibold">
+            <Link href={mailtoHref} data-testid="oneai-support-cta">
+              <MailIcon className="mr-2 h-4 w-4" aria-hidden />
+              {oneaiSupportCta(lang)}
+            </Link>
+          </Button>
+        </SectionReveal>
+      </div>
+    </section>
+  );
+}

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

@@ -90,6 +90,7 @@ import {
 import { OneaiComparisonSection } from "./oneai-comparison-section";
 import { OneaiHeroVisual } from "./oneai-hero-visual";
 import { OneaiStickyCta } from "./oneai-sticky-cta";
+import { OneaiSupportSection } from "./oneai-support-section";
 
 const { url } = data;
 const OG_IMAGE = `${url}${ONEAI_OG_IMAGE_PATH}`;
@@ -401,6 +402,8 @@ export default async function OneaiPage({ params }: OneaiPageProps) {
 
       <OneaiComparisonSection lang={lang} />
 
+      <OneaiSupportSection lang={lang} mailtoHref={mailtoHref} />
+
       <section
         id="faqs"
         data-testid="oneai-faq-section"

e2e/oneai.spec.ts

@@ -7,6 +7,7 @@ import {
   oneaiDocxDownloadCta,
   oneaiPdfDownloadCta,
   oneaiHeroHeading,
+  oneaiSupportHeading,
   oneaiMailtoSubject,
   oneaiMetaDescription,
   oneaiMetaTitle,
@@ -101,6 +102,14 @@ for (const locale of supportedLanguages) {
       await expect(docxLink).toHaveText(oneaiDocxDownloadCta(locale));
     });
 
+    test("support section highlights local engineers", async ({ page }) => {
+      await expect(page.getByTestId("oneai-support-section")).toBeVisible();
+      await expect(page.getByTestId("oneai-support-heading")).toHaveText(
+        oneaiSupportHeading(locale)
+      );
+      await expect(page.getByTestId("oneai-support-cta")).toBeVisible();
+    });
+
     test("faq section is visible", async ({ page }) => {
       await expect(page.getByTestId("oneai-faq-section")).toBeVisible();
       await expect(page.getByTestId("oneai-faq-accordion")).toBeVisible();

locales/en/oneai.json

@@ -189,6 +189,27 @@
       }
     }
   },
+  "support": {
+    "eyebrow": "Support in Indonesia",
+    "heading": "If your company is in Indonesia, we are already next door",
+    "lede": "You get engineers in the same timezone, who speak your language, and can sit with you in the office. Questions get answered during your workday: fast, direct, and easy. Support from companies like OpenAI will never feel like that.",
+    "points": {
+      "0": {
+        "title": "Same timezone, same workday",
+        "text": "Replies during Indonesian office hours, not after your team has gone home."
+      },
+      "1": {
+        "title": "Bahasa Indonesia, no translation lag",
+        "text": "Talk to engineers who already understand your stack, your constraints, and your language."
+      },
+      "2": {
+        "title": "On-site when it matters",
+        "text": "When a rollout needs someone in the room, we can come to you. A global ticket portal cannot."
+      }
+    },
+    "cta": "Talk to the Jakarta team",
+    "image_alt": "Hyperjump engineers collaborating in a Jakarta office"
+  },
   "pricing": {
     "label": "Plan · up to 40 users",
     "price": "Rp12.400.000",

locales/id/oneai.json

@@ -189,6 +189,27 @@
       }
     }
   },
+  "support": {
+    "eyebrow": "Support di Indonesia",
+    "heading": "Cepat dan gampang, karena kami di Indonesia juga",
+    "lede": "Kalau ada yang macet, Anda tidak antre tiket ke San Francisco. Engineer Hyperjump ada di zona waktu Anda, bicara bahasa Anda, dan bisa datang ke kantor Anda. Support dari perusahaan seperti OpenAI tidak akan seperti itu.",
+    "points": {
+      "0": {
+        "title": "Zona waktu yang sama",
+        "text": "Dibalas di jam kerja Indonesia, bukan setelah tim Anda pulang."
+      },
+      "1": {
+        "title": "Bahasa Indonesia, tanpa bolak-balik",
+        "text": "Bicara langsung dengan engineer yang sudah paham stack, kendala, dan bahasa Anda."
+      },
+      "2": {
+        "title": "Datang ke kantor kalau perlu",
+        "text": "Kalau rollout butuh orang di ruangan, kami bisa datang. Portal tiket global tidak bisa."
+      }
+    },
+    "cta": "Ngobrol dengan tim Jakarta",
+    "image_alt": "Engineer Hyperjump sedang berkolaborasi di kantor Jakarta"
+  },
   "pricing": {
     "label": "Paket harga · hingga 40 pengguna",
     "price": "Rp12.400.000",