Merge branch 'feature/tia-page' into dev

src/datas/what-is-tia/hero-data.js

@@ -4,13 +4,13 @@ export const heroData = {
 	text: "Learn about TIA, the native token of the Celestia blockchain.",
 	buttons: [
 		{
-			text: "Develop",
+			text: "Pay for Data (Developer)",
 			class: "simple",
 			type: "anchor",
 			url: "managing-tia-as-a-rollup",
 		},
 		{
-			text: "Stake and custody TIA",
+			text: "Custody & Stake TIA",
 			class: "white",
 			type: "anchor",
 			url: "staking-and-custody",

src/datas/what-is-tia/role.js

@@ -3,7 +3,7 @@ export const role = {
 	items: [
 		{
 			id: 1,
-			title: "Pay transaction fees",
+			title: "Pay for data",
 			text: "Data published by rollups and token transfers on Celestia pay fees using TIA.",
 			image: "what-is-tia/what-is-tia-role-1.png",
 			type: "external",
@@ -18,7 +18,7 @@ export const role = {
 		{
 			id: 3,
 			title: "Gas token for rollups",
-			text: "Rollups can opt to use TIA as their gas token.",
+			text: "Developers can use TIA as a gas token for their rollups.",
 			image: "what-is-tia/what-is-tia-role-3.png",
 			type: "external",
 		},

src/datas/what-is-tia/seoContent.js

@@ -1,5 +1,5 @@
 export const seoContent = {
-	title: "Run a Node | celestia.org",
-	description: "Build games with new capabilities. Celestia scales with the number of users so games can scale with their usebase.",
+	title: "What is TIA? | celestia.org",
+	description: "Learn about TIA, the native token of the Celestia blockchain.",
     image: "",
-};
+};

src/datas/what-is-tia/wallets.js

@@ -5,37 +5,37 @@ export const wallets = {
 		{
 			id: 1,
 			title: "Keplr Wallet",
-            device: ["Mobile", "Desktop", "Staking"],
+            		device: ["IOS", "Android", "Desktop"],
 			image: "what-is-tia/kepler-icon.jpg",
-            backdropClass: "opacity-50",
-            url: "https://www.keplr.app/",
+            		backdropClass: "opacity-50",
+           		url: "https://www.keplr.app/",
 			type: "external",
 		},
 		{
 			id: 2,
 			title: "Cosmostation",
-            device: ["Mobile", "Desktop", "Staking"],
+            		device: ["IOS", "Android", "Desktop"],
 			image: "what-is-tia/cosmostation-icon.jpg",
-            backdropClass: "opacity-100",
-            url: "https://cosmostation.io/products/cosmostation_extension",
+            		backdropClass: "opacity-100",
+            		url: "https://cosmostation.io/products/cosmostation_extension",
 			type: "external",
 		},
 		{
 			id: 3,
 			title: "Leap",
-			device: ["Mobile", "Desktop", "Staking"],
+			device: ["IOS", "Android", "Desktop"],
 			image: "what-is-tia/leap-icon.jpg",
-            backdropClass: "opacity-100",
-            url: "https://www.leapwallet.io/",
+            		backdropClass: "opacity-100",
+            		url: "https://www.leapwallet.io/",
 			type: "external",
 		},
 		{
 			id: 4,
 			title: "Ledger",
-			device: ["Mobile", "Desktop", "Staking"],
+			device: ["IOS", "Android", "Desktop"],
 			image: "what-is-tia/ledger-icon.jpg",
-            backdropClass: "opacity-50",
-            url: "https://www.ledger.com/",
+            		backdropClass: "opacity-50",
+            		url: "https://www.ledger.com/",
 			type: "external",
 		},
 	],

src/pages/what-is-tia.js

@@ -77,11 +77,11 @@ const WhatIsTIA = () => {
 										<h2 className='title'>You own your TIA</h2>
 										<div className='custody-text-box'>
 											<p>
-												Anyone can download a non-custodial wallet to freely transact and control their TIA. No banks or
-												intermediaries are trusted to do this for you.
+												Anyone can download a non-custodial wallet to freely transact and control their TIA.
+												No banks or intermediaries necessary.
 											</p>
 											<p>
-												This does mean it’s important to{" "}
+												It’s important to{" "}
 												<a href='https://www.coinbase.com/security/security-tips' target='_blank'>
 													get familiar with basic wallet practices↗
 												</a>{" "}
@@ -103,16 +103,15 @@ const WhatIsTIA = () => {
 									</div>
 								</div>
 								<div className={"text-box col-12 col-lg-6"}>
-									<h2 className='title'>Staking</h2>
+									<h2 className='title'>Stake TIA</h2>
 									<div className='custody-text-box'>
 										<p>
 											Nodes on Celestia lock up (stake) TIA to become a validator that participates in consensus. Any node can
 											enter the validator set if they have enough tokens to join the top 75 by stake.
 										</p>
 										<p>
-											Users that don’t reach the top 75 or don’t want to run a validator can delegate their TIA to an existing
-											validator that will stake it on their behalf. TIA delegations can always be retrieved from validators
-											after undergoing a 3-week unbonding period.
+											Users can stake TIA by delegating to a validator in the active set and receive a share of
+											Celestia’s staking rewards. Delegations can always be retrieved after a 3-week unbonding period.
 
 											<div className="link-list">
 												<div className='link-wrapper me-4'>
@@ -167,7 +166,7 @@ const WhatIsTIA = () => {
 						<div className={"container"}>
 							<h2 className='wallets-title'>{wallets.title}</h2>
 							<p>{wallets.details}</p>
-							<div className={"three-col-grid pt-4 pt-lg-5"}>
+							<div className={"two-col-flex pt-4 pt-lg-5"}>
 								{wallets.items.map(function (item) {
 									return (
 										<div className='wallet-card-wrapper'>

src/scss/pages/page-what-is-tia.scss

@@ -357,9 +357,6 @@
 				flex-basis: 50%;
 				padding-right: 20px;
 			}
-			@include media-breakpoint-up(xxl) {
-				flex-basis: 33.33%;
-			}
 
 			.wallet-card {
 				position: relative;
@@ -474,7 +471,7 @@
 				}
 			}
 		}
-		.three-col-grid {
+		.two-col-flex {
 			display: flex;
 			flex-wrap: wrap;
 		}