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

<!--
  - @copyright Copyright (c) 2023 Arno Kaimbacher <arno.kaimbacher@outlook.at>
  -  -
  - @license GNU AGPL version 3 or any later version
  -
  - This program is free software: you can redistribute it and/or modify
  - it under the terms of the GNU Affero General Public License as
  - published by the Free Software Foundation, either version 3 of the
  - License, or (at your option) any later version.
  -
  - This program is distributed in the hope that it will be useful,
  - but WITHOUT ANY WARRANTY; without even the implied warranty of
  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  - GNU Affero General Public License for more details.
  -
  - You should have received a copy of the GNU Affero General Public License
  - along with this program. If not, see <http://www.gnu.org/licenses/>.
  -
  -->

<template>
    <div id="page__wrapper" class="flex flex-col justify-between min-h-520">
        <div class="page__scroller">
            <h2 id="page__heading" class="text-xl font-bold leading-tight dark:text-slate-400 text-center">
                {{ 'Seamless integration with your devices.' }}
            </h2>
            <p id="page__subtitle" class="max-w-md m-auto text-center">
                {{ subtitleText }}
            </p>
            <div class="page__content">
                <!-- <AppStoreBadge type="android" />
                <AppStoreBadge type="ios" /> -->
                <Card :href="desktop" :title="'Desktop app ↗'" :subtitle="'Download For Windows, Mac OS and Linux.'" />
                <!-- <Card :href="syncClientsUrl" :title="'Calendar and contacts ↗'"
                    :subtitle="'Connect your calendar and contacts with your devices.'" /> -->
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import Card from './Card.vue';
// import AppStoreBadge from './AppStoreBadge.vue';
// import { generateUrl } from '@nextcloud/router';
import { loadState } from '@/utils/initialState';

const desktop = loadState('firstrunwizard', 'desktop'); //'https://gitea.geologie.ac.at/geolba/tethys.backend'
// const profileEnabledByDefault = loadState('settings', 'profileEnabledByDefault'); //true

export default {
    name: 'Page2',

    components: {
        Card,
        // AppStoreBadge,
    },

    data() {
        return {
            subtitleText: 'Sync your files across your devices with the desktop and mobile apps, and connect your calendar and contacts.',
            // syncClientsUrl: generateUrl('settings/user/sync-clients'),
            desktop,
        };
    },
};
</script>

<style lang="css" scoped>
/* @import 'pageStyles'; */
.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;
    }
}
</style>