@ -23,7 +23,7 @@ const projects = [
{ {
id : 1 , id : 1 ,
name : 'MOSE Swap' , name : 'MOSE Swap' ,
description : 'Decentralized exchange with low fees and high liquidity' ,
description : t ( 'projects.mose_swap' ) ,
category : 'defi' , category : 'defi' ,
image : '/public/images.png' , image : '/public/images.png' ,
url : 'https://moseswap.io' , url : 'https://moseswap.io' ,
@ -32,7 +32,7 @@ const projects = [
{ {
id : 2 , id : 2 ,
name : 'MOSE NFT Marketplace' , name : 'MOSE NFT Marketplace' ,
description : 'Trade unique digital assets on the MOSE blockchain' ,
description : t ( 'projects.mose_nft' ) ,
category : 'nft' , category : 'nft' ,
image : '/public/images.png' , image : '/public/images.png' ,
url : 'https://mosenft.io' , url : 'https://mosenft.io' ,
@ -41,7 +41,7 @@ const projects = [
{ {
id : 3 , id : 3 ,
name : 'MOSE DAO' , name : 'MOSE DAO' ,
description : 'Decentralized governance for the MOSE ecosystem' ,
description : t ( 'projects.mose_dao' ) ,
category : 'dao' , category : 'dao' ,
image : '/public/images.png' , image : '/public/images.png' ,
url : 'https://mosedao.io' , url : 'https://mosedao.io' ,
@ -50,7 +50,7 @@ const projects = [
{ {
id : 4 , id : 4 ,
name : 'MOSE Gaming' , name : 'MOSE Gaming' ,
description : 'Play-to-earn games built on MOSE' ,
description : t ( 'projects.mose_gaming' ) ,
category : 'gaming' , category : 'gaming' ,
image : '/public/images.png' , image : '/public/images.png' ,
url : 'https://mosegaming.io' , url : 'https://mosegaming.io' ,
@ -59,7 +59,7 @@ const projects = [
{ {
id : 5 , id : 5 ,
name : 'MOSE Bridge' , name : 'MOSE Bridge' ,
description : 'Cross-chain bridge for MOSE assets' ,
description : t ( 'projects.mose_bridge' ) ,
category : 'infrastructure' , category : 'infrastructure' ,
image : '/public/images.png' , image : '/public/images.png' ,
url : 'https://mosebridge.io' , url : 'https://mosebridge.io' ,
@ -68,7 +68,7 @@ const projects = [
{ {
id : 6 , id : 6 ,
name : 'MOSE Social' , name : 'MOSE Social' ,
description : 'Decentralized social network' ,
description : t ( 'projects.mose_social' ) ,
category : 'social' , category : 'social' ,
image : '/public/images.png' , image : '/public/images.png' ,
url : 'https://mosesocial.io' , url : 'https://mosesocial.io' ,
@ -77,7 +77,7 @@ const projects = [
{ {
id : 7 , id : 7 ,
name : 'MOSE Lending' , name : 'MOSE Lending' ,
description : 'Decentralized lending protocol' ,
description : t ( 'projects.mose_lending' ) ,
category : 'defi' , category : 'defi' ,
image : '/public/images.png' , image : '/public/images.png' ,
url : 'https://moselending.io' , url : 'https://moselending.io' ,
@ -86,7 +86,7 @@ const projects = [
{ {
id : 8 , id : 8 ,
name : 'MOSE Staking' , name : 'MOSE Staking' ,
description : 'Stake your MOSE tokens for rewards' ,
description : t ( 'projects.mose_staking' ) ,
category : 'defi' , category : 'defi' ,
image : '/public/images.png' , image : '/public/images.png' ,
url : 'https://mosestaking.io' , url : 'https://mosestaking.io' ,
@ -160,10 +160,10 @@ const selectCategory = (category: string) => {
< section class = "relative py-24 px-6 md:px-12 lg:px-24 bg-background-dark overflow-hidden" > < 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 = "container mx-auto relative z-10" >
< div class = "max-w-3xl mx-auto text-center" > < 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" >
< h1 class = "text-4xl md:text-5xl lg:text-6xl font-bold text-text mb-6 wow animate__animated animate__fadeInDown " >
{ { t ( 'ecosystem.title' ) } } { { t ( 'ecosystem.title' ) } }
< / h1 > < / h1 >
< p class = "text-lg md:text-xl text-text-secondary mb-8" >
< p class = "text-lg md:text-xl text-text-secondary mb-8 wow animate__animated animate__fadeIn animate__delay-0-5s " >
{ { t ( 'ecosystem.subtitle' ) } } { { t ( 'ecosystem.subtitle' ) } }
< / p > < / p >
< / div > < / div >
@ -171,9 +171,9 @@ const selectCategory = (category: string) => {
<!-- Background Decoration -- > <!-- Background Decoration -- >
< div class = "absolute top-0 left-0 w-full h-full overflow-hidden opacity-10" > < 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" > < / div >
< div class = "absolute top-1/2 right-0 w-80 h-80 rounded-full bg-secondary blur-3xl" > < / div >
< div class = "absolute -bottom-24 left-1/3 w-72 h-72 rounded-full bg-accent blur-3xl" > < / div >
< 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 > < / div >
< / section > < / section >
@ -181,19 +181,23 @@ const selectCategory = (category: string) => {
< section class = "py-16 px-6 md:px-12 lg:px-24" > < section class = "py-16 px-6 md:px-12 lg:px-24" >
< div class = "container mx-auto" > < div class = "container mx-auto" >
< div class = "flex justify-between items-center mb-10" > < div class = "flex justify-between items-center mb-10" >
< h2 class = "text-2xl md:text-3xl font-bold text-text" >
< h2 class = "text-2xl md:text-3xl font-bold text-text wow animate__animated animate__fadeInUp " >
{ { t ( 'ecosystem.projects.featured' ) } } { { t ( 'ecosystem.projects.featured' ) } }
< / h2 > < / h2 >
< a href = "#all-projects" class = "text-primary-light hover:text-primary-dark transition-colors duration-200" >
< 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' ) } } { { t ( 'ecosystem.projects.viewAll' ) } }
< / a > < / a >
< / div > < / div >
< div class = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" > < div class = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" >
< div < div
v - for = "project in featuredProjects"
v - for = "( project, index) in featuredProjects"
: key = "project.id" : key = "project.id"
class = "bg-background-light rounded-xl overflow-hidden shadow-card hover:transform hover:scale-105 transition-all duration-300"
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" / > < img :src ="project.image" :alt ="project.name" class = "w-full h-48 object-cover" / >
< div class = "p-6" > < div class = "p-6" >
@ -221,12 +225,12 @@ const selectCategory = (category: string) => {
<!-- All Projects Section -- > <!-- All Projects Section -- >
< section id = "all-projects" class = "py-16 px-6 md:px-12 lg:px-24 bg-background-light" > < section id = "all-projects" class = "py-16 px-6 md:px-12 lg:px-24 bg-background-light" >
< div class = "container mx-auto" > < div class = "container mx-auto" >
< h2 class = "text-2xl md:text-3xl font-bold text-text mb-10" >
< h2 class = "text-2xl md:text-3xl font-bold text-text mb-10 wow animate__animated animate__fadeInUp " >
{ { t ( 'ecosystem.title' ) } } { { t ( 'ecosystem.title' ) } }
< / h2 > < / h2 >
<!-- Categories Filter -- > <!-- Categories Filter -- >
< div class = "flex flex-wrap gap-2 mb-10" >
< div class = "flex flex-wrap gap-2 mb-10 wow animate__animated animate__fadeInUp animate__delay-0-5s " >
< button < button
v - for = "category in categories" v - for = "category in categories"
: key = "category.id" : key = "category.id"
@ -243,9 +247,14 @@ const selectCategory = (category: string) => {
<!-- Projects Grid -- > <!-- Projects Grid -- >
< div class = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" > < div class = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" >
< div < div
v - for = "project in filteredProjects"
v - for = "( project, index) in filteredProjects"
: key = "project.id" : key = "project.id"
class = "bg-background rounded-xl overflow-hidden shadow-card hover:shadow-lg transition-all duration-300"
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" / > < img :src ="project.image" :alt ="project.name" class = "w-full h-40 object-cover" / >
< div class = "p-5" > < div class = "p-5" >
@ -274,22 +283,29 @@ const selectCategory = (category: string) => {
< section class = "py-16 px-6 md:px-12 lg:px-24" > < section class = "py-16 px-6 md:px-12 lg:px-24" >
< div class = "container mx-auto" > < div class = "container mx-auto" >
< div class = "text-center mb-12" > < div class = "text-center mb-12" >
< h2 class = "text-2xl md:text-3xl font-bold text-text mb-4" >
< h2 class = "text-2xl md:text-3xl font-bold text-text mb-4 wow animate__animated animate__fadeInUp " >
{ { t ( 'ecosystem.partners.title' ) } } { { t ( 'ecosystem.partners.title' ) } }
< / h2 > < / h2 >
< p class = "text-text-secondary max-w-2xl mx-auto" >
< p class = "text-text-secondary max-w-2xl mx-auto wow animate__animated animate__fadeInUp animate__delay-0-5s " >
{ { t ( 'ecosystem.partners.subtitle' ) } } { { t ( 'ecosystem.partners.subtitle' ) } }
< / p > < / p >
< / div > < / div >
< div class = "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8" > < div class = "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8" >
< a < a
v - for = "partner in partners"
v - for = "( partner, index) in partners"
: key = "partner.id" : key = "partner.id"
: href = "partner.url" : href = "partner.url"
target = "_blank" target = "_blank"
rel = "noopener noreferrer" rel = "noopener noreferrer"
class = "flex items-center justify-center p-6 bg-background-light rounded-lg hover:bg-background-dark transition-colors duration-300"
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" / > < img :src ="partner.logo" :alt ="partner.name" class = "max-h-12 max-w-full" / >
< / a > < / a >
@ -301,15 +317,15 @@ const selectCategory = (category: string) => {
< section class = "py-20 px-6 md:px-12 lg:px-24 bg-primary bg-opacity-10 relative overflow-hidden" > < 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 = "container mx-auto relative z-10" >
< div class = "max-w-3xl mx-auto text-center" > < div class = "max-w-3xl mx-auto text-center" >
< h2 class = "text-2xl md:text-3xl font-bold text-text mb-4" >
< h2 class = "text-2xl md:text-3xl font-bold text-text mb-4 wow animate__animated animate__fadeInUp " >
{ { t ( 'ecosystem.join.title' ) } } { { t ( 'ecosystem.join.title' ) } }
< / h2 > < / h2 >
< p class = "text-text-secondary mb-8" >
< p class = "text-text-secondary mb-8 wow animate__animated animate__fadeInUp animate__delay-0-5s " >
{ { t ( 'ecosystem.join.subtitle' ) } } { { t ( 'ecosystem.join.subtitle' ) } }
< / p > < / p >
< a < a
href = "#" href = "#"
class = "inline-block px-8 py-3 bg-primary text-text rounded-lg hover:bg-primary-dark transition-colors duration-300 shadow-button"
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' ) } } { { t ( 'ecosystem.join.cta' ) } }
< / a > < / a >
@ -318,68 +334,68 @@ const selectCategory = (category: string) => {
<!-- Background Decoration -- > <!-- Background Decoration -- >
< div class = "absolute top-0 left-0 w-full h-full overflow-hidden opacity-30" > < 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" > < / div >
< div class = "absolute bottom-0 left-0 w-80 h-80 rounded-full bg-primary blur-3xl" > < / div >
< 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 > < / div >
< / section > < / section >
<!-- Developer Resources -- > <!-- Developer Resources -- >
< section class = "py-16 px-6 md:px-12 lg:px-24" > < section class = "py-16 px-6 md:px-12 lg:px-24" >
< div class = "container mx-auto" > < div class = "container mx-auto" >
< h2 class = "text-2xl md:text-3xl font-bold text-text mb-10" >
< h2 class = "text-2xl md:text-3xl font-bold text-text mb-10 wow animate__animated animate__fadeInUp " >
{ { t ( 'ecosystem.resources.title' ) } } { { t ( 'ecosystem.resources.title' ) } }
< / h2 > < / h2 >
< div class = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6" > < div class = "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6" >
< a < a
href = "#" href = "#"
class = "bg-background-light p-6 rounded-xl flex flex-col items-center text-center hover:bg-background-dark transition-colors duration-300"
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" > < 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" / > < 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 > < / svg >
< h3 class = "text-lg font-bold text-text mb-2" > { { t ( 'ecosystem.resources.docs' ) } } < / h3 > < h3 class = "text-lg font-bold text-text mb-2" > { { t ( 'ecosystem.resources.docs' ) } } < / h3 >
< p class = "text-text-secondary text-sm" > < p class = "text-text-secondary text-sm" >
Comprehensive documentation for developers
{ { t ( 'ecosystem.resources.docs' ) } }
< / p > < / p >
< / a > < / a >
< a < a
href = "#" href = "#"
class = "bg-background-light p-6 rounded-xl flex flex-col items-center text-center hover:bg-background-dark transition-colors duration-300"
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" > < 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" / > < path stroke -linecap = " round " stroke -linejoin = " round " stroke -width = " 2 " d = "M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" / >
< / svg > < / svg >
< h3 class = "text-lg font-bold text-text mb-2" > { { t ( 'ecosystem.resources.github' ) } } < / h3 > < h3 class = "text-lg font-bold text-text mb-2" > { { t ( 'ecosystem.resources.github' ) } } < / h3 >
< p class = "text-text-secondary text-sm" > < p class = "text-text-secondary text-sm" >
Open source code repositories
{ { t ( 'ecosystem.resources.github' ) } }
< / p > < / p >
< / a > < / a >
< a < a
href = "#" href = "#"
class = "bg-background-light p-6 rounded-xl flex flex-col items-center text-center hover:bg-background-dark transition-colors duration-300"
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" > < 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" / > < 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 > < / svg >
< h3 class = "text-lg font-bold text-text mb-2" > { { t ( 'ecosystem.resources.grants' ) } } < / h3 > < h3 class = "text-lg font-bold text-text mb-2" > { { t ( 'ecosystem.resources.grants' ) } } < / h3 >
< p class = "text-text-secondary text-sm" > < p class = "text-text-secondary text-sm" >
Funding for innovative projects
{ { t ( 'ecosystem.resources.grants' ) } }
< / p > < / p >
< / a > < / a >
< a < a
href = "#" href = "#"
class = "bg-background-light p-6 rounded-xl flex flex-col items-center text-center hover:bg-background-dark transition-colors duration-300"
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" > < 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" / > < 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 > < / svg >
< h3 class = "text-lg font-bold text-text mb-2" > { { t ( 'ecosystem.resources.community' ) } } < / h3 > < h3 class = "text-lg font-bold text-text mb-2" > { { t ( 'ecosystem.resources.community' ) } } < / h3 >
< p class = "text-text-secondary text-sm" > < p class = "text-text-secondary text-sm" >
Join our developer community
{ { t ( 'ecosystem.resources.community' ) } }
< / p > < / p >
< / a > < / a >
< / div > < / div >
hflllll
5 months ago
