785 lines
35 KiB
TypeScript
785 lines
35 KiB
TypeScript
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>
|
||
);
|
||
}
|