@@ -0,0 +1,391 @@
|
||||
import { Head } from '@inertiajs/react';
|
||||
import { ButtonLink } from '@/components/site/button';
|
||||
import Card from '@/components/site/card';
|
||||
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, Strong } from '@/components/site/page-hero';
|
||||
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 { 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() {
|
||||
return (
|
||||
<>
|
||||
<Head title="Tentang Kami" />
|
||||
|
||||
<PageHero
|
||||
badge="Est. 1985 • IT & Automated Systems Consultant"
|
||||
title={
|
||||
<>
|
||||
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 & 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"
|
||||
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
|
||||
value="39+"
|
||||
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">
|
||||
Official
|
||||
</span>
|
||||
<span className="text-primary font-mono text-xs font-semibold tracking-wider uppercase">
|
||||
Odoo Partner
|
||||
</span>
|
||||
</div>
|
||||
<IconTile icon="verified_user" size="md" />
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</PageHero>
|
||||
|
||||
<Section>
|
||||
<div className="flex flex-col gap-12">
|
||||
<SectionHeader
|
||||
align="split"
|
||||
eyebrow="Evolusi & Ketahanan"
|
||||
title="Rekam Jejak & Transformasi Perusahaan"
|
||||
description="Dari perdagangan komoditas strategis nasional hingga menjadi pilar konsultan otomasi proses bisnis digital enterprise terdepan."
|
||||
/>
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-3">
|
||||
{milestones.map((milestone) => (
|
||||
<Card
|
||||
key={milestone.year}
|
||||
interactive
|
||||
className={
|
||||
milestone.featured
|
||||
? 'border-primary-container/50 flex flex-col'
|
||||
: 'flex flex-col'
|
||||
}
|
||||
>
|
||||
{milestone.featured && (
|
||||
<div className="from-primary-container via-primary to-primary-container absolute -top-px right-8 left-8 h-1 rounded-full bg-gradient-to-r" />
|
||||
)}
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<span className="border-outline-variant/40 bg-surface-container-high font-display text-primary rounded border px-3 py-1 text-lg font-extrabold tracking-wider">
|
||||
{milestone.year}
|
||||
</span>
|
||||
<IconTile
|
||||
icon={milestone.icon}
|
||||
groupHover
|
||||
/>
|
||||
</div>
|
||||
<h3 className="font-display text-on-surface mb-2 text-xl font-semibold">
|
||||
{milestone.title}
|
||||
</h3>
|
||||
<p className="text-on-surface-variant mb-4 text-sm leading-relaxed">
|
||||
{milestone.description}
|
||||
</p>
|
||||
<div className="border-outline-variant/30 bg-surface-container-lowest text-on-surface-variant mt-auto flex items-center gap-2 rounded-lg border p-2.5 text-sm">
|
||||
<Icon
|
||||
name={milestone.note.icon}
|
||||
className="text-primary text-base"
|
||||
/>
|
||||
{milestone.note.label}
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section id="visi-misi" tone="muted">
|
||||
<div className="flex flex-col gap-12">
|
||||
<SectionHeader
|
||||
align="center"
|
||||
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."
|
||||
/>
|
||||
<div className="grid grid-cols-1 items-stretch gap-6 lg:grid-cols-2">
|
||||
{statements.map((statement) => (
|
||||
<Card
|
||||
key={statement.label}
|
||||
padding="lg"
|
||||
interactive
|
||||
className="flex flex-col justify-between overflow-hidden lg:p-10"
|
||||
>
|
||||
<Glow className="-top-12 -right-12 h-40 w-40 blur-2xl" />
|
||||
<div className="relative flex flex-col gap-4">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span className="border-primary/40 bg-primary-container/10 text-primary rounded-full border px-3 py-1 font-mono text-[11px] font-bold tracking-wider uppercase">
|
||||
{statement.label}
|
||||
</span>
|
||||
<IconTile
|
||||
icon={statement.icon}
|
||||
size="md"
|
||||
/>
|
||||
</div>
|
||||
<blockquote className="border-primary/60 font-display text-on-surface my-2 border-l-2 pl-4 text-lg leading-relaxed font-medium italic lg:text-xl">
|
||||
“{statement.text}”
|
||||
</blockquote>
|
||||
</div>
|
||||
<div className="border-outline-variant/30 text-on-surface-variant mt-4 flex items-center gap-2 border-t pt-6 text-sm">
|
||||
<Icon
|
||||
name={statement.footer.icon}
|
||||
className="text-primary text-base"
|
||||
/>
|
||||
{statement.footer.label}
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section>
|
||||
<div className="flex flex-col gap-12">
|
||||
<SectionHeader
|
||||
eyebrow="Karakter & Nilai Inti"
|
||||
title="Filosofi Kompetensi Kami"
|
||||
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) => (
|
||||
<FeatureCard key={pillar.title} {...pillar} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section tone="muted">
|
||||
<div className="flex flex-col gap-12">
|
||||
<SectionHeader
|
||||
align="split"
|
||||
eyebrow="Cakupan Keahlian Industri"
|
||||
title="Sektor Industri yang Kami Layani"
|
||||
aside={
|
||||
<ButtonLink
|
||||
href={clients()}
|
||||
variant="ghost"
|
||||
size="inline"
|
||||
trailingIcon="arrow_forward"
|
||||
>
|
||||
Lihat Portofolio Klien Resmi
|
||||
</ButtonLink>
|
||||
}
|
||||
/>
|
||||
<div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-4">
|
||||
{industries.map((industry) => (
|
||||
<ImageCard key={industry.title} {...industry} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section tone="raised" className="py-12 lg:py-12">
|
||||
<Card className="flex flex-col items-center justify-between gap-6 lg:flex-row">
|
||||
<div className="flex items-center gap-4">
|
||||
<IconTile icon="verified_user" size="lg" />
|
||||
<div className="flex flex-col">
|
||||
<span className="font-display text-on-surface text-lg font-bold">
|
||||
Legalitas Resmi & Kepatuhan Pajak Terpadu
|
||||
</span>
|
||||
<p className="text-on-surface-variant text-sm">
|
||||
Terdaftar di Kemenkumham RI, {company.notary} (
|
||||
{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
|
||||
</span>
|
||||
<span className="font-display text-on-surface text-lg font-semibold">
|
||||
Jakarta Selatan
|
||||
</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
|
||||
</span>
|
||||
<span className="font-display text-on-surface text-lg font-semibold">
|
||||
Enterprise SLA
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Section>
|
||||
|
||||
<CtaBanner
|
||||
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."
|
||||
actions={
|
||||
<>
|
||||
<ButtonLink href={consultationUrl} icon="send">
|
||||
Jadwalkan Konsultasi IT
|
||||
</ButtonLink>
|
||||
<ButtonLink
|
||||
href={services()}
|
||||
variant="secondary"
|
||||
icon="layers"
|
||||
>
|
||||
Pelajari 8 Jasa Kami
|
||||
</ButtonLink>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,787 @@
|
||||
import { Head } from '@inertiajs/react';
|
||||
import { useState } from 'react';
|
||||
import { 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 Section from '@/components/site/section';
|
||||
import SectionHeader from '@/components/site/section-header';
|
||||
import CtaBanner from '@/components/site/sections/cta-banner';
|
||||
import { company, consultationUrl, officeAddress, offices } from '@/data/site';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { contact } from '@/routes';
|
||||
|
||||
type Sector = 'energy' | 'steel' | 'corporate';
|
||||
|
||||
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() {
|
||||
return (
|
||||
<>
|
||||
<Head title="Klien & Portofolio" />
|
||||
|
||||
<PageHero
|
||||
align="center"
|
||||
badge="Kemitraan Strategis & Portofolio Klien // PT Probindo Artika Jaya"
|
||||
title={
|
||||
<>
|
||||
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) => (
|
||||
<div
|
||||
key={stat.caption}
|
||||
className="bg-surface-container flex flex-col items-center justify-center rounded-lg p-4 text-center"
|
||||
>
|
||||
<span className="font-display text-headline-lg text-primary font-bold">
|
||||
{stat.value}
|
||||
</span>
|
||||
<span className="text-on-surface-variant mt-1 text-xs font-semibold">
|
||||
{stat.caption}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</Card>
|
||||
</PageHero>
|
||||
|
||||
<Section>
|
||||
<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
|
||||
</Eyebrow>
|
||||
<h2 className="font-display text-on-surface lg:text-headline-xl text-3xl leading-tight font-extrabold">
|
||||
Fondasi Rekayasa Industri Menuju Otomasi Mutakhir
|
||||
</h2>
|
||||
<p className="text-on-surface-variant text-base leading-relaxed">
|
||||
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.
|
||||
</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
|
||||
</h3>
|
||||
<p className="text-on-surface-variant mt-1 text-sm">
|
||||
Sistem pendampingan kapasitas berkelanjutan
|
||||
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
|
||||
src="/images/probindo/clients-operations-center.jpg"
|
||||
alt="Pusat operasi rekayasa dengan monitor telemetri industri"
|
||||
eyebrow="Heavy Industry Matrix"
|
||||
title="Migas & Fabrikasi Metalurgi"
|
||||
/>
|
||||
<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>
|
||||
|
||||
<Section tone="muted">
|
||||
<div className="flex flex-col gap-12">
|
||||
<SectionHeader
|
||||
align="center"
|
||||
eyebrow="Nilai Inti Kemitraan"
|
||||
title="Mengapa Mitra Korporasi Memilih PAJ Sejak 1985"
|
||||
description="Komitmen arsitektur terbuka dan pendampingan tanpa henti menciptakan relasi kemitraan yang melintasi dekade."
|
||||
/>
|
||||
<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{reasons.map((reason) => (
|
||||
<FeatureCard
|
||||
key={reason.title}
|
||||
iconTone="solid"
|
||||
{...reason}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section>
|
||||
<div className="flex flex-col gap-12">
|
||||
<SectionHeader
|
||||
align="split"
|
||||
eyebrow="Suara Mitra Kami"
|
||||
title="Testimoni & Pernyataan Kepercayaan"
|
||||
description="Apresiasi nyata atas komitmen tanpa henti dari tim konsultan teknis PT Probindo Artika Jaya."
|
||||
/>
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-3">
|
||||
{testimonials.map((testimonial) => (
|
||||
<Card
|
||||
key={testimonial.initials}
|
||||
className="flex flex-col justify-between gap-6"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div
|
||||
className="text-primary flex"
|
||||
aria-label="Rating 5 dari 5"
|
||||
>
|
||||
{Array.from({ length: 5 }, (_, i) => (
|
||||
<Icon key={i} name="star" filled />
|
||||
))}
|
||||
</div>
|
||||
<blockquote className="text-on-surface text-base italic">
|
||||
“{testimonial.quote}”
|
||||
</blockquote>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="bg-surface-container text-primary flex h-10 w-10 items-center justify-center rounded-full font-mono font-bold">
|
||||
{testimonial.initials}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-on-surface text-sm font-bold">
|
||||
{testimonial.role}
|
||||
</div>
|
||||
<span className="text-on-surface-variant text-sm">
|
||||
{testimonial.organization}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section tone="muted">
|
||||
<Card
|
||||
padding="lg"
|
||||
className="flex flex-col items-center justify-between gap-10 lg:flex-row lg:p-12"
|
||||
>
|
||||
<div className="max-w-xl">
|
||||
<Eyebrow>Reliability Index & Audit Trail</Eyebrow>
|
||||
<h2 className="font-display text-headline-lg text-on-surface mt-3 mb-4 font-bold">
|
||||
Stabilitas Operasional di Atas Standar Industri
|
||||
</h2>
|
||||
<p className="text-on-surface-variant mb-6 text-base leading-relaxed">
|
||||
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.
|
||||
</p>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{[
|
||||
['99.98%', 'System Availability'],
|
||||
['< 15 Mnt', 'Mitigasi Respon Krisis'],
|
||||
].map(([value, label]) => (
|
||||
<div
|
||||
key={label}
|
||||
className="bg-surface-container rounded-lg p-4"
|
||||
>
|
||||
<span className="text-headline-md text-primary font-mono font-bold">
|
||||
{value}
|
||||
</span>
|
||||
<span className="text-on-surface-variant mt-1 block text-xs font-semibold">
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<RetentionGauge />
|
||||
</Card>
|
||||
</Section>
|
||||
|
||||
<CtaBanner
|
||||
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."
|
||||
actions={
|
||||
<>
|
||||
<ButtonLink
|
||||
href={consultationUrl}
|
||||
icon="event_available"
|
||||
>
|
||||
Jadwalkan Diskusi Teknis
|
||||
</ButtonLink>
|
||||
<ButtonLink
|
||||
href={`${contact.url()}#lokasi`}
|
||||
variant="secondary"
|
||||
icon="apartment"
|
||||
>
|
||||
Lihat Lokasi Kantor PAJ
|
||||
</ButtonLink>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
<Section tone="muted">
|
||||
<Card
|
||||
padding="lg"
|
||||
className="grid grid-cols-1 items-center gap-8 lg:grid-cols-12 lg:p-10"
|
||||
>
|
||||
<div className="flex flex-col gap-4 lg:col-span-4">
|
||||
<img
|
||||
src={company.logo}
|
||||
alt={company.name}
|
||||
className="h-12 w-auto self-start object-contain"
|
||||
/>
|
||||
<h2 className="font-display text-on-surface text-lg font-bold">
|
||||
Kantor Operasional & IT Consultant Desk
|
||||
</h2>
|
||||
<p className="text-on-surface-variant text-sm">
|
||||
Pusat koordinasi rekayasa sistem informasi, audit
|
||||
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) => (
|
||||
<a
|
||||
key={office.name}
|
||||
href={office.phone.href}
|
||||
className="hover:text-primary flex items-center gap-2"
|
||||
>
|
||||
<Icon
|
||||
name="call"
|
||||
className="text-primary text-base"
|
||||
/>
|
||||
{office.phone.label}
|
||||
</a>
|
||||
))}
|
||||
<a
|
||||
href={`mailto:${company.email.busdev}`}
|
||||
className="hover:text-primary flex items-center gap-2"
|
||||
>
|
||||
<Icon
|
||||
name="mail"
|
||||
className="text-primary text-base"
|
||||
/>
|
||||
{company.email.busdev}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative flex min-h-56 items-center overflow-hidden rounded-xl bg-neutral-900 p-4 lg:col-span-8">
|
||||
<img
|
||||
src="/images/probindo/clients-hero-bg.jpg"
|
||||
alt=""
|
||||
loading="lazy"
|
||||
className="absolute inset-0 h-full w-full object-cover"
|
||||
/>
|
||||
<div className="relative z-10 grid w-full grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
{offices.map((office) => (
|
||||
<div
|
||||
key={office.name}
|
||||
className="bg-surface-container-lowest/90 rounded-xl p-4 shadow-lg backdrop-blur-md"
|
||||
>
|
||||
<span className="text-primary mb-1 block font-mono text-[11px] font-bold uppercase">
|
||||
{office.name}
|
||||
</span>
|
||||
<p className="text-on-surface text-sm font-medium">
|
||||
{officeAddress(office)}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function DetailBlock({ label, text }: { label: string; text: string }) {
|
||||
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() {
|
||||
const [filter, setFilter] = useState<Sector | 'all'>('all');
|
||||
const visible = (sector: Sector) => filter === 'all' || filter === sector;
|
||||
|
||||
return (
|
||||
<Section tone="muted">
|
||||
<div className="flex flex-col gap-12">
|
||||
<SectionHeader
|
||||
align="split"
|
||||
eyebrow="Klasifikasi Sektor Portofolio"
|
||||
title="Sektor Industri Teruji & Karakteristik Sistem"
|
||||
aside={
|
||||
<div
|
||||
role="group"
|
||||
aria-label="Filter sektor"
|
||||
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) => (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
aria-pressed={filter === option.value}
|
||||
onClick={() => setFilter(option.value)}
|
||||
className={cn(
|
||||
'cursor-pointer rounded-lg px-4 py-2 text-xs font-semibold transition-all',
|
||||
filter === option.value
|
||||
? 'bg-primary-container text-white shadow-md'
|
||||
: 'bg-surface-container text-on-surface-variant hover:text-on-surface',
|
||||
)}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{industrySectors.map((item) => (
|
||||
<Card
|
||||
key={item.code}
|
||||
padding="lg"
|
||||
interactive
|
||||
className={cn(
|
||||
'flex flex-col justify-between overflow-hidden',
|
||||
item.wide && 'lg:col-span-2',
|
||||
!visible(item.sector) && 'hidden',
|
||||
)}
|
||||
>
|
||||
{item.wide && (
|
||||
<Glow className="-top-12 -right-12 h-48 w-48 blur-3xl" />
|
||||
)}
|
||||
<div className="relative">
|
||||
<div className="mb-6 flex items-center justify-between gap-3">
|
||||
<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">
|
||||
<Icon
|
||||
name={item.icon}
|
||||
className="text-sm"
|
||||
/>
|
||||
{item.code}
|
||||
</span>
|
||||
<span className="text-on-surface-variant font-mono text-[11px] font-semibold">
|
||||
{item.tag}
|
||||
</span>
|
||||
</div>
|
||||
<h3
|
||||
className={cn(
|
||||
'font-display text-on-surface mb-3 font-bold',
|
||||
item.wide
|
||||
? 'text-headline-md lg:text-headline-lg'
|
||||
: 'text-headline-md',
|
||||
)}
|
||||
>
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-on-surface-variant mb-6 text-base leading-relaxed">
|
||||
{item.description}
|
||||
</p>
|
||||
<div
|
||||
className={cn(
|
||||
'mb-6 grid grid-cols-1 gap-4',
|
||||
item.wide && 'sm:grid-cols-2',
|
||||
)}
|
||||
>
|
||||
{item.details.map((detail) => (
|
||||
<DetailBlock
|
||||
key={detail.label}
|
||||
{...detail}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<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 & DISTRIBUSI
|
||||
</span>
|
||||
<h3 className="font-display text-headline-md text-on-surface mb-2 font-bold">
|
||||
Sektor Komersial, Ritel Distribusi &
|
||||
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() {
|
||||
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
|
||||
</span>
|
||||
<div className="relative flex h-48 w-48 items-center justify-center">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="absolute inset-0 -rotate-90"
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<circle
|
||||
className="stroke-surface-container-highest fill-none"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="42"
|
||||
strokeWidth="8"
|
||||
/>
|
||||
<circle
|
||||
className="stroke-primary-container fill-none"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="42"
|
||||
strokeDasharray="264"
|
||||
strokeDashoffset="1"
|
||||
strokeLinecap="round"
|
||||
strokeWidth="8"
|
||||
/>
|
||||
</svg>
|
||||
<div className="flex flex-col items-center">
|
||||
<span className="font-display text-headline-xl text-on-surface font-bold">
|
||||
99.8%
|
||||
</span>
|
||||
<span className="text-highlight text-xs font-semibold">
|
||||
Tingkat Retensi
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-on-surface-variant mt-4 text-center text-sm">
|
||||
Mayoritas mitra memperpanjang kontrak pemeliharaan dan audit
|
||||
berkala melampaui siklus 5 tahunan.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,784 @@
|
||||
import { Head } from '@inertiajs/react';
|
||||
import { useState } from 'react';
|
||||
import type { FormEvent } from 'react';
|
||||
import { Button, ButtonLink } from '@/components/site/button';
|
||||
import Card from '@/components/site/card';
|
||||
import Eyebrow from '@/components/site/eyebrow';
|
||||
import {
|
||||
Field,
|
||||
SelectInput,
|
||||
TextArea,
|
||||
TextInput,
|
||||
} 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 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 { cn } from '@/lib/utils';
|
||||
|
||||
const whatsappMessage =
|
||||
'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() {
|
||||
return (
|
||||
<>
|
||||
<Head title="Kontak & Konsultasi" />
|
||||
|
||||
<PageHero
|
||||
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{' '}
|
||||
<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) => (
|
||||
<Card
|
||||
key={item.label}
|
||||
padding="sm"
|
||||
className="flex items-center gap-3"
|
||||
>
|
||||
<IconTile icon={item.icon} tone="solid" />
|
||||
<div className="flex flex-col">
|
||||
<span className="text-on-surface-variant font-mono text-[11px] font-semibold uppercase">
|
||||
{item.label}
|
||||
</span>
|
||||
<span className="font-display text-on-surface text-lg font-semibold">
|
||||
{item.value}
|
||||
</span>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
<Card className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{highlights.map((item) => (
|
||||
<div
|
||||
key={item.label}
|
||||
className="flex items-start gap-3"
|
||||
>
|
||||
<Icon
|
||||
name={item.icon}
|
||||
className="text-primary mt-0.5 text-2xl"
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-on-surface-variant font-mono text-[11px] font-semibold uppercase">
|
||||
{item.label}
|
||||
</span>
|
||||
<span className="text-on-surface text-sm font-semibold">
|
||||
{item.value}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Card>
|
||||
</div>
|
||||
</PageHero>
|
||||
|
||||
<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 />
|
||||
<ChannelsCard />
|
||||
<IncidentLineCard />
|
||||
</div>
|
||||
<div id="audit-form" className="lg:col-span-7">
|
||||
<ConsultationRequestForm />
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section id="lokasi" tone="muted">
|
||||
<div className="flex flex-col gap-10">
|
||||
<SectionHeader
|
||||
align="split"
|
||||
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."
|
||||
/>
|
||||
<OfficeMap />
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-3">
|
||||
{accessPoints.map((point) => (
|
||||
<Card
|
||||
key={point.title}
|
||||
className="flex items-start gap-4"
|
||||
>
|
||||
<IconTile
|
||||
icon={point.icon}
|
||||
size="md"
|
||||
tone="neutral"
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-display text-on-surface text-lg font-bold">
|
||||
{point.title}
|
||||
</span>
|
||||
<p className="text-on-surface-variant pt-1 text-sm leading-relaxed">
|
||||
{point.description}
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section>
|
||||
<div className="flex flex-col gap-12">
|
||||
<SectionHeader
|
||||
align="center"
|
||||
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."
|
||||
/>
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
|
||||
{onboardingSteps.map((step, index) => (
|
||||
<StepCard
|
||||
key={step.title}
|
||||
step={String(index + 1).padStart(2, '0')}
|
||||
{...step}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section tone="muted" size="narrow">
|
||||
<div className="flex flex-col gap-12">
|
||||
<SectionHeader
|
||||
align="center"
|
||||
eyebrow="Tanya Jawab Umum"
|
||||
title="Pertanyaan Seputar Konsultasi & Penugasan PAJ"
|
||||
description="Jawaban ringkas terkait model kerja sama teknis, audit, dan penugasan onsite."
|
||||
/>
|
||||
<div className="space-y-4">
|
||||
{faqs.map((faq) => (
|
||||
<Card
|
||||
key={faq.question}
|
||||
className="flex items-start gap-4"
|
||||
>
|
||||
<Icon
|
||||
name="help"
|
||||
className="text-primary mt-0.5 text-2xl"
|
||||
/>
|
||||
<div className="flex flex-col gap-2">
|
||||
<h3 className="font-display text-on-surface text-lg font-bold">
|
||||
{faq.question}
|
||||
</h3>
|
||||
<p className="text-on-surface-variant text-base leading-relaxed">
|
||||
{faq.answer}
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</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?
|
||||
</h3>
|
||||
<p className="text-on-surface-variant max-w-xl text-base">
|
||||
Hubungi Hotline WhatsApp Konsultan Enterprise kami
|
||||
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
|
||||
href={company.whatsapp.href}
|
||||
size="sm"
|
||||
icon="chat"
|
||||
>
|
||||
WhatsApp Konsultan ({company.whatsapp.label})
|
||||
</ButtonLink>
|
||||
<ButtonLink
|
||||
href={company.phone.href}
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
icon="call"
|
||||
>
|
||||
Telepon Kantor ({company.phone.label})
|
||||
</ButtonLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function CardLabel({ children }: { children: string }) {
|
||||
return (
|
||||
<span className="text-on-surface-variant font-mono text-[11px] font-semibold uppercase">
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function OfficeCard() {
|
||||
return (
|
||||
<Card padding="lg">
|
||||
<div className="pb-4">
|
||||
<CardLabel>Kantor Operasional</CardLabel>
|
||||
<h3 className="font-display text-on-surface text-lg font-bold">
|
||||
Lokasi Kantor PAJ
|
||||
</h3>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3">
|
||||
{offices.map((office) => (
|
||||
<div
|
||||
key={office.name}
|
||||
className="bg-surface-container flex items-start gap-3 rounded-lg p-3.5"
|
||||
>
|
||||
<IconTile icon={office.icon} tone="neutral" />
|
||||
<div className="flex flex-col gap-1 text-sm">
|
||||
<span className="text-on-surface font-bold">
|
||||
{office.name}
|
||||
</span>
|
||||
<span className="text-on-surface-variant leading-relaxed">
|
||||
{officeAddress(office)}
|
||||
</span>
|
||||
<a
|
||||
href={office.phone.href}
|
||||
className="text-on-surface hover:text-primary font-mono font-semibold"
|
||||
>
|
||||
Tel. {office.phone.label}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</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>
|
||||
<span className="text-on-surface font-semibold">
|
||||
Senin – Jumat
|
||||
</span>
|
||||
<span className="text-on-surface-variant">
|
||||
08:30 – 17:30 WIB
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<CardLabel>Status Kunjungan</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
|
||||
</span>
|
||||
<span className="text-on-surface-variant">
|
||||
Harap konfirmasi H-1
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function ChannelsCard() {
|
||||
return (
|
||||
<Card padding="lg" className="flex flex-col gap-5">
|
||||
<div>
|
||||
<CardLabel>Korespondensi Langsung</CardLabel>
|
||||
<h3 className="font-display text-on-surface text-lg font-bold">
|
||||
Saluran Komunikasi Resmi
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{channels.map((channel) => {
|
||||
const external = channel.href.startsWith('http');
|
||||
|
||||
return (
|
||||
<a
|
||||
key={channel.label}
|
||||
href={channel.href}
|
||||
target={external ? '_blank' : undefined}
|
||||
rel={external ? 'noopener noreferrer' : undefined}
|
||||
className="group bg-surface-container hover:bg-surface-container-high flex items-center justify-between gap-3 rounded-lg p-3.5 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<Icon
|
||||
name={channel.icon}
|
||||
className="text-primary text-2xl transition-transform group-hover:scale-110"
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<CardLabel>{channel.label}</CardLabel>
|
||||
<span className="text-on-surface font-semibold">
|
||||
{channel.value}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{channel.badge ? (
|
||||
<span className="bg-surface-container-high text-on-surface group-hover:bg-primary-container shrink-0 rounded px-2 py-0.5 font-mono text-[11px] transition-colors group-hover:text-white">
|
||||
{channel.badge}
|
||||
</span>
|
||||
) : (
|
||||
<Icon
|
||||
name={channel.trailing ?? 'arrow_outward'}
|
||||
className="text-on-surface-variant group-hover:text-on-surface text-lg transition-colors"
|
||||
/>
|
||||
)}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function IncidentLineCard() {
|
||||
return (
|
||||
<Card
|
||||
padding="lg"
|
||||
className="from-primary-container/15 via-surface-container-low to-surface-container-low dark:from-primary-container/40 overflow-hidden bg-gradient-to-br"
|
||||
>
|
||||
<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)
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="font-display text-on-surface mb-2 text-lg font-bold">
|
||||
Dedicated Incident Line 24/7
|
||||
</h3>
|
||||
<p className="text-on-surface-variant mb-4 text-sm leading-relaxed">
|
||||
Jalur khusus tier-1 untuk klien dengan kontrak pemeliharaan
|
||||
& 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
|
||||
</span>
|
||||
</div>
|
||||
<span className="font-display text-primary text-lg font-bold">
|
||||
< 15 Menit
|
||||
</span>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Full consultation request form.
|
||||
*
|
||||
* TODO: submissions are not sent anywhere yet; wire this to a Laravel
|
||||
* endpoint before going live.
|
||||
*/
|
||||
function ConsultationRequestForm() {
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
|
||||
const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
setSubmitted(true);
|
||||
event.currentTarget.reset();
|
||||
};
|
||||
|
||||
return (
|
||||
<Card padding="lg" className="shadow-xl lg:p-10">
|
||||
<div className="border-outline-variant/30 border-b pb-6">
|
||||
<Eyebrow icon="quick_reference">
|
||||
Sesi Audit & Permintaan Tender
|
||||
</Eyebrow>
|
||||
<h2 className="font-display text-headline-lg text-on-surface pt-2 font-bold">
|
||||
Formulir Konsultasi & Audit Arsitektur Sistem
|
||||
</h2>
|
||||
<p className="text-on-surface-variant pt-2 text-base">
|
||||
Isi rincian kebutuhan sistem Anda di bawah ini. Lead
|
||||
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>
|
||||
<TextInput
|
||||
id="full-name"
|
||||
name="name"
|
||||
placeholder="Contoh: Ir. Hendra Prasetyo, M.T."
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
id="company-name"
|
||||
label="Nama Perusahaan / Instansi / BUMN"
|
||||
required
|
||||
>
|
||||
<TextInput
|
||||
id="company-name"
|
||||
name="company"
|
||||
placeholder="PT Petro Nusantara Energy"
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
<Field id="job-title" label="Jabatan / Divisi" required>
|
||||
<TextInput
|
||||
id="job-title"
|
||||
name="job_title"
|
||||
placeholder="VP Information Technology / GM Finance"
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
id="work-email"
|
||||
label="Email Resmi Perusahaan"
|
||||
required
|
||||
>
|
||||
<TextInput
|
||||
id="work-email"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="hendra@petronusantara.co.id"
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
id="phone-number"
|
||||
label="Nomor WhatsApp / Telepon Langsung"
|
||||
required
|
||||
>
|
||||
<TextInput
|
||||
id="phone-number"
|
||||
name="phone"
|
||||
type="tel"
|
||||
placeholder="+62 812 XXXX XXXX"
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
id="industry-sector"
|
||||
label="Klasifikasi Sektor Industri"
|
||||
required
|
||||
>
|
||||
<SelectInput
|
||||
id="industry-sector"
|
||||
name="industry"
|
||||
placeholder="Pilih Sektor Industri Anda"
|
||||
options={industryOptions}
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<Field
|
||||
id="service-focus"
|
||||
label="Pilar Kebutuhan / Fokus Jasa PAJ"
|
||||
required
|
||||
>
|
||||
<SelectInput
|
||||
id="service-focus"
|
||||
name="service"
|
||||
placeholder="Pilih Layanan Utama yang Dibutuhkan"
|
||||
options={serviceOptions}
|
||||
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
|
||||
</legend>
|
||||
<div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
|
||||
{timelines.map((timeline, index) => (
|
||||
<label
|
||||
key={timeline.value}
|
||||
className={cn(
|
||||
'border-outline-variant/60 bg-surface-container-lowest text-on-surface hover:bg-surface-container-high flex cursor-pointer flex-col rounded-lg border p-3 transition-colors',
|
||||
'has-checked:border-primary-container has-checked:bg-primary-container has-checked:text-white',
|
||||
'has-focus-visible:ring-primary has-focus-visible:ring-2',
|
||||
)}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="timeline"
|
||||
value={timeline.value}
|
||||
defaultChecked={index === 0}
|
||||
className="sr-only"
|
||||
/>
|
||||
<span className="text-xs font-bold">
|
||||
{timeline.label}
|
||||
</span>
|
||||
<span className="text-sm opacity-80">
|
||||
{timeline.note}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<Field
|
||||
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)..."
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<div className="bg-surface-container-lowest flex items-start gap-3 rounded-lg p-3.5">
|
||||
<input
|
||||
id="nda-consent"
|
||||
name="nda"
|
||||
type="checkbox"
|
||||
required
|
||||
className="mt-0.5 h-4 w-4 shrink-0"
|
||||
/>
|
||||
<label
|
||||
htmlFor="nda-consent"
|
||||
className="text-on-surface-variant cursor-pointer text-sm"
|
||||
>
|
||||
Saya menyetujui penandatanganan{' '}
|
||||
<Strong>Non-Disclosure Agreement (NDA)</Strong> sebelum
|
||||
pertukaran data teknis & flow diagram operasional
|
||||
korporasi.
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<Button type="submit" size="block" trailingIcon="arrow_forward">
|
||||
Kirim Permohonan Konsultasi Teknis
|
||||
</Button>
|
||||
|
||||
{submitted && (
|
||||
<div
|
||||
role="status"
|
||||
className="border-primary/40 bg-surface-container-high text-on-surface flex items-center gap-3 rounded-lg border p-4"
|
||||
>
|
||||
<Icon
|
||||
name="check_circle"
|
||||
className="text-primary text-2xl"
|
||||
/>
|
||||
<div>
|
||||
<span className="font-bold">
|
||||
Permohonan Berhasil Dikirimkan!
|
||||
</span>
|
||||
<p className="text-on-surface-variant text-sm">
|
||||
Lead Consultant PAJ akan mengonfirmasi via
|
||||
email/telepon resmi dalam kurun waktu kurang
|
||||
dari 2 jam kerja.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<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
|
||||
perjanjian kerahasiaan (NDA) dan kepatuhan hukum Indonesia.
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function OfficeMap() {
|
||||
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"
|
||||
loading="lazy"
|
||||
className="absolute inset-0 h-full w-full object-cover dark:brightness-75 dark:hue-rotate-180 dark:invert"
|
||||
/>
|
||||
<div className="from-surface via-surface/40 absolute inset-0 bg-gradient-to-t to-transparent" />
|
||||
<div className="relative mt-40 grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
{offices.map((office) => (
|
||||
<div
|
||||
key={office.name}
|
||||
className="border-outline-variant/40 bg-surface-container/95 flex flex-col gap-3 rounded-xl border p-5 shadow-2xl backdrop-blur-md"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<IconTile icon={office.icon} tone="solid" />
|
||||
<div>
|
||||
<span className="text-primary font-mono text-[11px] font-semibold uppercase">
|
||||
{office.district}
|
||||
</span>
|
||||
<h3 className="font-display text-on-surface text-lg font-bold">
|
||||
{office.name}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-on-surface-variant text-sm leading-relaxed">
|
||||
{officeAddress(office)}
|
||||
</p>
|
||||
<ButtonLink
|
||||
href={office.mapsUrl}
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
icon="directions"
|
||||
className="self-start"
|
||||
>
|
||||
Buka Petunjuk Arah
|
||||
</ButtonLink>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,485 @@
|
||||
import { Head, Link } from '@inertiajs/react';
|
||||
import { ButtonLink } from '@/components/site/button';
|
||||
import Card from '@/components/site/card';
|
||||
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 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 { about, clients, services } from '@/routes';
|
||||
|
||||
const stats = [
|
||||
{
|
||||
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() {
|
||||
return (
|
||||
<>
|
||||
<Head title="Konsultan IT & Automated Systems" />
|
||||
<Hero />
|
||||
|
||||
<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) => (
|
||||
<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>
|
||||
Sektor Strategis & Rekam Jejak Industri
|
||||
</Eyebrow>
|
||||
<p className="text-on-surface-variant text-xs">
|
||||
Mitra Terpercaya Solusi Bisnis & Sistem
|
||||
Otomasi Terintegrasi untuk Sektor Strategis
|
||||
Nasional
|
||||
</p>
|
||||
</div>
|
||||
<span className="text-on-surface-variant font-mono text-[11px]">
|
||||
PENGALAMAN SEJAK 1985 & 2002
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-5">
|
||||
{sectors.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"
|
||||
>
|
||||
{sector}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section>
|
||||
<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 & Rekam Jejak Perusahaan
|
||||
</Eyebrow>
|
||||
<h2 className="font-display text-on-surface text-3xl leading-tight font-extrabold lg:text-4xl">
|
||||
Sejak 1985 Membangun Solusi IT Andal &
|
||||
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">
|
||||
PT Probindo Artika Jaya didirikan di Jakarta pada
|
||||
tahun 1985 di hadapan {company.notary}. 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.
|
||||
</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"
|
||||
size="inline"
|
||||
trailingIcon="arrow_forward"
|
||||
className="self-start"
|
||||
>
|
||||
Selengkapnya tentang PAJ
|
||||
</ButtonLink>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-6 lg:col-span-7">
|
||||
{statements.map((statement) => (
|
||||
<Card
|
||||
key={statement.label}
|
||||
padding="lg"
|
||||
interactive
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<Glow className="-top-12 -right-12 h-40 w-40 blur-2xl" />
|
||||
<div className="relative flex items-start gap-4">
|
||||
<IconTile icon={statement.icon} size="md" />
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-primary font-mono text-xs font-bold tracking-wider uppercase">
|
||||
{statement.label}
|
||||
</span>
|
||||
<blockquote className="border-primary/60 text-on-surface border-l-2 pl-3 text-sm leading-relaxed italic sm:text-base">
|
||||
“{statement.text}”
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section id="jasa-layanan" tone="muted">
|
||||
<div className="flex flex-col gap-12">
|
||||
<SectionHeader
|
||||
align="split"
|
||||
eyebrow="Layanan Utama & Portofolio Solusi"
|
||||
eyebrowIcon="apps"
|
||||
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."
|
||||
/>
|
||||
<OdooSpotlight />
|
||||
<ServiceGrid />
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<ConsultationSection
|
||||
id="konsultasi"
|
||||
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."
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function Hero() {
|
||||
return (
|
||||
<Section
|
||||
tone="muted"
|
||||
background={
|
||||
<>
|
||||
<GridPattern />
|
||||
<Glow className="-top-40 -left-20 h-[640px] w-[640px] blur-[140px]" />
|
||||
<Glow className="bg-primary/15 top-1/4 -right-20 h-[560px] w-[560px] blur-[150px]" />
|
||||
</>
|
||||
}
|
||||
>
|
||||
<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>
|
||||
Est. 1985 • IT & 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{' '}
|
||||
<Highlight>Custom Software</Highlight> &
|
||||
Automated Systems
|
||||
</h1>
|
||||
<p className="text-on-surface-variant text-base leading-relaxed lg:text-lg">
|
||||
PT Probindo Artika Jaya merancang, membangun, dan
|
||||
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">
|
||||
<ButtonLink
|
||||
href="#konsultasi"
|
||||
trailingIcon="arrow_forward"
|
||||
>
|
||||
Jadwalkan Audit Sistem
|
||||
</ButtonLink>
|
||||
<ButtonLink
|
||||
href={services()}
|
||||
variant="secondary"
|
||||
icon="layers"
|
||||
>
|
||||
Eksplorasi 8 Jasa Resmi
|
||||
</ButtonLink>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 pt-2">
|
||||
<div className="flex -space-x-2">
|
||||
{['KS', 'ME', 'TP'].map((initials) => (
|
||||
<div
|
||||
key={initials}
|
||||
className="border-outline-variant bg-surface-container-high text-primary flex h-8 w-8 items-center justify-center rounded-full border font-mono text-[11px] font-bold shadow-sm"
|
||||
>
|
||||
{initials}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-on-surface-variant text-xs">
|
||||
Dipercaya oleh{' '}
|
||||
<Link
|
||||
href={clients()}
|
||||
className="text-on-surface hover:text-primary font-semibold"
|
||||
>
|
||||
100+ Enterprise Corporates
|
||||
</Link>{' '}
|
||||
di sektor Oil & Gas, Steel, Mining, &
|
||||
Manufaktur.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative lg:col-span-6">
|
||||
<OperationsConsole />
|
||||
</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() {
|
||||
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" />
|
||||
<div className="border-outline-variant/60 bg-surface-container-low relative flex w-full flex-col overflow-hidden rounded-2xl border shadow-2xl">
|
||||
<div className="border-outline-variant/40 bg-surface-container-high flex items-center justify-between border-b px-4 py-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="bg-primary/80 h-3 w-3 rounded-full" />
|
||||
<span className="h-3 w-3 rounded-full bg-amber-400/80" />
|
||||
<span className="h-3 w-3 rounded-full bg-emerald-400/80" />
|
||||
<span className="text-on-surface-variant ml-2 font-mono text-[11px]">
|
||||
paj-core-suite.internal // v4.20.1
|
||||
</span>
|
||||
</div>
|
||||
<span className="border-primary/30 bg-surface-container-lowest text-primary inline-flex items-center gap-1 rounded border px-2 py-0.5 font-mono text-[11px]">
|
||||
<span className="bg-primary h-1.5 w-1.5 animate-pulse rounded-full" />
|
||||
LIVE 14ms
|
||||
</span>
|
||||
</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) => (
|
||||
<div
|
||||
key={metric.label}
|
||||
className="border-outline-variant/40 bg-surface-container flex flex-col rounded-xl border p-3"
|
||||
>
|
||||
<span className="text-on-surface-variant text-xs">
|
||||
{metric.label}
|
||||
</span>
|
||||
<span
|
||||
className={
|
||||
metric.accent
|
||||
? 'font-display text-primary mt-1 text-xl font-bold'
|
||||
: 'font-display text-on-surface mt-1 text-xl font-bold'
|
||||
}
|
||||
>
|
||||
{metric.value}
|
||||
</span>
|
||||
<span className="text-on-surface-variant mt-0.5 font-mono text-[10px]">
|
||||
{metric.note}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<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 & Alur Kerja Terintegrasi
|
||||
</span>
|
||||
<span className="text-primary font-mono text-[11px]">
|
||||
PostgreSQL • Odoo XML-RPC
|
||||
</span>
|
||||
</div>
|
||||
<Sparkline />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="text-on-surface-variant flex items-center justify-between px-1 font-mono text-[11px]">
|
||||
<span>ENTERPRISE EVENT LOG</span>
|
||||
<span>SLA STATUS</span>
|
||||
</div>
|
||||
{consoleEvents.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"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Icon
|
||||
name={event.icon}
|
||||
className="text-primary text-sm"
|
||||
/>
|
||||
<span className="text-on-surface font-mono text-[11px]">
|
||||
{event.text}
|
||||
</span>
|
||||
</div>
|
||||
<span className="bg-primary/15 text-primary shrink-0 rounded px-2 py-0.5 font-mono text-[10px] font-semibold">
|
||||
{event.status}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Sparkline() {
|
||||
const line =
|
||||
'M 0 50 Q 30 45, 60 30 T 120 40 T 180 20 T 240 35 T 300 12 T 380 16';
|
||||
|
||||
return (
|
||||
<svg
|
||||
className="h-20 w-full overflow-visible pt-1"
|
||||
fill="none"
|
||||
preserveAspectRatio="none"
|
||||
viewBox="0 0 380 70"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="spark-glow" x1="0" x2="0" y1="0" y2="1">
|
||||
<stop offset="0%" stopColor="#9E1B22" stopOpacity="0.45" />
|
||||
<stop offset="60%" stopColor="#FF4D58" stopOpacity="0.12" />
|
||||
<stop offset="100%" stopColor="#FF4D58" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d={`${line} L 380 70 L 0 70 Z`} fill="url(#spark-glow)" />
|
||||
<path
|
||||
d={line}
|
||||
className="stroke-primary"
|
||||
strokeLinecap="round"
|
||||
strokeWidth="2.5"
|
||||
/>
|
||||
<circle cx="380" cy="16" r="3.5" className="fill-primary" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function OdooSpotlight() {
|
||||
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
|
||||
</Pill>
|
||||
<h3 className="font-display text-on-surface text-2xl font-extrabold lg:text-3xl">
|
||||
Implementasi Odoo ERP
|
||||
<span className="text-on-surface-variant mt-1 block font-sans text-xl font-normal lg:text-2xl">
|
||||
Modular & Disesuaikan dengan Kebutuhan Anda
|
||||
</span>
|
||||
</h3>
|
||||
<p className="text-on-surface-variant text-sm leading-relaxed">
|
||||
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.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2 pt-2">
|
||||
{odooModules.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"
|
||||
>
|
||||
{module}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</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
|
||||
</span>
|
||||
<p className="text-on-surface-variant text-xs">
|
||||
Diskusikan kebutuhan arsitektur modul dan roadmap
|
||||
migrasi data dengan konsultan resmi kami.
|
||||
</p>
|
||||
<ButtonLink
|
||||
href="#konsultasi"
|
||||
size="block"
|
||||
trailingIcon="arrow_forward"
|
||||
className="mt-2 justify-between"
|
||||
>
|
||||
Minta Demo Odoo ERP
|
||||
</ButtonLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,293 @@
|
||||
import { Head } from '@inertiajs/react';
|
||||
import { ButtonLink } from '@/components/site/button';
|
||||
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 Pill from '@/components/site/pill';
|
||||
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';
|
||||
|
||||
const heroStats = [
|
||||
{ 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() {
|
||||
return (
|
||||
<>
|
||||
<Head title="Jasa & Solusi IT" />
|
||||
|
||||
<PageHero
|
||||
badge="Layanan & Solusi Teknologi Informasi // PT Probindo Artika Jaya"
|
||||
title={
|
||||
<>
|
||||
8 Pilar Jasa Rekayasa Sistem &{' '}
|
||||
<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
|
||||
</ButtonLink>
|
||||
<ButtonLink
|
||||
href="#metodologi"
|
||||
variant="secondary"
|
||||
icon="layers"
|
||||
>
|
||||
Pelajari Siklus Layanan
|
||||
</ButtonLink>
|
||||
</div>
|
||||
<div className="grid w-full grid-cols-2 gap-4 sm:grid-cols-4">
|
||||
{heroStats.map((stat) => (
|
||||
<Card key={stat.caption} padding="sm">
|
||||
<div className="font-display text-primary text-3xl font-bold">
|
||||
{stat.value}
|
||||
</div>
|
||||
<div className="text-on-surface-variant text-sm">
|
||||
{stat.caption}
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</PageHero>
|
||||
|
||||
<Section id="jasa-resmi">
|
||||
<div className="flex flex-col gap-12">
|
||||
<SectionHeader
|
||||
align="split"
|
||||
eyebrow="Portfolio Layanan Inti"
|
||||
title="8 Pilar Spektrum Layanan Rekayasa Perangkat Lunak"
|
||||
aside={
|
||||
<Pill
|
||||
icon="verified"
|
||||
className="hidden md:inline-flex"
|
||||
>
|
||||
STANDAR PROBINDO ARTIKA JAYA
|
||||
</Pill>
|
||||
}
|
||||
/>
|
||||
<ServiceGrid detail="description" />
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
id="odoo-erp"
|
||||
tone="muted"
|
||||
background={
|
||||
<Glow className="-top-24 -right-24 h-80 w-80 blur-3xl" />
|
||||
}
|
||||
>
|
||||
<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
|
||||
</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
|
||||
</h2>
|
||||
<p className="text-on-surface-variant text-base leading-relaxed">
|
||||
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.
|
||||
</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
|
||||
</div>
|
||||
<p className="text-on-surface-variant pt-1 text-sm">
|
||||
Bagi perusahaan yang membutuhkannya, kami
|
||||
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) => (
|
||||
<FeatureCard
|
||||
key={module.title}
|
||||
iconTone="neutral"
|
||||
{...module}
|
||||
/>
|
||||
))}
|
||||
<Card
|
||||
interactive
|
||||
className="flex flex-col items-center justify-between gap-4 sm:col-span-2 sm:flex-row"
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<IconTile
|
||||
icon="factory"
|
||||
size="md"
|
||||
tone="solid"
|
||||
/>
|
||||
<div>
|
||||
<h3 className="font-display text-on-surface text-lg font-bold">
|
||||
Kustomisasi Sektor Migas &
|
||||
Manufaktur Berat
|
||||
</h3>
|
||||
<p className="text-on-surface-variant text-sm">
|
||||
Modul khusus perhitungan heat treatment,
|
||||
compliance standar pipa baja, hingga
|
||||
sertifikasi material uji.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Pill className="shrink-0 self-center">
|
||||
TAILOR-FIT READY
|
||||
</Pill>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section id="metodologi">
|
||||
<div className="flex flex-col gap-12">
|
||||
<SectionHeader
|
||||
align="center"
|
||||
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."
|
||||
/>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-5">
|
||||
{methodology.map((step, index) => (
|
||||
<StepCard
|
||||
key={step.title}
|
||||
step={String(index + 1).padStart(2, '0')}
|
||||
{...step}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<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) => (
|
||||
<div
|
||||
key={item.title}
|
||||
className="flex flex-col gap-3"
|
||||
>
|
||||
<IconTile
|
||||
icon={item.icon}
|
||||
size="md"
|
||||
tone="neutral"
|
||||
/>
|
||||
<h3 className="font-display text-on-surface text-lg font-bold">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-on-surface-variant text-sm leading-relaxed">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</Section>
|
||||
|
||||
<ConsultationSection
|
||||
id="konsultasi"
|
||||
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."
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user