---
home: true
# layout: BlogHome
icon: home
# title: Ocelot.Social
heroFullScreen: false
# heroImage: /logo.svg
# heroText: Das freie soziale Open-Source-Netzwerk für eine aktive Zivilgesellschaft.
tagLine: 
# actions:
#   - text: Demo
#     link: https://stage.ocelot.social/
---

<!-- markdownlint-disable no-inline-html first-line-heading -->
<div class="hero-container">
  <div class="hero-container-inner">
    <div class="hero-container-content">
      <img id="logo" src="/logo.svg" alt="ocelot.social" />
      <div id="slogan-container">
        <span id="slogan-1" class="slogan">Software Libre y de Código Abierto</span>
        <span id="slogan-2" class="slogan">para tu red social</span>
      </div>
      <a href="#benefits">
        <Button class="hero-button">
          Descubre más
        </Button>
      </a>
    </div>
  </div>
</div>

<h2 id="benefits" class="large-header">¿Por qué ocelot.social?</h2>

<div class="benefits-grid center">
  <figure>
    <HopeIcon icon="fa-solid fa-face-smile" />
    <figcapture>
      <h3>Software libre y de código abierto</h3>
      Puedes usar y desarrollar más el software.
    </figcapture>
  </figure>
  <figure>
    <HopeIcon icon="fa-solid fa-people-group" />
    <figcapture>
      <h3>Para todos</h3>
      <i>Ocelot.social</i> es adecuado tanto para la sociedad civil como para organizaciones públicas y privadas.
    </figcapture>
  </figure>
  <figure>
    <HopeIcon icon="fa-solid fa-filter" />
    <figcapture>
      <h3>Filtrado autodeterminado</h3>
      Tú eliges qué contenido ves – sin selecciones impenetrables.
    </figcapture>
  </figure>
  <figure>
    <HopeIcon icon="fa-solid fa-gears" />
    <figcapture>
      <h3>Configurable</h3>
      Como operador, puedes personalizar el diseño y las funciones según tus deseos.
    </figcapture>
  </figure>
  <figure>
    <HopeIcon icon="fa-solid fa-code" />
    <figcapture>
      <h3>Ampliable</h3>
      Se pueden añadir nuevas funciones que beneficien a todos.
    </figcapture>
  </figure>
  <figure>
    <HopeIcon icon="fa-solid fa-up-right-and-down-left-from-center" />
    <figcapture>
      <h3>Escalable</h3>
      Gracias a la última tecnología, puedes usar el software para todos los tamaños de red.
    </figcapture>
  </figure>
  <figure>
    <HopeIcon icon="home" />
    <figcapture>
      <h3>Alojamiento flexible</h3>
      Puedes alojar tu red tú mismo o hacer que la aloje tu proveedor de servicios.
    </figcapture>
  </figure>
  <figure>
    <HopeIcon icon="fa-solid fa-scale-balanced" />
    <figcapture>
      <h3>Tus propias reglas</h3>
      Define tú mismo los términos de uso para tu red.
    </figcapture>
  </figure>
  <figure>
    <HopeIcon icon="fa-solid fa-shuttle-space" />
    <figcapture>
      <h3>Última tecnología</h3>
      El software está a la vanguardia de la tecnología – flexible, fiable, de alto rendimiento.
    </figcapture>
  </figure>
</div>

<h2 id="feature-headline" class="large-header">Funciones principales</h2>

<div class="image-grid center">
  <figure>
    <img src="../de/assets/login.png" alt="Inicio de sesión" />
    <figcapture>
      Inicio de sesión
    </figcapture>
  </figure>
  <figure>
    <img src="../de/assets/newsfeed.png" alt="Vista general de publicaciones (feed de noticias)" />
    <figcapture>
      Vista general de publicaciones (feed de noticias)
    </figcapture>
  </figure>
  <figure>
    <img src="../de/assets/single-post.png" alt="Publicación individual" />
    <figcapture>
      Publicación individual
    </figcapture>
  </figure>
  <figure>
    <img src="../de/assets/single-event.png" alt="Evento individual" />
    <figcapture>
      Evento individual
    </figcapture>
  </figure>
  <figure>
    <img src="../de/assets/user-profile.png" alt="Perfil de usuario" />
    <figcapture>
      Perfil de usuario
    </figcapture>
  </figure>
  <figure>
    <img src="../de/assets/user-settings.png" alt="Configuración de la cuenta de usuario" />
    <figcapture>
      Configuración de la cuenta de usuario
    </figcapture>
  </figure>
  <figure>
    <img src="../de/assets/group-list.png" alt="Vista general de grupos" />
    <figcapture>
      Vista general de grupos
    </figcapture>
  </figure>
  <figure>
    <img src="../de/assets/group-profile.png" alt="Perfil del grupo" />
    <figcapture>
      Perfil del grupo
    </figcapture>
  </figure>
  <figure>
    <img src="../de/assets/1-to-1-chat.png" alt="Chat uno a uno" />
    <figcapture>
      Chat uno a uno
    </figcapture>
  </figure>
  <figure>
    <img src="../de/assets/notifications.png" alt="Notificaciones" />
    <figcapture>
      Notificaciones
    </figcapture>
  </figure>
  <figure>
    <img src="../de/assets/map.png" alt="Mapa" />
    <figcapture>
      Mapa
    </figcapture>
  </figure>
  <figure>
    <img src="../de/assets/language-selection.png" alt="Multilingüismo" />
    <figcapture>
      Multilingüismo
    </figcapture>
  </figure>
  <figure>
    <img src="../de/assets/moderation.png" alt="Moderación" />
    <figcapture>
      Moderación
    </figcapture>
  </figure>
  <figure>
    <img src="../de/assets/system-administration.png" alt="Administración del sistema" />
    <figcapture>
      Administración del sistema
    </figcapture>
  </figure>
</div>

<div class="all-features">
  <a id="hero-button" href="/es/features/">
    <Button>
      Ver todas las funciones
    </Button>
  </a>
</div>

<h2 class="large-header">Pruébalo</h2>

<!--
| E-Mail                  | Passwort | Benutzerrolle   |
| :---                    | :---     | :---            |
| `user@example.org`      | 1234     | normaler Nutzer |
| `moderator@example.org` | 1234     | Moderator       |
| `admin@example.org`     | 1234     | Administrator   |
-->

<div class="center">
  <p>
    Prueba la demostración en vivo en
    <a href="https://stage.ocelot.social" target="_blank">https://stage.ocelot.social</a>
    con los siguientes datos de acceso:
  </p>

  <table>
    <thead>
      <tr>
        <th style="text-align:left;">E-mail</th>
        <th style="text-align:left;">Contraseña</th>
        <th style="text-align:left;">Rol de usuario</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="text-align:left;"><code>user@example.org</code></td>
        <td style="text-align:left;">1234

</td>
        <td style="text-align:left;">usuario normal</td>
      </tr>
      <tr>
        <td style="text-align:left;"><code>moderator@example.org</code></td>
        <td style="text-align:left;">1234</td>
        <td style="text-align:left;">moderador</td>
      </tr>
      <tr>
        <td style="text-align:left;"><code>admin@example.org</code></td>
        <td style="text-align:left;">1234</td>
        <td style="text-align:left;">administrador</td>
      </tr>
    </tbody>
  </table>
</div>

<h2 class="large-header">Comienza</h2>

<div class="center">
  <p>
    Puedes alojar <i>ocelot.social</i> en tu propio servidor o hacer que lo alojen por ti.<br>
    Echa un vistazo a las opciones disponibles:
  </p>
  <a id="hero-button" href="/es/get-started/">
    <Button>
      Vamos allá
    </Button>
  </a>
</div>

<!-- ## Testimonials

XXX -->

<h2 class="large-header">Donar</h2>

<div class="center">
  <p>
    El software <i>ocelot.social</i> está disponible de forma gratuita – sin embargo, el mantenimiento y desarrollo cuestan dinero.<br>
    Ayúdanos con tu donación:
  </p>
  <a href="/es/donate/">
    <Button class="donate-button">
      Donar aquí
    </Button>
  </a>
</div>

<h2 class="large-header">Contacto</h2>

<div class="center">
  <p>
    Si tienes alguna pregunta, sugerencia o petición, por favor <a href="/es/contact/">contáctanos</a>.
  </p>
</div>
```