spb/phi-conseil

1import Image from "next/image";2import { home } from "@/lib/content";3import { Button } from "@/components/ui/Button";4import { CheckBadge } from "@/components/ui/Icons";5import { VaseScene } from "@/components/graphics/Placeholders";67export function About() {8  const { about } = home;9  if (!about.visible) return null;10  return (11    <section aria-labelledby="about-title" className="bg-ivory-50 relative">12      <div className="grid lg:grid-cols-[minmax(0,0.34fr)_minmax(0,0.66fr)]">13        {/* Photo + courbe ivoire */}14        <div className="relative h-[18rem] overflow-hidden sm:h-[22rem] lg:h-auto lg:min-h-[26rem]">15          {about.image.src ? (16            <Image17              src={about.image.src}18              alt={about.image.alt}19              fill20              sizes="(min-width:1024px) 34vw, 100vw"21              className="object-cover"22            />23          ) : (24            <VaseScene className="absolute inset-0 h-full w-full" />25          )}26          <svg27            className="pointer-events-none absolute inset-y-0 right-0 hidden h-full w-[38%] lg:block"28            viewBox="0 0 100 300"29            preserveAspectRatio="none"30            aria-hidden="true"31          >32            <path33              d="M100 0 L100 300 L55 300 C 10 230, 100 160, 55 80 C 35 45, 60 15, 100 0 Z"34              fill="var(--color-ivory-50)"35            />36            <path37              d="M58 300 C 14 232, 103 160, 58 80 C 38 46, 62 16, 100 2"38              fill="none"39              stroke="var(--color-ivory-200)"40              strokeWidth="6"41              opacity="0.9"42            />43          </svg>44        </div>4546        <div className="container-site grid gap-10 py-12 lg:grid-cols-[minmax(0,1fr)_minmax(0,0.52fr)] lg:gap-6 lg:py-16 lg:pl-6 xl:pl-10">47          <div>48            <p className="overtitle">{about.overtitle}</p>49            <h2 id="about-title" className="text-h3 mt-3">50              {about.title}51            </h2>52            <p className="text-ink-700 mt-5 max-w-[32rem]">{about.paragraph}</p>53            <div className="mt-7">54              <Button href={about.cta.href} variant="outline" size="lg">55                {about.cta.label}56              </Button>57            </div>58          </div>5960          <ul61            className="border-gold-500/60 flex flex-col gap-4 lg:border-l lg:py-2 lg:pl-7 xl:pl-10"62            aria-label="Nos engagements"63          >64            {about.benefits.map((b) => (65              <li66                key={b}67                className="text-ink-900 flex items-start gap-3 text-[0.9rem] leading-snug"68              >69                <CheckBadge className="mt-0.5 h-5 w-5 shrink-0" />70                <span>{b}</span>71              </li>72            ))}73          </ul>74        </div>75      </div>76    </section>77  );78}79