cameron/stock-management-demo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adds vastly improved landing page

Browse source
This commit is contained in:
Cameron Redmore 2025-04-25 19:51:44 +01:00
parent b400c3c2bb
commit d5d23f40de
1 changed files with 42 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/pages/LandingPage.vue
View file

@ -1,11 +1,17 @@
<template> <template>
<q-page class="landing-page column items-center q-pa-md"> <q-page class="landing-page column items-center q-pa-md wallpaper">
<div class="hero text-center q-pa-xl full-width"> <div class="hero text-center q-pa-xl full-width">
<h1 class="text-h3 text-weight-bold text-primary q-mb-sm"> <q-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 StylePoint Welcome to StylePoint
</h1> </h1>
<p class="text-h6 text-grey-8 q-mb-lg"> <p class="text-h6 text-white q-mb-lg">
The all-in-one tool designed for StyleTech Developers. An all-in-one tool designed for StyleTech Developers.
</p> </p>
</div> </div>
@ -13,7 +19,7 @@
class="features q-mt-xl q-pa-md text-center" class="features q-mt-xl q-pa-md text-center"
style="max-width: 800px; width: 100%;" style="max-width: 800px; width: 100%;"
> >
<h2 class="text-h4 text-weight-medium text-secondary q-mb-lg"> <h2 class="text-h4 text-weight-medium text-yellow q-mb-lg q-mt-sm">
Features Features
</h2> </h2>
<q-list <q-list
@ -39,10 +45,6 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { useQuasar } from 'quasar';
const $q = useQuasar();
const currentYear = ref(new Date().getFullYear());
const features = ref([ const features = ref([
'Automated Daily Reports', 'Automated Daily Reports',
@ -51,4 +53,34 @@ const features = ref([
'And more..?' 'And more..?'
]); ]);
</script> </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));
}
.wallpaper {
background: linear-gradient(
to top left,
#fdc730,
#ea2963,
#bd288a 50%,
#6e43ac,
#4763bf,
#16a3e8
);
}
.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>