Merge pull request #300 from celestiaorg/feature/wic-update

Feature/wic update
celestiaorg · Dec 4, 2023 · 8777f90 · 8777f90
2 parents c7befc4 + 1ebf15b
commit 8777f90
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 42 deletions.
diff --git a/src/datas/what-is-celestia/toc.js b/src/datas/what-is-celestia/toc.js
@@ -1,23 +1,33 @@
 export const tableOfContent = [
 	{
 		depth: 1,
-		id: "what-is-a-modular-blockchain",
-		value: "What is a modular blockchain?",
+		id: "tell-me-about-celestia",
+		value: "Tell me about Celestia",
 	},
 	{
 		depth: 1,
 		id: "what-is-data-availability",
 		value: "What is data availability?",
 	},
+	{
+		depth: 1,
+		id: "what-is-data-availability-sampling",
+		value: "What is data availability sampling?",
+	},
 	{
 		depth: 1,
 		id: "what-are-rollups",
 		value: "What are rollups?",
 	},
 	{
 		depth: 1,
-		id: "whats-it-like-to-build-on-Celestia",
-		value: "What's it like to build on Celestia?",
+		id: "what-i-a-modular-blockchain",
+		value: "What is a modular blockchain?",
+	},
+	{
+		depth: 1,
+		id: "why-celestia",
+		value: "Why Celestia?",
 	},
 	{
 		depth: 1,

diff --git a/src/images/what-is-celestia/celestia-data-availability-sampling.png b/src/images/what-is-celestia/celestia-data-availability-sampling.png
diff --git a/src/images/what-is-celestia/celestia-tell-me-about-celestia.png b/src/images/what-is-celestia/celestia-tell-me-about-celestia.png
diff --git a/src/pages/what-is-celestia.js b/src/pages/what-is-celestia.js
@@ -8,7 +8,9 @@ import { AnchorLink } from "gatsby-plugin-anchor-links";
 import { seoContent } from "../datas/what-is-celestia/seoContent";
 import Seo from "../components/seo";
 
+import celestia_tell_me_about_celestia from "../images/what-is-celestia/celestia-tell-me-about-celestia.png";
 import celestia_what_are_rollups from "../images/what-is-celestia/celestia-what-are-rollups.png";
+import data_availability_sampling from "../images/what-is-celestia/celestia-data-availability-sampling.png";
 import celestia_data_availability from "../images/what-is-celestia/celestia-data-availability.png";
 import celestia_what_is_modular from "../images/what-is-celestia/celestia-what-is-modular.png";
 import celestia_modularizm from "../images/what-is-celestia/celestia-modularizm.png";
@@ -93,24 +95,40 @@ const WhatIsCelestia = () => {
 								</div>
 							</div>
 							<div className='col-lg-9 ps-lg-4 p-xl-5'>
-								<section className={"what-is-a-modular-blockchain"} id={`${tableOfContent[0].id.replace(/\s+/g, "-").toLowerCase()}`}>
-									<h2 className='title'>And what is a modular blockchain?</h2>
-									<div className={"image-box--different"}>
-										<div className='image-wrapper'>
-											<img className='img' style={{ width: `100%` }} src={celestia_what_is_modular} alt={""} />
+								<section className={"tell-me-about-celestia"} id={`${tableOfContent[0].id.replace(/\s+/g, "-").toLowerCase()}`}>
+									<div className={"row justify-content-between align-items-center"}>
+										<div className={"col-12 col-lg-6 mb-2 mb-lg-0"}>
+											<h2 className='title'>Tell me about Celestia</h2>
+											<p>
+												Celestia is a modular data availability (DA) network that securely scales with the number of users,
+												making it easy for anyone to launch their own blockchain.
+											</p>
+											<p>
+												Rollups and L2s use Celestia as a network for publishing and making transaction data available for
+												anyone to download. For them, Celestia provides high-throughput DA that can be verified easily with a
+												light node.
+											</p>
+											<p>
+												And by making the blockchain stack modular, anyone can launch their own blockchain without needing a
+												validator set.
+											</p>
+										</div>
+										<div className={"order-lg-1 image-box--different col-12 col-lg-6"}>
+											<div className='image-wrapper'>
+												<img className='img' style={{ width: `100%` }} src={celestia_tell_me_about_celestia} alt={""} />
+											</div>
 										</div>
 									</div>
-									<p>
-										Modular blockchains are a new paradigm in blockchain design. Instead of one blockchain doing everything,
-										modular blockchains specialize and optimize to perform a given function. This specialization provides
-										breakthroughs in scalability, flexibility, and interoperability, enabling developers to build blockchain
-										applications for mass adoption.
-									</p>
 								</section>
 
 								<section className={"what-is-data-availability"} id={`${tableOfContent[1].id.replace(/\s+/g, "-").toLowerCase()}`}>
 									<div className={"row justify-content-between align-items-center"}>
-										<div className={"col-12 col-lg-6"}>
+										<div className={"image-box--analogy order-2 order-lg-1 col-12 col-lg-6"}>
+											<div className='image-wrapper'>
+												<img className='img' style={{ width: `100%` }} src={celestia_data_availability} alt={""} />
+											</div>
+										</div>
+										<div className={"col-12 order-1 order-lg-2 col-lg-6 mb-3 mb-lg-0"}>
 											<h2 className='title'>What is data availability and why does it matter?</h2>
 											<p>
 												Data availability answers the question, has the data for this blockchain been published? It is
@@ -124,22 +142,30 @@ const WhatIsCelestia = () => {
 												verify very large blocks using a technology called data availability sampling.
 											</p>
 										</div>
-										<div className={"image-box--analogy col-12 col-lg-6"}>
-											<div className='image-wrapper'>
-												<img className='img' style={{ width: `100%` }} src={celestia_data_availability} alt={""} />
-											</div>
+									</div>
+								</section>
+
+								<section className={"data-availability-sampling"} id={`${tableOfContent[2].id.replace(/\s+/g, "-").toLowerCase()}`}>
+									<h2 className='title'>Now what's data availability sampling?</h2>
+									<div className={"image-box--different"}>
+										<div className='image-wrapper'>
+											<img className='img' style={{ width: `100%` }} src={data_availability_sampling} alt={""} />
 										</div>
 									</div>
+									<p>
+										Data availability sampling (DAS) is the new primitive that enables Celestia light nodes to verify DA
+										efficiently. Instead of downloading all data, light nodes only download a tiny portion of each block.
+									</p>
+									<p>
+										Importantly, DAS allows Celestia to scale with the number of users (light nodes). So, as the light node
+										network grows over time, Celestia can scale to the data throughput needed for millions of rollups without
+										compromising on security for end users.
+									</p>
 								</section>
 
-								<section className={"what-are-rollups"} id={`${tableOfContent[2].id.replace(/\s+/g, "-").toLowerCase()}`}>
+								<section className={"what-are-rollups"} id={`${tableOfContent[3].id.replace(/\s+/g, "-").toLowerCase()}`}>
 									<div className={"row justify-content-between align-items-center"}>
-										<div className={"order-2 order-lg-1 image-box--different col-12 col-lg-6"}>
-											<div className='image-wrapper'>
-												<img className='img' style={{ width: `100%` }} src={celestia_what_are_rollups} alt={""} />
-											</div>
-										</div>
-										<div className={"order-1 order-lg-2 col-12 col-lg-6"}>
+										<div className={"order-2 order-lg-1 col-12 col-lg-6"}>
 											<h2 className='title'>What are rollups and how do they work with Celestia?</h2>
 											<p>
 												Rollups are a relatively new type of blockchain. What makes them different is that they offload some
@@ -152,15 +178,36 @@ const WhatIsCelestia = () => {
 												with the added sovereignty that layer 1s enjoy. We like to call these blockchains sovereign rollups.
 											</p>
 										</div>
+
+										<div className={"order-1 order-lg-2 image-box--different col-12 col-lg-6 mb-4 mb-lg-0"}>
+											<div className='image-wrapper'>
+												<img className='img' style={{ width: `100%` }} src={celestia_what_are_rollups} alt={""} />
+											</div>
+										</div>
+									</div>
+								</section>
+
+								<section className={"what-is-a-modular-blockchain"} id={`${tableOfContent[4].id.replace(/\s+/g, "-").toLowerCase()}`}>
+									<h2 className='title'>And what is a modular blockchain?</h2>
+									<div className={"image-box--different"}>
+										<div className='image-wrapper'>
+											<img className='img' style={{ width: `100%` }} src={celestia_what_is_modular} alt={""} />
+										</div>
 									</div>
+									<p>
+										Modular blockchains are a new paradigm in blockchain design. Instead of one blockchain doing everything,
+										modular blockchains specialize and optimize to perform a given function. This specialization provides
+										breakthroughs in scalability, flexibility, and interoperability, enabling developers to build blockchain
+										applications for mass adoption.
+									</p>
 								</section>
 
 								<section
 									className={"whats-it-like-to-build-on-Celestia"}
-									id={`${tableOfContent[3].id.replace(/\s+/g, "-").toLowerCase()}`}
+									id={`${tableOfContent[5].id.replace(/\s+/g, "-").toLowerCase()}`}
 								>
 									<div className={"row mb-3 mb-md-5 justify-content-center"}>
-										<h2 className='title'>What’s it like to build on Celestia?</h2>
+										<h2 className='title'>Why Celestia?</h2>
 									</div>
 									<div className='row'>
 										<div className='col-z-index order-2 order-md-1 col-sm-12 col-md-5 col-lg-6 col-xl-5'>
@@ -182,7 +229,9 @@ const WhatIsCelestia = () => {
 												<div className={"col-12"}>
 													<div className={"why-use-card"}>
 														<h3 className={"why-use-title"}>Access dynamic throughput</h3>
-														<p className={"why-use-text"}>Support more users as your application grows.</p>
+														<p className={"why-use-text"}>
+															Lower costs and support more users and your application grows.
+														</p>
 													</div>
 												</div>
 											</div>
@@ -225,7 +274,7 @@ const WhatIsCelestia = () => {
 								</section>
 
 								<section className='celestia-community'>
-									<div className={"modularism-not-maximalism"} id={`${tableOfContent[4].id.replace(/\s+/g, "-").toLowerCase()}`}>
+									<div className={"modularism-not-maximalism"} id={`${tableOfContent[6].id.replace(/\s+/g, "-").toLowerCase()}`}>
 										<h2 className='section-title'>What the Celestia community stands for</h2>
 										<div className={"row justify-content-between align-items-center"}>
 											<div className={"col-12 col-lg-6"}>
@@ -250,14 +299,14 @@ const WhatIsCelestia = () => {
 										</div>
 									</div>
 
-									<div className={"layer-0-social-consensus"} id={`${tableOfContent[5].id.replace(/\s+/g, "-").toLowerCase()}`}>
+									<div className={"layer-0-social-consensus"} id={`${tableOfContent[7].id.replace(/\s+/g, "-").toLowerCase()}`}>
 										<div className={"row justify-content-between align-items-center"}>
 											<div className={"order-2 order-lg-1 image-box--rollups col-12 col-lg-6"}>
 												<div className='image-wrapper'>
 													<img className='img' style={{ width: `100%` }} src={celestia_connections} alt={""} />
 												</div>
 											</div>
-											<div className={"order-1 order-lg-2 col-12 col-lg-6"}>
+											<div className={"order-1 order-lg-2 col-12 col-lg-6 mb-4 mb-lg-0"}>
 												<h3 className='title'>Layer 0 is social consensus</h3>
 												<p>
 													To us, the most important layer in blockchains is social consensus. Blockchains are a tool to
@@ -269,6 +318,7 @@ const WhatIsCelestia = () => {
 										</div>
 									</div>
 								</section>
+								<section className={"start-using-celestia"} id={`${tableOfContent[8].id.replace(/\s+/g, "-").toLowerCase()}`} />
 							</div>
 						</div>
 					</div>

diff --git a/src/scss/modules/footer.scss b/src/scss/modules/footer.scss
@@ -205,8 +205,11 @@ footer {
 			line-height: 1.1em;
 			text-align: center;
 			margin-bottom: 65px;
+			@include media-breakpoint-down(lg) {
+				font-size: 36px;
+			}
 			@include media-breakpoint-down(sm) {
-				margin-bottom: 60px;
+				margin-bottom: 55px;
 			}
 		}
 		.footer-box-wrapper {

diff --git a/src/scss/pages/page-what-is-celestia.scss b/src/scss/pages/page-what-is-celestia.scss
@@ -15,7 +15,8 @@
 		}
 	}
 
-	h2, h3 {
+	h2,
+	h3 {
 		font-size: 36px;
 		font-style: normal;
 		line-height: 1.22em;
@@ -26,7 +27,7 @@
 		}
 		@include media-breakpoint-down(sm) {
 			font-size: 26px;
-			letter-spacing:0.1px;
+			letter-spacing: 0.1px;
 		}
 	}
 
@@ -136,6 +137,24 @@
 		}
 	}
 
+	.tell-me-about-celestia {
+		margin-bottom: 80px;
+		padding: 0;
+		@include media-breakpoint-down(lg) {
+			margin-bottom: 70px;
+		}
+		.title {
+			max-width: 250px;
+		}
+		.image-box--different {
+			height: inherit;
+			.image-wrapper {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+
 	.what-is-a-modular-blockchain {
 		margin-bottom: 80px;
 		padding: 0;
@@ -148,6 +167,24 @@
 		}
 	}
 
+	.data-availability-sampling {
+		margin-bottom: 80px;
+		padding: 0;
+		.image-box--different {
+			padding: 0 30px;
+		}
+		@include media-breakpoint-down(lg) {
+			margin-bottom: 70px;
+			padding-top: 40px;
+			.image-box--different {
+				padding: 10px 10px;
+			}
+		}
+		.title {
+			margin-bottom: 0px;
+		}
+	}
+
 	.what-is-data-availability {
 		margin-bottom: 80px;
 		padding: 0;
@@ -162,7 +199,7 @@
 			padding: 0 47px;
 			@include media-breakpoint-down(lg) {
 				background-position: 50%;
-				padding: 0 30px;
+				padding: 0px 20px;
 				.image-wrapper {
 					width: 100%;
 					height: 100%;
@@ -180,6 +217,9 @@
 		}
 		.image-box--different {
 			height: inherit;
+			@include media-breakpoint-down(lg) {
+				padding: 0 20px;
+			}
 			.image-wrapper {
 				width: 100%;
 				height: 100%;
@@ -358,7 +398,7 @@
 			@include media-breakpoint-down(sm) {
 				margin-bottom: 40px;
 			}
-			
+
 			.image-box--availability {
 				display: flex;
 				justify-content: center;
@@ -412,7 +452,7 @@
 		left: 0;
 		width: 100%;
 		float: left;
-		margin-bottom: 30px;
+		margin-bottom: 40px;
 
 		.category-menu {
 			@include media-breakpoint-down(lg) {
@@ -462,7 +502,7 @@
 				display: flex;
 				justify-content: center;
 				align-items: center;
-				background-color: #EDEDED;
+				background-color: #ededed;
 				border-radius: 4px;
 				margin-left: auto;
 			}
@@ -490,7 +530,6 @@
 				padding: 0 20px;
 			}
 
-
 			.toc-title {
 				font-family: $ruberoid;
 				font-size: 16px;
@@ -642,6 +681,6 @@
 
 .what-is-celestia + footer {
 	@include media-breakpoint-down(md) {
-		padding-top: 640px;
+		padding-top: 600px;
 	}
 }