Features Grid

Griglia bento: quattro card di altezza fissa su tre colonne, dove ogni card contiene una mini-demo animata che si attiva sull'hover della card (group + group-hover). È il componente più “wow” del pacchetto e anche il più laborioso da adattare, perché ogni demo è JSX scritto a mano.

File

components/FeaturesGrid.tsx

Uso base

import FeaturesGrid from "@/components/FeaturesGrid";

<FeaturesGrid />

Personalizzare

• Le card: l'array features, con { title, description, styles, demo }. Le demo di default raccontano una board di feedback (raccogli richieste, votale, tema, discussione) — vanno riscritte con il tuo prodotto.
• Layout della griglia: il campo styles è una stringa di classi che decide sia il colore sia la larghezza. md:col-span-2 fa occupare due colonne alla card. Con quattro card, due strette e due larghe, la griglia si chiude perfettamente.
• Colori: le card usano le coppie daisyUI bg-primary/text-primary-content, bg-base-300, bg-neutral — che nel tema ZeroToShip sono brick, cream scuro e ink.
• Animazioni: dentro le demo le classi group-hover:opacity-100, group-hover:-mt-36 e simili girano solo al passaggio del mouse. Ogni card ha overflow-hidden, quindi puoi far entrare e uscire elementi dai bordi.
• Altezza: fissata a h-[22rem] lg:h-[25rem] sulla card. Se allunghi i testi e la demo viene tagliata, alza quel valore.