From 3f62bcf2f0e946fa42d41990df5fa9bcd361d199 Mon Sep 17 00:00:00 2001 From: Kristie Huang Date: Wed, 1 Nov 2023 14:25:15 -0400 Subject: [PATCH] feat: add Android feature flag & change some app logos (#7524) * fix: generalize iOS language to app, and add color app icon * remove apple logo * delete more apple logos * remove learn more arrow * update snapshots * add feature flags to android changes --- src/assets/svg/apple_logo.svg | 154 +- src/assets/svg/uniswap_app_logo.svg | 85 + .../Banner/BaseAnnouncementBanner/index.tsx | 6 +- .../FeatureFlagModal/FeatureFlagModal.tsx | 7 + src/components/NavBar/MenuDropdown.css.ts | 1 + src/components/NavBar/MenuDropdown.tsx | 59 +- src/featureFlags/flags/androidGALaunch.ts | 10 + src/featureFlags/index.tsx | 1 + .../Landing/__snapshots__/index.test.tsx.snap | 5530 ++++++++--------- src/pages/Landing/index.tsx | 28 +- 10 files changed, 2982 insertions(+), 2899 deletions(-) create mode 100644 src/assets/svg/uniswap_app_logo.svg create mode 100644 src/featureFlags/flags/androidGALaunch.ts diff --git a/src/assets/svg/apple_logo.svg b/src/assets/svg/apple_logo.svg index af1f2c6764..fed43b342a 100644 --- a/src/assets/svg/apple_logo.svg +++ b/src/assets/svg/apple_logo.svg @@ -1,77 +1,77 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/svg/uniswap_app_logo.svg b/src/assets/svg/uniswap_app_logo.svg new file mode 100644 index 0000000000..f44535c1cc --- /dev/null +++ b/src/assets/svg/uniswap_app_logo.svg @@ -0,0 +1,85 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Banner/BaseAnnouncementBanner/index.tsx b/src/components/Banner/BaseAnnouncementBanner/index.tsx index 5bee383ca4..4f7f8df7c5 100644 --- a/src/components/Banner/BaseAnnouncementBanner/index.tsx +++ b/src/components/Banner/BaseAnnouncementBanner/index.tsx @@ -4,6 +4,8 @@ import { ChainId } from '@uniswap/sdk-core' import { useWeb3React } from '@web3-react/core' import { ReactComponent as AppleLogo } from 'assets/svg/apple_logo.svg' import baseLogoUrl from 'assets/svg/base_background_icon.svg' +import { ReactComponent as UniswapAppLogo } from 'assets/svg/uniswap_app_logo.svg' +import { useAndroidGALaunchFlagEnabled } from 'featureFlags/flags/androidGALaunch' import { useScreenSize } from 'hooks/useScreenSize' import { useLocation } from 'react-router-dom' import { useHideBaseWalletBanner } from 'state/user/hooks' @@ -23,6 +25,8 @@ export default function BaseWalletBanner() { const screenSize = useScreenSize() + const isAndroidGALaunched = useAndroidGALaunchFlagEnabled() + if (isMobileSafari) return null return ( @@ -67,7 +71,7 @@ export default function BaseWalletBanner() { }) } > - + {isAndroidGALaunched ? : } {!screenSize['xs'] ? Download : Download app} diff --git a/src/components/FeatureFlagModal/FeatureFlagModal.tsx b/src/components/FeatureFlagModal/FeatureFlagModal.tsx index 1c16b163cc..a5be1e9d7c 100644 --- a/src/components/FeatureFlagModal/FeatureFlagModal.tsx +++ b/src/components/FeatureFlagModal/FeatureFlagModal.tsx @@ -3,6 +3,7 @@ import Column from 'components/Column' import { BaseVariant, FeatureFlag, featureFlagSettings, useUpdateConfig, useUpdateFlag } from 'featureFlags' import { DynamicConfigName } from 'featureFlags/dynamicConfig' import { useQuickRouteChains } from 'featureFlags/dynamicConfig/quickRouteChains' +import { useAndroidGALaunchFlag } from 'featureFlags/flags/androidGALaunch' import { useCurrencyConversionFlag } from 'featureFlags/flags/currencyConversion' import { useFallbackProviderEnabledFlag } from 'featureFlags/flags/fallbackProvider' import { useFotAdjustmentsFlag } from 'featureFlags/flags/fotAdjustments' @@ -304,6 +305,12 @@ export default function FeatureFlagModal() { featureFlag={FeatureFlag.progressIndicatorV2} label="Refreshed swap progress indicator" /> + { const ref = useRef(null) useOnClickOutside(ref, isOpen ? toggleOpen : undefined) + const isAndroidGALaunched = useAndroidGALaunchFlagEnabled() + return ( <> @@ -138,7 +143,7 @@ export const MenuDropdown = () => { {isOpen && ( - + @@ -150,22 +155,6 @@ export const MenuDropdown = () => { - - openDownloadApp({ - element: InterfaceElementName.UNISWAP_WALLET_MODAL_DOWNLOAD_BUTTON, - }) - } - > - - - - - - Download Uniswap Wallet - - - @@ -182,6 +171,40 @@ export const MenuDropdown = () => { View more analytics + + openDownloadApp({ + element: InterfaceElementName.UNISWAP_WALLET_MODAL_DOWNLOAD_BUTTON, + }) + } + > + + {isAndroidGALaunched ? ( + <> + + + +
+ + Download Uniswap + + + Available on iOS and Android + +
+ + ) : ( + <> + + + + + Download Uniswap app + + + )} + + * { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.c16 > a { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c80 { + padding: 16px; + width: 200px; + line-height: 24px; + font-weight: 535; + text-align: center; + border-radius: 16px; + outline: none; + border: 1px solid transparent; + color: #222222; + -webkit-text-decoration: none; + text-decoration: none; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + cursor: pointer; + position: relative; + z-index: 1; + will-change: transform; + -webkit-transition: -webkit-transform 450ms ease; + -webkit-transition: transform 450ms ease; + transition: transform 450ms ease; + -webkit-transform: perspective(1px) translateZ(0); + -ms-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); +} + +.c80:disabled { + opacity: 50%; + cursor: auto; + pointer-events: none; +} + +.c80 > * { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.c80 > a { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c48 { + background-color: #FFEFFF; + color: #FC72FF; + font-size: 20px; + font-weight: 535; +} + +.c48:focus { + box-shadow: 0 0 0 1pt #FFEFFF; + background-color: #FFEFFF; +} + +.c48:hover { + background-color: #FFEFFF; +} + +.c48:active { + box-shadow: 0 0 0 1pt #FFEFFF; + background-color: #FFEFFF; +} + +.c48:hover .c49 { + background-color: #98A1C014; +} + +.c48:active .c49 { + background-color: #B8C0DC3d; +} + +.c48:disabled { + opacity: 0.4; +} + +.c48:disabled:hover { + cursor: auto; + background-color: transparent; + box-shadow: none; + border: 1px solid transparent; + outline: none; +} + +.c30 { + background-color: #FFFFFF; + color: #7D7D7D; + border: 1px solid #22222212; + font-size: 16px; + font-weight: 535; +} + +.c30:hover { + background-color: #ececec; +} + +.c30:active { + background-color: #e0e0e0; +} + +.c81 { + background-color: transparent; + color: #FC72FF; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c81:focus { + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c81:hover { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c81:active { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c81:disabled { + opacity: 50%; + cursor: auto; +} + +.c17 { + padding: 0; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + background: none; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c17:focus { + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c17:hover { + opacity: 0.9; +} + +.c17:active { + -webkit-text-decoration: underline; + text-decoration: underline; +} + +.c17:disabled { + opacity: 50%; + cursor: auto; +} + +.c75 { + height: 340px; + width: 100%; + border-radius: 32px; + max-width: 1440px; + margin: 80px 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 32px 48px; + box-shadow: 0px 10px 24px rgba(51,53,72,0.04); + background: url(Mesh.png),linear-gradient(93.06deg,#FF00C7 2.66%,#FF9FFB 98.99%); +} + +.c76 { + color: white; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.c77 { + font-weight: 535; + font-size: 28px; + line-height: 36px; +} + +.c78 { + margin: 10px 10px 0 0; + font-weight: 535; + font-size: 16px; + line-height: 20px; +} + +.c79 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-transition: 250ms ease opacity; + transition: 250ms ease opacity; +} + +.c79:hover { + opacity: 0.6; +} + +.c82 { + color: white; + border: 1px solid white; +} + +.c43 { + display: grid; + grid-auto-rows: auto; + grid-row-gap: 4px; +} + +.c40 { + -webkit-filter: none; + filter: none; + opacity: 1; + -webkit-transition: opacity 250ms ease-in-out; + transition: opacity 250ms ease-in-out; +} + +.c14 { + display: inline-block; + height: inherit; +} + +.c35 { + opacity: 0; + -webkit-transition: opacity 250ms ease-in; + transition: opacity 250ms ease-in; + width: 24px; + height: 24px; + border-radius: 50%; +} + +.c34 { + width: 24px; + height: 24px; + background: #22222212; + -webkit-transition: background-color 250ms ease-in; + transition: background-color 250ms ease-in; + box-shadow: 0 0 1px white; + border-radius: 50%; +} + +.c33 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c28 { + color: #222222; + pointer-events: auto; + width: 0; + position: relative; + font-weight: 485; + outline: none; + border: none; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + background-color: transparent; + font-size: 28px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding: 0px; + -webkit-appearance: textfield; + text-align: right; +} + +.c28::-webkit-search-decoration { + -webkit-appearance: none; +} + +.c28 [type='number'] { + -moz-appearance: textfield; +} + +.c28::-webkit-outer-spin-button, +.c28::-webkit-inner-spin-button { + -webkit-appearance: none; +} + +.c28::-webkit-input-placeholder { + color: #CECECE; +} + +.c28::-moz-placeholder { + color: #CECECE; +} + +.c28:-ms-input-placeholder { + color: #CECECE; +} + +.c28::placeholder { + color: #CECECE; +} + +.c24 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-flow: column nowrap; + -ms-flex-flow: column nowrap; + flex-flow: column nowrap; + position: relative; + border-radius: 20px; + z-index: 1; + width: initial; + -webkit-transition: height 1s ease; + transition: height 1s ease; + will-change: height; +} + +.c25 { + min-height: 44px; + border-radius: 20px; + width: initial; +} + +.c31 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #FFFFFF; + opacity: 1; + color: #222222; + cursor: pointer; + height: 36px; + border-radius: 18px; + outline: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + border: 1px solid #22222212; + font-size: 24px; + font-weight: 485; + width: initial; + padding: 4px 8px 4px 4px; + gap: 8px; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + margin-left: 12px; + box-shadow: 0px 0px 10px 0px rgba(34,34,34,0.04); + visibility: visible; + -webkit-animation: none; + animation: none; +} + +.c31:hover, +.c31:active { + background-color: #F9F9F9; +} + +.c31:before { + background-size: 100%; + border-radius: inherit; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + content: ''; +} + +.c31:hover:before { + background-color: #98A1C014; +} + +.c31:active:before { + background-color: #B8C0DC3d; +} + +.c45 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: #FC72FF; + opacity: 1; + color: #FFFFFF; + cursor: pointer; + height: 36px; + border-radius: 18px; + outline: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + border: 1px solid #FC72FF; + font-size: 24px; + font-weight: 485; + width: initial; + padding: 6px 6px 6px 8px; + gap: 8px; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + margin-left: 12px; + box-shadow: 0px 0px 10px 0px rgba(34,34,34,0.04); + visibility: visible; + -webkit-animation: none; + animation: none; +} + +.c45:hover, +.c45:active { + background-color: #FC72FF; +} + +.c45:before { + background-size: 100%; + border-radius: inherit; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + content: ''; +} + +.c45:hover:before { + background-color: #98A1C014; +} + +.c45:active:before { + background-color: #B8C0DC3d; +} + +.c27 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-flow: row nowrap; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c38 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-flow: row nowrap; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #7D7D7D; + font-size: 0.75rem; + line-height: 1rem; +} + +.c38 span:hover { + cursor: pointer; + color: #4a4a4a; +} + +.c39 { + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; + min-height: 24px; + padding: 8px 0px 0px 0px; +} + +.c32 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + width: 100%; +} + +.c37 { + margin: 0 0.25rem 0 0.35rem; + height: 35%; + margin-left: 8px; +} + +.c37 path { + stroke: #222222; + stroke-width: 2px; +} + +.c46 { + margin: 0 0.25rem 0 0.35rem; + height: 35%; + margin-left: 8px; +} + +.c46 path { + stroke: #FFFFFF; + stroke-width: 2px; +} + +.c36 { + margin: 0 0.25rem 0 0.25rem; + font-size: 20px; + font-weight: 535; +} + +.c29 { + -webkit-filter: none; + filter: none; + opacity: 1; + -webkit-transition: opacity 250ms ease-in-out; + transition: opacity 250ms ease-in-out; + text-align: left; + font-size: 36px; + font-weight: 485; + max-height: 44px; +} + +.c3 { + padding: 68px 8px 0px; + max-width: 480px; + width: 100%; +} + +.c4 { + position: relative; + z-index: 1; + border: 1px solid #22222212; + -webkit-transition: -webkit-transform 250ms ease; + -webkit-transition: transform 250ms ease; + transition: transform 250ms ease; + border-radius: 24px; +} + +.c4:before { + content: ' '; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: absolute; + inset: 0; + -webkit-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); + -webkit-filter: blur(50px); + filter: blur(50px); + background-color: rgba(252,114,255,0.075); + z-index: -2; +} + +.c4:hover { + border: 1px solid #22222212; +} + +.c6 { + border-radius: 24px; + background: #FFFFFF; + z-index: -1; + padding: 8px; + padding-top: 12px; +} + +.c41 { + border-radius: 12px; + height: 40px; + width: 40px; + position: relative; + margin-top: -18px; + margin-bottom: -18px; + margin-left: auto; + margin-right: auto; + background-color: #F9F9F9; + border: 4px solid; + border-color: #FFFFFF; + z-index: 2; +} + +.c41:hover { + cursor: pointer; + opacity: 0.8; +} + +.c22 { + height: 24px; + width: 24px; +} + +.c22 > * { + fill: #7D7D7D; +} + +.c20 { + border: none; + background-color: transparent; + margin: 0; + padding: 0; + cursor: pointer; + outline: none; +} + +.c20:not([disabled]):hover { + opacity: 0.7; +} + +.c21 { + padding: 6px 12px; + border-radius: 16px; +} + +.c19 { + position: relative; +} + +.c18 { + color: #7D7D7D; + gap: 4px; + font-weight: 485; +} + +.c18:focus { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c18:active { + -webkit-text-decoration: none; + text-decoration: none; +} + +.c10 { + margin-bottom: 10px; + color: #7D7D7D; +} + +.c12 { + padding: 0 12px; + gap: 16px; +} + +.c42 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + height: 100%; +} + +.c23 { + background-color: #F9F9F9; + border-radius: 16px; + color: #7D7D7D; + font-size: 14px; + font-weight: 500; + height: 120px; + line-height: 20px; + padding: 16px; + position: relative; +} + +.c23:before { + box-sizing: border-box; + background-size: 100%; + border-radius: inherit; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + content: ''; + border: 1px solid #F9F9F9; +} + +.c23:hover:before { + border-color: #98A1C014; +} + +.c23:focus-within:before { + border-color: #B8C0DC3d; +} + +.c44 { + border-bottom: 1px solid #FFFFFF; +} + +.c0 { + position: absolute; + top: 0; + padding: 72px 0px 0px 0px; + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-scroll-behavior: smooth; + -moz-scroll-behavior: smooth; + -ms-scroll-behavior: smooth; + scroll-behavior: smooth; + overflow-x: hidden; +} + +.c51 { + position: absolute; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + top: 0; + bottom: 0; + width: 100%; + min-height: 550px; + background: linear-gradient(rgba(255,255,255,0) 0%,rgb(255 255 255 /100%) 45%); + z-index: 990; + pointer-events: none; + height: calc(100vh - 48px); +} + +.c52 { + position: absolute; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + top: 0; + bottom: 0; + width: 100%; + overflow-y: hidden; + height: calc(100vh - 48px); +} + +.c53 { + position: absolute; + top: 68px; + bottom: 0; + background: radial-gradient(72.04% 72.04% at 50% 3.99%,#ff37eb 0%,rgba(166,151,255,0) 100%); + -webkit-filter: blur(72px); + filter: blur(72px); + border-radius: 24px; + max-width: 480px; + width: 100%; + height: 100%; +} + +.c54 { + position: absolute; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; + width: 100%; + padding: 0 0 40px; + max-width: min(720px,90%); + min-height: 535px; + z-index: 990; + -webkit-transition: 250ms ease opacity; + transition: 250ms ease opacity; + height: calc(100vh - 120px); + pointer-events: none; +} + +.c54 * { + pointer-events: auto; +} + +.c63 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + gap: 8px; + margin-top: 24px; + color: #7D7D7D; + -webkit-text-decoration: none; + text-decoration: none; + font-size: 16px; + line-height: 24px; + font-weight: 535; + text-align: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c63:hover { + color: #CECECE; +} + +.c55 { + color: transparent; + font-size: 36px; + line-height: 44px; + font-weight: 535; + text-align: center; + margin: 0 0 24px; + background: linear-gradient(10deg,rgba(255,79,184,1) 0%,rgba(255,159,251,1) 100%); + background-clip: text; + -webkit-background-clip: text; +} + +.c57 { + color: #7D7D7D; + font-size: 16px; + line-height: 24px; + font-weight: 535; + text-align: center; + max-width: 500px; + margin: 0 0 32px; +} + +.c56 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; +} + +.c59 { + padding: 16px 0px; + border-radius: 24px; +} + +.c60 { + background: linear-gradient(93.06deg,#ff00c7 2.66%,#ff9ffb 98.99%); + border: none; + color: #FFFFFF; + -webkit-transition: all 250ms ease; + transition: all 250ms ease; +} + +.c60:hover { + box-shadow: 0px 0px 16px 0px #ff00c7; +} + +.c61 { + margin: 0px; + font-size: 16px; + font-weight: 535; + white-space: nowrap; +} + +.c58 { + max-width: 300px; + width: 100%; + pointer-events: auto; +} + +.c62 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: #CECECE; + cursor: pointer; + font-size: 20px; + font-weight: 535; + margin: 18px 0 36px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + visibility: hidden; + pointer-events: auto; + -webkit-transition: 250ms ease opacity; + transition: 250ms ease opacity; +} + +.c62:hover { + opacity: 0.6; +} + +.c64 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0 24px 5rem; + width: 100%; + background: linear-gradient(179.82deg,rgba(255,255,255,0) 0.16%,#eaeaea 99.85%); +} + +.c65 { + display: grid; + gap: 12px; + width: 100%; + padding: 24px 0 0; + max-width: 1440px; + -webkit-scroll-margin: 72px 0 0; + -moz-scroll-margin: 72px 0 0; + -ms-scroll-margin: 72px 0 0; + scroll-margin: 72px 0 0; + grid-template-columns: 1fr; +} + +.c71 { + display: grid; + gap: 12px; + width: 100%; + padding: 24px 0 0; + max-width: 1440px; + -webkit-scroll-margin: 72px 0 0; + -moz-scroll-margin: 72px 0 0; + -ms-scroll-margin: 72px 0 0; + scroll-margin: 72px 0 0; + grid-template-columns: 1fr; +} + +.c1 { + height: calc(100vh - 48px); + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + z-index: 1; +} + +.c5 * { + pointer-events: none; +} + +.c5:hover { + -webkit-transform: translateY(-4px); + -ms-transform: translateY(-4px); + transform: translateY(-4px); + -webkit-transition: -webkit-transform 250ms ease; + -webkit-transition: transform 250ms ease; + transition: transform 250ms ease; +} + +.c5:hover { + border: 1px solid #FC72FF; +} + +.c2 { + -webkit-text-decoration: none; + text-decoration: none; + max-width: 480px; + width: 100%; +} + +@media screen and (min-width:1024px) { + .c83 { + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + } +} + +@media screen and (min-width:1024px) { + .c85 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + } +} + +@media screen and (min-width:1024px) { + .c100 { + display: none; + } +} + +@media screen and (min-width:1024px) { + .c86 { + display: block; + } +} + +@media screen and (min-width:1280px) { + .c93 { + grid-template-columns: 1fr 1fr 1fr 1fr; + gap: 24px; + } +} + +@media screen and (min-width:1280px) { + .c94 { + margin: 0; + } +} + +@media screen and (min-width:640px) { + .c66 { + height: 360px; + } +} + +@media screen and (min-width:1280px) { + .c66 { + padding: 32px; + } +} + +@media screen and (min-width:640px) { + .c72 { + height: 260px; + } +} + +@media screen and (min-width:1280px) { + .c72 { + padding: 32px; + } +} + +@media screen and (min-width:1024px) { + .c68 { + font-size: 28px; + line-height: 36px; + } +} + +@media screen and (min-width:1280px) { + .c69 { + font-size: 20px; + line-height: 28px; + max-width: 480px; + } +} + +@media screen and (min-width:1280px) { + .c73 { + font-size: 20px; + line-height: 28px; + max-width: 480px; + } +} + +@media screen and (min-width:1024px) { + .c75 { + height: 140px; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } +} + +@media screen and (min-width:1280px) { + .c77 { + font-size: 28px; + line-height: 36px; + } +} + +@media screen and (min-width:1280px) { + .c78 { + font-size: 20px; + line-height: 28px; + } +} + +@media screen and (min-width:1024px) { + .c79 { + width: auto; + } +} + +@media only screen and (max-width:768px) { + .c3 { + padding-top: 48px; + } +} + +@media only screen and (max-width:640px) { + .c3 { + padding-top: 20px; + } +} + +@media screen and (min-width:768px) { + .c51 { + height: 100vh; + } +} + +@media screen and (min-width:768px) { + .c52 { + height: 100vh; + } +} + +@media screen and (min-width:640px) { + .c55 { + font-size: 48px; + line-height: 56px; + } +} + +@media screen and (min-width:768px) { + .c55 { + font-size: 64px; + line-height: 72px; + } +} + +@media screen and (min-width:768px) { + .c57 { + font-size: 20px; + line-height: 28px; + } +} + +@media screen and (min-width:640px) { + .c61 { + font-size: 20px; + } +} + +@media screen and (min-width:640px) { + .c62 { + visibility: visible; + } +} + +@media screen and (min-width:768px) { + .c64 { + padding: 0 96px 5rem; + } +} + +@media screen and (min-width:640px) { + .c65 { + grid-template-columns: 1fr; + gap: 32px; + } +} + +@media screen and (min-width:1024px) { + .c65 { + grid-template-columns: 1fr; + gap: 32px; + } +} + +@media screen and (min-width:640px) { + .c71 { + grid-template-columns: 1fr; + gap: 32px; + } +} + +@media screen and (min-width:1024px) { + .c71 { + grid-template-columns: 1fr 1fr 1fr; + gap: 32px; + } +} + +
+
+
+ +
+
+
+
+
+
+ Swap +
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+
+ You pay +
+
+
+ +
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+ You receive +
+
+
+ +
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+

+ Trade crypto with confidence +

+
+
+ Buy, sell, and explore tokens +
+
+ + +

+ Get started +

+ + +
+ Learn more +
+ + + + + Download the Uniswap app for iOS + +
+
+
+ +
+
+ Swap tokens +
+
+
+ Buy, sell, and explore tokens on Ethereum, Polygon, Optimism, and more. +
+ Trade Tokens +
+
+ +
+
+ +
+
+ Buy crypto +
+ + + + +
+
+ Buy crypto with your credit card or bank account at the best rates. +
+ Buy now +
+
+ + +
+
+ Earn +
+ Analytics +
+
+ Provide liquidity to pools on Uniswap and earn fees on swaps. +
+ Provide liquidity +
+
+ + +
+
+ Build dApps +
+ + + + +
+
+ Build apps and tools on the largest DeFi protocol on Ethereum. +
+ Developer docs +
+
+ +
+
+
+
+ Powered by the Uniswap Protocol +
+
+ The leading decentralized crypto trading protocol, governed by a global community. +
+
+
+ + Learn more + +
+
+
+
+ Uniswap Logo +
+ + + discord.svg + + + + + twitter-safe.svg + + + + + github.svg + + +
+ + © + 2023 + Uniswap Labs + +
+
+
+ + App + + + Swap + + + Tokens + + + Pools + +
+
+ + Protocol + + + Community + + + Governance + + + Developers + +
+
+ + Company + + + Careers + + + Blog + +
+
+ + Get Help + + + Contact Us + + + Help Center + +
+
+
+ Uniswap Logo +
+ + + discord.svg + + + + + twitter-safe.svg + + + + + github.svg + + +
+ + © + 2023 + Uniswap Labs + +
+
+
+
+
+`; + +exports[`disable nft on landing page renders nft information and card 1`] = ` +.c7 { + box-sizing: border-box; + margin: 0; + min-width: 0; +} + +.c15 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: primary; + border: 0; + border-radius: 4px; +} + +.c47 { + box-sizing: border-box; + margin: 0; + min-width: 0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + display: inline-block; + text-align: center; + line-height: inherit; + -webkit-text-decoration: none; + text-decoration: none; + font-size: inherit; + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + color: white; + background-color: primary; + border: 0; + border-radius: 4px; + font-weight: 535; +} + +.c8 { + width: 100%; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + padding: 0; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.c9 { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.c11 { + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; +} + +.c13 { + color: #222222; +} + +.c26 { + color: #7D7D7D; +} + .c99 { -webkit-text-decoration: none; text-decoration: none; @@ -255,7 +2824,7 @@ exports[`disable nft on landing page does not render nft information and card 1` color: #CECECE; } -.c67 { +.c66 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -283,7 +2852,39 @@ exports[`disable nft on landing page does not render nft information and card 1` transition: 250ms ease border; } -.c67:hover { +.c66:hover { + border: 1px solid #CECECE; +} + +.c71 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + background: white url(nftCard.png); + background-size: auto 100%; + background-position: right; + background-repeat: no-repeat; + background-origin: border-box; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-text-decoration: none; + text-decoration: none; + color: #222222; + padding: 24px; + height: 212px; + border-radius: 24px; + border: 1px solid transparent; + -webkit-transition: 250ms ease border; + transition: 250ms ease border; +} + +.c71:hover { border: 1px solid #CECECE; } @@ -319,7 +2920,7 @@ exports[`disable nft on landing page does not render nft information and card 1` border: 1px solid #CECECE; } -.c68 { +.c67 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -334,13 +2935,13 @@ exports[`disable nft on landing page does not render nft information and card 1` justify-content: space-between; } -.c69 { +.c68 { font-size: 20px; line-height: 28px; font-weight: 535; } -.c70 { +.c69 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -370,7 +2971,7 @@ exports[`disable nft on landing page does not render nft information and card 1` max-width: 480px; } -.c71 { +.c70 { color: #FC72FF; font-weight: 535; margin: 24px 0 0; @@ -379,7 +2980,7 @@ exports[`disable nft on landing page does not render nft information and card 1` transition: 250ms ease opacity; } -.c71:hover { +.c70:hover { opacity: 0.6; } @@ -1345,7 +3946,7 @@ exports[`disable nft on landing page does not render nft information and card 1` pointer-events: auto; } -.c64 { +.c63 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -1359,9 +3960,13 @@ exports[`disable nft on landing page does not render nft information and card 1` line-height: 24px; font-weight: 535; text-align: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } -.c64:hover { +.c63:hover { color: #CECECE; } @@ -1437,7 +4042,7 @@ exports[`disable nft on landing page does not render nft information and card 1` cursor: pointer; font-size: 20px; font-weight: 535; - margin: 36px 0; + margin: 18px 0 36px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1452,12 +4057,7 @@ exports[`disable nft on landing page does not render nft information and card 1` opacity: 0.6; } -.c63 { - margin-left: 14px; - size: 20px; -} - -.c65 { +.c64 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1474,7 +4074,7 @@ exports[`disable nft on landing page does not render nft information and card 1` background: linear-gradient(179.82deg,rgba(255,255,255,0) 0.16%,#eaeaea 99.85%); } -.c66 { +.c65 { display: grid; gap: 12px; width: 100%; @@ -1588,13 +4188,25 @@ exports[`disable nft on landing page does not render nft information and card 1` } @media screen and (min-width:640px) { - .c67 { + .c66 { height: 360px; } } @media screen and (min-width:1280px) { - .c67 { + .c66 { + padding: 32px; + } +} + +@media screen and (min-width:640px) { + .c71 { + height: 360px; + } +} + +@media screen and (min-width:1280px) { + .c71 { padding: 32px; } } @@ -1612,14 +4224,14 @@ exports[`disable nft on landing page does not render nft information and card 1` } @media screen and (min-width:1024px) { - .c69 { + .c68 { font-size: 28px; line-height: 36px; } } @media screen and (min-width:1280px) { - .c70 { + .c69 { font-size: 20px; line-height: 28px; max-width: 480px; @@ -1721,2675 +4333,34 @@ exports[`disable nft on landing page does not render nft information and card 1` } @media screen and (min-width:768px) { - .c65 { + .c64 { padding: 0 96px 5rem; } } @media screen and (min-width:640px) { - .c66 { - grid-template-columns: 1fr; - gap: 32px; - } -} - -@media screen and (min-width:1024px) { - .c66 { - grid-template-columns: 1fr; - gap: 32px; - } -} - -@media screen and (min-width:640px) { - .c72 { - grid-template-columns: 1fr; - gap: 32px; - } -} - -@media screen and (min-width:1024px) { - .c72 { - grid-template-columns: 1fr 1fr 1fr; - gap: 32px; - } -} - -
-
-
- -
-
-
-
-
-
- Swap -
-
-
- -
-
-
-
-
- -
-
-
-
-
-
-
-
- You pay -
-
-
- -
-
-
- -
-
-
-
-
-
- -
-
-
-
-
-
-
- - - - -
-
-
-
-
-
-
-
-
- You receive -
-
-
- -
-
-
- -
-
-
-
-
-
- -
-
-
-
-
-
-
- -
-
-
-
-
- -
-
-
-
-
-
-

- Trade crypto with confidence -

-
-
- Buy, sell, and explore tokens -
-
- - -

- Get started -

- - -
- Learn more - - - - - -
- - - - - Download the Uniswap Wallet for iOS - -
-
-
- -
-
- Swap tokens -
-
-
- Buy, sell, and explore tokens on Ethereum, Polygon, Optimism, and more. -
- Trade Tokens -
-
- -
-
- -
-
- Buy crypto -
- - - - -
-
- Buy crypto with your credit card or bank account at the best rates. -
- Buy now -
-
- - -
-
- Earn -
- Analytics -
-
- Provide liquidity to pools on Uniswap and earn fees on swaps. -
- Provide liquidity -
-
- - -
-
- Build dApps -
- - - - -
-
- Build apps and tools on the largest DeFi protocol on Ethereum. -
- Developer docs -
-
- -
-
-
-
- Powered by the Uniswap Protocol -
-
- The leading decentralized crypto trading protocol, governed by a global community. -
-
-
- - Learn more - -
-
-
-
- Uniswap Logo -
- - - discord.svg - - - - - twitter-safe.svg - - - - - github.svg - - -
- - © - 2023 - Uniswap Labs - -
-
-
- - App - - - Swap - - - Tokens - - - Pools - -
-
- - Protocol - - - Community - - - Governance - - - Developers - -
-
- - Company - - - Careers - - - Blog - -
-
- - Get Help - - - Contact Us - - - Help Center - -
-
-
- Uniswap Logo -
- - - discord.svg - - - - - twitter-safe.svg - - - - - github.svg - - -
- - © - 2023 - Uniswap Labs - -
-
-
-
-
-`; - -exports[`disable nft on landing page renders nft information and card 1`] = ` -.c7 { - box-sizing: border-box; - margin: 0; - min-width: 0; -} - -.c15 { - box-sizing: border-box; - margin: 0; - min-width: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - display: inline-block; - text-align: center; - line-height: inherit; - -webkit-text-decoration: none; - text-decoration: none; - font-size: inherit; - padding-left: 16px; - padding-right: 16px; - padding-top: 8px; - padding-bottom: 8px; - color: white; - background-color: primary; - border: 0; - border-radius: 4px; -} - -.c47 { - box-sizing: border-box; - margin: 0; - min-width: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - display: inline-block; - text-align: center; - line-height: inherit; - -webkit-text-decoration: none; - text-decoration: none; - font-size: inherit; - padding-left: 16px; - padding-right: 16px; - padding-top: 8px; - padding-bottom: 8px; - color: white; - background-color: primary; - border: 0; - border-radius: 4px; - font-weight: 535; -} - -.c8 { - width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - padding: 0; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; -} - -.c9 { - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; -} - -.c11 { - width: -webkit-fit-content; - width: -moz-fit-content; - width: fit-content; -} - -.c13 { - color: #222222; -} - -.c26 { - color: #7D7D7D; -} - -.c100 { - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - -webkit-transition-duration: 125ms; - transition-duration: 125ms; - color: #FC72FF; - stroke: #FC72FF; - font-weight: 500; -} - -.c100:hover { - opacity: 0.6; -} - -.c100:active { - opacity: 0.4; -} - -.c98 { - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - -webkit-transition-duration: 125ms; - transition-duration: 125ms; - color: #FC72FF; - stroke: #FC72FF; - font-weight: 500; -} - -.c98:hover { - opacity: 0.6; -} - -.c98:active { - opacity: 0.4; -} - -.c91 { - height: 32px; - width: 32px; - fill: #98A1C0; - opacity: 1; -} - -.c92 { - height: 32px; - width: 32px; - fill: #98A1C0; - opacity: 1; -} - -.c93 { - height: 32px; - width: 32px; - fill: #98A1C0; - opacity: 1; -} - -.c85 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - width: 100%; - gap: 48px; - max-width: 1440px; -} - -.c86 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c87 { - display: none; -} - -.c102 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c88 { - width: 72px; - height: 72px; - display: none; -} - -.c89 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - gap: 20px; - margin: 20px 0 0 0; -} - -.c90 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c95 { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 12px; -} - -.c96 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - gap: 12px; - width: 200px; - margin: 20px 0 0 0; -} - -.c97 { - font-size: 16px; - line-height: 20px; - font-weight: 535; -} - -.c101 { - font-size: 16px; - line-height: 20px; - color: #7D7D7D; -} - -.c99 { - font-size: 16px; - line-height: 20px; - color: #7D7D7D; -} - -.c94 { - font-size: 16px; - line-height: 20px; - margin: 1rem 0 0 0; - color: #CECECE; -} - -.c67 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - background: white url(swapCard.png); - background-size: auto 100%; - background-position: right; - background-repeat: no-repeat; - background-origin: border-box; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-text-decoration: none; - text-decoration: none; - color: #222222; - padding: 24px; - height: 212px; - border-radius: 24px; - border: 1px solid transparent; - -webkit-transition: 250ms ease border; - transition: 250ms ease border; -} - -.c67:hover { - border: 1px solid #CECECE; -} - -.c72 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - background: white url(nftCard.png); - background-size: auto 100%; - background-position: right; - background-repeat: no-repeat; - background-origin: border-box; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-text-decoration: none; - text-decoration: none; - color: #222222; - padding: 24px; - height: 212px; - border-radius: 24px; - border: 1px solid transparent; - -webkit-transition: 250ms ease border; - transition: 250ms ease border; -} - -.c72:hover { - border: 1px solid #CECECE; -} - -.c74 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - background: #F9F9F9 url(undefined); - background-size: auto 100%; - background-position: right; - background-repeat: no-repeat; - background-origin: border-box; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-text-decoration: none; - text-decoration: none; - color: #222222; - padding: 24px; - height: 212px; - border-radius: 24px; - border: 1px solid #22222212; - -webkit-transition: 250ms ease border; - transition: 250ms ease border; -} - -.c74:hover { - border: 1px solid #CECECE; -} - -.c68 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; -} - -.c69 { - font-size: 20px; - line-height: 28px; - font-weight: 535; -} - -.c70 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - font-size: 16px; - line-height: 20px; - color: #222222; - padding: 0 40px 0 0; - max-width: 480px; -} - -.c75 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - font-size: 16px; - line-height: 20px; - color: #7D7D7D; - padding: 0 40px 0 0; - max-width: 480px; -} - -.c71 { - color: #FC72FF; - font-weight: 535; - margin: 24px 0 0; - cursor: pointer; - -webkit-transition: 250ms ease opacity; - transition: 250ms ease opacity; -} - -.c71:hover { - opacity: 0.6; -} - -.c76 { - min-width: 20px; - min-height: 20px; - max-height: 48px; - max-width: 48px; -} - -.c50 { - background-color: transparent; - bottom: 0; - border-radius: inherit; - height: 100%; - left: 0; - position: absolute; - right: 0; - top: 0; - -webkit-transition: 150ms ease background-color; - transition: 150ms ease background-color; - width: 100%; -} - -.c16 { - padding: 16px; - width: 100%; - line-height: 24px; - font-weight: 535; - text-align: center; - border-radius: 16px; - outline: none; - border: 1px solid transparent; - color: #222222; - -webkit-text-decoration: none; - text-decoration: none; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - position: relative; - z-index: 1; - will-change: transform; - -webkit-transition: -webkit-transform 450ms ease; - -webkit-transition: transform 450ms ease; - transition: transform 450ms ease; - -webkit-transform: perspective(1px) translateZ(0); - -ms-transform: perspective(1px) translateZ(0); - transform: perspective(1px) translateZ(0); -} - -.c16:disabled { - opacity: 50%; - cursor: auto; - pointer-events: none; -} - -.c16 > * { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.c16 > a { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c82 { - padding: 16px; - width: 200px; - line-height: 24px; - font-weight: 535; - text-align: center; - border-radius: 16px; - outline: none; - border: 1px solid transparent; - color: #222222; - -webkit-text-decoration: none; - text-decoration: none; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - position: relative; - z-index: 1; - will-change: transform; - -webkit-transition: -webkit-transform 450ms ease; - -webkit-transition: transform 450ms ease; - transition: transform 450ms ease; - -webkit-transform: perspective(1px) translateZ(0); - -ms-transform: perspective(1px) translateZ(0); - transform: perspective(1px) translateZ(0); -} - -.c82:disabled { - opacity: 50%; - cursor: auto; - pointer-events: none; -} - -.c82 > * { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.c82 > a { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c48 { - background-color: #FFEFFF; - color: #FC72FF; - font-size: 20px; - font-weight: 535; -} - -.c48:focus { - box-shadow: 0 0 0 1pt #FFEFFF; - background-color: #FFEFFF; -} - -.c48:hover { - background-color: #FFEFFF; -} - -.c48:active { - box-shadow: 0 0 0 1pt #FFEFFF; - background-color: #FFEFFF; -} - -.c48:hover .c49 { - background-color: #98A1C014; -} - -.c48:active .c49 { - background-color: #B8C0DC3d; -} - -.c48:disabled { - opacity: 0.4; -} - -.c48:disabled:hover { - cursor: auto; - background-color: transparent; - box-shadow: none; - border: 1px solid transparent; - outline: none; -} - -.c30 { - background-color: #FFFFFF; - color: #7D7D7D; - border: 1px solid #22222212; - font-size: 16px; - font-weight: 535; -} - -.c30:hover { - background-color: #ececec; -} - -.c30:active { - background-color: #e0e0e0; -} - -.c83 { - background-color: transparent; - color: #FC72FF; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c83:focus { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.c83:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c83:active { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c83:disabled { - opacity: 50%; - cursor: auto; -} - -.c17 { - padding: 0; - width: -webkit-fit-content; - width: -moz-fit-content; - width: fit-content; - background: none; - -webkit-text-decoration: none; - text-decoration: none; -} - -.c17:focus { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.c17:hover { - opacity: 0.9; -} - -.c17:active { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.c17:disabled { - opacity: 50%; - cursor: auto; -} - -.c77 { - height: 340px; - width: 100%; - border-radius: 32px; - max-width: 1440px; - margin: 80px 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - padding: 32px 48px; - box-shadow: 0px 10px 24px rgba(51,53,72,0.04); - background: url(Mesh.png),linear-gradient(93.06deg,#FF00C7 2.66%,#FF9FFB 98.99%); -} - -.c78 { - color: white; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c79 { - font-weight: 535; - font-size: 28px; - line-height: 36px; -} - -.c80 { - margin: 10px 10px 0 0; - font-weight: 535; - font-size: 16px; - line-height: 20px; -} - -.c81 { - width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-transition: 250ms ease opacity; - transition: 250ms ease opacity; -} - -.c81:hover { - opacity: 0.6; -} - -.c84 { - color: white; - border: 1px solid white; -} - -.c43 { - display: grid; - grid-auto-rows: auto; - grid-row-gap: 4px; -} - -.c40 { - -webkit-filter: none; - filter: none; - opacity: 1; - -webkit-transition: opacity 250ms ease-in-out; - transition: opacity 250ms ease-in-out; -} - -.c14 { - display: inline-block; - height: inherit; -} - -.c35 { - opacity: 0; - -webkit-transition: opacity 250ms ease-in; - transition: opacity 250ms ease-in; - width: 24px; - height: 24px; - border-radius: 50%; -} - -.c34 { - width: 24px; - height: 24px; - background: #22222212; - -webkit-transition: background-color 250ms ease-in; - transition: background-color 250ms ease-in; - box-shadow: 0 0 1px white; - border-radius: 50%; -} - -.c33 { - position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c28 { - color: #222222; - pointer-events: auto; - width: 0; - position: relative; - font-weight: 485; - outline: none; - border: none; - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - background-color: transparent; - font-size: 28px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - padding: 0px; - -webkit-appearance: textfield; - text-align: right; -} - -.c28::-webkit-search-decoration { - -webkit-appearance: none; -} - -.c28 [type='number'] { - -moz-appearance: textfield; -} - -.c28::-webkit-outer-spin-button, -.c28::-webkit-inner-spin-button { - -webkit-appearance: none; -} - -.c28::-webkit-input-placeholder { - color: #CECECE; -} - -.c28::-moz-placeholder { - color: #CECECE; -} - -.c28:-ms-input-placeholder { - color: #CECECE; -} - -.c28::placeholder { - color: #CECECE; -} - -.c24 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-flow: column nowrap; - -ms-flex-flow: column nowrap; - flex-flow: column nowrap; - position: relative; - border-radius: 20px; - z-index: 1; - width: initial; - -webkit-transition: height 1s ease; - transition: height 1s ease; - will-change: height; -} - -.c25 { - min-height: 44px; - border-radius: 20px; - width: initial; -} - -.c31 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - background-color: #FFFFFF; - opacity: 1; - color: #222222; - cursor: pointer; - height: 36px; - border-radius: 18px; - outline: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border: 1px solid #22222212; - font-size: 24px; - font-weight: 485; - width: initial; - padding: 4px 8px 4px 4px; - gap: 8px; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - margin-left: 12px; - box-shadow: 0px 0px 10px 0px rgba(34,34,34,0.04); - visibility: visible; - -webkit-animation: none; - animation: none; -} - -.c31:hover, -.c31:active { - background-color: #F9F9F9; -} - -.c31:before { - background-size: 100%; - border-radius: inherit; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - content: ''; -} - -.c31:hover:before { - background-color: #98A1C014; -} - -.c31:active:before { - background-color: #B8C0DC3d; -} - -.c45 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - background-color: #FC72FF; - opacity: 1; - color: #FFFFFF; - cursor: pointer; - height: 36px; - border-radius: 18px; - outline: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border: 1px solid #FC72FF; - font-size: 24px; - font-weight: 485; - width: initial; - padding: 6px 6px 6px 8px; - gap: 8px; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - margin-left: 12px; - box-shadow: 0px 0px 10px 0px rgba(34,34,34,0.04); - visibility: visible; - -webkit-animation: none; - animation: none; -} - -.c45:hover, -.c45:active { - background-color: #FC72FF; -} - -.c45:before { - background-size: 100%; - border-radius: inherit; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - content: ''; -} - -.c45:hover:before { - background-color: #98A1C014; -} - -.c45:active:before { - background-color: #B8C0DC3d; -} - -.c27 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-flow: row nowrap; - -ms-flex-flow: row nowrap; - flex-flow: row nowrap; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; -} - -.c38 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-flow: row nowrap; - -ms-flex-flow: row nowrap; - flex-flow: row nowrap; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: #7D7D7D; - font-size: 0.75rem; - line-height: 1rem; -} - -.c38 span:hover { - cursor: pointer; - color: #4a4a4a; -} - -.c39 { - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -ms-flex-pack: end; - justify-content: flex-end; - min-height: 24px; - padding: 8px 0px 0px 0px; -} - -.c32 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - width: 100%; -} - -.c37 { - margin: 0 0.25rem 0 0.35rem; - height: 35%; - margin-left: 8px; -} - -.c37 path { - stroke: #222222; - stroke-width: 2px; -} - -.c46 { - margin: 0 0.25rem 0 0.35rem; - height: 35%; - margin-left: 8px; -} - -.c46 path { - stroke: #FFFFFF; - stroke-width: 2px; -} - -.c36 { - margin: 0 0.25rem 0 0.25rem; - font-size: 20px; - font-weight: 535; -} - -.c29 { - -webkit-filter: none; - filter: none; - opacity: 1; - -webkit-transition: opacity 250ms ease-in-out; - transition: opacity 250ms ease-in-out; - text-align: left; - font-size: 36px; - font-weight: 485; - max-height: 44px; -} - -.c3 { - padding: 68px 8px 0px; - max-width: 480px; - width: 100%; -} - -.c4 { - position: relative; - z-index: 1; - border: 1px solid #22222212; - -webkit-transition: -webkit-transform 250ms ease; - -webkit-transition: transform 250ms ease; - transition: transform 250ms ease; - border-radius: 24px; -} - -.c4:before { - content: ' '; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: absolute; - inset: 0; - -webkit-transform: scale(1.1); - -ms-transform: scale(1.1); - transform: scale(1.1); - -webkit-filter: blur(50px); - filter: blur(50px); - background-color: rgba(252,114,255,0.075); - z-index: -2; -} - -.c4:hover { - border: 1px solid #22222212; -} - -.c6 { - border-radius: 24px; - background: #FFFFFF; - z-index: -1; - padding: 8px; - padding-top: 12px; -} - -.c41 { - border-radius: 12px; - height: 40px; - width: 40px; - position: relative; - margin-top: -18px; - margin-bottom: -18px; - margin-left: auto; - margin-right: auto; - background-color: #F9F9F9; - border: 4px solid; - border-color: #FFFFFF; - z-index: 2; -} - -.c41:hover { - cursor: pointer; - opacity: 0.8; -} - -.c22 { - height: 24px; - width: 24px; -} - -.c22 > * { - fill: #7D7D7D; -} - -.c20 { - border: none; - background-color: transparent; - margin: 0; - padding: 0; - cursor: pointer; - outline: none; -} - -.c20:not([disabled]):hover { - opacity: 0.7; -} - -.c21 { - padding: 6px 12px; - border-radius: 16px; -} - -.c19 { - position: relative; -} - -.c18 { - color: #7D7D7D; - gap: 4px; - font-weight: 485; -} - -.c18:focus { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c18:active { - -webkit-text-decoration: none; - text-decoration: none; -} - -.c10 { - margin-bottom: 10px; - color: #7D7D7D; -} - -.c12 { - padding: 0 12px; - gap: 16px; -} - -.c42 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - height: 100%; -} - -.c23 { - background-color: #F9F9F9; - border-radius: 16px; - color: #7D7D7D; - font-size: 14px; - font-weight: 500; - height: 120px; - line-height: 20px; - padding: 16px; - position: relative; -} - -.c23:before { - box-sizing: border-box; - background-size: 100%; - border-radius: inherit; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - pointer-events: none; - content: ''; - border: 1px solid #F9F9F9; -} - -.c23:hover:before { - border-color: #98A1C014; -} - -.c23:focus-within:before { - border-color: #B8C0DC3d; -} - -.c44 { - border-bottom: 1px solid #FFFFFF; -} - -.c0 { - position: absolute; - top: 0; - padding: 72px 0px 0px 0px; - width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-scroll-behavior: smooth; - -moz-scroll-behavior: smooth; - -ms-scroll-behavior: smooth; - scroll-behavior: smooth; - overflow-x: hidden; -} - -.c51 { - position: absolute; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - top: 0; - bottom: 0; - width: 100%; - min-height: 550px; - background: linear-gradient(rgba(255,255,255,0) 0%,rgb(255 255 255 /100%) 45%); - z-index: 990; - pointer-events: none; - height: calc(100vh - 48px); -} - -.c52 { - position: absolute; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - top: 0; - bottom: 0; - width: 100%; - overflow-y: hidden; - height: calc(100vh - 48px); -} - -.c53 { - position: absolute; - top: 68px; - bottom: 0; - background: radial-gradient(72.04% 72.04% at 50% 3.99%,#ff37eb 0%,rgba(166,151,255,0) 100%); - -webkit-filter: blur(72px); - filter: blur(72px); - border-radius: 24px; - max-width: 480px; - width: 100%; - height: 100%; -} - -.c54 { - position: absolute; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -ms-flex-pack: end; - justify-content: flex-end; - width: 100%; - padding: 0 0 40px; - max-width: min(720px,90%); - min-height: 535px; - z-index: 990; - -webkit-transition: 250ms ease opacity; - transition: 250ms ease opacity; - height: calc(100vh - 120px); - pointer-events: none; -} - -.c54 * { - pointer-events: auto; -} - -.c64 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - gap: 8px; - margin-top: 24px; - color: #7D7D7D; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 16px; - line-height: 24px; - font-weight: 535; - text-align: center; -} - -.c64:hover { - color: #CECECE; -} - -.c55 { - color: transparent; - font-size: 36px; - line-height: 44px; - font-weight: 535; - text-align: center; - margin: 0 0 24px; - background: linear-gradient(10deg,rgba(255,79,184,1) 0%,rgba(255,159,251,1) 100%); - background-clip: text; - -webkit-background-clip: text; -} - -.c57 { - color: #7D7D7D; - font-size: 16px; - line-height: 24px; - font-weight: 535; - text-align: center; - max-width: 500px; - margin: 0 0 32px; -} - -.c56 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c59 { - padding: 16px 0px; - border-radius: 24px; -} - -.c60 { - background: linear-gradient(93.06deg,#ff00c7 2.66%,#ff9ffb 98.99%); - border: none; - color: #FFFFFF; - -webkit-transition: all 250ms ease; - transition: all 250ms ease; -} - -.c60:hover { - box-shadow: 0px 0px 16px 0px #ff00c7; -} - -.c61 { - margin: 0px; - font-size: 16px; - font-weight: 535; - white-space: nowrap; -} - -.c58 { - max-width: 300px; - width: 100%; - pointer-events: auto; -} - -.c62 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: #CECECE; - cursor: pointer; - font-size: 20px; - font-weight: 535; - margin: 36px 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - visibility: hidden; - pointer-events: auto; - -webkit-transition: 250ms ease opacity; - transition: 250ms ease opacity; -} - -.c62:hover { - opacity: 0.6; -} - -.c63 { - margin-left: 14px; - size: 20px; -} - -.c65 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 0 24px 5rem; - width: 100%; - background: linear-gradient(179.82deg,rgba(255,255,255,0) 0.16%,#eaeaea 99.85%); -} - -.c66 { - display: grid; - gap: 12px; - width: 100%; - padding: 24px 0 0; - max-width: 1440px; - -webkit-scroll-margin: 72px 0 0; - -moz-scroll-margin: 72px 0 0; - -ms-scroll-margin: 72px 0 0; - scroll-margin: 72px 0 0; - grid-template-columns: 1fr; -} - -.c73 { - display: grid; - gap: 12px; - width: 100%; - padding: 24px 0 0; - max-width: 1440px; - -webkit-scroll-margin: 72px 0 0; - -moz-scroll-margin: 72px 0 0; - -ms-scroll-margin: 72px 0 0; - scroll-margin: 72px 0 0; - grid-template-columns: 1fr; -} - -.c1 { - height: calc(100vh - 48px); - width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - z-index: 1; -} - -.c5 * { - pointer-events: none; -} - -.c5:hover { - -webkit-transform: translateY(-4px); - -ms-transform: translateY(-4px); - transform: translateY(-4px); - -webkit-transition: -webkit-transform 250ms ease; - -webkit-transition: transform 250ms ease; - transition: transform 250ms ease; -} - -.c5:hover { - border: 1px solid #FC72FF; -} - -.c2 { - -webkit-text-decoration: none; - text-decoration: none; - max-width: 480px; - width: 100%; -} - -@media screen and (min-width:1024px) { - .c85 { - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - } -} - -@media screen and (min-width:1024px) { - .c87 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - } -} - -@media screen and (min-width:1024px) { - .c102 { - display: none; - } -} - -@media screen and (min-width:1024px) { - .c88 { - display: block; - } -} - -@media screen and (min-width:1280px) { - .c95 { - grid-template-columns: 1fr 1fr 1fr 1fr; - gap: 24px; - } -} - -@media screen and (min-width:1280px) { - .c96 { - margin: 0; - } -} - -@media screen and (min-width:640px) { - .c67 { - height: 360px; - } -} - -@media screen and (min-width:1280px) { - .c67 { - padding: 32px; - } -} - -@media screen and (min-width:640px) { - .c72 { - height: 360px; - } -} - -@media screen and (min-width:1280px) { - .c72 { - padding: 32px; - } -} - -@media screen and (min-width:640px) { - .c74 { - height: 260px; - } -} - -@media screen and (min-width:1280px) { - .c74 { - padding: 32px; - } -} - -@media screen and (min-width:1024px) { - .c69 { - font-size: 28px; - line-height: 36px; - } -} - -@media screen and (min-width:1280px) { - .c70 { - font-size: 20px; - line-height: 28px; - max-width: 480px; - } -} - -@media screen and (min-width:1280px) { - .c75 { - font-size: 20px; - line-height: 28px; - max-width: 480px; - } -} - -@media screen and (min-width:1024px) { - .c77 { - height: 140px; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - } -} - -@media screen and (min-width:1280px) { - .c79 { - font-size: 28px; - line-height: 36px; - } -} - -@media screen and (min-width:1280px) { - .c80 { - font-size: 20px; - line-height: 28px; - } -} - -@media screen and (min-width:1024px) { - .c81 { - width: auto; - } -} - -@media only screen and (max-width:768px) { - .c3 { - padding-top: 48px; - } -} - -@media only screen and (max-width:640px) { - .c3 { - padding-top: 20px; - } -} - -@media screen and (min-width:768px) { - .c51 { - height: 100vh; - } -} - -@media screen and (min-width:768px) { - .c52 { - height: 100vh; - } -} - -@media screen and (min-width:640px) { - .c55 { - font-size: 48px; - line-height: 56px; - } -} - -@media screen and (min-width:768px) { - .c55 { - font-size: 64px; - line-height: 72px; - } -} - -@media screen and (min-width:768px) { - .c57 { - font-size: 20px; - line-height: 28px; - } -} - -@media screen and (min-width:640px) { - .c61 { - font-size: 20px; - } -} - -@media screen and (min-width:640px) { - .c62 { - visibility: visible; - } -} - -@media screen and (min-width:768px) { .c65 { - padding: 0 96px 5rem; - } -} - -@media screen and (min-width:640px) { - .c66 { grid-template-columns: 1fr 1fr; gap: 32px; } } @media screen and (min-width:1024px) { - .c66 { + .c65 { grid-template-columns: 1fr 1fr; gap: 32px; } } @media screen and (min-width:640px) { - .c73 { + .c72 { grid-template-columns: 1fr; gap: 32px; } } @media screen and (min-width:1024px) { - .c73 { + .c72 { grid-template-columns: 1fr 1fr 1fr; gap: 32px; } @@ -4753,36 +4724,9 @@ exports[`disable nft on landing page renders nft information and card 1`] = ` class="c62" > Learn more - - - - -
- Download the Uniswap Wallet for iOS + Download the Uniswap app for iOS
Swap tokens
Buy, sell, and explore tokens on Ethereum, Polygon, Optimism, and more.
Trade Tokens @@ -4832,25 +4776,25 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Trade NFTs
Buy and sell NFTs across marketplaces to find more listings at better prices.
Explore NFTs @@ -4859,20 +4803,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Buy crypto
@@ -4899,12 +4843,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Buy crypto with your credit card or bank account at the best rates.
Buy now @@ -4912,30 +4856,30 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Earn
Analytics
Provide liquidity to pools on Uniswap and earn fees on swaps.
Provide liquidity @@ -4943,16 +4887,16 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Build dApps
@@ -4979,12 +4923,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Build apps and tools on the largest DeFi protocol on Ethereum.
Developer docs @@ -4993,27 +4937,27 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
Powered by the Uniswap Protocol
The leading decentralized crypto trading protocol, governed by a global community.
Uniswap Logo
+ + discord.svg + + + - discord.svg + twitter-safe.svg - twitter-safe.svg - - - - github.svg
© 2023 @@ -5086,51 +5030,51 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
App Swap Tokens NFTs Pools
Protocol
Company
Get Help
Uniswap Logo
+ + discord.svg + + + - discord.svg + twitter-safe.svg - twitter-safe.svg - - - - github.svg
© 2023 diff --git a/src/pages/Landing/index.tsx b/src/pages/Landing/index.tsx index 657c722893..5bb3dc610d 100644 --- a/src/pages/Landing/index.tsx +++ b/src/pages/Landing/index.tsx @@ -1,6 +1,7 @@ import { Trans } from '@lingui/macro' import { BrowserEvent, InterfaceElementName, InterfacePageName, SharedEventName } from '@uniswap/analytics-events' import { Trace, TraceEvent } from 'analytics' +import { ReactComponent as UniswapAppLogo } from 'assets/svg/uniswap_app_logo.svg' import { AboutFooter } from 'components/About/AboutFooter' import Card, { CardType } from 'components/About/Card' import { MAIN_CARDS, MORE_CARDS } from 'components/About/constants' @@ -8,11 +9,11 @@ import ProtocolBanner from 'components/About/ProtocolBanner' import { useAccountDrawer } from 'components/AccountDrawer' import { BaseButton } from 'components/Button' import { AppleLogo } from 'components/Logo/AppleLogo' +import { useAndroidGALaunchFlagEnabled } from 'featureFlags/flags/androidGALaunch' import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes' import Swap from 'pages/Swap' import { parse } from 'qs' import { useEffect, useMemo, useRef } from 'react' -import { ArrowDownCircle } from 'react-feather' import { Navigate, useLocation, useNavigate } from 'react-router-dom' import { Link as NativeLink } from 'react-router-dom' import { useAppSelector } from 'state/hooks' @@ -116,6 +117,7 @@ const DownloadWalletLink = styled.a` line-height: 24px; font-weight: 535; text-align: center; + align-items: center; :hover { color: ${({ theme }) => theme.neutral3}; @@ -210,7 +212,7 @@ const LearnMoreContainer = styled.div` cursor: pointer; font-size: 20px; font-weight: 535; - margin: 36px 0; + margin: 18px 0 36px; display: flex; visibility: hidden; pointer-events: auto; @@ -225,11 +227,6 @@ const LearnMoreContainer = styled.div` } ` -const LearnMoreArrow = styled(ArrowDownCircle)` - margin-left: 14px; - size: 20px; -` - const AboutContentContainer = styled.div<{ isDarkMode: boolean }>` display: flex; flex-direction: column; @@ -318,12 +315,15 @@ export default function Landing() { const isDarkMode = useIsDarkMode() const cardsRef = useRef(null) const selectedWallet = useAppSelector((state) => state.user.selectedWallet) + const shouldDisableNFTRoutes = useDisableNFTRoutes() const cards = useMemo( () => MAIN_CARDS.filter((card) => !(shouldDisableNFTRoutes && card.to.startsWith('/nft'))), [shouldDisableNFTRoutes] ) + const isAndroidGALaunched = useAndroidGALaunchFlagEnabled() + const [accountDrawerOpen] = useAccountDrawer() const navigate = useNavigate() useEffect(() => { @@ -395,7 +395,6 @@ export default function Landing() { }} > Learn more - - - Download the Uniswap Wallet for iOS + {isAndroidGALaunched ? ( + <> + + Download the Uniswap app + + ) : ( + <> + + Download the Uniswap app for iOS + + )}