diff --git a/app/globals.css b/app/globals.css index 84689b0..eca881d 100644 --- a/app/globals.css +++ b/app/globals.css @@ -192,6 +192,15 @@ #d9d9d900 100% ); } + .small-horizontal-mask { + mask-image: linear-gradient( + 90deg, + #d9d9d900 0%, + #d9d9d9 10%, + #d9d9d9 90%, + #d9d9d900 100% + ); + } .trusted-heading-bg { background-image: linear-gradient( 106.31deg, @@ -297,6 +306,30 @@ background-repeat: no-repeat; } } + .exchanges-marquee-vars { + --badge-width: 118px; + } + @media (min-width: 1024px) { + .exchanges-marquee-vars { + --badge-width: 124px; + } + } + @keyframes exchanges-marquee { + from { + transform: translateZ(0); + } + to { + transform: translate3d( + calc((var(--badge-width) * 8 + (calc(6px * 7))) * -1 - 6px), + 0, + 0 + ); + } + } + .animate-exchanges-marquee { + /* width: calc(var(--badge-width) * 8 + (6px * (var(--badge-width)) - 2)); */ + animation: exchanges-marquee 25s linear infinite; + } .is-checked .is-checked-arrow-rotation { rotate: 180deg; } @@ -306,7 +339,6 @@ .is-checked .is-checked-show { display: block; } - .bg-stake-heading { background: linear-gradient(180deg, #eeecea 22.39%, #acd9e7 100%); background-clip: text; diff --git a/app/page.tsx b/app/page.tsx index 6838207..d8d8ef4 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -3,6 +3,7 @@ import EarnSection from "@/components/sections/earn-section"; import ExploreAssets from "@/components/sections/explore-assets"; import HelpSection from "@/components/sections/help-section"; import HeroSection from "@/components/sections/hero"; +import OsmoCTASection from "@/components/sections/osmo-cta"; import StatsWithTweets from "@/components/sections/stats-with-tweets"; import TokenStatsSection from "@/components/sections/token-stats"; import TradeSection from "@/components/sections/trade-section"; @@ -15,8 +16,8 @@ export default function Home() { - {/* - */} + + {/* */} diff --git a/components/sections/osmo-cta/index.tsx b/components/sections/osmo-cta/index.tsx index eb34232..f1b375c 100644 --- a/components/sections/osmo-cta/index.tsx +++ b/components/sections/osmo-cta/index.tsx @@ -8,6 +8,49 @@ import Image from "next/image"; import Link from "next/link"; import { Suspense } from "react"; +const exchanges: ExchangeBadgeProps[] = [ + { + name: "Binance", + link: "https://www.binance.com/en/price/osmosis", + logoUri: "/assets/binance-logo.svg", + }, + { + name: "Coinbase", + link: "https://www.coinbase.com/price/osmosis", + logoUri: "/assets/coinbase-logo.svg", + }, + { + name: "crypto.com", + link: "https://crypto.com/price/osmosis", + logoUri: "/assets/coinbase-logo.svg", + }, + { + name: "Bithumb", + link: "https://www.bithumb.com/react/trade/status/OSMO-KRW", + logoUri: "/assets/coinbase-logo.svg", + }, + { + name: "Kucoin", + link: "https://www.kucoin.com/trade/OSMO-USDT", + logoUri: "/assets/coinbase-logo.svg", + }, + { + name: "Mexc", + link: "https://www.mexc.com/en-US/exchange/OSMO_USDT", + logoUri: "/assets/coinbase-logo.svg", + }, + { + name: "Gate.io", + link: "https://www.gate.io/trade/OSMO_USDT", + logoUri: "/assets/coinbase-logo.svg", + }, + { + name: "Bitget", + link: "https://www.bitget.com/spot/OSMOUSDT", + logoUri: "/assets/coinbase-logo.svg", + }, +]; + export default function OsmoCTASection() { return (
@@ -69,34 +112,11 @@ export default function OsmoCTASection() { Listed on 15+ exchanges, including: -
-
- - Binance logo - -
-
- - Coinbase logo - +
+
+ {exchanges.concat(exchanges).map((props) => ( + + ))}
@@ -250,3 +270,25 @@ async function CoinGeckoRank() { ); } + +interface ExchangeBadgeProps { + name: string; + link: string; + logoUri: string; +} + +function ExchangeBadge({ link, logoUri, name }: ExchangeBadgeProps) { + return ( +
+ + {`${name} + +
+ ); +}