- added NcModal.vue, NcActions.vue, NcButton.vue, FirstrunWizard.vue, Card.vue, Page0.vue, Page1.vue, Page2.vue, Page3.vue and some icons
Some checks failed
CI Pipeline / japa-tests (push) Failing after 51s

- 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
This commit is contained in:
Kaimbacher 2023-12-21 09:30:21 +01:00
parent cefd9081ae
commit 87e9314b00
25 changed files with 3475 additions and 401 deletions

View file

@ -1,24 +1,38 @@
<template>
<div class="page__wrapper">
<div id="page__wrapper" class="flex flex-col justify-between min-h-520">
<div class="page__scroller first-page">
<h2 class="page__heading">
{{ t('firstrunwizard', 'A collaboration platform that puts you in control') }}
<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="t('firstrunwizard', 'Privacy')"
:subtitle="t('firstrunwizard', 'Host your data and files where you decide.')">
<!-- <Card :title="'Privacy'"
:subtitle="'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.')">
<Card :title="'Productivity'"
:subtitle="'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.')">
</Card> -->
<div class="max-w-60 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="t('firstrunwizard', 'Community')"
:subtitle="t('firstrunwizard', 'Enjoy constant improvements from a thriving open-source community.')">
<Card :title="'Community'" :subtitle="'Enjoy constant improvements from a thriving open-source community.'">
<AccountGroup :size="20" />
</Card>
</div>
@ -26,21 +40,18 @@
</div>
</template>
<script>
<script lang="ts">
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'
import SwapHorizontal from '@/Components/Icons/SwapHorizontal.vue';
import AccountGroup from '@/Components/Icons/AccountGroup.vue'
export default {
name: 'Page1',
components: {
Card,
Lock,
BriefcaseCheck,
Card,
SwapHorizontal,
AccountGroup,
},
@ -48,7 +59,25 @@ export default {
</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;
}
}
.card__icon {
display: flex;
flex: 0 0 44px;
align-items: center;
}
.first-page {
margin-top: 100px;