diff --git a/public/img_thumb.png b/public/img_thumb.png index 2918fa5..b933a2c 100644 Binary files a/public/img_thumb.png and b/public/img_thumb.png differ diff --git a/src/app/ecosystem/page.tsx b/src/app/ecosystem/page.tsx index 66e4a31..5681219 100644 --- a/src/app/ecosystem/page.tsx +++ b/src/app/ecosystem/page.tsx @@ -6,6 +6,7 @@ import aura_scan from "@/assets/images/ecosystem/aura_scan.png"; import band from "@/assets/images/ecosystem/band.png"; import bingx from "@/assets/images/ecosystem/bingx.png"; import c98 from "@/assets/images/ecosystem/c98.png"; +import dev3 from "@/assets/images/ecosystem/dev3.png"; import gate from "@/assets/images/ecosystem/gate.png"; import halotrade from "@/assets/images/ecosystem/halotrade.png"; import horo from "@/assets/images/ecosystem/horo.png"; @@ -13,18 +14,30 @@ import nimbus from "@/assets/images/ecosystem/img_nimbus.png"; import keplr from "@/assets/images/ecosystem/keplr.png"; import klever from "@/assets/images/ecosystem/klever.png"; import leap from "@/assets/images/ecosystem/leap.png"; -import metamask from "@/assets/images/ecosystem/metamask.png"; import mexc from "@/assets/images/ecosystem/mexc.png"; import micro3 from "@/assets/images/ecosystem/micro3.png"; import monsterra from "@/assets/images/ecosystem/monsterra.png"; import nois from "@/assets/images/ecosystem/nois.png"; import onus from "@/assets/images/ecosystem/onus.png"; import pyxis from "@/assets/images/ecosystem/pyxis.png"; -import squid from "@/assets/images/ecosystem/squid.png"; -import stakify from "@/assets/images/ecosystem/stakify.png"; import seekhype from "@/assets/images/ecosystem/seekhype.png"; +import stakify from "@/assets/images/ecosystem/stakify.png"; import sub_wallet from "@/assets/images/ecosystem/sub_wallet.png"; +import validator_0 from "@/assets/images/ecosystem/validator_0.png"; +import validator_1 from "@/assets/images/ecosystem/validator_1.png"; +import validator_10 from "@/assets/images/ecosystem/validator_10.png"; +import validator_11 from "@/assets/images/ecosystem/validator_11.png"; +import validator_2 from "@/assets/images/ecosystem/validator_2.png"; +import validator_3 from "@/assets/images/ecosystem/validator_3.png"; +import validator_4 from "@/assets/images/ecosystem/validator_4.png"; +import validator_5 from "@/assets/images/ecosystem/validator_5.png"; +import validator_6 from "@/assets/images/ecosystem/validator_6.png"; +import validator_7 from "@/assets/images/ecosystem/validator_7.png"; +import validator_8 from "@/assets/images/ecosystem/validator_8.png"; +import validator_9 from "@/assets/images/ecosystem/validator_9.png"; import yooldo from "@/assets/images/ecosystem/yooldo.png"; + + import { useEffect, useState } from "react"; import Card from "../../components/Card"; import Select from "../../components/Select"; @@ -32,51 +45,71 @@ import useWindowSize from "../../hooks/useWindowSize"; const options = [ { value: 'All', label: 'All ' }, - { value: 'Tools', label: 'Tools' }, + { value: 'Infrastructure', label: 'Infrastructure' }, { value: 'NFT', label: 'NFT' }, - { value: 'DEX', label: 'DEX' }, { value: 'CEX', label: 'CEX' }, - { value: 'Web3 Game', label: 'Web3 Game' }, { value: 'Wallet', label: 'Wallet' }, - { value: 'SocialFi', label: 'SocialFi' }, - { value: 'Oracle', label: 'Oracle' }, { value: 'DeFi', label: 'DeFi' }, - { value: 'Others', label: 'Others' }, + { value: 'Validator', label: 'Validator' }, + { value: 'Web3 Game', label: 'Web3 Game' }, + { value: 'SocialFi', label: 'SocialFi' }, + { value: 'Web2 Transition', label: 'Web2 Transition' }, ]; const data = [ { title: 'Aurascan', description: 'The next generation blockchain explorer for Aura Network', - tag: 'Tools', + tag: 'Infrastructure', img: aura_scan, link: 'https://aurascan.io/' }, { title: 'Pyxis Safe', description: 'Multi-signature and fine -grain access control, asset management tool', - tag: 'Tools', + tag: 'Infrastructure', img: pyxis, link: 'https://pyxis.aura.network/' }, { title: 'Horoscope', description: 'An indexing service to provide real-time data for Aura ecosystem', - tag: 'Tools', + tag: 'Infrastructure', img: horo, link: 'https://horoscope.aura.network/' }, + { + title: 'Band Protocol', + description: 'A cross-chain data oracle platform that aggregates and connects real-world data and APIs to smart contracts.', + tag: 'Infrastructure', + img: band, + link: 'https://www.bandprotocol.com/' + }, + { + title: 'Nois Network', + description: 'Reliable Randomness For the Interchain', + tag: 'Infrastructure', + img: nois, + link: 'https://nois.network/' + }, + { + title: 'Dev3Map', + description: 'The Interchain Developers Metrics Map', + tag: 'Infrastructure', + img: dev3, + link: 'https://beta.dev3map.com/' + }, { title: 'Nimbus', description: 'A Personalized Portfolio for Crypto investors', - tag: 'Tools', + tag: 'DeFi', img: nimbus, link: 'https://getnimbus.io/' }, { title: 'Halotrade', description: 'Seamless crypto trading, built for all', - tag: 'DEX', + tag: 'DeFi', img: halotrade, link: 'https://halotrade.zone/' }, @@ -128,17 +161,10 @@ const data = [ { title: 'AhaFast Ride 2 Earn', description: 'Spearheading the Blockchain O2O (Online-to-offline) movement in Vietnam', - tag: 'Others', + tag: 'Web2 Transition', img: ahafast, link: 'https://twitter.com/ahafastofficial' }, - { - title: 'Nois Network', - description: 'Reliable Randomness For the Interchain', - tag: 'Others', - img: nois, - link: 'https://nois.network/' - }, { title: 'Coin98', description: 'The #1 non-custodial, multi-chain wallet, and DeFi gateway, designed to seamlessly connect users to the crypto world in a safe and secure manner.', @@ -174,27 +200,6 @@ const data = [ img: klever, link: 'https://www.klever.io/' }, - { - title: 'Band Protocol', - description: 'A cross-chain data oracle platform that aggregates and connects real-world data and APIs to smart contracts.', - tag: 'Oracle', - img: band, - link: 'https://www.bandprotocol.com/' - }, - { - title: 'Squid', - description: 'The first native-to-native cross-chain solution, replacing bridges with 1-click cross-chain swaps', - tag: 'DeFi', - img: squid, - link: 'https://www.squidrouter.com/' - }, - { - title: 'Micro3', - description: 'A Decentralized SocialFi Mint-To-Earn platform that empowers Web3 projects and individuals through the creator economy, leveraging advanced LayerZero and Chainlink technologies.', - tag: 'SocialFi', - img: micro3, - link: 'https://micro3.io/' - }, { title: 'SeekHYPE', description: 'NFT Marketplace for IP', @@ -209,6 +214,21 @@ const data = [ img: stakify, link: 'https://stakify.zone/' }, + { + title: 'Aura Validators', + tag: 'Validator', + img: aura_scan, + listImgs: [validator_0, validator_1, validator_2, validator_3, validator_4, validator_5, validator_6, validator_7, validator_8, validator_9, validator_10, validator_11], + link: 'https://aurascan.io/validators' + }, + { + title: 'Micro3', + description: 'A Decentralized SocialFi Mint-To-Earn platform that empowers Web3 projects and individuals through the creator economy, leveraging advanced LayerZero and Chainlink technologies.', + tag: 'SocialFi', + img: micro3, + link: 'https://micro3.io/', + isBigger: true + }, ] function Ecosystem() { @@ -272,9 +292,21 @@ function Ecosystem() {
- {visibleItems.map((e, index) => ( - - ))} + {visibleItems.map((e, index) => { + if (e.isBigger) { + return ( +
+ +
+ ); + } + return ( +
+ +
+ ); + } + )}
{visibleItems.length < filteredData.length && (
{description && {description}} + {listImgs && + +
+ {listImgs.map((e: any, i: number) => ( +
+ +
+ ))} +
+ + } ); diff --git a/src/sections/explore/component/Slider.tsx b/src/sections/explore/component/Slider.tsx new file mode 100644 index 0000000..48aee95 --- /dev/null +++ b/src/sections/explore/component/Slider.tsx @@ -0,0 +1,36 @@ +'use client ' + +import Image from "next/image"; +import { A11y, Navigation } from "swiper/modules"; +import { Swiper, SwiperSlide } from "swiper/react"; + +function Slider({ data }: { data: any }) { + return ( + + +
+ {data.map((item: any, i: number) => { + return ( + +
+ img_catze_1 +
+ + ) + })} +
+ + + + ); +} + +export default Slider; \ No newline at end of file diff --git a/src/sections/explore/index.tsx b/src/sections/explore/index.tsx index fba4d88..84770cb 100644 --- a/src/sections/explore/index.tsx +++ b/src/sections/explore/index.tsx @@ -1,3 +1,4 @@ +'use client' import img_aura_2 from '@/assets/images/img_aura_2.png'; import img_aura_thumb from '@/assets/images/img_aura_thumb.png'; import img_c98 from '@/assets/images/img_c98.png'; @@ -23,10 +24,10 @@ import img_punkga_3 from '@/assets/images/img_punkga_3.png'; import img_story_protocol from '@/assets/images/img_story_protocol.png'; import img_story_protocol_2 from '@/assets/images/img_story_protocol_2.png'; import img_subwallet from '@/assets/images/img_subwallet.png'; - - +import img_random_pirate from '@/assets/images/img_random_pirate.png'; import Image from 'next/image'; +import Slider from './component/Slider'; function Explore() { return ( @@ -129,8 +130,8 @@ function Explore() { {/* IP Source */} -
-
+
+
@@ -181,7 +182,9 @@ function Explore() {
Monsterra - img_monsterra +
+ img_monsterra +
@@ -195,20 +198,14 @@ function Explore() {
Yooldo, TROUBLE PUNK: CYBER GALZ, Random Private Defense -
-
- img_catze_1 -
-
- img_catze_2 - -
+
+
-
+
@@ -371,22 +368,22 @@ function Explore() { {/* Wallet */}
-
- - - - - - - - - - - - - - Wallet -
+
+ + + + + + + + + + + + + + Wallet +
diff --git a/src/sections/partners/index.tsx b/src/sections/partners/index.tsx index 964d385..965e236 100644 --- a/src/sections/partners/index.tsx +++ b/src/sections/partners/index.tsx @@ -212,8 +212,6 @@ function Parters() { Backed by the best
- -
{partners.map((item) => ( diff --git a/src/sections/statistics/index.tsx b/src/sections/statistics/index.tsx index 12c1bee..956c279 100644 --- a/src/sections/statistics/index.tsx +++ b/src/sections/statistics/index.tsx @@ -1,10 +1,6 @@ "use client" -import { useAnimation } from 'framer-motion'; -import { useEffect } from 'react'; -import { useInView } from 'react-intersection-observer'; import { A11y, Navigation } from 'swiper/modules'; import { Swiper, SwiperSlide } from 'swiper/react'; -import useWindowSize from "../../hooks/useWindowSize"; import Card from "./components/Card"; const statisticData = [ @@ -104,36 +100,8 @@ const statisticData = [ } ] -function Statistics() { - const { isMobile } = useWindowSize() - const controls = useAnimation(); - const [ref, inView] = useInView({ - triggerOnce: false, - threshold: 0.1, - }); - - useEffect(() => { - if (inView) { - controls.start('visible'); - } else { - controls.start('hidden'); - } - }, [controls, inView]); - - const variants = { - hidden: (direction: number) => ({ - opacity: 0, - x: direction > 0 ? 100 : -100, - }), - visible: { - opacity: 1, - x: 0, - transition: { - duration: 0.5, - }, - }, - }; +function Statistics() { return (