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

# Socio oficial de X

export const StoryCard = ({img, href, title}) => {
  return <a href={href} className="card block not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-xl bg-white/50 dark:bg-codeblock/50 border border-gray-100 shadow-md dark:shadow-none shadow-gray-300/10 dark:border-gray-800/50 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light">
      <div className="flex flex-col h-full">
        <div className="w-full aspect-[3/2] bg-white">
          <span aria-owns="rmiz-modal-942aec5edfb7" data-rmiz="" className="h-full w-full block">
            <span data-rmiz-content="found" className="h-full w-full block">
              <img src={img} className="rounded-none pointer-events-none w-full h-full object-cover" alt={title} />
            </span>
            <span data-rmiz-ghost="" style={{
    height: 127,
    left: 0,
    width: 213,
    top: 0
  }}>
              <button aria-label="Expand image" data-rmiz-btn-zoom="" type="button">
                <svg aria-hidden="true" data-rmiz-btn-zoom-icon="true" fill="currentColor" focusable="false" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                  <path d="M 9 1 L 9 2 L 12.292969 2 L 2 12.292969 L 2 9 L 1 9 L 1 14 L 6 14 L 6 13 L 2.707031 13 L 13 2.707031 L 13 6 L 14 6 L 14 1 Z" />
                </svg>
              </button>
            </span>
          </span>
        </div>
        <div className="flex flex-col justify-center p-4 flex-1">
          <h2 className="font-semibold text-sm">{title}</h2>
        </div>
      </div>
    </a>;
};

export const Banner = ({img, href, title, description}) => {
  return <a href={href} className="card block not-prose font-normal group relative my-1 ring-2 ring-transparent rounded-xl bg-white/50 dark:bg-codeblock/50 border border-gray-100 shadow-md dark:shadow-none shadow-gray-300/10 dark:border-gray-800/50 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light">
      <div className="flex flex-row h-full">
        <div className="integration-logo w-48 flex items-center justify-center p-4 bg-white">
          <span aria-owns="rmiz-modal-942aec5edfb7" data-rmiz="" className="flex items-center justify-center" style={{
    width: '100%',
    height: '100%',
    maxWidth: '150px'
  }}>
            <span data-rmiz-content="found" style={{
    visibility: 'visible',
    width: '100%',
    height: '100%',
    maxWidth: '150px'
  }} className="flex items-center justify-center">
              <img src={img} className="pointer-events-none w-full h-full object-contain" style={{
    maxWidth: '150px',
    maxHeight: '80px'
  }} />
            </span>
            <span data-rmiz-ghost="" style={{
    height: 127,
    left: 0,
    width: 213,
    top: 0
  }}>
              <button aria-label="Expand image" data-rmiz-btn-zoom="" type="button">
                <svg aria-hidden="true" data-rmiz-btn-zoom-icon="true" fill="currentColor" focusable="false" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                  <path d="M 9 1 L 9 2 L 12.292969 2 L 2 12.292969 L 2 9 L 1 9 L 1 14 L 6 14 L 6 13 L 2.707031 13 L 13 2.707031 L 13 6 L 14 6 L 14 1 Z" />
                </svg>
              </button>
            </span>
          </span>
        </div>
        <div className="flex flex-col justify-center p-4 flex-1">
          <h2 className="font-semibold text-sm">{title}</h2>
          <p className="mt-1 text-xs text-gray-600 dark:text-gray-400">{description}</p>
        </div>
      </div>
    </a>;
};

export const Button = ({href, children}) => {
  return <div className="not-prose group">
    <a href={href}>
      <button className="flex items-center space-x-2.5 py-1 px-4 bg-primary-dark dark:bg-white text-white dark:text-gray-950 rounded-full group-hover:opacity-[0.9] font-medium">
        <span>
          {children}
        </span>
        <svg width="3" height="24" viewBox="0 -9 3 24" class="h-6 rotate-0 overflow-visible"><path d="M0 0L3 3L0 6" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg>
      </button>
    </a>
  </div>;
};

export const IntroCard = ({img, href, title, description}) => {
  return <a href={href} className="card block not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-xl bg-white/50 dark:bg-codeblock/50 border border-gray-100 shadow-md dark:shadow-none shadow-gray-300/10 dark:border-gray-800/50 overflow-hidden w-full cursor-pointer hover:!border-primary dark:hover:!border-primary-light">
      <div className="flex flex-col h-full !bg-gray-400/10">
        <div className="integration-logo w-full flex items-center justify-center !bg-gray-400/10">
          <span aria-owns="rmiz-modal-942aec5edfb7" data-rmiz="" className="flex items-center justify-center" style={{
    width: '100%',
    height: '100%'
  }}>
            <span data-rmiz-content="found" style={{
    visibility: 'visible',
    width: '100%',
    height: '100%'
  }} className="flex items-center justify-center">
              <img src={img} className="pointer-events-none w-full h-full object-cover" />
            </span>
            <span data-rmiz-ghost="" style={{
    height: '100%',
    left: 0,
    width: '100%',
    top: 0
  }}>
              <button aria-label="Expand image" data-rmiz-btn-zoom="" type="button">
                <svg aria-hidden="true" data-rmiz-btn-zoom-icon="true" fill="currentColor" focusable="false" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                  <path d="M 9 1 L 9 2 L 12.292969 2 L 2 12.292969 L 2 9 L 1 9 L 1 14 L 6 14 L 6 13 L 2.707031 13 L 13 2.707031 L 13 6 L 14 6 L 14 1 Z" />
                </svg>
              </button>
            </span>
          </span>
        </div>
        <div className="p-4 flex-grow">
          <h3 className="text-lg font-semibold mb-2 text-white">{title}</h3>
          <p className="text-sm text-gray-400">{description}</p>
        </div>
      </div>
    </a>;
};

<div id="build-your-business-with-x-official-partners">
  ## Impulsa tu negocio con los socios oficiales de X
</div>

<div id="tap-into-the-public-conversation-on-x-and-turn-insights-into-action-with-solutions-from-our-partners">
  ###### Aprovecha la conversación pública en X y convierte esos insights en acciones concretas con las soluciones de nuestros socios.
</div>

<br />

<div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
  <Button href="https://partners.x.com/en/find-a-partner">
    Busca un socio
  </Button>

  <Button href="https://partners.x.com/en/about-the-program">
    Más información
  </Button>
</div>

<div id="work-with-a-trusted-x-official-partner-to-expand-whats-possible-for-your-business">
  ## Trabaja con un Socio Oficial de X de confianza para ampliar lo que es posible para tu empresa
</div>

Nuestros socios han sido seleccionados por su excelencia y pueden proporcionarte tecnología que te ayude a:

* Comprender las tendencias y preferencias de los consumidores 
* Recopilar y analizar comentarios sobre productos y servicios 
* Interactuar con los clientes y resolver problemas 
* Recibir alertas sobre noticias y eventos de última hora 
* Crear, publicar y analizar contenido en diferentes redes sociales 
* ¡Y mucho más!

<div id="discover-the-right-official-partner-for-your-business">
  ## Descubre el Socio Oficial adecuado para tu empresa
</div>

<br />

<Banner title="Los Socios Oficiales representan excelencia, valor y confianza" img="https://mintlify.s3-us-west-1.amazonaws.com/x-preview/images/XOPP_logo_black.png" description="Cada Socio Oficial ha sido seleccionado para el programa tras una extensa evaluación. Nuestros Socios Oficiales son revisados continuamente por X, ya que este programa al que solo se accede por invitación exige a sus miembros los más altos estándares de rendimiento para ofrecer experiencias excelentes a las marcas." />

<div id="official-partners-represent-excellence-value-and-trust">
  ### Los Partners Oficiales representan excelencia, valor y confianza
</div>

Cada Partner Oficial ha sido seleccionado para el programa tras una evaluación exhaustiva. Nuestros partners son revisados continuamente por X, ya que, al ser un programa solo por invitación, exige a sus miembros los más altos estándares de rendimiento para ofrecer experiencias de primer nivel a las marcas.

<Button href="https://partners.x.com/en/about-the-program">
  Más información sobre el programa
</Button>

<div id="see-our-partners-impressive-work">
  ## Conoce el impresionante trabajo de nuestros socios
</div>

<CardGroup cols={3}>
  <StoryCard title="La NASA usa información sobre la audiencia de X para llevar a sus fans a nuevas fronteras" href="https://partners.x.com/en/partner-resources/nasa-uses-twitter-audience-insights-to-take-fans-to-new-frontier" img="https://mintlify.s3-us-west-1.amazonaws.com/x-preview/images/Hero.jpg" />

  <StoryCard title="La belleza en X" href="https://partners.x.com/en/partner-resources/the-beauty-in-twitter" img="https://mintlify.s3-us-west-1.amazonaws.com/x-preview/images/thumbnail-sprinklr.png" />

  <StoryCard title="Analiza la conversación sobre #ExtremeWeather en X" href="https://developer.x.com/en/use-cases/build-for-good/extreme-weather" img="https://mintlify.s3-us-west-1.amazonaws.com/x-preview/images/Extreme_369x277.png" />
</CardGroup>