<template>
  <q-page class="landing-page column items-center q-pa-md">
    <div class="hero text-center q-pa-xl full-width">
      <h1 class="text-h3 text-weight-bold text-primary 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>
    </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-secondary q-mb-lg">
        Features
      </h2>
      <q-list
        bordered
        separator
        class="rounded-borders"
      >
        <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';
import { useQuasar } from 'quasar';

const $q = useQuasar();
const currentYear = ref(new Date().getFullYear());

const features = ref([
  'Auatomated Daily Reports',
  'Deep Mantis Integration',
  'Easy Authentication',
  'And more..?'
]);

</script>