social-media/frontend/src/views/documentation/About.vue

<template>

  <h1>À propos</h1>

  <p>
    Notre mission chez Hutopy est de développer des outils permettant à chaque utilisateur de se démarquer, autant dans
    le monde réel que dans le monde numérique, en créant un véritable pont entre les deux. Que vous soyez artiste de
    rue, organisme à but non lucratif ou toute autre personne ayant besoin d’outils pour être soutenue, Hutopy est là
    pour vous.
  </p>

  <h2>Notre Histoire</h2>

  <p>
    Hutopy a été fondée en 2024, née de l'idée simple mais puissante que chaque créateur qu'il
    soit grand ou petit, novice ou expérimenté, devrait avoir accès aux outils et au soutien
    nécessaires pour partager sa passion avec le monde.
  </p>

  <h2>Notre Mission</h2>

  <p>
    Notre mission est de démocratiser la création de contenu numérique, en offrant une
    plateforme accessible, intuitive et puissante qui permet aux créateurs de tout horizon de
    s'exprimer, d'innover et de connecter avec une audience mondiale. Nous nous engageons à
    fournir les outils, les ressources et le soutien nécessaires pour que chaque voix puisse
    être entendue.
  </p>

  <h2>
    Notre Vision
  </h2>

  <p>
    Nous envisageons un monde où la barrière entre les créateurs et leur audience est réduite au
    minimum, où les idées, l'expertise et les histoires peuvent circuler librement et sans
    entrave. Hutopy aspire à être au cœur de cet écosystème créatif et professionnel, en étant
    une source d'inspiration, une plateforme de lancement et un foyer pour tous.
  </p>

  <h2>
    Notre Équipe
  </h2>

  <p>
    Derrière Hutopy, il y a une équipe de penseurs innovants, de créatifs passionnés et de
    technologues dévoués, tous unis par le désir de soutenir la communauté des créateurs de
    contenu. Notre équipe est notre plus grande force, chaque membre apportant une expertise
    unique et une perspective fraîche à notre mission commune.
  </p>

  <div class="members">


    <div class="card">
      <div class="card-header">
        <img class="member-profile-picture"
             src="/images/hutopymedia/tospage/membersPictures/profilePascal.png"
             alt="Pascal Marchesseault">
      </div>

      <div class="card-body">
        <div class="member-name">Pascal Marchesseault</div>
        <div class="member-title">Président-directeur général</div>
        <div class="member-description">
          <p>
            Avec une vision claire et un engagement sans faille, il a toujours été présent pour veiller à la bonne
            réalisation du projet.
          </p>
        </div>
      </div>

    </div>

    <div class="card">

      <div class="card-header">
        <img class="member-profile-picture"
             src="/images/hutopymedia/tospage/membersPictures/profileMarco.png"
             alt="Marc-Olivier Hébert">
      </div>

      <div class="card-body">
        <div class="member-name">Marc-Olivier Hébert</div>
        <div class="member-title">Directeur de l’innovation et de la vision</div>
        <div class="member-description">
          <p>
            Avec une vision avant-gardiste, il permet à l’équipe d’explorer de nouvelles idées ou de les réinventer.
          </p>
        </div>
      </div>

    </div>

    <div class="card">

      <div class="card-header">
        <img class="member-profile-picture"
             src="/images/hutopymedia/tospage/membersPictures/profileChloe.png"
             alt="Chloé Beaugrand">
      </div>

      <div class="card-body">
        <div class="member-name">Chloé Beaugrand</div>
        <div class="member-title">Directrice marketing</div>
        <div class="member-description">
          <p>
            Elle façonne l'image d’Hutopy et engage notre communauté à travers des campagnes
            innovantes et impactantes.
          </p>
        </div>
      </div>

    </div>

    <div class="card">

      <div class="card-header">
        <img class="member-profile-picture"
             src="/images/hutopymedia/tospage/membersPictures/Jonathan.png"
             alt="Édouard Letarte">
      </div>

      <div class="card-body">
        <div class="member-name">Jonathan Bourdon</div>
        <div class="member-title">Directeur des technologies</div>
        <div class="member-description">
          <p>
            Son expérience d'architecte senior nous permet de développer un logiciel avec
            une durabilité qui nous permettra de nous développer pendant de longues années.
          </p>
        </div>
      </div>

    </div>

  </div>

  <p>
    Chez Hutopy, nous sommes plus qu'une plateforme ; nous sommes une famille dédiée à la
    réussite de nos créateurs. Nous vous invitons à nous joindre dans cette aventure
    passionnante, à partager votre créativité et votre expertise avec le monde et à faire
    d’Hutopy votre utopie. Merci de faire partie de notre histoire.
  </p>

</template>


<style scoped>
@import '@/views/documentation/documentation.css';

.members {
  @apply mb-12;
  @apply flex flex-wrap;
  @apply w-full justify-center;
}

.card {
  @apply flex flex-col;
  @apply bg-hPrimary rounded-2xl text-hOnPrimary;
  @apply font-sans text-base;
  @apply p-2;
  @apply w-72;
}

.card-header {
  @apply rounded-xl;
}

.card-body {
  @apply w-full
}

.member-profile-picture {
  @apply  rounded-t-xl;
}

.member-name {
  @apply font-bold text-2xl;
  @apply mb-2;
}

.member-title {
  @apply font-semibold text-lg;
  @apply mb-4;
}

.member-description {
  @apply font-sans text-lg text-justify;
}

</style>
<script setup lang="ts">
</script>