<template>

    <section class="projects">
        <h2 class="projects__title">Projets sélectionnés</h2>
        <div class="projects__cards">
            <ProjectCard
                v-for="project in projects"
                :key="project.title"
                :title="project.title"
                :url="project.url"
                :screenshot="project.screenshot"
                :description="project.description"
            />
        </div>
    </section>

</template>

<script setup>

    // --------------------------------------------------
    // DATA
    // --------------------------------------------------

    const projects = [
        {
            title: 'Xiao Wang',
            url: 'https://xiaowang.fr',
            screenshot: '/images/xiao-wang-screenshot-01.png',
            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Felis imperdiet proin fermentum leo vel.'
        },
        {
            title: 'Danao',
            url: 'https://www.danao.fr',
            screenshot: '/images/danao-screenshot-01.png',
            description: 'Curabitur gravida arcu ac tortor. Id consectetur purus ut faucibus pulvinar elementum integer enim neque. Sit amet dictum sit amet justo donec enim diam vulputate'
        },
        {
            title: 'LibreAudio',
            url: 'https://libreaudio.fr',
            screenshot: '/images/libreaudio-screenshot-01.png',
            description: 'Tortor condimentum lacinia quis vel eros donec ac odio. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate.'
        }
    ];

</script>

<style lang="scss" scoped>

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

    .projects {
        @include large-section;
        // position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4rem;

        // &::after {
        //     content: '';
        //     position: absolute;
        //     bottom: 0;
        //     left: 10%;
        //     width: 80%;
        //     height: 1px;
        //     background-color: #525252;
        // }

        &__cards {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4rem;
            width: 100%;
        }
    }

</style>
