spb/phi-conseil

1import type { Metadata } from "next";2import { pages, site } from "@/lib/content";3import { pageMetadata } from "@/lib/seo";4import { ContactForm } from "@/components/forms/ContactForm";5import { LinkedInIcon, MailIcon } from "@/components/ui/Icons";67export const metadata: Metadata = pageMetadata({8  title: pages.contact.title,9  description: pages.contact.seoDescription,10  path: "/nous-joindre",11});1213export default function ContactPage() {14  const c = pages.contact;15  const hasCoords =16    site.contact.email || site.contact.phone || site.contact.address || site.social.linkedin;17  return (18    <>19      <section className="section-y bg-ivory-100">20        <div className="container-site">21          <h1 className="text-h2">{c.title}</h1>22          <p className="text-lead text-ink-700 mt-4 max-w-[40rem]">{c.intro}</p>23        </div>24      </section>25      <section className="section-y bg-ivory-50">26        <div className="container-site grid gap-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,0.5fr)]">27          <ContactForm28            subjects={c.subjects}29            consentLabel={c.consentLabel}30            successTitle={c.successTitle}31            successMessage={c.successMessage}32          />33          <aside aria-label="Coordonnées" className="bg-pale-200/60 rounded-[var(--radius-lg)] p-7">34            <h2 className="text-h4">Coordonnées</h2>35            {hasCoords ? (36              <ul className="text-ink-900 mt-4 flex flex-col gap-3">37                {site.contact.email ? (38                  <li className="flex items-center gap-3">39                    <MailIcon className="text-navy-800 h-5 w-5" />40                    <a41                      className="underline-offset-4 hover:underline"42                      href={`mailto:${site.contact.email}`}43                    >44                      {site.contact.email}45                    </a>46                  </li>47                ) : null}48                {site.contact.phone ? <li>{site.contact.phone}</li> : null}49                {site.contact.address ? (50                  <li className="whitespace-pre-line">{site.contact.address}</li>51                ) : null}52                {site.social.linkedin ? (53                  <li className="flex items-center gap-3">54                    <LinkedInIcon className="text-navy-800 h-5 w-5" />55                    <a56                      className="underline-offset-4 hover:underline"57                      href={site.social.linkedin}58                      target="_blank"59                      rel="noopener noreferrer"60                    >61                      LinkedIn (nouvelle fenêtre)62                    </a>63                  </li>64                ) : null}65              </ul>66            ) : (67              <p className="text-ink-700 mt-4">68                Le formulaire ci-contre est le moyen privilégié pour nous joindre.69                {site.contact.region ? ` Nous servons la clientèle de ${site.contact.region}.` : ""}70              </p>71            )}72          </aside>73        </div>74      </section>75    </>76  );77}78