paulnicoue/pages/index.vue

<template>

    <main>
        <HeroSection class="hero-section" />
        <ServicesSection class="services-section" />
        <ContactSection class="contact-section" />
    </main>

</template>

<script setup>

    // --------------------------------------------------
    // HEAD
    // --------------------------------------------------

    definePageMeta({
        pageTitleChunk: null
    })

</script>

<style lang="scss" scoped>

    // --------------------------------------------------
    // STYLE
    // --------------------------------------------------

    main {
        width: 100%;
        display: grid;
        grid:
            'hero-section' auto
            'services-section' auto
            'contact-section' auto
            / 1fr;
        place-content: start center;
        place-items: start center;

        .hero-section {
            grid-area: hero-section;
        }

        .services-section {
            grid-area: services-section;
        }

        .contact-section {
            grid-area: contact-section;
        }
    }

</style>