<template>
    <v-col cols="12">
        <v-container fluid>
            <v-row>
                <v-col
                    v-for="(item, index) in items"
                    :key="index"
                    class="d-flex"
                    cols="12"
                    md="6"
                >
                    <v-card
                        :color="item.color"
                        dark
                        style="min-height: 350px; width: 100%;"
                    >
                        <v-card-title class="headline">
                            {{ item.title }}
                        </v-card-title>
                        <v-card-subtitle>
                            {{ item.content }}
                        </v-card-subtitle>
                        <v-card-actions>
                            <v-btn text>See a demo</v-btn>
                        </v-card-actions>
                    </v-card>
                </v-col>
            </v-row>
        </v-container>
    </v-col>
</template>

<script>
export default {
    title: 'Home',
    options: {
        auth: false,
    },
    data: () => ({
        items: [
            {
                title: 'Writes your notes in markdown',
                content:
                    'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut consectetur debitis harum' +
                    ' illum in incidunt maxime modi quae velit? Aspernatur, consequatur error' +
                    ' mollitia nesciunt officiis porro ratione sequi voluptas?',
                color: 'indigo',
            },
            {
                title: '',
                content: '',
                color: 'purple',
            },
            {
                title: '',
                content: '',
                color: 'warning',
            },
            {
                title: '',
                content: '',
                color: 'teal darken-2',
            },
        ],
    }),
    head: () => ({
        title: 'Home',
    }),
}
</script>
&
