Update Konten & bahasa

README.md

@@ -134,7 +134,9 @@ resources/js/
 └── pages/site/               # Halaman, tinggal menyusun section + data
 ```
 
-- **Ubah kontak, alamat, atau daftar jasa** cukup di `resources/js/data/site.ts`, otomatis berlaku di semua halaman.
+- **Ubah kontak atau alamat kantor** cukup di `resources/js/data/site.ts`, otomatis berlaku di semua halaman.
+- **Teks website (Bahasa Indonesia & Inggris)** ada di `resources/js/content/`: satu file per halaman (`home.ts`, `about.ts`, ...) plus `common.ts` untuk navbar, footer, form, dan 8 jasa. Setiap file berisi objek `id` dan `en`; TypeScript akan error bila versi `en` tidak lengkap. Gunakan `**teks**` untuk penekanan dan `==teks==` untuk highlight merah di judul.
+- **Bahasa** dipilih lewat tombol ID/EN di navbar dan disimpan di cookie `locale` (default `id`), dibaca oleh middleware `app/Http/Middleware/HandleLocale.php`.
 - **Warna tema (light & dark)** ada di `resources/css/app.css`, pada blok `.probindo-site` (light) dan `.dark .probindo-site` (dark).
 
 ## Perintah yang Sering Dipakai

app/Http/Middleware/HandleInertiaRequests.php

@@ -38,6 +38,7 @@ class HandleInertiaRequests extends Middleware
         return [
             ...parent::share($request),
             'name' => config('app.name'),
+            'locale' => app()->getLocale(),
             'auth' => [
                 'user' => $request->user(),
             ],

app/Http/Middleware/HandleLocale.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\App;
+use Symfony\Component\HttpFoundation\Response;
+
+class HandleLocale
+{
+    /**
+     * Languages the public site is written in; the first one is the default.
+     *
+     * @var list<string>
+     */
+    public const SUPPORTED = ['id', 'en'];
+
+    /**
+     * Apply the visitor's language choice, stored by the site's language
+     * toggle in the `locale` cookie.
+     *
+     * @param  Closure(Request): (Response)  $next
+     */
+    public function handle(Request $request, Closure $next): Response
+    {
+        $locale = $request->cookie('locale');
+
+        App::setLocale(in_array($locale, self::SUPPORTED, true) ? $locale : self::SUPPORTED[0]);
+
+        return $next($request);
+    }
+}

bootstrap/app.php

@@ -2,6 +2,7 @@
 
 use App\Http\Middleware\HandleAppearance;
 use App\Http\Middleware\HandleInertiaRequests;
+use App\Http\Middleware\HandleLocale;
 use Illuminate\Foundation\Application;
 use Illuminate\Foundation\Configuration\Exceptions;
 use Illuminate\Foundation\Configuration\Middleware;
@@ -15,10 +16,11 @@ return Application::configure(basePath: dirname(__DIR__))
         health: '/up',
     )
     ->withMiddleware(function (Middleware $middleware): void {
-        $middleware->encryptCookies(except: ['appearance', 'sidebar_state']);
+        $middleware->encryptCookies(except: ['appearance', 'locale', 'sidebar_state']);
 
         $middleware->web(append: [
             HandleAppearance::class,
+            HandleLocale::class,
             HandleInertiaRequests::class,
             AddLinkHeadersForPreloadedAssets::class,
         ]);

resources/js/components/site/brand.tsx

@@ -1,13 +1,17 @@
 import { Link } from '@inertiajs/react';
+import { common } from '@/content/common';
 import { company } from '@/data/site';
+import { useContent } from '@/hooks/use-locale';
 import { home } from '@/routes';
 
 /** Logo mark with company name, linking back to the home page. */
 export default function Brand() {
+    const t = useContent(common);
+
     return (
         <Link
             href={home()}
-            title="Kembali ke Beranda"
+            title={t.header.backHome}
             className="group flex items-center gap-3.5"
         >
             <div className="border-outline-variant/50 group-hover:border-primary/60 dark:bg-surface-container-low flex items-center justify-center rounded-xl border bg-white p-1.5 transition-all duration-300 group-hover:shadow-[0_0_20px_rgba(163,29,36,0.35)]">
@@ -24,7 +28,7 @@ export default function Brand() {
                     </span>
                     <span className="bg-primary h-1.5 w-1.5 animate-pulse rounded-full" />
                 </div>
-                <span className="text-on-surface-variant font-mono text-[11px] font-medium">
+                <span className="text-on-surface-variant hidden font-mono text-[11px] font-medium sm:block">
                     {company.name}
                 </span>
             </div>

resources/js/components/site/consultation-form.tsx

@@ -7,7 +7,8 @@ import {
     SelectInput,
     TextInput,
 } from '@/components/site/form-field';
-import { serviceOptions } from '@/data/site';
+import { common, serviceOptions } from '@/content/common';
+import { useContent } from '@/hooks/use-locale';
 
 /**
  * Compact consultation request form.
@@ -16,6 +17,7 @@ import { serviceOptions } from '@/data/site';
  * endpoint before going live.
  */
 export default function ConsultationForm({ idPrefix }: { idPrefix: string }) {
+    const t = useContent(common);
     const [submitted, setSubmitted] = useState(false);
 
     const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
@@ -27,49 +29,44 @@ export default function ConsultationForm({ idPrefix }: { idPrefix: string }) {
         <div className="border-outline-variant/60 bg-surface-container-high flex flex-col gap-4 rounded-2xl border p-6 shadow-xl lg:p-7">
             <div className="flex flex-col">
                 <span className="font-display text-on-surface text-base font-bold">
-                    Jadwalkan Konsultasi IT
+                    {t.form.title}
                 </span>
                 <span className="text-on-surface-variant text-xs">
-                    Konfirmasi langsung oleh Lead Architect PAJ dalam 2 jam
+                    {t.form.subtitle}
-                    kerja.
                 </span>
             </div>
 
             {submitted ? (
                 <FormSuccess
-                    title="Permintaan Terkirim!"
+                    title={t.form.successTitle}
-                    message="Tim Lead Consultant PT Probindo Artika Jaya akan segera menghubungi kontak Anda untuk konfirmasi jadwal sesi konsultasi."
+                    message={t.form.successMessage}
                 />
             ) : (
                 <form className="flex flex-col gap-3" onSubmit={handleSubmit}>
-                    <Field
+                    <Field id={`${idPrefix}-name`} label={t.form.name} required>
-                        id={`${idPrefix}-name`}
-                        label="Nama Lengkap & Perusahaan"
-                        required
-                    >
                         <TextInput
                             id={`${idPrefix}-name`}
                             name="name"
-                            placeholder="Nama Anda (PT ...)"
+                            placeholder={t.form.namePlaceholder}
                             required
                         />
                     </Field>
                     <Field
                         id={`${idPrefix}-email`}
-                        label="Email Perusahaan / Kantor"
+                        label={t.form.email}
                         required
                     >
                         <TextInput
                             id={`${idPrefix}-email`}
                             name="email"
                             type="email"
-                            placeholder="nama@perusahaan.co.id"
+                            placeholder={t.form.emailPlaceholder}
                             required
                         />
                     </Field>
                     <Field
                         id={`${idPrefix}-phone`}
-                        label="No. WhatsApp / Telepon"
+                        label={t.form.phone}
                         required
                     >
                         <TextInput
@@ -80,14 +77,11 @@ export default function ConsultationForm({ idPrefix }: { idPrefix: string }) {
                             required
                         />
                     </Field>
-                    <Field
+                    <Field id={`${idPrefix}-service`} label={t.form.service}>
-                        id={`${idPrefix}-service`}
-                        label="Layanan Yang Dibutuhkan"
-                    >
                         <SelectInput
                             id={`${idPrefix}-service`}
                             name="service"
-                            options={serviceOptions}
+                            options={serviceOptions(t)}
                         />
                     </Field>
                     <Button
@@ -96,11 +90,10 @@ export default function ConsultationForm({ idPrefix }: { idPrefix: string }) {
                         icon="send"
                         className="mt-2"
                     >
-                        Kirim Permintaan Konsultasi
+                        {t.form.submit}
                     </Button>
                     <p className="text-on-surface-variant text-center text-[11px]">
-                        Non-Disclosure Agreement (NDA) dapat ditandatangani
+                        {t.form.nda}
-                        sebelum audit teknis.
                     </p>
                 </form>
             )}

resources/js/components/site/language-toggle.tsx

@@ -0,0 +1,43 @@
+import type { Locale } from '@/hooks/use-locale';
+import { useLocale } from '@/hooks/use-locale';
+import { cn } from '@/lib/utils';
+
+const languages: { value: Locale; label: string; name: string }[] = [
+    { value: 'id', label: 'ID', name: 'Bahasa Indonesia' },
+    { value: 'en', label: 'EN', name: 'English' },
+];
+
+/** Two-option switch between Indonesian and English. */
+export default function LanguageToggle({ className }: { className?: string }) {
+    const { locale, setLocale } = useLocale();
+
+    return (
+        <div
+            role="group"
+            aria-label="Bahasa / Language"
+            className={cn(
+                'border-outline-variant/50 bg-surface-container-low inline-flex h-10 items-center gap-0.5 rounded-xl border p-1',
+                className,
+            )}
+        >
+            {languages.map((language) => (
+                <button
+                    key={language.value}
+                    type="button"
+                    lang={language.value}
+                    title={language.name}
+                    aria-pressed={locale === language.value}
+                    onClick={() => setLocale(language.value)}
+                    className={cn(
+                        'h-full cursor-pointer rounded-lg px-2.5 font-mono text-xs font-bold transition-colors',
+                        locale === language.value
+                            ? 'bg-primary-container text-white'
+                            : 'text-on-surface-variant hover:text-on-surface',
+                    )}
+                >
+                    {language.label}
+                </button>
+            ))}
+        </div>
+    );
+}

resources/js/components/site/rich-text.tsx

@@ -0,0 +1,31 @@
+import { Fragment } from 'react';
+import { Highlight, Strong } from '@/components/site/page-hero';
+
+/**
+ * Renders content strings with light inline markup, so translations can
+ * keep emphasis without splitting sentences into pieces:
+ *
+ * - `**text**` → emphasized text
+ * - `==text==` → crimson gradient highlight (hero titles)
+ */
+export default function RichText({ text }: { text: string }) {
+    const parts = text.split(/(\*\*.+?\*\*|==.+?==)/g);
+
+    return (
+        <>
+            {parts.map((part, index) => {
+                if (part.startsWith('**') && part.endsWith('**')) {
+                    return <Strong key={index}>{part.slice(2, -2)}</Strong>;
+                }
+
+                if (part.startsWith('==') && part.endsWith('==')) {
+                    return (
+                        <Highlight key={index}>{part.slice(2, -2)}</Highlight>
+                    );
+                }
+
+                return <Fragment key={index}>{part}</Fragment>;
+            })}
+        </>
+    );
+}

resources/js/components/site/sections/consultation-section.tsx

@@ -3,7 +3,9 @@ import Glow from '@/components/site/glow';
 import Icon from '@/components/site/icon';
 import Pill from '@/components/site/pill';
 import Section from '@/components/site/section';
+import { common } from '@/content/common';
 import { company, offices } from '@/data/site';
+import { useContent } from '@/hooks/use-locale';
 
 type ConsultationSectionProps = {
     id: string;
@@ -17,6 +19,7 @@ export default function ConsultationSection({
     title,
     description,
 }: ConsultationSectionProps) {
+    const t = useContent(common);
     const contacts = offices.map((office) => ({
         icon: office.icon,
         title: office.name,
@@ -24,7 +27,7 @@ export default function ConsultationSection({
             office.building,
             `${office.street}, ${office.area}`,
             office.city,
-            `Telp: ${office.phone.label}`,
+            `${t.consultation.tel}: ${office.phone.label}`,
         ],
     }));
 
@@ -39,7 +42,7 @@ export default function ConsultationSection({
                 <div className="grid grid-cols-1 items-center gap-10 lg:grid-cols-12">
                     <div className="flex flex-col gap-6 lg:col-span-7">
                         <Pill tone="brand" icon="verified_user">
-                            KONSULTASI TEKNIS &amp; AUDIT INFRASTRUKTUR
+                            {t.consultation.badge}
                         </Pill>
                         <div className="flex flex-col gap-3">
                             <h2 className="font-display text-on-surface lg:text-headline-xl text-3xl leading-tight font-extrabold tracking-tight">

resources/js/components/site/sections/service-grid.tsx

@@ -1,5 +1,6 @@
 import FeatureCard from '@/components/site/feature-card';
-import { officialServices } from '@/data/site';
+import { common } from '@/content/common';
+import { useContent } from '@/hooks/use-locale';
 
 type ServiceGridProps = {
     /** `summary` for overviews, `description` for the official wording. */
@@ -8,16 +9,18 @@ type ServiceGridProps = {
 
 /** The eight official PAJ services as a 4-column card grid. */
 export default function ServiceGrid({ detail = 'summary' }: ServiceGridProps) {
+    const t = useContent(common);
+
     return (
         <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-4">
-            {officialServices.map((service, index) => {
+            {t.services.map((service, index) => {
                 const number = String(index + 1).padStart(2, '0');
 
                 return (
                     <FeatureCard
                         key={service.title}
                         icon={service.icon}
-                        tag={`${number} / JASA RESMI`}
+                        tag={`${number} / ${t.serviceTag}`}
                         title={`${index + 1}. ${service.title}`}
                         description={
                             <>

resources/js/components/site/site-footer.tsx

@@ -1,24 +1,11 @@
 import { Link } from '@inertiajs/react';
 import Container from '@/components/site/container';
 import Icon from '@/components/site/icon';
-import {
+import { common } from '@/content/common';
-    company,
+import { company, consultationUrl, officeAddress, offices } from '@/data/site';
-    consultationUrl,
+import { useContent } from '@/hooks/use-locale';
-    officeAddress,
-    offices,
-    officialServices,
-} from '@/data/site';
 import { about, clients, contact, services } from '@/routes';
 
-const companyLinks = [
-    { label: 'Tentang Kami', href: about.url() },
-    { label: 'Visi & Misi Resmi', href: `${about.url()}#visi-misi` },
-    { label: 'Solusi Odoo ERP', href: `${services.url()}#odoo-erp` },
-    { label: 'Daftar Klien Industri', href: clients.url() },
-    { label: 'Permintaan Audit Sistem', href: consultationUrl },
-    { label: 'Lokasi Kantor PAJ', href: `${contact.url()}#lokasi` },
-];
-
 function FooterHeading({ children }: { children: string }) {
     return (
         <span className="text-on-surface font-mono text-xs font-bold tracking-wider uppercase">
@@ -28,6 +15,20 @@ function FooterHeading({ children }: { children: string }) {
 }
 
 export default function SiteFooter() {
+    const t = useContent(common);
+
+    const companyLinks = [
+        { label: t.footer.links.about, href: about.url() },
+        {
+            label: t.footer.links.visionMission,
+            href: `${about.url()}#visi-misi`,
+        },
+        { label: t.footer.links.odoo, href: `${services.url()}#odoo-erp` },
+        { label: t.footer.links.clients, href: clients.url() },
+        { label: t.footer.links.audit, href: consultationUrl },
+        { label: t.footer.links.offices, href: `${contact.url()}#lokasi` },
+    ];
+
     return (
         <footer className="border-outline-variant/40 bg-surface-container-lowest w-full border-t py-16">
             <Container>
@@ -46,7 +47,7 @@ export default function SiteFooter() {
                             </span>
                         </div>
                         <p className="text-on-surface-variant max-w-md text-xs leading-relaxed">
-                            {company.tagline}
+                            {t.footer.tagline}
                         </p>
                         <div className="text-on-surface-variant mt-2 flex flex-col gap-4 text-xs">
                             {offices.map((office) => (
@@ -67,7 +68,7 @@ export default function SiteFooter() {
                                             href={office.phone.href}
                                             className="hover:text-primary font-mono transition-colors"
                                         >
-                                            Tel. {office.phone.label}
+                                            {t.footer.tel} {office.phone.label}
                                         </a>
                                     </div>
                                 </div>
@@ -86,9 +87,11 @@ export default function SiteFooter() {
                     </div>
 
                     <div className="flex flex-col gap-3 lg:col-span-4">
-                        <FooterHeading>8 Jasa Resmi PAJ</FooterHeading>
+                        <FooterHeading>
+                            {t.footer.servicesHeading}
+                        </FooterHeading>
                         <ul className="text-on-surface-variant grid grid-cols-1 gap-2 text-xs sm:grid-cols-2">
-                            {officialServices.map((service, index) => (
+                            {t.services.map((service, index) => (
                                 <li key={service.title}>
                                     <Link
                                         href={`${services.url()}#jasa-resmi`}
@@ -102,7 +105,7 @@ export default function SiteFooter() {
                     </div>
 
                     <div className="flex flex-col gap-3 lg:col-span-3">
-                        <FooterHeading>Informasi &amp; Tautan</FooterHeading>
+                        <FooterHeading>{t.footer.linksHeading}</FooterHeading>
                         <ul className="text-on-surface-variant flex flex-col gap-2 text-xs">
                             {companyLinks.map((link) => (
                                 <li key={link.label}>
@@ -120,15 +123,13 @@ export default function SiteFooter() {
 
                 <div className="text-on-surface-variant flex flex-col items-center justify-between gap-4 pt-8 text-xs md:flex-row">
                     <p>
-                        © {new Date().getFullYear()} {company.name}. Hak Cipta
+                        © {new Date().getFullYear()} {company.name}.{' '}
-                        Dilindungi Undang-Undang.
+                        {t.footer.rights}
                     </p>
                     <div className="flex flex-wrap items-center justify-center gap-x-6 gap-y-1 font-mono text-[11px]">
-                        <span>
+                        <span>Est. {company.established}</span>
-                            {company.notary} ({company.founded})
-                        </span>
                         <span className="text-primary">•</span>
-                        <span>Jakarta Selatan, Indonesia</span>
+                        <span>{t.footer.location}</span>
                     </div>
                 </div>
             </Container>

resources/js/components/site/site-header.tsx

@@ -4,12 +4,16 @@ import Brand from '@/components/site/brand';
 import { ButtonLink } from '@/components/site/button';
 import Container from '@/components/site/container';
 import Icon from '@/components/site/icon';
+import LanguageToggle from '@/components/site/language-toggle';
 import ThemeToggle from '@/components/site/theme-toggle';
+import { common } from '@/content/common';
 import { company, consultationUrl, navigation, offices } from '@/data/site';
 import { useCurrentUrl } from '@/hooks/use-current-url';
+import { useContent } from '@/hooks/use-locale';
 import { cn } from '@/lib/utils';
 
 export default function SiteHeader() {
+    const t = useContent(common);
     const { isCurrentUrl } = useCurrentUrl();
     const [menuOpen, setMenuOpen] = useState(false);
     const closeMenu = () => setMenuOpen(false);
@@ -20,12 +24,12 @@ export default function SiteHeader() {
                 <Brand />
 
                 <nav
-                    aria-label="Navigasi utama"
+                    aria-label={t.header.mainNav}
                     className="hidden items-center gap-8 lg:flex"
                 >
                     {navigation.map((item) => (
                         <Link
-                            key={item.label}
+                            key={item.key}
                             href={item.href}
                             className={cn(
                                 'hover:border-primary hover:text-on-surface border-b-2 pb-1 text-sm font-medium transition-all',
@@ -34,12 +38,12 @@ export default function SiteHeader() {
                                     : 'text-on-surface-variant border-transparent',
                             )}
                         >
-                            {item.label}
+                            {t.nav[item.key]}
                         </Link>
                     ))}
                 </nav>
 
-                <div className="flex items-center gap-3">
+                <div className="flex items-center gap-2 sm:gap-3">
                     <div className="text-on-surface-variant hidden flex-col text-right font-mono text-[11px] 2xl:flex">
                         <a
                             href={offices[0].phone.href}
@@ -58,18 +62,21 @@ export default function SiteHeader() {
                             {company.email.busdev}
                         </a>
                     </div>
+                    <LanguageToggle />
                     <ThemeToggle />
                     <ButtonLink
                         href={consultationUrl}
                         size="sm"
                         icon="support_agent"
-                        className="hidden sm:inline-flex"
+                        className="hidden md:inline-flex"
                     >
-                        Konsultasi IT
+                        {t.header.consult}
                     </ButtonLink>
                     <button
                         type="button"
-                        aria-label={menuOpen ? 'Tutup menu' : 'Buka menu'}
+                        aria-label={
+                            menuOpen ? t.header.closeMenu : t.header.openMenu
+                        }
                         aria-expanded={menuOpen}
                         onClick={() => setMenuOpen((open) => !open)}
                         className="border-outline-variant/50 bg-surface-container-low text-on-surface inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-xl border lg:hidden"
@@ -84,13 +91,13 @@ export default function SiteHeader() {
 
             {menuOpen && (
                 <nav
-                    aria-label="Navigasi utama"
+                    aria-label={t.header.mainNav}
                     className="border-outline-variant/40 bg-surface border-t lg:hidden"
                 >
                     <Container className="flex flex-col gap-1 py-4">
                         {navigation.map((item) => (
                             <Link
-                                key={item.label}
+                                key={item.key}
                                 href={item.href}
                                 onClick={closeMenu}
                                 className={cn(
@@ -100,7 +107,7 @@ export default function SiteHeader() {
                                         : 'text-on-surface-variant hover:bg-surface-container hover:text-on-surface',
                                 )}
                             >
-                                {item.label}
+                                {t.nav[item.key]}
                             </Link>
                         ))}
                         <ButtonLink
@@ -108,9 +115,9 @@ export default function SiteHeader() {
                             size="sm"
                             icon="support_agent"
                             onClick={closeMenu}
-                            className="mt-2 sm:hidden"
+                            className="mt-2 md:hidden"
                         >
-                            Konsultasi IT
+                            {t.header.consult}
                         </ButtonLink>
                     </Container>
                 </nav>

resources/js/components/site/theme-toggle.tsx

@@ -1,12 +1,15 @@
 import Icon from '@/components/site/icon';
+import { common } from '@/content/common';
 import { useAppearance } from '@/hooks/use-appearance';
+import { useContent } from '@/hooks/use-locale';
 import { cn } from '@/lib/utils';
 
 /** Switches the whole app between light and dark mode. */
 export default function ThemeToggle({ className }: { className?: string }) {
+    const t = useContent(common);
     const { resolvedAppearance, updateAppearance } = useAppearance();
     const isDark = resolvedAppearance === 'dark';
-    const label = isDark ? 'Ganti ke mode terang' : 'Ganti ke mode gelap';
+    const label = isDark ? t.header.toLight : t.header.toDark;
 
     return (
         <button

resources/js/content/about.ts

@@ -0,0 +1,382 @@
+import { clientCount, projects } from '@/data/projects';
+import type { ProjectSector } from '@/data/projects';
+import type { Localized } from '@/hooks/use-locale';
+
+const id = {
+    title: 'Tentang Kami',
+    hero: {
+        badge: 'Est. 2002 • IT & Automated Systems Consultant',
+        title: 'Menjadi Mitra Terpercaya, Memberdayakan ==Inovasi Teknologi== untuk Pertumbuhan Anda',
+        description:
+            'PT Probindo Artika Jaya (PAJ) hadir sebagai konsultan teknologi informasi dan perancang aplikasi bisnis otomatis (**automated & tailor-fit**) untuk mendukung efisiensi korporasi di Indonesia.',
+        image: {
+            alt: 'Tim konsultan PAJ berkolaborasi di ruang kendali teknologi',
+            eyebrow: 'Integritas & Rekayasa Sistem',
+            title: 'Keahlian Mendalam Rancang Bangun Arsitektur ERP & Otomasi Enterprise',
+            description:
+                'Beroperasi di bawah akta resmi Notaris Joenoes E. Maogimon, SH dengan pengalaman lebih dari dua dekade sebagai konsultan IT bagi korporasi nasional.',
+        },
+        stats: [
+            {
+                value: '20+',
+                unit: 'Tahun',
+                label: 'Pengalaman • Konsultan IT',
+                description:
+                    'Berdiri tahun 1985 sebagai perusahaan trading terkemuka di sektor Oil & Gas dan Industri Baja (Steel), lalu sejak 2002 bertransformasi menjadi konsultan IT.',
+            },
+            {
+                value: `${clientCount}`,
+                unit: 'Klien',
+                label: 'Klien • Portofolio',
+                description: `${projects.length} proyek sistem informasi untuk instansi pemerintahan, BUMN, dan perusahaan swasta.`,
+            },
+        ],
+    },
+    history: {
+        eyebrow: 'Evolusi & Ketahanan',
+        title: 'Rekam Jejak & Transformasi Perusahaan',
+        description:
+            'Dari perdagangan komoditas strategis nasional hingga menjadi pilar konsultan otomasi proses bisnis digital enterprise terdepan.',
+        milestones: [
+            {
+                year: '1985',
+                icon: 'domain',
+                title: 'Awal Berdiri & Fondasi Industri',
+                description:
+                    'Didirikan di Jakarta oleh Notaris Joenoes E. Maogimon, SH. Berawal dari aktivitas trading terkemuka di sektor Oil & Gas dan Industri Baja (Steel).',
+                note: {
+                    icon: 'oil_barrel',
+                    label: 'Oil & Gas • Steel Procurement',
+                },
+                featured: false,
+            },
+            {
+                year: '2002',
+                icon: 'precision_manufacturing',
+                title: 'Evolusi Teknologi Informasi (TI)',
+                description:
+                    'Bertransformasi menjadi konsultan Sistem Informasi dan TI, memusatkan fokus pada perancangan, pembangunan, dan implementasi aplikasi bisnis otomatis.',
+                note: {
+                    icon: 'data_object',
+                    label: 'Automated Business Applications',
+                },
+                featured: true,
+            },
+            {
+                year: '2026',
+                icon: 'handshake',
+                title: 'Kemitraan Resmi dengan Odoo',
+                description:
+                    'Tetap berfokus sebagai konsultan IT, PAJ kini juga menjadi mitra resmi Odoo untuk menghadirkan implementasi ERP yang disesuaikan dengan kebutuhan klien.',
+                note: {
+                    icon: 'verified',
+                    label: 'Official Odoo Learning Partner',
+                },
+                featured: false,
+            },
+        ],
+    },
+    visionMission: {
+        eyebrow: 'Arah Fundamental',
+        title: 'Visi & Misi PT Probindo Artika Jaya',
+        description:
+            'Pernyataan komitmen institusional resmi yang mengarahkan setiap perancangan arsitektur dan penjaminan kualitas sistem bagi para mitra kami.',
+        statements: [
+            {
+                icon: 'visibility',
+                label: 'Visi Resmi PT Probindo Artika Jaya',
+                text: 'Menjadi perusahaan konsultan dibidang sistem informasi dan informasi teknologi yang dapat diandalkan dalam hal desain, pembangunan dan implementasi fully-automated dan tailor-fit applications untuk setiap kebutuhan klien.',
+                footer: {
+                    icon: 'check_circle',
+                    label: 'Fokus Keandalan, Custom-Engineered Architecture, Bebas Keterikatan Template Statis.',
+                },
+            },
+            {
+                icon: 'flag',
+                label: 'Misi Resmi PT Probindo Artika Jaya',
+                text: 'Membantu klien untuk mengoptimalkan proses bisnisnya, tidak hanya dengan mengotomatisasi sistem informasi yang ada tetapi juga memberikan solusi yang dapat mempercepat proses perencanaan, pengambilan keputusan dan analisis performansi proses bisnis yang telah dilakukannya.',
+                footer: {
+                    icon: 'insights',
+                    label: 'Akselerasi Pengambilan Keputusan Strategis & Analisis Kinerja Terukur.',
+                },
+            },
+        ],
+    },
+    philosophy: {
+        eyebrow: 'Karakter & Nilai Inti',
+        title: 'Filosofi Kompetensi Kami',
+        description:
+            'Meramu Inovasi, Penemuan (**Invention**), dan Penguasaan Teknologi Teruji (**Proven Technology**).',
+        pillars: [
+            {
+                icon: 'lightbulb',
+                title: 'Inovasi & Invention',
+                description:
+                    'Karakter dinamis yang melekat kuat untuk selalu menjawab dinamika tantangan baru alur bisnis klien melalui terobosan metode rekayasa teknologi terkini.',
+                footer: 'Karakter Dinamis',
+            },
+            {
+                icon: 'security',
+                title: 'Proven Technology',
+                description:
+                    'Menguasai dan menerapkan teknologi yang telah teruji stabilitas dan keandalannya di lapangan produksi, sehingga secara konsisten meminimalkan risiko operasional bisnis.',
+                footer: 'Stabilitas Teruji',
+            },
+            {
+                icon: 'architecture',
+                title: 'Tailor-Fit Architecture',
+                description:
+                    'Menyesuaikan sistem secara presisi dengan alur kerja riil organisasi. Kami menolak pendekatan template kaku generik yang justru membebani workflow pengguna.',
+                footer: 'Presisi Operasional',
+            },
+            {
+                icon: 'published_with_changes',
+                title: 'End-to-End Commitment',
+                description:
+                    'Pendampingan paripurna dari analisis proses awal, instalasi software, pelatihan intensif pengguna, hingga kepastian SLA pemeliharaan berkelanjutan dan audit tahunan.',
+                footer: 'Siklus Paripurna',
+            },
+        ],
+    },
+    industries: {
+        eyebrow: 'Cakupan Sektor Klien',
+        title: 'Sektor yang Kami Layani',
+        link: 'Lihat Portofolio Proyek',
+        clients: 'klien',
+        projects: 'proyek',
+        examples: 'Antara lain',
+        items: [
+            {
+                sector: 'government',
+                icon: 'account_balance',
+                title: 'Pemerintahan',
+                description:
+                    'Kementerian dan lembaga negara — mulai dari sistem pemantauan harga bahan pokok, layanan informasi dan perizinan investasi, hingga aplikasi dokumentasi hukum dan sertifikasi.',
+            },
+            {
+                sector: 'private',
+                icon: 'business_center',
+                title: 'Swasta',
+                description:
+                    'Perusahaan swasta dan mitra konsultan — mulai dari implementasi ERP dan sistem informasi akuntansi hingga portal web dan aplikasi pelaporan online.',
+            },
+            {
+                sector: 'soe',
+                icon: 'corporate_fare',
+                title: 'BUMN',
+                description:
+                    'Badan Usaha Milik Negara — mulai dari pembangunan sistem aplikasi hingga pemeliharaan sistem operasional penerbangan.',
+            },
+        ] as {
+            sector: ProjectSector;
+            icon: string;
+            title: string;
+            description: string;
+        }[],
+    },
+    legal: {
+        title: 'Legalitas Resmi & Kepatuhan Pajak Terpadu',
+        description:
+            'Terdaftar di Kemenkumham RI, Notaris Joenoes E. Maogimon, SH (1985), beroperasi dari Software Engineering Center di Bintaro dan Business Development Center di Plaza Simatupang.',
+        officeLabel: 'Kantor Operasional',
+        officeValue: 'Jakarta Selatan',
+        standardLabel: 'Standardisasi',
+        standardValue: 'Enterprise SLA',
+    },
+    cta: {
+        badge: 'Konsultasi Teknis & Audit Infrastruktur',
+        title: 'Siap Mengoptimalkan Sistem & Otomasi Bisnis Anda?',
+        description:
+            'Diskusikan kebutuhan sistem Anda bersama konsultan senior PT Probindo Artika Jaya. Kami siap melakukan evaluasi proses bisnis, audit arsitektur sistem eksisting, atau solusi implementasi Odoo ERP yang tepat sasaran.',
+        primary: 'Jadwalkan Konsultasi IT',
+        secondary: 'Pelajari 8 Jasa Kami',
+    },
+};
+
+const en: typeof id = {
+    title: 'About Us',
+    hero: {
+        badge: 'Est. 2002 • IT & Automated Systems Consultant',
+        title: 'A Trusted Partner, Empowering ==Technology Innovation== for Your Growth',
+        description:
+            'PT Probindo Artika Jaya (PAJ) is an information technology consultant and designer of automated business applications (**automated & tailor-fit**) that support corporate efficiency in Indonesia.',
+        image: {
+            alt: 'PAJ consultants collaborating in a technology control room',
+            eyebrow: 'Integrity & Systems Engineering',
+            title: 'Deep Expertise in ERP Architecture & Enterprise Automation',
+            description:
+                'Operating under the official deed of Notary Joenoes E. Maogimon, SH, with more than two decades of experience as an IT consultant to national corporations.',
+        },
+        stats: [
+            {
+                value: '20+',
+                unit: 'Years',
+                label: 'Experience • IT Consulting',
+                description:
+                    'Founded in 1985 as a leading trading company in the Oil & Gas and Steel industries, and an IT consultant since its transformation in 2002.',
+            },
+            {
+                value: `${clientCount}`,
+                unit: 'Clients',
+                label: 'Clients • Portfolio',
+                description: `${projects.length} information systems projects for government, state-owned, and private organizations.`,
+            },
+        ],
+    },
+    history: {
+        eyebrow: 'Evolution & Resilience',
+        title: 'Our Track Record & Transformation',
+        description:
+            'From trading strategic national commodities to becoming a leading consultant in enterprise business process automation.',
+        milestones: [
+            {
+                year: '1985',
+                icon: 'domain',
+                title: 'Founding & Industrial Roots',
+                description:
+                    'Founded in Jakarta before Notary Joenoes E. Maogimon, SH. It began as a leading trading company in the Oil & Gas and Steel industries.',
+                note: {
+                    icon: 'oil_barrel',
+                    label: 'Oil & Gas • Steel Procurement',
+                },
+                featured: false,
+            },
+            {
+                year: '2002',
+                icon: 'precision_manufacturing',
+                title: 'Evolution into Information Technology',
+                description:
+                    'Transformed into an Information Systems and IT consultant, focused on designing, building, and implementing automated business applications.',
+                note: {
+                    icon: 'data_object',
+                    label: 'Automated Business Applications',
+                },
+                featured: true,
+            },
+            {
+                year: '2026',
+                icon: 'handshake',
+                title: 'Official Partnership with Odoo',
+                description:
+                    'While remaining focused as an IT consultant, PAJ is now also an official Odoo partner, delivering ERP implementations tailored to each client’s needs.',
+                note: {
+                    icon: 'verified',
+                    label: 'Official Odoo Learning Partner',
+                },
+                featured: false,
+            },
+        ],
+    },
+    visionMission: {
+        eyebrow: 'Our Direction',
+        title: 'Vision & Mission of PT Probindo Artika Jaya',
+        description:
+            'Our official institutional commitments, guiding every architecture we design and the quality we assure for our partners.',
+        statements: [
+            {
+                icon: 'visibility',
+                label: 'Official Vision of PT Probindo Artika Jaya',
+                text: 'To be a reliable information systems and information technology consulting company in the design, development, and implementation of fully-automated and tailor-fit applications for every client need.',
+                footer: {
+                    icon: 'check_circle',
+                    label: 'Focused on Reliability, Custom-Engineered Architecture, and Freedom from Rigid Templates.',
+                },
+            },
+            {
+                icon: 'flag',
+                label: 'Official Mission of PT Probindo Artika Jaya',
+                text: 'To help clients optimize their business processes, not only by automating their existing information systems but also by providing solutions that accelerate planning, decision-making, and the analysis of their business process performance.',
+                footer: {
+                    icon: 'insights',
+                    label: 'Faster Strategic Decisions & Measurable Performance Analysis.',
+                },
+            },
+        ],
+    },
+    philosophy: {
+        eyebrow: 'Character & Core Values',
+        title: 'Our Philosophy of Competence',
+        description:
+            'Combining Innovation, **Invention**, and Mastery of **Proven Technology**.',
+        pillars: [
+            {
+                icon: 'lightbulb',
+                title: 'Innovation & Invention',
+                description:
+                    'A dynamic character that always answers new challenges in our clients’ business flows through the latest engineering breakthroughs.',
+                footer: 'Dynamic Character',
+            },
+            {
+                icon: 'security',
+                title: 'Proven Technology',
+                description:
+                    'Mastering and applying technologies whose stability and reliability are proven in production, consistently minimizing operational risk.',
+                footer: 'Proven Stability',
+            },
+            {
+                icon: 'architecture',
+                title: 'Tailor-Fit Architecture',
+                description:
+                    'Fitting systems precisely to how an organization really works. We reject rigid, generic templates that burden users’ workflows.',
+                footer: 'Operational Precision',
+            },
+            {
+                icon: 'published_with_changes',
+                title: 'End-to-End Commitment',
+                description:
+                    'Full support from initial process analysis, software installation, and intensive user training to ongoing maintenance SLAs and annual audits.',
+                footer: 'Complete Lifecycle',
+            },
+        ],
+    },
+    industries: {
+        eyebrow: 'Client Sectors',
+        title: 'Sectors We Serve',
+        link: 'View Our Project Portfolio',
+        clients: 'clients',
+        projects: 'projects',
+        examples: 'Including',
+        items: [
+            {
+                sector: 'government',
+                icon: 'account_balance',
+                title: 'Government',
+                description:
+                    'Ministries and state agencies — from staple goods price monitoring and investment information & licensing services to legal documentation and certification applications.',
+            },
+            {
+                sector: 'private',
+                icon: 'business_center',
+                title: 'Private Sector',
+                description:
+                    'Private companies and consulting partners — from ERP and accounting information systems to web portals and online reporting applications.',
+            },
+            {
+                sector: 'soe',
+                icon: 'corporate_fare',
+                title: 'State-Owned Enterprises',
+                description:
+                    'State-owned enterprises (BUMN) — from application system development to maintenance of airline operation systems.',
+            },
+        ],
+    },
+    legal: {
+        title: 'Official Legal Standing & Integrated Tax Compliance',
+        description:
+            'Registered with the Indonesian Ministry of Law and Human Rights, Notary Joenoes E. Maogimon, SH (1985), operating from the Software Engineering Center in Bintaro and the Business Development Center at Plaza Simatupang.',
+        officeLabel: 'Operational Offices',
+        officeValue: 'South Jakarta',
+        standardLabel: 'Standard',
+        standardValue: 'Enterprise SLA',
+    },
+    cta: {
+        badge: 'Technical Consultation & Infrastructure Audit',
+        title: 'Ready to Optimize Your Systems & Business Automation?',
+        description:
+            'Discuss your system needs with senior consultants at PT Probindo Artika Jaya. We can evaluate your business processes, audit your existing system architecture, or propose the right Odoo ERP implementation.',
+        primary: 'Schedule an IT Consultation',
+        secondary: 'Explore Our 8 Services',
+    },
+};
+
+export const aboutContent: Localized<typeof id> = { id, en };

resources/js/content/clients.ts

@@ -0,0 +1,372 @@
+import type { ProjectProgram } from '@/data/projects';
+import { clientCount, projects } from '@/data/projects';
+import type { Localized } from '@/hooks/use-locale';
+
+const id = {
+    title: 'Klien & Portofolio',
+    hero: {
+        badge: 'Kemitraan Strategis & Portofolio Klien // PT Probindo Artika Jaya',
+        title: 'Kepercayaan Industri Terkemuka, ==Rekam Jejak 20+ Tahun== Transformasi Digital',
+        description:
+            '“Kami mengucapkan terima kasih atas kepercayaan dan dukungan Anda sebagai klien kami. Sebagai tim konsultan IT di PT Probindo Artika Jaya (PAJ), kami berkomitmen untuk menyediakan solusi teknologi informasi yang berkualitas tinggi, tailor-fit, dan memberikan nilai tambah nyata bagi kesinambungan bisnis Anda.”',
+        stats: [
+            {
+                value: `${clientCount} Klien`,
+                caption: `${projects.length} Proyek Pemerintahan, BUMN & Swasta`,
+            },
+            { value: '20+ Thn', caption: 'Konsultan IT Sejak 2002' },
+            { value: '99.8%', caption: 'Tingkat Retensi & Kepuasan' },
+            { value: '0%', caption: 'Vendor Lock-in Terbuka' },
+        ],
+    },
+    heritage: {
+        eyebrow: 'Warisan Teknis Sejak 1985',
+        title: 'Fondasi Rekayasa Industri Menuju Otomasi Mutakhir',
+        description:
+            'Berakar kuat dari kiprah awal perseroan pada sektor perdagangan migas dan baja berat di era 1980-an, PAJ berevolusi penuh pada 2002 menjadi sentra konsultan sistem informasi terpadu. Pemahaman mendalam mengenai dinamika lapangan, kepatuhan fiskal nasional, serta kompleksitas supply chain menjadikan solusi PAJ berakar pada kenyataan operasional, bukan sekadar perangkat lunak generik.',
+        scsrTitle: 'Special CSR (SCSR) Architecture',
+        scsrText:
+            'Sistem pendampingan kapasitas berkelanjutan memastikan kapabilitas internal klien meningkat secara mandiri tanpa jebakan lisensi tertutup.',
+        images: [
+            {
+                src: '/images/probindo/clients-operations-center.jpg',
+                alt: 'Pusat operasi rekayasa dengan monitor telemetri industri',
+                eyebrow: 'Heavy Industry Matrix',
+                title: 'Migas & Fabrikasi Metalurgi',
+            },
+            {
+                src: '/images/probindo/clients-erp-dashboard.jpg',
+                alt: 'Dasbor ERP enterprise dengan sinkronisasi pajak DJP',
+                eyebrow: 'Enterprise Core',
+                title: 'Holding Multinasional & BUMN',
+            },
+        ],
+    },
+    portfolio: {
+        eyebrow: 'Rekam Jejak Proyek IT',
+        title: 'Portofolio Proyek per Sektor',
+        description:
+            'Pekerjaan sistem informasi yang telah kami tangani untuk instansi pemerintahan, perusahaan swasta, dan BUMN.',
+        filterLabel: 'Filter sektor',
+        sectors: {
+            government: 'Pemerintahan',
+            private: 'Swasta',
+            soe: 'BUMN',
+        },
+        erpBadge: 'Pengalaman ERP',
+        showAll: 'Lihat semua {count} proyek',
+        showLess: 'Tampilkan lebih sedikit',
+    },
+    cases: {
+        eyebrow: 'Program Unggulan // Rekam Jejak Berkelanjutan',
+        title: 'Program Unggulan & Kemitraan Jangka Panjang',
+        description:
+            'Sebagian pekerjaan kami berjalan berkesinambungan selama bertahun-tahun bersama klien yang sama.',
+        label: 'PROGRAM',
+        projects: 'proyek',
+        related: 'Proyek terkait',
+        more: 'dan {count} proyek lainnya',
+        items: [
+            {
+                program: 'price-monitoring',
+                icon: 'monitoring',
+                title: 'Sistem Pemantauan Harga & Pasokan Bahan Pokok',
+                client: 'Kementerian Perdagangan & mitra',
+                summary:
+                    'Pengembangan, verifikasi, dan pemeliharaan Sistem Pemantauan Pasar Kebutuhan Pokok (SP2KP), serta penyediaan data harga dan pasokan komoditas strategis.',
+            },
+            {
+                program: 'investment',
+                icon: 'account_balance',
+                title: 'Sistem Layanan Informasi & Perizinan Investasi',
+                client: 'Kementerian Investasi / BKPM',
+                summary:
+                    'Mulai dari tracking promosi investasi, portal NSWI dan pendampingan SPIPISE, business intelligence, hingga peta jalan dan SOP Direktorat Data dan Informasi.',
+            },
+            {
+                program: 'erp',
+                icon: 'hub',
+                title: 'Implementasi & Pengembangan Sistem ERP',
+                client: 'Marawah Beach Club & PT Cipta Kridatama',
+                summary:
+                    'Implementasi Odoo ERP serta enhancement sistem manajemen perusahaan sesuai proses bisnis klien.',
+            },
+        ] as {
+            program: ProjectProgram;
+            icon: string;
+            title: string;
+            client: string;
+            summary: string;
+        }[],
+    },
+    reasons: {
+        eyebrow: 'Nilai Inti Kemitraan',
+        title: 'Mengapa Mitra Korporasi Memilih PAJ Sejak 2002',
+        description:
+            'Komitmen arsitektur terbuka dan pendampingan tanpa henti menciptakan relasi kemitraan yang melintasi dekade.',
+        items: [
+            {
+                icon: 'handshake',
+                title: 'Hubungan Jangka Panjang (SCSR)',
+                description:
+                    'Pemeliharaan berkesinambungan dan program Special CSR berkala memastikan sistem Anda senantiasa relevan mengikuti ekspansi kapasitas bisnis.',
+            },
+            {
+                icon: 'lock_open',
+                title: 'Bebas Keterikatan Vendor',
+                description:
+                    'Full source code handover & arsitektur modular mandiri. PAJ memberikan kebebasan mutlak bagi klien atas kepemilikan aset perangkat lunaknya.',
+            },
+            {
+                icon: 'gavel',
+                title: 'Kepatuhan Regulasi Nasional',
+                description:
+                    'Kepatuhan langsung sistem akuntansi terhadap peraturan Ditjen Pajak (DJP e-Faktur terintegrasi), standar audit PSAK, dan peraturan kementerian terkait.',
+            },
+            {
+                icon: 'support_agent',
+                title: 'SLA Tanggap Darurat Khusus',
+                description:
+                    'Dukungan teknis dedicated tingkat lead architect dengan target mitigasi masalah kritis cepat demi menjaga uptime operasional industri non-stop.',
+            },
+        ],
+    },
+    testimonials: {
+        eyebrow: 'Suara Mitra Kami',
+        title: 'Testimoni & Pernyataan Kepercayaan',
+        description:
+            'Apresiasi nyata atas komitmen tanpa henti dari tim konsultan teknis PT Probindo Artika Jaya.',
+        rating: 'Rating 5 dari 5',
+        items: [
+            {
+                initials: 'DO',
+                quote: 'Keahlian teknis tim PAJ dalam memahami proses rolling baja dan pemetaan sertifikat heat treatment sangat luar biasa. Sistem berjalan stabil tanpa kendala berarti selama lebih dari 6 tahun operasional.',
+                role: 'Direktur Operasional',
+                organization: 'Manufaktur Baja & Fabrikasi Logam',
+            },
+            {
+                initials: 'HI',
+                quote: 'Integrasi Odoo dengan bridging DJP Faktur memangkas beban kerja departemen akuntansi kami secara drastis. Yang paling berharga adalah transparansi arsitekturnya, tidak ada ketergantungan yang menyulitkan.',
+                role: 'Head of Enterprise IT',
+                organization: 'Holding Korporasi & Ritel Nasional',
+            },
+            {
+                initials: 'ML',
+                quote: 'Di industri migas, keandalan sistem material tracing adalah penentu keselamatan kerja rig. PAJ merancang alur verifikasi logistik yang sangat presisi dan mampu bertahan di koneksi satelit minim.',
+                role: 'Manajer Logistik & Rantai Pasok',
+                organization: 'Konsorsium Migas Lepas Pantai',
+            },
+        ],
+    },
+    reliability: {
+        eyebrow: 'Reliability Index & Audit Trail',
+        title: 'Stabilitas Operasional di Atas Standar Industri',
+        description:
+            'Setiap sistem yang dibangun oleh tim insinyur PAJ melalui protokol verifikasi beban puncak (stress test), audit kepatuhan tahunan, serta program pemeliharaan terstruktur guna memastikan ketiadaan downtime tidak terencana.',
+        metrics: [
+            ['99.98%', 'System Availability'],
+            ['< 15 Mnt', 'Mitigasi Respon Krisis'],
+        ] as [string, string][],
+        gaugeLabel: 'Indeks Kemitraan Berkelanjutan',
+        gaugeCaption: 'Tingkat Retensi',
+        gaugeNote:
+            'Mayoritas mitra memperpanjang kontrak pemeliharaan dan audit berkala melampaui siklus 5 tahunan.',
+    },
+    cta: {
+        badge: 'Konsultasi Teknis & Audit Infrastruktur',
+        title: 'Siap Menjadi Mitra Transformasi Digital Berikutnya?',
+        description:
+            'Diskusikan tantangan arsitektur sistem dan otomasi proses bisnis Anda bersama Lead Architect PAJ. Kami siap menghadirkan solusi tailor-fit yang terukur.',
+        primary: 'Jadwalkan Diskusi Teknis',
+        secondary: 'Lihat Lokasi Kantor PAJ',
+    },
+    office: {
+        title: 'Kantor Operasional & IT Consultant Desk',
+        description:
+            'Pusat koordinasi rekayasa sistem informasi, audit kode, dan deployment infrastruktur terpadu.',
+    },
+};
+
+const en: typeof id = {
+    title: 'Clients & Portfolio',
+    hero: {
+        badge: 'Strategic Partnerships & Client Portfolio // PT Probindo Artika Jaya',
+        title: 'Trusted by Leading Industries, ==20+ Years of Track Record== in Digital Transformation',
+        description:
+            '“Thank you for your trust and support as our client. As the IT consulting team at PT Probindo Artika Jaya (PAJ), we are committed to delivering high-quality, tailor-fit information technology solutions that add real value to the continuity of your business.”',
+        stats: [
+            {
+                value: `${clientCount} Clients`,
+                caption: `${projects.length} Government, SOE & Private Projects`,
+            },
+            {
+                value: '20+ Yrs',
+                caption: 'IT Consultant Since 2002',
+            },
+            { value: '99.8%', caption: 'Retention & Satisfaction Rate' },
+            { value: '0%', caption: 'Vendor Lock-in' },
+        ],
+    },
+    heritage: {
+        eyebrow: 'Engineering Heritage Since 1985',
+        title: 'Industrial Engineering Roots, Building Modern Automation',
+        description:
+            'Rooted in the company’s early work in oil & gas and heavy steel trading in the 1980s, PAJ fully evolved in 2002 into an integrated information systems consultancy. A deep understanding of field realities, national fiscal compliance, and supply chain complexity keeps PAJ’s solutions grounded in real operations, not generic software.',
+        scsrTitle: 'Special CSR (SCSR) Architecture',
+        scsrText:
+            'Ongoing capacity support that grows our clients’ internal capabilities independently, without closed-license traps.',
+        images: [
+            {
+                src: '/images/probindo/clients-operations-center.jpg',
+                alt: 'Engineering operations center with industrial telemetry monitors',
+                eyebrow: 'Heavy Industry Matrix',
+                title: 'Oil & Gas and Metallurgical Fabrication',
+            },
+            {
+                src: '/images/probindo/clients-erp-dashboard.jpg',
+                alt: 'Enterprise ERP dashboard with DJP tax synchronization',
+                eyebrow: 'Enterprise Core',
+                title: 'Multinational Holdings & SOEs',
+            },
+        ],
+    },
+    portfolio: {
+        eyebrow: 'IT Project Track Record',
+        title: 'Project Portfolio by Sector',
+        description:
+            'Information systems work we have delivered for government institutions, private companies, and state-owned enterprises.',
+        filterLabel: 'Filter by sector',
+        sectors: {
+            government: 'Government',
+            private: 'Private',
+            soe: 'State-Owned (SOE)',
+        },
+        erpBadge: 'ERP Experience',
+        showAll: 'Show all {count} projects',
+        showLess: 'Show fewer',
+    },
+    cases: {
+        eyebrow: 'Featured Programs // Ongoing Track Record',
+        title: 'Featured Programs & Long-Term Partnerships',
+        description:
+            'Some of our work has continued for years with the same clients.',
+        label: 'PROGRAM',
+        projects: 'projects',
+        related: 'Related projects',
+        more: 'and {count} more projects',
+        items: [
+            {
+                program: 'price-monitoring',
+                icon: 'monitoring',
+                title: 'Staple Goods Price & Supply Monitoring Systems',
+                client: 'Ministry of Trade & partners',
+                summary:
+                    'Development, verification, and maintenance of the Staple Goods Market Monitoring System (SP2KP), plus price and supply data for strategic commodities.',
+            },
+            {
+                program: 'investment',
+                icon: 'account_balance',
+                title: 'Investment Information & Licensing Service Systems',
+                client: 'Ministry of Investment / BKPM',
+                summary:
+                    'From investment promotion tracking, the NSWI portal, and SPIPISE helpdesk support to business intelligence and the Data & Information Directorate roadmap and SOPs.',
+            },
+            {
+                program: 'erp',
+                icon: 'hub',
+                title: 'ERP Implementation & Development',
+                client: 'Marawah Beach Club & PT Cipta Kridatama',
+                summary:
+                    'Odoo ERP implementation and enhancement of company management systems to fit each client’s business processes.',
+            },
+        ],
+    },
+    reasons: {
+        eyebrow: 'Partnership Values',
+        title: 'Why Corporate Partners Have Chosen PAJ Since 2002',
+        description:
+            'An open-architecture commitment and continuous support build partnerships that last for decades.',
+        items: [
+            {
+                icon: 'handshake',
+                title: 'Long-Term Relationships (SCSR)',
+                description:
+                    'Ongoing maintenance and a periodic Special CSR program keep your systems relevant as your business capacity grows.',
+            },
+            {
+                icon: 'lock_open',
+                title: 'No Vendor Lock-in',
+                description:
+                    'Full source code handover & an independent modular architecture. PAJ gives clients complete ownership of their software assets.',
+            },
+            {
+                icon: 'gavel',
+                title: 'National Regulatory Compliance',
+                description:
+                    'Accounting systems that comply with Directorate General of Taxes rules (integrated DJP e-Faktur), PSAK audit standards, and relevant ministry regulations.',
+            },
+            {
+                icon: 'support_agent',
+                title: 'Dedicated Emergency SLA',
+                description:
+                    'Dedicated lead-architect-level technical support with fast mitigation targets for critical issues, keeping industrial operations running non-stop.',
+            },
+        ],
+    },
+    testimonials: {
+        eyebrow: 'Voices of Our Partners',
+        title: 'Testimonials & Statements of Trust',
+        description:
+            'Genuine appreciation for the unwavering commitment of PT Probindo Artika Jaya’s technical consultants.',
+        rating: 'Rated 5 out of 5',
+        items: [
+            {
+                initials: 'DO',
+                quote: 'The PAJ team’s technical expertise in steel rolling processes and heat treatment certificate mapping is outstanding. The system has run stably, without significant issues, for more than 6 years of operation.',
+                role: 'Director of Operations',
+                organization: 'Steel Manufacturing & Metal Fabrication',
+            },
+            {
+                initials: 'HI',
+                quote: 'Integrating Odoo with a DJP Faktur bridge drastically cut our accounting department’s workload. Most valuable of all is the transparent architecture — no dependencies that hold us back.',
+                role: 'Head of Enterprise IT',
+                organization: 'National Corporate & Retail Holding',
+            },
+            {
+                initials: 'ML',
+                quote: 'In oil & gas, reliable material tracing determines rig safety. PAJ designed a highly precise logistics verification flow that holds up even on minimal satellite connections.',
+                role: 'Logistics & Supply Chain Manager',
+                organization: 'Offshore Oil & Gas Consortium',
+            },
+        ],
+    },
+    reliability: {
+        eyebrow: 'Reliability Index & Audit Trail',
+        title: 'Operational Stability Above Industry Standards',
+        description:
+            'Every system built by PAJ engineers goes through peak-load verification (stress testing), annual compliance audits, and a structured maintenance program to prevent unplanned downtime.',
+        metrics: [
+            ['99.98%', 'System Availability'],
+            ['< 15 Min', 'Crisis Response Mitigation'],
+        ],
+        gaugeLabel: 'Sustained Partnership Index',
+        gaugeCaption: 'Retention Rate',
+        gaugeNote:
+            'Most partners renew their maintenance and periodic audit contracts beyond a 5-year cycle.',
+    },
+    cta: {
+        badge: 'Technical Consultation & Infrastructure Audit',
+        title: 'Ready to Be Our Next Digital Transformation Partner?',
+        description:
+            'Discuss your system architecture and business process automation challenges with a PAJ Lead Architect. We are ready to deliver measurable, tailor-fit solutions.',
+        primary: 'Schedule a Technical Discussion',
+        secondary: 'See PAJ Office Locations',
+    },
+    office: {
+        title: 'Operational Offices & IT Consultant Desk',
+        description:
+            'The coordination hub for information systems engineering, code audits, and integrated infrastructure deployment.',
+    },
+};
+
+export const clientsContent: Localized<typeof id> = { id, en };

resources/js/content/common.ts

@@ -0,0 +1,288 @@
+import type { Localized } from '@/hooks/use-locale';
+
+export type Service = {
+    title: string;
+    icon: string;
+    /** Short description used in overview grids. */
+    summary: string;
+    /** Official description used on the services page. */
+    description: string;
+    /** Spelled-out acronym rendered in front of the description. */
+    expansion?: string;
+    outcome: string;
+};
+
+const id = {
+    nav: {
+        about: 'Tentang Kami',
+        services: 'Jasa',
+        clients: 'Klien',
+        contact: 'Kontak',
+    },
+    header: {
+        consult: 'Konsultasi IT',
+        mainNav: 'Navigasi utama',
+        openMenu: 'Buka menu',
+        closeMenu: 'Tutup menu',
+        backHome: 'Kembali ke Beranda',
+        toLight: 'Ganti ke mode terang',
+        toDark: 'Ganti ke mode gelap',
+    },
+    footer: {
+        tagline:
+            'Konsultan Sistem Informasi dan Teknologi Informasi terpercaya sejak 2002. Berdedikasi dalam desain, pembangunan, dan implementasi automated systems serta tailor-fit applications di Indonesia.',
+        servicesHeading: '8 Jasa Resmi PAJ',
+        linksHeading: 'Informasi & Tautan',
+        links: {
+            about: 'Tentang Kami',
+            visionMission: 'Visi & Misi Resmi',
+            odoo: 'Solusi Odoo ERP',
+            clients: 'Daftar Klien Industri',
+            audit: 'Permintaan Audit Sistem',
+            offices: 'Lokasi Kantor PAJ',
+        },
+        rights: 'Hak Cipta Dilindungi Undang-Undang.',
+        location: 'Jakarta Selatan, Indonesia',
+        tel: 'Tel.',
+    },
+    serviceTag: 'JASA RESMI',
+    services: [
+        {
+            title: 'Process Analysis',
+            icon: 'account_tree',
+            summary:
+                'Analisis mendalam mengenai alur kerja dan proses bisnis eksisting klien guna mengidentifikasi inefisiensi, memangkas bottleneck operasional, dan merumuskan sistem otomasi yang terukur.',
+            description:
+                'Analisis proses dibutuhkan untuk mengetahui kinerja dan keandalan proses suatu perusahaan. Oleh karena itu, disediakan pelayanan analisis proses sesuai dengan permintaan konsumen ataupun sebagai langkah awal dalam pembangunan perangkat lunak.',
+            outcome: 'Optimasi Alur Kerja Terukur',
+        },
+        {
+            title: 'Software Installation',
+            icon: 'install_desktop',
+            summary:
+                'Pemasangan dan penggelaran aplikasi tailor-fit pada infrastruktur klien (on-premise, cloud terisolasi, maupun hybrid) dengan kepatuhan konfigurasi database dan parameter keamanan ketat.',
+            description:
+                'Memberikan kemudahan pada setiap klien merupakan prioritas utama. Oleh karena itu, untuk setiap perangkat lunak yang disediakan, PAJ juga menyediakan jasa instalasi dan penyesuaian konfigurasi sesuai dengan kondisi di lapangan.',
+            outcome: 'Deploy Aman & Terverifikasi',
+        },
+        {
+            title: 'User Training',
+            icon: 'school',
+            summary:
+                'Pelatihan terstruktur bagi seluruh tingkat pengguna — dari staf operasional lapangan hingga admin sistem dan eksekutif — guna menjamin adopsi sistem yang lancar dan bebas hambatan.',
+            description:
+                'Seberapapun baiknya suatu perangkat lunak tidak akan berfungsi secara optimal tanpa adanya user yang baik pula. Untuk menjamin hal tersebut, disediakan jasa pelatihan untuk user langsung maupun supervisor user tersebut.',
+            outcome: 'Modul & Panduan Komprehensif',
+        },
+        {
+            title: 'Software Maintenance',
+            icon: 'build_circle',
+            summary:
+                'Layanan pemeliharaan sistem terencana dan berkesinambungan dengan garansi SLA tinggi untuk menjaga stabilitas, patching keamanan, serta integritas basis data operasional harian.',
+            description:
+                'Berakhirnya kontrak, tidak akan mengakibatkan tanggung jawab kepada klien. Untuk setiap software yang dibuat, PAJ menjamin kelangsungan jasa pemeliharaan atas jasa tersebut.',
+            outcome: 'Perawatan Rutin & Terjadwal',
+        },
+        {
+            title: 'Troubleshooting Handling',
+            icon: 'emergency',
+            summary:
+                'Penanganan insiden teknis cepat dan tanggap oleh tim engineer berpengalaman untuk mendeteksi akar masalah (root cause), memulihkan error data, dan meminimalkan waktu henti (downtime).',
+            description:
+                'Tidak ada gading yang tak retak, begitupun dengan software yang dibuat. Namun, setiap kesalahan yang mungkin terdapat dalam software tersebut akan secepat mungkin ditanggapi dan diperbaiki.',
+            outcome: 'Respon Cepat Tim Ahli Jakarta',
+        },
+        {
+            title: 'Sustainability Support',
+            icon: 'all_inclusive',
+            summary:
+                'Dukungan jangka panjang untuk memastikan sistem klien selalu relevan, sanggup berevolusi sejalan dengan pertumbuhan skala bisnis, dan dapat beradaptasi terhadap perubahan regulasi industri.',
+            description:
+                'Dukungan secara berkesinambungan terhadap software yang telah dibuat merupakan hal yang sudah semestinya. Setiap saat, segala keluhan maupun permintaan pengembangan dari konsumen akan direspon sesuai dengan kesepakatan yang telah dibuat.',
+            outcome: 'Skalabilitas & Evolusi Jangka Panjang',
+        },
+        {
+            title: 'SCSR',
+            icon: 'analytics',
+            expansion: 'System Capacity & Service Review',
+            summary:
+                'Audit berkala terhadap kapasitas beban komputasi, storage, latensi jaringan, serta efisiensi indexing data untuk mencegah saturasi sistem.',
+            description:
+                'Audit berkala terhadap kapasitas beban komputasi, storage, latensi jaringan, serta efisiensi indexing data untuk mencegah saturasi sistem.',
+            outcome: 'Audit Kapasitas & Reliabilitas',
+        },
+        {
+            title: 'Annual Review & Revise',
+            icon: 'update',
+            summary:
+                'Tinjauan tahunan komprehensif atas performa sistem, arsitektur data, dan kesesuaian modul operasional, diikuti revisi kode dan parameter untuk performa optimal di tahun berikutnya.',
+            description:
+                'Keadaan yang terus berubah membuat suatu software akan berkurang tingkat utilitas maupun efektivitasnya. Pemantauan terhadap software akan selalu dibuat dan dilaporkan kepada klien, termasuk pada saat revisi terbaru diluncurkan.',
+            outcome: 'Evaluasi Tahunan & Refactoring',
+        },
+    ] as Service[],
+    extraServiceOptions: [{ value: 'odoo', label: 'Implementasi Odoo ERP' }],
+    form: {
+        title: 'Jadwalkan Konsultasi IT',
+        subtitle:
+            'Konfirmasi langsung oleh Lead Architect PAJ dalam 2 jam kerja.',
+        name: 'Nama Lengkap & Perusahaan',
+        namePlaceholder: 'Nama Anda (PT ...)',
+        email: 'Email Perusahaan / Kantor',
+        emailPlaceholder: 'nama@perusahaan.co.id',
+        phone: 'No. WhatsApp / Telepon',
+        service: 'Layanan Yang Dibutuhkan',
+        submit: 'Kirim Permintaan Konsultasi',
+        nda: 'Non-Disclosure Agreement (NDA) dapat ditandatangani sebelum audit teknis.',
+        successTitle: 'Permintaan Terkirim!',
+        successMessage:
+            'Tim Lead Consultant PT Probindo Artika Jaya akan segera menghubungi kontak Anda untuk konfirmasi jadwal sesi konsultasi.',
+    },
+    consultation: {
+        badge: 'KONSULTASI TEKNIS & AUDIT INFRASTRUKTUR',
+        tel: 'Telp',
+    },
+};
+
+const en: typeof id = {
+    nav: {
+        about: 'About Us',
+        services: 'Services',
+        clients: 'Clients',
+        contact: 'Contact',
+    },
+    header: {
+        consult: 'IT Consultation',
+        mainNav: 'Main navigation',
+        openMenu: 'Open menu',
+        closeMenu: 'Close menu',
+        backHome: 'Back to home',
+        toLight: 'Switch to light mode',
+        toDark: 'Switch to dark mode',
+    },
+    footer: {
+        tagline:
+            'A trusted Information Systems and Information Technology consultant since 2002, dedicated to designing, building, and implementing automated systems and tailor-fit applications in Indonesia.',
+        servicesHeading: "PAJ's 8 Official Services",
+        linksHeading: 'Information & Links',
+        links: {
+            about: 'About Us',
+            visionMission: 'Official Vision & Mission',
+            odoo: 'Odoo ERP Solutions',
+            clients: 'Industry Clients',
+            audit: 'Request a System Audit',
+            offices: 'PAJ Office Locations',
+        },
+        rights: 'All rights reserved.',
+        location: 'South Jakarta, Indonesia',
+        tel: 'Tel.',
+    },
+    serviceTag: 'OFFICIAL SERVICE',
+    services: [
+        {
+            title: 'Process Analysis',
+            icon: 'account_tree',
+            summary:
+                "An in-depth analysis of the client's existing workflows and business processes to identify inefficiencies, remove operational bottlenecks, and define measurable automation.",
+            description:
+                "Process analysis is needed to understand how well a company's processes perform and how reliable they are. We provide process analysis on request, or as the first step in building software.",
+            outcome: 'Measurable Workflow Optimization',
+        },
+        {
+            title: 'Software Installation',
+            icon: 'install_desktop',
+            summary:
+                "Installation and deployment of tailor-fit applications on the client's infrastructure (on-premise, isolated cloud, or hybrid) with strict database configuration and security parameters.",
+            description:
+                'Making things easy for every client is our top priority. For every piece of software we deliver, PAJ also provides installation and configuration adjusted to on-site conditions.',
+            outcome: 'Secure & Verified Deployment',
+        },
+        {
+            title: 'User Training',
+            icon: 'school',
+            summary:
+                'Structured training for every level of user — from field operations staff to system administrators and executives — to ensure smooth, frictionless adoption.',
+            description:
+                'However good a piece of software is, it will not perform optimally without capable users. To ensure this, we provide training for end users as well as their supervisors.',
+            outcome: 'Comprehensive Modules & Guides',
+        },
+        {
+            title: 'Software Maintenance',
+            icon: 'build_circle',
+            summary:
+                'Planned, continuous system maintenance backed by a strong SLA to keep daily operations stable, security patches current, and databases intact.',
+            description:
+                'The end of a contract does not end our responsibility to the client. For every piece of software we build, PAJ guarantees continued maintenance.',
+            outcome: 'Routine & Scheduled Care',
+        },
+        {
+            title: 'Troubleshooting Handling',
+            icon: 'emergency',
+            summary:
+                'Fast, responsive incident handling by experienced engineers to find the root cause, recover data errors, and minimize downtime.',
+            description:
+                'No software is perfect. Whenever an error appears in software we have built, it is responded to and fixed as quickly as possible.',
+            outcome: 'Fast Response from Our Jakarta Experts',
+        },
+        {
+            title: 'Sustainability Support',
+            icon: 'all_inclusive',
+            summary:
+                "Long-term support to keep the client's systems relevant, able to grow with the business, and adaptable to changing industry regulations.",
+            description:
+                'Ongoing support for the software we have built is a given. Complaints and development requests are responded to at any time, according to the agreed terms.',
+            outcome: 'Long-Term Scalability & Evolution',
+        },
+        {
+            title: 'SCSR',
+            icon: 'analytics',
+            expansion: 'System Capacity & Service Review',
+            summary:
+                'Periodic audits of compute load, storage, network latency, and data indexing efficiency to prevent system saturation.',
+            description:
+                'Periodic audits of compute load, storage, network latency, and data indexing efficiency to prevent system saturation.',
+            outcome: 'Capacity & Reliability Audit',
+        },
+        {
+            title: 'Annual Review & Revise',
+            icon: 'update',
+            summary:
+                'A comprehensive annual review of system performance, data architecture, and module fit, followed by code and parameter revisions for optimal performance in the year ahead.',
+            description:
+                'As conditions change, software gradually loses its usefulness and effectiveness. We continuously monitor the software and report to the client, including whenever a new revision is released.',
+            outcome: 'Annual Evaluation & Refactoring',
+        },
+    ],
+    extraServiceOptions: [{ value: 'odoo', label: 'Odoo ERP Implementation' }],
+    form: {
+        title: 'Schedule an IT Consultation',
+        subtitle:
+            'Confirmed directly by a PAJ Lead Architect within 2 business hours.',
+        name: 'Full Name & Company',
+        namePlaceholder: 'Your name (PT ...)',
+        email: 'Company / Work Email',
+        emailPlaceholder: 'name@company.com',
+        phone: 'WhatsApp / Phone Number',
+        service: 'Service Needed',
+        submit: 'Send Consultation Request',
+        nda: 'A Non-Disclosure Agreement (NDA) can be signed before the technical audit.',
+        successTitle: 'Request Sent!',
+        successMessage:
+            'A Lead Consultant from PT Probindo Artika Jaya will contact you shortly to confirm your consultation schedule.',
+    },
+    consultation: {
+        badge: 'TECHNICAL CONSULTATION & INFRASTRUCTURE AUDIT',
+        tel: 'Tel',
+    },
+};
+
+export const common: Localized<typeof id> = { id, en };
+
+/** Options for the "service needed" select in every consultation form. */
+export const serviceOptions = (content: typeof id) => [
+    ...content.services.map((service, index) => ({
+        value: `service-${index + 1}`,
+        label: `${index + 1}. ${service.expansion ? `${service.title} (${service.expansion})` : service.title}`,
+    })),
+    ...content.extraServiceOptions,
+];

resources/js/content/contact.ts

@@ -0,0 +1,477 @@
+import type { Localized } from '@/hooks/use-locale';
+
+const id = {
+    title: 'Kontak & Konsultasi',
+    hero: {
+        badge: 'Hubungi Kami // Konsultasi Resmi IT & Arsitektur Sistem',
+        title: 'Diskusikan Transformasi & Otomasi Sistem Bisnis Bersama Lead Consultant PAJ',
+        description:
+            'Mulai dari rekayasa proses bisnis, instalasi sistem **tailor-fit**, audit SCSR, hingga implementasi **Odoo ERP**. Kami siap membantu memetakan solusi presisi yang adaptif terhadap pertumbuhan enterprise Anda sejak 2002.',
+        assurances: [
+            {
+                icon: 'schedule',
+                label: 'SLA Respon Inquiry',
+                value: '< 2 Jam Hari Kerja',
+            },
+        ],
+        highlights: [
+            {
+                icon: 'bolt',
+                label: 'Respon Cepat',
+                value: '< 2 Jam untuk Inquiry Enterprise',
+            },
+            {
+                icon: 'assignment_turned_in',
+                label: 'GAP Analysis Awal',
+                value: 'Gratis & Bebas Komitmen',
+            },
+            {
+                icon: 'gavel',
+                label: 'Perjanjian Kerahasiaan',
+                value: 'NDA Terpadu & Terjamin Hukum',
+            },
+            {
+                icon: 'travel_explore',
+                label: 'Cakupan Deployment',
+                value: 'Nasional (On-Premise & Cloud)',
+            },
+        ],
+    },
+    offices: {
+        label: 'Kantor Operasional',
+        title: 'Lokasi Kantor PAJ',
+        tel: 'Tel.',
+        hoursLabel: 'Jam Operasional',
+        hoursDays: 'Senin – Jumat',
+        hoursTime: '08:30 – 17:30 WIB',
+        visitLabel: 'Status Kunjungan',
+        visitStatus: 'Terbuka untuk Audit Terjadwal',
+        visitNote: 'Harap konfirmasi H-1',
+    },
+    channels: {
+        label: 'Korespondensi Langsung',
+        title: 'Saluran Komunikasi Resmi',
+        phone: 'Telepon Kantor Resmi (PABX)',
+        whatsapp: 'Hotline WhatsApp Enterprise',
+        whatsappBadge: 'Chat Langsung',
+        whatsappMessage:
+            'Halo Lead Consultant PT Probindo Artika Jaya, saya ingin berkonsultasi mengenai kebutuhan sistem IT/ERP.',
+        email: 'Korespondensi, RFI & Tender',
+        support: 'Helpdesk Dukungan Klien Aktif',
+        supportBadge: 'Ticketing 24/7',
+    },
+    incident: {
+        badge: 'SPECIAL CUSTOMER SERVICE REPRESENTATIVE (SCSR)',
+        title: 'Dedicated Incident Line 24/7',
+        description:
+            'Jalur khusus tier-1 untuk klien dengan kontrak pemeliharaan & infrastruktur **mission-critical** (Sektor Migas, Pengolahan Baja, dan Korporasi Holding).',
+        slaLabel: 'SLA WAKTU TANGGAP INSIDEN KRITIS',
+        slaValue: '< 15 Menit',
+    },
+    form: {
+        eyebrow: 'Sesi Audit & Permintaan Tender',
+        title: 'Formulir Konsultasi & Audit Arsitektur Sistem',
+        description:
+            'Isi rincian kebutuhan sistem Anda di bawah ini. Lead Consultant PAJ akan menganalisis parameter awal dan menjadwalkan presentasi arsitektur terarah.',
+        name: 'Nama Lengkap & Gelar',
+        namePlaceholder: 'Contoh: Ir. Hendra Prasetyo, M.T.',
+        company: 'Nama Perusahaan / Instansi / BUMN',
+        companyPlaceholder: 'PT Petro Nusantara Energy',
+        jobTitle: 'Jabatan / Divisi',
+        jobTitlePlaceholder: 'VP Information Technology / GM Finance',
+        email: 'Email Resmi Perusahaan',
+        emailPlaceholder: 'hendra@petronusantara.co.id',
+        phone: 'Nomor WhatsApp / Telepon Langsung',
+        industry: 'Klasifikasi Sektor Industri',
+        industryPlaceholder: 'Pilih Sektor Industri Anda',
+        industries: [
+            { value: 'migas', label: 'Sektor Minyak, Gas & Energi Terbarukan' },
+            {
+                value: 'baja',
+                label: 'Fabrikasi & Pengolahan Baja / Heavy Metals',
+            },
+            {
+                value: 'manufaktur',
+                label: 'Manufaktur, Supply Chain & Logistik',
+            },
+            {
+                value: 'holding',
+                label: 'Korporasi Holding & Badan Usaha Milik Negara (BUMN)',
+            },
+            {
+                value: 'retail',
+                label: 'Komersial, Distribusi & Ritel Skala Besar',
+            },
+            {
+                value: 'finansial',
+                label: 'Jasa Finansial, Perbankan & Asuransi',
+            },
+            { value: 'lainnya', label: 'Sektor Lainnya / Multi-Divisional' },
+        ],
+        service: 'Pilar Kebutuhan / Fokus Jasa PAJ',
+        servicePlaceholder: 'Pilih Layanan Utama yang Dibutuhkan',
+        timeline: 'Estimasi Linimasa Kebutuhan Implementasi',
+        timelines: [
+            { value: 'immediate', label: 'Segera', note: '< 1 Bulan' },
+            { value: 'quarter', label: '1 – 3 Bulan', note: 'Q1 - Q2' },
+            { value: 'midterm', label: 'Semester Depan', note: 'Q3 - Q4' },
+            {
+                value: 'feasibility',
+                label: 'Eksplorasi',
+                note: 'Studi Kelayakan',
+            },
+        ],
+        details: 'Ringkasan Kebutuhan atau Kendala Sistem Saat Ini',
+        detailsPlaceholder:
+            'Jelaskan secara ringkas tantangan operasional, sistem lama yang digunakan (SAP/Oracle/Legacy), integrasi khusus yang diinginkan, atau estimasi jumlah pengguna (users)...',
+        nda: 'Saya menyetujui penandatanganan **Non-Disclosure Agreement (NDA)** sebelum pertukaran data teknis & flow diagram operasional korporasi.',
+        submit: 'Kirim Permohonan Konsultasi Teknis',
+        successTitle: 'Permohonan Berhasil Dikirimkan!',
+        successMessage:
+            'Lead Consultant PAJ akan mengonfirmasi via email/telepon resmi dalam kurun waktu kurang dari 2 jam kerja.',
+        privacy:
+            'Data dan kerahasiaan proses bisnis Anda dilindungi melalui perjanjian kerahasiaan (NDA) dan kepatuhan hukum Indonesia.',
+    },
+    location: {
+        eyebrow: 'Kantor & Fasilitas Riset Sistem',
+        title: 'Dua Lokasi Kantor PAJ di Jakarta Selatan',
+        description:
+            'Sebagian besar tim kami berbasis di Software Engineering Center Bintaro, sementara Business Development Center di Plaza Simatupang melayani pertemuan kemitraan.',
+        mapAlt: 'Peta wilayah Jakarta Selatan',
+        directions: 'Buka Petunjuk Arah',
+        access: [
+            {
+                icon: 'directions_car',
+                title: 'Akses Tol JORR',
+                description:
+                    'Langsung terhubung dengan Gerbang Tol Veteran & Cipete, memudahkan kunjungan delegasi antar-kota dan bandara Soekarno-Hatta (35 menit).',
+            },
+            {
+                icon: 'train',
+                title: 'Stasiun MRT Fatmawati & Lebak Bulus',
+                description:
+                    'Hanya 5–8 menit dari stasiun MRT utama jalur Bundaran HI–Lebak Bulus, efisien untuk pertemuan tatap muka tim arsitektur sistem.',
+            },
+            {
+                icon: 'meeting_room',
+                title: 'Executive Presentation Suite',
+                description:
+                    'Dilengkapi ruang presentasi arsitektur berteknologi tinggi untuk simulasi live demo ERP, load balancing review, dan workshop tim lintas divisi.',
+            },
+        ],
+    },
+    steps: {
+        eyebrow: 'Protokol Konsultasi Enterprise',
+        title: 'Tahapan Transparan Setelah Anda Menghubungi Kami',
+        description:
+            'Kami mengeliminasi ketidakpastian implementasi IT melalui tahapan rekayasa berstruktur jelas, terikat kerahasiaan hukum, dan terukur.',
+        items: [
+            {
+                title: 'Respon Cepat & GAP Review',
+                badge: '1 - 2 Jam',
+                description:
+                    'Lead Consultant PAJ menelaah parameter awal industri Anda dan menyusun agenda sesi pendalaman awal sesuai fokus kendala sistem Anda.',
+                footer: { icon: 'verified', label: 'Bebas Biaya Awal' },
+            },
+            {
+                title: 'NDA & Briefing Teknis',
+                badge: 'H+1 Sesi',
+                description:
+                    'Penandatanganan Perjanjian Kerahasiaan (NDA) resmi agar korporasi leluasa mendiskusikan workflow rahasia, struktur akuntansi, dan logistik.',
+                footer: { icon: 'lock_clock', label: 'Legal Binding 100%' },
+            },
+            {
+                title: 'Discovery & Cetak Biru',
+                badge: 'Minggu Ke-1',
+                description:
+                    'Penyusunan arsitektur sistem komprehensif, pemetaan modul tailor-fit vs standar Odoo ERP, linimasa milestone, dan estimasi TCO investasi.',
+                footer: {
+                    icon: 'architecture',
+                    label: 'Blue-Print Arsitektur',
+                },
+            },
+            {
+                title: 'Live Demo & PoC Uji Coba',
+                badge: 'Proof-of-Concept',
+                description:
+                    'Simulasi alur transaksi riil atau uji coba automasi dengan sampel data operasional untuk memvalidasi kelayakan sebelum implementasi massal.',
+                footer: {
+                    icon: 'play_circle',
+                    label: 'Simulasi Riil Enterprise',
+                },
+            },
+        ],
+    },
+    faq: {
+        eyebrow: 'Tanya Jawab Umum',
+        title: 'Pertanyaan Seputar Konsultasi & Penugasan PAJ',
+        description:
+            'Jawaban ringkas terkait model kerja sama teknis, audit, dan penugasan onsite.',
+        items: [
+            {
+                question:
+                    'Apakah sesi konsultasi awal dan audit GAP dikenakan biaya konsultan?',
+                answer: 'Tidak. Diskusi penjajakan kebutuhan awal, penelaahan GAP proses bisnis, dan penyusunan proposal rekomendasi arsitektur awal bersifat gratis dan tanpa komitmen awal. Biaya jasa profesional baru dihitung saat kontrak kerja sama (MoU/SPK) disetujui kedua belah pihak.',
+            },
+            {
+                question:
+                    'Bagaimana jika alur bisnis perusahaan kami sangat unik dan tidak didukung oleh modul standar Odoo ERP?',
+                answer: 'Inilah keahlian inti PT Probindo Artika Jaya sejak 2002. Tim arsitek kami berpengalaman merekayasa modul tailor-fit bespoke yang diintegrasikan mulus dengan core Odoo, termasuk integrasi mesin timbang pabrik baja, sistem flow meter migas, maupun protokol e-Faktur DJP.',
+            },
+            {
+                question:
+                    'Apakah tim teknis dan konsultan PAJ dapat melakukan sesi analisis onsite di lokasi operasional pabrik atau kilang kami di luar Jakarta?',
+                answer: 'Tentu. Tim PAJ secara rutin melakukan site audit, observasi workflow operasional lantai pabrik, dan pelatihan pengguna langsung di lokasi klien (Cilegon, Balikpapan, Surabaya, Medan, hingga remote site migas di seluruh Nusantara) dengan standar K3 migas/industri yang ketat.',
+            },
+            {
+                question:
+                    'Berapa lama estimasi waktu implementasi penuh dari tahap analisis hingga Go-Live?',
+                answer: 'Tergantung kompleksitas modul dan skala pengguna. Implementasi Odoo ERP standar terintegrasi berkisar antara 2 – 4 bulan, sedangkan sistem enterprise kompleks multi-entitas holding dengan puluhan modul custom tailor-fit biasanya membutuhkan linimasa bertahap 4 – 8 bulan dengan pendekatan peluncuran bertahap (phased roll-out).',
+            },
+        ],
+        urgentTitle: 'Butuh Tanggapan Mendesak Hari Ini?',
+        urgentText:
+            'Hubungi Hotline WhatsApp Konsultan Enterprise kami untuk respon instan atau jadwalkan pertemuan daring langsung dengan arsitek sistem PAJ.',
+        whatsapp: 'WhatsApp Konsultan',
+        phone: 'Telepon Kantor',
+    },
+};
+
+const en: typeof id = {
+    title: 'Contact & Consultation',
+    hero: {
+        badge: 'Contact Us // Official IT & System Architecture Consultation',
+        title: 'Discuss Your Business System Transformation & Automation with a PAJ Lead Consultant',
+        description:
+            'From business process engineering and **tailor-fit** system installation to SCSR audits and **Odoo ERP** implementation — we are ready to map precise solutions that adapt to your enterprise growth, as we have since 2002.',
+        assurances: [
+            {
+                icon: 'schedule',
+                label: 'Inquiry Response SLA',
+                value: '< 2 Business Hours',
+            },
+        ],
+        highlights: [
+            {
+                icon: 'bolt',
+                label: 'Fast Response',
+                value: '< 2 Hours for Enterprise Inquiries',
+            },
+            {
+                icon: 'assignment_turned_in',
+                label: 'Initial GAP Analysis',
+                value: 'Free & No Commitment',
+            },
+            {
+                icon: 'gavel',
+                label: 'Confidentiality Agreement',
+                value: 'Legally Binding NDA',
+            },
+            {
+                icon: 'travel_explore',
+                label: 'Deployment Coverage',
+                value: 'Nationwide (On-Premise & Cloud)',
+            },
+        ],
+    },
+    offices: {
+        label: 'Operational Offices',
+        title: 'PAJ Office Locations',
+        tel: 'Tel.',
+        hoursLabel: 'Office Hours',
+        hoursDays: 'Monday – Friday',
+        hoursTime: '08:30 – 17:30 WIB',
+        visitLabel: 'Visits',
+        visitStatus: 'Open for Scheduled Audits',
+        visitNote: 'Please confirm one day ahead',
+    },
+    channels: {
+        label: 'Direct Correspondence',
+        title: 'Official Communication Channels',
+        phone: 'Official Office Line (PABX)',
+        whatsapp: 'Enterprise WhatsApp Hotline',
+        whatsappBadge: 'Chat Now',
+        whatsappMessage:
+            'Hello PT Probindo Artika Jaya Lead Consultant, I would like to consult about our IT/ERP system needs.',
+        email: 'Correspondence, RFI & Tenders',
+        support: 'Active Client Support Helpdesk',
+        supportBadge: '24/7 Ticketing',
+    },
+    incident: {
+        badge: 'SPECIAL CUSTOMER SERVICE REPRESENTATIVE (SCSR)',
+        title: 'Dedicated 24/7 Incident Line',
+        description:
+            'A dedicated tier-1 line for clients with **mission-critical** maintenance & infrastructure contracts (Oil & Gas, Steel Processing, and Holding Corporations).',
+        slaLabel: 'CRITICAL INCIDENT RESPONSE SLA',
+        slaValue: '< 15 Minutes',
+    },
+    form: {
+        eyebrow: 'Audit Sessions & Tender Requests',
+        title: 'Consultation & System Architecture Audit Form',
+        description:
+            'Fill in your system requirements below. A PAJ Lead Consultant will review the initial parameters and schedule a focused architecture presentation.',
+        name: 'Full Name & Title',
+        namePlaceholder: 'e.g. Ir. Hendra Prasetyo, M.T.',
+        company: 'Company / Institution / SOE Name',
+        companyPlaceholder: 'PT Petro Nusantara Energy',
+        jobTitle: 'Position / Division',
+        jobTitlePlaceholder: 'VP Information Technology / GM Finance',
+        email: 'Official Company Email',
+        emailPlaceholder: 'hendra@petronusantara.co.id',
+        phone: 'Direct WhatsApp / Phone Number',
+        industry: 'Industry Sector',
+        industryPlaceholder: 'Select Your Industry Sector',
+        industries: [
+            { value: 'migas', label: 'Oil, Gas & Renewable Energy' },
+            {
+                value: 'baja',
+                label: 'Steel Fabrication & Processing / Heavy Metals',
+            },
+            {
+                value: 'manufaktur',
+                label: 'Manufacturing, Supply Chain & Logistics',
+            },
+            {
+                value: 'holding',
+                label: 'Holding Corporations & State-Owned Enterprises (SOEs)',
+            },
+            {
+                value: 'retail',
+                label: 'Commercial, Distribution & Large-Scale Retail',
+            },
+            {
+                value: 'finansial',
+                label: 'Financial Services, Banking & Insurance',
+            },
+            { value: 'lainnya', label: 'Other / Multi-Divisional' },
+        ],
+        service: 'Primary Need / PAJ Service Focus',
+        servicePlaceholder: 'Select the Main Service You Need',
+        timeline: 'Estimated Implementation Timeline',
+        timelines: [
+            { value: 'immediate', label: 'Immediately', note: '< 1 Month' },
+            { value: 'quarter', label: '1 – 3 Months', note: 'Q1 - Q2' },
+            { value: 'midterm', label: 'Next Semester', note: 'Q3 - Q4' },
+            {
+                value: 'feasibility',
+                label: 'Exploring',
+                note: 'Feasibility Study',
+            },
+        ],
+        details: 'Summary of Current System Needs or Challenges',
+        detailsPlaceholder:
+            'Briefly describe your operational challenges, the legacy system in use (SAP/Oracle/Legacy), required integrations, or the estimated number of users...',
+        nda: 'I agree to sign a **Non-Disclosure Agreement (NDA)** before any exchange of technical data & corporate operational flow diagrams.',
+        submit: 'Send Technical Consultation Request',
+        successTitle: 'Request Sent Successfully!',
+        successMessage:
+            'A PAJ Lead Consultant will confirm via official email/phone within 2 business hours.',
+        privacy:
+            'Your data and business process confidentiality are protected by a non-disclosure agreement (NDA) and Indonesian law.',
+    },
+    location: {
+        eyebrow: 'Offices & Systems Facilities',
+        title: 'Two PAJ Office Locations in South Jakarta',
+        description:
+            'Most of our team is based at the Software Engineering Center in Bintaro, while the Business Development Center at Plaza Simatupang hosts partnership meetings.',
+        mapAlt: 'Map of South Jakarta',
+        directions: 'Get Directions',
+        access: [
+            {
+                icon: 'directions_car',
+                title: 'JORR Toll Road Access',
+                description:
+                    'Directly connected to the Veteran & Cipete toll gates, making it easy for delegations from other cities and Soekarno-Hatta airport (35 minutes).',
+            },
+            {
+                icon: 'train',
+                title: 'Fatmawati & Lebak Bulus MRT Stations',
+                description:
+                    'Just 5–8 minutes from the main Bundaran HI–Lebak Bulus MRT line, convenient for in-person meetings with our architecture team.',
+            },
+            {
+                icon: 'meeting_room',
+                title: 'Executive Presentation Suite',
+                description:
+                    'Equipped with high-tech presentation rooms for live ERP demos, load balancing reviews, and cross-division team workshops.',
+            },
+        ],
+    },
+    steps: {
+        eyebrow: 'Enterprise Consultation Protocol',
+        title: 'A Transparent Process After You Contact Us',
+        description:
+            'We remove the uncertainty of IT implementation through clearly structured engineering stages that are legally confidential and measurable.',
+        items: [
+            {
+                title: 'Fast Response & GAP Review',
+                badge: '1 - 2 Hours',
+                description:
+                    'A PAJ Lead Consultant reviews your industry’s initial parameters and prepares an agenda for an in-depth session focused on your system challenges.',
+                footer: { icon: 'verified', label: 'No Initial Fee' },
+            },
+            {
+                title: 'NDA & Technical Briefing',
+                badge: 'D+1 Session',
+                description:
+                    'An official Non-Disclosure Agreement (NDA) is signed so your company can freely discuss confidential workflows, accounting structures, and logistics.',
+                footer: { icon: 'lock_clock', label: '100% Legally Binding' },
+            },
+            {
+                title: 'Discovery & Blueprint',
+                badge: 'Week 1',
+                description:
+                    'A comprehensive system architecture, tailor-fit vs. standard Odoo ERP module mapping, milestone timeline, and estimated TCO.',
+                footer: {
+                    icon: 'architecture',
+                    label: 'Architecture Blueprint',
+                },
+            },
+            {
+                title: 'Live Demo & Proof of Concept',
+                badge: 'Proof-of-Concept',
+                description:
+                    'A simulation of real transaction flows or an automation trial with sample operational data to validate feasibility before full rollout.',
+                footer: {
+                    icon: 'play_circle',
+                    label: 'Real Enterprise Simulation',
+                },
+            },
+        ],
+    },
+    faq: {
+        eyebrow: 'Frequently Asked Questions',
+        title: 'Questions About PAJ Consultations & Engagements',
+        description:
+            'Short answers about technical partnership models, audits, and on-site assignments.',
+        items: [
+            {
+                question:
+                    'Is there a consultant fee for the initial consultation and GAP audit?',
+                answer: 'No. The initial needs discussion, business process GAP review, and preliminary architecture proposal are free and carry no commitment. Professional fees apply only once a partnership contract (MoU/SPK) is agreed by both parties.',
+            },
+            {
+                question:
+                    'What if our business processes are highly unique and not supported by standard Odoo ERP modules?',
+                answer: 'This has been PT Probindo Artika Jaya’s core expertise since 2002. Our architects are experienced in engineering bespoke, tailor-fit modules that integrate seamlessly with Odoo core — including steel mill weighbridge integration, oil & gas flow meter systems, and the DJP e-Faktur protocol.',
+            },
+            {
+                question:
+                    'Can PAJ’s technical team and consultants run on-site analysis at our plants or refineries outside Jakarta?',
+                answer: 'Absolutely. PAJ routinely conducts site audits, shop-floor workflow observation, and on-site user training at client locations (Cilegon, Balikpapan, Surabaya, Medan, and remote oil & gas sites across Indonesia) under strict oil & gas/industrial HSE standards.',
+            },
+            {
+                question:
+                    'How long does a full implementation take, from analysis to go-live?',
+                answer: 'It depends on module complexity and the number of users. A standard integrated Odoo ERP implementation takes 2 – 4 months, while complex multi-entity holding systems with dozens of tailor-fit custom modules typically follow a phased 4 – 8 month timeline (phased roll-out).',
+            },
+        ],
+        urgentTitle: 'Need an Urgent Response Today?',
+        urgentText:
+            'Contact our Enterprise Consultant WhatsApp Hotline for an instant response, or schedule an online meeting directly with a PAJ system architect.',
+        whatsapp: 'WhatsApp a Consultant',
+        phone: 'Call the Office',
+    },
+};
+
+export const contactContent: Localized<typeof id> = { id, en };

resources/js/content/home.ts

@@ -0,0 +1,291 @@
+import { clientCount, projects } from '@/data/projects';
+import type { Localized } from '@/hooks/use-locale';
+
+const id = {
+    title: 'Konsultan IT & Automated Systems',
+    hero: {
+        badge: 'Est. 2002 • IT & Automated Systems Consultant',
+        title: 'Empowering Enterprise Through ==Custom Software== & Automated Systems',
+        description:
+            'PT Probindo Artika Jaya merancang, membangun, dan mengimplementasikan aplikasi bisnis **tailor-fit** serta sistem otomasi proses bisnis berstandar enterprise — dipercaya oleh industri berat, perminyakan, dan manufaktur Indonesia sejak 2002.',
+        primaryAction: 'Jadwalkan Audit Sistem',
+        secondaryAction: 'Eksplorasi 8 Jasa Resmi',
+        trustBefore: 'Dipercaya oleh',
+        trustLink: `${clientCount} klien`,
+        trustAfter: 'dari instansi pemerintahan, BUMN, dan perusahaan swasta.',
+    },
+    console: {
+        metrics: [
+            {
+                label: 'Throughput ERP',
+                value: '+38.6%',
+                note: '↑ Optimasi Otomasi',
+                accent: true,
+            },
+            {
+                label: 'Sync Latency',
+                value: '14ms',
+                note: 'Sub-20ms Engine',
+                accent: false,
+            },
+            {
+                label: 'Active Pipelines',
+                value: '1,840',
+                note: 'Automated Workflow',
+                accent: true,
+            },
+        ],
+        chartTitle: 'Orkestrasi Data & Alur Kerja Terintegrasi',
+        events: [
+            {
+                icon: 'check_circle',
+                text: 'PO-99120 → Auto Material Requisition Dispatched',
+                status: 'Tersinkron',
+            },
+            {
+                icon: 'sync',
+                text: 'DJP e-Faktur Integration Endpoint Ingest',
+                status: '0.03s Validated',
+            },
+        ],
+    },
+    stats: [
+        {
+            label: 'Pengalaman • Konsultan IT',
+            value: '20+',
+            unit: 'Tahun',
+            description:
+                'Berdiri tahun 1985 sebagai perusahaan trading terkemuka di sektor Oil & Gas dan Industri Baja (Steel), lalu sejak 2002 bertransformasi menjadi konsultan IT.',
+        },
+        {
+            label: 'Klien • Portofolio',
+            value: `${clientCount}`,
+            unit: 'Klien',
+            description: `${projects.length} proyek sistem informasi untuk instansi pemerintahan, BUMN, dan perusahaan swasta.`,
+        },
+        {
+            label: 'Layanan • Keandalan',
+            value: '8',
+            unit: 'Jasa Resmi',
+            description:
+                'Solusi komprehensif mulai dari analisis proses hingga SCSR dan evaluasi tahunan.',
+        },
+        {
+            label: 'Komitmen • Kemitraan',
+            value: 'Official',
+            unit: 'Odoo Partner',
+            description:
+                'Odoo Learning Partner bersertifikasi untuk implementasi ERP sesuai kebutuhan bisnis Anda.',
+        },
+    ],
+    sectors: {
+        eyebrow: 'Sektor Strategis & Rekam Jejak Industri',
+        description:
+            'Mitra Terpercaya Solusi Bisnis & Sistem Otomasi Terintegrasi untuk Sektor Strategis Nasional',
+        since: 'KONSULTAN IT SEJAK 2002',
+        items: [
+            'Industri Minyak & Gas Bumi (Oil & Gas)',
+            'Industri Fabrikasi & Pengolahan Baja',
+            'Perusahaan Manufaktur & Logistik',
+            'Korporasi Swasta & BUMN Nasional',
+            'Institusi Layanan & Komersial',
+        ],
+    },
+    profile: {
+        eyebrow: 'Profil & Rekam Jejak Perusahaan',
+        title: 'Sejak 2002 Membangun Solusi IT Andal & Terpercaya',
+        paragraphs: [
+            'PT Probindo Artika Jaya didirikan di Jakarta pada tahun 1985 di hadapan Notaris Joenoes E. Maogimon, SH. Berawal dari aktivitas trading terkemuka di sektor Oil & Gas dan Industri Baja (Steel), pada tahun 2002 perusahaan bertransformasi menjadi konsultan Sistem Informasi dan Teknologi Informasi.',
+            'Fokus utama kami adalah perancangan, pembangunan, dan implementasi aplikasi bisnis yang terotomasi (**automated systems**) dan dirancang khusus sesuai alur kerja operasional (**tailor-fit applications**).',
+        ],
+        more: 'Selengkapnya tentang PAJ',
+        statements: [
+            {
+                icon: 'visibility',
+                label: 'Visi Resmi PT Probindo Artika Jaya',
+                text: 'Menjadi perusahaan konsultan dibidang sistem informasi dan informasi teknologi yang dapat diandalkan dalam hal desain, pembangunan dan implementasi fully-automated dan tailor-fit applications untuk setiap kebutuhan klien.',
+            },
+            {
+                icon: 'flag',
+                label: 'Misi Resmi PT Probindo Artika Jaya',
+                text: 'Membantu klien untuk mengoptimalkan proses bisnisnya, tidak hanya dengan mengotomatisasi sistem informasi yang ada tetapi juga memberikan solusi yang dapat mempercepat proses perencanaan, pengambilan keputusan dan analisis performansi proses bisnis yang telah dilakukannya.',
+            },
+        ],
+    },
+    services: {
+        eyebrow: 'Layanan Utama & Portofolio Solusi',
+        title: '8 Jasa Resmi PT Probindo Artika Jaya',
+        description:
+            'Siklus lengkap dukungan enterprise — mulai dari analisis pra-pengembangan, implementasi, alih pengetahuan user, hingga evaluasi kapasitas berkala.',
+    },
+    odoo: {
+        badge: 'OFFICIAL ODOO LEARNING PARTNER',
+        title: 'Implementasi Odoo ERP',
+        subtitle: 'Modular & Disesuaikan dengan Kebutuhan Anda',
+        description:
+            'Sebagai mitra resmi Odoo, kami menyediakan implementasi end-to-end yang dipilih sesuai kebutuhan proses bisnis Anda — mulai dari multi-company accounting, integrasi manufaktur, manajemen supply chain, hingga pelaporan eksekutif tersentralisasi. Modul tambahan seperti integrasi e-Faktur DJP tersedia bila diperlukan.',
+        modules: [
+            'Accounting & Finance',
+            'Manufacturing & MRP',
+            'Supply Chain & Inventory',
+            'CRM & Sales Invoicing',
+            'Custom Module Development',
+            'Integrasi e-Faktur DJP (Opsional)',
+        ],
+        cardLabel: 'Konsultasi Odoo ERP',
+        cardText:
+            'Diskusikan kebutuhan arsitektur modul dan roadmap migrasi data dengan konsultan resmi kami.',
+        cardAction: 'Minta Demo Odoo ERP',
+    },
+    consultation: {
+        title: 'Siap Mengoptimalkan Sistem & Otomasi Bisnis Anda?',
+        description:
+            'Diskusikan kebutuhan sistem Anda bersama konsultan senior PT Probindo Artika Jaya. Kami siap melakukan evaluasi proses bisnis, audit arsitektur sistem eksisting, atau memaparkan solusi implementasi Odoo ERP yang tepat sasaran.',
+    },
+};
+
+const en: typeof id = {
+    title: 'IT & Automated Systems Consultant',
+    hero: {
+        badge: 'Est. 2002 • IT & Automated Systems Consultant',
+        title: 'Empowering Enterprise Through ==Custom Software== & Automated Systems',
+        description:
+            'PT Probindo Artika Jaya designs, builds, and implements **tailor-fit** business applications and enterprise-grade business process automation — trusted by Indonesia’s heavy industry, oil & gas, and manufacturing sectors since 2002.',
+        primaryAction: 'Schedule a System Audit',
+        secondaryAction: 'Explore Our 8 Official Services',
+        trustBefore: 'Trusted by',
+        trustLink: `${clientCount} clients`,
+        trustAfter:
+            'across government, state-owned, and private organizations.',
+    },
+    console: {
+        metrics: [
+            {
+                label: 'ERP Throughput',
+                value: '+38.6%',
+                note: '↑ Automation Gains',
+                accent: true,
+            },
+            {
+                label: 'Sync Latency',
+                value: '14ms',
+                note: 'Sub-20ms Engine',
+                accent: false,
+            },
+            {
+                label: 'Active Pipelines',
+                value: '1,840',
+                note: 'Automated Workflow',
+                accent: true,
+            },
+        ],
+        chartTitle: 'Integrated Data & Workflow Orchestration',
+        events: [
+            {
+                icon: 'check_circle',
+                text: 'PO-99120 → Auto Material Requisition Dispatched',
+                status: 'Synced',
+            },
+            {
+                icon: 'sync',
+                text: 'DJP e-Faktur Integration Endpoint Ingest',
+                status: '0.03s Validated',
+            },
+        ],
+    },
+    stats: [
+        {
+            label: 'Experience • IT Consulting',
+            value: '20+',
+            unit: 'Years',
+            description:
+                'Founded in 1985 as a leading trading company in the Oil & Gas and Steel industries, and an IT consultant since its transformation in 2002.',
+        },
+        {
+            label: 'Clients • Portfolio',
+            value: `${clientCount}`,
+            unit: 'Clients',
+            description: `${projects.length} information systems projects for government, state-owned, and private organizations.`,
+        },
+        {
+            label: 'Services • Reliability',
+            value: '8',
+            unit: 'Official Services',
+            description:
+                'End-to-end solutions, from process analysis to SCSR and annual evaluation.',
+        },
+        {
+            label: 'Commitment • Partnership',
+            value: 'Official',
+            unit: 'Odoo Partner',
+            description:
+                'Certified Odoo Learning Partner for ERP implementations shaped around your business needs.',
+        },
+    ],
+    sectors: {
+        eyebrow: 'Strategic Sectors & Industry Track Record',
+        description:
+            'A Trusted Partner for Business Solutions & Integrated Automation in National Strategic Sectors',
+        since: 'IT CONSULTANT SINCE 2002',
+        items: [
+            'Oil & Gas Industry',
+            'Steel Fabrication & Processing',
+            'Manufacturing & Logistics Companies',
+            'Private Corporations & State-Owned Enterprises',
+            'Service & Commercial Institutions',
+        ],
+    },
+    profile: {
+        eyebrow: 'Company Profile & Track Record',
+        title: 'Building Reliable, Trusted IT Solutions Since 2002',
+        paragraphs: [
+            'PT Probindo Artika Jaya was founded in Jakarta in 1985 before Notary Joenoes E. Maogimon, SH. Starting as a leading trading company in the Oil & Gas and Steel industries, it transformed into an Information Systems and Information Technology consultant in 2002.',
+            'We focus on designing, building, and implementing business applications that are automated (**automated systems**) and built around each client’s operational workflow (**tailor-fit applications**).',
+        ],
+        more: 'More about PAJ',
+        statements: [
+            {
+                icon: 'visibility',
+                label: 'Official Vision of PT Probindo Artika Jaya',
+                text: 'To be a reliable information systems and information technology consulting company in the design, development, and implementation of fully-automated and tailor-fit applications for every client need.',
+            },
+            {
+                icon: 'flag',
+                label: 'Official Mission of PT Probindo Artika Jaya',
+                text: 'To help clients optimize their business processes, not only by automating their existing information systems but also by providing solutions that accelerate planning, decision-making, and the analysis of their business process performance.',
+            },
+        ],
+    },
+    services: {
+        eyebrow: 'Core Services & Solution Portfolio',
+        title: 'The 8 Official Services of PT Probindo Artika Jaya',
+        description:
+            'A complete cycle of enterprise support — from pre-development analysis and implementation to user knowledge transfer and periodic capacity evaluation.',
+    },
+    odoo: {
+        badge: 'OFFICIAL ODOO LEARNING PARTNER',
+        title: 'Odoo ERP Implementation',
+        subtitle: 'Modular & Tailored to Your Needs',
+        description:
+            'As an official Odoo partner, we deliver end-to-end implementations built from the modules your business actually needs — from multi-company accounting and manufacturing integration to supply chain management and centralized executive reporting. Add-on modules such as DJP e-Faktur integration are available when required.',
+        modules: [
+            'Accounting & Finance',
+            'Manufacturing & MRP',
+            'Supply Chain & Inventory',
+            'CRM & Sales Invoicing',
+            'Custom Module Development',
+            'DJP e-Faktur Integration (Optional)',
+        ],
+        cardLabel: 'Odoo ERP Consultation',
+        cardText:
+            'Discuss your module architecture and data migration roadmap with our official consultants.',
+        cardAction: 'Request an Odoo ERP Demo',
+    },
+    consultation: {
+        title: 'Ready to Optimize Your Systems & Business Automation?',
+        description:
+            'Discuss your system needs with senior consultants at PT Probindo Artika Jaya. We can evaluate your business processes, audit your existing system architecture, or present the right Odoo ERP implementation for you.',
+    },
+};
+
+export const homeContent: Localized<typeof id> = { id, en };

resources/js/content/services.ts

@@ -0,0 +1,264 @@
+import type { Localized } from '@/hooks/use-locale';
+
+const id = {
+    title: 'Jasa & Solusi IT',
+    hero: {
+        badge: 'Layanan & Solusi Teknologi Informasi // PT Probindo Artika Jaya',
+        title: '8 Pilar Jasa Rekayasa Sistem & ==Otomasi Proses Bisnis== Terpercaya',
+        description:
+            'Kami berkomitmen untuk menyediakan solusi yang inovatif, efisien, dan dapat diandalkan untuk memenuhi kebutuhan transformasi digital dan otomasi proses bisnis perusahaan Anda sejak 2002.',
+        primaryAction: 'Konsultasikan Kebutuhan Sistem',
+        secondaryAction: 'Pelajari Siklus Layanan',
+        stats: [
+            {
+                value: '20+',
+                caption: 'Tahun sebagai Konsultan IT (Sejak 2002)',
+            },
+            { value: '100%', caption: 'Tailor-Fit Tanpa Lock-in' },
+            { value: 'Official', caption: 'Odoo Learning Partner' },
+            { value: '24/7', caption: 'SCSR Incident Response' },
+        ],
+    },
+    catalog: {
+        eyebrow: 'Portfolio Layanan Inti',
+        title: '8 Pilar Spektrum Layanan Rekayasa Perangkat Lunak',
+        badge: 'STANDAR PROBINDO ARTIKA JAYA',
+    },
+    odoo: {
+        badge: 'OFFICIAL ODOO LEARNING PARTNER',
+        title: 'Implementasi Odoo ERP Sesuai Kebutuhan Bisnis Anda',
+        description:
+            'Menghadirkan ekosistem Enterprise Resource Planning kelas dunia yang dikonfigurasi mengikuti proses bisnis Anda. Kami hanya mengimplementasikan modul yang benar-benar dibutuhkan — dari keuangan, rantai pasok, hingga manufaktur — sehingga sistem tetap ramping dan mudah diadopsi.',
+        optional: {
+            title: 'Modul Opsional: Integrasi e-Faktur DJP',
+            description:
+                'Bagi perusahaan yang membutuhkannya, kami menyediakan konektor data invoice ke skema XML DJP tanpa re-input manual. Dapat ditambahkan kapan saja sesuai kebutuhan.',
+        },
+        modules: [
+            {
+                icon: 'receipt_long',
+                title: 'Akuntansi & Finansial',
+                description:
+                    'General ledger, accounts payable/receivable, rekonsiliasi bank otomatis, serta pelaporan keuangan multi-company.',
+            },
+            {
+                icon: 'inventory_2',
+                title: 'Supply Chain & Gudang',
+                description:
+                    'Manajemen multi-warehouse, pelacakan barcode/RFID, automated replenishment, dan valuasi persediaan FIFO / Average.',
+            },
+            {
+                icon: 'precision_manufacturing',
+                title: 'Manufaktur (MRP)',
+                description:
+                    'Penyusunan Bill of Materials (BOM) multi-level, perutean work order, pencatatan scrap, dan kontrol kapasitas mesin.',
+            },
+            {
+                icon: 'point_of_sale',
+                title: 'Sales, CRM & Purchasing',
+                description:
+                    'Pipeline prospek, quotation approval bertingkat, purchase order vendor, dan manajemen kontrak berkala.',
+            },
+        ],
+        custom: {
+            title: 'Kustomisasi Sektor Migas & Manufaktur Berat',
+            description:
+                'Modul khusus perhitungan heat treatment, compliance standar pipa baja, hingga sertifikasi material uji.',
+            badge: 'TAILOR-FIT READY',
+        },
+    },
+    methodology: {
+        eyebrow: 'Metodologi Eksekusi',
+        title: 'Siklus Alur Kerja Layanan End-to-End',
+        description:
+            'Rangkaian metodologi teruji PAJ memastikan setiap investasi perangkat lunak diadopsi dengan sukses, minim hambatan transisi, dan memiliki usia pakai jangka panjang.',
+        steps: [
+            {
+                icon: 'search_insights',
+                title: 'Inisiasi & Analisis',
+                description:
+                    'Audit alur bisnis, pemetaan GAP, dan penentuan target kinerja sistem baru.',
+            },
+            {
+                icon: 'architecture',
+                title: 'Desain Arsitektur',
+                description:
+                    'Perancangan database relasional, pemodelan interface, dan kustomisasi kode.',
+            },
+            {
+                icon: 'cloud_sync',
+                title: 'Penggelaran & Setup',
+                description:
+                    'Instalasi server on-premise / cloud, migrasi master data, serta stress test jaringan.',
+            },
+            {
+                icon: 'groups',
+                title: 'Pelatihan Pengguna',
+                description:
+                    'Simulasi operasional riil dari tim entri hingga penyusunan laporan level direksi.',
+            },
+            {
+                icon: 'verified_user',
+                title: 'SCSR & Audit Review',
+                description:
+                    'Pendampingan representative khusus, pemeliharaan berkelanjutan & review tahunan.',
+            },
+        ],
+    },
+    commitments: [
+        {
+            icon: 'speed',
+            title: 'SLA Tanggap Darurat 24/7',
+            description:
+                'Jaminan penanganan insiden darurat dengan respon di bawah 2 jam untuk crash kritis operasional pabrik atau transaksi keuangan.',
+        },
+        {
+            icon: 'security',
+            title: 'Kerahasiaan Data & NDA Terpadu',
+            description:
+                'Seluruh data bisnis, formula rantai pasok, dan rekam finansial dienkripsi standar perbankan serta dilindungi perjanjian legal mengikat.',
+        },
+        {
+            icon: 'lock_open',
+            title: 'Bebas Vendor Lock-in',
+            description:
+                'Klien memegang kendali penuh atas kode sumber, basis data, dan dokumentasi arsitektur sehingga mandiri bertumbuh di masa depan.',
+        },
+    ],
+    consultation: {
+        title: 'Siap Mengotomasi & Memperkuat Sistem Bisnis Anda?',
+        description:
+            'Diskusikan kebutuhan sistem Anda bersama konsultan senior PT Probindo Artika Jaya. Kami siap membantu membedah kelemahan sistem lama, audit arsitektur eksisting, atau memaparkan solusi implementasi Odoo ERP yang tepat sasaran.',
+    },
+};
+
+const en: typeof id = {
+    title: 'IT Services & Solutions',
+    hero: {
+        badge: 'Information Technology Services & Solutions // PT Probindo Artika Jaya',
+        title: '8 Pillars of Trusted Systems Engineering & ==Business Process Automation==',
+        description:
+            'Since 2002, we have been committed to delivering innovative, efficient, and reliable solutions for your company’s digital transformation and business process automation.',
+        primaryAction: 'Discuss Your System Needs',
+        secondaryAction: 'See Our Service Cycle',
+        stats: [
+            { value: '20+', caption: 'Years as an IT Consultant (Since 2002)' },
+            { value: '100%', caption: 'Tailor-Fit, No Lock-in' },
+            { value: 'Official', caption: 'Odoo Learning Partner' },
+            { value: '24/7', caption: 'SCSR Incident Response' },
+        ],
+    },
+    catalog: {
+        eyebrow: 'Core Service Portfolio',
+        title: 'The 8 Pillars of Our Software Engineering Services',
+        badge: 'PROBINDO ARTIKA JAYA STANDARD',
+    },
+    odoo: {
+        badge: 'OFFICIAL ODOO LEARNING PARTNER',
+        title: 'Odoo ERP Implementation Tailored to Your Business',
+        description:
+            'A world-class Enterprise Resource Planning ecosystem, configured around your business processes. We implement only the modules you actually need — from finance and supply chain to manufacturing — so the system stays lean and easy to adopt.',
+        optional: {
+            title: 'Optional Module: DJP e-Faktur Integration',
+            description:
+                'For companies that need it, we provide a connector that sends invoice data to the DJP XML schema without manual re-entry. It can be added at any time.',
+        },
+        modules: [
+            {
+                icon: 'receipt_long',
+                title: 'Accounting & Finance',
+                description:
+                    'General ledger, accounts payable/receivable, automated bank reconciliation, and multi-company financial reporting.',
+            },
+            {
+                icon: 'inventory_2',
+                title: 'Supply Chain & Warehouse',
+                description:
+                    'Multi-warehouse management, barcode/RFID tracking, automated replenishment, and FIFO / Average inventory valuation.',
+            },
+            {
+                icon: 'precision_manufacturing',
+                title: 'Manufacturing (MRP)',
+                description:
+                    'Multi-level Bill of Materials (BOM), work order routing, scrap recording, and machine capacity control.',
+            },
+            {
+                icon: 'point_of_sale',
+                title: 'Sales, CRM & Purchasing',
+                description:
+                    'Lead pipelines, multi-level quotation approval, vendor purchase orders, and recurring contract management.',
+            },
+        ],
+        custom: {
+            title: 'Customization for Oil & Gas and Heavy Manufacturing',
+            description:
+                'Specialized modules for heat treatment calculation, steel pipe standard compliance, and material test certification.',
+            badge: 'TAILOR-FIT READY',
+        },
+    },
+    methodology: {
+        eyebrow: 'Delivery Methodology',
+        title: 'Our End-to-End Service Cycle',
+        description:
+            'PAJ’s proven methodology ensures every software investment is adopted successfully, with minimal transition friction and a long service life.',
+        steps: [
+            {
+                icon: 'search_insights',
+                title: 'Initiation & Analysis',
+                description:
+                    'Business flow audit, GAP mapping, and performance targets for the new system.',
+            },
+            {
+                icon: 'architecture',
+                title: 'Architecture Design',
+                description:
+                    'Relational database design, interface modeling, and code customization.',
+            },
+            {
+                icon: 'cloud_sync',
+                title: 'Deployment & Setup',
+                description:
+                    'On-premise / cloud server installation, master data migration, and network stress testing.',
+            },
+            {
+                icon: 'groups',
+                title: 'User Training',
+                description:
+                    'Real operational simulations, from data entry teams to board-level reporting.',
+            },
+            {
+                icon: 'verified_user',
+                title: 'SCSR & Audit Review',
+                description:
+                    'Dedicated representative support, ongoing maintenance & annual review.',
+            },
+        ],
+    },
+    commitments: [
+        {
+            icon: 'speed',
+            title: '24/7 Emergency Response SLA',
+            description:
+                'Guaranteed emergency incident handling with a response under 2 hours for critical crashes in plant operations or financial transactions.',
+        },
+        {
+            icon: 'security',
+            title: 'Data Confidentiality & NDA',
+            description:
+                'All business data, supply chain formulas, and financial records are encrypted to banking standards and protected by binding legal agreements.',
+        },
+        {
+            icon: 'lock_open',
+            title: 'No Vendor Lock-in',
+            description:
+                'Clients keep full control of source code, databases, and architecture documentation, so they can grow independently in the future.',
+        },
+    ],
+    consultation: {
+        title: 'Ready to Automate & Strengthen Your Business Systems?',
+        description:
+            'Discuss your system needs with senior consultants at PT Probindo Artika Jaya. We can help uncover weaknesses in legacy systems, audit your existing architecture, or present the right Odoo ERP implementation.',
+    },
+};
+
+export const servicesContent: Localized<typeof id> = { id, en };

resources/js/data/projects.ts

@@ -0,0 +1,404 @@
+/**
+ * PAJ's IT project track record. Project and client names are official
+ * Indonesian names, so they are shown as-is in both languages.
+ */
+export type ProjectSector = 'government' | 'private' | 'soe';
+
+/** Long-running programs highlighted as featured case studies. */
+export type ProjectProgram = 'price-monitoring' | 'investment' | 'erp';
+
+export type Project = {
+    title: string;
+    client: string;
+    year: number;
+    sector: ProjectSector;
+    program?: ProjectProgram;
+};
+
+const government: Omit<Project, 'sector'>[] = [
+    {
+        title: 'Penyusunan dan Pembuatan SOP Direktorat Data dan Informasi',
+        client: 'Kementerian Investasi / Badan Koordinasi Penanaman Modal (BKPM)',
+        year: 2025,
+        program: 'investment',
+    },
+    {
+        title: 'Perencanaan Peta Jalan Direktorat Data dan Informasi TA 2024',
+        client: 'Kementerian Investasi / Badan Koordinasi Penanaman Modal (BKPM)',
+        year: 2024,
+        program: 'investment',
+    },
+    {
+        title: 'Modul Pelayanan Metrologi Legal Submodul Verifikasi (Sistem Informasi Ketertelusuran Standar (SIKS))',
+        client: 'Kementerian Perdagangan',
+        year: 2024,
+    },
+    {
+        title: 'Penyediaan Data Harga dan Pasokan Cabe dan Bawang di Pasar Induk Wilayah Barat',
+        client: 'Kementerian Perdagangan',
+        year: 2024,
+        program: 'price-monitoring',
+    },
+    {
+        title: 'Pemeliharaan Sistem Pelaporan Harga (SP2KP), Pusat Data dan Sistem Informasi',
+        client: 'Kementerian Perdagangan',
+        year: 2023,
+        program: 'price-monitoring',
+    },
+    {
+        title: 'Penyediaan Data Harga dan Pasokan Cabe dan Bawang di Pasar Induk Wilayah Barat',
+        client: 'Kementerian Perdagangan',
+        year: 2023,
+        program: 'price-monitoring',
+    },
+    {
+        title: 'Pembangunan Aplikasi Sertifikasi Prasarana Perkeretaapian Dengan Memanfaatkan Teknologi Informasi',
+        client: 'Kementerian Perhubungan',
+        year: 2022,
+    },
+    {
+        title: 'Pengembangan Aplikasi LDH',
+        client: 'Badan Informasi Geospasial (BIG)',
+        year: 2022,
+    },
+    {
+        title: 'Perawatan Sistem Pelaporan Harga',
+        client: 'Kementerian Perdagangan',
+        year: 2022,
+        program: 'price-monitoring',
+    },
+    {
+        title: 'Pengembangan Aplikasi Sistem Informasi Ketertelusuran Standar',
+        client: 'Kementerian Perdagangan',
+        year: 2021,
+    },
+    {
+        title: 'Pengembangan Modul Master Data Aplikasi SIREBEKA (Sistem Informasi Remunerasi Berbasis Kinerja)',
+        client: 'Kementerian Perhubungan',
+        year: 2021,
+    },
+    {
+        title: 'Pengelolaan Sistem Pelaporan Harga',
+        client: 'Kementerian Perdagangan',
+        year: 2020,
+        program: 'price-monitoring',
+    },
+    {
+        title: 'Pengadaan Metrologi Aplikasi Mobile: Pendataan dan Pemetaan Kondisi UTTP dan BDKT dalam Kerangka Pengawasan Kemetrologian',
+        client: 'Kementerian Perdagangan',
+        year: 2020,
+    },
+    {
+        title: 'Penyediaan Data Harga dan Pasokan Cabe dan Bawang di Pasar Induk Wilayah Barat',
+        client: 'Kementerian Perdagangan',
+        year: 2020,
+        program: 'price-monitoring',
+    },
+    {
+        title: 'Penyediaan Data Harga dan Pasokan Cabe dan Bawang di Pasar Induk Wilayah Timur',
+        client: 'Kementerian Perdagangan',
+        year: 2020,
+        program: 'price-monitoring',
+    },
+    {
+        title: 'Perawatan Sistem Pelaporan Harga',
+        client: 'Kementerian Perdagangan',
+        year: 2020,
+        program: 'price-monitoring',
+    },
+    {
+        title: 'Perancangan Antar Muka Sistem Informasi Ketertelusuran Standar',
+        client: 'Kementerian Perdagangan',
+        year: 2019,
+    },
+    {
+        title: 'Pengembangan dan Pemeliharaan Portal NSWI TA 2019',
+        client: 'Badan Koordinasi Penanaman Modal (BKPM)',
+        year: 2019,
+        program: 'investment',
+    },
+    {
+        title: 'Pengembangan Aplikasi Website Intranet',
+        client: 'Kementerian Perdagangan',
+        year: 2018,
+    },
+    {
+        title: 'Pemantauan Harga Bapok 34 Ibukota Provinsi pada Sabtu atau Minggu, Libur Nasional dan HBKN, Pasar Kab/Kota, Daerah TTT dan Pasar Ritel Modern Tahun 2018',
+        client: 'Kementerian Perdagangan',
+        year: 2018,
+        program: 'price-monitoring',
+    },
+    {
+        title: 'Pengembangan Business Intelligence (BI) TA 2018',
+        client: 'Badan Koordinasi Penanaman Modal (BKPM)',
+        year: 2018,
+        program: 'investment',
+    },
+    {
+        title: 'Pengembangan Dashboard Produk Wisata MICE',
+        client: 'Kementerian Pariwisata',
+        year: 2017,
+    },
+    {
+        title: 'Pembuatan Sistem Informasi Manajemen Harga dan Pasokan',
+        client: 'Kementerian Perdagangan',
+        year: 2017,
+        program: 'price-monitoring',
+    },
+    {
+        title: 'Penerapan Model Pembangunan dan Revitalisasi Pasar Rakyat Dengan Pendekatan Teknologi Informasi Berbasis Mobile',
+        client: 'Kementerian Perdagangan',
+        year: 2017,
+    },
+    {
+        title: 'Penyusunan Pemutakhiran (Updating) Cetak Biru Pengembangan Sistem Pelayanan Informasi dan Perizinan',
+        client: 'Badan Koordinasi Penanaman Modal (BKPM)',
+        year: 2017,
+        program: 'investment',
+    },
+    {
+        title: 'Pemantauan Stok dan Pasokan Barang Kebutuhan Pokok 100 Titik di Pasar Rakyat (Tradisional), Pasar Induk dan Sentra Produksi',
+        client: 'Kementerian Perdagangan',
+        year: 2017,
+        program: 'price-monitoring',
+    },
+    {
+        title: 'Verifikasi Pelaporan Harga Barang Pokok pada SP2KP',
+        client: 'Kementerian Perdagangan',
+        year: 2016,
+        program: 'price-monitoring',
+    },
+    {
+        title: 'Pengembangan Program Aplikasi Harga Kabupaten Kota',
+        client: 'Kementerian Perdagangan',
+        year: 2016,
+        program: 'price-monitoring',
+    },
+    {
+        title: 'Updating Program Penilaian Pasar',
+        client: 'Kementerian Perdagangan',
+        year: 2016,
+    },
+    {
+        title: 'Pengembangan Sistem Aplikasi Jaringan Informasi Dokumentasi Hukum',
+        client: 'Badan Informasi Geospasial (BIG)',
+        year: 2016,
+    },
+    {
+        title: 'Verifikasi Pelaporan Harga Barang Pokok pada Sistem Pemantauan Pasar Kebutuhan Pokok (SP2KP)',
+        client: 'Kementerian Perdagangan',
+        year: 2016,
+        program: 'price-monitoring',
+    },
+    {
+        title: 'Pekerjaan Pengembangan Program Aplikasi Harga Kabupaten Kota',
+        client: 'Kementerian Perdagangan',
+        year: 2016,
+        program: 'price-monitoring',
+    },
+    {
+        title: 'Pembuatan Software pada Kegiatan Penguatan Regional Climate Change Center',
+        client: 'Badan Meteorologi Klimatologi dan Geofisika (BMKG)',
+        year: 2025,
+    },
+    {
+        title: 'Kajian Tata Kelola Teknologi Informasi BKPM TA 2014',
+        client: 'Badan Koordinasi Penanaman Modal (BKPM)',
+        year: 2014,
+        program: 'investment',
+    },
+    {
+        title: 'Sistem Informasi Monitoring Updating Harga dan Pasokan Bawang Merah',
+        client: 'Kementerian Perdagangan',
+        year: 2014,
+        program: 'price-monitoring',
+    },
+    {
+        title: 'Pemetaan Indikasi dan Variabel Penentu Kenaikan Harga Bahan Pokok (Komoditas Cabe Merah, Bawang Merah dan Beras)',
+        client: 'Kementerian Perdagangan',
+        year: 2014,
+        program: 'price-monitoring',
+    },
+    {
+        title: 'Pembangunan Sistem Informasi Pelayanan Dokumen Hukum',
+        client: 'Badan Informasi Geospasial (BIG)',
+        year: 2014,
+    },
+    {
+        title: 'Pendampingan Helpdesk Implementasi Sistem Pelayanan Informasi dan Perizinan Investasi Secara Elektronik (SPIPISE)',
+        client: 'Badan Koordinasi Penanaman Modal (BKPM)',
+        year: 2013,
+        program: 'investment',
+    },
+    {
+        title: 'Pengadaan Jasa Konsultasi Pekerjaan Pembangunan Sub Sistem Bidang Ketahanan Lembaga Usaha Ekonomi',
+        client: 'Kementerian Perdagangan',
+        year: 2012,
+    },
+    {
+        title: 'Pendampingan Helpdesk Implementasi Sistem Pelayanan Informasi dan Perizinan Investasi Secara Elektronik (SPIPISE)',
+        client: 'Badan Koordinasi Penanaman Modal (BKPM)',
+        year: 2012,
+        program: 'investment',
+    },
+    {
+        title: 'Pembangunan Aplikasi Jaringan Dokumentasi dan Informasi Hukum',
+        client: 'Badan Informasi Geospasial (BIG)',
+        year: 2012,
+    },
+    {
+        title: 'Pengembangan Portal National Single Window for Investment (NSWI) untuk Mendukung SPIPISE BKPM',
+        client: 'Badan Koordinasi Penanaman Modal (BKPM)',
+        year: 2010,
+        program: 'investment',
+    },
+    {
+        title: 'Pembuatan Database Eksportir Importir, Perusahaan, Asosiasi dan Pelaku Industri Kreatif serta Lembaga Pendidikan Formal/Non Formal',
+        client: 'Departemen Perdagangan Republik Indonesia',
+        year: 2009,
+    },
+    {
+        title: 'Pembangunan Sistem Informasi Tracking Promosi Investasi Tahun Anggaran 2006',
+        client: 'Badan Koordinasi Penanaman Modal (BKPM)',
+        year: 2006,
+        program: 'investment',
+    },
+];
+
+const privateSector: Omit<Project, 'sector'>[] = [
+    {
+        title: 'Implementasi Odoo ERP',
+        client: 'Marawah Beach Club',
+        year: 2022,
+        program: 'erp',
+    },
+    {
+        title: 'Enhancement Manajemen Sistem',
+        client: 'PT Cipta Kridatama',
+        year: 2022,
+        program: 'erp',
+    },
+    {
+        title: 'Kegiatan Pengembangan dan Operasionalisasi Sistem Pemantauan Pasar Kebutuhan Pokok (SP2KP)',
+        client: 'PT LAPI ITB (Bapokstra)',
+        year: 2013,
+        program: 'price-monitoring',
+    },
+    {
+        title: 'Pengembangan Aplikasi GIS Pelaporan Online Harga',
+        client: 'PT DKN',
+        year: 2011,
+        program: 'price-monitoring',
+    },
+    {
+        title: 'Pengembangan Portal Ekonomi Kreatif Indonesia (www.indonesiakreatif.net)',
+        client: 'CV Multi Sarana Putra',
+        year: 2010,
+    },
+    {
+        title: 'Pengembangan Cetak Biru Teknologi Informasi Pusat Pengendalian Online Harga dan Stok',
+        client: 'PT Pranala Nitisala',
+        year: 2010,
+        program: 'price-monitoring',
+    },
+    {
+        title: 'Pembuatan Sistem Informasi Monitoring Penerimaan dan Pengeluaran BBM di Setiap Fasilitas Rantai Pasok BBM',
+        client: 'KSO LAPI – Pranala',
+        year: 2008,
+    },
+    {
+        title: 'Validasi dan Koreksi Data Akunting',
+        client: 'PT Lautan Berlian Utama Motor',
+        year: 2008,
+    },
+    {
+        title: 'Pengembangan, Pemutakhiran dan Pemeliharaan Website Tahun Anggaran 2007',
+        client: 'CV Multi Sarana Putra',
+        year: 2007,
+    },
+    {
+        title: 'Pembuatan Compact Disc (CD) Profil Wilayah, Sektor dan Komoditi',
+        client: 'PT Qualita Prima Pariwara',
+        year: 2007,
+    },
+    {
+        title: 'Pengembangan Aplikasi Titis Sampurna Accounting Information System',
+        client: 'PT Titis Sampurna',
+        year: 2006,
+    },
+    {
+        title: 'Jasa Konsultasi Pengembangan Sistem Informasi Eksekutif Keuangan',
+        client: 'CV Multi Sarana Putra',
+        year: 2006,
+    },
+    {
+        title: 'Desain Sistem Informasi Museum Bank Indonesia',
+        client: 'PT Global Media Inline',
+        year: 2006,
+    },
+];
+
+const soe: Omit<Project, 'sector'>[] = [
+    {
+        title: 'Pembangunan Sistem Aplikasi',
+        client: 'PT Sucofindo (Persero)',
+        year: 2015,
+    },
+    {
+        title: 'Jasa Pemeliharaan Sistem Merpati Operation System Infrastructure (MOSI), Mobile Flight Log (MFL), Schedule Messaging System (SMS)',
+        client: 'PT Merpati Nusantara Airlines',
+        year: 2006,
+    },
+];
+
+const newestFirst = (a: Project, b: Project) => b.year - a.year;
+
+export const projects: Project[] = [
+    ...government.map((p) => ({ ...p, sector: 'government' as const })),
+    ...privateSector.map((p) => ({ ...p, sector: 'private' as const })),
+    ...soe.map((p) => ({ ...p, sector: 'soe' as const })),
+].sort(newestFirst);
+
+/** Different names used over the years for the same institution. */
+const clientAliases: Record<string, string> = {
+    'Kementerian Investasi / Badan Koordinasi Penanaman Modal (BKPM)':
+        'Badan Koordinasi Penanaman Modal (BKPM)',
+    'Departemen Perdagangan Republik Indonesia': 'Kementerian Perdagangan',
+};
+
+const clientName = (project: Project) =>
+    clientAliases[project.client] ?? project.client;
+
+/** Number of distinct clients across all projects. */
+export const clientCount = new Set(projects.map(clientName)).size;
+
+/** Distinct clients in a sector, most frequent first. */
+export const clientsInSector = (sector: ProjectSector) => {
+    const counts = new Map<string, number>();
+
+    projects
+        .filter((project) => project.sector === sector)
+        .forEach((project) => {
+            const name = clientName(project);
+            counts.set(name, (counts.get(name) ?? 0) + 1);
+        });
+
+    return [...counts.entries()]
+        .sort((a, b) => b[1] - a[1])
+        .map(([name]) => name);
+};
+
+export const projectsBySector = (sector: ProjectSector) =>
+    projects.filter((project) => project.sector === sector);
+
+export const projectsInProgram = (program: ProjectProgram) =>
+    projects.filter((project) => project.program === program);
+
+/** e.g. "2006 – 2025", or a single year when all projects share it. */
+export const yearRange = (items: Project[]) => {
+    const years = items.map((project) => project.year);
+    const first = Math.min(...years);
+    const last = Math.max(...years);
+
+    return first === last ? `${first}` : `${first} – ${last}`;
+};

resources/js/data/site.ts

@@ -1,14 +1,17 @@
 import { about, clients, contact, services } from '@/routes';
 
+/**
+ * Language-independent company facts. Anything visitors read as prose lives
+ * in `resources/js/content` in both languages.
+ */
 export const company = {
     name: 'PT Probindo Artika Jaya',
     brand: 'Probindo',
-    abbreviation: 'PAJ',
+    /** Year the company was founded (as a trading company). */
     founded: 1985,
-    notary: 'Notaris Joenoes E. Maogimon, SH',
+    /** Year PAJ became an IT consultant; shown as "Est." on the site. */
+    established: 2002,
     logo: '/images/probindo/logo-paj.png',
-    tagline:
-        'Konsultan Sistem Informasi dan Teknologi Informasi terpercaya sejak 1985. Berdedikasi dalam desain, pembangunan, dan implementasi automated systems serta tailor-fit applications di Indonesia.',
     phone: { label: '+62 21 5789 5927', href: 'tel:+622157895927' },
     whatsapp: {
         label: '+62 811 8899 5927',
@@ -66,110 +69,13 @@ export const offices: Office[] = [
 export const officeAddress = (office: Office) =>
     [office.building, office.street, office.area, office.city].join(', ');
 
+/** Main menu; labels come from `common.nav` in the active language. */
 export const navigation = [
-    { label: 'Tentang Kami', href: about() },
+    { key: 'about', href: about() },
-    { label: 'Jasa', href: services() },
+    { key: 'services', href: services() },
-    { label: 'Klien', href: clients() },
+    { key: 'clients', href: clients() },
-    { label: 'Kontak', href: contact() },
+    { key: 'contact', href: contact() },
-];
+] as const;
 
 /** Anchor on the contact page that holds the full consultation form. */
 export const consultationUrl = `${contact.url()}#audit-form`;
-
-export type Service = {
-    title: string;
-    icon: string;
-    /** Short description used in overview grids. */
-    summary: string;
-    /** Official description used on the services page. */
-    description: string;
-    /** Spelled-out acronym rendered in front of the description. */
-    expansion?: string;
-    outcome: string;
-};
-
-export const officialServices: Service[] = [
-    {
-        title: 'Process Analysis',
-        icon: 'account_tree',
-        summary:
-            'Analisis mendalam mengenai alur kerja dan proses bisnis eksisting klien guna mengidentifikasi inefisiensi, memangkas bottleneck operasional, dan merumuskan sistem otomasi yang terukur.',
-        description:
-            'Analisis proses dibutuhkan untuk mengetahui kinerja dan keandalan proses suatu perusahaan. Oleh karena itu, disediakan pelayanan analisis proses sesuai dengan permintaan konsumen ataupun sebagai langkah awal dalam pembangunan perangkat lunak.',
-        outcome: 'Optimasi Alur Kerja Terukur',
-    },
-    {
-        title: 'Software Installation',
-        icon: 'install_desktop',
-        summary:
-            'Pemasangan dan penggelaran aplikasi tailor-fit pada infrastruktur klien (on-premise, cloud terisolasi, maupun hybrid) dengan kepatuhan konfigurasi database dan parameter keamanan ketat.',
-        description:
-            'Memberikan kemudahan pada setiap klien merupakan prioritas utama. Oleh karena itu, untuk setiap perangkat lunak yang disediakan, PAJ juga menyediakan jasa instalasi dan penyesuaian konfigurasi sesuai dengan kondisi di lapangan.',
-        outcome: 'Deploy Aman & Terverifikasi',
-    },
-    {
-        title: 'User Training',
-        icon: 'school',
-        summary:
-            'Pelatihan terstruktur bagi seluruh tingkat pengguna — dari staf operasional lapangan hingga admin sistem dan eksekutif — guna menjamin adopsi sistem yang lancar dan bebas hambatan.',
-        description:
-            'Seberapapun baiknya suatu perangkat lunak tidak akan berfungsi secara optimal tanpa adanya user yang baik pula. Untuk menjamin hal tersebut, disediakan jasa pelatihan untuk user langsung maupun supervisor user tersebut.',
-        outcome: 'Modul & Panduan Komprehensif',
-    },
-    {
-        title: 'Software Maintenance',
-        icon: 'build_circle',
-        summary:
-            'Layanan pemeliharaan sistem terencana dan berkesinambungan dengan garansi SLA tinggi untuk menjaga stabilitas, patching keamanan, serta integritas basis data operasional harian.',
-        description:
-            'Berakhirnya kontrak, tidak akan mengakibatkan tanggung jawab kepada klien. Untuk setiap software yang dibuat, PAJ menjamin kelangsungan jasa pemeliharaan atas jasa tersebut.',
-        outcome: 'Perawatan Rutin & Terjadwal',
-    },
-    {
-        title: 'Troubleshooting Handling',
-        icon: 'emergency',
-        summary:
-            'Penanganan insiden teknis cepat dan tanggap oleh tim engineer berpengalaman untuk mendeteksi akar masalah (root cause), memulihkan error data, dan meminimalkan waktu henti (downtime).',
-        description:
-            'Tidak ada gading yang tak retak, begitupun dengan software yang dibuat. Namun, setiap kesalahan yang mungkin terdapat dalam software tersebut akan secepat mungkin ditanggapi dan diperbaiki.',
-        outcome: 'Respon Cepat Tim Ahli Jakarta',
-    },
-    {
-        title: 'Sustainability Support',
-        icon: 'all_inclusive',
-        summary:
-            'Dukungan jangka panjang untuk memastikan sistem klien selalu relevan, sanggup berevolusi sejalan dengan pertumbuhan skala bisnis, dan dapat beradaptasi terhadap perubahan regulasi industri.',
-        description:
-            'Dukungan secara berkesinambungan terhadap software yang telah dibuat merupakan hal yang sudah semestinya. Setiap saat, segala keluhan maupun permintaan pengembangan dari konsumen akan direspon sesuai dengan kesepakatan yang telah dibuat.',
-        outcome: 'Skalabilitas & Evolusi Jangka Panjang',
-    },
-    {
-        title: 'SCSR',
-        icon: 'analytics',
-        expansion: 'System Capacity & Service Review',
-        summary:
-            'Audit berkala terhadap kapasitas beban komputasi, storage, latensi jaringan, serta efisiensi indexing data untuk mencegah saturasi sistem.',
-        description:
-            'Audit berkala terhadap kapasitas beban komputasi, storage, latensi jaringan, serta efisiensi indexing data untuk mencegah saturasi sistem.',
-        outcome: 'Audit Kapasitas & Reliabilitas',
-    },
-    {
-        title: 'Annual Review & Revise',
-        icon: 'update',
-        summary:
-            'Tinjauan tahunan komprehensif atas performa sistem, arsitektur data, dan kesesuaian modul operasional, diikuti revisi kode dan parameter untuk performa optimal di tahun berikutnya.',
-        description:
-            'Keadaan yang terus berubah membuat suatu software akan berkurang tingkat utilitas maupun efektivitasnya. Pemantauan terhadap software akan selalu dibuat dan dilaporkan kepada klien, termasuk pada saat revisi terbaru diluncurkan.',
-        outcome: 'Evaluasi Tahunan & Refactoring',
-    },
-];
-
-/** Options for the "service needed" select in every consultation form. */
-export const serviceOptions = [
-    ...officialServices.map((service, index) => ({
-        value: `service-${index + 1}`,
-        label: `${index + 1}. ${service.expansion ? `${service.title} (${service.expansion})` : service.title}`,
-    })),
-    { value: 'odoo', label: 'Implementasi Odoo ERP' },
-    { value: 'efaktur', label: 'Integrasi e-Faktur DJP' },
-];

resources/js/hooks/use-locale.ts

@@ -0,0 +1,37 @@
+import { router, usePage } from '@inertiajs/react';
+
+export type Locale = 'id' | 'en';
+
+/** Content written once per language, e.g. `{ id: {...}, en: {...} }`. */
+export type Localized<T> = Record<Locale, T>;
+
+const setCookie = (name: string, value: string, days = 365): void => {
+    const maxAge = days * 24 * 60 * 60;
+    document.cookie = `${name}=${value};path=/;max-age=${maxAge};SameSite=Lax`;
+};
+
+/**
+ * The visitor's language comes from the `locale` cookie, which the server
+ * reads (HandleLocale) and shares as a page prop. Switching stores the new
+ * choice and reloads the page props so every component re-renders in it.
+ */
+export function useLocale() {
+    const { locale } = usePage().props;
+
+    const setLocale = (next: Locale): void => {
+        if (next === locale) {
+            return;
+        }
+
+        setCookie('locale', next);
+        document.documentElement.lang = next;
+        router.reload();
+    };
+
+    return { locale, setLocale } as const;
+}
+
+/** Picks the current language's version of a localized content object. */
+export function useContent<T>(content: Localized<T>): T {
+    return content[useLocale().locale];
+}

resources/js/pages/site/about.tsx

@@ -6,173 +6,40 @@ import Glow from '@/components/site/glow';
 import Icon from '@/components/site/icon';
 import IconTile from '@/components/site/icon-tile';
 import ImageCard from '@/components/site/image-card';
-import PageHero, { Highlight, Strong } from '@/components/site/page-hero';
+import PageHero from '@/components/site/page-hero';
+import RichText from '@/components/site/rich-text';
 import Section from '@/components/site/section';
 import SectionHeader from '@/components/site/section-header';
 import CtaBanner from '@/components/site/sections/cta-banner';
 import StatCard from '@/components/site/stat-card';
-import { company, consultationUrl } from '@/data/site';
+import { aboutContent } from '@/content/about';
+import { clientsInSector, projectsBySector } from '@/data/projects';
+import { consultationUrl } from '@/data/site';
+import { useContent } from '@/hooks/use-locale';
 import { clients, services } from '@/routes';
 
-const milestones = [
-    {
-        year: '1985',
-        icon: 'domain',
-        title: 'Awal Berdiri & Fondasi Industri',
-        description: `Didirikan di Jakarta oleh ${company.notary}. Berawal dari aktivitas trading terkemuka di sektor Oil & Gas dan Industri Baja (Steel).`,
-        note: { icon: 'oil_barrel', label: 'Oil & Gas • Steel Procurement' },
-    },
-    {
-        year: '2002',
-        icon: 'precision_manufacturing',
-        title: 'Evolusi Teknologi Informasi (TI)',
-        description:
-            'Bertransformasi menjadi konsultan Sistem Informasi dan TI, memusatkan fokus pada perancangan, pembangunan, dan implementasi aplikasi bisnis otomatis.',
-        note: { icon: 'data_object', label: 'Automated Business Applications' },
-        featured: true,
-    },
-    {
-        year: 'KINI',
-        icon: 'hub',
-        title: 'Era Solusi Terintegrasi & ERP Modern',
-        description:
-            'Mengembangkan sistem operasional bisnis yang terotomasi (automated) dan tailor-fit sesuai alur unik klien, didukung ekosistem ERP enterprise teruji dan integrasi sesuai kebutuhan.',
-        note: { icon: 'verified', label: 'Odoo ERP • Modul Tailor-Fit' },
-    },
-];
-
-const statements = [
-    {
-        icon: 'visibility',
-        label: 'Visi Resmi PT Probindo Artika Jaya',
-        text: 'Menjadi perusahaan konsultan dibidang sistem informasi dan informasi teknologi yang dapat diandalkan dalam hal desain, pembangunan dan implementasi fully-automated dan tailor-fit applications untuk setiap kebutuhan klien.',
-        footer: {
-            icon: 'check_circle',
-            label: 'Fokus Keandalan, Custom-Engineered Architecture, Bebas Keterikatan Template Statis.',
-        },
-    },
-    {
-        icon: 'flag',
-        label: 'Misi Resmi PT Probindo Artika Jaya',
-        text: 'Membantu klien untuk mengoptimalkan proses bisnisnya, tidak hanya dengan mengotomatisasi sistem informasi yang ada tetapi juga memberikan solusi yang dapat mempercepat proses perencanaan, pengambilan keputusan dan analisis performansi proses bisnis yang telah dilakukannya.',
-        footer: {
-            icon: 'insights',
-            label: 'Akselerasi Pengambilan Keputusan Strategis & Analisis Kinerja Terukur.',
-        },
-    },
-];
-
-const pillars = [
-    {
-        icon: 'lightbulb',
-        title: 'Inovasi & Invention',
-        description:
-            'Karakter dinamis yang melekat kuat untuk selalu menjawab dinamika tantangan baru alur bisnis klien melalui terobosan metode rekayasa teknologi terkini.',
-        footer: 'Karakter Dinamis',
-    },
-    {
-        icon: 'security',
-        title: 'Proven Technology',
-        description:
-            'Menguasai dan menerapkan teknologi yang telah teruji stabilitas dan keandalannya di lapangan produksi, sehingga secara konsisten meminimalkan risiko operasional bisnis.',
-        footer: 'Stabilitas Teruji',
-    },
-    {
-        icon: 'architecture',
-        title: 'Tailor-Fit Architecture',
-        description:
-            'Menyesuaikan sistem secara presisi dengan alur kerja riil organisasi. Kami menolak pendekatan template kaku generik yang justru membebani workflow pengguna.',
-        footer: 'Presisi Operasional',
-    },
-    {
-        icon: 'published_with_changes',
-        title: 'End-to-End Commitment',
-        description:
-            'Pendampingan paripurna dari analisis proses awal, instalasi software, pelatihan intensif pengguna, hingga kepastian SLA pemeliharaan berkelanjutan dan audit tahunan.',
-        footer: 'Siklus Paripurna',
-    },
-];
-
-const industries = [
-    {
-        src: '/images/probindo/industry-oil-gas.jpg',
-        alt: 'Ruang instrumentasi kilang dan anjungan minyak lepas pantai',
-        eyebrow: 'Sektor Energi',
-        title: 'Minyak & Gas Bumi',
-        description:
-            'Kontrol inventaris material kritis, kepatuhan keselamatan, dan integrasi rantai pengadaan hulu-hilir.',
-    },
-    {
-        src: '/images/probindo/industry-steel.jpg',
-        alt: 'Pabrik pengolahan baja dengan mesin fabrikasi presisi',
-        eyebrow: 'Heavy Industry',
-        title: 'Fabrikasi & Pengolahan Baja',
-        description:
-            'Otomasi BOM (Bill of Materials) multi-level, penjejakan batch produksi, dan akuntansi biaya pabrikasi.',
-    },
-    {
-        src: '/images/probindo/industry-logistics.jpg',
-        alt: 'Gudang distribusi otomatis dengan pemindai barcode',
-        eyebrow: 'Logistics & Hub',
-        title: 'Manufaktur & Rantai Pasok',
-        description:
-            'Sinkronisasi gudang multi-cabang real-time, cross-docking otomatis, dan monitoring delivery order terpusat.',
-    },
-    {
-        src: '/images/probindo/industry-corporate.jpg',
-        alt: 'Ruang rapat eksekutif dengan dasbor enterprise',
-        eyebrow: 'Corporate & Services',
-        title: 'Korporasi & Komersial',
-        description:
-            'Integrasi e-Faktur DJP, pelaporan laba-rugi multi-entitas konsolidasi, dan otomasi siklus approval bisnis.',
-    },
-];
-
 export default function About() {
+    const t = useContent(aboutContent);
+
     return (
         <>
-            <Head title="Tentang Kami" />
+            <Head title={t.title} />
 
             <PageHero
-                badge="Est. 1985 • IT & Automated Systems Consultant"
+                badge={t.hero.badge}
-                title={
+                title={<RichText text={t.hero.title} />}
-                    <>
+                description={<RichText text={t.hero.description} />}
-                        Menjadi Mitra Terpercaya, Memberdayakan{' '}
-                        <Highlight>Inovasi Teknologi</Highlight> untuk
-                        Pertumbuhan Anda
-                    </>
-                }
-                description={
-                    <>
-                        PT Probindo Artika Jaya (PAJ) hadir sebagai konsultan
-                        teknologi informasi dan perancang aplikasi bisnis
-                        otomatis (<Strong>automated &amp; tailor-fit</Strong>)
-                        untuk mendukung efisiensi korporasi di Indonesia.
-                    </>
-                }
             >
                 <div className="grid grid-cols-1 items-stretch gap-6 lg:grid-cols-12">
                     <ImageCard
                         src="/images/probindo/about-team.jpg"
-                        alt="Tim konsultan PAJ berkolaborasi di ruang kendali teknologi"
+                        {...t.hero.image}
-                        eyebrow="Integritas & Rekayasa Sistem"
-                        title="Keahlian Mendalam Rancang Bangun Arsitektur ERP & Otomasi Enterprise"
-                        description={`Beroperasi di bawah akta resmi ${company.notary} dengan dedikasi lebih dari tiga dekade melayani spektrum korporasi nasional.`}
                         className="min-h-[360px] lg:col-span-8 lg:min-h-[440px]"
                     />
                     <div className="grid grid-cols-2 gap-4 lg:col-span-4 lg:grid-cols-1">
-                        <StatCard
+                        {t.hero.stats.map((stat) => (
-                            value="39+"
+                            <StatCard key={stat.label} {...stat} />
-                            unit="Tahun"
+                        ))}
-                            label="Heritage • Pengalaman"
-                            description={`Didirikan pada tahun ${company.founded} di Jakarta oleh ${company.notary}.`}
-                        />
-                        <StatCard
-                            value="100+"
-                            unit="Enterprise"
-                            label="Klien • Portofolio"
-                            description="Solusi tailor-fit terpercaya untuk migas, industri baja, manufaktur, dan korporasi nasional."
-                        />
                         <Card className="col-span-2 flex items-center justify-between lg:col-span-1">
                             <div className="flex flex-col">
                                 <span className="font-display text-on-surface text-3xl font-bold">
@@ -192,12 +59,12 @@ export default function About() {
                 <div className="flex flex-col gap-12">
                     <SectionHeader
                         align="split"
-                        eyebrow="Evolusi & Ketahanan"
+                        eyebrow={t.history.eyebrow}
-                        title="Rekam Jejak & Transformasi Perusahaan"
+                        title={t.history.title}
-                        description="Dari perdagangan komoditas strategis nasional hingga menjadi pilar konsultan otomasi proses bisnis digital enterprise terdepan."
+                        description={t.history.description}
                     />
                     <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
-                        {milestones.map((milestone) => (
+                        {t.history.milestones.map((milestone) => (
                             <Card
                                 key={milestone.year}
                                 interactive
@@ -242,12 +109,12 @@ export default function About() {
                 <div className="flex flex-col gap-12">
                     <SectionHeader
                         align="center"
-                        eyebrow="Arah Fundamental"
+                        eyebrow={t.visionMission.eyebrow}
-                        title="Visi & Misi PT Probindo Artika Jaya"
+                        title={t.visionMission.title}
-                        description="Pernyataan komitmen institusional resmi yang mengarahkan setiap perancangan arsitektur dan penjaminan kualitas sistem bagi para mitra kami."
+                        description={t.visionMission.description}
                     />
                     <div className="grid grid-cols-1 items-stretch gap-6 lg:grid-cols-2">
-                        {statements.map((statement) => (
+                        {t.visionMission.statements.map((statement) => (
                             <Card
                                 key={statement.label}
                                 padding="lg"
@@ -285,19 +152,14 @@ export default function About() {
             <Section>
                 <div className="flex flex-col gap-12">
                     <SectionHeader
-                        eyebrow="Karakter & Nilai Inti"
+                        eyebrow={t.philosophy.eyebrow}
-                        title="Filosofi Kompetensi Kami"
+                        title={t.philosophy.title}
                         description={
-                            <>
+                            <RichText text={t.philosophy.description} />
-                                Meramu Inovasi, Penemuan (
-                                <Strong>Invention</Strong>), dan Penguasaan
-                                Teknologi Teruji (
-                                <Strong>Proven Technology</Strong>).
-                            </>
                         }
                     />
                     <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-4">
-                        {pillars.map((pillar) => (
+                        {t.philosophy.pillars.map((pillar) => (
                             <FeatureCard key={pillar.title} {...pillar} />
                         ))}
                     </div>
@@ -308,8 +170,8 @@ export default function About() {
                 <div className="flex flex-col gap-12">
                     <SectionHeader
                         align="split"
-                        eyebrow="Cakupan Keahlian Industri"
+                        eyebrow={t.industries.eyebrow}
-                        title="Sektor Industri yang Kami Layani"
+                        title={t.industries.title}
                         aside={
                             <ButtonLink
                                 href={clients()}
@@ -317,14 +179,66 @@ export default function About() {
                                 size="inline"
                                 trailingIcon="arrow_forward"
                             >
-                                Lihat Portofolio Klien Resmi
+                                {t.industries.link}
                             </ButtonLink>
                         }
                     />
-                    <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-4">
+                    <div className="grid grid-cols-1 gap-5 md:grid-cols-3">
-                        {industries.map((industry) => (
+                        {t.industries.items.map((item) => {
-                            <ImageCard key={industry.title} {...industry} />
+                            const clientNames = clientsInSector(item.sector);
-                        ))}
+
+                            return (
+                                <Card
+                                    key={item.sector}
+                                    interactive
+                                    className="flex flex-col gap-4"
+                                >
+                                    <div className="flex items-center justify-between gap-3">
+                                        <IconTile
+                                            icon={item.icon}
+                                            size="md"
+                                            groupHover
+                                        />
+                                        <span className="text-primary font-mono text-xs font-semibold">
+                                            {clientNames.length}{' '}
+                                            {t.industries.clients} ·{' '}
+                                            {
+                                                projectsBySector(item.sector)
+                                                    .length
+                                            }{' '}
+                                            {t.industries.projects}
+                                        </span>
+                                    </div>
+                                    <h3 className="font-display text-on-surface text-xl font-bold">
+                                        {item.title}
+                                    </h3>
+                                    <p className="text-on-surface-variant text-sm leading-relaxed">
+                                        {item.description}
+                                    </p>
+                                    <div className="border-outline-variant/30 mt-auto border-t pt-4">
+                                        <span className="text-primary font-mono text-[11px] font-bold uppercase">
+                                            {t.industries.examples}
+                                        </span>
+                                        <ul className="text-on-surface mt-2 flex flex-col gap-1 text-sm">
+                                            {clientNames
+                                                .slice(0, 3)
+                                                .map((name) => (
+                                                    <li
+                                                        key={name}
+                                                        className="flex items-start gap-1.5"
+                                                    >
+                                                        <Icon
+                                                            name="check"
+                                                            className="text-primary mt-0.5 text-base"
+                                                        />
+                                                        {name}
+                                                    </li>
+                                                ))}
+                                        </ul>
+                                    </div>
+                                </Card>
+                            );
+                        })}
                     </div>
                 </div>
             </Section>
@@ -335,32 +249,29 @@ export default function About() {
                         <IconTile icon="verified_user" size="lg" />
                         <div className="flex flex-col">
                             <span className="font-display text-on-surface text-lg font-bold">
-                                Legalitas Resmi &amp; Kepatuhan Pajak Terpadu
+                                {t.legal.title}
                             </span>
                             <p className="text-on-surface-variant text-sm">
-                                Terdaftar di Kemenkumham RI, {company.notary} (
+                                {t.legal.description}
-                                {company.founded}), beroperasi dari Software
-                                Engineering Center di Bintaro dan Business
-                                Development Center di Plaza Simatupang.
                             </p>
                         </div>
                     </div>
                     <div className="flex w-full shrink-0 items-center justify-end gap-6 lg:w-auto">
                         <div className="flex flex-col text-right">
                             <span className="text-primary font-mono text-[11px] font-bold uppercase">
-                                Kantor Operasional
+                                {t.legal.officeLabel}
                             </span>
                             <span className="font-display text-on-surface text-lg font-semibold">
-                                Jakarta Selatan
+                                {t.legal.officeValue}
                             </span>
                         </div>
                         <div className="bg-outline-variant/60 hidden h-10 w-px sm:block" />
                         <div className="flex flex-col text-right">
                             <span className="text-primary font-mono text-[11px] font-bold uppercase">
-                                Standardisasi
+                                {t.legal.standardLabel}
                             </span>
                             <span className="font-display text-on-surface text-lg font-semibold">
-                                Enterprise SLA
+                                {t.legal.standardValue}
                             </span>
                         </div>
                     </div>
@@ -368,20 +279,20 @@ export default function About() {
             </Section>
 
             <CtaBanner
-                badge="Konsultasi Teknis & Audit Infrastruktur"
+                badge={t.cta.badge}
-                title="Siap Mengoptimalkan Sistem & Otomasi Bisnis Anda?"
+                title={t.cta.title}
-                description="Diskusikan kebutuhan sistem Anda bersama konsultan senior PT Probindo Artika Jaya. Kami siap melakukan evaluasi proses bisnis, audit arsitektur sistem eksisting, atau solusi implementasi Odoo ERP yang tepat sasaran."
+                description={t.cta.description}
                 actions={
                     <>
                         <ButtonLink href={consultationUrl} icon="send">
-                            Jadwalkan Konsultasi IT
+                            {t.cta.primary}
                         </ButtonLink>
                         <ButtonLink
                             href={services()}
                             variant="secondary"
                             icon="layers"
                         >
-                            Pelajari 8 Jasa Kami
+                            {t.cta.secondary}
                         </ButtonLink>
                     </>
                 }

resources/js/pages/site/clients.tsx

@@ -1,246 +1,46 @@
 import { Head } from '@inertiajs/react';
 import { useState } from 'react';
-import { ButtonLink } from '@/components/site/button';
+import { Button, ButtonLink } from '@/components/site/button';
 import Card from '@/components/site/card';
 import Eyebrow from '@/components/site/eyebrow';
 import FeatureCard from '@/components/site/feature-card';
-import Glow from '@/components/site/glow';
 import Icon from '@/components/site/icon';
 import IconTile from '@/components/site/icon-tile';
 import ImageCard from '@/components/site/image-card';
-import PageHero, { Highlight } from '@/components/site/page-hero';
+import PageHero from '@/components/site/page-hero';
+import RichText from '@/components/site/rich-text';
 import Section from '@/components/site/section';
 import SectionHeader from '@/components/site/section-header';
 import CtaBanner from '@/components/site/sections/cta-banner';
+import { clientsContent } from '@/content/clients';
+import type { ProjectSector } from '@/data/projects';
+import {
+    projectsBySector,
+    projectsInProgram,
+    yearRange,
+} from '@/data/projects';
 import { company, consultationUrl, officeAddress, offices } from '@/data/site';
+import { useContent } from '@/hooks/use-locale';
 import { cn } from '@/lib/utils';
 import { contact } from '@/routes';
 
-type Sector = 'energy' | 'steel' | 'corporate';
+type Content = typeof clientsContent.id;
-
-const filters: { value: Sector | 'all'; label: string }[] = [
-    { value: 'all', label: 'Semua Sektor (5)' },
-    { value: 'energy', label: 'Migas & Energi' },
-    { value: 'steel', label: 'Baja & Manufaktur' },
-    { value: 'corporate', label: 'Holding & BUMN' },
-];
-
-const heroStats = [
-    { value: '100+', caption: 'Proyek Enterprise & BUMN' },
-    { value: '40+ Thn', caption: 'Integritas Reputasi (Est. 1985)' },
-    { value: '99.8%', caption: 'Tingkat Retensi & Kepuasan' },
-    { value: '0%', caption: 'Vendor Lock-in Terbuka' },
-];
-
-type IndustrySector = {
-    sector: Sector;
-    icon: string;
-    code: string;
-    tag: string;
-    title: string;
-    description: string;
-    details: { label: string; text: string }[];
-    footnote: string;
-    wide?: boolean;
-};
-
-const industrySectors: IndustrySector[] = [
-    {
-        sector: 'energy',
-        icon: 'local_fire_department',
-        code: 'SEKTOR 01 // MIGAS & ENERGI',
-        tag: 'Hulu - Hilir & Offshore',
-        title: 'Minyak, Gas & Energi (Oil & Gas Infrastructure)',
-        description:
-            'Arsitektur penanganan aset berisiko tinggi dengan validasi berlapis untuk menjaga kontinuitas suplai serta kepatuhan ketat audit operasional SKK Migas.',
-        details: [
-            {
-                label: 'Karakteristik Kebutuhan Sistem',
-                text: 'Inventory tracing material kritis, kepatuhan keselamatan kilang kerja, otomatisasi pengadaan & logistik kapal lepas pantai, serta sinkronisasi telemetri multi-site.',
-            },
-            {
-                label: 'Solusi yang Diimplementasikan',
-                text: 'Tailor-fit ERP supply chain, specialized barcode asset tracking, customized multi-tiered approval pipeline dengan verifikasi digital.',
-            },
-        ],
-        footnote: 'Kepatuhan Operasi: ISO 9001 / SKK Migas',
-        wide: true,
-    },
-    {
-        sector: 'steel',
-        icon: 'precision_manufacturing',
-        code: 'SEKTOR 02 // METALURGI',
-        tag: 'Heavy Steel',
-        title: 'Fabrikasi & Pengolahan Baja',
-        description:
-            'Otomasi perhitungan yield peleburan presisi tinggi dan integrasi rantai produksi dari bahan mentah hingga sertifikat mutu akhir.',
-        details: [
-            {
-                label: 'Fitur Utama Arsitektur',
-                text: 'Modul spesifik BOM multi-level, manajemen heat-treatment baja, pencatatan scrap & yield otomatis, serta verifikasi sertifikat material uji (Mill Test Cert).',
-            },
-            {
-                label: 'Paket Solusi PAJ',
-                text: 'SCADA to ERP bridge engine, custom manufacturing execution modules & Quality Assurance Tracker.',
-            },
-        ],
-        footnote: 'Presisi BOM: 99.9% Akurasi',
-    },
-    {
-        sector: 'steel',
-        icon: 'local_shipping',
-        code: 'SEKTOR 03 // LOGISTIK',
-        tag: 'Supply Chain',
-        title: 'Manufaktur & Logistik Terpadu',
-        description:
-            'Sinkronisasi rantai pasok multi-gudang secara real-time dengan algoritma penilaian persediaan akurat.',
-        details: [
-            {
-                label: 'Spesifikasi Sistem',
-                text: 'Multi-warehouse inventory, otomatisasi replenishment dinamis, cross-docking tracking, barcode/RFID scanner terintegrasi, dan valuasi FIFO/Average otomatis.',
-            },
-            {
-                label: 'Solusi PAJ',
-                text: 'Odoo Custom Supply Chain Suite, live dispatch scheduling, dan mobile warehouse barcode system.',
-            },
-        ],
-        footnote: 'Latency Tracking: < 0.8 Detik',
-    },
-    {
-        sector: 'corporate',
-        icon: 'account_balance',
-        code: 'SEKTOR 04 // ENTERPRISE & BUMN',
-        tag: 'Financial Core',
-        title: 'Korporasi Swasta, Holding & BUMN Nasional',
-        description:
-            'Arsitektur sentralisasi keuangan grup dengan keselarasan regulasi perpajakan Indonesia, dirancang untuk auditabilitas instan dan tata kelola korporat terbuka.',
-        details: [
-            {
-                label: 'Karakteristik & Kepatuhan',
-                text: 'Konsolidasi neraca multi-company, otomasi e-Faktur Pajak DJP terintegrasi langsung tanpa input berulang, eliminasi resiko denda fiskal, dan audit trail lengkap.',
-            },
-            {
-                label: 'Jenis Solusi PAJ',
-                text: 'Odoo ERP Enterprise Financials, dedicated DJP e-Faktur API Bridge, multi-currency ledger, dan Executive Boardroom C-Suite Dashboard.',
-            },
-        ],
-        footnote: 'Integrasi Resmi: DJP e-Faktur Ready',
-        wide: true,
-    },
-];
-
-const caseStudies = [
-    {
-        icon: 'anchor',
-        title: 'Otomasi Siklus Supply Chain & Logistik Migas Lepas Pantai',
-        client: 'Klien Eksplorasi & Pengeboran Lepas Pantai',
-        challenge:
-            'Tingginya waktu tunggu suku cadang kritis rig pengeboran akibat proses pengadaan birokratis dan ketidakcocokan inventaris antar kapal suplai.',
-        solution:
-            'Implementasi tailor-fit inventory hub dengan offline sync capability di kapal kru dan otomatisasi persetujuan anggaran berjenjang.',
-        results: [
-            ['Waktu Pengadaan Material', '-65%'],
-            ['Keterlambatan Kapal Kerja', 'Nol Insiden'],
-            ['Kepatuhan Audit SKK', '100% Lolos'],
-        ],
-    },
-    {
-        icon: 'factory',
-        title: 'Integrasi ERP Manufaktur Fabrikasi Baja & Uji Mutu',
-        client: 'Produsen Baja Konstruksi & Pipa Berat',
-        challenge:
-            'Perhitungan estimasi bahan baku sering meleset akibat kompleksitas pemotongan baja (cutting optimization) dan sertifikat mill test manual.',
-        solution:
-            'Engine kustom integrasi SCADA mesin potong plasma dengan modul ERP Bill of Materials dan repository digital sertifikasi mutu.',
-        results: [
-            ['Akurasi Perhitungan BOM', '99.9% Presisi'],
-            ['Traceability Serial Leburan', 'Instan < 5 Detik'],
-            ['Reduksi Scrap Material', '-18.4%'],
-        ],
-    },
-    {
-        icon: 'account_balance_wallet',
-        title: 'Transformasi Multi-Company Odoo & Integrasi e-Faktur DJP',
-        client: 'Holding Grup Distribusi & Ritel Nasional',
-        challenge:
-            'Penerbitan 15.000+ faktur pajak per bulan dilakukan via input ganda terpisah yang memicu keterlambatan pelaporan SPT bulanan hingga 2 pekan.',
-        solution:
-            'Implementasi Odoo ERP terpusat dengan direct bridge connector DJP Pajak otomatis, QR Code approval, dan auto-reconciliation perbankan.',
-        results: [
-            ['Rekonsiliasi Pajak Bulanan', '2 Hari (Dulu 14 Hari)'],
-            ['Kesalahan Entri Faktur', '0% (Zero Error)'],
-            ['Penerbitan Laporan Holding', 'Otomatis H+1'],
-        ],
-    },
-];
-
-const reasons = [
-    {
-        icon: 'handshake',
-        title: 'Hubungan Jangka Panjang (SCSR)',
-        description:
-            'Pemeliharaan berkesinambungan dan program Special CSR berkala memastikan sistem Anda senantiasa relevan mengikuti ekspansi kapasitas bisnis.',
-    },
-    {
-        icon: 'lock_open',
-        title: 'Bebas Keterikatan Vendor',
-        description:
-            'Full source code handover & arsitektur modular mandiri. PAJ memberikan kebebasan mutlak bagi klien atas kepemilikan aset perangkat lunaknya.',
-    },
-    {
-        icon: 'gavel',
-        title: 'Kepatuhan Regulasi Nasional',
-        description:
-            'Kepatuhan langsung sistem akuntansi terhadap peraturan Ditjen Pajak (DJP e-Faktur terintegrasi), standar audit PSAK, dan peraturan kementerian terkait.',
-    },
-    {
-        icon: 'support_agent',
-        title: 'SLA Tanggap Darurat Khusus',
-        description:
-            'Dukungan teknis dedicated tingkat lead architect dengan target mitigasi masalah kritis cepat demi menjaga uptime operasional industri non-stop.',
-    },
-];
-
-const testimonials = [
-    {
-        initials: 'DO',
-        quote: 'Keahlian teknis tim PAJ dalam memahami proses rolling baja dan pemetaan sertifikat heat treatment sangat luar biasa. Sistem berjalan stabil tanpa kendala berarti selama lebih dari 6 tahun operasional.',
-        role: 'Direktur Operasional',
-        organization: 'Manufaktur Baja & Fabrikasi Logam',
-    },
-    {
-        initials: 'HI',
-        quote: 'Integrasi Odoo dengan bridging DJP Faktur memangkas beban kerja departemen akuntansi kami secara drastis. Yang paling berharga adalah transparansi arsitekturnya, tidak ada ketergantungan yang menyulitkan.',
-        role: 'Head of Enterprise IT',
-        organization: 'Holding Korporasi & Ritel Nasional',
-    },
-    {
-        initials: 'ML',
-        quote: 'Di industri migas, keandalan sistem material tracing adalah penentu keselamatan kerja rig. PAJ merancang alur verifikasi logistik yang sangat presisi dan mampu bertahan di koneksi satelit minim.',
-        role: 'Manajer Logistik & Rantai Pasok',
-        organization: 'Konsorsium Migas Lepas Pantai',
-    },
-];
 
 export default function Clients() {
+    const t = useContent(clientsContent);
+
     return (
         <>
-            <Head title="Klien & Portofolio" />
+            <Head title={t.title} />
 
             <PageHero
                 align="center"
-                badge="Kemitraan Strategis & Portofolio Klien // PT Probindo Artika Jaya"
+                badge={t.hero.badge}
-                title={
+                title={<RichText text={t.hero.title} />}
-                    <>
+                description={t.hero.description}
-                        Kepercayaan Industri Terkemuka,{' '}
-                        <Highlight>Rekam Jejak 40+ Tahun</Highlight>{' '}
-                        Transformasi Digital
-                    </>
-                }
-                description="“Kami mengucapkan terima kasih atas kepercayaan dan dukungan Anda sebagai klien kami. Sebagai tim konsultan IT di PT Probindo Artika Jaya (PAJ), kami berkomitmen untuk menyediakan solusi teknologi informasi yang berkualitas tinggi, tailor-fit, dan memberikan nilai tambah nyata bagi kesinambungan bisnis Anda.”"
             >
                 <Card className="grid w-full max-w-5xl grid-cols-2 gap-4 md:grid-cols-4">
-                    {heroStats.map((stat) => (
+                    {t.hero.stats.map((stat) => (
                         <div
                             key={stat.caption}
                             className="bg-surface-container flex flex-col items-center justify-center rounded-lg p-4 text-center"
@@ -260,137 +60,56 @@ export default function Clients() {
                 <div className="grid grid-cols-1 items-center gap-8 lg:grid-cols-12">
                     <div className="flex flex-col gap-6 lg:col-span-5">
                         <Eyebrow icon="verified_user">
-                            Warisan Teknis Sejak 1985
+                            {t.heritage.eyebrow}
                         </Eyebrow>
                         <h2 className="font-display text-on-surface lg:text-headline-xl text-3xl leading-tight font-extrabold">
-                            Fondasi Rekayasa Industri Menuju Otomasi Mutakhir
+                            {t.heritage.title}
                         </h2>
                         <p className="text-on-surface-variant text-base leading-relaxed">
-                            Berakar kuat dari kiprah awal perseroan pada sektor
+                            {t.heritage.description}
-                            perdagangan migas dan baja berat di era 1980-an, PAJ
-                            berevolusi penuh pada 2002 menjadi sentra konsultan
-                            sistem informasi terpadu. Pemahaman mendalam
-                            mengenai dinamika lapangan, kepatuhan fiskal
-                            nasional, serta kompleksitas supply chain menjadikan
-                            solusi PAJ berakar pada kenyataan operasional, bukan
-                            sekadar perangkat lunak generik.
                         </p>
                         <Card padding="sm" className="flex items-start gap-4">
                             <IconTile icon="hub" tone="solid" />
                             <div>
                                 <h3 className="font-display text-on-surface text-lg font-semibold">
-                                    Special CSR (SCSR) Architecture
+                                    {t.heritage.scsrTitle}
                                 </h3>
                                 <p className="text-on-surface-variant mt-1 text-sm">
-                                    Sistem pendampingan kapasitas berkelanjutan
+                                    {t.heritage.scsrText}
-                                    memastikan kapabilitas internal klien
-                                    meningkat secara mandiri tanpa jebakan
-                                    lisensi tertutup.
                                 </p>
                             </div>
                         </Card>
                     </div>
                     <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:col-span-7">
-                        <ImageCard
+                        {t.heritage.images.map((image, index) => (
-                            src="/images/probindo/clients-operations-center.jpg"
+                            <ImageCard
-                            alt="Pusat operasi rekayasa dengan monitor telemetri industri"
+                                key={image.src}
-                            eyebrow="Heavy Industry Matrix"
+                                {...image}
-                            title="Migas & Fabrikasi Metalurgi"
+                                className={
-                        />
+                                    index === 1 ? 'sm:translate-y-8' : ''
-                        <ImageCard
+                                }
-                            src="/images/probindo/clients-erp-dashboard.jpg"
+                            />
-                            alt="Dasbor ERP enterprise dengan sinkronisasi pajak DJP"
-                            eyebrow="Enterprise Core"
-                            title="Holding Multinasional & BUMN"
-                            className="sm:translate-y-8"
-                        />
-                    </div>
-                </div>
-            </Section>
-
-            <SectorPortfolio />
-
-            <Section>
-                <div className="flex flex-col gap-12">
-                    <SectionHeader
-                        eyebrow="Impact Stories // Rekam Jejak Unggulan"
-                        title="Studi Kasus Efisiensi & Keberhasilan Terukur"
-                        description="Bukti nyata transformasi arsitektur digital teruji di lingkungan operasional bertekanan tinggi dengan metodologi PAJ."
-                    />
-                    <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
-                        {caseStudies.map((study, index) => (
-                            <Card
-                                key={study.title}
-                                padding="none"
-                                className="flex flex-col overflow-hidden"
-                            >
-                                <div className="bg-surface-container flex flex-col gap-3 p-6">
-                                    <div className="flex items-center justify-between">
-                                        <span className="text-primary font-mono text-xs font-bold">
-                                            STUDI KASUS 0{index + 1}
-                                        </span>
-                                        <Icon
-                                            name={study.icon}
-                                            className="text-on-surface-variant text-xl"
-                                        />
-                                    </div>
-                                    <h3 className="font-display text-on-surface text-lg leading-snug font-bold">
-                                        {study.title}
-                                    </h3>
-                                    <span className="text-highlight text-xs font-semibold">
-                                        {study.client}
-                                    </span>
-                                </div>
-                                <div className="flex flex-1 flex-col justify-between gap-6 p-6">
-                                    <div className="space-y-4">
-                                        <DetailBlock
-                                            label="Tantangan Klien"
-                                            text={study.challenge}
-                                        />
-                                        <DetailBlock
-                                            label="Solusi Arsitektur PAJ"
-                                            text={study.solution}
-                                        />
-                                    </div>
-                                    <div className="bg-surface-container-high flex flex-col gap-2 rounded-lg p-4">
-                                        <span className="text-highlight font-mono text-[11px] font-bold">
-                                            DAMPAK TERVERIFIKASI:
-                                        </span>
-                                        {study.results.map(
-                                            ([metric, result]) => (
-                                                <div
-                                                    key={metric}
-                                                    className="flex items-baseline justify-between gap-3"
-                                                >
-                                                    <span className="text-on-surface text-sm">
-                                                        {metric}
-                                                    </span>
-                                                    <span className="text-primary shrink-0 font-mono text-sm font-bold">
-                                                        {result}
-                                                    </span>
-                                                </div>
-                                            ),
-                                        )}
-                                    </div>
-                                </div>
-                            </Card>
                         ))}
                     </div>
                 </div>
             </Section>
 
+            <SectorPortfolio t={t} />
+
+            <FeaturedPrograms t={t} />
+
             <Section tone="muted">
                 <div className="flex flex-col gap-12">
                     <SectionHeader
                         align="center"
-                        eyebrow="Nilai Inti Kemitraan"
+                        eyebrow={t.reasons.eyebrow}
-                        title="Mengapa Mitra Korporasi Memilih PAJ Sejak 1985"
+                        title={t.reasons.title}
-                        description="Komitmen arsitektur terbuka dan pendampingan tanpa henti menciptakan relasi kemitraan yang melintasi dekade."
+                        description={t.reasons.description}
                     />
                     <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
-                        {reasons.map((reason) => (
+                        {t.reasons.items.map((reason) => (
                             <FeatureCard
-                                key={reason.title}
+                                key={reason.icon}
                                 iconTone="solid"
                                 {...reason}
                             />
@@ -403,12 +122,12 @@ export default function Clients() {
                 <div className="flex flex-col gap-12">
                     <SectionHeader
                         align="split"
-                        eyebrow="Suara Mitra Kami"
+                        eyebrow={t.testimonials.eyebrow}
-                        title="Testimoni & Pernyataan Kepercayaan"
+                        title={t.testimonials.title}
-                        description="Apresiasi nyata atas komitmen tanpa henti dari tim konsultan teknis PT Probindo Artika Jaya."
+                        description={t.testimonials.description}
                     />
                     <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
-                        {testimonials.map((testimonial) => (
+                        {t.testimonials.items.map((testimonial) => (
                             <Card
                                 key={testimonial.initials}
                                 className="flex flex-col justify-between gap-6"
@@ -416,7 +135,7 @@ export default function Clients() {
                                 <div className="space-y-4">
                                     <div
                                         className="text-primary flex"
-                                        aria-label="Rating 5 dari 5"
+                                        aria-label={t.testimonials.rating}
                                     >
                                         {Array.from({ length: 5 }, (_, i) => (
                                             <Icon key={i} name="star" filled />
@@ -451,22 +170,15 @@ export default function Clients() {
                     className="flex flex-col items-center justify-between gap-10 lg:flex-row lg:p-12"
                 >
                     <div className="max-w-xl">
-                        <Eyebrow>Reliability Index &amp; Audit Trail</Eyebrow>
+                        <Eyebrow>{t.reliability.eyebrow}</Eyebrow>
                         <h2 className="font-display text-headline-lg text-on-surface mt-3 mb-4 font-bold">
-                            Stabilitas Operasional di Atas Standar Industri
+                            {t.reliability.title}
                         </h2>
                         <p className="text-on-surface-variant mb-6 text-base leading-relaxed">
-                            Setiap sistem yang dibangun oleh tim insinyur PAJ
+                            {t.reliability.description}
-                            melalui protokol verifikasi beban puncak (stress
-                            test), audit kepatuhan tahunan, serta program
-                            pemeliharaan terstruktur guna memastikan ketiadaan
-                            downtime tidak terencana.
                         </p>
                         <div className="grid grid-cols-2 gap-4">
-                            {[
+                            {t.reliability.metrics.map(([value, label]) => (
-                                ['99.98%', 'System Availability'],
-                                ['< 15 Mnt', 'Mitigasi Respon Krisis'],
-                            ].map(([value, label]) => (
                                 <div
                                     key={label}
                                     className="bg-surface-container rounded-lg p-4"
@@ -481,28 +193,28 @@ export default function Clients() {
                             ))}
                         </div>
                     </div>
-                    <RetentionGauge />
+                    <RetentionGauge t={t} />
                 </Card>
             </Section>
 
             <CtaBanner
-                badge="Konsultasi Teknis & Audit Infrastruktur"
+                badge={t.cta.badge}
-                title="Siap Menjadi Mitra Transformasi Digital Berikutnya?"
+                title={t.cta.title}
-                description="Diskusikan tantangan arsitektur sistem dan otomasi proses bisnis Anda bersama Lead Architect PAJ. Kami siap menghadirkan solusi tailor-fit yang terukur."
+                description={t.cta.description}
                 actions={
                     <>
                         <ButtonLink
                             href={consultationUrl}
                             icon="event_available"
                         >
-                            Jadwalkan Diskusi Teknis
+                            {t.cta.primary}
                         </ButtonLink>
                         <ButtonLink
                             href={`${contact.url()}#lokasi`}
                             variant="secondary"
                             icon="apartment"
                         >
-                            Lihat Lokasi Kantor PAJ
+                            {t.cta.secondary}
                         </ButtonLink>
                     </>
                 }
@@ -520,11 +232,10 @@ export default function Clients() {
                             className="h-12 w-auto self-start object-contain"
                         />
                         <h2 className="font-display text-on-surface text-lg font-bold">
-                            Kantor Operasional &amp; IT Consultant Desk
+                            {t.office.title}
                         </h2>
                         <p className="text-on-surface-variant text-sm">
-                            Pusat koordinasi rekayasa sistem informasi, audit
+                            {t.office.description}
-                            kode, dan deployment infrastruktur terpadu.
                         </p>
                         <div className="text-on-surface mt-2 flex flex-col gap-2 font-mono text-sm">
                             {offices.map((office) => (
@@ -581,169 +292,214 @@ export default function Clients() {
     );
 }
 
-function DetailBlock({ label, text }: { label: string; text: string }) {
+const PREVIEW_COUNT = 8;
-    return (
-        <div className="bg-surface-container rounded-lg p-4">
-            <span className="text-primary mb-1 block font-mono text-[11px] font-bold uppercase">
-                {label}
-            </span>
-            <p className="text-on-surface-variant text-sm">{text}</p>
-        </div>
-    );
-}
 
-function SectorPortfolio() {
+function SectorPortfolio({ t }: { t: Content }) {
-    const [filter, setFilter] = useState<Sector | 'all'>('all');
+    const sectors: ProjectSector[] = ['government', 'private', 'soe'];
-    const visible = (sector: Sector) => filter === 'all' || filter === sector;
+    const [sector, setSector] = useState<ProjectSector>('government');
+    const [expanded, setExpanded] = useState(false);
+    const items = projectsBySector(sector);
+    const visible = expanded ? items : items.slice(0, PREVIEW_COUNT);
+
+    const selectSector = (next: ProjectSector) => {
+        setSector(next);
+        setExpanded(false);
+    };
 
     return (
         <Section tone="muted">
             <div className="flex flex-col gap-12">
                 <SectionHeader
                     align="split"
-                    eyebrow="Klasifikasi Sektor Portofolio"
+                    eyebrow={t.portfolio.eyebrow}
-                    title="Sektor Industri Teruji & Karakteristik Sistem"
+                    title={t.portfolio.title}
                     aside={
                         <div
                             role="group"
-                            aria-label="Filter sektor"
+                            aria-label={t.portfolio.filterLabel}
                             className="border-outline-variant/40 bg-surface-container-low flex flex-wrap items-center gap-2 rounded-xl border p-1.5"
                         >
-                            {filters.map((option) => (
+                            {sectors.map((option) => (
                                 <button
-                                    key={option.value}
+                                    key={option}
                                     type="button"
-                                    aria-pressed={filter === option.value}
+                                    aria-pressed={sector === option}
-                                    onClick={() => setFilter(option.value)}
+                                    onClick={() => selectSector(option)}
                                     className={cn(
                                         'cursor-pointer rounded-lg px-4 py-2 text-xs font-semibold transition-all',
-                                        filter === option.value
+                                        sector === option
                                             ? 'bg-primary-container text-white shadow-md'
                                             : 'bg-surface-container text-on-surface-variant hover:text-on-surface',
                                     )}
                                 >
-                                    {option.label}
+                                    {t.portfolio.sectors[option]} (
+                                    {projectsBySector(option).length})
                                 </button>
                             ))}
                         </div>
                     }
                 />
 
-                <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+                <p className="text-on-surface-variant -mt-6 max-w-2xl text-base">
-                    {industrySectors.map((item) => (
+                    {t.portfolio.description}
-                        <Card
+                </p>
-                            key={item.code}
+
-                            padding="lg"
+                <Card padding="none" className="overflow-hidden">
-                            interactive
+                    <ul className="divide-outline-variant/30 divide-y">
-                            className={cn(
+                        {visible.map((project) => (
-                                'flex flex-col justify-between overflow-hidden',
+                            <li
-                                item.wide && 'lg:col-span-2',
+                                key={`${project.title}-${project.client}-${project.year}`}
-                                !visible(item.sector) && 'hidden',
+                                className="flex flex-col gap-2 p-5 sm:flex-row sm:items-center sm:gap-6 sm:px-6"
-                            )}
+                            >
-                        >
+                                <span className="bg-surface-container text-primary w-fit shrink-0 rounded-lg px-3 py-1 font-mono text-sm font-bold">
-                            {item.wide && (
+                                    {project.year}
-                                <Glow className="-top-12 -right-12 h-48 w-48 blur-3xl" />
+                                </span>
-                            )}
+                                <div className="flex flex-1 flex-col gap-1">
-                            <div className="relative">
+                                    <span className="text-on-surface font-semibold">
-                                <div className="mb-6 flex items-center justify-between gap-3">
+                                        {project.title}
-                                    <span className="bg-surface-container text-primary inline-flex items-center gap-2 rounded-full px-3 py-1 font-mono text-[11px] font-semibold">
+                                    </span>
+                                    <span className="text-on-surface-variant flex items-center gap-1.5 text-sm">
+                                        <Icon
+                                            name="apartment"
+                                            className="text-primary text-base"
+                                        />
+                                        {project.client}
+                                    </span>
+                                </div>
+                                {project.program === 'erp' && (
+                                    <span className="border-primary/40 text-primary w-fit shrink-0 rounded-full border px-3 py-1 font-mono text-[11px] font-semibold">
+                                        {t.portfolio.erpBadge}
+                                    </span>
+                                )}
+                            </li>
+                        ))}
+                    </ul>
+                </Card>
+
+                {items.length > PREVIEW_COUNT && (
+                    <Button
+                        variant="secondary"
+                        size="sm"
+                        icon={expanded ? 'expand_less' : 'expand_more'}
+                        onClick={() => setExpanded((open) => !open)}
+                        className="self-center"
+                    >
+                        {expanded
+                            ? t.portfolio.showLess
+                            : t.portfolio.showAll.replace(
+                                  '{count}',
+                                  String(items.length),
+                              )}
+                    </Button>
+                )}
+            </div>
+        </Section>
+    );
+}
+
+const RELATED_PREVIEW = 4;
+
+function FeaturedPrograms({ t }: { t: Content }) {
+    return (
+        <Section>
+            <div className="flex flex-col gap-12">
+                <SectionHeader
+                    eyebrow={t.cases.eyebrow}
+                    title={t.cases.title}
+                    description={t.cases.description}
+                />
+                <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
+                    {t.cases.items.map((item, index) => {
+                        const related = projectsInProgram(item.program);
+                        const remaining = related.length - RELATED_PREVIEW;
+
+                        return (
+                            <Card
+                                key={item.program}
+                                padding="none"
+                                className="flex flex-col overflow-hidden"
+                            >
+                                <div className="bg-surface-container flex flex-col gap-3 p-6">
+                                    <div className="flex items-center justify-between">
+                                        <span className="text-primary font-mono text-xs font-bold">
+                                            {t.cases.label} 0{index + 1}
+                                        </span>
                                         <Icon
                                             name={item.icon}
-                                            className="text-sm"
+                                            className="text-on-surface-variant text-xl"
                                         />
-                                        {item.code}
+                                    </div>
-                                    </span>
+                                    <h3 className="font-display text-on-surface text-lg leading-snug font-bold">
-                                    <span className="text-on-surface-variant font-mono text-[11px] font-semibold">
+                                        {item.title}
-                                        {item.tag}
+                                    </h3>
+                                    <span className="text-highlight text-xs font-semibold">
+                                        {item.client}
                                     </span>
                                 </div>
-                                <h3
+                                <div className="flex flex-1 flex-col gap-5 p-6">
-                                    className={cn(
+                                    <p className="text-on-surface-variant text-sm leading-relaxed">
-                                        'font-display text-on-surface mb-3 font-bold',
+                                        {item.summary}
-                                        item.wide
+                                    </p>
-                                            ? 'text-headline-md lg:text-headline-lg'
+                                    <div className="grid grid-cols-2 gap-3">
-                                            : 'text-headline-md',
+                                        <div className="bg-surface-container-high rounded-lg p-3">
-                                    )}
+                                            <span className="font-display text-primary text-2xl font-bold">
-                                >
+                                                {related.length}
-                                    {item.title}
+                                            </span>
-                                </h3>
+                                            <span className="text-on-surface-variant block text-xs font-semibold">
-                                <p className="text-on-surface-variant mb-6 text-base leading-relaxed">
+                                                {t.cases.projects}
-                                    {item.description}
+                                            </span>
-                                </p>
+                                        </div>
-                                <div
+                                        <div className="bg-surface-container-high flex items-center rounded-lg p-3">
-                                    className={cn(
+                                            <span className="font-display text-on-surface text-lg font-bold">
-                                        'mb-6 grid grid-cols-1 gap-4',
+                                                {yearRange(related)}
-                                        item.wide && 'sm:grid-cols-2',
+                                            </span>
-                                    )}
+                                        </div>
-                                >
+                                    </div>
-                                    {item.details.map((detail) => (
+                                    <div className="flex flex-col gap-2">
-                                        <DetailBlock
+                                        <span className="text-primary font-mono text-[11px] font-bold uppercase">
-                                            key={detail.label}
+                                            {t.cases.related}
-                                            {...detail}
+                                        </span>
-                                        />
+                                        <ul className="flex flex-col gap-2">
-                                    ))}
+                                            {related
+                                                .slice(0, RELATED_PREVIEW)
+                                                .map((project) => (
+                                                    <li
+                                                        key={`${project.title}-${project.year}`}
+                                                        className="text-on-surface-variant flex gap-2 text-sm"
+                                                    >
+                                                        <span className="text-on-surface shrink-0 font-mono font-semibold">
+                                                            {project.year}
+                                                        </span>
+                                                        <span>
+                                                            {project.title}
+                                                        </span>
+                                                    </li>
+                                                ))}
+                                        </ul>
+                                        {remaining > 0 && (
+                                            <span className="text-on-surface-variant text-xs italic">
+                                                {t.cases.more.replace(
+                                                    '{count}',
+                                                    String(remaining),
+                                                )}
+                                            </span>
+                                        )}
+                                    </div>
                                 </div>
-                            </div>
+                            </Card>
-                            <div className="relative flex items-center justify-between gap-3 pt-2">
+                        );
-                                <span className="text-on-surface-variant font-mono text-xs">
+                    })}
-                                    {item.footnote}
-                                </span>
-                                <Icon
-                                    name="arrow_forward"
-                                    className="text-primary text-xl transition-transform group-hover:translate-x-2"
-                                />
-                            </div>
-                        </Card>
-                    ))}
-
-                    <Card
-                        padding="lg"
-                        interactive
-                        className={cn(
-                            'flex flex-col items-start justify-between gap-6 md:col-span-2 md:flex-row md:items-center lg:col-span-3',
-                            !visible('corporate') && 'hidden',
-                        )}
-                    >
-                        <div className="max-w-3xl">
-                            <span className="bg-surface-container text-primary mb-3 inline-flex items-center gap-2 rounded-full px-3 py-1 font-mono text-[11px] font-semibold">
-                                <Icon name="storefront" className="text-sm" />
-                                SEKTOR 05 // KOMERSIAL &amp; DISTRIBUSI
-                            </span>
-                            <h3 className="font-display text-headline-md text-on-surface mb-2 font-bold">
-                                Sektor Komersial, Ritel Distribusi &amp;
-                                Penyedia Jasa
-                            </h3>
-                            <p className="text-on-surface-variant text-base">
-                                Multi-channel sales pipeline, quotation
-                                bertingkat dengan otorisasi matriks harga,
-                                automated customer invoicing, rekonsiliasi
-                                perbankan otomatis, dan verifikasi batasan
-                                kredit (credit limit) secara ketat dan otomatis.
-                            </p>
-                        </div>
-                        <div className="flex shrink-0 flex-col items-start gap-2 md:items-end">
-                            <span className="text-highlight font-mono text-[11px] font-bold uppercase">
-                                Hasil Implementasi
-                            </span>
-                            <span className="text-headline-sm text-primary font-mono font-bold">
-                                100% Real-time AR/AP
-                            </span>
-                            <span className="text-on-surface-variant text-sm">
-                                Zero duplicate entry data
-                            </span>
-                        </div>
-                    </Card>
                 </div>
             </div>
         </Section>
     );
 }
 
-function RetentionGauge() {
+function RetentionGauge({ t }: { t: Content }) {
     return (
         <div className="bg-surface-container flex w-full flex-col items-center justify-center rounded-xl p-6 lg:w-96">
             <span className="text-on-surface-variant mb-4 font-mono text-[11px] font-semibold uppercase">
-                Indeks Kemitraan Berkelanjutan
+                {t.reliability.gaugeLabel}
             </span>
             <div className="relative flex h-48 w-48 items-center justify-center">
                 <svg
@@ -774,13 +530,12 @@ function RetentionGauge() {
                         99.8%
                     </span>
                     <span className="text-highlight text-xs font-semibold">
-                        Tingkat Retensi
+                        {t.reliability.gaugeCaption}
                     </span>
                 </div>
             </div>
             <p className="text-on-surface-variant mt-4 text-center text-sm">
-                Mayoritas mitra memperpanjang kontrak pemeliharaan dan audit
+                {t.reliability.gaugeNote}
-                berkala melampaui siklus 5 tahunan.
             </p>
         </div>
     );

resources/js/pages/site/contact.tsx

@@ -12,196 +12,36 @@ import {
 } from '@/components/site/form-field';
 import Icon from '@/components/site/icon';
 import IconTile from '@/components/site/icon-tile';
-import PageHero, { Strong } from '@/components/site/page-hero';
+import PageHero from '@/components/site/page-hero';
+import RichText from '@/components/site/rich-text';
 import Section from '@/components/site/section';
 import SectionHeader from '@/components/site/section-header';
 import StepCard from '@/components/site/step-card';
-import { company, officeAddress, offices, serviceOptions } from '@/data/site';
+import { common, serviceOptions } from '@/content/common';
+import { contactContent } from '@/content/contact';
+import { company, officeAddress, offices } from '@/data/site';
+import { useContent } from '@/hooks/use-locale';
 import { cn } from '@/lib/utils';
 
-const whatsappMessage =
+type Content = typeof contactContent.id;
-    'Halo Lead Consultant PT Probindo Artika Jaya, saya ingin berkonsultasi mengenai kebutuhan sistem IT/ERP.';
-
-const assurances = [
-    {
-        icon: 'schedule',
-        label: 'SLA Respon Inquiry',
-        value: '< 2 Jam Hari Kerja',
-    },
-];
-
-const highlights = [
-    {
-        icon: 'bolt',
-        label: 'Respon Cepat',
-        value: '< 2 Jam untuk Inquiry Enterprise',
-    },
-    {
-        icon: 'assignment_turned_in',
-        label: 'GAP Analysis Awal',
-        value: 'Gratis & Bebas Komitmen',
-    },
-    {
-        icon: 'gavel',
-        label: 'Perjanjian Kerahasiaan',
-        value: 'NDA Terpadu & Terjamin Hukum',
-    },
-    {
-        icon: 'travel_explore',
-        label: 'Cakupan Deployment',
-        value: 'Nasional (On-Premise & Cloud)',
-    },
-];
-
-const channels = [
-    {
-        icon: 'call',
-        label: 'Telepon Kantor Resmi (PABX)',
-        value: company.phone.label,
-        href: company.phone.href,
-        trailing: 'arrow_outward',
-    },
-    {
-        icon: 'chat',
-        label: 'Hotline WhatsApp Enterprise',
-        value: company.whatsapp.label,
-        href: `${company.whatsapp.href}?text=${encodeURIComponent(whatsappMessage)}`,
-        badge: 'Chat Langsung',
-    },
-    {
-        icon: 'mail',
-        label: 'Korespondensi, RFI & Tender',
-        value: company.email.busdev,
-        href: `mailto:${company.email.busdev}`,
-        trailing: 'arrow_outward',
-    },
-    {
-        icon: 'headset_mic',
-        label: 'Helpdesk Dukungan Klien Aktif',
-        value: company.email.support,
-        href: `mailto:${company.email.support}`,
-        badge: 'Ticketing 24/7',
-    },
-];
-
-const industryOptions = [
-    { value: 'migas', label: 'Sektor Minyak, Gas & Energi Terbarukan' },
-    { value: 'baja', label: 'Fabrikasi & Pengolahan Baja / Heavy Metals' },
-    { value: 'manufaktur', label: 'Manufaktur, Supply Chain & Logistik' },
-    {
-        value: 'holding',
-        label: 'Korporasi Holding & Badan Usaha Milik Negara (BUMN)',
-    },
-    { value: 'retail', label: 'Komersial, Distribusi & Ritel Skala Besar' },
-    { value: 'finansial', label: 'Jasa Finansial, Perbankan & Asuransi' },
-    { value: 'lainnya', label: 'Sektor Lainnya / Multi-Divisional' },
-];
-
-const timelines = [
-    { value: 'immediate', label: 'Segera', note: '< 1 Bulan' },
-    { value: 'quarter', label: '1 – 3 Bulan', note: 'Q1 - Q2' },
-    { value: 'midterm', label: 'Semester Depan', note: 'Q3 - Q4' },
-    { value: 'feasibility', label: 'Eksplorasi', note: 'Studi Kelayakan' },
-];
-
-const accessPoints = [
-    {
-        icon: 'directions_car',
-        title: 'Akses Tol JORR',
-        description:
-            'Langsung terhubung dengan Gerbang Tol Veteran & Cipete, memudahkan kunjungan delegasi antar-kota dan bandara Soekarno-Hatta (35 menit).',
-    },
-    {
-        icon: 'train',
-        title: 'Stasiun MRT Fatmawati & Lebak Bulus',
-        description:
-            'Hanya 5–8 menit dari stasiun MRT utama jalur Bundaran HI–Lebak Bulus, efisien untuk pertemuan tatap muka tim arsitektur sistem.',
-    },
-    {
-        icon: 'meeting_room',
-        title: 'Executive Presentation Suite',
-        description:
-            'Dilengkapi ruang presentasi arsitektur berteknologi tinggi untuk simulasi live demo ERP, load balancing review, dan workshop tim lintas divisi.',
-    },
-];
-
-const onboardingSteps = [
-    {
-        title: 'Respon Cepat & GAP Review',
-        badge: '1 - 2 Jam',
-        description:
-            'Lead Consultant PAJ menelaah parameter awal industri Anda dan menyusun agenda sesi pendalaman awal sesuai fokus kendala sistem Anda.',
-        footer: { icon: 'verified', label: 'Bebas Biaya Awal' },
-    },
-    {
-        title: 'NDA & Briefing Teknis',
-        badge: 'H+1 Sesi',
-        description:
-            'Penandatanganan Perjanjian Kerahasiaan (NDA) resmi agar korporasi leluasa mendiskusikan workflow rahasia, struktur akuntansi, dan logistik.',
-        footer: { icon: 'lock_clock', label: 'Legal Binding 100%' },
-    },
-    {
-        title: 'Discovery & Cetak Biru',
-        badge: 'Minggu Ke-1',
-        description:
-            'Penyusunan arsitektur sistem komprehensif, pemetaan modul tailor-fit vs standar Odoo ERP, linimasa milestone, dan estimasi TCO investasi.',
-        footer: { icon: 'architecture', label: 'Blue-Print Arsitektur' },
-    },
-    {
-        title: 'Live Demo & PoC Uji Coba',
-        badge: 'Proof-of-Concept',
-        description:
-            'Simulasi alur transaksi riil atau uji coba automasi dengan sampel data operasional untuk memvalidasi kelayakan sebelum implementasi massal.',
-        footer: { icon: 'play_circle', label: 'Simulasi Riil Enterprise' },
-    },
-];
-
-const faqs = [
-    {
-        question:
-            'Apakah sesi konsultasi awal dan audit GAP dikenakan biaya konsultan?',
-        answer: 'Tidak. Diskusi penjajakan kebutuhan awal, penelaahan GAP proses bisnis, dan penyusunan proposal rekomendasi arsitektur awal bersifat gratis dan tanpa komitmen awal. Biaya jasa profesional baru dihitung saat kontrak kerja sama (MoU/SPK) disetujui kedua belah pihak.',
-    },
-    {
-        question:
-            'Bagaimana jika alur bisnis perusahaan kami sangat unik dan tidak didukung oleh modul standar Odoo ERP?',
-        answer: 'Inilah keahlian inti PT Probindo Artika Jaya sejak 1985. Tim arsitek kami berpengalaman merekayasa modul tailor-fit bespoke yang diintegrasikan mulus dengan core Odoo, termasuk integrasi mesin timbang pabrik baja, sistem flow meter migas, maupun protokol e-Faktur DJP.',
-    },
-    {
-        question:
-            'Apakah tim teknis dan konsultan PAJ dapat melakukan sesi analisis onsite di lokasi operasional pabrik atau kilang kami di luar Jakarta?',
-        answer: 'Tentu. Tim PAJ secara rutin melakukan site audit, observasi workflow operasional lantai pabrik, dan pelatihan pengguna langsung di lokasi klien (Cilegon, Balikpapan, Surabaya, Medan, hingga remote site migas di seluruh Nusantara) dengan standar K3 migas/industri yang ketat.',
-    },
-    {
-        question:
-            'Berapa lama estimasi waktu implementasi penuh dari tahap analisis hingga Go-Live?',
-        answer: 'Tergantung kompleksitas modul dan skala pengguna. Implementasi Odoo ERP standar terintegrasi berkisar antara 2 – 4 bulan, sedangkan sistem enterprise kompleks multi-entitas holding dengan puluhan modul custom tailor-fit biasanya membutuhkan linimasa bertahap 4 – 8 bulan dengan pendekatan peluncuran bertahap (phased roll-out).',
-    },
-];
 
 export default function Contact() {
+    const t = useContent(contactContent);
+
     return (
         <>
-            <Head title="Kontak & Konsultasi" />
+            <Head title={t.title} />
 
             <PageHero
-                badge="Hubungi Kami // Konsultasi Resmi IT & Arsitektur Sistem"
+                badge={t.hero.badge}
-                title="Diskusikan Transformasi & Otomasi Sistem Bisnis Bersama Lead Consultant PAJ"
+                title={t.hero.title}
-                description={
+                description={<RichText text={t.hero.description} />}
-                    <>
-                        Mulai dari rekayasa proses bisnis, instalasi sistem{' '}
-                        <Strong>tailor-fit</Strong>, audit SCSR, hingga
-                        implementasi <Strong>Odoo ERP</Strong>. Kami siap
-                        membantu memetakan solusi presisi yang adaptif terhadap
-                        pertumbuhan enterprise Anda sejak 1985.
-                    </>
-                }
             >
                 <div className="flex flex-col gap-6">
                     <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:max-w-3xl">
-                        {assurances.map((item) => (
+                        {t.hero.assurances.map((item) => (
                             <Card
-                                key={item.label}
+                                key={item.icon}
                                 padding="sm"
                                 className="flex items-center gap-3"
                             >
@@ -218,9 +58,9 @@ export default function Contact() {
                         ))}
                     </div>
                     <Card className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
-                        {highlights.map((item) => (
+                        {t.hero.highlights.map((item) => (
                             <div
-                                key={item.label}
+                                key={item.icon}
                                 className="flex items-start gap-3"
                             >
                                 <Icon
@@ -244,12 +84,12 @@ export default function Contact() {
             <Section>
                 <div className="grid grid-cols-1 items-start gap-8 lg:grid-cols-12">
                     <div className="flex flex-col gap-6 lg:col-span-5">
-                        <OfficeCard />
+                        <OfficeCard t={t} />
-                        <ChannelsCard />
+                        <ChannelsCard t={t} />
-                        <IncidentLineCard />
+                        <IncidentLineCard t={t} />
                     </div>
                     <div id="audit-form" className="lg:col-span-7">
-                        <ConsultationRequestForm />
+                        <ConsultationRequestForm t={t} />
                     </div>
                 </div>
             </Section>
@@ -258,15 +98,15 @@ export default function Contact() {
                 <div className="flex flex-col gap-10">
                     <SectionHeader
                         align="split"
-                        eyebrow="Kantor & Fasilitas Riset Sistem"
+                        eyebrow={t.location.eyebrow}
-                        title="Dua Lokasi Kantor PAJ di Jakarta Selatan"
+                        title={t.location.title}
-                        description="Sebagian besar tim kami berbasis di Software Engineering Center Bintaro, sementara Business Development Center di Plaza Simatupang melayani pertemuan kemitraan."
+                        description={t.location.description}
                     />
-                    <OfficeMap />
+                    <OfficeMap t={t} />
                     <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
-                        {accessPoints.map((point) => (
+                        {t.location.access.map((point) => (
                             <Card
-                                key={point.title}
+                                key={point.icon}
                                 className="flex items-start gap-4"
                             >
                                 <IconTile
@@ -292,14 +132,14 @@ export default function Contact() {
                 <div className="flex flex-col gap-12">
                     <SectionHeader
                         align="center"
-                        eyebrow="Protokol Konsultasi Enterprise"
+                        eyebrow={t.steps.eyebrow}
-                        title="Tahapan Transparan Setelah Anda Menghubungi Kami"
+                        title={t.steps.title}
-                        description="Kami mengeliminasi ketidakpastian implementasi IT melalui tahapan rekayasa berstruktur jelas, terikat kerahasiaan hukum, dan terukur."
+                        description={t.steps.description}
                     />
                     <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
-                        {onboardingSteps.map((step, index) => (
+                        {t.steps.items.map((step, index) => (
                             <StepCard
-                                key={step.title}
+                                key={step.footer.icon}
                                 step={String(index + 1).padStart(2, '0')}
                                 {...step}
                             />
@@ -312,12 +152,12 @@ export default function Contact() {
                 <div className="flex flex-col gap-12">
                     <SectionHeader
                         align="center"
-                        eyebrow="Tanya Jawab Umum"
+                        eyebrow={t.faq.eyebrow}
-                        title="Pertanyaan Seputar Konsultasi & Penugasan PAJ"
+                        title={t.faq.title}
-                        description="Jawaban ringkas terkait model kerja sama teknis, audit, dan penugasan onsite."
+                        description={t.faq.description}
                     />
                     <div className="space-y-4">
-                        {faqs.map((faq) => (
+                        {t.faq.items.map((faq) => (
                             <Card
                                 key={faq.question}
                                 className="flex items-start gap-4"
@@ -339,12 +179,10 @@ export default function Contact() {
                     </div>
                     <div className="bg-surface-container-high flex flex-col items-center gap-4 rounded-2xl p-8 text-center">
                         <h3 className="font-display text-on-surface text-xl font-bold">
-                            Butuh Tanggapan Mendesak Hari Ini?
+                            {t.faq.urgentTitle}
                         </h3>
                         <p className="text-on-surface-variant max-w-xl text-base">
-                            Hubungi Hotline WhatsApp Konsultan Enterprise kami
+                            {t.faq.urgentText}
-                            untuk respon instan atau jadwalkan pertemuan daring
-                            langsung dengan arsitek sistem PAJ.
                         </p>
                         <div className="flex flex-wrap items-center justify-center gap-4 pt-2">
                             <ButtonLink
@@ -352,7 +190,7 @@ export default function Contact() {
                                 size="sm"
                                 icon="chat"
                             >
-                                WhatsApp Konsultan ({company.whatsapp.label})
+                                {t.faq.whatsapp} ({company.whatsapp.label})
                             </ButtonLink>
                             <ButtonLink
                                 href={company.phone.href}
@@ -360,7 +198,7 @@ export default function Contact() {
                                 size="sm"
                                 icon="call"
                             >
-                                Telepon Kantor ({company.phone.label})
+                                {t.faq.phone} ({company.phone.label})
                             </ButtonLink>
                         </div>
                     </div>
@@ -378,13 +216,13 @@ function CardLabel({ children }: { children: string }) {
     );
 }
 
-function OfficeCard() {
+function OfficeCard({ t }: { t: Content }) {
     return (
         <Card padding="lg">
             <div className="pb-4">
-                <CardLabel>Kantor Operasional</CardLabel>
+                <CardLabel>{t.offices.label}</CardLabel>
                 <h3 className="font-display text-on-surface text-lg font-bold">
-                    Lokasi Kantor PAJ
+                    {t.offices.title}
                 </h3>
             </div>
             <div className="flex flex-col gap-3">
@@ -405,7 +243,7 @@ function OfficeCard() {
                                 href={office.phone.href}
                                 className="text-on-surface hover:text-primary font-mono font-semibold"
                             >
-                                Tel. {office.phone.label}
+                                {t.offices.tel} {office.phone.label}
                             </a>
                         </div>
                     </div>
@@ -413,22 +251,22 @@ function OfficeCard() {
             </div>
             <div className="border-outline-variant/30 mt-4 grid grid-cols-2 gap-4 border-t pt-4 text-sm">
                 <div className="flex flex-col">
-                    <CardLabel>Jam Operasional</CardLabel>
+                    <CardLabel>{t.offices.hoursLabel}</CardLabel>
                     <span className="text-on-surface font-semibold">
-                        Senin – Jumat
+                        {t.offices.hoursDays}
                     </span>
                     <span className="text-on-surface-variant">
-                        08:30 – 17:30 WIB
+                        {t.offices.hoursTime}
                     </span>
                 </div>
                 <div className="flex flex-col">
-                    <CardLabel>Status Kunjungan</CardLabel>
+                    <CardLabel>{t.offices.visitLabel}</CardLabel>
                     <span className="text-highlight inline-flex items-center gap-1.5 font-semibold">
                         <span className="bg-primary h-2 w-2 rounded-full" />
-                        Open for Scheduled Audits
+                        {t.offices.visitStatus}
                     </span>
                     <span className="text-on-surface-variant">
-                        Harap konfirmasi H-1
+                        {t.offices.visitNote}
                     </span>
                 </div>
             </div>
@@ -436,13 +274,42 @@ function OfficeCard() {
     );
 }
 
-function ChannelsCard() {
+function ChannelsCard({ t }: { t: Content }) {
+    const channels = [
+        {
+            icon: 'call',
+            label: t.channels.phone,
+            value: company.phone.label,
+            href: company.phone.href,
+        },
+        {
+            icon: 'chat',
+            label: t.channels.whatsapp,
+            value: company.whatsapp.label,
+            href: `${company.whatsapp.href}?text=${encodeURIComponent(t.channels.whatsappMessage)}`,
+            badge: t.channels.whatsappBadge,
+        },
+        {
+            icon: 'mail',
+            label: t.channels.email,
+            value: company.email.busdev,
+            href: `mailto:${company.email.busdev}`,
+        },
+        {
+            icon: 'headset_mic',
+            label: t.channels.support,
+            value: company.email.support,
+            href: `mailto:${company.email.support}`,
+            badge: t.channels.supportBadge,
+        },
+    ];
+
     return (
         <Card padding="lg" className="flex flex-col gap-5">
             <div>
-                <CardLabel>Korespondensi Langsung</CardLabel>
+                <CardLabel>{t.channels.label}</CardLabel>
                 <h3 className="font-display text-on-surface text-lg font-bold">
-                    Saluran Komunikasi Resmi
+                    {t.channels.title}
                 </h3>
             </div>
             <div className="space-y-3">
@@ -451,7 +318,7 @@ function ChannelsCard() {
 
                     return (
                         <a
-                            key={channel.label}
+                            key={channel.icon}
                             href={channel.href}
                             target={external ? '_blank' : undefined}
                             rel={external ? 'noopener noreferrer' : undefined}
@@ -475,7 +342,7 @@ function ChannelsCard() {
                                 </span>
                             ) : (
                                 <Icon
-                                    name={channel.trailing ?? 'arrow_outward'}
+                                    name="arrow_outward"
                                     className="text-on-surface-variant group-hover:text-on-surface text-lg transition-colors"
                                 />
                             )}
@@ -487,7 +354,7 @@ function ChannelsCard() {
     );
 }
 
-function IncidentLineCard() {
+function IncidentLineCard({ t }: { t: Content }) {
     return (
         <Card
             padding="lg"
@@ -496,26 +363,24 @@ function IncidentLineCard() {
             <div className="flex items-center gap-3 pb-3">
                 <span className="bg-primary h-3 w-3 animate-ping rounded-full" />
                 <span className="text-primary font-mono text-[11px] font-bold tracking-wide">
-                    SPECIAL CUSTOMER SERVICE REPRESENTATIVE (SCSR)
+                    {t.incident.badge}
                 </span>
             </div>
             <h3 className="font-display text-on-surface mb-2 text-lg font-bold">
-                Dedicated Incident Line 24/7
+                {t.incident.title}
             </h3>
             <p className="text-on-surface-variant mb-4 text-sm leading-relaxed">
-                Jalur khusus tier-1 untuk klien dengan kontrak pemeliharaan
+                <RichText text={t.incident.description} />
-                &amp; infrastruktur <Strong>mission-critical</Strong> (Sektor
-                Migas, Pengolahan Baja, dan Korporasi Holding).
             </p>
             <div className="bg-surface-container-lowest flex items-center justify-between gap-3 rounded-lg p-3">
                 <div className="flex items-center gap-2">
                     <Icon name="timer" className="text-primary text-lg" />
                     <span className="text-on-surface font-mono text-[11px] font-semibold">
-                        SLA WAKTU TANGGAP INSIDEN KRITIS
+                        {t.incident.slaLabel}
                     </span>
                 </div>
                 <span className="font-display text-primary text-lg font-bold">
-                    &lt; 15 Menit
+                    {t.incident.slaValue}
                 </span>
             </div>
         </Card>
@@ -528,8 +393,10 @@ function IncidentLineCard() {
  * TODO: submissions are not sent anywhere yet; wire this to a Laravel
  * endpoint before going live.
  */
-function ConsultationRequestForm() {
+function ConsultationRequestForm({ t }: { t: Content }) {
+    const shared = useContent(common);
     const [submitted, setSubmitted] = useState(false);
+    const form = t.form;
 
     const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
         event.preventDefault();
@@ -540,67 +407,51 @@ function ConsultationRequestForm() {
     return (
         <Card padding="lg" className="shadow-xl lg:p-10">
             <div className="border-outline-variant/30 border-b pb-6">
-                <Eyebrow icon="quick_reference">
+                <Eyebrow icon="quick_reference">{form.eyebrow}</Eyebrow>
-                    Sesi Audit &amp; Permintaan Tender
-                </Eyebrow>
                 <h2 className="font-display text-headline-lg text-on-surface pt-2 font-bold">
-                    Formulir Konsultasi &amp; Audit Arsitektur Sistem
+                    {form.title}
                 </h2>
                 <p className="text-on-surface-variant pt-2 text-base">
-                    Isi rincian kebutuhan sistem Anda di bawah ini. Lead
+                    {form.description}
-                    Consultant PAJ akan menganalisis parameter awal dan
-                    menjadwalkan presentasi arsitektur terarah.
                 </p>
             </div>
 
             <form className="flex flex-col gap-6 pt-6" onSubmit={handleSubmit}>
                 <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-                    <Field id="full-name" label="Nama Lengkap & Gelar" required>
+                    <Field id="full-name" label={form.name} required>
                         <TextInput
                             id="full-name"
                             name="name"
-                            placeholder="Contoh: Ir. Hendra Prasetyo, M.T."
+                            placeholder={form.namePlaceholder}
                             required
                         />
                     </Field>
-                    <Field
+                    <Field id="company-name" label={form.company} required>
-                        id="company-name"
-                        label="Nama Perusahaan / Instansi / BUMN"
-                        required
-                    >
                         <TextInput
                             id="company-name"
                             name="company"
-                            placeholder="PT Petro Nusantara Energy"
+                            placeholder={form.companyPlaceholder}
                             required
                         />
                     </Field>
-                    <Field id="job-title" label="Jabatan / Divisi" required>
+                    <Field id="job-title" label={form.jobTitle} required>
                         <TextInput
                             id="job-title"
                             name="job_title"
-                            placeholder="VP Information Technology / GM Finance"
+                            placeholder={form.jobTitlePlaceholder}
                             required
                         />
                     </Field>
-                    <Field
+                    <Field id="work-email" label={form.email} required>
-                        id="work-email"
-                        label="Email Resmi Perusahaan"
-                        required
-                    >
                         <TextInput
                             id="work-email"
                             name="email"
                             type="email"
-                            placeholder="hendra@petronusantara.co.id"
+                            placeholder={form.emailPlaceholder}
                             required
                         />
                     </Field>
-                    <Field
+                    <Field id="phone-number" label={form.phone} required>
-                        id="phone-number"
-                        label="Nomor WhatsApp / Telepon Langsung"
-                        required
-                    >
                         <TextInput
                             id="phone-number"
                             name="phone"
@@ -609,41 +460,33 @@ function ConsultationRequestForm() {
                             required
                         />
                     </Field>
-                    <Field
+                    <Field id="industry-sector" label={form.industry} required>
-                        id="industry-sector"
-                        label="Klasifikasi Sektor Industri"
-                        required
-                    >
                         <SelectInput
                             id="industry-sector"
                             name="industry"
-                            placeholder="Pilih Sektor Industri Anda"
+                            placeholder={form.industryPlaceholder}
-                            options={industryOptions}
+                            options={form.industries}
                             required
                         />
                     </Field>
                 </div>
 
-                <Field
+                <Field id="service-focus" label={form.service} required>
-                    id="service-focus"
-                    label="Pilar Kebutuhan / Fokus Jasa PAJ"
-                    required
-                >
                     <SelectInput
                         id="service-focus"
                         name="service"
-                        placeholder="Pilih Layanan Utama yang Dibutuhkan"
+                        placeholder={form.servicePlaceholder}
-                        options={serviceOptions}
+                        options={serviceOptions(shared)}
                         required
                     />
                 </Field>
 
                 <fieldset className="flex flex-col gap-2">
                     <legend className="text-on-surface pb-2 font-mono text-xs font-medium">
-                        Estimasi Linimasa Kebutuhan Implementasi
+                        {form.timeline}
                     </legend>
                     <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
-                        {timelines.map((timeline, index) => (
+                        {form.timelines.map((timeline, index) => (
                             <label
                                 key={timeline.value}
                                 className={cn(
@@ -670,15 +513,12 @@ function ConsultationRequestForm() {
                     </div>
                 </fieldset>
 
-                <Field
+                <Field id="project-details" label={form.details}>
-                    id="project-details"
-                    label="Ringkasan Kebutuhan atau Kendala Sistem Saat Ini"
-                >
                     <TextArea
                         id="project-details"
                         name="details"
                         rows={4}
-                        placeholder="Jelaskan secara ringkas tantangan operasional, sistem lama yang digunakan (SAP/Oracle/Legacy), integrasi khusus yang diinginkan, atau estimasi jumlah pengguna (users)..."
+                        placeholder={form.detailsPlaceholder}
                     />
                 </Field>
 
@@ -694,15 +534,12 @@ function ConsultationRequestForm() {
                         htmlFor="nda-consent"
                         className="text-on-surface-variant cursor-pointer text-sm"
                     >
-                        Saya menyetujui penandatanganan{' '}
+                        <RichText text={form.nda} />
-                        <Strong>Non-Disclosure Agreement (NDA)</Strong> sebelum
-                        pertukaran data teknis &amp; flow diagram operasional
-                        korporasi.
                     </label>
                 </div>
 
                 <Button type="submit" size="block" trailingIcon="arrow_forward">
-                    Kirim Permohonan Konsultasi Teknis
+                    {form.submit}
                 </Button>
 
                 {submitted && (
@@ -716,12 +553,10 @@ function ConsultationRequestForm() {
                         />
                         <div>
                             <span className="font-bold">
-                                Permohonan Berhasil Dikirimkan!
+                                {form.successTitle}
                             </span>
                             <p className="text-on-surface-variant text-sm">
-                                Lead Consultant PAJ akan mengonfirmasi via
+                                {form.successMessage}
-                                email/telepon resmi dalam kurun waktu kurang
-                                dari 2 jam kerja.
                             </p>
                         </div>
                     </div>
@@ -729,20 +564,19 @@ function ConsultationRequestForm() {
 
                 <div className="text-on-surface-variant flex items-center justify-center gap-2 pt-2 text-center font-mono text-[11px]">
                     <Icon name="lock" className="text-primary text-sm" />
-                    Data dan kerahasiaan proses bisnis Anda dilindungi melalui
+                    {form.privacy}
-                    perjanjian kerahasiaan (NDA) dan kepatuhan hukum Indonesia.
                 </div>
             </form>
         </Card>
     );
 }
 
-function OfficeMap() {
+function OfficeMap({ t }: { t: Content }) {
     return (
         <div className="bg-surface-container relative flex min-h-96 w-full flex-col justify-end overflow-hidden rounded-2xl p-4 shadow-xl sm:p-6 lg:min-h-[480px]">
             <img
                 src="/images/probindo/map-jakarta.png"
-                alt="Peta wilayah Jakarta Selatan"
+                alt={t.location.mapAlt}
                 loading="lazy"
                 className="absolute inset-0 h-full w-full object-cover dark:brightness-75 dark:hue-rotate-180 dark:invert"
             />
@@ -774,7 +608,7 @@ function OfficeMap() {
                             icon="directions"
                             className="self-start"
                         >
-                            Buka Petunjuk Arah
+                            {t.location.directions}
                         </ButtonLink>
                     </div>
                 ))}

resources/js/pages/site/home.tsx

@@ -5,107 +5,48 @@ import Eyebrow from '@/components/site/eyebrow';
 import Glow, { GridPattern } from '@/components/site/glow';
 import Icon from '@/components/site/icon';
 import IconTile from '@/components/site/icon-tile';
-import { Highlight, Strong } from '@/components/site/page-hero';
 import Pill from '@/components/site/pill';
+import RichText from '@/components/site/rich-text';
 import Section from '@/components/site/section';
 import SectionHeader from '@/components/site/section-header';
 import ConsultationSection from '@/components/site/sections/consultation-section';
 import ServiceGrid from '@/components/site/sections/service-grid';
 import StatCard from '@/components/site/stat-card';
-import { company } from '@/data/site';
+import { homeContent } from '@/content/home';
+import { useContent } from '@/hooks/use-locale';
 import { about, clients, services } from '@/routes';
 
-const stats = [
+type Content = typeof homeContent.id;
-    {
-        label: 'Heritage • Pengalaman',
-        value: '39+',
-        unit: 'Tahun',
-        description: `Didirikan pada tahun ${company.founded} di Jakarta oleh ${company.notary}.`,
-    },
-    {
-        label: 'Klien • Portofolio',
-        value: '100+',
-        unit: 'Enterprise',
-        description:
-            'Solusi tailor-fit terpercaya untuk sektor migas, industri baja, manufaktur, dan korporasi nasional.',
-    },
-    {
-        label: 'Layanan • Keandalan',
-        value: '8',
-        unit: 'Jasa Resmi',
-        description:
-            'Solusi komprehensif mulai dari analisis proses hingga SCSR dan evaluasi tahunan.',
-    },
-    {
-        label: 'Komitmen • Kemitraan',
-        value: 'Official',
-        unit: 'Odoo Partner',
-        description:
-            'Odoo Learning Partner bersertifikasi untuk implementasi ERP sesuai kebutuhan bisnis Anda.',
-    },
-];
-
-const sectors = [
-    'Industri Minyak & Gas Bumi (Oil & Gas)',
-    'Industri Fabrikasi & Pengolahan Baja',
-    'Perusahaan Manufaktur & Logistik',
-    'Korporasi Swasta & BUMN Nasional',
-    'Institusi Layanan & Komersial',
-];
-
-const odooModules = [
-    'Accounting & Finance',
-    'Manufacturing & MRP',
-    'Supply Chain & Inventory',
-    'CRM & Sales Invoicing',
-    'Custom Module Development',
-    'Integrasi e-Faktur DJP (Opsional)',
-];
-
-const statements = [
-    {
-        icon: 'visibility',
-        label: 'Visi Resmi PT Probindo Artika Jaya',
-        text: 'Menjadi perusahaan konsultan dibidang sistem informasi dan informasi teknologi yang dapat diandalkan dalam hal desain, pembangunan dan implementasi fully-automated dan tailor-fit applications untuk setiap kebutuhan klien.',
-    },
-    {
-        icon: 'flag',
-        label: 'Misi Resmi PT Probindo Artika Jaya',
-        text: 'Membantu klien untuk mengoptimalkan proses bisnisnya, tidak hanya dengan mengotomatisasi sistem informasi yang ada tetapi juga memberikan solusi yang dapat mempercepat proses perencanaan, pengambilan keputusan dan analisis performansi proses bisnis yang telah dilakukannya.',
-    },
-];
 
 export default function Home() {
+    const t = useContent(homeContent);
+
     return (
         <>
-            <Head title="Konsultan IT & Automated Systems" />
+            <Head title={t.title} />
-            <Hero />
+            <Hero t={t} />
 
             <Section tone="muted">
                 <div className="flex flex-col gap-12">
                     <div className="grid grid-cols-2 gap-4 lg:grid-cols-4 lg:gap-6">
-                        {stats.map((stat) => (
+                        {t.stats.map((stat) => (
                             <StatCard key={stat.label} {...stat} />
                         ))}
                     </div>
                     <div className="flex flex-col gap-4">
                         <div className="flex flex-col justify-between gap-2 md:flex-row md:items-center">
                             <div className="flex flex-col gap-1">
-                                <Eyebrow>
+                                <Eyebrow>{t.sectors.eyebrow}</Eyebrow>
-                                    Sektor Strategis &amp; Rekam Jejak Industri
-                                </Eyebrow>
                                 <p className="text-on-surface-variant text-xs">
-                                    Mitra Terpercaya Solusi Bisnis &amp; Sistem
+                                    {t.sectors.description}
-                                    Otomasi Terintegrasi untuk Sektor Strategis
-                                    Nasional
                                 </p>
                             </div>
                             <span className="text-on-surface-variant font-mono text-[11px]">
-                                PENGALAMAN SEJAK 1985 &amp; 2002
+                                {t.sectors.since}
                             </span>
                         </div>
                         <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-5">
-                            {sectors.map((sector) => (
+                            {t.sectors.items.map((sector) => (
                                 <div
                                     key={sector}
                                     className="border-outline-variant/40 bg-surface-container text-on-surface hover:border-primary/50 hover:bg-surface-container-high flex h-16 items-center justify-center rounded-xl border px-4 text-center font-mono text-xs font-medium transition-all"
@@ -122,28 +63,20 @@ export default function Home() {
                 <div className="grid grid-cols-1 items-start gap-10 lg:grid-cols-12">
                     <div className="flex flex-col gap-4 lg:col-span-5">
                         <Eyebrow icon="history_edu">
-                            Profil &amp; Rekam Jejak Perusahaan
+                            {t.profile.eyebrow}
                         </Eyebrow>
                         <h2 className="font-display text-on-surface text-3xl leading-tight font-extrabold lg:text-4xl">
-                            Sejak 1985 Membangun Solusi IT Andal &amp;
+                            {t.profile.title}
-                            Terpercaya
                         </h2>
                         <div className="bg-paj-crimson my-1 h-1 w-20 rounded-full" />
-                        <p className="text-on-surface-variant text-sm leading-relaxed">
+                        {t.profile.paragraphs.map((paragraph) => (
-                            PT Probindo Artika Jaya didirikan di Jakarta pada
+                            <p
-                            tahun 1985 di hadapan {company.notary}. Berawal dari
+                                key={paragraph}
-                            aktivitas trading terkemuka di sektor Oil &amp; Gas
+                                className="text-on-surface-variant text-sm leading-relaxed"
-                            dan Industri Baja (Steel), pada tahun 2002
+                            >
-                            perusahaan bertransformasi menjadi konsultan Sistem
+                                <RichText text={paragraph} />
-                            Informasi dan Teknologi Informasi.
+                            </p>
-                        </p>
+                        ))}
-                        <p className="text-on-surface-variant text-sm leading-relaxed">
-                            Fokus utama kami adalah perancangan, pembangunan,
-                            dan implementasi aplikasi bisnis yang terotomasi (
-                            <Strong>automated systems</Strong>) dan dirancang
-                            khusus sesuai alur kerja operasional (
-                            <Strong>tailor-fit applications</Strong>).
-                        </p>
                         <ButtonLink
                             href={about()}
                             variant="ghost"
@@ -151,11 +84,11 @@ export default function Home() {
                             trailingIcon="arrow_forward"
                             className="self-start"
                         >
-                            Selengkapnya tentang PAJ
+                            {t.profile.more}
                         </ButtonLink>
                     </div>
                     <div className="grid grid-cols-1 gap-6 lg:col-span-7">
-                        {statements.map((statement) => (
+                        {t.profile.statements.map((statement) => (
                             <Card
                                 key={statement.label}
                                 padding="lg"
@@ -184,26 +117,26 @@ export default function Home() {
                 <div className="flex flex-col gap-12">
                     <SectionHeader
                         align="split"
-                        eyebrow="Layanan Utama & Portofolio Solusi"
+                        eyebrow={t.services.eyebrow}
                         eyebrowIcon="apps"
-                        title="8 Jasa Resmi PT Probindo Artika Jaya"
+                        title={t.services.title}
-                        description="Siklus lengkap dukungan enterprise — mulai dari analisis pra-pengembangan, implementasi, alih pengetahuan user, hingga evaluasi kapasitas berkala."
+                        description={t.services.description}
                     />
-                    <OdooSpotlight />
+                    <OdooSpotlight t={t} />
                     <ServiceGrid />
                 </div>
             </Section>
 
             <ConsultationSection
                 id="konsultasi"
-                title="Siap Mengoptimalkan Sistem & Otomasi Bisnis Anda?"
+                title={t.consultation.title}
-                description="Diskusikan kebutuhan sistem Anda bersama konsultan senior PT Probindo Artika Jaya. Kami siap melakukan evaluasi proses bisnis, audit arsitektur sistem eksisting, atau memaparkan solusi implementasi Odoo ERP yang tepat sasaran."
+                description={t.consultation.description}
             />
         </>
     );
 }
 
-function Hero() {
+function Hero({ t }: { t: Content }) {
     return (
         <Section
             tone="muted"
@@ -217,22 +150,13 @@ function Hero() {
         >
             <div className="grid grid-cols-1 items-center gap-12 lg:grid-cols-12">
                 <div className="flex flex-col gap-6 lg:col-span-6">
-                    <Pill pulse>
+                    <Pill pulse>{t.hero.badge}</Pill>
-                        Est. 1985 • IT &amp; Automated Systems Consultant
-                    </Pill>
                     <div className="flex flex-col gap-4">
                         <h1 className="font-display text-on-surface text-4xl leading-[1.12] font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
-                            Empowering Enterprise Through{' '}
+                            <RichText text={t.hero.title} />
-                            <Highlight>Custom Software</Highlight> &amp;
-                            Automated Systems
                         </h1>
                         <p className="text-on-surface-variant text-base leading-relaxed lg:text-lg">
-                            PT Probindo Artika Jaya merancang, membangun, dan
+                            <RichText text={t.hero.description} />
-                            mengimplementasikan aplikasi bisnis{' '}
-                            <Strong>tailor-fit</Strong> serta sistem otomasi
-                            proses bisnis berstandar enterprise — dipercaya oleh
-                            industri berat, perminyakan, dan manufaktur
-                            Indonesia sejak 1985.
                         </p>
                     </div>
                     <div className="flex flex-wrap items-center gap-4 pt-2">
@@ -240,14 +164,14 @@ function Hero() {
                             href="#konsultasi"
                             trailingIcon="arrow_forward"
                         >
-                            Jadwalkan Audit Sistem
+                            {t.hero.primaryAction}
                         </ButtonLink>
                         <ButtonLink
                             href={services()}
                             variant="secondary"
                             icon="layers"
                         >
-                            Eksplorasi 8 Jasa Resmi
+                            {t.hero.secondaryAction}
                         </ButtonLink>
                     </div>
                     <div className="flex items-center gap-3 pt-2">
@@ -262,57 +186,27 @@ function Hero() {
                             ))}
                         </div>
                         <p className="text-on-surface-variant text-xs">
-                            Dipercaya oleh{' '}
+                            {t.hero.trustBefore}{' '}
                             <Link
                                 href={clients()}
                                 className="text-on-surface hover:text-primary font-semibold"
                             >
-                                100+ Enterprise Corporates
+                                {t.hero.trustLink}
                             </Link>{' '}
-                            di sektor Oil &amp; Gas, Steel, Mining, &amp;
+                            {t.hero.trustAfter}
-                            Manufaktur.
                         </p>
                     </div>
                 </div>
                 <div className="relative lg:col-span-6">
-                    <OperationsConsole />
+                    <OperationsConsole t={t} />
                 </div>
             </div>
         </Section>
     );
 }
 
-const consoleMetrics = [
-    {
-        label: 'Throughput ERP',
-        value: '+38.6%',
-        note: '↑ Optimasi Otomasi',
-        accent: true,
-    },
-    { label: 'Sync Latency', value: '14ms', note: 'Sub-20ms Engine' },
-    {
-        label: 'Active Pipelines',
-        value: '1,840',
-        note: 'Automated Workflow',
-        accent: true,
-    },
-];
-
-const consoleEvents = [
-    {
-        icon: 'check_circle',
-        text: 'PO-99120 → Auto Material Requisition Dispatched',
-        status: 'Tersinkron',
-    },
-    {
-        icon: 'sync',
-        text: 'DJP e-Faktur Integration Endpoint Ingest',
-        status: '0.03s Validated',
-    },
-];
-
 /** Decorative dashboard mock that illustrates an automated ERP pipeline. */
-function OperationsConsole() {
+function OperationsConsole({ t }: { t: Content }) {
     return (
         <div aria-hidden="true" className="relative">
             <div className="from-paj-crimson/30 via-primary/15 absolute -inset-1 rounded-2xl bg-gradient-to-tr to-transparent blur-2xl" />
@@ -333,7 +227,7 @@ function OperationsConsole() {
                 </div>
                 <div className="bg-surface-container-lowest/90 flex flex-col gap-4 p-6">
                     <div className="grid grid-cols-3 gap-3">
-                        {consoleMetrics.map((metric) => (
+                        {t.console.metrics.map((metric) => (
                             <div
                                 key={metric.label}
                                 className="border-outline-variant/40 bg-surface-container flex flex-col rounded-xl border p-3"
@@ -359,7 +253,7 @@ function OperationsConsole() {
                     <div className="border-outline-variant/40 bg-surface-container flex flex-col gap-2 rounded-xl border p-4">
                         <div className="flex items-center justify-between gap-2">
                             <span className="font-display text-on-surface text-xs font-semibold">
-                                Orkestrasi Data &amp; Alur Kerja Terintegrasi
+                                {t.console.chartTitle}
                             </span>
                             <span className="text-primary font-mono text-[11px]">
                                 PostgreSQL • Odoo XML-RPC
@@ -372,7 +266,7 @@ function OperationsConsole() {
                             <span>ENTERPRISE EVENT LOG</span>
                             <span>SLA STATUS</span>
                         </div>
-                        {consoleEvents.map((event) => (
+                        {t.console.events.map((event) => (
                             <div
                                 key={event.text}
                                 className="border-outline-variant/30 bg-surface-container flex items-center justify-between gap-2 rounded-lg border p-2.5"
@@ -428,31 +322,26 @@ function Sparkline() {
     );
 }
 
-function OdooSpotlight() {
+function OdooSpotlight({ t }: { t: Content }) {
     return (
         <div className="border-primary-container/40 from-surface-container-low via-surface-container to-surface-container-low relative overflow-hidden rounded-3xl border bg-gradient-to-r p-6 shadow-xl sm:p-8">
             <Glow className="-top-24 -right-24 h-80 w-80 blur-3xl" />
             <div className="relative grid grid-cols-1 items-center gap-8 lg:grid-cols-12">
                 <div className="flex flex-col gap-4 lg:col-span-8">
                     <Pill tone="brand" icon="verified">
-                        OFFICIAL ODOO LEARNING PARTNER
+                        {t.odoo.badge}
                     </Pill>
                     <h3 className="font-display text-on-surface text-2xl font-extrabold lg:text-3xl">
-                        Implementasi Odoo ERP
+                        {t.odoo.title}
                         <span className="text-on-surface-variant mt-1 block font-sans text-xl font-normal lg:text-2xl">
-                            Modular & Disesuaikan dengan Kebutuhan Anda
+                            {t.odoo.subtitle}
                         </span>
                     </h3>
                     <p className="text-on-surface-variant text-sm leading-relaxed">
-                        Sebagai mitra resmi Odoo, kami menyediakan implementasi
+                        {t.odoo.description}
-                        end-to-end yang dipilih sesuai kebutuhan proses bisnis
-                        Anda — mulai dari multi-company accounting, integrasi
-                        manufaktur, manajemen supply chain, hingga pelaporan
-                        eksekutif tersentralisasi. Modul tambahan seperti
-                        integrasi e-Faktur DJP tersedia bila diperlukan.
                     </p>
                     <div className="flex flex-wrap gap-2 pt-2">
-                        {odooModules.map((module) => (
+                        {t.odoo.modules.map((module) => (
                             <span
                                 key={module}
                                 className="border-outline-variant/40 bg-surface-container-high text-on-surface rounded-lg border px-3 py-1 font-mono text-xs"
@@ -464,11 +353,10 @@ function OdooSpotlight() {
                 </div>
                 <div className="border-outline-variant/50 bg-surface-container-lowest/80 flex flex-col gap-2 rounded-2xl border p-5 lg:col-span-4">
                     <span className="text-primary font-mono text-xs font-bold uppercase">
-                        Konsultasi Odoo ERP
+                        {t.odoo.cardLabel}
                     </span>
                     <p className="text-on-surface-variant text-xs">
-                        Diskusikan kebutuhan arsitektur modul dan roadmap
+                        {t.odoo.cardText}
-                        migrasi data dengan konsultan resmi kami.
                     </p>
                     <ButtonLink
                         href="#konsultasi"
@@ -476,7 +364,7 @@ function OdooSpotlight() {
                         trailingIcon="arrow_forward"
                         className="mt-2 justify-between"
                     >
-                        Minta Demo Odoo ERP
+                        {t.odoo.cardAction}
                     </ButtonLink>
                 </div>
             </div>

resources/js/pages/site/services.tsx

@@ -4,132 +4,44 @@ import Card from '@/components/site/card';
 import FeatureCard from '@/components/site/feature-card';
 import Glow from '@/components/site/glow';
 import IconTile from '@/components/site/icon-tile';
-import PageHero, { Highlight } from '@/components/site/page-hero';
+import PageHero from '@/components/site/page-hero';
 import Pill from '@/components/site/pill';
+import RichText from '@/components/site/rich-text';
 import Section from '@/components/site/section';
 import SectionHeader from '@/components/site/section-header';
 import ConsultationSection from '@/components/site/sections/consultation-section';
 import ServiceGrid from '@/components/site/sections/service-grid';
 import StepCard from '@/components/site/step-card';
-
+import { servicesContent } from '@/content/services';
-const heroStats = [
+import { useContent } from '@/hooks/use-locale';
-    { value: '40+', caption: 'Tahun Reputasi IT (Est. 1985)' },
-    { value: '100%', caption: 'Tailor-Fit Tanpa Lock-in' },
-    { value: 'Official', caption: 'Odoo Learning Partner' },
-    { value: '24/7', caption: 'SCSR Incident Response' },
-];
-
-const odooModules = [
-    {
-        icon: 'receipt_long',
-        title: 'Akuntansi & Finansial',
-        description:
-            'General ledger, accounts payable/receivable, rekonsiliasi bank otomatis, serta pelaporan keuangan multi-company.',
-    },
-    {
-        icon: 'inventory_2',
-        title: 'Supply Chain & Gudang',
-        description:
-            'Manajemen multi-warehouse, pelacakan barcode/RFID, automated replenishment, dan valuasi persediaan FIFO / Average.',
-    },
-    {
-        icon: 'precision_manufacturing',
-        title: 'Manufaktur (MRP)',
-        description:
-            'Penyusunan Bill of Materials (BOM) multi-level, perutean work order, pencatatan scrap, dan kontrol kapasitas mesin.',
-    },
-    {
-        icon: 'point_of_sale',
-        title: 'Sales, CRM & Purchasing',
-        description:
-            'Pipeline prospek, quotation approval bertingkat, purchase order vendor, dan manajemen kontrak berkala.',
-    },
-];
-
-const methodology = [
-    {
-        icon: 'search_insights',
-        title: 'Inisiasi & Analisis',
-        description:
-            'Audit alur bisnis, pemetaan GAP, dan penentuan target kinerja sistem baru.',
-    },
-    {
-        icon: 'architecture',
-        title: 'Desain Arsitektur',
-        description:
-            'Perancangan database relasional, pemodelan interface, dan kustomisasi kode.',
-    },
-    {
-        icon: 'cloud_sync',
-        title: 'Penggelaran & Setup',
-        description:
-            'Instalasi server on-premise / cloud, migrasi master data, serta stress test jaringan.',
-    },
-    {
-        icon: 'groups',
-        title: 'Pelatihan Pengguna',
-        description:
-            'Simulasi operasional riil dari tim entri hingga penyusunan laporan level direksi.',
-    },
-    {
-        icon: 'verified_user',
-        title: 'SCSR & Audit Review',
-        description:
-            'Pendampingan representative khusus, pemeliharaan berkelanjutan & review tahunan.',
-    },
-];
-
-const commitments = [
-    {
-        icon: 'speed',
-        title: 'SLA Tanggap Darurat 24/7',
-        description:
-            'Jaminan penanganan insiden darurat dengan respon di bawah 2 jam untuk crash kritis operasional pabrik atau transaksi keuangan.',
-    },
-    {
-        icon: 'security',
-        title: 'Kerahasiaan Data & NDA Terpadu',
-        description:
-            'Seluruh data bisnis, formula rantai pasok, dan rekam finansial dienkripsi standar perbankan serta dilindungi perjanjian legal mengikat.',
-    },
-    {
-        icon: 'lock_open',
-        title: 'Bebas Vendor Lock-in',
-        description:
-            'Klien memegang kendali penuh atas kode sumber, basis data, dan dokumentasi arsitektur sehingga mandiri bertumbuh di masa depan.',
-    },
-];
 
 export default function Services() {
+    const t = useContent(servicesContent);
+
     return (
         <>
-            <Head title="Jasa & Solusi IT" />
+            <Head title={t.title} />
 
             <PageHero
-                badge="Layanan & Solusi Teknologi Informasi // PT Probindo Artika Jaya"
+                badge={t.hero.badge}
-                title={
+                title={<RichText text={t.hero.title} />}
-                    <>
+                description={t.hero.description}
-                        8 Pilar Jasa Rekayasa Sistem &amp;{' '}
-                        <Highlight>Otomasi Proses Bisnis</Highlight> Terpercaya
-                    </>
-                }
-                description="Kami berkomitmen untuk menyediakan solusi yang inovatif, efisien, dan dapat diandalkan untuk memenuhi kebutuhan transformasi digital dan otomasi proses bisnis perusahaan Anda sejak 1985."
             >
                 <div className="flex flex-col gap-10">
                     <div className="flex flex-wrap items-center gap-4">
                         <ButtonLink href="#konsultasi" icon="support_agent">
-                            Konsultasikan Kebutuhan Sistem
+                            {t.hero.primaryAction}
                         </ButtonLink>
                         <ButtonLink
                             href="#metodologi"
                             variant="secondary"
                             icon="layers"
                         >
-                            Pelajari Siklus Layanan
+                            {t.hero.secondaryAction}
                         </ButtonLink>
                     </div>
                     <div className="grid w-full grid-cols-2 gap-4 sm:grid-cols-4">
-                        {heroStats.map((stat) => (
+                        {t.hero.stats.map((stat) => (
                             <Card key={stat.caption} padding="sm">
                                 <div className="font-display text-primary text-3xl font-bold">
                                     {stat.value}
@@ -147,14 +59,14 @@ export default function Services() {
                 <div className="flex flex-col gap-12">
                     <SectionHeader
                         align="split"
-                        eyebrow="Portfolio Layanan Inti"
+                        eyebrow={t.catalog.eyebrow}
-                        title="8 Pilar Spektrum Layanan Rekayasa Perangkat Lunak"
+                        title={t.catalog.title}
                         aside={
                             <Pill
                                 icon="verified"
                                 className="hidden md:inline-flex"
                             >
-                                STANDAR PROBINDO ARTIKA JAYA
+                                {t.catalog.badge}
                             </Pill>
                         }
                     />
@@ -172,38 +84,30 @@ export default function Services() {
                 <div className="grid grid-cols-1 items-center gap-10 lg:grid-cols-12">
                     <div className="flex flex-col gap-5 lg:col-span-5">
                         <Pill tone="brand" icon="verified">
-                            OFFICIAL ODOO LEARNING PARTNER
+                            {t.odoo.badge}
                         </Pill>
                         <h2 className="font-display text-on-surface lg:text-headline-xl text-3xl font-extrabold tracking-tight">
-                            Implementasi Odoo ERP Sesuai Kebutuhan Bisnis Anda
+                            {t.odoo.title}
                         </h2>
                         <p className="text-on-surface-variant text-base leading-relaxed">
-                            Menghadirkan ekosistem Enterprise Resource Planning
+                            {t.odoo.description}
-                            kelas dunia yang dikonfigurasi mengikuti proses
-                            bisnis Anda. Kami hanya mengimplementasikan modul
-                            yang benar-benar dibutuhkan — dari keuangan, rantai
-                            pasok, hingga manufaktur — sehingga sistem tetap
-                            ramping dan mudah diadopsi.
                         </p>
                         <Card padding="sm" className="flex items-start gap-4">
                             <IconTile icon="account_balance" tone="solid" />
                             <div>
                                 <div className="font-display text-on-surface text-lg font-semibold">
-                                    Modul Opsional: Integrasi e-Faktur DJP
+                                    {t.odoo.optional.title}
                                 </div>
                                 <p className="text-on-surface-variant pt-1 text-sm">
-                                    Bagi perusahaan yang membutuhkannya, kami
+                                    {t.odoo.optional.description}
-                                    menyediakan konektor data invoice ke skema
-                                    XML DJP tanpa re-input manual. Dapat
-                                    ditambahkan kapan saja sesuai kebutuhan.
                                 </p>
                             </div>
                         </Card>
                     </div>
                     <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:col-span-7">
-                        {odooModules.map((module) => (
+                        {t.odoo.modules.map((module) => (
                             <FeatureCard
-                                key={module.title}
+                                key={module.icon}
                                 iconTone="neutral"
                                 {...module}
                             />
@@ -220,18 +124,15 @@ export default function Services() {
                                 />
                                 <div>
                                     <h3 className="font-display text-on-surface text-lg font-bold">
-                                        Kustomisasi Sektor Migas &amp;
+                                        {t.odoo.custom.title}
-                                        Manufaktur Berat
                                     </h3>
                                     <p className="text-on-surface-variant text-sm">
-                                        Modul khusus perhitungan heat treatment,
+                                        {t.odoo.custom.description}
-                                        compliance standar pipa baja, hingga
-                                        sertifikasi material uji.
                                     </p>
                                 </div>
                             </div>
                             <Pill className="shrink-0 self-center">
-                                TAILOR-FIT READY
+                                {t.odoo.custom.badge}
                             </Pill>
                         </Card>
                     </div>
@@ -242,14 +143,14 @@ export default function Services() {
                 <div className="flex flex-col gap-12">
                     <SectionHeader
                         align="center"
-                        eyebrow="Metodologi Eksekusi"
+                        eyebrow={t.methodology.eyebrow}
-                        title="Siklus Alur Kerja Layanan End-to-End"
+                        title={t.methodology.title}
-                        description="Rangkaian metodologi teruji PAJ memastikan setiap investasi perangkat lunak diadopsi dengan sukses, minim hambatan transisi, dan memiliki usia pakai jangka panjang."
+                        description={t.methodology.description}
                     />
                     <div className="grid grid-cols-1 gap-4 md:grid-cols-5">
-                        {methodology.map((step, index) => (
+                        {t.methodology.steps.map((step, index) => (
                             <StepCard
-                                key={step.title}
+                                key={step.icon}
                                 step={String(index + 1).padStart(2, '0')}
                                 {...step}
                             />
@@ -261,9 +162,9 @@ export default function Services() {
             <Section tone="muted">
                 <Card padding="lg" className="lg:p-10">
                     <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
-                        {commitments.map((item) => (
+                        {t.commitments.map((item) => (
                             <div
-                                key={item.title}
+                                key={item.icon}
                                 className="flex flex-col gap-3"
                             >
                                 <IconTile
@@ -285,8 +186,8 @@ export default function Services() {
 
             <ConsultationSection
                 id="konsultasi"
-                title="Siap Mengotomasi & Memperkuat Sistem Bisnis Anda?"
+                title={t.consultation.title}
-                description="Diskusikan kebutuhan sistem Anda bersama konsultan senior PT Probindo Artika Jaya. Kami siap membantu membedah kelemahan sistem lama, audit arsitektur eksisting, atau memaparkan solusi implementasi Odoo ERP yang tepat sasaran."
+                description={t.consultation.description}
             />
         </>
     );

resources/js/types/global.d.ts

@@ -10,6 +10,7 @@ declare module '@inertiajs/core' {
     export interface InertiaConfig {
         sharedPageProps: {
             name: string;
+            locale: 'id' | 'en';
             auth: Auth;
             sidebarOpen: boolean;
             [key: string]: unknown;

tests/Feature/SitePagesTest.php

@@ -29,4 +29,25 @@ class SitePagesTest extends TestCase
             ->assertOk()
             ->assertInertia(fn (Assert $page) => $page->component($component));
     }
+
+    public function test_site_defaults_to_indonesian()
+    {
+        $this->get(route('home'))
+            ->assertInertia(fn (Assert $page) => $page->where('locale', 'id'));
+    }
+
+    public function test_locale_cookie_switches_the_site_to_english()
+    {
+        $this->withUnencryptedCookie('locale', 'en')
+            ->get(route('home'))
+            ->assertSee('<html lang="en"', false)
+            ->assertInertia(fn (Assert $page) => $page->where('locale', 'en'));
+    }
+
+    public function test_unsupported_locale_cookie_falls_back_to_indonesian()
+    {
+        $this->withUnencryptedCookie('locale', 'fr')
+            ->get(route('home'))
+            ->assertInertia(fn (Assert $page) => $page->where('locale', 'id'));
+    }
 }