Merge branch 'feature/ecosystem-meta-image-update' into dev

src/components/header.js

@@ -73,11 +73,11 @@ const navigation = [
         url: "",
         submenus: [
             {
-                text: "Build on testnet",
-                subtext: "Testnet",
-                url: "https://docs.celestia.org/",
+                text: "Start with the dev portal",
+                subtext: "Developer portal",
+                url: "/developer-portal/",
                 icon: "menu/devnet.svg",
-                type: 'external'
+                type: 'internal'
             },
             {
                 text: "Read our docs",

src/components/modules/icon-card.js

@@ -0,0 +1,101 @@
+import React from "react";
+import Image from "../imageComponent";
+import { Link } from "gatsby";
+import { AnchorLink } from "gatsby-plugin-anchor-links";
+
+export default function IconCard({ imageClass, content, variant, iconPosition = "top", className }) {
+	if (content.type === "internal") {
+		return (
+			<div className={className}>
+				<div className={`icon-card ${variant}`}>
+					{content.image && (
+						<div className={`logo-container ${iconPosition} ${imageClass}`}>
+							<Image alt={content.title} filename={content.image} />
+						</div>
+					)}
+					<div className='text-box'>
+						<div className={"title"}>{content.title}</div>
+						{content.text && <div className={"text"}>{content.text}</div>}
+						<div className='link-wrapper'>
+							<Link className='link' to={`${content.link.url}`}>
+								{content.link.text}
+								<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'>
+									<path stroke='#7B2BF9' stroke-linecap='square' stroke-width='1.5' d='M3.61218 12.0721L11.0761 4.60823' />
+									<path
+										stroke='#7B2BF9'
+										stroke-linecap='square'
+										stroke-linejoin='bevel'
+										stroke-width='1.5'
+										d='M11.5254 11.0752V4.00413H4.45432'
+									/>
+								</svg>
+							</Link>
+						</div>
+					</div>
+				</div>
+			</div>
+		);
+	} else if (content.type === "external" || content.type === undefined) {
+		return (
+			<div className={className}>
+				<div className={`icon-card ${variant}`}>
+					{content.image && (
+						<div className={`logo-container ${iconPosition} ${imageClass}`}>
+							<Image alt={content.title} filename={content.image} />
+						</div>
+					)}
+					<div className='text-box'>
+						<div className={"title"}>{content.title}</div>
+						{content.text && <div className={"text"}>{content.text}</div>}
+						<div className='link-wrapper'>
+							<a className='link' href={content.link.url} target={"_blank"} rel={"noreferrer"} aria-label={content.text}>
+								{content.link.text}
+								<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'>
+									<path stroke='#7B2BF9' stroke-linecap='square' stroke-width='1.5' d='M3.61218 12.0721L11.0761 4.60823' />
+									<path
+										stroke='#7B2BF9'
+										stroke-linecap='square'
+										stroke-linejoin='bevel'
+										stroke-width='1.5'
+										d='M11.5254 11.0752V4.00413H4.45432'
+									/>
+								</svg>
+							</a>
+						</div>
+					</div>
+				</div>
+			</div>
+		);
+	} else if (content.type === "anchor") {
+		return (
+			<div className={className}>
+				<div className={`icon-card ${variant}`}>
+					{content.image && (
+						<div className={`logo-container ${iconPosition} ${imageClass}`}>
+							<Image alt={content.title} filename={content.image} />
+						</div>
+					)}
+					<div className='text-box'>
+						<div className={"title"}>{content.title}</div>
+						{content.text && <div className={"text"}>{content.text}</div>}
+						<div className='link-wrapper'>
+							<AnchorLink className='link' to={`/developer-portal#${content.anchorToId ? content.anchorToId : content.title.replace(/\s+/g, "-").toLowerCase()}`}>
+								{content.link.text}
+								<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'>
+									<path stroke='#7B2BF9' stroke-linecap='square' stroke-width='1.5' d='M6.89106 1.34961L6.89106 11.9052' />
+									<path
+										stroke='#7B2BF9'
+										stroke-linecap='square'
+										stroke-linejoin='bevel'
+										stroke-width='1.5'
+										d='M2 7.64941L7 12.6494L12 7.64942'
+									/>
+								</svg>
+							</AnchorLink>
+						</div>
+					</div>
+				</div>
+			</div>
+		);
+	}
+}

src/datas/developer-portal/community.js

@@ -0,0 +1,29 @@
+export const community = {
+	title: "The community",
+	description: "Join Celestia’s community of developers",
+	items: [
+		{
+			id: 1,
+			title: "Discord",
+			text: "Have technical questions? Ask the developer community on Discord.",
+			image: "developer-portal/discord.png",
+			type: "external",
+			link: {
+				text:"Join Discord",
+				url: "https://discord.com/invite/YsnTPcSfWQ",
+			},
+		},
+		{
+			id: 2,
+			title: "Modular Meetup",
+			text: "Host your own grassroots meetup about modular blockchains.",
+			image: "developer-portal/forum.png",
+			type: "external",
+			link: {
+				text:"Host now",
+				url: "https://docs.celestia.org/community/modular-meetup-intro/",
+			},
+		},
+
+	],
+};

src/datas/developer-portal/concepts.js

@@ -0,0 +1,50 @@
+export const concepts = {
+	title: "Concepts",
+	description: "Foundational concepts and features of Celestia.",
+	items: [
+		{
+			id: 1,
+			title: "Why build modular?",
+			text: "",
+			image: "developer-portal/lightbulb.png",
+			type: "external",
+			link: {
+				text:"Explore concepts",
+				url: "https://docs.celestia.org/developers/build-modular/",
+			},
+		},
+		{
+			id: 2,
+			title: "Run a node",
+			text: "",
+			image: "developer-portal/availability.png",
+			type: "external",
+			link: {
+				text:"Start now",
+				url: "https://docs.celestia.org/nodes/overview/",
+			},
+		},
+		{
+			id: 3,
+			title: "Learn modular",
+			text: "",
+			image: "developer-portal/why-build-mod.png",
+			type: "internal",
+			link: {
+				text:"Learn more",
+				url: "/learn/",
+			},
+		}, 
+		{
+			id: 4,
+			title: "Data availability FAQ",
+			text: "",
+			image: "developer-portal/modular.png",
+			type: "external",
+			link: {
+				text:"Read more",
+				url: "https://docs.celestia.org/concepts/data-availability-faq/",
+			},
+		},
+	],
+};

src/datas/developer-portal/connect.js

@@ -0,0 +1,17 @@
+export const connect = {
+	title: "Connect",
+	description: "Integrate your blockchain with Celestia.",
+	items: [
+		{
+			id: 1,
+			title: "Node API documentation",
+			text: "Documentation for publishing and retrieving data from Celestia.",
+			image: "developer-portal/api-doc.png",
+			type: "external",
+			link: {
+				text:"API Documentation",
+				url: "https://docs.celestia.org/category/node-api/",
+			},
+		},
+	],
+};

src/datas/developer-portal/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/developer-portal/discover.js

@@ -0,0 +1,39 @@
+export const discover = {
+	title: "Discover",
+	description: "Explore documentation for execution environments that are integrated with existing rollup frameworks.",
+	items: [
+		{
+			id: 1,
+			title: "EVM",
+			text: "The Ethereum virtual machine.",
+			image: "",
+			type: "external",
+			link: {
+				text:"See more",
+				url: "https://ethereum.org/en/developers/docs/evm/",
+			},
+		},
+		{
+			id: 2,
+			title: "Cosmos SDK",
+			text: "A framework for blockchain applications.",
+			image: "",
+			type: "external",
+			link: {
+				text:"Visit",
+				url: "https://docs.cosmos.network/main",
+			},
+		},
+		{
+			id: 3,
+			title: "CosmWasm",
+			text: "A Wasm smart contract module for the Cosmos SDK.",
+			image: "",
+			type: "external",
+			link: {
+				text:"Learn",
+				url: "https://docs.cosmwasm.com/docs/",
+			},
+		},
+	],
+};

src/datas/developer-portal/faq.js

@@ -0,0 +1,21 @@
+export const faqs = {
+	title: 'FAQ',
+	description: 'New to Celestia? Get answers to the most common developer questions.',
+	items: [
+		{
+			id: 1,
+			question: 'Where should I start?',
+			text: 'If you’re new to Celestia, you can start with some <a href="https://docs.celestia.org/developers/rollkit/#tutorials" target="_blank" rel="noopener noreferrer" style="color:#7B2BF9;">beginner tutorials</a> to get a feel for Celestia’s architecture. If you feel confident, you can tackle more advanced tutorials, like <a href="https://rollkit.dev/docs/tutorials/ethermint/" target="_blank" rel="noopener noreferrer" style="color:#7B2BF9;">deploying an EVM rollup</a>, building a <a href="https://docs.celestia.org/developers/full-stack-modular-development-guide/" target="_blank" rel="noopener noreferrer" style="color:#7B2BF9;">full stack application</a>, or <a href="https://docs.celestia.org/developers/integrate-celestia/" target="_blank" rel="noopener noreferrer" style="color:#7B2BF9;">integrating a custom blockchain</a>.',
+		},
+		{
+			id: 2,
+			question: 'What languages do I need to know to build on Celestia?',
+			text: 'Celestia is flexible in supporting any virtual machine. Developers can build using programming languages supported by VMs and smart contract frameworks that are integrated with Celestia. Currently supported languages include Solidity (EVM), Rust (CosmWasm), and Go (Cosmos SDK).',
+		},
+		{
+			id: 3,
+			question: 'What is Celestia?',
+			text: 'Celestia is a modular consensus and data network, built to enable anyone to easily deploy their own blockchain with minimal overhead. Head to the <a href="https://celestia.org/what-is-celestia/" target="_blank" rel="noopener noreferrer" style="color:#7B2BF9;">What is Celestia?</a> page for an overview.',
+		},
+	],
+};

src/datas/developer-portal/frameworks.js

@@ -0,0 +1,61 @@
+export const frameworks = {
+	title: "Frameworks",
+	description: "Explore frameworks to start building on Celestia.",
+	items: [
+        {
+			id: 1,
+			title: "Caldera",
+			text: "Caldera makes it easy to launch performant, customizable blockchain rollups using the OP Stack.",
+			image: "developer-portal/caldera.png",
+			type: "external",
+			link: {
+				text:"Explore Caldera",
+				url: "https://docs.celestia.org/developers/taro-testnet/",
+			},
+		},
+        {
+			id: 2,
+			title: "Dymension",
+			text: "Dymension is a network of easily deployable and lightning fast modular blockchains called RollApps.",
+			image: "developer-portal/dymension.png",
+			type: "external",
+			link: {
+				text:"Explore Dymension",
+				url: "https://docs.dymension.xyz/",
+			},
+		},
+        {
+			id: 3,
+			title: "OP Stack",
+			text: "The OP Stack is a modular, open-source blueprint for highly scalable, highly interoperable blockchains of all kinds.",
+			image: "developer-portal/opstack.png",
+			type: "external",
+			link: {
+				text:"Explore OP Stack",
+				url: "https://docs.celestia.org/category/optimism/",
+			},
+		},
+		{
+			id: 4,
+			title: "Rollkit",
+			text: "Rollkit is a rollup framework that gives developers the freedom to deploy rollups throughout the modular stack.",
+			image: "developer-portal/rollkit.png",
+			type: "external",
+			link: {
+				text:"Explore Rollkit",
+				url: "https://rollkit.dev/",
+			},
+		},
+		{
+			id: 5,
+			title: "Sovereign SDK",
+			text: "A framework for building seamlessly scalable and interoperable rollups that can run on any blockchain.",
+			image: "developer-portal/sovereign.png",
+			type: "external",
+			link: {
+				text:"Explore Sovereign SDK",
+				url: "https://github.com/Sovereign-Labs/sovereign-sdk/tree/main/examples/demo-rollup",
+			},
+		},
+	],
+};