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.
Loading preview...
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',
},
]}
/>
)
}