95 lines
4.1 KiB
TypeScript
95 lines
4.1 KiB
TypeScript
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 { common } from '@/content/common';
|
|
import { company, offices } from '@/data/site';
|
|
import { useContent } from '@/hooks/use-locale';
|
|
|
|
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 t = useContent(common);
|
|
const contacts = offices.map((office) => ({
|
|
icon: office.icon,
|
|
title: office.name,
|
|
lines: [
|
|
office.building,
|
|
`${office.street}, ${office.area}`,
|
|
office.city,
|
|
`${t.consultation.tel}: ${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">
|
|
{t.consultation.badge}
|
|
</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>
|
|
);
|
|
}
|