tethys.backend/resources/js/Components/FirstrunWizard/components/Page1.vue

<template>
    <div class="page__wrapper">
        <div class="page__scroller first-page">
            <h2 class="page__heading">
                {{ t('firstrunwizard', 'A collaboration platform that puts you in control') }}
            </h2>
            <div class="page__content">
                <Card :title="t('firstrunwizard', 'Privacy')"
                    :subtitle="t('firstrunwizard', 'Host your data and files where you decide.')">
                    <Lock :size="20" />
                </Card>
                <Card :title="t('firstrunwizard', 'Productivity')"
                    :subtitle="t('firstrunwizard', 'Collaborate and communicate across any platform.')">
                    <BriefcaseCheck :size="20" />
                </Card>
                <Card :title="t('firstrunwizard', 'Interoperability')"
                    :subtitle="t('firstrunwizard', 'Import and export anything you want with open standards.')">
                    <SwapHorizontal :size="20" />
                </Card>
                <Card :title="t('firstrunwizard', 'Community')"
                    :subtitle="t('firstrunwizard', 'Enjoy constant improvements from a thriving open-source community.')">
                    <AccountGroup :size="20" />
                </Card>
            </div>
        </div>
    </div>
</template>

<script>
import Card from './Card.vue'

import Lock from 'vue-material-design-icons/Lock.vue'
import BriefcaseCheck from 'vue-material-design-icons/BriefcaseCheck.vue'
import SwapHorizontal from 'vue-material-design-icons/SwapHorizontal.vue'
import AccountGroup from 'vue-material-design-icons/AccountGroup.vue'

export default {
    name: 'Page1',

    components: {
        Card,
        Lock,
        BriefcaseCheck,
        SwapHorizontal,
        AccountGroup,
    },
}
</script>

<style lang="css" scoped>
/* @import "pageStyles"; */

.first-page {
    margin-top: 100px;
}
</style>