Testimonials Avatars

Il gruppetto di facce sovrapposte con cinque stelle e il contatore accanto (“32 makers ship faster”). Non è una sezione: è un blocchetto da infilare sotto la CTA dell'hero, dove costa poco spazio e alza molto la fiducia.

File

components/TestimonialsAvatars.tsx

Uso base

Accetta una prop: priority. Passala a true solo se il blocco sta above the fold — serve a dare priorità di caricamento alle immagini.

import TestimonialsAvatars from "@/components/TestimonialsAvatars";

<TestimonialsAvatars priority={true} />

Personalizzare

• Le facce: l'array avatars, cinque oggetti { alt, src }. Puoi metterne meno o di più: la sovrapposizione è gestita da -space-x-5, non dal numero.
• Immagini: di default sono foto Unsplash. Meglio importare file locali da public/, così Next le ottimizza in build e non dipendi da un host esterno.
• Contatore: il numero <span className="font-semibold">32</span> e il testo “makers ship faster” sono hard-coded nel JSX.
• Stelle: cinque SVG con classe text-yellow-500 — qui è giallo Tailwind, non il mustard del tema. Se vuoi allinearlo alla palette, usa className="w-5 h-5" style={{ color: "var(--mustard)" }}.