spb/phi-conseil

1import Link from "next/link";2import { home } from "@/lib/content";3import { SectionTitle } from "@/components/ui/SectionTitle";4import { ServiceIcon } from "@/components/ui/ServiceIcon";56export function Services() {7  const { services } = home;8  if (!services.visible) return null;9  return (10    <section aria-labelledby="services-title" className="section-y bg-ivory-50">11      <div className="container-site">12        <SectionTitle id="services-title">{services.title}</SectionTitle>13        <ul className="mt-10 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 md:mt-14 lg:grid-cols-4">14          {services.items.map((s) => (15            <li key={s.slug} className="flex flex-col items-center text-center">16              <span className="bg-pale-200 text-navy-800 flex h-[4.5rem] w-[4.5rem] items-center justify-center rounded-full">17                <ServiceIcon name={s.icon} className="h-8 w-8" />18              </span>19              <h3 className="text-h4 mt-6 max-w-[14rem]">20                <Link21                  href={`/services#${s.slug}`}22                  className="decoration-gold-500 rounded-sm underline-offset-4 hover:underline"23                >24                  {s.title}25                </Link>26              </h3>27              <p className="text-ink-700 mt-3 max-w-[15rem] text-[0.95rem]">{s.summary}</p>28            </li>29          ))}30        </ul>31      </div>32    </section>33  );34}35