Features Accordion

Accordion di feature con media affiancato: a sinistra la lista di voci apribili (una sola alla volta, la prima aperta di default), a destra un video o un'immagine che cambia insieme alla voce selezionata. L'apertura è animata sull'altezza reale del contenuto, letta da scrollHeight. Client component.

File

components/FeaturesAccordion.tsx

Uso base

Anche questa sezione usa id="features": se monti anche Features Listicle nella stessa pagina, cambia l'id a una delle due.

import FeaturesAccordion from "@/components/FeaturesAccordion";

<FeaturesAccordion />

Personalizzare

• Le voci: l'array features. Di default quattro: Emails, Payments, Authentication, Style. Il componente è pensato per 2–5 voci, oltre diventa una lista.
• Media: ogni voce accetta type: "video" (con path e format) oppure type: "image" (con path e alt). Se ometti type, il componente Media renderizza un div vuoto della stessa misura.
• Immagini remote: i path di default puntano a Unsplash e a un CDN esterno. Se usi un altro host, aggiungilo a images.remotePatterns in next.config.js — meglio ancora, metti i file in public/ e usa path locali (fa bene anche alla SEO).
• Video: il tag è già autoPlay muted loop playsInline controls, quindi parte da solo anche su mobile.
• Headline: l'<h2> ha un <span> con bg-neutral text-neutral-content per evidenziare la coda della frase — nel tema di ZeroToShip è ink su cream.

const features = [
  {
    title: "Emails",
    description: "Send transactional emails, setup your DNS...",
    type: "video",
    path: "/demo/emails.webm",
    format: "video/webm",
    svg: <svg className="w-6 h-6">{/* ... */}</svg>,
  },
];