added run a node page

src/datas/run-a-node/content.js

@@ -0,0 +1,21 @@
+export const FooterBoxes = [
+    {
+        title: 'Join our growing ecosystem',
+        text: 'View job openings and career opportunities in the Celestia ecosystem.',
+        button: {
+            text: 'Current openings',
+            href: 'https://celestia.pallet.com/jobs',
+            id: 'operator',
+            type: 'simple'
+        }
+    },{
+        title: 'Build on our developer beta',
+        text: 'Join a growing modular ecosystem of developers building on testnet.',
+        button: {
+            text: 'Get started',
+            href: 'https://docs.celestia.org/',
+            id: 'operator',
+            type: 'simple'
+        }
+    }
+]

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

@@ -0,0 +1,33 @@
+export const getStarted = {
+	title: "",
+	description: "",
+	items: [
+		{
+			id: 1,
+			title: "Run a node directly on your computer via the CLI",
+			text: "(in general use) a complex network or interconnected system. add 3 line description max.I",
+			type: "anchor",
+			link: {
+				text:"Learn more",
+			},
+		},
+		{
+			id: 2,
+			title: "Run a node on docker via the CLI",
+			text: "(in general use) a complex network or interconnected system. add 3 line description max.",
+			type: "anchor",
+			link: {
+				text:"Learn more",
+			},
+		},
+		{
+			id: 3,
+			title: "Run a node on docker via the CLI",
+			text: "(in general use) a complex network or interconnected system. add 3 line description max.",
+			type: "anchor",
+			link: {
+				text:"Learn more",
+			},
+		},
+	],
+};

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

@@ -0,0 +1,18 @@
+export const heroData = {
+	title: "Run a Node",
+	text: "Build games with new capabilities. Celestia scales with the number of users so games can scale with their usebase.",
+	buttons: [
+		{
+			text: "Build Modular",
+			class: "simple",
+			type: "anchor",
+			url: "frameworks",
+		},
+		{
+			text: "Ask a question",
+			class: "white",
+			type: "external",
+			url: "https://forum.celestia.org/",
+		},
+	],
+};

src/datas/run-a-node/resources.js

@@ -0,0 +1,39 @@
+export const resources = {
+	title: "Resources",
+	description: "Tutorials, resources, and guides for staking.",
+	items: [
+		{
+			id: 1,
+			title: "Light node tutorial on YouTube",
+			text: "",
+			image: "developer-portal/lightbulb.png",
+			type: "external",
+			link: {
+				text:"Explore concepts",
+				url: "https://docs.celestia.org/developers/build-modular/",
+			},
+		},
+		{
+			id: 2,
+			title: "Values of modular chains",
+			text: "",
+			image: "developer-portal/availability.png",
+			type: "external",
+			link: {
+				text:"Explore concepts",
+				url: "https://docs.celestia.org/nodes/overview/",
+			},
+		},
+		{
+			id: 3,
+			title: "Light node requirement",
+			text: "",
+			image: "developer-portal/why-build-mod.png",
+			type: "internal",
+			link: {
+				text:"Explore concepts",
+				url: "/learn/",
+			},
+		},
+	],
+};

src/datas/run-a-node/seoContent.js

@@ -0,0 +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.",
+    image: "",
+};

src/pages/run-a-node.js

@@ -0,0 +1,146 @@
+import * as React from "react";
+
+import { heroData } from "../datas/run-a-node/hero-data";
+import { getStarted } from "../datas/run-a-node/get-started";
+import { resources } from "../datas/run-a-node/resources";
+import { FooterBoxes } from "../datas/run-a-node/content";
+
+import Layout from "../components/layout";
+import IconCard from "../components/modules/icon-card";
+import { AnchorLink } from "gatsby-plugin-anchor-links";
+
+import { seoContent } from "../datas/developer-portal/seoContent";
+import SEO from "../components/seo";
+
+import image1 from "../images/run-a-node/placeholder.png";
+
+const DevPortal = () => {
+	return (
+		<Layout footerBoxes={FooterBoxes}>
+			<SEO title={seoContent.title} description={seoContent.description} image={seoContent.image} />
+			<div className={"run-a-node"}>
+				<main>
+					<section className='hero'>
+						<div className={"container"}>
+							<h1 className={"main mb-3 mb-md-4"}>{heroData.title}</h1>
+							<div className={"row"}>
+								<div className={"col-auto"}>
+									<div className={"subtitle"} dangerouslySetInnerHTML={{ __html: heroData.text }} />
+									<AnchorLink
+										to={`/developer-portal#${heroData.buttons[0].url}`}
+										className={"button button-" + heroData.buttons[0].class}
+										stripHash
+									>
+										{heroData.buttons[0].text}
+									</AnchorLink>
+									<a
+										href={`${heroData.buttons[1].url}`}
+										className={"button button-" + heroData.buttons[1].class}
+										target={"_blank"}
+										rel={"noreferrer"}
+									>
+										{heroData.buttons[1].text}
+									</a>
+								</div>
+							</div>
+						</div>
+					</section>
+
+					<section className={"what-is-a-node"}>
+						<div className={"container"}>
+							<div className={"row justify-content-between align-items-center"}>
+								<div className={"image-box--analogy col-12 col-lg-6"}>
+									<div className='image-wrapper'>
+										<img className='img' style={{ width: `100%`, maxWidth: `500px` }} src={image1} alt={""} />
+									</div>
+								</div>
+								<div className={"text-box col-12 col-lg-6"}>
+									<h2 className='title'>What is a node</h2>
+									<p>
+										Think of Celestia as a power grid, except instead of providing electricity, Celestia provides the essential
+										resource to power a blockchain: consensus and data availability. Similar to how anyone can plug into an
+										electricity grid to power their appliance, anyone can plug into Celestia’s network to power their own
+										blockchain.
+									</p>
+									<h2 className='title'>What does it mean to ‘run’ a node</h2>
+									<p>
+										Think of Celestia as a power grid, except instead of providing electricity, Celestia provides the essential
+										resource to power a blockchain: consensus and data availability. Similar to how anyone can plug into an
+										electricity grid to power their appliance, anyone can plug into Celestia’s network to power their own
+										blockchain.
+									</p>
+								</div>
+							</div>
+						</div>
+					</section>
+
+					<section className={"start-up"}>
+						<div className={"container"}>
+							<div className={"row justify-content-between align-items-center"}>
+								<div className={"text-box col-12 col-lg-6"}>
+									<h2 className='with-decor'>Start up a light node</h2>
+									<p className='description'>
+										Celestia gives developers the freedom to define their own sovereign chain, tailored for their
+										application,Celestia gives developers the freedom to define their own sovereign chain, tailored for their
+										applicationCelestia gives developers the freedom to define their own sovereign chain, tailored for their
+										application
+									</p>
+								</div>
+								<div className={"image-box--modular col-12 col-lg-6"}>
+									<div className='image-wrapper'>
+										<img src={image1} alt={""} />
+									</div>
+								</div>
+							</div>
+						</div>
+					</section>
+
+					<section className='get-started'>
+						<div className={"container"}>
+							{getStarted.description && <div className={"description"}>{getStarted.description}</div>}
+							<div className={"row gx-3 gy-3 pt-4 pb-3"}>
+								{getStarted.items.map(function (item) {
+									return (
+										<IconCard
+											className='icon-card-wrapper col-12 col-md min-width-33'
+											key={item.id}
+											content={item}
+											variant={"anchor no-image"}
+										/>
+									);
+								})}
+							</div>
+						</div>
+					</section>
+
+					<section className='resources' id={`${getStarted.items[2].title.replace(/\s+/g, "-").toLowerCase()}`}>
+						<div className={"container"}>
+							<div className={"row flex-wrap align-items-center justify-content-between my-2 pt-2 pt-lg-5 pb-3"}>
+								<div className='col-12 col-xl-4 mb-5 mb-md-0'>
+									<h2 className={"with-decor"}>{resources.title}</h2>
+									{resources.description && <div className={"description"}>{resources.description}</div>}
+								</div>
+								<div className='col-12 col-xl-8'>
+									<div className='gx-3 gy-5 row'>
+										{resources.items.map(function (item) {
+											return (
+												<IconCard
+													className='icon-card-wrapper col-12 col-md-4'
+													key={item.id}
+													content={item}
+													variant={"vertical"}
+												/>
+											);
+										})}
+									</div>
+								</div>
+							</div>
+						</div>
+					</section>
+				</main>
+			</div>
+		</Layout>
+	);
+};
+
+export default DevPortal;

src/scss/main.scss

@@ -38,6 +38,7 @@
 @import "pages/page-developer-portal.scss";
 @import "pages/page-press.scss";
 @import "pages/page-community.scss";
+@import "pages/page-run-a-node.scss";
 
 @import "components/team.scss";
 @import "components/technology.scss";