<template>
    <UContainer class="flex flex-col gap-5" as="section">
        <div class="text-sm text-gray-500">Personal projects</div>

        <div class="grid grid-cols-1 gap-5 md:grid-cols-3">
            <Project
                title="Ghostwriter"
                image="https://www.ghostwriter.rocks/ghostwriter-logo.png"
                url="https://ghostwriter.rocks"
            >
                <template v-slot:description>
                    Your Strava activities, creatively titled!
                </template>
                <template v-slot:subtitle> Compatible with Strava </template>
            </Project>

            <Project
                title="Places for Zendesk"
                image="https://990141.apps.zdusercontent.com/990141/assets/1701544308-8c83d0f02afd0b3d7342e5f19304c4b4/logo.png"
                url="https://getplaces.co"
            >
                <template v-slot:description>
                    Drive leads and customers straight to your business.
                </template>
                <template v-slot:subtitle>
                    Built for Zendesk marketplace
                </template>
            </Project>

            <Project
                title="SneakPeek"
                image="https://cdn.livechat-files.com/api/file/developers/img/applications/449B6QFGg/icons/AecAyk1Gg-960x960.png"
                url="https://www.livechat.com/marketplace/apps/sneakpeek"
                marketplace="LiveChat"
            >
                <template v-slot:description
                    >Turn URLs into visual chat-friendly previews</template
                >
                <template v-slot:subtitle>
                    Built for LiveChat marketplace
                </template>
            </Project>
        </div>
    </UContainer>
</template>
