<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">Aide et Contact</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;">
                            Aide et contact
                        </p>

                        <p class="text-start text-left" style="margin-bottom: 25px;">
                            Bienvenue dans notre espace d'assistance ! Que vous soyez un créateur à la recherche de
                            conseils pour optimiser votre présence sur Hutopy, ou un utilisateur curieux d'en apprendre
                            plus sur notre plateforme, vous êtes au bon endroit. Notre objectif est de vous fournir tout
                            le soutien nécessaire pour que votre expérience sur Hutopy soit aussi enrichissante et
                            agréable que possible.
                        </p>

                        <p style="font-weight: 600; font-size: 1.4rem;">
                            FAQ (Foire Aux Questions)
                        </p>

                        <p style="margin-top: 25px; ">
                            Retrouvez les réponses aux questions les plus fréquemment posées concernant l'utilisation
                            d’Hutopy, les fonctionnalités de la plateforme, les options de monétisation, et plus encore.
                            Consulter la FAQ
                        </p>

                        <p style="margin-top: 25px; font-weight: 600; font-size: 1.4rem;">Contactez-Nous</p>

                        <p style="margin-top: 25px;">Nous sommes toujours ravis d'entendre nos utilisateurs ! Que ce
                            soit pour partager vos retours, poser une question spécifique, ou demander des
                            renseignements sur des partenariats, n'hésitez pas à nous contacter.</p>
                        <p style="margin-top: 25px; color: black;">
                            - Par E-mail : <a href="mailto:info@hutopy.com" style="color: #a30e79;">info@hutopy.com</a>
                            <br>
                            - Réseaux Sociaux : Nous sommes actifs sur <a href="https://www.facebook.com/Hutopy"
                                style="color: #a30e79;">Facebook</a>, et <a href="https://www.instagram.com/hutopy.inc"
                                style="color: #a30e79;">Instagram</a> <br>
                            - Suivez-nous pour rester informé et interagir avec notre communauté.
                        </p>

                        <p style="margin-top: 25px; font-weight: 600; font-size: 1.4rem;">Assistance Technique</p>

                        <p style="margin-top: 25px; color: black;">
                            Rencontrez-vous un problème technique ? <br>
                            Notre équipe d'assistance est là pour vous aider :
                            <a href="mailto:support@hutopy.com" style="color: #a30e79;">support@hutopy.com</a>
                        </p>


                        <p style="margin-top: 25px;">Nous sommes là pour rendre votre expérience sur Hutopy aussi fluide
                            et positive que possible. N'hésitez pas à nous contacter pour toute aide supplémentaire !
                        </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;
    }

}

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

}
</style>
