195 lines
8.4 KiB
TypeScript
195 lines
8.4 KiB
TypeScript
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 OdooPartnerBadge from '@/components/site/odoo-partner-badge';
|
|
import PageHero from '@/components/site/page-hero';
|
|
import Pill from '@/components/site/pill';
|
|
import RichText from '@/components/site/rich-text';
|
|
import Section from '@/components/site/section';
|
|
import SectionHeader from '@/components/site/section-header';
|
|
import ConsultationSection from '@/components/site/sections/consultation-section';
|
|
import ServiceGrid from '@/components/site/sections/service-grid';
|
|
import StepCard from '@/components/site/step-card';
|
|
import { servicesContent } from '@/content/services';
|
|
import { useContent } from '@/hooks/use-locale';
|
|
|
|
export default function Services() {
|
|
const t = useContent(servicesContent);
|
|
|
|
return (
|
|
<>
|
|
<Head title={t.title} />
|
|
|
|
<PageHero
|
|
badge={t.hero.badge}
|
|
title={<RichText text={t.hero.title} />}
|
|
description={t.hero.description}
|
|
>
|
|
<div className="flex flex-col gap-10">
|
|
<div className="flex flex-wrap items-center gap-4">
|
|
<ButtonLink href="#konsultasi" icon="support_agent">
|
|
{t.hero.primaryAction}
|
|
</ButtonLink>
|
|
<ButtonLink
|
|
href="#metodologi"
|
|
variant="secondary"
|
|
icon="layers"
|
|
>
|
|
{t.hero.secondaryAction}
|
|
</ButtonLink>
|
|
</div>
|
|
<div className="grid w-full grid-cols-2 gap-4 sm:grid-cols-4">
|
|
{t.hero.stats.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={t.catalog.eyebrow}
|
|
title={t.catalog.title}
|
|
aside={
|
|
<Pill
|
|
icon="verified"
|
|
className="hidden md:inline-flex"
|
|
>
|
|
{t.catalog.badge}
|
|
</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">
|
|
<OdooPartnerBadge className="self-start" />
|
|
<h2 className="font-display text-on-surface lg:text-headline-xl text-3xl font-extrabold tracking-tight">
|
|
{t.odoo.title}
|
|
</h2>
|
|
<p className="text-on-surface-variant text-base leading-relaxed">
|
|
{t.odoo.description}
|
|
</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">
|
|
{t.odoo.optional.title}
|
|
</div>
|
|
<p className="text-on-surface-variant pt-1 text-sm">
|
|
{t.odoo.optional.description}
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:col-span-7">
|
|
{t.odoo.modules.map((module) => (
|
|
<FeatureCard
|
|
key={module.icon}
|
|
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">
|
|
{t.odoo.custom.title}
|
|
</h3>
|
|
<p className="text-on-surface-variant text-sm">
|
|
{t.odoo.custom.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Pill className="shrink-0 self-center">
|
|
{t.odoo.custom.badge}
|
|
</Pill>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
|
|
<Section id="metodologi">
|
|
<div className="flex flex-col gap-12">
|
|
<SectionHeader
|
|
align="center"
|
|
eyebrow={t.methodology.eyebrow}
|
|
title={t.methodology.title}
|
|
description={t.methodology.description}
|
|
/>
|
|
<div className="grid grid-cols-1 gap-4 md:grid-cols-5">
|
|
{t.methodology.steps.map((step, index) => (
|
|
<StepCard
|
|
key={step.icon}
|
|
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">
|
|
{t.commitments.map((item) => (
|
|
<div
|
|
key={item.icon}
|
|
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"
|
|
source="services"
|
|
title={t.consultation.title}
|
|
description={t.consultation.description}
|
|
/>
|
|
</>
|
|
);
|
|
}
|