Features Listicle

Lista di feature in stile listicle: una riga di icone cliccabili in alto, sotto il dettaglio della feature selezionata su fondo base-200. Client component: parte in autoplay e cambia feature ogni 5 secondi finché non clicchi — appena clicchi, si ferma e resta dove l'hai messa.

File

components/FeaturesListicle.tsx

Uso base

La sezione porta già id="features", quindi i link /#features dell'header ci atterrano sopra.

import FeaturesListicle from "@/components/FeaturesListicle";

<FeaturesListicle />

Personalizzare

• Le feature: l'array features in cima al file. Di default sono sei — Emails, Payments, Login, Database, SEO, Style. Ogni voce è { name, description, svg }, dove description e svg sono JSX.
• Riga “Time saved”: l'ultimo <li> di ogni descrizione ha classe text-accent font-medium. È la riga che vende: tienila o toglila, ma se la tieni metti numeri credibili.
• Velocità dell'autoplay: il setInterval dentro useEffect è a 5000 ms. L'IntersectionObserver su featuresEndRef ferma il ciclo quando l'utente ha scrollato oltre la sezione — se non ti serve, puoi rimuovere tutto l'useEffect.
• Copy dell'intestazione: la riga mono const launch_time = "Today"; è pura decorazione, l'<h2> e il paragrafo sotto sono hard-coded nel JSX.

const features: {
  name: string;
  description: JSX.Element;
  svg: JSX.Element;
}[] = [
  {
    name: "Emails",
    description: (
      <ul className="space-y-1">
        <li>Send transactional emails</li>
      </ul>
    ),
    svg: <svg className="w-8 h-8">{/* ... */}</svg>,
  },
];