diff --git a/src/app/build/page.tsx b/src/app/build/index.tsx similarity index 100% rename from src/app/build/page.tsx rename to src/app/build/index.tsx diff --git a/src/app/ecosystem/layout.tsx b/src/app/ecosystem/layout.tsx deleted file mode 100644 index e6279d2..0000000 --- a/src/app/ecosystem/layout.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Metadata } from "next"; -import Tutorials from "../../sections/tutorials"; - -export const metadata: Metadata = { - title: "Ecosystem", - description: "Explore Aura Network's tech stack including Found Contract Suite, Pyxis Smart Account, Fee Registry, Software Development Kit and Infrastructure Application.", -}; - -export default function Layout({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { - return ( -
- {children} - -
- - ); -} diff --git a/src/app/ecosystem/page.tsx b/src/app/ecosystem/page.tsx index 943ad09..fb8f228 100644 --- a/src/app/ecosystem/page.tsx +++ b/src/app/ecosystem/page.tsx @@ -37,233 +37,252 @@ 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"; import useWindowSize from "../../hooks/useWindowSize"; const options = [ - { value: 'All', label: 'All ' }, - { value: 'Infrastructure', label: 'Infrastructure' }, - { value: 'NFT', label: 'NFT' }, - { value: 'CEX', label: 'CEX' }, - { value: 'Wallet', label: 'Wallet' }, - { value: 'DeFi', label: 'DeFi' }, - { value: 'Validator', label: 'Validator' }, - { value: 'Web3 Game', label: 'Web3 Game' }, - { value: 'SocialFi', label: 'SocialFi' }, - { value: 'Web2 Transition', label: 'Web2 Transition' }, + { value: "All", label: "All " }, + { value: "Infrastructure", label: "Infrastructure" }, + { value: "NFT", label: "NFT" }, + { value: "CEX", label: "CEX" }, + { value: "Wallet", label: "Wallet" }, + { value: "DeFi", label: "DeFi" }, + { 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: 'Infrastructure', - img: aura_scan, - link: 'https://aurascan.io/' - }, - { - title: 'Pyxis Safe', - description: 'Multi-signature and fine -grain access control, asset management tool', - tag: 'Infrastructure', - img: pyxis, - link: 'https://pyxis.aura.network/' - }, - { - title: 'Horoscope', - description: 'An indexing service to provide real-time data for Aura ecosystem', - 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: 'DeFi', - img: nimbus, - link: 'https://getnimbus.io/' - }, - { - title: 'Halotrade', - description: 'Seamless crypto trading, built for all', - tag: 'DeFi', - img: halotrade, - link: 'https://halotrade.zone/' - }, - { - title: 'BingX', - tag: 'CEX', - img: bingx, - link: 'https://bingx.com/vi-vn/' - }, - { - title: 'MEXC', - tag: 'CEX', - img: mexc, - link: 'https://www.mexc.com/' - }, - { - title: 'ONUS', - tag: 'CEX', - img: onus, - link: 'https://goonus.io/' - }, - { - title: 'Gate', - tag: 'CEX', - img: gate, - link: 'http://gate.io' - }, - { - title: 'Aliniex', - tag: 'CEX', - img: aliniex, - link: 'https://aliniex.com/' - - }, - { - title: 'Monsterra', - description: 'A leading multi-chain NFT Game with free-to-play-and-earn mechanism developed by CrescentShine Studio, offering gamers an unparalleled and immersive gaming experience.', - tag: 'Web3 Game', - img: monsterra, - link: 'https://monsterra.io/' - }, - { - title: 'Yooldo', - description: 'Yooldo is a gaming platform renowned for its innovative Anti abuse system, Jury DAO', - tag: 'Web3 Game', - img: yooldo, - link: 'https://www.yooldo.gg/' - }, - { - title: 'AhaFast Ride 2 Earn', - description: 'Spearheading the Blockchain O2O (Online-to-offline) movement in Vietnam', - tag: 'Web2 Transition', - img: ahafast, - link: 'https://twitter.com/ahafastofficial' - }, - { - title: 'Subwallet', - description: 'A non-custodial Web3 Wallet', - tag: 'Wallet', - img: sub_wallet, - link: 'https://www.subwallet.app/' - }, - { - 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.', - tag: 'Wallet', - img: c98, - link: 'https://coin98.com/wallet' - }, - { - title: 'Keplr', - description: 'Wallet for the Inter blockchain ecosystem', - tag: 'Wallet', - img: keplr, - link: 'https://www.klever.io/' - }, - { - title: 'Leap Wallet', - description: 'The Super Wallet‍ for Web3', - tag: 'Wallet', - img: leap, - link: 'https://www.leapwallet.io/' - }, - { - title: 'Klever', - description: 'The Ultimate Crypto Wallet for Your Digital Assets', - tag: 'Wallet', - img: klever, - link: 'https://www.klever.io/' - }, - { - title: 'SeekHYPE', - description: 'NFT Marketplace for IP', - tag: 'NFT', - img: seekhype, - link: 'https://beta.seekhype.io/' - }, - { - title: 'Stakify', - description: 'NFT Staking Campaign Platform', - tag: 'NFT', - 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 - }, -] + { + title: "Aurascan", + description: "The next generation blockchain explorer for Aura Network", + tag: "Infrastructure", + img: aura_scan, + link: "https://aurascan.io/", + }, + { + title: "Pyxis Safe", + description: + "Multi-signature and fine -grain access control, asset management tool", + tag: "Infrastructure", + img: pyxis, + link: "https://pyxis.aura.network/", + }, + { + title: "Horoscope", + description: + "An indexing service to provide real-time data for Aura ecosystem", + 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: "DeFi", + img: nimbus, + link: "https://getnimbus.io/", + }, + { + title: "Halotrade", + description: "Seamless crypto trading, built for all", + tag: "DeFi", + img: halotrade, + link: "https://halotrade.zone/", + }, + { + title: "BingX", + tag: "CEX", + img: bingx, + link: "https://bingx.com/vi-vn/", + }, + { + title: "MEXC", + tag: "CEX", + img: mexc, + link: "https://www.mexc.com/", + }, + { + title: "ONUS", + tag: "CEX", + img: onus, + link: "https://goonus.io/", + }, + { + title: "Gate", + tag: "CEX", + img: gate, + link: "http://gate.io", + }, + { + title: "Aliniex", + tag: "CEX", + img: aliniex, + link: "https://aliniex.com/", + }, + { + title: "Monsterra", + description: + "A leading multi-chain NFT Game with free-to-play-and-earn mechanism developed by CrescentShine Studio, offering gamers an unparalleled and immersive gaming experience.", + tag: "Web3 Game", + img: monsterra, + link: "https://monsterra.io/", + }, + { + title: "Yooldo", + description: + "Yooldo is a gaming platform renowned for its innovative Anti abuse system, Jury DAO", + tag: "Web3 Game", + img: yooldo, + link: "https://www.yooldo.gg/", + }, + { + title: "AhaFast Ride 2 Earn", + description: + "Spearheading the Blockchain O2O (Online-to-offline) movement in Vietnam", + tag: "Web2 Transition", + img: ahafast, + link: "https://twitter.com/ahafastofficial", + }, + { + title: "Subwallet", + description: "A non-custodial Web3 Wallet", + tag: "Wallet", + img: sub_wallet, + link: "https://www.subwallet.app/", + }, + { + 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.", + tag: "Wallet", + img: c98, + link: "https://coin98.com/wallet", + }, + { + title: "Keplr", + description: "Wallet for the Inter blockchain ecosystem", + tag: "Wallet", + img: keplr, + link: "https://www.klever.io/", + }, + { + title: "Leap Wallet", + description: "The Super Wallet‍ for Web3", + tag: "Wallet", + img: leap, + link: "https://www.leapwallet.io/", + }, + { + title: "Klever", + description: "The Ultimate Crypto Wallet for Your Digital Assets", + tag: "Wallet", + img: klever, + link: "https://www.klever.io/", + }, + { + title: "SeekHYPE", + description: "NFT Marketplace for IP", + tag: "NFT", + img: seekhype, + link: "https://beta.seekhype.io/", + }, + { + title: "Stakify", + description: "NFT Staking Campaign Platform", + tag: "NFT", + 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() { - const { isMobile } = useWindowSize(); - const [selectedTag, setSelectedTag] = useState('All'); - const [displayedItems, setDisplayedItems] = useState(6); - const [visibleItems, setVisibleItems] = useState(data.slice(0, 6)); - - const filteredData = selectedTag && selectedTag !== 'All' - ? data.filter(item => item.tag === selectedTag) - : data; + const { isMobile } = useWindowSize(); + const [selectedTag, setSelectedTag] = useState("All"); + const [displayedItems, setDisplayedItems] = useState(6); + const [visibleItems, setVisibleItems] = useState(data.slice(0, 6)); - useEffect(() => { - setDisplayedItems(isMobile ? 6 : 12); - }, [isMobile]); + const filteredData = + selectedTag && selectedTag !== "All" + ? data.filter((item) => item.tag === selectedTag) + : data; - useEffect(() => { - setVisibleItems(filteredData.slice(0, displayedItems)); - }, [selectedTag, displayedItems, data]); + useEffect(() => { + setDisplayedItems(isMobile ? 6 : 12); + }, [isMobile]); - const handleSelect = (option: string) => { - setSelectedTag(option); - setDisplayedItems(6); - }; + useEffect(() => { + setVisibleItems(filteredData.slice(0, displayedItems)); + }, [selectedTag, displayedItems, data]); - const loadMore = () => { - setDisplayedItems(prev => prev + 6); - }; + const handleSelect = (option: string) => { + setSelectedTag(option); + setDisplayedItems(6); + }; + const loadMore = () => { + setDisplayedItems((prev) => prev + 6); + }; - return ( -
-
-
-
+ return ( +
+
+
+ {/*
@@ -276,52 +295,65 @@ function Ecosystem() {
-
- +
+
+ {options.map((e, i) => ( +
handleSelect(e.value)} + > + {e.label}
+ ))} +
+
+
+ {visibleItems.map((e, index) => { + if (e.isBigger) { + return ( +
+ +
+ ); + } + return ( +
+ +
+ ); + })} +
+ {visibleItems.length < filteredData.length && ( + + )}
+
- ); +
+
+ ); } export default Ecosystem; diff --git a/src/app/get-aura/page.tsx b/src/app/get-aura/index.tsx similarity index 100% rename from src/app/get-aura/page.tsx rename to src/app/get-aura/index.tsx diff --git a/src/app/globals.css b/src/app/globals.css index c341284..6ed2b51 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -6,16 +6,16 @@ --foreground-rgb: 255, 255, 255; --background-start-rgb: 214, 219, 220; --background-end-rgb: 255, 255, 255; - --blur-dark-charcoal: #1F1C1999; + --blur-dark-charcoal: #1f1c1999; --dark-charcoal: #171513; --medium-charcoal: #292523; - --light-charcoal: #3B3632; - --black-charcoal: #0C0A09; + --light-charcoal: #3b3632; + --black-charcoal: #0c0a09; --blur-grayish-brown: rgba(64, 59, 53, 0.45); - --light-yellow: #FFD369; - --medium-gray: #968C7C; - --swiper-pagination-color: #FFBF61; - --swiper-pagination-bullet-inactive-color: #2C2925; + --light-yellow: #ffd369; + --medium-gray: #968c7c; + --swiper-pagination-color: #ffbf61; + --swiper-pagination-bullet-inactive-color: #2c2925; } html:focus-within { @@ -59,7 +59,11 @@ body { .border-gradient { border-width: 1px; border-style: solid; - border-image-source: linear-gradient(180deg, rgba(160, 150, 114, 0.2) 0%, rgba(160, 150, 114, 0) 100%); + border-image-source: linear-gradient( + 180deg, + rgba(160, 150, 114, 0.2) 0%, + rgba(160, 150, 114, 0) 100% + ); border-image-slice: 1; border-radius: 8px; } @@ -101,6 +105,9 @@ body { } } +.icon .cathay2 { + display: none; +} @media only screen and (min-width: 1024px) { .main-container { /* padding-top: 324px; */ @@ -117,117 +124,157 @@ body { border-radius: 32px !important; } + /* cathay icon */ + .icon:hover .cathay1 { + display: none; + } + .icon:hover .cathay2 { + display: block; + } + /* bayer icon */ + .icon:hover #bayer path { + fill: #10384f; + } + .icon:hover #bayer #path1 { + fill: #89d329; + } + .icon:hover #bayer #path2 { + fill: #00bcff; + } + + .icon:hover #bayer2 { + display: block; + } + /* sga icon */ + .icon:hover #sga #sga1 { + fill: #f99f1c; + } + .icon:hover #sga .sga2 { + fill: #232f67; + } + /* aia icon */ + .icon:hover #aia path { + fill: #d31145; + } + /* vpb icon */ + .icon:hover #vpb #vpb1 { + fill: #e00500; + } + .icon:hover #vpb #vpb2 { + fill: #00b74f; + } + /* Coin98 icon */ -.icon:hover #coin98 path { - fill: url(#paint0_linear_561_9462); -} + .icon:hover #coin98 path { + fill: url(#paint0_linear_561_9462); + } -/* Hashed icon */ -.icon:hover #hashed path { - fill: black; -} + /* Hashed icon */ + .icon:hover #hashed path { + fill: black; + } -/* Fpt icon */ -.icon:hover #fpt #Vector { - fill: #1C6EB2; -} + /* Fpt icon */ + .icon:hover #fpt #Vector { + fill: #1c6eb2; + } -.icon:hover #fpt #Vector_2 { - fill: #F3762F; -} + .icon:hover #fpt #Vector_2 { + fill: #f3762f; + } -.icon:hover #fpt #Vector_3 { - fill: #1FB351; -} + .icon:hover #fpt #Vector_3 { + fill: #1fb351; + } -.icon:hover #fpt #Vector_4, -.icon:hover #fpt #Vector_5, -.icon:hover #fpt #Vector_6 { - fill: white; -} + .icon:hover #fpt #Vector_4, + .icon:hover #fpt #Vector_5, + .icon:hover #fpt #Vector_6 { + fill: white; + } -/* Kyber icon */ -.icon:hover #kyber #Group #Vector, -.icon:hover #kyber #Group #Vector_2, -.icon:hover #kyber #Group #Vector_3, -.icon:hover #kyber #Group #Vector_4, -.icon:hover #kyber #Group #Vector_5, -.icon:hover #kyber #Group #Vector_6, -.icon:hover #kyber #Group #Vector_7, -.icon:hover #kyber #Group #Vector_8, -.icon:hover #kyber #Group #Vector_9, -.icon:hover #kyber #Group #Vector_10, -.icon:hover #kyber #Group #Vector_11, -.icon:hover #kyber #Group #Vector_12, -.icon:hover #kyber #Group #Vector_13, -.icon:hover #kyber #Group #Vector_14 { - fill: black; -} + /* Kyber icon */ + .icon:hover #kyber #Group #Vector, + .icon:hover #kyber #Group #Vector_2, + .icon:hover #kyber #Group #Vector_3, + .icon:hover #kyber #Group #Vector_4, + .icon:hover #kyber #Group #Vector_5, + .icon:hover #kyber #Group #Vector_6, + .icon:hover #kyber #Group #Vector_7, + .icon:hover #kyber #Group #Vector_8, + .icon:hover #kyber #Group #Vector_9, + .icon:hover #kyber #Group #Vector_10, + .icon:hover #kyber #Group #Vector_11, + .icon:hover #kyber #Group #Vector_12, + .icon:hover #kyber #Group #Vector_13, + .icon:hover #kyber #Group #Vector_14 { + fill: black; + } -.icon:hover #kyber #Vector_15, -.icon:hover #kyber #Vector_16, -.icon:hover #kyber #Vector_17, -.icon:hover #kyber #Vector_18 { - fill: #39CDA1; -} + .icon:hover #kyber #Vector_15, + .icon:hover #kyber #Vector_16, + .icon:hover #kyber #Vector_17, + .icon:hover #kyber #Vector_18 { + fill: #39cda1; + } -/* Blizzard icon */ -.icon:hover #blizzard path { - fill: #E74A46; -} + /* Blizzard icon */ + .icon:hover #blizzard path { + fill: #e74a46; + } -/* NGC icon */ -.icon:hover #ngc path { - fill: black; -} + /* NGC icon */ + .icon:hover #ngc path { + fill: black; + } -/* NGC icon */ -.icon:hover #crypto path { - fill: black; -} + /* NGC icon */ + .icon:hover #crypto path { + fill: black; + } -/* Crypto icon */ -.icon:hover #crypto #Vector_1, -.icon:hover #crypto #Vector_2, -.icon:hover #crypto #Vector_3, -.icon:hover #crypto #Vector_4, -.icon:hover #crypto #Vector_5 { - fill: #48FFCF; -} -.icon:hover #crypto #Vector_6 { - fill: black; -} + /* Crypto icon */ + .icon:hover #crypto #Vector_1, + .icon:hover #crypto #Vector_2, + .icon:hover #crypto #Vector_3, + .icon:hover #crypto #Vector_4, + .icon:hover #crypto #Vector_5 { + fill: #48ffcf; + } + .icon:hover #crypto #Vector_6 { + fill: black; + } -/* zentry icon */ -.icon:hover #zentry path { - fill: black; -} + /* zentry icon */ + .icon:hover #zentry path { + fill: black; + } -/* dwf icon */ -.icon:hover #dwf path { - fill: black; -} + /* dwf icon */ + .icon:hover #dwf path { + fill: black; + } -/* gbv icon */ -.icon:hover #gbv mask { - fill: #F1D050; -} + /* gbv icon */ + .icon:hover #gbv mask { + fill: #f1d050; + } -/* kucoin icon */ -.icon:hover #kucoin path { - fill: #28CD96; -} + /* kucoin icon */ + .icon:hover #kucoin path { + fill: #28cd96; + } -/* finance icon */ -.icon:hover #finance #Vector_2 { - fill: #00FFB9 -} -.icon:hover #finance #Vector_3 { - fill: #00DAFF; -} -.icon:hover #finance path { - fill: black; -} + /* finance icon */ + .icon:hover #finance #Vector_2 { + fill: #00ffb9; + } + .icon:hover #finance #Vector_3 { + fill: #00daff; + } + .icon:hover #finance path { + fill: black; + } } @media only screen and (min-width: 1280px) { @@ -254,19 +301,17 @@ body { } } - - /* Statistic card */ .statistic-card:hover #card-bg circle { fill: url(#paint0_linear_566_10821); - fill-opacity: 1 + fill-opacity: 1; } .statistic-card:hover { - background: url("../assets/images/img_mask.webp"), #221F1C; + background: url("../assets/images/img_mask.webp"), #221f1c; background-size: cover; background-repeat: no-repeat; - border: 1px solid #FD9552; + border: 1px solid #fd9552; } /* Ecosystem card */ @@ -301,7 +346,7 @@ body { .swiper-pagination-fraction, .swiper-pagination-custom, -.swiper-horizontal>.swiper-pagination-bullets, +.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: 0 !important; height: 18px !important; @@ -318,11 +363,11 @@ body { } /* Navbar */ -.nav-input:checked~.header>.nav-menu { +.nav-input:checked ~ .header > .nav-menu { display: block; } -.nav-input:checked~.header>.nav-container { +.nav-input:checked ~ .header > .nav-container { border-radius: 1rem 1rem 0 0; } @@ -330,15 +375,15 @@ body { display: none; } -.nav-input:checked~.header>.nav-container .nav-icon-menu { +.nav-input:checked ~ .header > .nav-container .nav-icon-menu { display: none; } -.nav-input:checked~.header>.nav-container .nav-icon-close { +.nav-input:checked ~ .header > .nav-container .nav-icon-close { display: block; } -.nav-input:checked~.nav-overlay { +.nav-input:checked ~ .nav-overlay { display: block; } @@ -353,19 +398,22 @@ body { } /* Section selector */ -.section-selector:checked~.section-menu { +.section-selector:checked ~ .section-menu { display: block; } /* Active section */ .active { - border-left: 2px solid #F7B85F; + border-left: 2px solid #f7b85f; border-top: none; border-right: none; border-bottom: none; } .border-linear { - border-image: linear-gradient(180deg, rgba(160, 150, 114, 0.2) 0%, rgba(160, 150, 114, 0) 100%); + border-image: linear-gradient( + 180deg, + rgba(160, 150, 114, 0.2) 0%, + rgba(160, 150, 114, 0) 100% + ); } - diff --git a/src/app/introduction/page.tsx b/src/app/introduction/index.tsx similarity index 100% rename from src/app/introduction/page.tsx rename to src/app/introduction/index.tsx diff --git a/src/app/tech-stack/page.tsx b/src/app/tech-stack/index.tsx similarity index 100% rename from src/app/tech-stack/page.tsx rename to src/app/tech-stack/index.tsx diff --git a/src/assets/images/arrow-up-right.png b/src/assets/images/arrow-up-right.png index 845877d..adb86a6 100644 Binary files a/src/assets/images/arrow-up-right.png and b/src/assets/images/arrow-up-right.png differ diff --git a/src/assets/images/ecosystem/aura_scan.png b/src/assets/images/ecosystem/aura_scan.png index d4c2ca2..e5de84d 100644 Binary files a/src/assets/images/ecosystem/aura_scan.png and b/src/assets/images/ecosystem/aura_scan.png differ diff --git a/src/assets/images/ecosystem/horo.png b/src/assets/images/ecosystem/horo.png index e4c6959..34ea197 100644 Binary files a/src/assets/images/ecosystem/horo.png and b/src/assets/images/ecosystem/horo.png differ diff --git a/src/assets/images/ecosystem/pyxis.png b/src/assets/images/ecosystem/pyxis.png index 2142315..65f3724 100644 Binary files a/src/assets/images/ecosystem/pyxis.png and b/src/assets/images/ecosystem/pyxis.png differ diff --git a/src/assets/images/logo3.svg b/src/assets/images/logo3.svg new file mode 100644 index 0000000..21020a2 --- /dev/null +++ b/src/assets/images/logo3.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx index dc41a50..82f68f2 100644 --- a/src/components/Card/index.tsx +++ b/src/components/Card/index.tsx @@ -22,31 +22,31 @@ function Card({ data }: CardProps) { const { title, img, description, tag, link, listImgs } = data return ( -
+
-
+
-
+
{tag}
- {title} + {title}
- {description && {description}} + {description && {description}} {listImgs &&
{listImgs.map((e: any, i: number) => (
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 47cac70..6d525df 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -2,28 +2,13 @@ import ic_discord from "@/assets/icons/ic_discord_none_bg.svg"; import ic_telegram from "@/assets/icons/ic_telegram.svg"; import ic_x from "@/assets/icons/ic_x.svg"; import ic_logo from "@/assets/images/img_logo.svg"; +import logo3 from "@/assets/images/logo3.svg"; import Image from "next/image"; import Link from "next/link"; import { PAGE_ROUTE, SOCIAL } from "../../common"; - +import { usePathname } from "next/navigation"; import { useEffect, useState } from "react"; -const learnMenu = [ - { - name: "Introduction", - pageRoute: PAGE_ROUTE.INTRODUCTION, - }, - { - name: "Tech Stack", - pageRoute: PAGE_ROUTE.TECH_STACK, - }, - - { - name: "Docs", - link: "https://docs.aura.network/", - }, -]; - const socials = [ { name: "X", @@ -43,6 +28,8 @@ const socials = [ ]; function Header() { const [isShow, setIsShow] = useState(false); + const pathname = usePathname(); + // console.log(pathname); useEffect(() => { const navbar: any = document.getElementById("navbar"); window.addEventListener("scroll", () => { @@ -62,11 +49,19 @@ function Header() {
- logo + logo
{ setIsShow(true); }} @@ -77,19 +72,34 @@ function Header() {
Home About + Ecosystem + + Press @@ -132,10 +142,7 @@ function Header() {
{ - setIsShow(false); - }} + href={pathname !== "/ecosystem/" ? "#about" : PAGE_ROUTE.HOME} className="self-stretch px-5 py-3 border-b border-white/25 justify-center items-center gap-2 inline-flex" >
@@ -143,11 +150,20 @@ function Header() {
{ setIsShow(false); }} className="self-stretch px-5 py-3 border-b border-white/25 justify-center items-center gap-2 inline-flex" + > +
+ Ecosystem +
+ +
Press diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx index 2eb6967..203e1ac 100644 --- a/src/components/Select/index.tsx +++ b/src/components/Select/index.tsx @@ -35,23 +35,23 @@ const Select: React.FC = ({ options, selectedOption, onSelect }) => return (
- {selectedOption} + {selectedOption}
{isOpen && ( -
+
{options.map((option, i) => (
{ onSelect(option.value); setIsOpen(false); }} > - {option.label} + {option.label}
))}
diff --git a/src/sections/blogs/components/Card/index.tsx b/src/sections/blogs/components/Card/index.tsx index 3b08bb4..e11ee11 100644 --- a/src/sections/blogs/components/Card/index.tsx +++ b/src/sections/blogs/components/Card/index.tsx @@ -2,42 +2,55 @@ import Link from "next/link"; import BlurImage from "../../../../components/Image/BlurImage"; export type Post = { - id: string, - title: string, - featureImage: string, - tag: string, - url: string -} + id: string; + title: string; + featureImage: string; + tag: string; + url: string; +}; type CardProps = { - post: Post -} + post: Post; +}; function Card({ post }: CardProps) { - const { title, featureImage, tag, url } = post - return ( - //
- // - //
- // - //
- // - //
- // {tag} - // {title} - //
- //
-
- -
- -
- -
- {tag} - {title} -
- {/* + const { title, featureImage, tag, url } = post; + return ( + //
+ // + //
+ // + //
+ // + //
+ // {tag} + // {title} + //
+ //
+
+ +
+ +
+ +
+ + {title} + + + {tag} + +
+ {/*
November 23, 2024
@@ -46,7 +59,7 @@ function Card({ post }: CardProps) {
Our new product suite has been developed to accelerate the journey towards production, lower costs and widen market access.
*/}
- ); + ); } -export default Card; \ No newline at end of file +export default Card; diff --git a/src/sections/partners/index.tsx b/src/sections/partners/index.tsx index 333fb7a..85dc96e 100644 --- a/src/sections/partners/index.tsx +++ b/src/sections/partners/index.tsx @@ -1,6 +1,407 @@ import Marquee from "react-fast-marquee"; const partners = [ + { + name: "cathay", + img: ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), + }, + { + name: "bayer", + img: ( + + + + + + + + + + + + + + + + ), + }, + { + name: "sga", + img: ( + + + + + + + + + + + + + + + + + + + + + + + ), + }, + { + name: "vpb", + img: ( + + + + + + + ), + }, + { + name: "aia", + img: ( + + + + + + ), + }, { name: "hashed", img: ( @@ -686,7 +1087,7 @@ function Parters() {
-
+
{partners.map((item) => (