timmal/app/pages/index.vue

<template>
  <div>
    <UPageHero
      title="Tímmál"
      description="A privacy-first work time tracking application. Track time spent on tickets, generate reports, and streamline your activity report workflow."
      :links="[
        {
          label: 'Get Started',
          to: '/dashboard',
          trailingIcon: 'i-lucide-arrow-right',
          size: 'xl',
        },
      ]"
    />

    <UPageSection
      id="features"
      title="Track the time you spend on your tickets."
      description="Built for developers and consultants who need to track billable hours across multiple projects and tasks. Seamlessly integrate with your existing workflow."
      :features="[
        {
          icon: 'i-lucide-timer',
          title: 'Smart Timer',
          description:
            'Start and stop timers on tasks with a single click. Timer persists across page refreshes and browser crashes, so you never lose tracking data.',
        },
        {
          icon: 'i-lucide-calendar-clock',
          title: 'Manual Entry',
          description:
            'Add time entries manually for forgotten work sessions. Automatic overlap detection ensures data integrity and prevents double-counting.',
        },
        {
          icon: 'i-lucide-table',
          title: 'Excel-Compatible Reports',
          description:
            'Generate time grid reports showing percentages of your workday (0.0-1.0). Copy directly into Excel for your CRA with tab-separated formatting.',
        },
        {
          icon: 'i-lucide-shield',
          title: 'Privacy-First',
          description:
            'OAuth authentication with Google or Microsoft. Your data stays yours with Pocketbase backend. No third-party tracking or analytics.',
        },
        {
          icon: 'i-lucide-workflow',
          title: 'Project Organization',
          description:
            'Group tasks by projects, track time per ticket, and view statistics. Tasks are sorted alphabetically within projects for easy navigation.',
        },
        {
          icon: 'i-lucide-shield-check',
          title: 'Automatic Validation & Data Integrity',
          description:
            'Prevents overlapping time entries, validates duration limits (max 24 hours), and ensures start times are before end times. Never submit invalid data to your reports.',
        },
      ]"
    />

    <UPageSection>
      <UPageCTA
        title="Ready to streamline your time tracking?"
        description="Stop juggling spreadsheets and timers. Tímmál handles the complexity so you can focus on your work."
        variant="subtle"
        class="bg-"
        :links="[
          {
            label: 'Start tracking',
            to: '/dashboard',
            trailingIcon: 'i-lucide-arrow-right',
            color: 'neutral',
          },
        ]"
      />
    </UPageSection>
  </div>
</template>

<script lang="ts" setup>
definePageMeta({
  layout: 'unauthenticated',
});
</script>