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

<template>
    <div id="page__wrapper" class="flex flex-col justify-between min-h-520">
        <div class="page__scroller first-page">
            <h2 id="page__heading" class="text-xl font-bold leading-tight dark:text-slate-400 text-center">
                {{ 'A researchdata platform that puts you in control' }}
            </h2>
            <div class="page__content">
                <!-- <Card :title="'Privacy'"
                    :subtitle="'Host your data and files where you decide.'">
                    <Lock :size="20" />
                </Card>
                <Card :title="'Productivity'"
                    :subtitle="'Collaborate and communicate across any platform.'">
                    <BriefcaseCheck :size="20" />
                </Card> -->
                <div class="h-fit box-border flex">

                    <div class="card__icon">
                        <BriefcaseCheck :size="20" />
                    </div>

                    <div>
                        Discover the power of TethysCloud, the cutting-edge web backend solution that revolutionizes the way you
                        handle
                        research
                        data. At the heart of Tethys lies our meticulously developed research data repository, which
                        leverages
                        state-of-the-art
                        CI/CD techniques to deliver a seamless and efficient experience.
                    </div>
                </div>
                <Card :title="'Interoperability'" :subtitle="'Import and export anything you want with open standards.'">
                    <SwapHorizontal :size="20" />
                </Card>
                <Card :title="'Community'" :subtitle="'Enjoy constant improvements from a thriving open-source community.'">
                    <AccountGroup :size="20" />
                </Card>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import Card from './Card.vue'

import SwapHorizontal from '@/Components/Icons/SwapHorizontal.vue';
import AccountGroup from '@/Components/Icons/AccountGroup.vue';
import BriefcaseCheck from '@/Components/Icons/BriefcaseCheck.vue'


export default {
    name: 'Page1',

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

<style lang="css" scoped>
.page {
    &__scroller {
        /* overflow-y: scroll; */
        margin-top: calc(var(--default-grid-baseline) * 8);
    }

    &__content {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--default-grid-baseline) * 6);
        justify-content: center;
        margin: calc(var(--default-grid-baseline) * 10) 0;
    }
}
.card__icon {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
}

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