Ziya/app/pages/index.vue

<template>
  <div class="min-h-screen bg-base-100 flex items-center justify-center">
    <div 
      v-if="isLoading" 
      key="loading-state"
      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="error" 
      key="error-state"
      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>{{ error }}</span>
      </div>
      <button 
        class="btn btn-primary" 
        @click="retryInitialization"
      >
        Try Again
      </button>
    </div>

    <div 
      v-else 
      key="main-content"
      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 {{ appVersion }}
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

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

const router = useRouter();

// Local reactive state instead of accessing store immediately
const isLoading = ref(true);
const error = ref(null);
const appVersion = ref('1.0.0');

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

const retryInitialization = async () => {
  isLoading.value = true;
  error.value = null;
  
  try {
    // Only import and use store after mount
    const { useAppStore } = await import('../stores/app');
    const appStore = useAppStore();
    await appStore.initialize();
    appVersion.value = appStore.appVersion;
    isLoading.value = false;
  } catch (err) {
    error.value = err instanceof Error ? err.message : 'Failed to initialize app';
    isLoading.value = false;
  }
};

onMounted(async () => {
  // Only access store after component is mounted (client-side only)
  if (import.meta.client) {
    try {
      const { useAppStore } = await import('../stores/app');
      const appStore = useAppStore();
      await appStore.initialize();
      appVersion.value = appStore.appVersion;
      isLoading.value = false;
    } catch (err) {
      error.value = err instanceof Error ? err.message : 'Failed to initialize app';
      isLoading.value = false;
      console.error('App initialization failed:', err);
    }
  }
});
</script>