Merge branch 'feature/run-a-node-page' into dev

src/datas/run-a-node/get-started.js

@@ -4,29 +4,29 @@ export const getStarted = {
 	items: [
 		{
 			id: 1,
-			title: "Run light node via CLI",
-			text: "Get your light node running with a few commands on your CLI.",
-			type: "anchor",
+			title: "Run light node via your command line",
+			text: "Startup your light node with the command line. This option is best if you’re familiar with using the command line.",
+			type: "external",
 			link: {
 				text:"Go now",
 				url: "https://docs.celestia.org/nodes/light-node/",
 			},
 		},
 		{
 			id: 2,
-			title: "Run light node via docker",
-			text: "Startup your light node in a virtual environment via the CLI.",
-			type: "anchor",
+			title: "Run light node in a virtual environment",
+			text: "Startup your light node through the command line in a virtual environment. Though this option still uses the command line, it can be completed in under 3 minutes and also works on Windows devices.",
+			type: "external",
 			link: {
 				text:"Start up",
 				url: "https://docs.celestia.org/nodes/docker-images/",
 			},
 		},
 		{
 			id: 3,
-			title: "Run light node via mac app",
-			text: "Boot up your light node via an app (only compatible with m1 and m2 macs).",
-			type: "anchor",
+			title: "Run light node through an application",
+			text: "Boot up your light node through a user-friendly application. This is the easiest option, but it only works for m1 and m2 macs.",
+			type: "external",
 			link: {
 				text:"Learn more",
 				url: "https://www.quasarapp.xyz/",

src/datas/run-a-node/hero-data.js

@@ -1,18 +1,18 @@
 export const heroData = {
-	title: "Run a Node",
-	text: "Enter an internet where users are first-class citizens. Own your assets while securing Celestia.",
+	title: "Run a light node",
+	text: "Join the collective powering an open internet. Run a light node on Celestia to secure your assets and become sovereign.",
 	buttons: [
 		{
-			text: "Become sovereign",
+			text: "Show me how to start",
 			class: "simple",
 			type: "anchor",
 			url: "start-up-a-node",
 		},
 		{
 			text: "Ask a question",
 			class: "white",
-			type: "external",
-			url: "https://discord.com/invite/YsnTPcSfWQ",
-		},
+			type: "anchor",
+			url: "https://www.google.com/",
+		}
 	],
 };

src/pages/run-a-node.js → src/pages/run-a-light-node.js

@@ -28,20 +28,20 @@ const DevPortal = () => {
 								<div className={"col-auto"}>
 									<div className={"subtitle"} dangerouslySetInnerHTML={{ __html: heroData.text }} />
 									<AnchorLink
-										to={`/run-a-node#${heroData.buttons[0].url}`}
+										to={`/run-a-light-node#${heroData.buttons[0].url}`}
 										className={"button button-" + heroData.buttons[0].class}
 										stripHash
 									>
 										{heroData.buttons[0].text}
 									</AnchorLink>
-									<a
+									{/* <a
 										href={`${heroData.buttons[1].url}`}
 										className={"button button-" + heroData.buttons[1].class}
 										target={"_blank"}
 										rel={"noreferrer"}
 									>
 										{heroData.buttons[1].text}
-									</a>
+									</a> */}
 								</div>
 							</div>
 						</div>
@@ -60,16 +60,14 @@ const DevPortal = () => {
 									<p>
 										A node is a piece of software that runs on a device like a computer or a phone.
 										Generally, a node verifies that a blockchain works correctly and follows the rules.
-										“Verifying” a blockchain can involve tasks like checking transactions are correct
-										and providing account balances to other nodes.
+										“Verifying” a blockchain can involve tasks like checking transactions are correct.
 									</p>
-									<h2 className='title'>And what about Celestia light nodes?</h2>
+									<h2 className='title'>What is a Celestia light node?</h2>
 									<p>
 										Light nodes sound like you might expect. They are nodes that can run on cheaper
 										hardware and slower internet connections than other node types. The lower
 										requirements make it more accessible for anyone to run a node that verifies the
-										chain. What makes Celestia light nodes unique is that they keep a higher level of
-										security than most other types of light nodes.
+										chain.
 									</p>
 								</div>
 							</div>
@@ -82,8 +80,8 @@ const DevPortal = () => {
 								<div className={"text-box col-12 col-lg-6"}>
 									<h2 className='with-decor'>Start up a light node</h2>
 									<p className='description'>
-										Light nodes are the most accessible Celestia node that can run on many devices.
-										Pick an option that suits your difficulty and get your Celestia light node up and running.
+										There are many ways to run a Celestia light node. Pick an option that fits you best
+										to get your light node up and running.
 									</p>
 								</div>
 								<div className={"image-box--startup col-12 col-lg-6"}>

src/scss/pages/page-run-a-node.scss

@@ -35,6 +35,10 @@
 		}
 	}
 
+	h1.main {
+		max-width: 650px;
+	}
+
 	&:before {
 		background: url(../images/run-a-node/run-a-node-1.png) no-repeat scroll top right transparent;
 		background-size: contain;
@@ -178,6 +182,9 @@
 		.image-box--startup {
 			@include media-breakpoint-down(md) {
 				padding: 16px 20px;
+				max-width: 85%;
+				margin-left: auto;
+				margin-right: auto;
 			}
 		}
 
@@ -208,6 +215,9 @@
 		.image-box--node{
 			@include media-breakpoint-down(md) {
 				padding: 32px 20px;
+				max-width: 85%;
+				margin-left: auto;
+				margin-right: auto;
 			}
 		}
 
@@ -239,15 +249,6 @@
 			font-weight: 700;
 			line-height: 26px;
 		}
-
-		.icon-card {
-			padding: 40px;
-			.link {
-				svg {
-					transform: rotate(230deg);
-				}
-			}
-		}
 	}
 
 	.resources {