<template>

    <body style="background-color: #f4f4f4;">
        <DefaultLayout></DefaultLayout>
        <div>
            <v-row class="fluid" style="margin-top: -30px; position: relative; z-index: 0;" hidden-md-and-down>
                <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
                    <v-img class="profile-banner" max-height="375"
                        src="/images/hutopymedia/tospage/headerbackground.png" cover
                        style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
                </v-col>
            </v-row>

            <v-container style="z-index: 100; position: relative;">
                <v-row justify="center" align="center" style="color:white; margin-top: -250px;"
                    class="header-text-size">
                    <v-typography class="headline text-center">À propos</v-typography>
                </v-row>
            </v-container>


            <v-container style="z-index: 100; position: relative;">
                <v-row justify="center" align="center">
                    <v-spacer></v-spacer>
                    <v-col cols="7">
                        <p style="font-weight: 600; font-size: 2rem; margin-bottom: 25px;">
                            À propos
                        </p>

                        <p style="margin-top: 25px; margin-bottom: 25px;">
                            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>

                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
                            Notre Histoire
                        </p>

                        <p style="margin-top: 25px; margin-bottom: 25px;">
                            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>

                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
                            Notre Mission
                        </p>

                        <p style="margin-top: 25px; margin-bottom: 25px;">
                            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>

                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
                            Notre Vision
                        </p>

                        <p style="margin-top: 25px; margin-bottom: 25px;">
                            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>

                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
                            Notre Équipe
                        </p>

                        <p style="margin-top: 25px; margin-bottom: 25px;">
                            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" style="margin: 10px;">

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

                                <div style="margin: 10px;">
                                    <v-typography class="name"
                                        style="font-size: 1.5rem; font-weight: bold;">Marc-Olivier
                                    </v-typography><br> <v-typography class="name"
                                        style="font-size: 1.5rem; font-weight: bold;">
                                        Hébert</v-typography><br>
                                    <v-typography class="task" style="font-size: 1rem;">Fondateur</v-typography><br><br>
                                    <div class="text" style="font-size: 0.8rem; text-align: justify;">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é.</div>
                                </div>
                            </v-card>
                            <v-card max-width="250px" style="margin: 10px;">
                                <img class="member-profile-picture"
                                    src="/images/hutopymedia/tospage/membersPictures/profileDominique.png"
                                    alt="Dominic Villemure">

                                <div style="margin: 10px;">
                                    <v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">Dominic
                                    </v-typography><br>
                                    <v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">
                                        Villemure</v-typography><br>
                                    <v-typography class="task" style="font-size: 1rem;">Responsable
                                        Technique</v-typography><br><br>
                                    <div class="text" style="font-size: 0.8rem; text-align: justify;">À la tête de
                                        notre équipe de développement, il assure qu’Hutopy reste à la pointe de la
                                        technologie.</div>
                                </div>
                            </v-card>
                            <v-card max-width="250px" style="margin: 10px;">
                                <img class="member-profile-picture"
                                    src="/images/hutopymedia/tospage/membersPictures/profilePascal.png"
                                    alt="Pascal Marchesseault">
                                <div style="margin: 10px;">
                                    <v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">Pascal
                                    </v-typography><br>
                                    <v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">
                                        Marchesseault</v-typography><br>
                                    <v-typography class="task" style="font-size: 1rem;">Expérience
                                        utilisateur</v-typography><br>
                                    <br>

                                    <v-typography class="text" style="font-size: 0.8rem; text-align: justify;">Le
                                        champion
                                        de l'expérience utilisateur, il veille à ce que chaque interaction avec Hutopy
                                        soit
                                        positive et enrichissante pour tous les utilisateurs.</v-typography>
                                </div>
                            </v-card>
                        </v-row>

                        <v-row justify="center">
                            <v-card max-width="250px" style="margin: 10px;">
                                <img class="member-profile-picture"
                                    src="/images/hutopymedia/tospage/membersPictures/profileChloe.png"
                                    alt="Chloé Beaugrand">
                                <div style="margin: 10px;">
                                    <v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">Chloé
                                    </v-typography><br>
                                    <v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">
                                        Beaugrand</v-typography><br>
                                    <v-typography class="task" style="font-size: 1rem;">Responsable
                                        Marketing</v-typography><br>
                                    <br>
                                    <v-typography class="text" style="font-size: 0.8rem; text-align: justify;">Elle
                                        façonne
                                        l'image d’Hutopy et engage notre communauté à travers des campagnes innovantes
                                        et
                                        impactantes.</v-typography>
                                </div>
                            </v-card>
                            <v-card max-width="250px" style="margin: 10px;">
                                <img class="member-profile-picture"
                                    src="/images/hutopymedia/tospage/membersPictures/profileEdouard.png"
                                    alt="Édouard Letarte">
                                <div style="margin: 10px;">
                                    <v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">Édouard
                                    </v-typography><br>
                                    <v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">
                                        Letarte</v-typography><br>
                                    <v-typography class="task" style="font-size: 1rem;">Intégrateur
                                    </v-typography><br><br>
                                    <v-typography class="text" style="font-size: 0.8rem; text-align: justify;">Son
                                        expertise nous permet d'intégrer des fonctionnalités qui permettent à Hutopy de
                                        devenir réalité.</v-typography>
                                </div>
                            </v-card>
                        </v-row>
                        <br>



                        <p style="margin-top: 25px; margin-bottom: 25px;">
                            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>

































                    </v-col>
                    <v-spacer></v-spacer>
                </v-row>
            </v-container>
        </div>



        <FooterLayout></FooterLayout>

    </body>
</template>

<script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';

</script>

<style>
.header-text-size {
    font-size: 4rem;
}

.member-profile-picture {
    width: 250px;
    height: auto;
}
</style>
