- 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/Page0.vue

@@ -0,0 +1,85 @@
+<template>
+    <!--<div class="video-wrapper">
+       <video ref="video" playsinline autoplay muted @ended="handleEnded">
+             <source :src="videoWebm" type="video/webm" />
+            <source :src="videoMp4" type="video/mp4" /> 
+            {{ videoFallbackText }}
+        </video>      
+    </div>-->
+    <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">
+                Discover the power of Tethys, 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>
+    </div>
+</template>
+
+<script lang="ts">
+// import { generateFilePath } from '@nextcloud/router';
+import CardBox from '@/Components/CardBox.vue';
+
+export default {
+    name: 'Page0',
+    components: {
+        CardBox
+    },
+    data() {
+        return {
+            // videoMp4: generateFilePath('firstrunwizard', 'img', 'Nextcloud.mp4'),
+            // videoWebm: generateFilePath('firstrunwizard', 'img', 'Nextcloud.webm'),
+        };
+    },
+    computed: {
+        // videoFallbackText() {
+        //     return 'Welcome to {cloudName}!', { cloudName: "test" };
+        // },
+    },
+
+    methods: {
+        handleEnded() {
+            this.$emit('next');
+        },
+    },
+};
+</script>
+
+<style scoped lang="css">
+/* video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+} */
+
+.video-wrapper {
+    background-color: var(--color-primary-element);
+}
+
+.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>