first commit

2026-09-28 13:52:25 +07:00
commit 566275348c
262 changed files with 37008 additions and 0 deletions
@@ -0,0 +1,72 @@
+import type { ReactNode } from 'react';
+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 } from '@/data/site';
+
+type CtaBannerProps = {
+    badge: string;
+    title: string;
+    description: string;
+    /** Usually one primary and one secondary <ButtonLink />. */
+    actions: ReactNode;
+    showContacts?: boolean;
+};
+
+/** Centered call-to-action card used to close informational pages. */
+export default function CtaBanner({
+    badge,
+    title,
+    description,
+    actions,
+    showContacts = true,
+}: CtaBannerProps) {
+    const contacts = [
+        { icon: 'call', label: company.phone.label },
+        { icon: 'mail', label: company.email.busdev },
+        { icon: 'location_on', label: 'Bintaro & Plaza Simatupang, Jakarta' },
+    ];
+
+    return (
+        <Section
+            size="narrow"
+            background={
+                <Glow className="-top-32 left-1/2 h-64 w-[48rem] -translate-x-1/2" />
+            }
+        >
+            <div className="border-outline-variant/50 from-surface-container to-surface-container-low flex flex-col items-center gap-6 rounded-3xl border bg-gradient-to-b p-8 text-center shadow-xl md:p-14">
+                <Pill tone="brand" icon="verified_user" className="self-center">
+                    {badge}
+                </Pill>
+                <div className="flex max-w-2xl flex-col gap-3">
+                    <h2 className="font-display text-on-surface lg:text-headline-xl text-3xl font-extrabold tracking-tight">
+                        {title}
+                    </h2>
+                    <p className="text-on-surface-variant text-base leading-relaxed">
+                        {description}
+                    </p>
+                </div>
+                <div className="flex w-full flex-col items-center gap-4 sm:w-auto sm:flex-row">
+                    {actions}
+                </div>
+                {showContacts && (
+                    <div className="text-on-surface-variant flex flex-wrap items-center justify-center gap-x-6 gap-y-2 pt-2 text-sm">
+                        {contacts.map((contact) => (
+                            <span
+                                key={contact.icon}
+                                className="flex items-center gap-1.5"
+                            >
+                                <Icon
+                                    name={contact.icon}
+                                    className="text-primary text-base"
+                                />
+                                {contact.label}
+                            </span>
+                        ))}
+                    </div>
+                )}
+            </div>
+        </Section>
+    );
+}