77 lines
No EOL
1.7 KiB
Vue
77 lines
No EOL
1.7 KiB
Vue
<template>
|
|
<q-page class="landing-page column items-center q-pa-md bg-theme">
|
|
<div class="hero text-center q-pa-xl full-width">
|
|
<img
|
|
src="/stylepoint.png"
|
|
alt="StylePoint Logo"
|
|
class="logo q-mb-md"
|
|
style="max-width: 300px; width: 100%;"
|
|
>
|
|
<h1 class="text-h3 text-weight-bold text-yellow q-mb-sm">
|
|
Welcome to {{ productName }}
|
|
</h1>
|
|
<p class="text-h6 text-white q-mb-lg">
|
|
An all-in-one tool designed for StyleTech Developers.
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
class="features q-mt-xl q-pa-md text-center"
|
|
style="max-width: 800px; width: 100%;"
|
|
>
|
|
<h2 class="text-h4 text-weight-medium text-yellow q-mb-lg q-mt-sm">
|
|
Features
|
|
</h2>
|
|
<q-list
|
|
bordered
|
|
separator
|
|
class="rounded-borders"
|
|
dark
|
|
>
|
|
<q-item
|
|
v-for="(feature, index) in features"
|
|
:key="index"
|
|
class="q-pa-md"
|
|
>
|
|
<q-item-section>
|
|
<q-item-label class="text-body1">
|
|
{{ feature }}
|
|
</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</div>
|
|
</q-page>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const productName = process.env.PRODUCT_NAME;
|
|
|
|
const features = ref([
|
|
'Automated Daily Reports',
|
|
'Deep Mantis Integration',
|
|
'Easy Authentication',
|
|
'And more..?'
|
|
]);
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.hero {
|
|
text-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
|
|
}
|
|
|
|
.logo {
|
|
filter: drop-shadow(0 0 25px rgba(0, 0, 0, 0.5));
|
|
}
|
|
|
|
.features {
|
|
background-color: rgba(0, 0, 0, 0.25);
|
|
border-radius: 10px;
|
|
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
</style> |