Ziya/app/pages/index.vue

<template>
  <div class="min-h-screen bg-base-100 flex items-center justify-center">
    <div v-if="appStore.isLoading" class="text-center">
      <div class="loading loading-spinner loading-lg text-primary mb-4" />
      <h2 class="text-xl font-semibold text-base-content mb-2">Loading Ziya</h2>
      <p class="text-base-content/70">Initializing your trading environment...</p>
    </div>

    <div v-else-if="appStore.error" class="text-center max-w-md">
      <div class="alert alert-error mb-4">
        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <span>{{ appStore.error }}</span>
      </div>
      <button class="btn btn-primary" @click="retryInitialization">
        Try Again
      </button>
    </div>

    <div v-else class="text-center max-w-6xl px-4">
      <!-- Hero Section -->
      <div class="mb-12">
        <div class="w-24 h-24 mx-auto mb-6 bg-primary/10 rounded-full flex items-center justify-center">
          <svg class="w-12 h-12 text-primary" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
          </svg>
        </div>

        <!-- Main Title with Pronunciation -->
        <div class="mb-4">
          <h1 class="text-5xl md:text-6xl font-bold text-base-content mb-2">
            Ziya
          </h1>
          <p class="text-lg text-base-content/60 mb-6">
            <span class="font-medium">/dˤiˈjaːʔ/</span>, "zee‑yah" — <em>Proper noun, meaning "light"</em>
          </p>
        </div>

        <!-- Tagline -->
        <p class="text-2xl md:text-3xl text-base-content/80 mb-4 font-light">
          One stop shop trading solution
        </p>

        <!-- Brand Attribution -->
        <div class="mb-8">
          <p class="text-base text-base-content/70 font-medium">
            A <span class="text-primary font-semibold">bismillahDAO</span> creation
          </p>
        </div>
      </div>

      <!-- Prominent CTA Section -->
      <div class="bg-gradient-to-r from-primary/5 to-secondary/5 rounded-2xl p-8 mb-8">
        <!-- Primary CTA Button - Highly Visible -->
        <button
          class="btn btn-primary btn-lg px-12 py-4 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200"
          @click="navigateToLogin"
        >
          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
          </svg>
          Get Started
        </button>

        <!-- Tutorial Text -->
        <div class="mt-4">
          <p class="text-base-content/70 text-sm">
            Read the tutorial
          </p>
        </div>

        <!-- Secondary Action -->
        <div class="mt-4">
          <button class="btn btn-ghost btn-sm text-base-content/70 hover:text-base-content">
            Learn more about our features
          </button>
        </div>
      </div>

      <!-- App Version -->
      <div class="text-center">
        <p class="text-xs text-base-content/50">
          Version {{ appStore.appVersion }}
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useAppStore } from '~/stores/app';

// Use auth layout to prevent navbar from showing
definePageMeta({
  layout: 'auth',
});

const appStore = useAppStore();
const router = useRouter();

const navigateToLogin = () => {
  router.push('/login');
};

const retryInitialization = async () => {
  try {
    await appStore.initialize();
  }
  catch (error) {
    console.error('Retry failed:', error);
  }
};

onMounted(async () => {
  try {
    await appStore.initialize();
  }
  catch (error) {
    console.error('App initialization failed:', error);
  }
});
</script>