<template>

    <body style="background-color: #f4f4f4;">
        <DefaultLayout></DefaultLayout>
        <div>
            <v-row class="fluid" style="margin-top: -30px; position: relative; z-index: 0;">
                <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
                    <v-img class="profile-banner" max-height="375" src="./../../../images/tos/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" style="color:white;">
                    <h1 class="header-text-size text-center">Guide pour les Créateurs</h1>
                </v-row>
            </v-container>


            <v-row class="fluid d-flex justify-center" style="margin-bottom: 25px; margin-top: 25px;">
                <v-col cols="auto">
                    <router-link :to="{ name: 'home' }">
                        <v-btn flat style="background-color: #f4f4f4;">
                            <v-icon left style="margin-right: 10px;">mdi-home</v-icon> Accueil
                        </v-btn>
                    </router-link>
                </v-col>
            </v-row>



            <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;">
                            Guide pour les Créateurs sur Hutopy
                        </p>
                        <p class="text-start text-left" style="margin-bottom: 25px;">
                            Bienvenue dans la Communauté de Créateurs d’Hutopy
                        </p>
                        <p style="margin-bottom: 25px;">
                            Félicitations pour avoir choisi Hutopy pour partager votre créativité et votre savoir ! Ce
                            guide est conçu pour vous aider à maximiser votre présence sur la plateforme, à engager
                            votre audience et à tirer le meilleur parti des outils à votre disposition.
                        </p>

                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
                            1. Création de Votre Profil de Créateur :
                        </p>
                        <p style="margin-top: 25px; margin-bottom: 25px;">
                            <li>Personnalisez Votre Profil : Ajoutez une photo de profil, une bannière et une bio
                                qui
                                reflète votre personnalité et votre marque de créateur.</li> <br>
                            <li> Liens et Contacts : Intégrez des liens vers vos autres plateformes sociales</li>
                        </p>

                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
                            2. Publication de Contenu :
                        </p>
                        <p style="margin-top: 25px; margin-bottom: 25px; ">
                            <li>Diversifiez Votre Contenu : Explorez différents formats – vidéos, articles, podcasts –
                                pour captiver divers segments d'audience.
                            </li> <br>
                            <li> Planification et Consistance : Publiez régulièrement pour garder votre audience
                                engagée. Utilisez l'outil de planification d’Hutopy pour organiser vos publications à
                                l'avance.</li>
                        </p>

                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
                            3. Engagement avec Votre Audience :
                        </p>
                        <p style="margin-top: 25px; margin-bottom: 25px;">
                            <li>Interagissez : Répondez aux commentaires, participez à des discussions et créez des
                                sondages pour encourager l'interaction.
                            </li> <br>
                            <li> Analysez Vos Performances : Utilisez les outils d'analyse d’Hutopy pour comprendre ce
                                qui résonne avec votre audience et ajustez votre stratégie en conséquence.</li>
                        </p>

                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
                            4. Monétisation :
                        </p>
                        <p style="margin-top: 25px; margin-bottom: 25px;">
                            <li>Explorez les Options : Hutopy offre plusieurs voies de monétisation, y compris les
                                abonnements payants, les dons et le programme d'ambassadeur. Choisissez ce qui convient
                                le mieux à votre contenu et à votre audience.
                            </li>
                        </p>

                        <p style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">
                            5. Croissance et Développement :
                        </p>
                        <p style="margin-top: 25px; margin-bottom: 25px;">
                            <li>Continuez à Apprendre : Utilisez le Centre de Ressources Éducatives d’Hutopy pour
                                améliorer vos compétences et rester à jour sur les tendances du secteur. ( À venir )
                            </li> <br>
                        </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 scoped>
.header-text-size {
    font-size: 4rem;
    margin-top: -230px;
}



@media (min-width: 650px) and (max-width: 960px) {
    .header-text-size {
        margin-top: -200px;
        font-size: 3rem;
    }

}

@media (min-width: 100px) and (max-width: 649px) {
    .header-text-size {
        margin-top: -135px;
        font-size: 2.5rem;
    }

}
</style>
