Skip to content

Commit 49ea30e

Browse files
hayderkghayderkg
authored
Header updates (#974)
* Display networks in home hero * Move text to literals * update literals
1 parent 1b2aad8 commit 49ea30e

23 files changed

+81
-32
lines changed

‎website/src/HomePage.tsx‎

Lines changed: 58 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,64 @@ export default function HomePage({ supportedNetworks }: { supportedNetworks: Sup
2929
className="left-16 h-full max-w-none xs:-top-2 xs:left-0"
3030
/>
3131
</div>
32-
<div className="col-[container] py-28 xs:py-36">
33-
<div className="max-w-120">
34-
<h1 className="text-heading-xlarge text-white">{t('index.hero.title')}</h1>
35-
<p className="mt-2">{t('index.hero.description')}</p>
36-
{/*
37-
<ExperimentalButtonGroup className="mt-4 prop-orientation-vertical xs:prop-orientation-horizontal">
38-
<ExperimentalButton href="/about/">{t('index.hero.cta1')}</ExperimentalButton>
39-
<ExperimentalButton href="/subgraphs/quick-start/">{t('index.hero.cta2')}</ExperimentalButton>
40-
</ExperimentalButtonGroup>
41-
*/}
32+
<div className="col-[container] py-28">
33+
<div className="flex flex-col items-start gap-4 lg:flex-row">
34+
<div className="flex-1 lg:mb-0 lg:max-w-84">
35+
<h1 className="text-heading-xlarge text-white">{t('index.hero.title')}</h1>
36+
<p className="mt-2 text-16">{t('index.hero.description')}</p>
37+
</div>
38+
<div className="flex w-full flex-1 justify-end lg:w-auto">
39+
<div className="w-full overflow-clip rounded-8 border border-space-1600 bg-space-1800 lg:w-auto">
40+
<div className="relative grid grid-cols-4 gap-px">
41+
{[
42+
'mainnet',
43+
'btc',
44+
'bsc',
45+
'solana-mainnet-beta',
46+
'avalanche',
47+
'stellar',
48+
'litecoin',
49+
'matic',
50+
'arbitrum-one',
51+
'sonic',
52+
'optimism',
53+
'sei-mainnet',
54+
'starknet-mainnet',
55+
'zksync-era',
56+
'celo',
57+
'metis',
58+
]
59+
.map((id) => supportedNetworks.find((network) => network.id === id))
60+
.filter((network): network is typeof network & {} => Boolean(network))
61+
.map((network) => (
62+
<div key={network.id} className="-mb-px -mr-px">
63+
<ButtonOrLink
64+
href={`/supported-networks/${network.id}`}
65+
className="flex items-center justify-center border-b border-r border-space-1600 px-8 py-5 transition hover:bg-space-1600"
66+
>
67+
<NetworkIcon
68+
network={network}
69+
size={6}
70+
variant={
71+
network.id === 'stellar' || network.id === 'sonic' || network.id === 'zksync-era'
72+
? 'mono'
73+
: 'branded'
74+
}
75+
/>
76+
</ButtonOrLink>
77+
</div>
78+
))}
79+
<ExperimentalLink
80+
href="/supported-networks"
81+
className="absolute bottom-0 right-0 flex h-[64px] w-[calc(100%-1px)] items-center justify-center text-14 backdrop-blur-md sm:w-[calc(50%-1px)]"
82+
>
83+
{t('index.supportedNetworks.seeAllNetworks', [
84+
supportedNetworks.filter((network) => network.networkType === NetworkType.Mainnet).length,
85+
])}
86+
</ExperimentalLink>
87+
</div>
88+
</div>
89+
</div>
4290
</div>
4391
</div>
4492
</div>

‎website/src/pages/ar/index.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"title": "Home",
33
"hero": {
44
"title": "The Graph Docs",
5-
"description": "Kick-start your web3 project with the tools to extract, transform, and load blockchain data.",
5+
"description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
66
"cta1": "How The Graph works",
77
"cta2": "Build your first subgraph"
88
},

‎website/src/pages/cs/index.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"title": "Domov",
33
"hero": {
44
"title": "The Graph Docs",
5-
"description": "Kick-start your web3 project with the tools to extract, transform, and load blockchain data.",
5+
"description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
66
"cta1": "How The Graph works",
77
"cta2": "Build your first subgraph"
88
},

‎website/src/pages/de/index.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"title": "Home",
33
"hero": {
44
"title": "The Graph Docs",
5-
"description": "Starten Sie Ihr Web3-Projekt mit den Tools zum Extrahieren, Transformieren und Laden von Blockchain-Daten.",
5+
"description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
66
"cta1": "Funktionsweise von The Graph",
77
"cta2": "Erstellen Sie Ihren ersten Subgraphen"
88
},

‎website/src/pages/en/index.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"title": "Home",
33
"hero": {
44
"title": "The Graph Docs",
5-
"description": "Kick-start your web3 project with the tools to extract, transform, and load blockchain data.",
5+
"description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
66
"cta1": "How The Graph works",
77
"cta2": "Build your first subgraph"
88
},
@@ -58,6 +58,7 @@
5858
"networks": "networks",
5959
"completeThisForm": "complete this form"
6060
},
61+
"seeAllNetworks": "See all {0} networks",
6162
"emptySearch": {
6263
"title": "No networks found",
6364
"description": "No networks match your search for \"{0}\"",

‎website/src/pages/es/index.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"title": "Inicio",
33
"hero": {
44
"title": "Documentación de The Graph",
5-
"description": "Inicia tu proyecto web3 con las herramientas para extraer, transformar y cargar datos de blockchain.",
5+
"description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
66
"cta1": "Cómo funciona The Graph",
77
"cta2": "Crea tu primer subgrafo"
88
},

‎website/src/pages/fr/index.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"title": "Accueil",
33
"hero": {
44
"title": "The Graph Docs",
5-
"description": "Kick-start your web3 project with the tools to extract, transform, and load blockchain data.",
5+
"description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
66
"cta1": "How The Graph works",
77
"cta2": "Construisez votre premier subgraph"
88
},

‎website/src/pages/hi/index.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"title": "Home",
33
"hero": {
44
"title": "The Graph डॉक्स",
5-
"description": "अपनी वेब3 परियोजना को शुरू करें उन उपकरणों के साथ जो ब्लॉकचेन डेटा को निकालने, बदलने और लोड करने में सहायता करते हैं।",
5+
"description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
66
"cta1": "The Graph कैसे काम करता है",
77
"cta2": "अपना पहला Subgraph बनाएं"
88
},

‎website/src/pages/it/index.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"title": "Home",
33
"hero": {
44
"title": "The Graph Docs",
5-
"description": "Kick-start your web3 project with the tools to extract, transform, and load blockchain data.",
5+
"description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
66
"cta1": "How The Graph works",
77
"cta2": "Build your first subgraph"
88
},

‎website/src/pages/ja/index.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"title": "Home",
33
"hero": {
44
"title": "The Graphのドキュメント",
5-
"description": "ブロックチェーンデータを抽出、変換、読み込み可能なツールを用いて、あなたのWeb3プロジェクトを開始しましょう。",
5+
"description": "The Graph is a blockchain data solution that powers applications, analytics, and AI on 90+ chains. The Graph's core products include the Token API for web3 apps, Subgraphs for indexing smart contracts, and Substreams for real-time and historical data streaming.",
66
"cta1": "The Graphの仕組み",
77
"cta2": "最初のサブグラフを作る"
88
},

0 commit comments

Comments
 (0)