since3-website/modules/landingPage/ui/components/services-section.tsx

import { services } from "@/modules/landingPage/data/content"

/**
 * Giant rows. On hover a black fill wipes up from the bottom, the name slides
 * right and the details unfold. Touch devices always show the details.
 * TODO: link each row to /leistungen/[slug] once the subpages exist.
 */
export function ServicesSection() {
  return (
    <section
      id="leistungen"
      aria-labelledby="leistungen-title"
      data-theme="light"
      className="pt-section"
    >
      <div className="container-site flex flex-col justify-between gap-8 pb-16 md:flex-row md:items-end">
        <h2 id="leistungen-title" className="text-display type-poster">
          Was wir
          <br />
          machen
        </h2>
        <p className="type-body max-w-[38ch] text-fg-muted">
          Fünf Disziplinen, alles aus einer Hand. Ohne Subunternehmer, ohne
          Stille Post zwischen Design und Entwicklung.
        </p>
      </div>

      <ul className="border-b border-line">
        {services.map((service, index) => (
          <li key={service.slug} className="service-row border-t border-line">
            <div className="container-site py-6 md:py-8">
              {/*
               * Flex with wrapping instead of fixed columns: long names like
               * "Softwareentwicklung" push the tags onto their own line
               * instead of running into them.
               */}
              <div className="flex flex-wrap items-baseline gap-x-8 gap-y-3">
                <span className="service-meta hidden w-16 shrink-0 font-mono text-label text-fg-muted md:block">
                  ({String(index + 1).padStart(2, "0")})
                </span>
                <h3 className="service-name min-w-0 text-[clamp(2.25rem,6.5vw,6.5rem)] leading-[0.9] wrap-break-word type-poster">
                  {service.title}
                </h3>
                <ul
                  aria-label="Schwerpunkte"
                  className="service-meta flex w-full flex-wrap gap-x-4 gap-y-1 font-mono text-label text-fg-muted md:ml-auto md:w-auto md:justify-end"
                >
                  {service.tags.map((tag) => (
                    <li key={tag}>{tag}</li>
                  ))}
                </ul>
              </div>
              <div className="service-details md:pl-24">
                <div className="overflow-hidden">
                  <p className="service-meta type-body pt-4 text-lead text-fg-muted">
                    {service.description}
                  </p>
                </div>
              </div>
            </div>
          </li>
        ))}
      </ul>
    </section>
  )
}