ClearBowl/front/pages/index.vue

<template>
    <Card class="main-card">
        <Row :gutter="16">
            <Col span="6">
                <NuxtLink to="/recipes">
                    <Card class="cb-menu">
                        <Icon type="ios-restaurant" size="100" color="white"/>
                        <div style="text-align:center">
                            <h3>Przepisy</h3>
                        </div>
                    </Card>
                </NuxtLink>
            </Col>
            <Col span="6">
                <Card class="cb-menu">
                    <Icon type="ios-calculator" size="100" color="white"/>
                    <div style="text-align:center">
                        <h3>Kalkulator</h3>
                    </div>
                </Card>
            </Col>
            <Col span="6">
                <Card class="cb-menu">
                    <Icon type="ios-leaf" size="100" color="white"/>
                    <div style="text-align:center">
                        <h3>Dieta</h3>
                    </div>
                </Card>
            </Col>
            <Col span="6">
                <NuxtLink to="/products">
                    <Card class="cb-menu">
                        <Icon type="ios-pizza" size="100" color="white"/>
                        <div style="text-align:center">
                            <h3>Produkty</h3>
                        </div>
                    </Card>
                </NuxtLink>
            </Col>
        </Row>
    </Card>
</template>

<script>
    export default {
        name: 'index',
        auth: false,
    };
</script>


<style scoped>
    .main-card {
        margin: 0;
        top: 50%
    }

    .cb-menu {
        background: #248200;
        color: white;
    }

</style>