spb/phi-conseil

1import type { Metadata } from "next";2import { home, pages } from "@/lib/content";3import { pageMetadata } from "@/lib/seo";4import { CheckBadge } from "@/components/ui/Icons";5import { Button } from "@/components/ui/Button";6import { VaseScene } from "@/components/graphics/Placeholders";7import Image from "next/image";89export const metadata: Metadata = pageMetadata({10  title: pages.about.title,11  description: pages.about.seoDescription,12  path: "/a-propos",13});1415export default function AboutPage() {16  const { about } = home;17  return (18    <>19      <section className="section-y bg-ivory-100">20        <div className="container-site">21          <p className="overtitle">{about.overtitle}</p>22          <h1 className="text-h2 mt-3 max-w-[40rem]">{pages.about.intro}</h1>23        </div>24      </section>25      <section className="section-y bg-ivory-50">26        <div className="container-site grid items-start gap-10 lg:grid-cols-[minmax(0,0.4fr)_minmax(0,0.6fr)]">27          <div className="relative aspect-[4/5] overflow-hidden rounded-[var(--radius-xl)]">28            {about.image.src ? (29              <Image30                src={about.image.src}31                alt={about.image.alt}32                fill33                sizes="(min-width:1024px) 40vw, 100vw"34                className="object-cover"35              />36            ) : (37              <VaseScene className="absolute inset-0 h-full w-full" />38            )}39          </div>40          <div>41            {pages.about.body.map((p, i) => (42              <p key={i} className="text-lead text-ink-700 mt-0 mb-5">43                {p}44              </p>45            ))}46            <h2 className="text-h4 mt-8">Nos engagements</h2>47            <ul className="mt-4 flex flex-col gap-3">48              {about.benefits.map((b) => (49                <li key={b} className="text-ink-900 flex items-start gap-3">50                  <CheckBadge className="mt-0.5 h-5 w-5 shrink-0" />51                  <span>{b}</span>52                </li>53              ))}54            </ul>55            <div className="mt-8">56              <Button href="/nous-joindre" size="lg">57                Nous joindre58              </Button>59            </div>60          </div>61        </div>62      </section>63    </>64  );65}66