<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/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" align="center" style="color:white; margin-top: -250px;"
                    class="header-text-size">
                    <v-typography class="headline text-center">Programme ambassadeurs</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 class="text-start">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                            laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur
                            adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
                            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit
                            amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                            aliquip ex ea commodo consequat.
                        </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;
}
</style>
