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

<template>

  <h1>À propos</h1>

  <p>
    Bienvenue sur la page "À Propos" d’Hutopy, où nous partageons notre histoire, notre mission,
    notre vision, et vous présentons l'équipe passionnée qui rend tout cela possible. Hutopy
    n'est pas seulement une plateforme ; c'est une communauté, un mouvement, un lieu où la
    créativité rencontre la technologie pour créer des expériences inoubliables.
  </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/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">CEO / Fondateur</div>
        <div class="member-description">
          <p>
          Avec une vision claire et un engagement sans faille, il a lancé Hutopy pour changer la manière dont le
          contenu est créé et partagé.
          </p>
        </div>
      </div>

    </div>

    <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">Gestionnaire de projet / UI</div>
        <div class="member-description">
          <p>
            A pour mission d'assurer le développement du projet tout en créant une interface
            qui permettra au projet d'avoir une interaction positive et enrichissante avec Hutopy pour les
            utilisateurs.
          </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">Responsable 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 Technique</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>