You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
4.1 KiB
90 lines
4.1 KiB
<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>
|