Services Grid

Component

About

4-up services grid section with eyebrow, title, and 4 service cards. Each card has a red icon, title, description, and 'More info' link with arrow hover animation. Cards lift on hover with brand-coloured shadow.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Services Grid to your project and fits it to your theme.

Code

How Services Grid is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Paintbrush, Hammer, Home, Wrench } from 'lucide-react'
import ServicesGrid from '@/components/ui/servicesgrid'

export default function Demo() {
  return (
    <ServicesGrid
      title="Compleet onderhoud onder één dak"
      subtitle="Of u nu een complete woningrenovatie, schilderwerk of een klein timmerklus heeft — Smans regelt het van A tot Z."
      services={[
        {
          icon: Paintbrush,
          title: 'Schilderwerk',
          description: 'Binnen- en buitenschilderwerk met A-merk verfproducten en 5 jaar garantie.',
          href: '/diensten/schilderwerk',
        },
        {
          icon: Hammer,
          title: 'Timmerwerk',
          description: 'Kozijnen, deuren, dakkapellen en maatwerk timmerwerk voor elke ruimte.',
          href: '/diensten/timmerwerk',
        },
        {
          icon: Home,
          title: 'Kozijnen',
          description: 'Houten en kunststof kozijnen vakkundig geplaatst, inclusief afwerking.',
          href: '/diensten/kozijnen',
        },
        {
          icon: Wrench,
          title: 'Onderhoud & Renovatie',
          description: 'Periodiek onderhoud of een complete verbouwing — wij denken met u mee.',
          href: '/diensten/onderhoud',
        },
      ]}
    />
  )
}