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.
412 lines
16 KiB
412 lines
16 KiB
<script setup lang="ts">
|
|
import { ref, computed } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const { t } = useI18n();
|
|
|
|
// 当前选中的分类
|
|
const selectedCategory = ref('all');
|
|
|
|
// 分类列表
|
|
const categories = [
|
|
{ id: 'all', name: t('ecosystem.categories.all') },
|
|
{ id: 'defi', name: t('ecosystem.categories.defi') },
|
|
{ id: 'nft', name: t('ecosystem.categories.nft') },
|
|
{ id: 'dao', name: t('ecosystem.categories.dao') },
|
|
{ id: 'gaming', name: t('ecosystem.categories.gaming') },
|
|
{ id: 'infrastructure', name: t('ecosystem.categories.infrastructure') },
|
|
{ id: 'social', name: t('ecosystem.categories.social') },
|
|
];
|
|
|
|
// 项目数据
|
|
const projects = [
|
|
{
|
|
id: 1,
|
|
name: 'MOSE Swap',
|
|
description: t('projects.mose_swap'),
|
|
category: 'defi',
|
|
image: '/public/images.png',
|
|
url: 'https://moseswap.io',
|
|
featured: true
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'MOSE NFT Marketplace',
|
|
description: t('projects.mose_nft'),
|
|
category: 'nft',
|
|
image: '/public/images.png',
|
|
url: 'https://mosenft.io',
|
|
featured: true
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'MOSE DAO',
|
|
description: t('projects.mose_dao'),
|
|
category: 'dao',
|
|
image: '/public/images.png',
|
|
url: 'https://mosedao.io',
|
|
featured: true
|
|
},
|
|
{
|
|
id: 4,
|
|
name: 'MOSE Gaming',
|
|
description: t('projects.mose_gaming'),
|
|
category: 'gaming',
|
|
image: '/public/images.png',
|
|
url: 'https://mosegaming.io',
|
|
featured: false
|
|
},
|
|
{
|
|
id: 5,
|
|
name: 'MOSE Bridge',
|
|
description: t('projects.mose_bridge'),
|
|
category: 'infrastructure',
|
|
image: '/public/images.png',
|
|
url: 'https://mosebridge.io',
|
|
featured: true
|
|
},
|
|
{
|
|
id: 6,
|
|
name: 'MOSE Social',
|
|
description: t('projects.mose_social'),
|
|
category: 'social',
|
|
image: '/public/images.png',
|
|
url: 'https://mosesocial.io',
|
|
featured: false
|
|
},
|
|
{
|
|
id: 7,
|
|
name: 'MOSE Lending',
|
|
description: t('projects.mose_lending'),
|
|
category: 'defi',
|
|
image: '/public/images.png',
|
|
url: 'https://moselending.io',
|
|
featured: false
|
|
},
|
|
{
|
|
id: 8,
|
|
name: 'MOSE Staking',
|
|
description: t('projects.mose_staking'),
|
|
category: 'defi',
|
|
image: '/public/images.png',
|
|
url: 'https://mosestaking.io',
|
|
featured: false
|
|
}
|
|
];
|
|
|
|
// 合作伙伴数据
|
|
const partners = [
|
|
{
|
|
id: 1,
|
|
name: 'Partner 1',
|
|
logo: '/public/images.png',
|
|
url: 'https://partner1.com'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Partner 2',
|
|
logo: '/public/images.png',
|
|
url: 'https://partner2.com'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Partner 3',
|
|
logo: '/public/images.png',
|
|
url: 'https://partner3.com'
|
|
},
|
|
{
|
|
id: 4,
|
|
name: 'Partner 4',
|
|
logo: '/public/images.png',
|
|
url: 'https://partner4.com'
|
|
},
|
|
{
|
|
id: 5,
|
|
name: 'Partner 5',
|
|
logo: '/public/images.png',
|
|
url: 'https://partner5.com'
|
|
},
|
|
{
|
|
id: 6,
|
|
name: 'Partner 6',
|
|
logo: '/public/images.png',
|
|
url: 'https://partner6.com'
|
|
}
|
|
];
|
|
|
|
// 筛选项目
|
|
const filteredProjects = computed(() => {
|
|
if (selectedCategory.value === 'all') {
|
|
return projects;
|
|
} else {
|
|
return projects.filter(project => project.category === selectedCategory.value);
|
|
}
|
|
});
|
|
|
|
// 特色项目
|
|
const featuredProjects = computed(() => {
|
|
return projects.filter(project => project.featured);
|
|
});
|
|
|
|
// 选择分类
|
|
const selectCategory = (category: string) => {
|
|
selectedCategory.value = category;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-background min-h-screen">
|
|
<!-- Hero Section -->
|
|
<section class="relative py-24 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('ecosystem.title') }}
|
|
</h1>
|
|
<p class="text-lg md:text-xl text-text-secondary mb-8 wow animate__animated animate__fadeIn animate__delay-0-5s">
|
|
{{ t('ecosystem.subtitle') }}
|
|
</p>
|
|
</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>
|
|
|
|
<!-- Featured Projects Section -->
|
|
<section class="py-16 px-6 md:px-12 lg:px-24">
|
|
<div class="container mx-auto">
|
|
<div class="flex justify-between items-center mb-10">
|
|
<h2 class="text-2xl md:text-3xl font-bold text-text wow animate__animated animate__fadeInUp">
|
|
{{ t('ecosystem.projects.featured') }}
|
|
</h2>
|
|
<a href="#all-projects" class="text-primary-light hover:text-primary-dark transition-colors duration-200 wow animate__animated animate__fadeInUp">
|
|
{{ t('ecosystem.projects.viewAll') }}
|
|
</a>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<div
|
|
v-for="(project, index) in featuredProjects"
|
|
:key="project.id"
|
|
class="bg-background-light rounded-xl overflow-hidden shadow-card hover:transform hover:scale-105 transition-all duration-300 wow animate__animated animate__fadeInUp"
|
|
:class="{
|
|
'animate__delay-0-5s': index === 1,
|
|
'animate__delay-1s': index === 2
|
|
}"
|
|
>
|
|
<img :src="project.image" :alt="project.name" class="w-full h-48 object-cover" />
|
|
<div class="p-6">
|
|
<h3 class="text-xl font-bold text-text mb-2">{{ project.name }}</h3>
|
|
<p class="text-text-secondary mb-4">{{ project.description }}</p>
|
|
<div class="flex justify-between items-center">
|
|
<span class="px-3 py-1 bg-background text-primary-light text-xs rounded-full">
|
|
{{ t(`ecosystem.categories.${project.category}`) }}
|
|
</span>
|
|
<a
|
|
:href="project.url"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="text-primary-light hover:text-primary-dark transition-colors duration-200"
|
|
>
|
|
{{ t('ecosystem.projects.learnMore') }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- All Projects Section -->
|
|
<section id="all-projects" class="py-16 px-6 md:px-12 lg:px-24 bg-background-light">
|
|
<div class="container mx-auto">
|
|
<h2 class="text-2xl md:text-3xl font-bold text-text mb-10 wow animate__animated animate__fadeInUp">
|
|
{{ t('ecosystem.title') }}
|
|
</h2>
|
|
|
|
<!-- Categories Filter -->
|
|
<div class="flex flex-wrap gap-2 mb-10 wow animate__animated animate__fadeInUp animate__delay-0-5s">
|
|
<button
|
|
v-for="category in categories"
|
|
:key="category.id"
|
|
@click="selectCategory(category.id)"
|
|
class="px-4 py-2 rounded-full text-sm transition-colors duration-200"
|
|
:class="selectedCategory === category.id
|
|
? 'bg-primary text-text'
|
|
: 'bg-background-dark text-text-secondary hover:bg-background hover:text-text'"
|
|
>
|
|
{{ category.name }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Projects Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
|
<div
|
|
v-for="(project, index) in filteredProjects"
|
|
:key="project.id"
|
|
class="bg-background rounded-xl overflow-hidden shadow-card hover:shadow-lg transition-all duration-300 wow animate__animated animate__fadeIn"
|
|
:class="{
|
|
'animate__delay-0-5s': index % 4 === 1,
|
|
'animate__delay-1s': index % 4 === 2,
|
|
'animate__delay-1-5s': index % 4 === 3
|
|
}"
|
|
>
|
|
<img :src="project.image" :alt="project.name" class="w-full h-40 object-cover" />
|
|
<div class="p-5">
|
|
<h3 class="text-lg font-bold text-text mb-2">{{ project.name }}</h3>
|
|
<p class="text-text-secondary text-sm mb-4">{{ project.description }}</p>
|
|
<div class="flex justify-between items-center">
|
|
<span class="px-3 py-1 bg-background-dark text-primary-light text-xs rounded-full">
|
|
{{ t(`ecosystem.categories.${project.category}`) }}
|
|
</span>
|
|
<a
|
|
:href="project.url"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="text-primary-light hover:text-primary-dark transition-colors duration-200 text-sm"
|
|
>
|
|
{{ t('ecosystem.projects.learnMore') }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Partners Section -->
|
|
<section class="py-16 px-6 md:px-12 lg:px-24">
|
|
<div class="container mx-auto">
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-2xl md:text-3xl font-bold text-text mb-4 wow animate__animated animate__fadeInUp">
|
|
{{ t('ecosystem.partners.title') }}
|
|
</h2>
|
|
<p class="text-text-secondary max-w-2xl mx-auto wow animate__animated animate__fadeInUp animate__delay-0-5s">
|
|
{{ t('ecosystem.partners.subtitle') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8">
|
|
<a
|
|
v-for="(partner, index) in partners"
|
|
:key="partner.id"
|
|
:href="partner.url"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="flex items-center justify-center p-6 bg-background-light rounded-lg hover:bg-background-dark transition-colors duration-300 wow animate__animated animate__fadeIn"
|
|
:class="{
|
|
'animate__delay-0-5s': index % 6 === 1,
|
|
'animate__delay-1s': index % 6 === 2,
|
|
'animate__delay-1-5s': index % 6 === 3,
|
|
'animate__delay-2s': index % 6 === 4,
|
|
'animate__delay-2-5s': index % 6 === 5
|
|
}"
|
|
>
|
|
<img :src="partner.logo" :alt="partner.name" class="max-h-12 max-w-full" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Join Ecosystem CTA -->
|
|
<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>
|
|
<a
|
|
href="#"
|
|
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.join.cta') }}
|
|
</a>
|
|
</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>
|
|
|
|
<!-- Developer Resources -->
|
|
<section class="py-16 px-6 md:px-12 lg:px-24">
|
|
<div class="container mx-auto">
|
|
<h2 class="text-2xl md:text-3xl font-bold text-text mb-10 wow animate__animated animate__fadeInUp">
|
|
{{ t('ecosystem.resources.title') }}
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<a
|
|
href="#"
|
|
class="bg-background-light p-6 rounded-xl flex flex-col items-center text-center hover:bg-background-dark transition-colors duration-300 wow animate__animated animate__zoomIn"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-primary-light mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
|
</svg>
|
|
<h3 class="text-lg font-bold text-text mb-2">{{ t('ecosystem.resources.docs') }}</h3>
|
|
<p class="text-text-secondary text-sm">
|
|
{{ t('ecosystem.resources.docs') }}
|
|
</p>
|
|
</a>
|
|
|
|
<a
|
|
href="#"
|
|
class="bg-background-light p-6 rounded-xl flex flex-col items-center text-center hover:bg-background-dark transition-colors duration-300 wow animate__animated animate__zoomIn animate__delay-0-5s"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-primary-light mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
|
|
</svg>
|
|
<h3 class="text-lg font-bold text-text mb-2">{{ t('ecosystem.resources.github') }}</h3>
|
|
<p class="text-text-secondary text-sm">
|
|
{{ t('ecosystem.resources.github') }}
|
|
</p>
|
|
</a>
|
|
|
|
<a
|
|
href="#"
|
|
class="bg-background-light p-6 rounded-xl flex flex-col items-center text-center hover:bg-background-dark transition-colors duration-300 wow animate__animated animate__zoomIn animate__delay-1s"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-primary-light mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<h3 class="text-lg font-bold text-text mb-2">{{ t('ecosystem.resources.grants') }}</h3>
|
|
<p class="text-text-secondary text-sm">
|
|
{{ t('ecosystem.resources.grants') }}
|
|
</p>
|
|
</a>
|
|
|
|
<a
|
|
href="#"
|
|
class="bg-background-light p-6 rounded-xl flex flex-col items-center text-center hover:bg-background-dark transition-colors duration-300 wow animate__animated animate__zoomIn animate__delay-1-5s"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-primary-light mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
|
</svg>
|
|
<h3 class="text-lg font-bold text-text mb-2">{{ t('ecosystem.resources.community') }}</h3>
|
|
<p class="text-text-secondary text-sm">
|
|
{{ t('ecosystem.resources.community') }}
|
|
</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* 添加一些额外的动画效果 */
|
|
.hover\:transform:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
</style>
|