MOSE-Official-Website-20250712/src/views/Home.vue

<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';

const { t } = useI18n();
const router = useRouter();

const goToEcosystem = () => {
  router.push('/ecosystem');
};
</script>

<template>
  <div class="bg-background min-h-screen">
    <!-- Hero Section -->
    <section class="relative py-32 px-6 md:px-12 lg:px-24 bg-background-dark overflow-hidden">
      <div class="container mx-auto relative z-10">
        <div class="max-w-3xl mx-auto text-center">
          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-text mb-6 wow animate__animated animate__fadeInDown">
            {{ t('home.hero.title') }}
          </h1>
          <p class="text-lg md:text-xl text-text-secondary mb-8 wow animate__animated animate__fadeIn animate__delay-1s">
            {{ t('home.hero.subtitle') }}
          </p>
          <div class="flex flex-col sm:flex-row justify-center gap-4 wow animate__animated animate__fadeInUp animate__delay-1-5s">
            <button 
              @click="goToEcosystem"
              class="px-8 py-3 bg-primary text-text rounded-lg hover:bg-primary-dark transition-colors duration-300 shadow-button"
            >
              {{ t('home.cta.explore') }}
            </button>
            <a 
              href="#" 
              class="px-8 py-3 bg-transparent border border-primary-light text-primary-light rounded-lg hover:bg-primary-light hover:bg-opacity-10 transition-colors duration-300"
            >
              {{ t('home.cta.docs') }}
            </a>
          </div>
        </div>
      </div>
      
      <!-- Background Decoration -->
      <div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-10">
        <div class="absolute -top-24 -left-24 w-64 h-64 rounded-full bg-primary-light blur-3xl wow animate__animated animate__pulse animate__infinite"></div>
        <div class="absolute top-1/2 right-0 w-80 h-80 rounded-full bg-secondary blur-3xl wow animate__animated animate__pulse animate__infinite animate__delay-1s"></div>
        <div class="absolute -bottom-24 left-1/3 w-72 h-72 rounded-full bg-accent blur-3xl wow animate__animated animate__pulse animate__infinite animate__delay-2s"></div>
      </div>
    </section>
    
    <!-- Video Section -->
    <section class="py-16 px-6 md:px-12 lg:px-24">
      <div class="container mx-auto">
        <div class="max-w-4xl mx-auto bg-background-light rounded-2xl overflow-hidden shadow-card wow animate__animated animate__fadeIn animate__duration-2s">
          <video 
            src="/public/MOSEVideo.mp4" 
            controls 
            class="w-full h-auto"
            poster="/public/images.png"
          ></video>
        </div>
      </div>
    </section>
    
    <!-- Call to Action -->
    <section class="py-20 px-6 md:px-12 lg:px-24 bg-primary bg-opacity-10 relative overflow-hidden">
      <div class="container mx-auto relative z-10">
        <div class="max-w-3xl mx-auto text-center">
          <h2 class="text-2xl md:text-3xl font-bold text-text mb-4 wow animate__animated animate__fadeInUp">
            {{ t('ecosystem.join.title') }}
          </h2>
          <p class="text-text-secondary mb-8 wow animate__animated animate__fadeInUp animate__delay-0-5s">
            {{ t('ecosystem.join.subtitle') }}
          </p>
          <button 
            @click="goToEcosystem"
            class="inline-block px-8 py-3 bg-primary text-text rounded-lg hover:bg-primary-dark transition-colors duration-300 shadow-button wow animate__animated animate__fadeInUp animate__delay-1s"
          >
            {{ t('ecosystem.title') }}
          </button>
        </div>
      </div>
      
      <!-- Background Decoration -->
      <div class="absolute top-0 left-0 w-full h-full overflow-hidden opacity-30">
        <div class="absolute top-0 right-0 w-64 h-64 rounded-full bg-primary blur-3xl wow animate__animated animate__pulse animate__infinite"></div>
        <div class="absolute bottom-0 left-0 w-80 h-80 rounded-full bg-primary blur-3xl wow animate__animated animate__pulse animate__infinite animate__delay-1s"></div>
      </div>
    </section>
  </div>
</template>