Adds vastly improved landing page

src/pages/LandingPage.vue

@@ -1,11 +1,17 @@
 <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">
-      <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
       </h1>
-      <p class="text-h6 text-grey-8 q-mb-lg">
-        The all-in-one tool designed for StyleTech Developers.
+      <p class="text-h6 text-white q-mb-lg">
+        An all-in-one tool designed for StyleTech Developers.
       </p>
     </div>
 
@@ -13,7 +19,7 @@
       class="features q-mt-xl q-pa-md text-center"
       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
       </h2>
       <q-list
@@ -39,10 +45,6 @@
 
 <script setup>
 import { ref } from 'vue';
-import { useQuasar } from 'quasar';
-
-const $q = useQuasar();
-const currentYear = ref(new Date().getFullYear());
 
 const features = ref([
   'Automated Daily Reports',
@@ -52,3 +54,33 @@ const features = ref([
 ]);
 
 </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>