diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 68c41fd1c..1f966eb1e 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -771,6 +771,10 @@ { "title": "Environmental Impact", "description": "How Solana is supporting a greener web3." + }, + { + "title": "Wallets", + "description": "Experience the power of Solana." } ] } @@ -867,6 +871,12 @@ }, { "title": "Financial Institutions" + }, + { + "title": "Loyalty" + }, + { + "title": "Defi" } ] }, diff --git a/public/src/img/solana-wallets/gem.png b/public/src/img/solana-wallets/gem.png new file mode 100644 index 000000000..342d6c7f4 Binary files /dev/null and b/public/src/img/solana-wallets/gem.png differ diff --git a/rewrites-redirects.json b/rewrites-redirects.json index a5055c9e0..ec170760d 100644 --- a/rewrites-redirects.json +++ b/rewrites-redirects.json @@ -124,6 +124,30 @@ "source": "/environment", "destination": "https://climate.solana.com/" }, - { "source": "/breakpoint/side-events", "destination": "/breakpoint" } + { "source": "/breakpoint/side-events", "destination": "/breakpoint" }, + { + "source": "/solutions/payments-tooling", + "destination": "/solutions/payments" + }, + { + "source": "/solana-wallets", + "destination": "/solutions/wallets-explorer" + }, + { + "source": "/solutions/games-tooling", + "destination": "/solutions/gaming" + }, + { + "source": "/solutions/artists-creators", + "destination": "/solutions/creative" + }, + { + "source": "/solutions/financial-institutions", + "destination": "/solutions/institutional-finance" + }, + { + "source": "/wallets", + "destination": "/solutions/wallets" + } ] } diff --git a/src/components/header/HeaderListLearn.js b/src/components/header/HeaderListLearn.js index f1f4417d8..be13cdaa5 100644 --- a/src/components/header/HeaderListLearn.js +++ b/src/components/header/HeaderListLearn.js @@ -14,6 +14,16 @@ const HeaderListLearn = () => { {t("nav.learn.start.title")}
+ + + {learnStartItems[3].title} + + {learnStartItems[3].description} + { @@ -44,7 +44,7 @@ const HeaderListSolutions = () => { @@ -62,7 +62,7 @@ const HeaderListSolutions = () => { @@ -71,7 +71,7 @@ const HeaderListSolutions = () => { @@ -155,7 +155,7 @@ const HeaderListSolutions = () => { @@ -164,7 +164,7 @@ const HeaderListSolutions = () => { @@ -172,6 +172,24 @@ const HeaderListSolutions = () => { {solutionsCasesItems[3].title} + + + {solutionsCasesItems[4].title} + + + + + {solutionsCasesItems[5].title} + +
diff --git a/src/data/wallets/wallet-data.js b/src/data/wallets/wallet-data.js index 3413aa950..97848dd35 100644 --- a/src/data/wallets/wallet-data.js +++ b/src/data/wallets/wallet-data.js @@ -1,29 +1,31 @@ -import defaultIcon from "../../../assets/wallets/wallet-placeholder-icon.png"; -import phantomIcon from "../../../assets/wallets/icons/phantom.png"; -import backpackIcon from "../../../assets/wallets/icons/backpack.png"; -import solflareIcon from "../../../assets/wallets/icons/solflare.png"; -import fuseIcon from "../../../assets/wallets/icons/fuse.png"; -import capsuleIcon from "../../../assets/wallets/icons/capsule.png"; -import okxIcon from "../../../assets/wallets/icons/okx.png"; -import circleIcon from "../../../assets/wallets/icons/circle.png"; -import robinhoodIcon from "../../../assets/wallets/icons/robinhood.png"; -import heliumIcon from "../../../assets/wallets/icons/helium.png"; -import privyIcon from "../../../assets/wallets/icons/privy.png"; -import walletConnectIcon from "../../../assets/wallets/icons/walletconnect.png"; -import bitGetIcon from "../../../assets/wallets/icons/bitget.png"; -import braveIcon from "../../../assets/wallets/icons/brave.png"; -import crossmintIcon from "../../../assets/wallets/icons/crossmint.png"; -import decafIcon from "../../../assets/wallets/icons/decaf.png"; -import ledgerIcon from "../../../assets/wallets/icons/ledger.png"; -import tiplinkIcon from "../../../assets/wallets/icons/tiplink.png"; -import trustWalletCoreIcon from "../../../assets/wallets/icons/trustwalletcore.png"; -import web3authIcon from "../../../assets/wallets/icons/web3auth.png"; -import binanceIcon from "../../../assets/wallets/icons/binance.png"; -import exodusIcon from "../../../assets/wallets/icons/exodus.png"; -import keystoneIcon from "../../../assets/wallets/icons/keystone.png"; -import turnkeyIcon from "../../../assets/wallets/icons/turnkey.png"; -import gemIcon from "../../../assets/wallets/icons/gem.png"; -import dynamicIcon from "../../../assets/wallets/icons/dynamic.png"; +import backpackIcon from "../../../public/src/img/solana-wallets/Backpack.svg"; +import binanceIcon from "../../../public/src/img/solana-wallets/Binance.svg"; +import bitGetIcon from "../../../public/src/img/solana-wallets/Bitget.svg"; +import braveIcon from "../../../public/src/img/solana-wallets/Brave.svg"; +import capsuleIcon from "../../../public/src/img/solana-wallets/Capsule.svg"; +import circleIcon from "../../../public/src/img/solana-wallets/Circle.svg"; +import coinbaseIcon from "../../../public/src/img/solana-wallets/Coinbase.svg"; +import crossmintCustodialIcon from "../../../public/src/img/solana-wallets/CrossmintCustodial.svg"; +import crossmintNoncustodialIcon from "../../../public/src/img/solana-wallets/CorssmintNoncustodial.svg"; +import decafIcon from "../../../public/src/img/solana-wallets/Decaf.svg"; +import dynamicIcon from "../../../public/src/img/solana-wallets/Dynamic.svg"; +import exodusIcon from "../../../public/src/img/solana-wallets/Exodus.svg"; +import fuseIcon from "../../../public/src/img/solana-wallets/Fuse.svg"; +import glowIcon from "../../../public/src/img/solana-wallets/Glow.svg"; +import heliumIcon from "../../../public/src/img/solana-wallets/Helium.svg"; +import keystoneIcon from "../../../public/src/img/solana-wallets/KeyStone.svg"; +import ledgerIcon from "../../../public/src/img/solana-wallets/Ledger.svg"; +import okxIcon from "../../../public/src/img/solana-wallets/OKX.svg"; +import passkeysIcon from "../../../public/src/img/solana-wallets/Passkeys-Foundation.svg"; +import phantomIcon from "../../../public/src/img/solana-wallets/Phantom.svg"; +import privyIcon from "../../../public/src/img/solana-wallets/Privy.svg"; +import robinhoodIcon from "../../../public/src/img/solana-wallets/Robinhood.svg"; +import solflareIcon from "../../../public/src/img/solana-wallets/Solflare.svg"; +import tiplinkIcon from "../../../public/src/img/solana-wallets/Tiplink.svg"; +import trezorIcon from "../../../public/src/img/solana-wallets/Trezor.svg"; +import trustWalletCoreIcon from "../../../public/src/img/solana-wallets/Trust.svg"; +import turnkeyIcon from "../../../public/src/img/solana-wallets/TurnKey.svg"; +import web3authIcon from "../../../public/src/img/solana-wallets/Web3Auth.svg"; export const walletData = [ { @@ -33,6 +35,9 @@ export const walletData = [ additionalInfo: "Non-Custodial/Self Custodial • Token Extensions • Actions & Blinks • Solana Pay • Buy Crypto • Sell Crypto • Hold NFTs • Staking", icon: phantomIcon, + new_to_crypto: true, + developer: false, + hardware: false, custodial: false, non_custodial: true, te: true, @@ -47,7 +52,6 @@ export const walletData = [ staking: true, spending_limits: false, open_source: false, - hardware: false, private_key_infrastructure: false, }, { @@ -57,6 +61,9 @@ export const walletData = [ additionalInfo: "Non-Custodial/Self Custodial • Token Extensions • Actions & Blinks • Solana Pay • Hold NFTs • Staking • Open Source", icon: backpackIcon, + new_to_crypto: true, + developer: false, + hardware: false, custodial: false, non_custodial: true, te: true, @@ -71,7 +78,6 @@ export const walletData = [ staking: true, spending_limits: false, open_source: true, - hardware: false, private_key_infrastructure: false, }, { @@ -81,6 +87,9 @@ export const walletData = [ additionalInfo: "Non-Custodial/Self Custodial • Token Extensions • Actions & Blinks • Solana Pay • Buy Crypto • Sell Crypto • Hold NFTs • Staking", icon: solflareIcon, + new_to_crypto: true, + developer: false, + hardware: false, custodial: false, non_custodial: true, te: true, @@ -95,7 +104,6 @@ export const walletData = [ staking: true, spending_limits: false, open_source: false, - hardware: false, private_key_infrastructure: false, }, { @@ -104,7 +112,10 @@ export const walletData = [ website: "https://www.coinbase.com/wallet", additionalInfo: "Non-Custodial/Self Custodial • Buy Crypto • Sell Crypto • Hold NFTs • MPC • Social recovery • Staking • Spending Limits • Open Source", - icon: defaultIcon, + icon: coinbaseIcon, + new_to_crypto: true, + developer: false, + hardware: false, custodial: false, non_custodial: true, te: false, @@ -115,11 +126,10 @@ export const walletData = [ hold_nfts: true, mpc: true, gas_abstraction: false, - social_recovery: false, + social_recovery: true, staking: true, spending_limits: true, open_source: true, - hardware: false, private_key_infrastructure: false, }, { @@ -129,6 +139,9 @@ export const walletData = [ additionalInfo: "Non-Custodial/Self Custodial • Buy Crypto • Sell Crypto • Hold NFTs • MPC • Gas Abstraction • Social recovery • Staking • Spending Limits • Open Source", icon: fuseIcon, + new_to_crypto: false, + developer: false, + hardware: false, custodial: false, non_custodial: true, te: false, @@ -143,7 +156,6 @@ export const walletData = [ staking: true, spending_limits: true, open_source: false, - hardware: false, private_key_infrastructure: false, }, { @@ -153,21 +165,23 @@ export const walletData = [ additionalInfo: "Non-Custodial/Self Custodial • Actions & Blinks • Buy Crypto • Sell Crypto • Hold NFTs • Gas Abstraction • Social Recovery", icon: dynamicIcon, + new_to_crypto: false, + developer: true, + hardware: false, custodial: false, - non_custodial: false, + non_custodial: true, te: false, - blinks_and_actions: false, + blinks_and_actions: true, solana_pay: false, - buy_crypto: false, - sell_crypto: false, + buy_crypto: true, + sell_crypto: true, hold_nfts: true, mpc: false, - gas_abstraction: false, - social_recovery: false, + gas_abstraction: true, + social_recovery: true, staking: false, spending_limits: false, open_source: false, - hardware: false, private_key_infrastructure: false, }, { @@ -177,6 +191,9 @@ export const walletData = [ additionalInfo: "Non-Custodial/Self Custodial • Token Extensions • Buy Crypto • Sell Crytpo • Hold NFTs • MPC • Gas Abstraction • Social recovery • Staking • Spending Limits • Open Source", icon: capsuleIcon, + new_to_crypto: false, + developer: true, + hardware: false, custodial: false, non_custodial: true, te: true, @@ -191,7 +208,6 @@ export const walletData = [ staking: true, spending_limits: true, open_source: true, - hardware: false, private_key_infrastructure: false, }, { @@ -201,6 +217,9 @@ export const walletData = [ additionalInfo: "Custodial • Token Extensions • Acttions & Blinks • Buy Crypto • Sell Crypto • Nold NFTs • Social recovery • Staking", icon: okxIcon, + new_to_crypto: true, + developer: false, + hardware: false, custodial: true, non_custodial: false, te: true, @@ -215,7 +234,6 @@ export const walletData = [ staking: true, spending_limits: false, open_source: false, - hardware: false, private_key_infrastructure: false, }, { @@ -225,6 +243,9 @@ export const walletData = [ additionalInfo: "Non-Custodial/Self Custodial • Token Extensions • Actions & Blinks • Buy Crypto • Sell Crypto • Hold NFTs • MPC • Gas Abstraction", icon: privyIcon, + new_to_crypto: false, + developer: true, + hardware: false, custodial: false, non_custodial: true, te: true, @@ -239,31 +260,32 @@ export const walletData = [ staking: false, spending_limits: false, open_source: false, - hardware: false, private_key_infrastructure: false, }, { name: "Web3Auth", body: "An open source, non-custodial key management network. Making Web3 simple, secure, and easy to use.", - website: "https://tor.us/", + website: "https://web3auth.io/", additionalInfo: "Non-Custodial/Self Custodial • Token Extensions • Solana Pay • Buy Crypto • Sell Crypto • Hold NFTs • MPC • Gas Abstraction • Social recovery • Staking • Open Source", icon: web3authIcon, + new_to_crypto: false, + developer: true, + hardware: false, custodial: false, non_custodial: true, - te: false, + te: true, blinks_and_actions: false, solana_pay: true, - buy_crypto: false, - sell_crypto: false, + buy_crypto: true, + sell_crypto: true, hold_nfts: true, mpc: true, - gas_abstraction: false, + gas_abstraction: true, social_recovery: true, - staking: false, + staking: true, spending_limits: false, open_source: true, - hardware: false, private_key_infrastructure: false, }, { @@ -273,21 +295,23 @@ export const walletData = [ additionalInfo: "Non-Custodial/Self Custodial • Token Extensions • Buy Crypto • Sell Crypto • Hold NFTs • Staking", icon: exodusIcon, + new_to_crypto: true, + developer: true, + hardware: false, custodial: false, non_custodial: true, te: true, blinks_and_actions: false, solana_pay: false, - buy_crypto: false, - sell_crypto: false, + buy_crypto: true, + sell_crypto: true, hold_nfts: true, - mpc: true, - gas_abstraction: true, - social_recovery: true, - staking: false, + mpc: false, + gas_abstraction: false, + social_recovery: false, + staking: true, spending_limits: false, open_source: false, - hardware: false, private_key_infrastructure: false, }, { @@ -298,6 +322,9 @@ export const walletData = [ additionalInfo: "Non-Custodial/Self Custodial • Token Extentions • Hold NFTs • Gas abstraction", icon: circleIcon, + new_to_crypto: true, + developer: true, + hardware: false, custodial: false, non_custodial: true, te: true, @@ -312,7 +339,6 @@ export const walletData = [ staking: false, spending_limits: false, open_source: false, - hardware: false, private_key_infrastructure: false, }, { @@ -322,6 +348,9 @@ export const walletData = [ additionalInfo: "Non-Custodial/Self Custodial • Token Extensions • Actions & Blinks • Buy Crypto • Sell Crypto • Hold NFTs • Spending Limits", icon: braveIcon, + new_to_crypto: true, + developer: false, + hardware: false, custodial: false, non_custodial: true, te: true, @@ -336,7 +365,6 @@ export const walletData = [ staking: false, spending_limits: true, open_source: false, - hardware: false, private_key_infrastructure: false, }, { @@ -346,6 +374,9 @@ export const walletData = [ additionalInfo: "Custodial • Buy Crypto • Sell Crypto • Social recovery • Staking • Spending Limits", icon: robinhoodIcon, + new_to_crypto: true, + developer: false, + hardware: false, custodial: true, non_custodial: false, te: false, @@ -360,7 +391,6 @@ export const walletData = [ staking: true, spending_limits: true, open_source: false, - hardware: false, private_key_infrastructure: false, }, { @@ -370,6 +400,9 @@ export const walletData = [ additionalInfo: "Custodial • Token Extensions • Actions & Blinks • Solana Pay • Buy Crypto • Sell Crypto • Hold NFTs • Gas Abstraction", icon: tiplinkIcon, + new_to_crypto: true, + developer: false, + hardware: false, custodial: true, non_custodial: false, te: true, @@ -384,7 +417,6 @@ export const walletData = [ staking: false, spending_limits: false, open_source: false, - hardware: false, private_key_infrastructure: false, }, { @@ -394,6 +426,9 @@ export const walletData = [ additionalInfo: "Vorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.", icon: trustWalletCoreIcon, + new_to_crypto: true, + developer: false, + hardware: false, custodial: false, non_custodial: false, te: false, @@ -408,7 +443,6 @@ export const walletData = [ staking: false, spending_limits: false, open_source: false, - hardware: false, private_key_infrastructure: false, }, { @@ -417,7 +451,10 @@ export const walletData = [ website: "https://glow.app/", additionalInfo: "Non-Custodial/Self Custodial • Token Extensions • Actions & Blinks • Solana Pay • Buy Crypto • Sell Crypto • Hold NFTs • Staking", - icon: defaultIcon, + icon: glowIcon, + new_to_crypto: true, + developer: false, + hardware: false, custodial: false, non_custodial: true, te: true, @@ -432,7 +469,6 @@ export const walletData = [ staking: true, spending_limits: false, open_source: false, - hardware: false, private_key_infrastructure: false, }, { @@ -441,6 +477,9 @@ export const walletData = [ website: "https://docs.helium.com/wallets/helium-wallet-app/", additionalInfo: "Non-Custodial/Self Custodial • Hold NFTs • Open Source", icon: heliumIcon, + new_to_crypto: true, + developer: true, + hardware: false, custodial: false, non_custodial: true, te: false, @@ -455,7 +494,6 @@ export const walletData = [ staking: false, spending_limits: false, open_source: true, - hardware: false, private_key_infrastructure: false, }, { @@ -465,7 +503,10 @@ export const walletData = [ "https://www.crossmint.com/products/non-custodial-wallets-as-a-service", additionalInfo: "Non-Custodial/Self Custodial • Token Extensions • Solana Pay • Buy Crypto • Sell Crypto • Hold NFTs • Gas Abstraction • Social recovery", - icon: crossmintIcon, + icon: crossmintNoncustodialIcon, + new_to_crypto: false, + developer: true, + hardware: false, custodial: false, non_custodial: true, te: true, @@ -480,7 +521,6 @@ export const walletData = [ staking: false, spending_limits: false, open_source: false, - hardware: false, private_key_infrastructure: false, }, { @@ -489,7 +529,10 @@ export const walletData = [ website: "https://www.crossmint.com/products/custodial-wallet-as-a-service", additionalInfo: "Custodial • Token Extensions • Solana Pay • Buy Crypto • Sell Crypto • Hold NFTs • MPC • Gas Abstraction • Social recovery", - icon: crossmintIcon, + icon: crossmintCustodialIcon, + new_to_crypto: false, + developer: true, + hardware: false, custodial: true, non_custodial: false, te: true, @@ -504,7 +547,6 @@ export const walletData = [ staking: false, spending_limits: false, open_source: false, - hardware: false, private_key_infrastructure: false, }, { @@ -514,45 +556,23 @@ export const walletData = [ additionalInfo: "Non-Custodial/Self Custodial • Token Extensions • Actions & Blinks • Solana Pay • Buy Crypto • Sell Crypto • Hold NFTs • MPS • Gas abstraction • Social recovery", icon: decafIcon, - custodial: false, - non_custodial: false, - te: false, - blinks_and_actions: false, - solana_pay: false, - buy_crypto: false, - sell_crypto: false, - hold_nfts: false, - mpc: false, - gas_abstraction: false, - social_recovery: false, - staking: false, - spending_limits: false, - open_source: false, + new_to_crypto: false, + developer: false, hardware: false, - private_key_infrastructure: false, - }, - { - name: "WalletConnect", - body: "WalletConnect gives developers the tools to build user experiences that make digital ownership effortless, intuitive, and secure.", - website: "https://walletconnect.com/", - additionalInfo: - "Non-Custodial/Self Custodial • Buy Crypto • Sell Crypto • Hold NFTs • MPCs • Social recovery • Open Source", - icon: walletConnectIcon, custodial: false, non_custodial: true, - te: false, - blinks_and_actions: false, - solana_pay: false, + te: true, + blinks_and_actions: true, + solana_pay: true, buy_crypto: true, sell_crypto: true, hold_nfts: true, mpc: true, - gas_abstraction: false, + gas_abstraction: true, social_recovery: true, staking: false, spending_limits: false, - open_source: true, - hardware: false, + open_source: false, private_key_infrastructure: false, }, { @@ -562,6 +582,9 @@ export const walletData = [ additionalInfo: "Token Extensions • Actions & Blinks • Hold NFTs • Gas Abstraction • Social recovery • Staking • Spending Limits • Private Key Infrastructure", icon: turnkeyIcon, + new_to_crypto: false, + developer: true, + hardware: false, custodial: false, non_custodial: false, te: true, @@ -576,7 +599,6 @@ export const walletData = [ staking: true, spending_limits: true, open_source: false, - hardware: false, private_key_infrastructure: true, }, { @@ -586,21 +608,23 @@ export const walletData = [ additionalInfo: "Hardware • Non-Custodial/Self Custodial • Buy Crypto • Sell Crypto • Staking", icon: ledgerIcon, + new_to_crypto: true, + developer: false, + hardware: true, custodial: false, - non_custodial: false, + non_custodial: true, te: false, blinks_and_actions: false, solana_pay: false, - buy_crypto: false, - sell_crypto: false, + buy_crypto: true, + sell_crypto: true, hold_nfts: false, mpc: false, gas_abstraction: false, social_recovery: false, - staking: false, + staking: true, spending_limits: false, open_source: false, - hardware: true, private_key_infrastructure: false, }, { @@ -609,22 +633,24 @@ export const walletData = [ website: "https://trezor.io/", additionalInfo: "Hardware • Non-Custodial/Self Custodial • Buy Crypto • Sell Crypto • Staking", - icon: defaultIcon, + icon: trezorIcon, + new_to_crypto: true, + developer: false, + hardware: true, custodial: false, - non_custodial: false, + non_custodial: true, te: false, blinks_and_actions: false, solana_pay: false, - buy_crypto: false, - sell_crypto: false, + buy_crypto: true, + sell_crypto: true, hold_nfts: false, mpc: false, gas_abstraction: false, social_recovery: false, - staking: false, + staking: true, spending_limits: false, open_source: false, - hardware: true, private_key_infrastructure: false, }, { @@ -633,8 +659,11 @@ export const walletData = [ website: "https://keyst.one/", additionalInfo: "Hardware • Non-Custodial/Self Custodial • Open Source", icon: keystoneIcon, + new_to_crypto: true, + developer: false, + hardware: true, custodial: false, - non_custodial: false, + non_custodial: true, te: false, blinks_and_actions: false, solana_pay: false, @@ -646,8 +675,7 @@ export const walletData = [ social_recovery: false, staking: false, spending_limits: false, - open_source: false, - hardware: true, + open_source: true, private_key_infrastructure: false, }, { @@ -657,6 +685,9 @@ export const walletData = [ additionalInfo: "Custodial • Token Extensions • Actions & Blinks • MPC • Gas Abstraction", icon: bitGetIcon, + new_to_crypto: true, + developer: false, + hardware: false, custodial: true, non_custodial: false, te: true, @@ -671,7 +702,6 @@ export const walletData = [ staking: false, spending_limits: false, open_source: false, - hardware: false, private_key_infrastructure: false, }, { @@ -680,6 +710,9 @@ export const walletData = [ website: "https://www.binance.com/en/web3wallet", additionalInfo: "Custodial • Token Extensions • MPC", icon: binanceIcon, + new_to_crypto: true, + developer: false, + hardware: false, custodial: true, non_custodial: false, te: true, @@ -694,7 +727,6 @@ export const walletData = [ staking: false, spending_limits: false, open_source: false, - hardware: false, private_key_infrastructure: false, }, { @@ -704,6 +736,9 @@ export const walletData = [ additionalInfo: "Non-Custodial/Self Custodial • Buy Crypto • Sell Crypto • Open Source • Staking", icon: gemIcon, + new_to_crypto: false, + developer: true, + hardware: false, custodial: false, non_custodial: true, te: false, @@ -718,30 +753,32 @@ export const walletData = [ staking: true, spending_limits: false, open_source: true, + private_key_infrastructure: false, + }, + { + name: "Passkeys.Foundation", + body: "", + website: "https://passkeys.foundation/", + additionalInfo: + "Non-Custodial/Self Custodial • Actions & Blinks • MPC • Gas Abstraction", + icon: passkeysIcon, + new_to_crypto: true, + developer: false, hardware: false, + custodial: false, + non_custodial: true, + te: false, + blinks_and_actions: true, + solana_pay: false, + buy_crypto: false, + sell_crypto: false, + hold_nfts: false, + mpc: true, + gas_abstraction: true, + social_recovery: false, + staking: false, + spending_limits: false, + open_source: false, private_key_infrastructure: false, }, - // { - // name: "Passkeys.Foundation", - // body: "Binance Web3 wallet is a keyless, seedless, multi-chain, semi-custody wallet designed for DeFi.", - // website: "https://www.binance.com/en/web3wallet", - // additionalInfo: "Non-Custodial/Self Custodial • Actions & Blinks • MPC • Gas Abstraction", - // icon: defaultIcon, - // custodial: false, - // non_custodial: true, - // te: false, - // blinks_and_actions: true, - // solana_pay: false, - // buy_crypto: false, - // sell_crypto: false, - // hold_nfts: false, - // mpc: true, - // gas_abstraction: true, - // social_recovery: false, - // staking: false, - // spending_limits: false, - // open_source: false, - // hardware: false, - // private_key_infrastructure: false - // } ]; diff --git a/src/data/wallets/wallet-filters.js b/src/data/wallets/wallet-filters.js index 8d5b86e43..88e1a35db 100644 --- a/src/data/wallets/wallet-filters.js +++ b/src/data/wallets/wallet-filters.js @@ -1,82 +1,126 @@ export const walletFiltersData = [ { - title: "Hardware", - filterKey: "hardware", - description: "", + id: 0, + title: "Beginner", + filterKey: "new_to_crypto", + category: "beginner", + }, + { + id: 1, + title: "Developer", + filterKey: "developer", + category: "beginner", }, { + id: 2, title: "Custodial", filterKey: "custodial", - description: "", + category: "advanced", + subCategory: "wallet_type", }, { - title: "Non-Custodial/Self-Custodial", + id: 3, + title: "Self-Custodial", filterKey: "non_custodial", - description: "", + category: "advanced", + subCategory: "wallet_type", + }, + { + id: 4, + title: "Hardware", + filterKey: "hardware", + category: "advanced", + subCategory: "wallet_type", }, { + id: 5, + title: "MPC", + filterKey: "mpc", + category: "advanced", + subCategory: "wallet_type", + }, + { + id: 6, title: "Token Extensions", filterKey: "te", - description: "", + category: "advanced", + subCategory: "tooling", }, { - title: "Blinks and Actions", + id: 7, + title: "Actions And Blinks", filterKey: "blinks_and_actions", - description: "", + category: "advanced", + subCategory: "tooling", }, { + id: 8, title: "Solana Pay", filterKey: "solana_pay", - description: "", + category: "advanced", + subCategory: "tooling", }, { + id: 9, title: "Buy Crypto", filterKey: "buy_crypto", - description: "", + category: "advanced", + subCategory: "financial_transaction", }, { + id: 10, title: "Sell Crypto", filterKey: "sell_crypto", - description: "", + category: "advanced", + subCategory: "financial_transaction", }, { + id: 11, title: "Hold NFTs", filterKey: "hold_nfts", - description: "", - }, - { - title: "MPC", - filterKey: "mpc", - description: "", + category: "advanced", + subCategory: "asset_management", }, { + id: 12, title: "Gas Abstraction", filterKey: "gas_abstraction", - description: "", + category: "advanced", + subCategory: "asset_management", }, { + id: 13, title: "Social Recovery", filterKey: "social_recovery", - description: "", + category: "advanced", + subCategory: "security_recovery", }, { + id: 14, title: "Staking", filterKey: "staking", - description: "", + category: "advanced", + subCategory: "financial_transaction", }, { + id: 15, title: "Spending Limits", filterKey: "spending_limits", - description: "", + category: "advanced", + subCategory: "asset_management", }, { + id: 16, title: "Open Source", filterKey: "open_source", - description: "", + category: "advanced", + subCategory: "security_recovery", }, { + id: 17, title: "Private Key Infrastructure", filterKey: "private_key_infrastructure", - description: "", + category: "advanced", + subCategory: "security_recovery", }, ]; diff --git a/src/pages/Contribute.module.scss b/src/pages/Contribute.module.scss new file mode 100644 index 000000000..1d10b99aa --- /dev/null +++ b/src/pages/Contribute.module.scss @@ -0,0 +1,160 @@ +@import "~@/scss/solutions/variables"; + +.PageWrapper { + background-image: url("/src/img/contribute/OpenSource-BG-IMG.svg"); + background-repeat: no-repeat; + background-size: 150% auto; + background-position: top left; + overflow: hidden; + + @include breakpoint(md) { + background-size: 100% auto; + } + @include breakpoint(lg) { + background-size: 75% auto; + } +} + +.Hero { + padding: 180px 24px; + + .HeroTitleWrapper { + position: relative; + margin: 0 auto; + width: 100%; + max-width: 342px; + + @include breakpoint(md) { + max-width: 550px; + } + @include breakpoint(lg) { + max-width: 800px; + } + + &:before { + content: ""; + display: block; + position: absolute; + top: -57px; + left: 40px; + width: 63px; + background-image: url("/src/img/contribute/comment-cursor-1-mb.svg"); + background-repeat: no-repeat; + background-size: contain; + height: 39px; + + @include breakpoint(lg) { + background-image: url("/src/img/contribute/comment-cursor-1-dt.svg"); + width: 105px; + height: 70px; + left: -25px; + top: 0; + } + } + + &:after { + content: ""; + display: block; + position: absolute; + bottom: -43px; + right: 47px; + width: 63px; + background-image: url("/src/img/contribute/comment-cursor-2.svg"); + background-repeat: no-repeat; + background-size: contain; + height: 39px; + + @include breakpoint(lg) { + width: 105px; + height: 70px; + bottom: -100px; + right: 0; + } + } + + h1 { + font-size: 48px; + text-align: center; + line-height: 1.05; + letter-spacing: -0.02em; + margin: 0 auto; + + @include breakpoint(md) { + font-size: 80px; + } + @include breakpoint(lg) { + font-size: 96px; + } + + .Frame { + position: relative; + + .FrameInner { + display: block; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 104%; + height: 100%; + background-color: #64a8f233; + border: 1px solid var(--blue); + } + + .FrameTop { + position: absolute; + width: 100%; + top: 0; + left: 0; + + &:before, + &:after { + position: absolute; + border: 1px solid var(--blue); + width: 5px; + height: 5px; + background: var(--white); + } + + &:before { + content: ""; + top: 0; + left: 0; + } + &:after { + content: ""; + top: 0; + right: 0; + } + } + + .FrameBottom { + position: absolute; + width: 100%; + bottom: 0; + left: 0; + + &:before, + &:after { + position: absolute; + border: 1px solid var(--blue); + width: 5px; + height: 5px; + background: var(--white); + } + + &:before { + content: ""; + bottom: 0; + left: 0; + } + &:after { + content: ""; + bottom: 0; + right: 0; + } + } + } + } + } +} diff --git a/src/pages/HomePage.module.scss b/src/pages/HomePage.module.scss new file mode 100644 index 000000000..ec00368d8 --- /dev/null +++ b/src/pages/HomePage.module.scss @@ -0,0 +1,219 @@ +@import "~@/scss/solutions/variables.scss"; + +.PageWrapper { + overflow: hidden; + + @include breakpoint(md) { + padding-bottom: 80px; + } +} + +.Callout1 { + --gradient: linear-gradient(90deg, #64a8f2 0%, #9945ff 49.61%, #eb54bc 100%); + + h2 { + max-width: 800px; + margin-left: auto; + margin-right: auto; + + .KernOut { + letter-spacing: 1px; + } + } + + p { + font-size: 20px; + font-weight: 700; + line-height: 1.2; + text-align: center; + color: var(--grey-300); + } + + @include breakpoint(md) { + padding: 90px 40px 0; + } + + @include breakpoint(xl) { + padding-top: 128px; + + p { + font-size: 28px; + font-weight: 700; + line-height: 1.15; + letter-spacing: -0.02em; + text-align: center; + } + } +} + +.Callout2 { + padding: 64px 24px; + + h2 { + font-size: 40px; + font-weight: 700; + line-height: 1.04; + letter-spacing: -0.01em; + text-align: center; + margin: 0; + } + + p { + font-size: 20px; + font-weight: 700; + line-height: 1.21; + text-align: center; + margin-top: 24px; + color: var(--grey-250); + } + + @include breakpoint(md) { + padding: 90px 40px 0; + + h2 { + font-size: 56px; + } + } + + @include breakpoint(lg) { + padding: 128px 40px 0; + + h2 { + font-size: 64px; + } + + p { + font-size: 24px; + } + } + + @include breakpoint(xl) { + padding: 128px 40px 0; + + h2 { + font-size: 72px; + font-weight: 700; + line-height: 1.08; + letter-spacing: -0.03em; + text-align: center; + } + + p { + font-size: 24px; + font-weight: 700; + line-height: 1.15; + letter-spacing: -0.02em; + text-align: center; + max-width: 698px; + margin: 24px auto 0; + } + } +} + +.DetailsSection { + padding-top: 24px; + + @media (max-width: #{$screen-xl-min - 1}) { + grid-column-gap: 40px; + } + + @include breakpoint(md) { + padding-bottom: 90px; + } + + @include breakpoint(xl) { + padding-top: 40px; + padding-bottom: 196px; + } +} + +.DeveloperResources { + padding-bottom: 64px; + background-color: var(--black); + + h2 { + max-width: 500px; + margin: 0 auto; + } + + @include breakpoint(xl) { + border-top: 1px solid var(--grey-450); + padding-bottom: 160px; + + > div { + grid-column-gap: 131px; + } + + h2 { + margin-bottom: 0; + } + + p { + font-size: 24px; + font-weight: 700; + line-height: 1.15; + letter-spacing: -0.03em; + text-align: left; + color: var(--grey-250); + } + + a { + margin-left: 0 !important; + } + } + + .DeveloperResourcesImage { + position: relative; + + &:after { + content: ""; + position: absolute; + width: 100%; + height: 60%; + background: linear-gradient(180deg, rgba(29, 26, 35, 0) 0%, #1d1a23 100%); + bottom: 0; + right: 0; + z-index: 1; + display: block; + } + } + + @include breakpoint(lg) { + .DeveloperResourcesImage { + &:after { + background: linear-gradient( + 180deg, + rgba(15, 10, 22, 0) 0%, + #0f0a16 100% + ); + } + } + } +} + +.FinalCallout { + padding: 40px; + background: var(--grey-500); + border-bottom: 1px solid var(--grey-450); + a { + max-width: max-content; + margin: 0 auto; + font-size: 15px; + font-weight: 700; + line-height: 1.32; + text-align: left; + } + + @include breakpoint(lg) { + background: var(--black); + padding-bottom: 128px; + padding-top: 0; + + a { + font-size: 18px; + font-weight: 700; + line-height: 1.1; + padding: 14px 19px; + } + } +} diff --git a/src/pages/contribute.jsx b/src/pages/contribute.jsx new file mode 100644 index 000000000..7329bee45 --- /dev/null +++ b/src/pages/contribute.jsx @@ -0,0 +1,64 @@ +import { useTranslation, Trans } from "next-i18next"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import classNames from "classnames"; + +import Layout from "@/components/solutions/layout"; +import HTMLHead from "@/components/HTMLHead"; +import ContributeContent from "@/components/contribute/ContributeContent"; +import { AnimatedText } from "@/components/shared/Text"; + +import styles from "./Contribute.module.scss"; + +const Frame = ({ children }) => ( + + + + + + {children} + +); + +const Contribute = () => { + const { t } = useTranslation(); + + const tabsContent = t("contribute.tabs", { + returnObjects: true, + }); + + return ( + + + +
+
+
+ + , + }} + /> + +
+
+ + +
+ + ); +}; + +export async function getStaticProps({ locale }) { + return { + props: { + ...(await serverSideTranslations(locale, ["common"])), + }, + }; +} + +export default Contribute; diff --git a/src/pages/index.js b/src/pages/index.js index f6e2fe047..109b48b55 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,24 +1,156 @@ +import Layout from "@/components/solutions/layout"; +import { Trans, useTranslation } from "next-i18next"; +import HTMLHead from "@/components/HTMLHead"; import { serverSideTranslations } from "next-i18next/serverSideTranslations"; -import { getPage } from "@/lib/builder/page/api"; -import Page from "./[...slug]"; -export default function Home(props) { - return ; +import Hero from "@/components/home/Hero"; +import BasicCallout from "@/components/solutions/BasicCallout"; +import Stats from "@/components/home/Stats"; +import JoinCommunity from "@/components/home/JoinCommunity"; +import Companies from "@/components/home/Companies"; +import DeveloperResources from "@/components/solutions/DeveloperResources"; +import { AnimatedText, GradientText } from "@/components/shared/Text"; +import { Carousel, Card } from "@/components/home/CardsSlider"; +import Solutions from "@/components/home/Solutions"; + +import styles from "./HomePage.module.scss"; + +export default function Home() { + const { t } = useTranslation(); + + const statsContent = t("home.stats", { + returnObjects: true, + }); + + const joinCommunityLinks = [ + { + text: t("home.join-community.links.x"), + url: "https://x.com/solana", + }, + { + text: t("home.join-community.links.youtube"), + url: "https://www.youtube.com/channel/UC9AdQPUe4BdVJ8M9X7wxHUA", + }, + { + text: t("home.join-community.links.linkedin"), + url: "https://www.linkedin.com/company/solana-foundation/", + }, + { + text: t("home.join-community.links.community-groups"), + url: "/community", + }, + ]; + + const cardsData = [ + { + title: t("home.new.cards.firedancer.title"), + text1: t("home.new.cards.firedancer.text-1"), + text2: t("home.new.cards.firedancer.text-2"), + src: "/src/img/home/new-firedancer.svg", + url: "https://jumpcrypto.com/firedancer/", + }, + { + title: t("home.new.cards.recap.title"), + text1: t("home.new.cards.recap.text-1"), + text2: t("home.new.cards.recap.text-2"), + src: "/src/img/home/new-recap.svg", + url: "https://solana.com/news/state-of-solana-breakpoint-2024", + }, + { + title: t("home.new.cards.ticket-sale.title"), + text1: t("home.new.cards.ticket-sale.text-1"), + src: "/src/img/home/new-ticket-sale.png", + url: "/breakpoint/tickets", + }, + { + title: , + text1: t("home.new.cards.hacker-house.text-1"), + src: "/src/img/home/new-hacker-house.svg", + url: "https://lu.ma/hong-kong-hh-2024", + }, + { + title: t("home.new.cards.blinks.title"), + text1: t("home.new.cards.blinks.text-1"), + text2: t("home.new.cards.blinks.text-2"), + src: "/src/img/home/new-blinks.png", + url: "https://solana.com/solutions/actions", + }, + ]; + + const cards = cardsData.map((card, index) => ( + + )); + + return ( + + +
+ + +
+ + + {t("home.callout-2.title")} + + + + + {t("home.callout-2.subtitle")} + +
+ + + + + + + ), + kernout: , + }} + /> + } + subtitleKey={t("home.callout-1.subtitle")} + className={styles.Callout1} + /> + + + + + + + + +
+ + ); } export const getStaticProps = async ({ locale }) => { try { - const page = await getPage("/", locale); - const isDefaultLocale = locale === "en"; - const builderLocale = isDefaultLocale ? "Default" : locale; - return { props: { - key: page?.id + page?.data.slug + locale, - page: page || null, - ...(await serverSideTranslations(builderLocale, ["common"])), + ...(await serverSideTranslations(locale, ["common"])), }, - revalidate: 30, }; } catch (error) { console.error(error); diff --git a/src/pages/learn/Wallets.module.scss b/src/pages/learn/Wallets.module.scss new file mode 100644 index 000000000..3147ea0d2 --- /dev/null +++ b/src/pages/learn/Wallets.module.scss @@ -0,0 +1,58 @@ +@import "~@/scss/solutions/_variables.scss"; + +.PageWrapper { + overflow: hidden; +} + +.PageWrapper, +.Header { + &, + nav { + background: #0d0817 !important; + } +} + +.LongformSection { + strong { + color: var(--white) !important; + } + + .LongformSubtitleWrapper { + display: block; + margin-bottom: 1rem; + } +} + +.DetailsTitleBlock { + padding-top: 0; + padding-bottom: 40px; + + @include breakpoint(md) { + padding-bottom: 0; + } + @include breakpoint(lg) { + padding-top: 8rem; + } + + p { + font-size: 20px; + font-weight: bold; + + @include breakpoint(md) { + font-size: 24px; + } + } +} + +.DetailsSection { + @include breakpoint(md) { + padding-bottom: 8rem; + } + @include breakpoint(lg) { + padding-bottom: 10rem; + } +} + +.FooterCalloutTopSection { + padding: 0; +} diff --git a/src/pages/learn/wallets.jsx b/src/pages/learn/wallets.jsx new file mode 100644 index 000000000..14b0d0589 --- /dev/null +++ b/src/pages/learn/wallets.jsx @@ -0,0 +1,336 @@ +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import { useTranslation, Trans } from "next-i18next"; +import Link from "next/link"; +import Lottie from "react-lottie"; + +import Layout from "@/components/solutions/layout"; +import HTMLHead from "@/components/HTMLHead"; +import WalletsHero from "@/components/learn/WalletsHero"; +import BasicCallout from "@/components/solutions/BasicCallout"; +import Text, { GradientText } from "@/components/shared/Text"; +import LongformItem, { + LongformSeeMoreItem, +} from "@/components/solutions/LongformItem"; +import { MotionSlideIn } from "@/components/shared/Motions"; +import EcosystemSlider, { Card } from "@/components/solutions/EcosystemSlider"; +import DetailsSection, { Detail } from "@/components/solutions/DetailsSection"; +import DeveloperResources, { + DeveloperResourcesLink, +} from "@/components/solutions/DeveloperResources"; +import FooterCallout from "@/components/solutions/FooterCallout"; + +import styles from "./Wallets.module.scss"; + +import * as multiSigLottie from "../../../assets/learn/wallets/Wallets_Multi Sig Add_V1.json"; +import * as custodexLottie from "../../../assets/learn/wallets/Wallets_Custodex_V1.json"; +import * as stealthGuardLottie from "../../../assets/learn/wallets/Wallets_StealthGuard_V1.json"; +import * as walletHeroLottie from "../../../assets/wallets/wallet-finder.json"; + +const Wallets = () => { + const { t } = useTranslation(); + + const developerResourcesLinks = [ + , + , + , + ]; + + const ecosystemCards = [ + , + , + , + , + , + , + ]; + + return ( + + + +
+ + + + ), + }} + /> + } + subtitleKey="learn-wallets.callout-1.subtitle" + className={styles.BasicCallout} + /> + +
+ + + } + mediaDesktopPlacement="left" + titleComponent={t("learn-wallets.longform.multisig.title")} + subtitleComponent={ + <> + + + + + + + + } + seeMoreTitle={t("learn-wallets.longform.multisig.see-more.title")} + seeMoreItems={[ + + + , + // Add other LongformSeeMoreItem elements with unique keys if needed + ]} + className={styles.LongformItem1} + mediaClassName={styles.LongformItemMedia} + /> + + + + + } + mediaDesktopPlacement="right" + titleComponent={ + + {t("learn-wallets.longform.custodial.title")} + + } + subtitleComponent={ + <> + + + + + + + + } + seeMoreTitle={t( + "learn-wallets.longform.custodial.see-more.title", + )} + seeMoreItems={[ + + + + + + + + + + + , + ]} + className={styles.LongformItem2} + mediaClassName={styles.LongformItemMedia} + /> + + + + + } + mediaDesktopPlacement="left" + titleComponent={t("learn-wallets.longform.non-custodial.title")} + subtitleComponent={ + <> + + + + + + + + } + seeMoreTitle={t( + "solutions-wallets.unrivaled-security.see-more.title", + )} + seeMoreItems={[ + + + + + + + + + + + + + + + + + , + ]} + className={styles.LongformItem4} + /> + +
+ +
+ +
+ + + + + + + + + + + + } + /> + + +
+ + ); +}; + +export async function getStaticProps({ locale }) { + return { + props: { + ...(await serverSideTranslations(locale, ["common"])), + }, + }; +} + +export default Wallets; diff --git a/src/pages/solana-wallets.js b/src/pages/solana-wallets.js deleted file mode 100644 index 587031feb..000000000 --- a/src/pages/solana-wallets.js +++ /dev/null @@ -1,28 +0,0 @@ -import { useTranslation } from "next-i18next"; -import Layout from "../components/layout"; -import HTMLHead from "../components/HTMLHead"; -import { serverSideTranslations } from "next-i18next/serverSideTranslations"; -import WalletsLayout from "../components/wallets/WalletsLayout"; - -const SolanaWallets = () => { - const { t } = useTranslation(); - return ( - - - - - ); -}; - -export async function getStaticProps({ locale }) { - return { - props: { - ...(await serverSideTranslations(locale, ["common"])), - }, - }; -} - -export default SolanaWallets; diff --git a/src/pages/solutions/BlinksAndActions.module.scss b/src/pages/solutions/BlinksAndActions.module.scss new file mode 100644 index 000000000..d756d667d --- /dev/null +++ b/src/pages/solutions/BlinksAndActions.module.scss @@ -0,0 +1,215 @@ +@import "~@/scss/solutions/_variables.scss"; + +.Lottie { + @include breakpoint(lg) { + height: calc(min(500px, 100vh)) !important; + width: auto !important; + + svg { + margin: auto; + } + } +} + +.PageWrapper { + overflow: hidden; +} + +.PageWrapper, +.Header { + &, + nav { + background: #0d0817 !important; + } +} + +.Callout1 { + padding: 64px 24px; + + h2 { + font-size: 36px; + font-weight: 700; + line-height: 1.1; + letter-spacing: -0.01em; + text-align: center; + margin-bottom: 0; + @include max-width(700px); + + strong { + background: linear-gradient(85.62deg, #9945ff -2.51%, #14f195 92.16%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + } + } + + @include breakpoint(md) { + padding-top: 128px; + padding-bottom: 40px; + + h2 { + font-size: 56px; + } + } + + @include breakpoint(lg) { + h2 { + font-size: 64px; + } + } + + @include breakpoint(xl) { + h2 { + font-size: 80px; + line-height: 1.04; + letter-spacing: -0.02em; + @include max-width(1000px); + } + } +} + +.BasicCallout { + @media (max-width: #{$screen-md-min - 1}) { + h2 { + font-size: 36px; + } + p { + font-size: 20px; + margin-top: 40px; + } + } + + @include breakpoint(md) { + padding-top: 128px; + padding-bottom: 128px; + } +} + +.LongformSection { + overflow: hidden; + + .LongformItem1 { + flex-direction: column-reverse; + padding-top: 0; + @include max-width(1068px); + + @include breakpoint(md) { + flex-direction: row; + } + + .LongformCustomContent { + display: flex; + flex-direction: column; + gap: 40px; + + @include breakpoint(lg) { + gap: 48px; + } + + .LongformContent { + h3, + p { + font-size: 18px; + letter-spacing: -0.01em; + line-height: 1.16; + margin: 0; + max-width: 100%; + font-weight: bold; + } + + p { + color: var(--grey-300); + } + + @include breakpoint(lg) { + h3, + p { + font-size: 24px; + letter-spacing: -0.02em; + line-height: 1.12; + } + } + } + } + } +} + +.EcosystemSection { + padding: 64px 0 0; + + @include breakpoint(lg) { + padding-top: 96px; + } + + .EcosystemTitle { + text-align: center; + font-size: 40px; + letter-spacing: -0.01em; + padding: 0 24px; + margin: 0; + + @include breakpoint(md) { + font-size: 80px; + line-height: 1.08; + letter-spacing: -0.03em; + } + } + + .EcosystemSlider { + .EcosystemSliderCarousel { + padding-bottom: 32px; + + @include breakpoint(lg) { + padding-bottom: 40px; + padding-top: 40px; + } + } + + .EcosystemCards { + height: 430px; + + @include breakpoint(lg) { + height: auto; + } + } + + .EcosystemCardWrapper { + width: 300px; + min-width: 300px; + + .EcosystemCard { + &, + a, + img { + height: 100%; + width: 300px; + min-width: 300px; + display: block; + } + img { + object-fit: contain; + width: 300px; + } + } + + @include breakpoint(lg) { + width: 380px; + min-width: 380px; + + .EcosystemCard { + &, + a, + img { + height: 100%; + width: 380px; + min-width: 380px; + } + img { + object-fit: contain; + width: 380px; + } + } + } + } + } +} diff --git a/src/pages/solutions/Creative.module.scss b/src/pages/solutions/Creative.module.scss new file mode 100644 index 000000000..0950b5c7d --- /dev/null +++ b/src/pages/solutions/Creative.module.scss @@ -0,0 +1,221 @@ +@import "~@/scss/solutions/_variables.scss"; + +.PageWrapper { + overflow: hidden; +} + +.StatsSection { + p { + font-weight: 700; + } + + @media (max-width: #{$screen-sm-min - 1}) { + p { + color: var(--grey-300); + } + .StatsWrapper { + margin-top: 40px; + + p { + max-width: 230px; + margin-left: auto; + margin-right: auto; + font-size: 18px; + font-weight: 700; + line-height: 1.16; + letter-spacing: -0.01em; + text-align: center; + } + } + } + + @media (max-width: #{$screen-md-min - 1}) { + h3 { + font-size: 36px; + } + p { + font-size: 18px; + } + } +} + +.BasicCallout { + @media (max-width: #{$screen-md-min - 1}) { + h2 { + font-size: 36px; + font-weight: 700; + line-height: 1.14; + letter-spacing: -0.01em; + text-align: center; + } + p { + font-size: 18px; + font-weight: 700; + line-height: 1.16; + letter-spacing: -0.01em; + text-align: center; + } + } + + @include breakpoint(md) { + padding-top: 90px; + padding-bottom: 90px; + } + + @include breakpoint(lg) { + padding-top: 128px; + padding-bottom: 128px; + + h2 { + font-weight: 700; + line-height: 1.04; + letter-spacing: -0.02em; + text-align: center; + max-width: 865px; + margin: 0 auto; + } + p { + font-size: 28px; + font-weight: 700; + line-height: 1.15; + letter-spacing: -0.03em; + text-align: center; + margin-top: 32px; + } + } +} + +.LongformSection { + a { + color: var(--grey-300); + } + @media (max-width: #{$screen-md-min - 1}) { + h2 { + font-size: 32px; + font-weight: 700; + line-height: 1.11; + letter-spacing: -0.01em; + text-align: center; + } + } + + @media (min-width: $screen-md-min) and (max-width: #{$screen-xl-min - 1}) { + section { + padding-top: 90px; + padding-bottom: 90px; + } + + h2 { + font-size: 40px; + } + } + + @include breakpoint(xl) { + .LongformItem4 { + > div { + align-items: center; + } + } + } +} + +.ExploreCards { + padding: 64px 24px; + + .ExploreCardsCards { + display: flex; + flex-direction: column; + gap: 40px; + + .ExploreCardsCard { + background: var(--grey-500); + padding: 40px 24px; + border-radius: 8px; + + h3 { + font-size: 20px; + font-weight: 700; + line-height: 1.2; + text-align: center; + margin-bottom: 0; + } + + p { + font-size: 18px; + font-weight: 700; + line-height: 1.2; + text-align: center; + color: var(--grey-300); + margin: 24px 0 0; + max-width: 100%; + } + + a { + max-width: max-content; + margin: 40px auto 0; + } + } + } + + @include breakpoint(md) { + padding-top: 128px; + padding-bottom: 128px; + + .ExploreCardsCards { + flex-direction: row; + gap: 40px; + justify-content: center; + } + } + + @include breakpoint(xl) { + padding: 128px 40px; + + .ExploreCardsCards { + margin-top: 128px; + + .ExploreCardsCard { + display: flex; + align-items: center; + padding: 40px; + gap: 119px; + + h3, + p { + text-align: left; + } + + h3 { + font-size: 32px; + font-weight: 700; + line-height: 1.15; + letter-spacing: -0.02em; + } + + p { + font-size: 24px; + font-weight: 700; + line-height: 1.12; + letter-spacing: -0.02em; + } + + a { + width: 100%; + margin: 0; + } + } + } + } +} + +.SuccessStories { + .StoryCard { + a { + font-size: 15px; + @include breakpoint(xl) { + font-size: 18px; + } + } + } + background: var(--black); +} diff --git a/src/pages/solutions/Defi.module.scss b/src/pages/solutions/Defi.module.scss new file mode 100644 index 000000000..e4b2e1dbe --- /dev/null +++ b/src/pages/solutions/Defi.module.scss @@ -0,0 +1,356 @@ +@import "../../scss/solutions/_variables.scss"; + +.PageWrapper { + overflow: hidden; +} + +.Eyebrow { + color: #64a8f2; + font-size: 16px; + font-style: normal; + font-weight: 800; + line-height: 1.25; + letter-spacing: -0.32px; + text-align: center; + margin-bottom: 24px; + + @media (min-width: 1200px) { + font-size: 22px; + font-weight: 800; + line-height: 1.25; + letter-spacing: -0.44px; + text-align: left; + } +} + +.StatsSection { + position: relative; + z-index: 1; + margin-top: 64px; + padding: 0 24px; + + h2 { + font-size: 32px; + font-weight: 700; + line-height: 1.11; + letter-spacing: -0.01em; + text-align: center; + } + + .StatsContent { + margin-top: 40px; + margin-bottom: 64px; + display: flex; + flex-direction: column; + gap: 10px; + + .Stat { + text-align: center; + } + + h3 { + font-size: 36px; + font-weight: 700; + line-height: 1.14; + letter-spacing: -0.01em; + margin: 0; + margin-bottom: 4px; + } + + p { + font-size: 18px; + font-weight: 700; + line-height: 1.16; + letter-spacing: -0.01em; + color: var(--grey-300); + max-width: 100% !important; + margin-bottom: 0; + } + } + + .StatsButtons { + margin-top: 24px; + width: max-content; + margin: 32px auto 64px; + + > div { + display: flex; + flex-direction: column; + gap: 10px; + } + } + + @include breakpoint(md) { + max-width: 1068px; + margin: 128px auto 0; + + h2 { + font-size: 64px; + text-align: center; + } + + .StatsButtons { + margin-top: 40px; + + > div { + display: flex; + flex-direction: row; + justify-content: center; + gap: 24px; + + a { + min-width: 211px; + } + } + } + + .StatsContent { + h3 { + font-size: 64px; + } + + p { + font-size: 15px; + } + } + } + + @include breakpoint(lg) { + .StatsContent { + display: flex; + margin-top: 104px; + width: 100%; + justify-content: center; + flex-direction: row; + + .Stat { + text-align: left; + padding: 0 56px; + + &:not(:first-child) { + border-left: 1px solid var(--grey-450); + } + + &:first-child { + h3 { + background: var(--gradient-10); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + + &::selection { + -webkit-text-fill-color: var(--black); + } + } + } + } + + h3 { + font-size: 64px; + } + + p { + font-size: 15px; + } + } + } + + @include breakpoint(xl) { + margin-top: 256px; + } +} + +.DetailCardsWrapper { + padding: 0 24px; + display: flex; + flex-direction: column; + gap: 40px; + + @include breakpoint(md) { + padding-right: 0; + } + + .DetailCard { + border-radius: 16px; + background: var(--grey-450); + + .DetailCardInner { + padding: 64px 24px; + } + + .DetailCardIcon { + margin-bottom: 48px; + } + + h3 { + font-size: 18px; + line-height: 1.16; + margin: 0; + letter-spacing: -0.01em; + + @include breakpoint(md) { + font-size: 24px; + } + } + + p { + font-size: 18px; + margin: 0; + margin-top: 8px; + line-height: 1.16; + letter-spacing: -0.01em; + color: var(--grey-300); + font-weight: bold; + max-width: 100% !important; + + @include breakpoint(md) { + font-size: 20px; + } + } + } + + @include breakpoint(md) { + .DetailCards { + gap: 40px; + } + + .DetailCardWrapper { + .DetailCard { + background: var(--grey-450); + min-width: 500px; + } + + .DetailCardInner { + padding: 48px; + } + } + } +} + +.BasicCallout { + @media (min-width: $screen-md-min) and (max-width: #{$screen-xl-min - 1}) { + padding-top: 90px; + } + + @media (max-width: #{$screen-md-min - 1}) { + h2 { + font-size: 48px; + } + + p { + font-size: 18px; + } + } + + @include breakpoint(xl) { + h2 { + font-size: 80px; + font-weight: 700; + line-height: 1; + letter-spacing: -0.02em; + text-align: center; + max-width: 900px; + margin: 0 auto; + } + } +} + +.TokenExtensionsMedia { + display: flex; + flex-direction: column; + margin: 0 auto; + + @include breakpoint(md) { + flex-direction: row; + gap: 40px; + } +} + +.LongformSection { + h2 { + font-size: 32px; + line-height: 1.11; + } + + @include breakpoint(md) { + h2 { + font-size: 48px; + line-height: 1; + } + } + + @media (min-width: $screen-md-min) and (max-width: #{$screen-xl-min - 1}) { + padding-bottom: 90px; + } + + @media (max-width: #{$screen-xl-min - 1}) { + .LongformItem1 { + padding-top: 80px; + } + } + + @include breakpoint(xl) { + > section { + padding-top: 128px; + padding-bottom: 128px; + } + + .LongformItem2 { + > div { + align-items: center; + } + } + + h2 { + font-size: 56px; + } + } +} + +.EcosystemSlider { + @media (max-width: #{$screen-xl-min - 1}) { + padding: 64px 0; + + .EcosystemSliderTitleBlock { + p { + font-size: 20px; + } + } + } +} + +.SuccessStories { + padding-bottom: 128px; + a { + width: auto; + + @media (max-width: #{$screen-md-min - 1}) { + font-size: 15px; + } + } + + .StoryCardLogo { + img { + width: 150px; + border-radius: 8px; + object-fit: cover; + } + } + + .StoryCardImage { + max-height: 474px; + } + + @include breakpoint(lg) { + background: var(--grey-500); + padding: 90px 40px; + } + + @include breakpoint(xl) { + .StoryCard { + a { + margin-top: 40px; + } + } + } +} diff --git a/src/pages/solutions/Gaming.module.scss b/src/pages/solutions/Gaming.module.scss new file mode 100644 index 000000000..da5e14747 --- /dev/null +++ b/src/pages/solutions/Gaming.module.scss @@ -0,0 +1,183 @@ +@import "../../scss/solutions/_variables.scss"; + +.PageWrapper { + overflow: hidden; +} + +.PageWrapper, +.Header { + &, + nav { + background: #0d0817 !important; + } +} + +.Callout1 { + --gradient: linear-gradient(270deg, #9945ff 0%, #eb54bc 50.57%, #ff754a 100%); + + padding: 64px 24px; + + .Callout1Title { + font-size: 48px; + font-weight: 700; + line-height: 1; + letter-spacing: -0.02em; + text-align: center; + margin: 0 auto; + } +} + +.LongformSection { + h2 { + font-size: 32px; + line-height: 1.11; + } + a { + color: var(--grey-300); + } + + .MultiLineSubtitle { + display: flex; + flex-direction: column; + gap: 16px; + } +} + +.CreateWithoutConstraint { + .MediaComponent { + &:after { + background: linear-gradient( + 180deg, + rgba(15, 10, 22, 0) 2.47%, + #0d0817 63.46% + ) !important; + } + } +} + +.SpotlightSection { + h2 { + strong { + background: var(--gradient-2); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + } + } + + p { + strong { + color: var(--white); + } + } +} + +.SuccessStories { + background: var(--black); + + a { + width: auto; + + @media (max-width: #{$screen-md-min - 1}) { + font-size: 15px; + } + + @include breakpoint(md) { + width: max-content; + } + } +} + +.Stats { + --gradient: linear-gradient(90deg, #64a8f2 0%, #9945ff 49.61%, #eb54bc 100%); + + padding-top: 128px; + + @media (max-width: #{$screen-md-min - 1}) { + .StatsContent { + margin-top: 40px; + + h3 { + font-size: 36px; + font-weight: 700; + line-height: 1.14; + letter-spacing: -0.01em; + } + } + } +} + +@include breakpoint(md) { + .GamingDetails { + > div { + display: flex; + gap: 40px; + } + } + + .Callout1 { + .Callout1Title { + font-size: 64px; + max-width: 600px; + } + } + + .LongformSection { + h2 { + font-size: 48px; + line-height: 1; + } + } +} + +@include breakpoint(md) { + .SuccessStories { + .StoryCard { + grid-template-rows: auto auto auto !important; + row-gap: 40px !important; + } + + .SuccessStoriesLogo { + justify-content: flex-start; + align-self: flex-end; + } + } +} + +@include breakpoint(lg) { + .SuccessStories { + background: var(--grey-500); + padding: 90px 40px; + } +} + +@include breakpoint(xl) { + .Callout1 { + padding: 80px 0 120px; + + .Callout1Title { + font-size: 80px; + max-width: 700px; + } + } + + .LongformSection { + > section { + padding-top: 128px; + padding-bottom: 128px; + } + } + + .SuccessStories { + padding: 128px 40px 256px; + } + + .DeveloperResources { + p { + color: var(--grey-300); + } + a { + color: var(--grey-200); + } + } +} diff --git a/src/pages/solutions/IF.module.scss b/src/pages/solutions/IF.module.scss new file mode 100644 index 000000000..febe1de8e --- /dev/null +++ b/src/pages/solutions/IF.module.scss @@ -0,0 +1,295 @@ +@import "~@/scss/solutions/_variables.scss"; + +.PageWrapper { + overflow: hidden; +} + +.PageWrapper, +.Header { + &, + nav { + background: #0d0817 !important; + } +} + +.TextWrapper { + padding: 64px 24px 40px; + position: relative; + z-index: 1; + + @include breakpoint(md) { + padding: 64px 40px 40px; + } + + @include breakpoint(lg) { + padding: 0; + max-width: 520px; + } +} + +.Eyebrow { + color: #64a8f2; + font-size: 16px; + font-style: normal; + font-weight: 800; + line-height: 1.25; + letter-spacing: -0.32px; + text-align: center; + margin-bottom: 24px; + + @include breakpoint(lg) { + font-size: 22px; + font-weight: 800; + line-height: 1.25; + letter-spacing: -0.44px; + text-align: left; + } +} + +.VideoHero { + h1 { + font-size: 32px; + line-height: 1.11; + letter-spacing: -0.32px; + + @include breakpoint(sm) { + font-size: 40px; + } + + @include breakpoint(lg) { + font-size: 64px; + line-height: 1; + letter-spacing: -1.28px; + } + } +} + +.VideoWrapper { + video { + width: 100%; + } +} + +@include breakpoint(md) { + .Hero { + padding: 80px 24px; + + .ContentWrapper { + @include max-width(650px); + } + + .HeroTitle { + font-size: 64px; + } + + .HeroSubtitle { + font-size: 24px; + } + + .ButtonWrapper { + flex-direction: row; + } + } +} + +@include breakpoint(xl) { + .Hero { + padding: 92px 24px; + flex-direction: row; + justify-content: space-between; + gap: 128px; + + .ContentWrapper { + max-width: 520px; + justify-content: center; + * { + text-align: left; + } + } + + .Eyebrow { + font-size: 22px; + } + + .HeroTitle { + font-size: 64px; + line-height: 1; + letter-spacing: -0.02em; + max-width: 422px; + } + + .HeroSubtitle { + font-size: 32px; + line-height: 1.15; + letter-spacing: -0.02em; + } + + .ButtonWrapper { + flex-direction: row; + margin-left: 0; + + a { + padding: 12px; + } + } + } +} + +.StatsSection { + @media (max-width: #{$screen-md-min - 1}) { + h2 { + font-size: 32px; + font-weight: 700; + line-height: 1.11; + letter-spacing: -0.01em; + text-align: center; + } + + .StatsContent { + margin-top: 40px; + + h3 { + font-size: 36px; + font-weight: 700; + line-height: 1.14; + letter-spacing: -0.01em; + } + + p { + font-size: 18px; + font-weight: 700; + line-height: 1.16; + letter-spacing: -0.01em; + color: var(--grey-300); + } + } + + .StatsButtons { + margin-top: 24px; + } + } +} + +.BasicCallout { + @media (max-width: #{$screen-md-min - 1}) { + h2 { + font-size: 36px; + font-weight: 700; + line-height: 1.14; + letter-spacing: -0.01em; + text-align: center; + } + p { + font-size: 18px; + font-weight: 700; + line-height: 1.16; + letter-spacing: -0.01em; + text-align: center; + } + } + + @include breakpoint(md) { + padding-top: 90px; + padding-bottom: 90px; + + h2 { + font-size: 56px; + } + } + + @include breakpoint(lg) { + padding-top: 128px; + padding-bottom: 128px; + + h2 { + font-size: 72px; + font-weight: 700; + line-height: 1.04; + letter-spacing: -0.02em; + text-align: center; + max-width: 907px; + margin: 0 auto; + } + p { + font-size: 24px; + font-weight: 700; + line-height: 1.15; + letter-spacing: -0.03em; + text-align: center; + margin-top: 32px; + } + } +} + +.LongformSection { + @media (max-width: #{$screen-md-min - 1}) { + h2 { + font-size: 32px; + font-weight: 700; + line-height: 1.11; + letter-spacing: -0.01em; + text-align: center; + } + } + + @media (min-width: $screen-md-min) and (max-width: #{$screen-xl-min - 1}) { + section { + padding-top: 90px; + padding-bottom: 90px; + } + + h2 { + font-size: 40px; + } + } +} + +.SuccessStories { + padding-bottom: 128px; + + .StoryCard { + a { + font-size: 15px; + font-weight: 700; + line-height: 1.32; + text-align: center; + } + } + + .StoryCard1Logo { + img { + width: 145px; + } + } + .StoryCard2Logo { + img { + width: 138px; + } + } + + @include breakpoint(xl) { + background: var(--grey-500); + + .SuccessStoriesCards { + > * { + padding: 40px; + } + + &:not([data-cards-count="1"]) { + grid-gap: 40px; + } + } + + .StoryCardLogo { + padding: 20px 0; + } + + .StoryCardMainImage { + max-height: 434px; + img { + max-height: 434px; + height: 100%; + } + } + } +} diff --git a/src/pages/solutions/Loyalty.module.scss b/src/pages/solutions/Loyalty.module.scss new file mode 100644 index 000000000..a46a03830 --- /dev/null +++ b/src/pages/solutions/Loyalty.module.scss @@ -0,0 +1,111 @@ +@import "@/scss/solutions/_variables.scss"; + +.LoyaltyPage { + overflow: hidden; +} + +.Stats { + padding-top: 128px; + + @media (max-width: #{$screen-md-min - 1}) { + .StatsContent { + margin-top: 40px; + + h3 { + font-size: 36px; + font-weight: 700; + line-height: 1.14; + letter-spacing: -0.01em; + } + + p { + font-size: 18px; + font-weight: 700; + line-height: 1.16; + letter-spacing: -0.01em; + color: var(--grey-300); + } + } + } + + @include breakpoint(xl) { + h2 { + max-width: 514px; + } + } +} + +.BasicCallout { + @media (max-width: #{$screen-md-min - 1}) { + p { + font-size: 20px; + } + } + @include breakpoint(md) { + padding-top: 128px; + padding-bottom: 128px; + } +} + +.LongformSection { + h2 { + font-size: 32px; + line-height: 1.11; + } + + @include breakpoint(md) { + h2 { + font-size: 48px; + line-height: 1; + } + } + + @include breakpoint(xl) { + section { + padding-top: 128px; + padding-bottom: 128px; + } + + .LongformItem2 { + > div { + align-items: center; + } + } + + h2 { + font-size: 48px; + } + } +} + +.SuccessStories { + background: var(--black); + + a { + width: auto; + + @media (max-width: #{$screen-md-min - 1}) { + font-size: 15px; + } + } + + .StoryCardLogo { + img { + width: 150px; + border-radius: 8px; + object-fit: cover; + + @include breakpoint(md) { + width: 120px; + } + } + } + + @include breakpoint(md) { + background: var(--grey-500); + padding-bottom: 2rem; + } + @include breakpoint(lg) { + padding-bottom: 4rem; + } +} diff --git a/src/pages/solutions/Payments.module.scss b/src/pages/solutions/Payments.module.scss new file mode 100644 index 000000000..c683c3831 --- /dev/null +++ b/src/pages/solutions/Payments.module.scss @@ -0,0 +1,178 @@ +@import "~@/scss/solutions/_variables.scss"; + +.PageWrapper { + overflow: hidden; +} + +.Hero { + h1 { + max-width: 890px; + } +} + +.StatsSectionWrapper { + background: var(--black); + position: relative; +} + +.StatsSection { + @media (max-width: #{$screen-md-min - 1}) { + h2 { + font-size: 40px; + } + + .StatsButtons { + margin-top: 24px; + } + } +} + +.DetailsSection { + > div { + padding-top: 0; + } + + @media (max-width: #{$screen-md-min - 1}) { + > div { + grid-gap: 32px; + } + } + + @include breakpoint(xl) { + padding-bottom: 80px; + } +} + +.BasicCallout { + --gradient: linear-gradient(270deg, #9945ff 0%, #eb54bc 50.57%, #ff754a 100%); + + @media (min-width: $screen-md-min) and (max-width: #{$screen-xl-min - 1}) { + padding-top: 90px; + } + + @media (max-width: #{$screen-md-min - 1}) { + h2 { + font-size: 48px; + } + p { + font-size: 18px; + } + } + + @media (max-width: #{$screen-xl-min - 1}) { + padding-bottom: 0; + } + + @include breakpoint(lg) { + padding-bottom: 0 !important; + p { + @include max-width(698px); + } + } +} + +.TokenExtensionsMedia { + display: flex; + flex-direction: column; + margin: 0 auto; + + @include breakpoint(md) { + flex-direction: row; + gap: 40px; + } +} + +.LongformSection { + overflow: hidden; + + .LongformItem { + a { + color: inherit; + } + } + @media (max-width: #{$screen-md-min - 1}) { + h2 { + font-size: 40px; + letter-spacing: -0.03em; + line-height: 1; + } + } + + @media (min-width: $screen-md-min) and (max-width: #{$screen-xl-min - 1}) { + padding-bottom: 90px; + } + + @media (max-width: #{$screen-xl-min - 1}) { + .LongformItem1 { + padding-top: 80px; + } + } + + @include breakpoint(xl) { + padding-bottom: 128px; + + .LongformItem1 { + padding-bottom: 128px; + } + + .LongformItem2 { + padding-top: 128px; + padding-bottom: 128px; + } + + .LongformItem3 { + padding-bottom: 128px; + } + + .LongformItem4 { + padding-top: 128px; + } + } +} + +.EcosystemSlider { + --gradient: linear-gradient( + 89.77deg, + #80ecff 0.17%, + #64a8f2 50.54%, + #9945ff 99.77% + ); + + @media (max-width: #{$screen-xl-min - 1}) { + padding: 64px 0 96px; + } +} + +.SuccessStories { + .StoryCard { + p, + a { + margin: 0 16px; + + @include breakpoint(md) { + margin: 0; + } + } + } +} + +.FooterCallout { + @media (max-width: #{$screen-md-min - 1}) { + h2 { + font-size: 40px; + } + p { + margin-bottom: 16px; + } + } + + @media (max-width: #{$screen-lg-min - 1}) { + .FooterCalloutTopSection { + padding-bottom: 128px; + + a { + margin-top: 16px; + } + } + } +} diff --git a/src/pages/solutions/TE.module.scss b/src/pages/solutions/TE.module.scss new file mode 100644 index 000000000..58f40be38 --- /dev/null +++ b/src/pages/solutions/TE.module.scss @@ -0,0 +1,252 @@ +@import "@/scss/solutions/_variables.scss"; + +.PageWrapper { + overflow: hidden; +} + +.TokenExtensionsWrapper { + overflow: hidden; +} + +.TextWrapper { + padding: 64px 24px 40px; + position: relative; + z-index: 1; + + @include breakpoint(md) { + padding: 64px 40px 40px; + } + + @include breakpoint(lg) { + padding: 0; + max-width: 520px; + } +} + +.Eyebrow { + color: #64a8f2; + font-size: 16px; + font-style: normal; + font-weight: 800; + line-height: 1.25; + letter-spacing: -0.32px; + text-align: center; + margin-bottom: 24px; + + @include breakpoint(lg) { + font-size: 22px; + font-weight: 800; + line-height: 1.25; + letter-spacing: -0.44px; + text-align: left; + } +} + +.EcosystemSection { + .SectionTitle { + text-align: center; + } + + .EcosystemItemContentBlock { + @include breakpoint(lg) { + display: flex; + flex-direction: column; + gap: 8px; + // position: relative; + // top: 0; + // left: 0; + // width: 100%; + } + } +} + +.BasicCallout { + @media (max-width: #{$screen-lg-min - 1}) { + h2 { + font-size: 48px; + } + } + @include breakpoint(lg) { + p { + max-width: 669px; + } + } +} + +.LongformSection { + h2 { + font-size: 32px; + line-height: 1.11; + } + + @include breakpoint(md) { + h2 { + font-size: 48px; + line-height: 1; + } + } + + @include breakpoint(xl) { + > section { + padding-top: 128px; + padding-bottom: 128px; + } + + .LongformItem2 { + > div { + align-items: center; + } + } + + h2 { + font-size: 64px; + } + } +} + +.SuccessStories { + background: var(--black); + padding-bottom: 128px; + + a { + width: auto; + + @media (max-width: #{$screen-md-min - 1}) { + font-size: 15px; + } + } + + .StoryCardLogo { + img { + width: 150px; + border-radius: 8px; + object-fit: cover; + } + } + + @include breakpoint(lg) { + background: var(--grey-500); + padding: 90px 40px; + } + + @include breakpoint(xl) { + padding: 90px 40px 256px; + } +} + +.FAQ { + background: #1d1a23; + + h2 { + font-size: 28px; + + @include breakpoint(lg) { + font-size: 64px; + } + } +} + +.SectionWrapper { + max-width: 1068px; + margin: 0 auto; + display: grid; + grid-gap: 24px; + padding: 64px 24px 128px; + + .Eyebrow { + text-align: left; + } + + @include breakpoint(lg) { + grid-template-columns: 0.9fr 1fr; + gap: 80px; + padding: 64px 40px; + } + + @include breakpoint(xl) { + gap: 132px; + padding: 128px 0 256px; + } +} + +.Accordion { + display: grid; + + & > div { + padding: 24px 0; + border-top: 1px solid #322f43; + + button { + display: grid; + grid-template-columns: 1fr 24px; + gap: 12px; + + span, + p { + color: #fff; + font-size: 18px; + font-weight: 700; + line-height: 1.16; + letter-spacing: -0.18px; + margin: 0; + padding-top: 0; + } + + @include breakpoint(lg) { + font-size: 24px; + font-weight: 700; + line-height: 1.12; + letter-spacing: -0.02em; + text-align: left; + } + } + + p { + padding-top: 16px; + margin-bottom: 0; + color: #6c6a81; + font-size: 15px; + font-weight: 700; + line-height: 1.32; + max-width: 100%; + + a { + color: #6c6a81; + text-decoration: underline; + transition: color 0.2s ease; + + &:hover { + color: #9945ff; + } + } + + @include breakpoint(lg) { + font-size: 18px; + font-weight: 700; + line-height: 1.1; + text-align: left; + } + } + + ul { + padding-top: 16px; + } + + li { + color: #6c6a81; + font-size: 15px; + font-weight: 700; + line-height: 1.32; + + & + li { + margin-top: 8px; + } + + @include breakpoint(lg) { + font-size: 18px; + font-weight: 700; + line-height: 1.1; + } + } + } +} diff --git a/src/pages/solutions/Wallets.module.scss b/src/pages/solutions/Wallets.module.scss new file mode 100644 index 000000000..220878c1a --- /dev/null +++ b/src/pages/solutions/Wallets.module.scss @@ -0,0 +1,247 @@ +@import "~@/scss/solutions/_variables.scss"; + +.PageWrapper { + overflow: hidden; +} + +.PageWrapper, +.Header { + &, + nav { + background: #0d0817 !important; + } +} + +.WalletTypes { + padding: 64px 0; + + h2 { + font-size: 36px; + font-weight: 700; + line-height: 1.1; + letter-spacing: -0.01em; + text-align: center; + margin-bottom: 0; + @include max-width(700px); + + strong { + background: linear-gradient(85.62deg, #9945ff -2.51%, #14f195 92.16%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + } + } + + @include breakpoint(md) { + padding-top: 128px; + padding-bottom: 40px; + + h2 { + font-size: 56px; + } + } + + @include breakpoint(lg) { + h2 { + font-size: 64px; + } + } + + @include breakpoint(xl) { + h2 { + font-size: 80px; + line-height: 1.04; + letter-spacing: -0.02em; + @include max-width(1000px); + } + } +} + +.DetailsSection { + padding-top: 0; + + @include breakpoint(md) { + grid-template-columns: repeat(3, 1fr); + grid-column-gap: 80px; + padding-bottom: 128px; + } +} + +.BasicCallout { + @media (max-width: #{$screen-md-min - 1}) { + p { + font-size: 20px; + } + } + @include breakpoint(md) { + padding-top: 128px; + padding-bottom: 128px; + } +} + +.LongformSection { + overflow: hidden; + + .LongformItem1, + .LongformItem2 { + .LongformItemMedia { + background: + linear-gradient(var(--grey-500) 0 0) padding-box, + linear-gradient(90deg, #504d61 0%, #ffffff 49.61%, #504d61 100%) + border-box; + border: 1px solid transparent; + border-radius: 16px; + overflow: hidden; + } + } + + @media (max-width: #{$screen-md-min - 1}) { + h2 { + font-size: 32px; + } + } + + p, + a { + color: var(--grey-250) !important; + } + + @include breakpoint(md) { + .LongformItem1, + .LongformItem2, + .LongformItem3, + .LongformItem4 { + padding-top: 128px; + padding-bottom: 128px; + } + } + + @include breakpoint(xl) { + .LongformItem1 { + padding-bottom: 66px; + } + .LongformItem2 { + padding-top: 210px; + padding-bottom: 210px; + } + .LongformItem4 { + padding-top: 215px; + padding-bottom: 215px; + } + } +} + +.WalletSolutions { + padding: 64px 24px 128px; + + .WalletSolutionsTitle { + text-align: center; + margin: 0; + font-size: 36px; + font-weight: 700; + line-height: 1.14; + letter-spacing: -0.01em; + text-align: center; + } + + .WalletSolutionsSubtitle { + font-size: 20px; + font-weight: 700; + line-height: 1.2; + text-align: center; + color: var(--grey-250); + margin: 24px auto 0; + max-width: 886px; + } + + .WalletSolutionsCards { + margin-top: 64px; + display: flex; + flex-direction: column; + gap: 40px; + + .WalletSolutionsCard { + background: var(--grey-500); + padding: 40px; + border-radius: 8px; + + h3 { + font-size: 20px; + font-weight: 700; + line-height: 1.2; + text-align: center; + margin-bottom: 0; + } + + p { + font-size: 20px; + font-weight: 700; + line-height: 1.2; + text-align: center; + color: var(--grey-300); + margin: 24px 0 0; + max-width: 100%; + } + } + } + + .WalletSolutionsButtonWrapper { + width: max-content; + margin: 40px auto 0; + } + + @include breakpoint(md) { + padding-top: 128px; + padding-bottom: 128px; + + .WalletSolutionsTitle { + font-size: 64px; + } + + .WalletSolutionsSubtitle { + font-size: 24px; + } + + .WalletSolutionsCards { + flex-direction: row; + gap: 40px; + justify-content: center; + } + } + + @include breakpoint(xl) { + padding: 128px 40px; + + .WalletSolutionsTitle { + font-size: 64px; + line-height: 1.04; + letter-spacing: -0.02em; + } + + .WalletSolutionsSubtitle { + font-size: 28px; + line-height: 1.15; + letter-spacing: -0.02em; + } + + .WalletSolutionsCards { + margin-top: 112px; + + .WalletSolutionsCard { + h3 { + font-size: 28px; + font-weight: 700; + line-height: 1.15; + letter-spacing: -0.02em; + } + + p { + font-size: 20px; + font-weight: 700; + line-height: 1.12; + letter-spacing: -0.02em; + } + } + } + } +} diff --git a/src/pages/solutions/WalletsExplorer.module.scss b/src/pages/solutions/WalletsExplorer.module.scss new file mode 100644 index 000000000..a5009234a --- /dev/null +++ b/src/pages/solutions/WalletsExplorer.module.scss @@ -0,0 +1,29 @@ +@import "~@/scss/solutions/variables"; + +.FooterCallout { + @media (max-width: #{$screen-xl-min - 1}) { + .FooterCalloutTopSection { + padding-bottom: 64px; + } + + .FooterCalloutButtonLarge { + a { + padding: 24px; + display: block; + + svg { + margin: 0; + margin-left: 12px; + } + } + } + } + + @include breakpoint(sm) { + .FooterCalloutButtonLarge { + a { + text-align: left; + } + } + } +} diff --git a/src/pages/solutions/blinks-and-actions.jsx b/src/pages/solutions/blinks-and-actions.jsx new file mode 100644 index 000000000..63f3bf19c --- /dev/null +++ b/src/pages/solutions/blinks-and-actions.jsx @@ -0,0 +1,296 @@ +import Image from "next/image"; +import Layout from "@/components/solutions/layout"; +import { useTranslation, Trans } from "next-i18next"; +import HTMLHead from "@/components/HTMLHead"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import Lottie from "react-lottie"; +import BlinksHero from "@/components/solutions/blinks-and-actions/BlinksHero"; +import BasicCallout from "@/components/solutions/BasicCallout"; +import LongformItem from "@/components/solutions/LongformItem"; +import DeveloperResources, { + DeveloperResourcesLink, +} from "@/components/solutions/DeveloperResources"; +import FooterCallout from "@/components/solutions/FooterCallout"; +import MediaOptionSelection from "@/components/solutions/MediaOptionSelection"; +import Text, { GradientText, AnimatedText } from "@/components/shared/Text"; +import CardsSlider from "@/components/shared/CardsSlider"; + +import styles from "./BlinksAndActions.module.scss"; + +import { MotionSlideIn } from "@/components/shared/Motions"; + +import * as blinksLottie from "../../../assets/solutions/blinks-and-actions/Blinks_Blinks_V1.json"; +import * as notificationsLottie from "../../../assets/solutions/blinks-and-actions/Blinks_Notification_V1.json"; +import * as payLottie from "../../../assets/solutions/blinks-and-actions/Blinks_Pay_V1.json"; +import * as socialLottie from "../../../assets/solutions/blinks-and-actions/Blinks_Social.json"; +import * as messagingLottie from "../../../assets/solutions/blinks-and-actions/Blinks_Messaging.json"; + +const BlinksAndActions = () => { + const { t } = useTranslation(); + + const longform1Content = t("solutions-blinks-and-actions.longform-1.items", { + returnObjects: true, + }).map((item, index) => ( +
+ + {item.title} + + + {item.text} + +
+ )); + + const EcosystemCard = ({ img, imgAlt }) => ( +
+ {imgAlt} +
+ ); + + const ecosystemCards = [ + , + , + , + , + , + , + ]; + + const developerResourcesLinks = [ + , + , + ]; + + const lottieOptions = { + loop: true, + autoplay: true, + rendererSettings: { + preserveAspectRatio: "xMidYMid slice", + className: styles.Lottie, + }, + }; + + const mediaOptionSelectionOptions = [ + { + label: "Push Notifications", + media: ( + + + + ), + }, + { + label: "QR codes", + media: ( + + + + ), + }, + { + label: "Social Posts", + media: ( + + + + ), + }, + { + label: "Messaging Apps", + media: ( + + + + ), + }, + ]; + + return ( + + + +
+ + + + ), + }} + /> + } + subtitleKey="solutions-blinks-and-actions.callout-1.subtitle" + className={styles.BasicCallout} + /> + +
+ + + } + mediaDesktopPlacement="left" + className={styles.LongformItem1} + mediaClassName={styles.LongformItemMedia} + customContent={ +
+ {longform1Content} +
+ } + /> + +
+ +
+ + + ), + }} + /> + + + +
+ + + ), + }} + /> + } + subtitleKey="solutions-blinks-and-actions.callout-2.subtitle" + className={styles.BasicCallout} + /> + + + + + + +
+ + ); +}; + +export async function getStaticProps({ locale }) { + return { + props: { + ...(await serverSideTranslations(locale, ["common"])), + }, + }; +} + +export default BlinksAndActions; diff --git a/src/pages/solutions/creative.jsx b/src/pages/solutions/creative.jsx new file mode 100644 index 000000000..c57167cd0 --- /dev/null +++ b/src/pages/solutions/creative.jsx @@ -0,0 +1,318 @@ +import Link from "next/link"; +import { useTranslation, Trans } from "next-i18next"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import Lottie from "react-lottie"; +import classNames from "classnames"; + +import HTMLHead from "@/components/HTMLHead"; +import Layout from "@/components/solutions/layout"; +import Button from "@/components/solutions/Button"; +import Stats from "@/components/solutions/Stats"; +import BasicCallout from "@/components/solutions/BasicCallout"; +import VideoBgHero from "@/components/solutions/VideoBgHero"; +import LongformItem from "@/components/solutions/LongformItem"; +import EcosystemSliderWithTabs, { + Card, +} from "@/components/solutions/EcosystemSliderWithTabs"; +import SuccessStories, { + StoryCard, +} from "@/components/solutions/SuccessStories"; +import DeveloperResources, { + DeveloperResourcesLink, +} from "@/components/solutions/DeveloperResources"; +import FooterCallout from "@/components/solutions/FooterCallout"; +import { AnimatedText, GradientText } from "@/components/shared/Text"; +import { MotionSlideIn } from "@/components/shared/Motions"; + +import styles from "./Creative.module.scss"; + +import * as blinksLottie from "../../../assets/solutions/creative/Blinks.json"; +import * as nftLottie from "../../../assets/solutions/creative/NFT.json"; + +const Creative = () => { + const { t } = useTranslation(); + + const statsContent = t("solutions-creative.stats", { + returnObjects: true, + }); + + const platformCards = [ + , + , + , + , + ]; + + const creativesCards = [ + , + , + , + , + ]; + + const caseStudyCards = [ + + } + />, + ]; + + const developerResourcesLinks = [ + , + ]; + + return ( + + +
+ + + + ), + }} + /> + } + subtitleKey={statsContent.subtitle} + stats={statsContent.stats} + className={styles.StatsSection} + buttonsClassName={styles.StatsButtons} + statsClassName={styles.StatsWrapper} + /> + + + ), + }} + /> + } + subtitleKey="solutions-creative.callout-1.subtitle" + className={styles.BasicCallout} + /> + +
+ + + } + mediaDesktopPlacement="right" + titleComponent={t("solutions-creative.meet-users.title")} + subtitleComponent={ + + ), + }} + /> + } + className={styles.LongformItem1} + /> + + + + + } + textContentDesktopDirection="row" + titleComponent={t("solutions-creative.mint-digital.title")} + subtitleComponent={ + + ), + }} + /> + } + className={styles.LongformItem4} + /> + +
+ +
+
+
+
+ + {t( + "solutions-creative.explore-cards.cards.brand-loyalty.title", + )} + + + + {t( + "solutions-creative.explore-cards.cards.brand-loyalty.subtitle", + )} + +
+ +
+
+
+ +
+ +
+ + + + + + +
+ + ); +}; + +export async function getStaticProps({ locale }) { + return { + props: { + ...(await serverSideTranslations(locale, ["common"])), + }, + }; +} + +export default Creative; diff --git a/src/pages/solutions/defi.jsx b/src/pages/solutions/defi.jsx new file mode 100644 index 000000000..f45313761 --- /dev/null +++ b/src/pages/solutions/defi.jsx @@ -0,0 +1,395 @@ +import Link from "next/link"; +import { useTranslation, Trans } from "next-i18next"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import Lottie from "react-lottie"; +import classNames from "classnames"; +import Image from "next/image"; + +import Layout from "@/components/solutions/layout"; +import HTMLHead from "@/components/HTMLHead"; +import Button from "@/components/solutions/Button"; +import LottieHeroWithTabs from "@/components/solutions/LottieHeroWithTabs"; +import FooterCallout from "@/components/solutions/FooterCallout"; +import EcosystemSlider, { + Card, +} from "../../components/solutions/EcosystemSlider"; +import SuccessStories, { + StoryCard, +} from "@/components/solutions/SuccessStories"; +import DeveloperResources, { + DeveloperResourcesLink, +} from "@/components/solutions/DeveloperResources"; +import LongformItem from "@/components/solutions/LongformItem"; +import BasicCallout from "@/components/solutions/BasicCallout"; +import { MotionSlideIn } from "@/components/shared/Motions"; +import Text, { AnimatedText, GradientText } from "@/components/shared/Text"; +import CardsSlider from "@/components/shared/CardsSlider"; + +import styles from "./Defi.module.scss"; + +import * as mobileHeroWithSolana from "../../../assets/solutions/defi/DeFi_MobileHero_WithSolana_V1.json"; +import * as mobileHeroWithoutSolana from "../../../assets/solutions/defi/DeFi_MobileHero_WithoutSolana_V1.json"; +import * as desktopHeroWithSolana from "../../../assets/solutions/defi/DeFi_DesktopHero_WithSolana_V1.json"; +import * as desktopHeroWithoutSolana from "../../../assets/solutions/defi/DeFi_DesktopHero_WithoutSolana_V1.json"; + +import * as longformTwo from "../../../assets/solutions/defi/DeFi_Interest_V1.json"; +import * as longformOne from "../../../assets/solutions/defi/DeFi_Blinks_V1.json"; + +const DeFi = () => { + const { t } = useTranslation(); + + const heroTabs = [ + { + buttonTitle: t("solutions-defi.hero.tabs.0.trigger-title"), + content: { + title: t("solutions-defi.hero.tabs.0.title"), + subtitle: t("solutions-defi.hero.tabs.0.subtitle"), + lottieMobile: mobileHeroWithSolana, + lottieDesktop: desktopHeroWithSolana, + }, + }, + { + buttonTitle: t("solutions-defi.hero.tabs.1.trigger-title"), + content: { + title: t("solutions-defi.hero.tabs.1.title"), + subtitle: t("solutions-defi.hero.tabs.1.subtitle"), + lottieMobile: mobileHeroWithoutSolana, + lottieDesktop: desktopHeroWithoutSolana, + }, + }, + ]; + + const statsContent = t("solutions-defi.stats", { + returnObjects: true, + }); + + const ecosystemCards = [ + , + , + ]; + + const caseStudyCards = [ + + Solana Mobile turned to Helio’s Solana Pay x Shopify + plugin to unlock new payment methods and save $1M in fees. + + } + buttonText={t("solutions-defi.case-studies.cards.item-one.button")} + buttonUrl="https://solana.com/news/case-study-pyth" + className={styles.StoryCard} + logoClassName={styles.StoryCardLogo} + mainImageClassName={styles.StoryCardImage} + key="story-card-1" + />, + + Solana Mobile turned to Helio’s Solana Pay x Shopify + plugin to unlock new payment methods and save $1M in fees. + + } + buttonText={t("solutions-defi.case-studies.cards.item-two.button")} + buttonUrl="https://solana.com/news/case-study-etherfuse" + className={styles.StoryCard} + logoClassName={styles.StoryCardLogo} + mainImageClassName={styles.StoryCardImage} + key="story-card-2" + />, + ]; + + const developerResourcesLinks = [ + , + , + , + ]; + + const DetailCard = ({ title, text, iconSrc }) => ( +
+
+ {title} + + {title} + + + {text} + +
+
+ ); + + const detailCards = [ + , + , + , + ]; + + return ( + + + +
+ + +
+ +
+ + ), + }} + /> +
+ +
+ + ), + }} + /> +
+ + +
+ +
+ +
+
+ + + {statsContent.stats[0].value} + + + {statsContent.stats[0].label} + + +
+ +
+ + + {statsContent.stats[1].value} + + + {statsContent.stats[1].label} + + +
+ +
+ + + {statsContent.stats[2].value} + + + {statsContent.stats[2].label} + + +
+
+
+ + + ), + }} + /> + } + className={styles.BasicCallout} + /> + +
+ + + } + mediaDesktopPlacement="left" + titleComponent={t("solutions-defi.longform-one.title")} + subtitleComponent={ + ]} + /> + } + className={styles.LongformItem1} + /> + + + + + +
+ } + mediaDesktopPlacement="right" + titleComponent={t("solutions-defi.longform-two.title")} + subtitleComponent={ + , + ]} + /> + } + className={styles.LongformItem2} + /> + +
+ +
+ {detailCards} +
+ + + +
+ +
+ + + + + + + + + ); +}; + +export async function getStaticProps({ locale }) { + return { + props: { + ...(await serverSideTranslations(locale, ["common"])), + }, + }; +} + +export default DeFi; diff --git a/src/pages/solutions/gaming.jsx b/src/pages/solutions/gaming.jsx new file mode 100644 index 000000000..c5905b193 --- /dev/null +++ b/src/pages/solutions/gaming.jsx @@ -0,0 +1,289 @@ +import Link from "next/link"; +import { useTranslation, Trans } from "next-i18next"; +import HTMLHead from "@/components/HTMLHead"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import classNames from "classnames"; +import { useInView } from "react-intersection-observer"; +import dynamic from "next/dynamic"; +import Lottie from "react-lottie"; + +import Layout from "@/components/solutions/layout"; +import GamingVideoHero from "@/components/solutions/gaming/GamingVideoHero"; +import GamesKit from "@/components/solutions/gaming/GamesKit"; +import GamingSlider from "@/components/solutions/gaming/GamingSlider"; +import Stats from "@/components/solutions/Stats"; +import LongformItem from "@/components/solutions/LongformItem"; +import SuccessStories, { + StoryCard, +} from "@/components/solutions/SuccessStories"; +import FooterCallout from "@/components/solutions/FooterCallout"; +import DeveloperResources, { + DeveloperResourcesLink, +} from "@/components/solutions/DeveloperResources"; +import { MotionSlideIn } from "@/components/shared/Motions"; +import { AnimatedText, GradientText } from "@/components/shared/Text"; + +import styles from "./Gaming.module.scss"; + +import * as blinksLottie from "../../../assets/solutions/gaming/Gaming_Blinks_V1.json"; +import * as mintPonyCoinLottie from "../../../assets/solutions/gaming/Gaming_MintPonyCoin.json"; +import * as nftLottie from "../../../assets/solutions/gaming/Gaming_NFT.json"; +import spotlightImg from "../../../assets/solutions/gaming/Spotlight.jpg"; + +const Gaming = () => { + const { t } = useTranslation(); + + const statsContent = t("solutions-gaming.stats", { + returnObjects: true, + }); + + const spotlightCards = [ + } + buttonText={t("solutions-gaming.spotlight.button")} + buttonUrl="https://solana.com/news/case-study-photo-finish-live" + className={styles.StoryCard} + logoClassName={styles.SuccessStoriesLogo} + key="photo-finish-live" + />, + ]; + + const developerResourcesLinks = [ + , + , + , + , + ]; + + const [tvMertRef, tvMertInView] = useInView({ + threshold: 0, + triggerOnce: true, + }); + + const TVMert = dynamic( + () => import("../../components/solutions/gaming/TVMert"), + { + ssr: false, + }, + ); + + return ( + + + +
+ + + + ), + }} + /> + } + subtitleKey={statsContent.subtitle} + stats={statsContent.stats} + className={styles.Stats} + statsClassName={styles.StatsContent} + /> + +
+ + + ), + }} + /> + +
+ +
+ + + } + mediaDesktopPlacement="below" + className={styles.CreateWithoutConstraint} + mediaClassName={styles.MediaComponent} + textContentDesktopDirection="row" + titleComponent={t( + "solutions-gaming.create-without-constraint.title", + )} + subtitleComponent={ + + ), + }} + /> + } + /> + + + + + } + mediaDesktopPlacement="right" + titleComponent={t("solutions-gaming.engage-anywhere.title")} + subtitleComponent={ + + ), + }} + /> + } + /> + + + + + } + mediaDesktopPlacement="left" + titleComponent={t("solutions-gaming.control-customize.title")} + subtitleComponent={ + + + + ), + }} + /> + + + + + + } + /> + +
+ +
+ {tvMertInView ? :
} +
+ + + +
+ } + cards={spotlightCards} + className={styles.SuccessStories} + /> +
+ + + + + + +
+ + ); +}; + +export async function getStaticProps({ locale }) { + return { + props: { + ...(await serverSideTranslations(locale, ["common"])), + }, + }; +} + +export default Gaming; diff --git a/src/pages/solutions/institutional-finance.jsx b/src/pages/solutions/institutional-finance.jsx new file mode 100644 index 000000000..7fd63aa98 --- /dev/null +++ b/src/pages/solutions/institutional-finance.jsx @@ -0,0 +1,334 @@ +import Link from "next/link"; +import { Trans, useTranslation } from "next-i18next"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import Lottie from "react-lottie"; + +import Layout from "@/components/solutions/layout"; +import HTMLHead from "@/components/HTMLHead"; +import Stats from "@/components/solutions/Stats"; +import FooterCallout from "@/components/solutions/FooterCallout"; +import VideoBgHero from "@/components/solutions/VideoBgHero"; +import EcosystemSlider, { + Card, +} from "../../components/solutions/EcosystemSlider"; +import SuccessStories, { + StoryCard, +} from "@/components/solutions/SuccessStories"; +import DeveloperResources, { + DeveloperResourcesLink, +} from "@/components/solutions/DeveloperResources"; +import LongformItem from "@/components/solutions/LongformItem"; +import BasicCallout from "@/components/solutions/BasicCallout"; +import { MotionSlideIn } from "@/components/shared/Motions"; +import { GradientText } from "@/components/shared/Text"; + +import styles from "./IF.module.scss"; + +import * as longformOne from "../../../assets/solutions/institutional-finance/InstitutionalFinance_PermanentDelegate_V1.json"; +import * as longformTwo from "../../../assets/solutions/institutional-finance/Institutional Finance_SPE_V1.json"; +import * as longformThree from "../../../assets/solutions/institutional-finance/Institutional Finance_RWA_V1.json"; + +import homebaseLogo from "../../../assets/solutions/institutional-finance/homebase-logo.png"; +import homebaseMain from "../../../assets/solutions/institutional-finance/homebase-main.jpg"; + +const InstitutionalFinance = () => { + const { t } = useTranslation(); + + const statsContent = t("solutions-institutional-finance.stats", { + returnObjects: true, + }); + + const ecosystemCards = [ + , + , + ]; + + const caseStudyCards = [ + }} + /> + } + buttonText={t( + "solutions-institutional-finance.case-studies.cards.item-one.button", + )} + buttonUrl="https://solana.com/news/case-study-pyth" + className={styles.StoryCard} + key="pyth" + />, + }} + /> + } + buttonText={t( + "solutions-institutional-finance.case-studies.cards.item-two.button", + )} + buttonUrl="https://solana.com/news/case-study-homebase" + className={styles.StoryCard} + key="homebase" + />, + ]; + + const developerResourcesLinks = [ + , + , + , + ]; + + return ( + + + +
+ + + + ), + }} + /> + } + titleKey={statsContent.title} + subtitleKey={statsContent.subtitle} + stats={statsContent.stats} + className={styles.StatsSection} + statsClassName={styles.StatsContent} + buttonsClassName={styles.StatsButtons} + /> + + + ), + }} + /> + } + className={styles.BasicCallout} + /> + +
+ + + +
+ } + mediaDesktopPlacement="left" + titleComponent={t( + "solutions-institutional-finance.longform-two.title", + )} + subtitleComponent={ + , + ]} + /> + } + className={styles.LongformItem2} + /> + + + + + } + mediaDesktopPlacement="right" + titleComponent={t( + "solutions-institutional-finance.longform-three.title", + )} + subtitleComponent={ + , + ]} + /> + } + className={styles.LongformItem3} + /> + + + + + } + mediaDesktopPlacement="left" + titleComponent={t( + "solutions-institutional-finance.longform-one.title", + )} + subtitleComponent={ + , + ]} + /> + } + className={styles.LongformItem1} + /> + +
+ +
+ +
+ + + + + + +
+ + ); +}; + +export async function getStaticProps({ locale }) { + return { + props: { + ...(await serverSideTranslations(locale, ["common"])), + }, + }; +} + +export default InstitutionalFinance; diff --git a/src/pages/solutions/loyalty.jsx b/src/pages/solutions/loyalty.jsx new file mode 100644 index 000000000..aaa85d71c --- /dev/null +++ b/src/pages/solutions/loyalty.jsx @@ -0,0 +1,320 @@ +import Lottie from "react-lottie"; +import { useTranslation, Trans } from "next-i18next"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import classNames from "classnames"; + +import Layout from "@/components/solutions/layout"; +import HTMLHead from "@/components/HTMLHead"; +import Stats from "@/components/solutions/Stats"; +import BasicCallout from "@/components/solutions/BasicCallout"; +import LongformItem from "@/components/solutions/LongformItem"; +import FooterCallout from "@/components/solutions/FooterCallout"; +import LoyaltyHero from "@/components/solutions/loyalty/LoyaltyHero"; +import CardsSlider from "@/components/shared/CardsSlider"; +import { StoryCard } from "@/components/solutions/SuccessStories"; +import DeveloperResources, { + DeveloperResourcesLink, +} from "@/components/solutions/DeveloperResources"; +import { MotionSlideIn } from "@/components/shared/Motions"; +import { GradientText } from "@/components/shared/Text"; +import SuccessStories from "@/components/solutions/SuccessStories"; + +import styles from "./Loyalty.module.scss"; + +import * as heroLottie from "../../../assets/solutions/loyalty/Loyalty_Hero_V1.json"; +import * as LongformOneLottie from "../../../assets/solutions/loyalty/Loyalty_TokenExtensions.json"; +import * as LongformTwoLottie from "../../../assets/solutions/loyalty/Loyalty_State Compression_V1.json"; +import * as LongformThreeLottie from "../../../assets/solutions/loyalty/Loyalty_Solana Pay_V1.json"; +import * as LongformFourLottie from "../../../assets/solutions/loyalty/Loyalty_Secret Menu Item_V1.json"; + +const Loyalty = () => { + const { t } = useTranslation(); + + const statsContent = t("solutions-loyalty.stats", { + returnObjects: true, + }); + + const longformContent = t("solutions-loyalty.longform", { + returnObjects: true, + }); + + const caseStudyCards = [ + }} + /> + } + buttonText={t( + "solutions-loyalty.case-study-cards.cards.boba-guys.button-text", + )} + buttonUrl="https://solana.com/news/case-study-boba-guys" + className={styles.StoryCard} + logoClassName={styles.StoryCardLogo} + key="boba-guys" + />, + }} + /> + } + buttonText={t( + "solutions-loyalty.case-study-cards.cards.asics.buttonText", + )} + buttonUrl="https://ui.asics.com/" + className={styles.StoryCard} + logoClassName={styles.StoryCardLogo} + key="asics" + />, + }} + /> + } + buttonText={t("solutions-loyalty.case-study-cards.cards.drip.buttonText")} + buttonUrl="https://blockworks.co/news/drip-haus-mass-adoption-strategy" + className={styles.StoryCard} + logoClassName={styles.StoryCardLogo} + key="drip" + />, + }} + /> + } + buttonText={t( + "solutions-loyalty.case-study-cards.cards.eric-church.buttonText", + )} + buttonUrl="https://single.xyz/blogs/blog/eric-church-future-proofs-fandom-solana-based-digital-deeds-nashville-bar" + className={styles.StoryCard} + logoClassName={styles.StoryCardLogo} + key="eric-church" + />, + ]; + + const developerResourcesLinks = [ + , + , + , + , + ]; + + return ( + + + +
+ + + + ), + }} + /> + } + subtitleKey={statsContent.subtitle} + kickerKey={statsContent.finePrint} + kickerUrl="https://solana.com/news/case-study-boba-guys" + stats={statsContent.stats} + className={styles.Stats} + statsClassName={styles.StatsContent} + /> + + + ), + }} + /> + } + subtitleKey="solutions-loyalty.callout-1.subtitle" + className={styles.BasicCallout} + /> + +
+ + + } + mediaDesktopPlacement="right" + titleComponent={longformContent[0].title} + subtitleComponent={longformContent[0].text} + className={styles.LongformItem1} + /> + + + + + } + textContentDesktopDirection="row" + mediaDesktopPlacement="below" + titleComponent={longformContent[1].title} + subtitleComponent={longformContent[1].text} + className={styles.LongformItem2} + /> + + + + + } + mediaDesktopPlacement="left" + titleComponent={longformContent[2].title} + subtitleComponent={longformContent[2].text} + className={styles.LongformItem3} + /> + + + + + } + mediaDesktopPlacement="right" + titleComponent={longformContent[3].title} + subtitleComponent={longformContent[3].text} + className={styles.LongformItem4} + /> + +
+ +
+ + + +
+ + + + +
+ + ); +}; + +export async function getStaticProps({ locale }) { + return { + props: { + ...(await serverSideTranslations(locale, ["common"])), + }, + }; +} + +export default Loyalty; diff --git a/src/pages/solutions/payments.jsx b/src/pages/solutions/payments.jsx new file mode 100644 index 000000000..d5843f89c --- /dev/null +++ b/src/pages/solutions/payments.jsx @@ -0,0 +1,395 @@ +import Link from "next/link"; +import { Trans, useTranslation } from "next-i18next"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import Lottie from "react-lottie"; +import classNames from "classnames"; + +import Layout from "@/components/solutions/layout"; +import HTMLHead from "@/components/HTMLHead"; +import Button from "@/components/solutions/Button"; +import LottieHeroWithTabs from "@/components/solutions/LottieHeroWithTabs"; +import Stats from "@/components/solutions/Stats"; +import FooterCallout from "@/components/solutions/FooterCallout"; +import EcosystemSlider, { Card } from "@/components/solutions/EcosystemSlider"; +import SuccessStories, { + StoryCard, +} from "@/components/solutions/SuccessStories"; +import DeveloperResources, { + DeveloperResourcesLink, +} from "@/components/solutions/DeveloperResources"; +import LongformItem from "@/components/solutions/LongformItem"; +import BasicCallout from "@/components/solutions/BasicCallout"; +import { MotionSlideIn } from "@/components/shared/Motions"; +import { GradientText } from "@/components/shared/Text"; + +import styles from "./Payments.module.scss"; + +import * as mobileHeroWithSolana from "../../../assets/solutions/payments/MobileHero_WithSolana.json"; +import * as mobileHeroWithoutSolana from "../../../assets/solutions/payments/MobileHero_WithoutSolana.json"; +import * as desktopHeroWithSolana from "../../../assets/solutions/payments/DesktopHero_WithSolana.json"; +import * as desktopHeroWithoutSolana from "../../../assets/solutions/payments/DesktopHero_WithoutSolana.json"; + +import * as solanaPayLottie from "../../../assets/solutions/payments/Solana Pay_V1.json"; +import * as kycLottie from "../../../assets/solutions/payments/KYC.json"; +import * as blinksLottie from "../../../assets/solutions/payments/Blinks.json"; +import * as gaslessLottie from "../../../assets/solutions/payments/GaslessRelayer.json"; + +export default function Payments() { + const { t } = useTranslation(); + + const heroTabs = [ + { + key: "tab-0", + buttonTitle: t("solutions-payments.hero.tabs.0.trigger-title"), + content: { + title: t("solutions-payments.hero.tabs.0.title"), + subtitle: t("solutions-payments.hero.tabs.0.subtitle"), + lottieMobile: mobileHeroWithSolana, + lottieDesktop: desktopHeroWithSolana, + }, + }, + { + key: "tab-1", + buttonTitle: t("solutions-payments.hero.tabs.1.trigger-title"), + content: { + title: t("solutions-payments.hero.tabs.1.title"), + subtitle: t("solutions-payments.hero.tabs.1.subtitle"), + lottieMobile: mobileHeroWithoutSolana, + lottieDesktop: desktopHeroWithoutSolana, + }, + }, + ]; + + const statsContent = t("solutions-payments.stats", { + returnObjects: true, + }); + + const ecosystemCards = [ + , + , + , + , + , + , + , + , + , + , + ]; + + const caseStudyCards = [ + , + , + ]; + + const developerResourcesLinks = [ + , + , + , + ]; + + return ( + + + +
+ + +
+ + ), + }} + /> + } + subtitleKey={statsContent.subtitle} + stats={statsContent.stats} + buttonsComponent={ + <> +
+ + + ), + }} + /> + } + subtitleKey="solutions-payments.callout-1.subtitle" + className={styles.BasicCallout} + /> + +
+ + + +
+ } + mediaDesktopPlacement="right" + titleComponent={t("solutions-payments.token-extensions.title")} + subtitleComponent={ + + ), + }} + /> + } + className={classNames(styles.LongformItem, styles.LongformItem2)} + /> + + + + + } + textContentDesktopDirection="column" + mediaDesktopPlacement="below" + titleComponent={t( + "solutions-payments.feeless-transactions.title", + )} + subtitleComponent={ + + } + className={classNames(styles.LongformItem, styles.LongformItem4)} + /> + + + + + } + mediaDesktopPlacement="left" + titleComponent={t("solutions-payments.blinks-actions.title")} + subtitleComponent={ + + ), + }} + /> + } + className={classNames(styles.LongformItem, styles.LongformItem3)} + /> + + + + + } + mediaDesktopPlacement="right" + titleComponent={t("solutions-payments.solana-pay.title")} + subtitleComponent={ + + ), + }} + /> + } + className={classNames(styles.LongformItem, styles.LongformItem1)} + /> + +
+ +
+ +
+ + + + + + + + + ); +} + +export async function getStaticProps({ locale }) { + return { + props: { + ...(await serverSideTranslations(locale, ["common"])), + }, + }; +} diff --git a/src/pages/solutions/token-extensions.jsx b/src/pages/solutions/token-extensions.jsx new file mode 100644 index 000000000..ddd0e8da4 --- /dev/null +++ b/src/pages/solutions/token-extensions.jsx @@ -0,0 +1,792 @@ +import Link from "next/link"; +import { Trans, useTranslation } from "next-i18next"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import Lottie from "react-lottie"; + +import Layout from "@/components/solutions/layout"; +import HTMLHead from "@/components/HTMLHead"; +import FooterCallout from "@/components/solutions/FooterCallout"; +import SuccessStories, { + StoryCard, +} from "@/components/solutions/SuccessStories"; +import DeveloperResources, { + DeveloperResourcesLink, +} from "@/components/solutions/DeveloperResources"; +import LongformItem from "@/components/solutions/LongformItem"; +import BasicCallout from "@/components/solutions/BasicCallout"; +import VideoBgHero from "@/components/solutions/VideoBgHero"; +import CollapsibleContent from "@/components/shared/CollapsibleContent"; +import { MotionSlideIn } from "@/components/shared/Motions"; +import Text, { AnimatedText, GradientText } from "@/components/shared/Text"; +import EcosystemToggle, { + EcosystemItemContentWrap, + EcosystemItemContentTitle, + EcosystemItemContentText, +} from "@/components/solutions/token-extensions/EcosystemToggle"; +import Button from "@/components/solutions/Button"; + +import styles from "./TE.module.scss"; + +import * as longformOne from "../../../assets/solutions/token-extensions/Token Extensions_Confidential Transfer_V1.json"; +import * as longformTwo from "../../../assets/solutions/token-extensions/Token Extensions_KYC_V1.json"; +import * as longformThree from "../../../assets/solutions/token-extensions/Token Extensions_Transfer Fees_V1.json"; + +import paypalLogo from "../../../assets/solutions/token-extensions/paypal-logo.svg"; +import paypalMain from "../../../assets/solutions/token-extensions/paypal-main.png"; + +const TokenExtensions = () => { + const { t } = useTranslation(); + + // Some do not have collapsible content + // Content children may include: Title, Text, Button + const ecosystemItems = [ + { + label: t("solutions-token-extensions.ecosystem.use-cases.seize-assets"), + content: ( + +
+ + +
+ + ), + }, + { + label: t("solutions-token-extensions.ecosystem.use-cases.allow-list"), + content: ( + +
+ + +
+ +
+ + +
+ +
+
+ + ), + }, + { + label: t("solutions-token-extensions.ecosystem.use-cases.block-list"), + content: ( + +
+ + +
+ + ), + }, + { + label: t( + "solutions-token-extensions.ecosystem.use-cases.authority-over-tokens", + ), + content: ( + +
+ + +
+ + ), + }, + { + label: t("solutions-token-extensions.ecosystem.use-cases.hide-amounts"), + content: ( + +
+ + +
+ + ), + }, + { + label: t( + "solutions-token-extensions.ecosystem.use-cases.accruing-interest", + ), + content: ( + +
+ + +
+
+
+ + ), + }, + { + label: t("solutions-token-extensions.ecosystem.use-cases.soul-bound"), + content: ( + +
+ + +
+
+
+ + ), + }, + { + label: t( + "solutions-token-extensions.ecosystem.use-cases.collect-fees-transfers", + ), + content: ( + +
+ + +
+ +
+ + +
+ + ), + }, + { + label: t( + "solutions-token-extensions.ecosystem.use-cases.permissioned-network", + ), + content: ( + +
+ + +
+ +
+ + +
+ + ), + }, + { + label: t( + "solutions-token-extensions.ecosystem.use-cases.attached-invoice-id", + ), + content: ( + +
+ + +
+ + ), + }, + { + label: t("solutions-token-extensions.ecosystem.use-cases.ap-ar"), + content: ( + +
+ + +
+ + ), + }, + { + label: t("solutions-token-extensions.ecosystem.use-cases.collection-nft"), + content: ( + +
+ + +
+ + ), + }, + { + label: t("solutions-token-extensions.ecosystem.use-cases.nft-royalties"), + content: ( + +
+ + +
+ +
+
+ + ), + }, + { + label: t("solutions-token-extensions.ecosystem.use-cases.transfer-logs"), + content: ( + +
+ + +
+ +
+
+ + ), + }, + ]; + + const caseStudyCards = [ + + } + buttonText={t( + "solutions-token-extensions.case-studies.cards.item-one.button", + )} + buttonUrl="https://solana.com/pyusd" + className={styles.StoryCard} + logoClassName={styles.StoryCardLogo} + key="paypal" + />, + + } + buttonText={t( + "solutions-token-extensions.case-studies.cards.item-two.button", + )} + buttonUrl="https://etherfuse.com/stablebonds/" + className={styles.StoryCard} + logoClassName={styles.StoryCardLogo} + key="etherfuse" + />, + ]; + + const developerResourcesLinks = [ + , + , + , + , + ]; + + return ( + + + +
+ + +
+ +
+ + + ), + }} + /> + } + subtitleKey="solutions-token-extensions.callout-1.text" + className={styles.BasicCallout} + id="real-world-use-cases" + /> + +
+ + + } + mediaDesktopPlacement="left" + titleComponent={t( + "solutions-token-extensions.longform-one.title", + )} + subtitleComponent={t( + "solutions-token-extensions.longform-one.subtitle", + )} + className={styles.LongformItem1} + /> + + + + + +
+ } + mediaDesktopPlacement="right" + titleComponent={t( + "solutions-token-extensions.longform-two.title", + )} + subtitleComponent={ + + } + className={styles.LongformItem2} + /> + + + + + } + mediaDesktopPlacement="left" + titleComponent={t( + "solutions-token-extensions.longform-three.title", + )} + subtitleComponent={t( + "solutions-token-extensions.longform-three.subtitle", + )} + className={styles.LongformItem3} + /> + +
+ + + + + +
+
+
+ + {t("solutions-token-extensions.faq.eyebrow")} + + + + {t("solutions-token-extensions.faq.title")} + +
+ +
+ + + {t("solutions-token-extensions.faq.q1.answer")} + + + + + + {t("solutions-token-extensions.faq.q2.answer")} + + + + + + + {t("solutions-token-extensions.faq.q3.answer.p1")} + + + {t("solutions-token-extensions.faq.q3.answer.p2")} + +
    +
  • {t("solutions-token-extensions.faq.q3.answer.l1")}
    • +
  • {t("solutions-token-extensions.faq.q3.answer.l2")}
    • +
  • {t("solutions-token-extensions.faq.q3.answer.l3")}
    • +
  • {t("solutions-token-extensions.faq.q3.answer.l4")}
    • +
+ + {t("solutions-token-extensions.faq.q3.answer.p3")} + + + + + + + {t("solutions-token-extensions.faq.q4.answer")} + + + + + + {t("solutions-token-extensions.faq.q5.answer")} + + + + + + {t("solutions-token-extensions.faq.q6.answer")} + + + + + + , + ]} + /> + + + + + + {t("solutions-token-extensions.faq.q8.answer")} + + + + + + {t("solutions-token-extensions.faq.q9.answer")} + + + + + + {t("solutions-token-extensions.faq.q10.answer")} + + + + + + {t("solutions-token-extensions.faq.q11.answer")} + + + + + + , + ]} + /> + + +
+
+
+ + + + + ); +}; + +export async function getStaticProps({ locale }) { + return { + props: { + ...(await serverSideTranslations(locale, ["common"])), + }, + }; +} + +export default TokenExtensions; diff --git a/src/pages/solutions/wallets-explorer.tsx b/src/pages/solutions/wallets-explorer.tsx new file mode 100644 index 000000000..d990e3ee0 --- /dev/null +++ b/src/pages/solutions/wallets-explorer.tsx @@ -0,0 +1,43 @@ +import { useTranslation } from "next-i18next"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; + +import HTMLHead from "@/components/HTMLHead"; +import Layout from "@/components/solutions/layout"; +import WalletsLayout from "@/components/solutions/wallets-explorer/WalletsLayout"; +import FooterCallout from "@/components/solutions/FooterCallout"; + +import styles from "./WalletsExplorer.module.scss"; + +export default function WalletsExplorer() { + const { t } = useTranslation(); + return ( + + + + + + + + ); +} + +export async function getStaticProps({ locale }) { + return { + props: { + ...(await serverSideTranslations(locale, ["common"])), + }, + }; +} diff --git a/src/pages/solutions/wallets.jsx b/src/pages/solutions/wallets.jsx new file mode 100644 index 000000000..5d4d5e532 --- /dev/null +++ b/src/pages/solutions/wallets.jsx @@ -0,0 +1,395 @@ +import { useState } from "react"; +import Link from "next/link"; +import Layout from "@/components/solutions/layout"; +import { useTranslation, Trans } from "next-i18next"; +import HTMLHead from "@/components/HTMLHead"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import Lottie from "react-lottie"; + +import WalletsHero from "@/components/solutions/wallets/WalletsHero"; +import WalletsExploreSolutions from "@/components/solutions/wallets/WalletsExploreSolutions"; +import BasicCallout from "@/components/solutions/BasicCallout"; +import LongformItem, { + LongformSeeMoreItem, +} from "@/components/solutions/LongformItem"; +import DeveloperResources, { + DeveloperResourcesLink, +} from "@/components/solutions/DeveloperResources"; +import FooterCallout from "@/components/solutions/FooterCallout"; +import { GradientText, AnimatedText } from "@/components/shared/Text"; +import LottieCarousel, { + LottieCarouselItem, +} from "@/components/shared/LottieCarousel"; +import { MotionSlideIn } from "@/components/shared/Motions"; + +import styles from "./Wallets.module.scss"; + +import * as blinksLottie from "../../../assets/solutions/wallets/Blinks.json"; +import * as gaslessLottie from "../../../assets/solutions/wallets/GaslessRelayer.json"; +import * as kycLottie from "../../../assets/solutions/wallets/KYC.json"; +import * as securityLottie from "../../../assets/solutions/wallets/Security.json"; + +import * as multiSigLottie from "../../../assets/learn/wallets/Wallets_Multi Sig Add_V1.json"; +import * as custodexLottie from "../../../assets/learn/wallets/Wallets_Custodex_V1.json"; +import * as stealthGuardLottie from "../../../assets/learn/wallets/Wallets_StealthGuard_V1.json"; + +const Wallets = () => { + const { t } = useTranslation(); + + const complianceInABoxSeeMore = [ + + + , + + + , + + + , + ]; + + const oneClickCommerceSeeMore = [ + + , + }} + /> + , + + , + }} + /> + , + ]; + + const feelessTransactionsSeeMore = [ + + + , + ]; + + const unrivaledSecuritySeeMore = [ + + + ), + }} + /> + , + + , + }} + /> + , + ]; + + const developerResourcesLinks = [ + , + , + , + , + , + ]; + + const [ + walletTypesLottiePausedStateMobile, + setWalletTypesLottiePausedStateMobile, + ] = useState([false, true, true]); + + const [ + walletTypesLottiePausedStateDesktop, + setWalletTypesLottiePausedStateDesktop, + ] = useState([true, false, true]); + + const walletTypesItemsMobile = [ + + } + isLottiePaused={walletTypesLottiePausedStateMobile[0]} + key="custodial" + />, + + } + isLottiePaused={walletTypesLottiePausedStateMobile[1]} + key="non-custodial" + />, + + } + isLottiePaused={walletTypesLottiePausedStateMobile[2]} + key="multisig" + />, + ]; + + const walletTypesItemsDesktop = [ + + } + isLottiePaused={walletTypesLottiePausedStateDesktop[0]} + key="multisig" + />, + + } + isLottiePaused={walletTypesLottiePausedStateDesktop[1]} + key="custodial" + />, + + } + isLottiePaused={walletTypesLottiePausedStateDesktop[2]} + key="non-custodial" + />, + ]; + + return ( + + + +
+ + +
+ + + ), + }} + /> + + + +
+ + + ), + }} + /> + } + subtitleKey="solutions-wallets.callout-2.subtitle" + className={styles.BasicCallout} + /> + +
+ + + } + mediaDesktopPlacement="right" + titleComponent={t("solutions-wallets.compliance-in-a-box.title")} + subtitleComponent={ + + ), + }} + /> + } + seeMoreTitle={t( + "solutions-wallets.compliance-in-a-box.see-more.title", + )} + seeMoreItems={complianceInABoxSeeMore} + className={styles.LongformItem1} + mediaClassName={styles.LongformItemMedia} + /> + + + + + } + mediaDesktopPlacement="left" + titleComponent={ + + {t("solutions-wallets.one-click-commerce.title")} + + } + subtitleComponent={ + + } + seeMoreTitle={t( + "solutions-wallets.one-click-commerce.see-more.title", + )} + seeMoreItems={oneClickCommerceSeeMore} + className={styles.LongformItem2} + mediaClassName={styles.LongformItemMedia} + /> + + + + } + textContentDesktopDirection="row" + mediaDesktopPlacement="below" + titleComponent={t("solutions-wallets.feeless-transactions.title")} + subtitleComponent={ + + } + seeMoreTitle={t( + "solutions-wallets.feeless-transactions.see-more.title", + )} + seeMoreItems={feelessTransactionsSeeMore} + className={styles.LongformItem3} + /> + + + + } + mediaDesktopPlacement="right" + titleComponent={t("solutions-wallets.unrivaled-security.title")} + subtitleComponent={ + + } + seeMoreTitle={t( + "solutions-wallets.unrivaled-security.see-more.title", + )} + seeMoreItems={unrivaledSecuritySeeMore} + className={styles.LongformItem4} + /> + +
+ + + + + + +
+ + ); +}; + +export async function getStaticProps({ locale }) { + return { + props: { + ...(await serverSideTranslations(locale, ["common"])), + }, + }; +} + +export default Wallets;