first commit

2026-09-28 13:52:25 +07:00
commit 566275348c
262 changed files with 37008 additions and 0 deletions
@@ -0,0 +1,91 @@
+import ConsultationForm from '@/components/site/consultation-form';
+import Glow from '@/components/site/glow';
+import Icon from '@/components/site/icon';
+import Pill from '@/components/site/pill';
+import Section from '@/components/site/section';
+import { company, offices } from '@/data/site';
+
+type ConsultationSectionProps = {
+    id: string;
+    title: string;
+    description: string;
+};
+
+/** Closing call-to-action with contact details and the quick form. */
+export default function ConsultationSection({
+    id,
+    title,
+    description,
+}: ConsultationSectionProps) {
+    const contacts = offices.map((office) => ({
+        icon: office.icon,
+        title: office.name,
+        lines: [
+            office.building,
+            `${office.street}, ${office.area}`,
+            office.city,
+            `Telp: ${office.phone.label}`,
+        ],
+    }));
+
+    return (
+        <Section
+            id={id}
+            background={
+                <Glow className="top-1/2 left-1/2 h-[520px] w-[850px] -translate-x-1/2 -translate-y-1/2" />
+            }
+        >
+            <div className="border-outline-variant/60 bg-surface-container rounded-3xl border p-6 shadow-2xl sm:p-8 lg:p-12">
+                <div className="grid grid-cols-1 items-center gap-10 lg:grid-cols-12">
+                    <div className="flex flex-col gap-6 lg:col-span-7">
+                        <Pill tone="brand" icon="verified_user">
+                            KONSULTASI TEKNIS &amp; AUDIT INFRASTRUKTUR
+                        </Pill>
+                        <div className="flex flex-col gap-3">
+                            <h2 className="font-display text-on-surface lg:text-headline-xl text-3xl leading-tight font-extrabold tracking-tight">
+                                {title}
+                            </h2>
+                            <p className="text-on-surface-variant text-sm leading-relaxed lg:text-base">
+                                {description}
+                            </p>
+                        </div>
+                        <div className="text-on-surface-variant grid grid-cols-1 gap-4 pt-2 text-xs sm:grid-cols-2">
+                            {contacts.map((contact) => (
+                                <div
+                                    key={contact.title}
+                                    className="border-outline-variant/40 bg-surface-container-high/60 flex items-start gap-2.5 rounded-xl border p-3"
+                                >
+                                    <Icon
+                                        name={contact.icon}
+                                        className="text-primary mt-0.5 text-xl"
+                                    />
+                                    <div className="flex flex-col gap-0.5">
+                                        <span className="text-on-surface font-bold">
+                                            {contact.title}
+                                        </span>
+                                        {contact.lines.map((line) => (
+                                            <span key={line}>{line}</span>
+                                        ))}
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                        <a
+                            href={`mailto:${company.email.busdev}`}
+                            className="text-on-surface-variant hover:text-primary flex items-center gap-2 text-xs"
+                        >
+                            <Icon
+                                name="mail"
+                                className="text-primary text-base"
+                            />
+                            {company.email.busdev}
+                        </a>
+                    </div>
+                    <div className="w-full lg:col-span-5">
+                        <ConsultationForm idPrefix={id} />
+                    </div>
+                </div>
+            </div>
+        </Section>
+    );
+}