Testimonial Triple

Tre testimonianze affiancate su desktop, impilate su mobile. Ogni card ha la citazione in alto, un divider e in basso nome, handle e avatar. È il compromesso giusto: abbastanza prova sociale da essere credibile, abbastanza corta da non rubare la scena al pricing.

File

components/Testimonials3.tsx

Uso base

import Testimonials3 from "@/components/Testimonials3";

<Testimonials3 />

Personalizzare

• Le testimonianze: l'array list in cima al file. Servono esattamente 3 elementi per riempire la riga — il componente renderizza [...Array(3)], quindi se ne metti di più vengono semplicemente ignorati.
• Shape di ogni voce: name e text sono obbligatori; username (mostrato come @handle, non linkato) e img sono opzionali.
• Avatar mancante: se ometti img, il componente mostra un cerchio con l'iniziale del nome. Comodo per le testimonianze arrivate via email.
• Immagini: puoi passare un import statico da public/ (consigliato) o un URL. L'attributo alt viene generato da config.appName.
• Intestazione: l'<h2> (“212 makers are already shipping faster!”) e il paragrafo sotto sono hard-coded. Metti il tuo numero vero, e aggiornalo.

const list: {
  username?: string;
  name: string;
  text: string;
  img?: string | StaticImageData;
}[] = [
  {
    username: "alberto_ravasini",
    name: "Alberto Ravasini",
    text: "Really easy to use. The tutorials are really useful.",
    img: "https://pbs.twimg.com/profile_images/...",
  },
];