74 lines
2.8 KiB
TypeScript
74 lines
2.8 KiB
TypeScript
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 { useSiteInfo } from '@/hooks/use-site-info';
|
|
|
|
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 site = useSiteInfo();
|
|
const contacts = [
|
|
{ icon: 'call', label: site.phone.label },
|
|
{ icon: 'mail', label: site.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>
|
|
);
|
|
}
|