ZeroToShip

Docs/Componenti

// componente

Testimonial Small

Una singola testimonianza breve, centrata e larga poco più di una colonna di testo: cinque stelle in alto, due frasi, avatar e nome in fondo. È il formato giusto quando vuoi una prova sociale leggera in mezzo alla pagina, senza aprire una sezione intera.

File

components/Testimonial1Small.tsx

Uso base

app/page.tsx
tsx
import Testimonial1Small from "@/components/Testimonial1Small";

<Testimonial1Small />

Personalizzare

  • Testo: due <p> hard-coded. Non c'è nessun array: è un componente monouso, se ne vuoi due li duplichi.
  • Evidenziazione: avvolgi la parte più forte della frase in <span className="bg-warning/25 px-1.5">. Nel tema di ZeroToShip warning è il brick, quindi l'evidenziatore viene rosso mattone tenue.
  • Stelle: cinque SVG generati da [...Array(5)] con classe text-warning. Per farne quattro, cambia il numero dentro Array().
  • Persona: <Image> + <p className="font-semibold"> con nome e riga di contesto (di default “23.1K followers”). L'avatar di esempio è su Unsplash; se usi un host diverso aggiungilo a images.remotePatterns in next.config.js.