The homepage service cards are a gateway, not a grid

The homepage does not list my services in a vertical stack or a flat grid. It arranges them in two rows — software and accessibility on the first row, audio, production, and musician on the second. The ServiceCards component maps over a typed array of five service definitions, each one storing a title, a description, an href, a Font Awesome icon, and two colour values — dark and light. The useTheme hook picks the right shade at render time. Each card is a Next.js Link wrapping an icon, a heading, a description, and a Learn more arrow. On mobile, the cards stack vertically with a compact inline layout — icon and title side by side with the description underneath. On desktop, they fan out horizontally with large centered icons. The hover effect is a three percent scale transform, pure CSS. The accent colour for each card is set as a CSS custom property called --card-color on the link element so the border tint, the icon colour, the heading colour, and the arrow colour all read from one variable. No conditional classNames per service. One card component, one colour variable, five services. The layout intentionally puts the two consultancy services — software and accessibility — on the top row because those are the services most visitors are looking for. The creative services sit underneath. The visual hierarchy guides attention before anyone reads a word.