+123
-289
@@ -12,196 +12,36 @@ import {
|
||||
} from '@/components/site/form-field';
|
||||
import Icon from '@/components/site/icon';
|
||||
import IconTile from '@/components/site/icon-tile';
|
||||
import PageHero, { Strong } from '@/components/site/page-hero';
|
||||
import PageHero from '@/components/site/page-hero';
|
||||
import RichText from '@/components/site/rich-text';
|
||||
import Section from '@/components/site/section';
|
||||
import SectionHeader from '@/components/site/section-header';
|
||||
import StepCard from '@/components/site/step-card';
|
||||
import { company, officeAddress, offices, serviceOptions } from '@/data/site';
|
||||
import { common, serviceOptions } from '@/content/common';
|
||||
import { contactContent } from '@/content/contact';
|
||||
import { company, officeAddress, offices } from '@/data/site';
|
||||
import { useContent } from '@/hooks/use-locale';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const whatsappMessage =
|
||||
'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).',
|
||||
},
|
||||
];
|
||||
type Content = typeof contactContent.id;
|
||||
|
||||
export default function Contact() {
|
||||
const t = useContent(contactContent);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head title="Kontak & Konsultasi" />
|
||||
<Head title={t.title} />
|
||||
|
||||
<PageHero
|
||||
badge="Hubungi Kami // Konsultasi Resmi IT & Arsitektur Sistem"
|
||||
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.
|
||||
</>
|
||||
}
|
||||
badge={t.hero.badge}
|
||||
title={t.hero.title}
|
||||
description={<RichText text={t.hero.description} />}
|
||||
>
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:max-w-3xl">
|
||||
{assurances.map((item) => (
|
||||
{t.hero.assurances.map((item) => (
|
||||
<Card
|
||||
key={item.label}
|
||||
key={item.icon}
|
||||
padding="sm"
|
||||
className="flex items-center gap-3"
|
||||
>
|
||||
@@ -218,9 +58,9 @@ export default function Contact() {
|
||||
))}
|
||||
</div>
|
||||
<Card className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{highlights.map((item) => (
|
||||
{t.hero.highlights.map((item) => (
|
||||
<div
|
||||
key={item.label}
|
||||
key={item.icon}
|
||||
className="flex items-start gap-3"
|
||||
>
|
||||
<Icon
|
||||
@@ -244,12 +84,12 @@ export default function Contact() {
|
||||
<Section>
|
||||
<div className="grid grid-cols-1 items-start gap-8 lg:grid-cols-12">
|
||||
<div className="flex flex-col gap-6 lg:col-span-5">
|
||||
<OfficeCard />
|
||||
<ChannelsCard />
|
||||
<IncidentLineCard />
|
||||
<OfficeCard t={t} />
|
||||
<ChannelsCard t={t} />
|
||||
<IncidentLineCard t={t} />
|
||||
</div>
|
||||
<div id="audit-form" className="lg:col-span-7">
|
||||
<ConsultationRequestForm />
|
||||
<ConsultationRequestForm t={t} />
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
@@ -258,15 +98,15 @@ export default function Contact() {
|
||||
<div className="flex flex-col gap-10">
|
||||
<SectionHeader
|
||||
align="split"
|
||||
eyebrow="Kantor & Fasilitas Riset Sistem"
|
||||
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."
|
||||
eyebrow={t.location.eyebrow}
|
||||
title={t.location.title}
|
||||
description={t.location.description}
|
||||
/>
|
||||
<OfficeMap />
|
||||
<OfficeMap t={t} />
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-3">
|
||||
{accessPoints.map((point) => (
|
||||
{t.location.access.map((point) => (
|
||||
<Card
|
||||
key={point.title}
|
||||
key={point.icon}
|
||||
className="flex items-start gap-4"
|
||||
>
|
||||
<IconTile
|
||||
@@ -292,14 +132,14 @@ export default function Contact() {
|
||||
<div className="flex flex-col gap-12">
|
||||
<SectionHeader
|
||||
align="center"
|
||||
eyebrow="Protokol Konsultasi Enterprise"
|
||||
title="Tahapan Transparan Setelah Anda Menghubungi Kami"
|
||||
description="Kami mengeliminasi ketidakpastian implementasi IT melalui tahapan rekayasa berstruktur jelas, terikat kerahasiaan hukum, dan terukur."
|
||||
eyebrow={t.steps.eyebrow}
|
||||
title={t.steps.title}
|
||||
description={t.steps.description}
|
||||
/>
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
|
||||
{onboardingSteps.map((step, index) => (
|
||||
{t.steps.items.map((step, index) => (
|
||||
<StepCard
|
||||
key={step.title}
|
||||
key={step.footer.icon}
|
||||
step={String(index + 1).padStart(2, '0')}
|
||||
{...step}
|
||||
/>
|
||||
@@ -312,12 +152,12 @@ export default function Contact() {
|
||||
<div className="flex flex-col gap-12">
|
||||
<SectionHeader
|
||||
align="center"
|
||||
eyebrow="Tanya Jawab Umum"
|
||||
title="Pertanyaan Seputar Konsultasi & Penugasan PAJ"
|
||||
description="Jawaban ringkas terkait model kerja sama teknis, audit, dan penugasan onsite."
|
||||
eyebrow={t.faq.eyebrow}
|
||||
title={t.faq.title}
|
||||
description={t.faq.description}
|
||||
/>
|
||||
<div className="space-y-4">
|
||||
{faqs.map((faq) => (
|
||||
{t.faq.items.map((faq) => (
|
||||
<Card
|
||||
key={faq.question}
|
||||
className="flex items-start gap-4"
|
||||
@@ -339,12 +179,10 @@ export default function Contact() {
|
||||
</div>
|
||||
<div className="bg-surface-container-high flex flex-col items-center gap-4 rounded-2xl p-8 text-center">
|
||||
<h3 className="font-display text-on-surface text-xl font-bold">
|
||||
Butuh Tanggapan Mendesak Hari Ini?
|
||||
{t.faq.urgentTitle}
|
||||
</h3>
|
||||
<p className="text-on-surface-variant max-w-xl text-base">
|
||||
Hubungi Hotline WhatsApp Konsultan Enterprise kami
|
||||
untuk respon instan atau jadwalkan pertemuan daring
|
||||
langsung dengan arsitek sistem PAJ.
|
||||
{t.faq.urgentText}
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center justify-center gap-4 pt-2">
|
||||
<ButtonLink
|
||||
@@ -352,7 +190,7 @@ export default function Contact() {
|
||||
size="sm"
|
||||
icon="chat"
|
||||
>
|
||||
WhatsApp Konsultan ({company.whatsapp.label})
|
||||
{t.faq.whatsapp} ({company.whatsapp.label})
|
||||
</ButtonLink>
|
||||
<ButtonLink
|
||||
href={company.phone.href}
|
||||
@@ -360,7 +198,7 @@ export default function Contact() {
|
||||
size="sm"
|
||||
icon="call"
|
||||
>
|
||||
Telepon Kantor ({company.phone.label})
|
||||
{t.faq.phone} ({company.phone.label})
|
||||
</ButtonLink>
|
||||
</div>
|
||||
</div>
|
||||
@@ -378,13 +216,13 @@ function CardLabel({ children }: { children: string }) {
|
||||
);
|
||||
}
|
||||
|
||||
function OfficeCard() {
|
||||
function OfficeCard({ t }: { t: Content }) {
|
||||
return (
|
||||
<Card padding="lg">
|
||||
<div className="pb-4">
|
||||
<CardLabel>Kantor Operasional</CardLabel>
|
||||
<CardLabel>{t.offices.label}</CardLabel>
|
||||
<h3 className="font-display text-on-surface text-lg font-bold">
|
||||
Lokasi Kantor PAJ
|
||||
{t.offices.title}
|
||||
</h3>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3">
|
||||
@@ -405,7 +243,7 @@ function OfficeCard() {
|
||||
href={office.phone.href}
|
||||
className="text-on-surface hover:text-primary font-mono font-semibold"
|
||||
>
|
||||
Tel. {office.phone.label}
|
||||
{t.offices.tel} {office.phone.label}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -413,22 +251,22 @@ function OfficeCard() {
|
||||
</div>
|
||||
<div className="border-outline-variant/30 mt-4 grid grid-cols-2 gap-4 border-t pt-4 text-sm">
|
||||
<div className="flex flex-col">
|
||||
<CardLabel>Jam Operasional</CardLabel>
|
||||
<CardLabel>{t.offices.hoursLabel}</CardLabel>
|
||||
<span className="text-on-surface font-semibold">
|
||||
Senin – Jumat
|
||||
{t.offices.hoursDays}
|
||||
</span>
|
||||
<span className="text-on-surface-variant">
|
||||
08:30 – 17:30 WIB
|
||||
{t.offices.hoursTime}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<CardLabel>Status Kunjungan</CardLabel>
|
||||
<CardLabel>{t.offices.visitLabel}</CardLabel>
|
||||
<span className="text-highlight inline-flex items-center gap-1.5 font-semibold">
|
||||
<span className="bg-primary h-2 w-2 rounded-full" />
|
||||
Open for Scheduled Audits
|
||||
{t.offices.visitStatus}
|
||||
</span>
|
||||
<span className="text-on-surface-variant">
|
||||
Harap konfirmasi H-1
|
||||
{t.offices.visitNote}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -436,13 +274,42 @@ function OfficeCard() {
|
||||
);
|
||||
}
|
||||
|
||||
function ChannelsCard() {
|
||||
function ChannelsCard({ t }: { t: Content }) {
|
||||
const channels = [
|
||||
{
|
||||
icon: 'call',
|
||||
label: t.channels.phone,
|
||||
value: company.phone.label,
|
||||
href: company.phone.href,
|
||||
},
|
||||
{
|
||||
icon: 'chat',
|
||||
label: t.channels.whatsapp,
|
||||
value: company.whatsapp.label,
|
||||
href: `${company.whatsapp.href}?text=${encodeURIComponent(t.channels.whatsappMessage)}`,
|
||||
badge: t.channels.whatsappBadge,
|
||||
},
|
||||
{
|
||||
icon: 'mail',
|
||||
label: t.channels.email,
|
||||
value: company.email.busdev,
|
||||
href: `mailto:${company.email.busdev}`,
|
||||
},
|
||||
{
|
||||
icon: 'headset_mic',
|
||||
label: t.channels.support,
|
||||
value: company.email.support,
|
||||
href: `mailto:${company.email.support}`,
|
||||
badge: t.channels.supportBadge,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Card padding="lg" className="flex flex-col gap-5">
|
||||
<div>
|
||||
<CardLabel>Korespondensi Langsung</CardLabel>
|
||||
<CardLabel>{t.channels.label}</CardLabel>
|
||||
<h3 className="font-display text-on-surface text-lg font-bold">
|
||||
Saluran Komunikasi Resmi
|
||||
{t.channels.title}
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
@@ -451,7 +318,7 @@ function ChannelsCard() {
|
||||
|
||||
return (
|
||||
<a
|
||||
key={channel.label}
|
||||
key={channel.icon}
|
||||
href={channel.href}
|
||||
target={external ? '_blank' : undefined}
|
||||
rel={external ? 'noopener noreferrer' : undefined}
|
||||
@@ -475,7 +342,7 @@ function ChannelsCard() {
|
||||
</span>
|
||||
) : (
|
||||
<Icon
|
||||
name={channel.trailing ?? 'arrow_outward'}
|
||||
name="arrow_outward"
|
||||
className="text-on-surface-variant group-hover:text-on-surface text-lg transition-colors"
|
||||
/>
|
||||
)}
|
||||
@@ -487,7 +354,7 @@ function ChannelsCard() {
|
||||
);
|
||||
}
|
||||
|
||||
function IncidentLineCard() {
|
||||
function IncidentLineCard({ t }: { t: Content }) {
|
||||
return (
|
||||
<Card
|
||||
padding="lg"
|
||||
@@ -496,26 +363,24 @@ function IncidentLineCard() {
|
||||
<div className="flex items-center gap-3 pb-3">
|
||||
<span className="bg-primary h-3 w-3 animate-ping rounded-full" />
|
||||
<span className="text-primary font-mono text-[11px] font-bold tracking-wide">
|
||||
SPECIAL CUSTOMER SERVICE REPRESENTATIVE (SCSR)
|
||||
{t.incident.badge}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="font-display text-on-surface mb-2 text-lg font-bold">
|
||||
Dedicated Incident Line 24/7
|
||||
{t.incident.title}
|
||||
</h3>
|
||||
<p className="text-on-surface-variant mb-4 text-sm leading-relaxed">
|
||||
Jalur khusus tier-1 untuk klien dengan kontrak pemeliharaan
|
||||
& infrastruktur <Strong>mission-critical</Strong> (Sektor
|
||||
Migas, Pengolahan Baja, dan Korporasi Holding).
|
||||
<RichText text={t.incident.description} />
|
||||
</p>
|
||||
<div className="bg-surface-container-lowest flex items-center justify-between gap-3 rounded-lg p-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Icon name="timer" className="text-primary text-lg" />
|
||||
<span className="text-on-surface font-mono text-[11px] font-semibold">
|
||||
SLA WAKTU TANGGAP INSIDEN KRITIS
|
||||
{t.incident.slaLabel}
|
||||
</span>
|
||||
</div>
|
||||
<span className="font-display text-primary text-lg font-bold">
|
||||
< 15 Menit
|
||||
{t.incident.slaValue}
|
||||
</span>
|
||||
</div>
|
||||
</Card>
|
||||
@@ -528,8 +393,10 @@ function IncidentLineCard() {
|
||||
* TODO: submissions are not sent anywhere yet; wire this to a Laravel
|
||||
* endpoint before going live.
|
||||
*/
|
||||
function ConsultationRequestForm() {
|
||||
function ConsultationRequestForm({ t }: { t: Content }) {
|
||||
const shared = useContent(common);
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const form = t.form;
|
||||
|
||||
const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
@@ -540,67 +407,51 @@ function ConsultationRequestForm() {
|
||||
return (
|
||||
<Card padding="lg" className="shadow-xl lg:p-10">
|
||||
<div className="border-outline-variant/30 border-b pb-6">
|
||||
<Eyebrow icon="quick_reference">
|
||||
Sesi Audit & Permintaan Tender
|
||||
</Eyebrow>
|
||||
<Eyebrow icon="quick_reference">{form.eyebrow}</Eyebrow>
|
||||
<h2 className="font-display text-headline-lg text-on-surface pt-2 font-bold">
|
||||
Formulir Konsultasi & Audit Arsitektur Sistem
|
||||
{form.title}
|
||||
</h2>
|
||||
<p className="text-on-surface-variant pt-2 text-base">
|
||||
Isi rincian kebutuhan sistem Anda di bawah ini. Lead
|
||||
Consultant PAJ akan menganalisis parameter awal dan
|
||||
menjadwalkan presentasi arsitektur terarah.
|
||||
{form.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form className="flex flex-col gap-6 pt-6" onSubmit={handleSubmit}>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<Field id="full-name" label="Nama Lengkap & Gelar" required>
|
||||
<Field id="full-name" label={form.name} required>
|
||||
<TextInput
|
||||
id="full-name"
|
||||
name="name"
|
||||
placeholder="Contoh: Ir. Hendra Prasetyo, M.T."
|
||||
placeholder={form.namePlaceholder}
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
id="company-name"
|
||||
label="Nama Perusahaan / Instansi / BUMN"
|
||||
required
|
||||
>
|
||||
<Field id="company-name" label={form.company} required>
|
||||
<TextInput
|
||||
id="company-name"
|
||||
name="company"
|
||||
placeholder="PT Petro Nusantara Energy"
|
||||
placeholder={form.companyPlaceholder}
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
<Field id="job-title" label="Jabatan / Divisi" required>
|
||||
<Field id="job-title" label={form.jobTitle} required>
|
||||
<TextInput
|
||||
id="job-title"
|
||||
name="job_title"
|
||||
placeholder="VP Information Technology / GM Finance"
|
||||
placeholder={form.jobTitlePlaceholder}
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
id="work-email"
|
||||
label="Email Resmi Perusahaan"
|
||||
required
|
||||
>
|
||||
<Field id="work-email" label={form.email} required>
|
||||
<TextInput
|
||||
id="work-email"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="hendra@petronusantara.co.id"
|
||||
placeholder={form.emailPlaceholder}
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
id="phone-number"
|
||||
label="Nomor WhatsApp / Telepon Langsung"
|
||||
required
|
||||
>
|
||||
<Field id="phone-number" label={form.phone} required>
|
||||
<TextInput
|
||||
id="phone-number"
|
||||
name="phone"
|
||||
@@ -609,41 +460,33 @@ function ConsultationRequestForm() {
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
id="industry-sector"
|
||||
label="Klasifikasi Sektor Industri"
|
||||
required
|
||||
>
|
||||
<Field id="industry-sector" label={form.industry} required>
|
||||
<SelectInput
|
||||
id="industry-sector"
|
||||
name="industry"
|
||||
placeholder="Pilih Sektor Industri Anda"
|
||||
options={industryOptions}
|
||||
placeholder={form.industryPlaceholder}
|
||||
options={form.industries}
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<Field
|
||||
id="service-focus"
|
||||
label="Pilar Kebutuhan / Fokus Jasa PAJ"
|
||||
required
|
||||
>
|
||||
<Field id="service-focus" label={form.service} required>
|
||||
<SelectInput
|
||||
id="service-focus"
|
||||
name="service"
|
||||
placeholder="Pilih Layanan Utama yang Dibutuhkan"
|
||||
options={serviceOptions}
|
||||
placeholder={form.servicePlaceholder}
|
||||
options={serviceOptions(shared)}
|
||||
required
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<fieldset className="flex flex-col gap-2">
|
||||
<legend className="text-on-surface pb-2 font-mono text-xs font-medium">
|
||||
Estimasi Linimasa Kebutuhan Implementasi
|
||||
{form.timeline}
|
||||
</legend>
|
||||
<div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
|
||||
{timelines.map((timeline, index) => (
|
||||
{form.timelines.map((timeline, index) => (
|
||||
<label
|
||||
key={timeline.value}
|
||||
className={cn(
|
||||
@@ -670,15 +513,12 @@ function ConsultationRequestForm() {
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<Field
|
||||
id="project-details"
|
||||
label="Ringkasan Kebutuhan atau Kendala Sistem Saat Ini"
|
||||
>
|
||||
<Field id="project-details" label={form.details}>
|
||||
<TextArea
|
||||
id="project-details"
|
||||
name="details"
|
||||
rows={4}
|
||||
placeholder="Jelaskan secara ringkas tantangan operasional, sistem lama yang digunakan (SAP/Oracle/Legacy), integrasi khusus yang diinginkan, atau estimasi jumlah pengguna (users)..."
|
||||
placeholder={form.detailsPlaceholder}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
@@ -694,15 +534,12 @@ function ConsultationRequestForm() {
|
||||
htmlFor="nda-consent"
|
||||
className="text-on-surface-variant cursor-pointer text-sm"
|
||||
>
|
||||
Saya menyetujui penandatanganan{' '}
|
||||
<Strong>Non-Disclosure Agreement (NDA)</Strong> sebelum
|
||||
pertukaran data teknis & flow diagram operasional
|
||||
korporasi.
|
||||
<RichText text={form.nda} />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<Button type="submit" size="block" trailingIcon="arrow_forward">
|
||||
Kirim Permohonan Konsultasi Teknis
|
||||
{form.submit}
|
||||
</Button>
|
||||
|
||||
{submitted && (
|
||||
@@ -716,12 +553,10 @@ function ConsultationRequestForm() {
|
||||
/>
|
||||
<div>
|
||||
<span className="font-bold">
|
||||
Permohonan Berhasil Dikirimkan!
|
||||
{form.successTitle}
|
||||
</span>
|
||||
<p className="text-on-surface-variant text-sm">
|
||||
Lead Consultant PAJ akan mengonfirmasi via
|
||||
email/telepon resmi dalam kurun waktu kurang
|
||||
dari 2 jam kerja.
|
||||
{form.successMessage}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -729,20 +564,19 @@ function ConsultationRequestForm() {
|
||||
|
||||
<div className="text-on-surface-variant flex items-center justify-center gap-2 pt-2 text-center font-mono text-[11px]">
|
||||
<Icon name="lock" className="text-primary text-sm" />
|
||||
Data dan kerahasiaan proses bisnis Anda dilindungi melalui
|
||||
perjanjian kerahasiaan (NDA) dan kepatuhan hukum Indonesia.
|
||||
{form.privacy}
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function OfficeMap() {
|
||||
function OfficeMap({ t }: { t: Content }) {
|
||||
return (
|
||||
<div className="bg-surface-container relative flex min-h-96 w-full flex-col justify-end overflow-hidden rounded-2xl p-4 shadow-xl sm:p-6 lg:min-h-[480px]">
|
||||
<img
|
||||
src="/images/probindo/map-jakarta.png"
|
||||
alt="Peta wilayah Jakarta Selatan"
|
||||
alt={t.location.mapAlt}
|
||||
loading="lazy"
|
||||
className="absolute inset-0 h-full w-full object-cover dark:brightness-75 dark:hue-rotate-180 dark:invert"
|
||||
/>
|
||||
@@ -774,7 +608,7 @@ function OfficeMap() {
|
||||
icon="directions"
|
||||
className="self-start"
|
||||
>
|
||||
Buka Petunjuk Arah
|
||||
{t.location.directions}
|
||||
</ButtonLink>
|
||||
</div>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user