- added NcModal.vue, NcActions.vue, NcButton.vue, FirstrunWizard.vue, Card.vue, Page0.vue, Page1.vue, Page2.vue, Page3.vue and some icons

- added lime color inside tailwind.config.js
- added some utilities scripts needed for components
- npm updates
- changed postcss.config.js for nesting css styles
- added about function to NavBar.vue

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

@@ -0,0 +1,88 @@
+<!--
+  - @copyright Copyright (c) 2023 Arno Kaimbacher <arno.kaimbacher@outlook.at>
+  -
+  - @author Marco Ambrosini <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');
+
+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>