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

<template>
  <div class="relative pb-10">
    <img src="/images/hutopymedia/tospage/headerbackground.png" class="mx-auto block max-w-[1000px] shadow-2xl rounded-none md:rounded-2xl" alt="">
    <h1 class="h1-tos py-10 absolute inset-0 flex items-center justify-center text-white uppercase">À propos</h1>
  </div>

  <div class="mx-auto max-w-[1000px] px-4">
    <p class="text-justify p-tos">
      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 class="h2-tos">
      Notre Histoire
    </h2>

    <p class="text-justify p-tos">
      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 class="h2-tos">
      Notre Mission
    </h2>

    <p class="text-justify p-tos">
      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 class="h2-tos">
      Notre Vision
    </h2>

    <p class="text-justify p-tos">
      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 class="h2-tos">
      Notre Équipe
    </h2>

    <p class="text-justify p-tos">
      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>

    <br>
    <v-row justify="center">
      <v-card max-width="250px" class="card-member" style="margin: 10px;">
        <img class="member-profile-picture"
             src="/images/hutopymedia/tospage/membersPictures/profileMarco.png"
             alt="Marc-Olivier Hébert">
        <div class="card-content">
          <div class="member-name">Marc-Olivier</div>
          <div class="member-name">Hébert</div>
          <div class="member-title">Fondateur</div>
          <p class="member-description">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>
      </v-card>

      <v-card max-width="250px" class="card-member" style="margin: 10px;">
        <img class="member-profile-picture"
             src="/images/hutopymedia/tospage/membersPictures/profileDominique.png"
             alt="Dominic Villemure">
        <div class="card-content">
          <div class="member-name">Dominic</div>
          <div class="member-name">Villemure</div>
          <div class="member-title">Responsable Technique</div>
          <p class="member-description">À la tête de notre équipe de développement, il assure qu’Hutopy reste à la pointe de la technologie.</p>
        </div>
      </v-card>

      <v-card max-width="250px" class="card-member" style="margin: 10px;">
        <img class="member-profile-picture"
             src="/images/hutopymedia/tospage/membersPictures/profilePascal.png"
             alt="Pascal Marchesseault">
        <div class="card-content">
          <div class="member-name">Pascal</div>
          <div class="member-name">Marchesseault</div>
          <div class="member-title">Gestionnaire de projet / UI</div>
          <p class="member-description">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>
      </v-card>

      <v-card max-width="250px" class="card-member" style="margin: 10px;">
        <img class="member-profile-picture"
             src="/images/hutopymedia/tospage/membersPictures/profileChloe.png"
             alt="Chloé Beaugrand">
        <div class="card-content">
          <div class="member-name">Chloé</div>
          <div class="member-name">Beaugrand</div>
          <div class="member-title">Responsable Marketing</div>
          <p class="member-description">Elle façonne l'image d’Hutopy et engage notre communauté à travers des campagnes innovantes et impactantes.</p>
        </div>
      </v-card>

      <v-card max-width="250px" class="card-member" style="margin: 10px;">
        <img class="member-profile-picture"
             src="/images/hutopymedia/tospage/membersPictures/Jonathan.png"
             alt="Édouard Letarte">
        <div class="card-content">
          <div class="member-name">Jonathan</div>
          <div class="member-name">Bourdon</div>
          <div class="member-title">Programeur / Architecte</div>
          <p class="member-description">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>
      </v-card>
    </v-row>


    <p class="text-justify py-6 p-tos">
      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>
  </div>
</template>

<style>
@import '@/cssstyle/tosstyle.css';
</style>