> ## Documentation Index
> Fetch the complete documentation index at: https://developers.tiendadepuntos.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Documentación

> Todo lo que necesitás para conectar Tienda de Puntos con tu negocio.

export const TopicCard = ({eyebrow, title, description, href, icon}) => <a href={href} className="tdp-topic-card">
    <div className="tdp-topic-icon">
      <Icon icon={icon} size={20} />
    </div>
    <div className="tdp-topic-copy">
      <span className="tdp-eyebrow">{eyebrow}</span>
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
    <span className="tdp-card-arrow">→</span>
  </a>;

export const PurchaseVisual = () => <div className="tdp-visual tdp-visual-points" aria-hidden="true">
    <div className="tdp-purchase-card">
      <div className="tdp-purchase-header">
        <span className="tdp-avatar">MG</span>
        <span>
          <strong>María González</strong>
          <small>Compra registrada</small>
        </span>
      </div>
      <div className="tdp-points-row">
        <span>+ 240</span>
        <small>puntos acreditados</small>
      </div>
    </div>
  </div>;

export const IntegrationVisual = () => <div className="tdp-visual tdp-visual-integrations" aria-hidden="true">
    <div className="tdp-integration-node tdp-node-center">
      <Icon icon="shopping-bag" size={26} />
    </div>
    <div className="tdp-connector tdp-connector-left"></div>
    <div className="tdp-connector tdp-connector-right"></div>
    <div className="tdp-integration-node tdp-node-left">POS</div>
    <div className="tdp-integration-node tdp-node-right">API</div>
  </div>;

<div className="tdp-landing">
  <section className="tdp-hero">
    <span className="tdp-kicker">CENTRO DE RECURSOS</span>

    <h1 className="tdp-hero-title">
      Construí mejores experiencias de fidelización
    </h1>

    <p className="tdp-hero-subtitle">
      Encontrá guías, integraciones y referencias técnicas para poner en marcha
      tu programa de puntos y conectarlo con las herramientas que ya usás.
    </p>

    <div className="tdp-hero-actions">
      <a className="tdp-btn-primary" href="#primeros-pasos">
        Empezar ahora
        <span>→</span>
      </a>

      <a className="tdp-btn-secondary" href="https://www.tiendadepuntos.com/blog">
        Ver casos de éxito
      </a>
    </div>
  </section>

  <section className="tdp-topics" id="primeros-pasos">
    <TopicCard eyebrow="PRIMEROS PASOS" title="Configurá tu programa" description="Definí cómo acumulan puntos tus clientes, cuándo vencen y qué recompensas pueden canjear." href="/primeros-pasos" icon="sliders-horizontal" />

    <TopicCard eyebrow="AUTOMATIZACIÓN" title="Conectá tus sistemas" description="Sincronizá ventas desde tu POS, e-commerce o ERP para acreditar puntos sin tareas manuales." href="/integraciones" icon="blocks" />

    <TopicCard eyebrow="PANTALLAS" title="Usá el panel con claridad" description="Conocé qué hace cada sección: clientes, puntos, catálogo, sorteos, encuestas, métricas y configuración." href="/pantallas-principales" icon="layout-dashboard" />
  </section>

  <section className="tdp-feature-row" id="configuracion">
    <div className="tdp-feature-copy">
      <span className="tdp-eyebrow">DEL TICKET A LA RECOMPENSA</span>
      <h2>Una experiencia simple para tu equipo y tus clientes</h2>

      <p>
        Registrá compras, acreditá puntos y habilitá canjes desde un único lugar.
        Las reglas de tu programa se aplican automáticamente en cada operación.
      </p>

      <a className="tdp-text-link" href="/primeros-pasos">
        Conocer la configuración <span>→</span>
      </a>
    </div>

    <PurchaseVisual />
  </section>

  <section className="tdp-feature-row tdp-feature-row-reverse" id="integraciones">
    <IntegrationVisual />

    <div className="tdp-feature-copy">
      <span className="tdp-eyebrow">INTEGRACIONES</span>
      <h2>Tu programa de puntos, conectado a cada venta</h2>

      <p>
        Integrá Tienda de Puntos con Fudo, Dragonfish, Contabilium y otras
        plataformas para mantener clientes y movimientos siempre sincronizados.
      </p>

      <a className="tdp-text-link" href="/integraciones">
        Explorar opciones de integración <span>→</span>
      </a>
    </div>
  </section>

  <section className="tdp-api-banner" id="api">
    <div>
      <span className="tdp-eyebrow">API DE TIENDA DE PUNTOS</span>
      <h2>¿Necesitás una integración a medida?</h2>

      <p>
        Usá nuestra API para incorporar fidelización en tus sistemas y flujos de trabajo.
      </p>
    </div>

    <a className="tdp-btn-light" href="mailto:hola@tiendadepuntos.com">
      Hablar con el equipo
      <span>↗</span>
    </a>
  </section>
</div>